11 ideas para la adaptación del ecommerce web a la gran pantalla

La revolución diseño adaptable en pleno apogeo, y aunque en ecommerce su uso no es tan agresivo como en otros sectores, la popularidad del método está creciendo rápidamente. Hasta ahora, el diseño adaptable afectó principalmente a los usuarios de ordenadores de sobremesa y dispositivos móviles. Son pocos los que prestó atención a las posibilidades de su aplicación para los modernos monitores de gran formato.

Imagínense. De estas estadísticas se puede entender, ¿tiene sentido crear la experiencia de usuario optimizada para los propietarios de grandes pantallas. Posiblemente, este tipo de optimización podría ser su siguiente paso en el diseño adaptable del ecommerce.

Tenga en cuenta el espacio blanco en la página web de IKEA con los resultados de búsqueda. Nuestro estudio de las listas de mercancías en el comercio electrónico sitios web reveló que para la estética de la percepción de los productos de mejor ajuste de los más grandes de la imagen para apreciar mejor los bienes. Colocarlos en el espacio de la pantalla es sólo una de las muchas ideas adaptable actualizaciones que se pueden ofrecer para ecommerce-sitios. No utilizados de la pantalla recuerdan extensas blancas del mar, y el contenido se acurruca en una pequeña parcela, optimizado debajo de la laptop.

Donde lógico sería colocar el contenido en una pantalla grande y libre, dejando más espacio entre los elementos de. Pero la adaptación de la escala puede ir más allá, utilizando incremental en el espacio de monitores de gran tamaño para las imágenes grandes, para insertar columnas adicionales con productos, para mejorar el contexto de la página y para el acceso rápido a relevantes de la acción (esto incluye el filtrado y la ordenación del botón “Añadir al carrito” y así sucesivamente). En este artículo vamos a hablar de la adaptación a escalar en ecommerce-sitios web para los usuarios de pantallas de gran formato.

Estudiaremos el principio básico de la adaptación de escala, así como la de 11 de ideas relacionadas con la solución de los distintos problemas de usabilidad. No por el hecho de que el propietario de la gran pantalla es opcional contenido de dudosa calidad. De la misma manera, un usuario con una pantalla de menor tamaño, difícilmente esté dispuesto a renunciar a la información pertinente en el sitio web. Por lo tanto, muestre a todos uno y el mismo contenido, simplemente incluya de forma distinta, optimice debajo de la pantalla que se muestra.

No inserte en la página de contenido adicional sólo porque la pantalla tiene un espacio libre. Al mismo tiempo, no vale la pena echar un importante contenido debido a que la capacidad de la pantalla son limitados (en el artículo con los resultados de nuestras pruebas, este principio se describe en detalle). La única causa de insertar contenido adicional puede ser el caso cuando este contenido tiene sentido mostrar sólo en monitores de gran tamaño. Encienda la señal de alarma cada vez que surge una la idea de añadir nuevos contenidos para pantallas de alta resolución.

A veces realmente tiene sentido hacerlo. Pero si el contenido no es tan importante, para mostrar en las pantallas, entonces no vale la pena ponerlo donde sea. Y por el contrario, es significativo el contenido debe de una u otra forma de estar presente en todas las versiones de diseño. Así pues, hemos decidido seguir el principio general de.

Evitar la inserción de nuevos contenidos, y en lugar de optimizar el contenido existente bajo las pantallas de diferentes tamaños. Veamos algunas ideas adaptable de escala, que son ideales para sitios de comercio electrónico. Las siguientes ilustraciones son dibujos realizados sobre capturas de pantalla del sitio Wayfair.com. En este momento el diseño de la Wayfair no (no hay ni siquiera un ajuste de página al tamaño de su navegador), el tamaño de la página permanece constante, independientemente de como ve el usuario.

Este es un gran ejemplo para ilustrar la optimización de los diferentes tipos de páginas de comercio electrónico sitios de internet de la. Real de la aplicación de estos ejemplos, lo más probable, será necesario que usted alineación o cambiar el tamaño de otros elementos de la página (tales como la cabecera y el pie de página), pero para mayor claridad en nuestras ilustraciones de estos elementos sólo un poco removidas. Ejemplos debe considerarse como un inspirador mensaje, y algunos de ellos, en función de sus objetivos y las características de su sitio web, pueden ser más apropiados que otros.

El formulario de suscripción. El formulario de inscripción, con bisagras en la parte superior de la página. En las pantallas grandes el formulario de suscripción se puede hacer menos molesto si con cinta adhesiva a la parte superior de la página.

En este caso, no se bloqueará el contenido y al mismo tiempo, es bien visible a medida que el desplazamiento de la página (ya que se ubica en la parte superior). Los usuarios que no estén interesados en registrar, será más fácil de ignorar el formulario de suscripción, no tendrán que realizar ninguna acción para deshacerse de ella. Nuestros estudios de usabilidad han demostrado que a menudo los usuarios cierran las ventanas emergentes (incluyendo el formulario de registro), sin leerlos. Es un tipo especial de “ceguera”.

Yo creo que más bien leerán el contenido de este formulario, si la posición de su costado, entonces no tendrán que buscar la manera de salir deshacerse de ella. Acceso rápido a y . Más populares de los botones de la hiedra y página dividido en un bloque especial.

Si en la pantalla un montón de espacio, se puede colocar en la página principal de un bloque especial con el más popular de los botones de la hiedra (creación de una cuenta o encargo para usuarios registrados) y (coordenadas de servicios de soporte y preguntas frecuentes). Por supuesto, estos botones deben estar disponibles en los originales de los lugares en la parte superior y la parte inferior del menú. Este es un ejemplo de como el existente en la página de contenido de forma diferente se muestra en pantallas diferentes.

No es un nuevo contenido, que ya está presente en la página, pero los propietarios de los grandes pantallas se muestra de otra manera, además de optimizar su experiencia de usuario. En este caso es mejor pintar este bloque un poco más claro, para que se perciba como un secundario con respecto a otro contenido de la página. diapositivas.

diapositivas, ubicados en varias columnas. El carrusel en la página principal a menudo crean problemas con la usabilidad, por lo cual se debe usar con precaución (véase. 8 requisitos de , que hemos sacado en el resultado de nuestros estudios).

Por supuesto, en las pantallas grandes, el carrusel puede simplemente estirar, aumentando el tamaño de las diapositivas. Sin embargo, si estas diapositivas de un cuadrado o un nivel lo suficientemente alto, se pueden sacar fuera de la visibilidad del resto de contenido de la página y, por lo tanto, reducir el total de la cantidad de contenido, incluso en la gran pantalla. La solución puede ser el desplazamiento del carrusel de manera que en cada momento se ha mostrado más de dos o tres diapositivas. Si el número total de diapositivas coincide con el número de altavoces, el carrusel se puede sustituir estático diseño de varias diapositivas.

Si diapositivas más que de columnas, es mejor desplazarse o para colocar en varias líneas. Llena la cesta. La papelera de reciclaje aparece en la pantalla cuando el usuario agrega en uno o dos productos.

La mayoría de los propietarios de e-commerce sitios tienen la esperanza de que después de que el visitante agrega al carrito de la compra, se pasará a una de las dos acciones. O continuará ver los productos y añadirlos a su cesta, o comprar ya puesto en la cesta de productos. Para aumentar el volumen de pedido no está mal, si el visitante continuará ver los productos, pero ya que él puede y no hacer una reserva, especialmente si no le alcanzaría el tiempo para la navegación por el sitio en busca de más artículos. Poniendo en la barra lateral normal de la papelera de reciclaje desde el menú superior, es mostrar al visitante un panorama general (todo lo que ya construyó en su cesta de la compra) y recuerda que estos excelentes productos es mejor comprar antes de salir de la página.

Esto le ayuda a controlar sus acciones y no se olvide de cerrar el trato. Investigando a los usuarios navegar por la página principal y en las categorías de productos, encontramos que la gente a menudo de nuevo y volviendo a la papelera de reciclaje simplemente para mostrar que ya están allí pusieron. Como ejemplo se puede volver a ver sólo de que está seleccionado el modelo de la cámara, para comprar una funda para ella. Si el reciclaje de todo el tiempo estar en la pantalla, el usuario puede ver el contenido de su cesta de la compra, hojea las páginas de un sitio, y es más fácil encontrará otros productos.

Las columnas adicionales de productos. En las pantallas grandes productos se pueden colocar sólo en los principales, sino el más columnas.

Uno de los más evidentes formas de uso de un exceso de espacio de pantallas más grandes, consiste en la reconstrucción de la lista de productos por lo tanto, para que ocupen adicionales de la columna. Esto permite aumentar considerablemente el número de productos ofrecidos en la pantalla. En el ejemplo anterior, el usuario puede conocer de un vistazo ya no 6, y 10 productos. Este enfoque es capaz considerablemente optimizar la navegación por el catálogo de productos en la pantalla grande, pero se debe utilizar con cautela.

Si en la pantalla se mostrará demasiado columnas con los productos, el usuario será el más difícil de analizar la mirada de la página. Él simplemente se puede ahogarse en la información, y sus ojos se cansarán atravesar con una línea a la otra (por esta misma razón existe y la longitud óptima de la cadena de texto). Para no sobrecargar el usuario de la información, no lo coloque en la pantalla de más de 5 a 8 columnas (en función del tamaño de las imágenes y la cantidad de artículos en la columna).

Más grandes imágenes de los productos. Los elementos de la lista de productos se escalan para obtener una imagen con buena resolución y por lo tanto aumentar la cantidad de presentada la información visual. Otra manera obvia de aprovechar el espacio adicional es escalar cada elemento de la lista de productos que llega a la pantalla grande. Si el tamaño de la imagen aumenta, el usuario podrá estudiar más en detalle cada producto.

Esto genera beneficios tangibles a la venta visualmente percibido de los bienes, así como facilita el usuario para su identificación y selección de. Sin embargo, debe tener cuidado, ya que una simple escala de las imágenes a menudo conduce a un aumento de su altura (suponiendo que se mantienen las proporciones), y finalmente el número total de productos en la pantalla, en gran medida puede disminuir. En la ilustración de arriba de la segunda serie de productos casi ha desaparecido completamente de la vista.

En este caso hay que buscar un compromiso entre el nivel de detalle de las imágenes y la cantidad disponible para el examen de las mercancías. Zoom y desplazamiento de las listas de productos. Artículos en la lista de ampliar y reordenadas en una nueva columna.

La combinación de las dos anteriores, el enfoque agregar columnas adicionales y el aumento del tamaño de cada imagen — matamos dos pájaros de un tiro. La información visual de cada producto se hizo más y más, pero bien visible y la imagen general, porque la lista de reorganizó con la consideración adicional de la columna, y ahora sus elementos se muestran en la máxima altura. Este método permite mostrar más información visual de cada producto, y no reducir el número total se muestran en la pantalla de productos.

Adicionales de las columnas, el número de productos que el usuario puede conocer de un vistazo, aumenta. Por lo tanto, hemos llegado a la vez dos objetivos. Han aumentado el número total se muestran productos y mejorar la capacidad de resolución de cada uno de ellos.

“Pegajosos” filtros. Los filtros se pueden colocar en el lateral, “adhesiva. atascado” al borde de la pantalla. Otra forma de usar el espacio libre de la pantalla consiste en colocar las herramientas para filtrar y ordenar en el campo de visión del usuario con la ayuda de la “pegajosa” los elementos de la. Esto le dará al usuario información adicional acerca de los productos que en este momento mirando en su pantalla, y le ayudará a cambiar fácilmente de los criterios para su selección.

Si algún contenido en su página duplicado, esto reduce la capacidad de la pantalla para la colocación actual de contenido. Por lo tanto, cada vez más, fijando el contenido en el campo de vista del usuario, es importante hacerlo sólo allí, donde él no tomaría demasiado espacio. Por ejemplo, no adjunte el contenido de la parte inferior o superior de la pantalla sin tener en cuenta la altura visible de la zona (se puede aprender con la ayuda de medios de comunicación de la consulta).

Sin embargo, después de las comprobaciones de dichos adjuntos filtros pueden tardar incluso varios de los altavoces con los bienes, su mejor también dividir en dos o tres columnas. Si usted tiene un montón de espacio en la parte de arriba de la pantalla, utilice los filtros en el menú horizontal, y si el exceso de espacio horizontal — colocarlos en la barra lateral. De manera similar, puede dinámicamente alinear los límites de truncar los resultados de la filtración al cambiar la altura de su navegador. Productos vistos recientemente.

Para facilitar la navegación de los bienes en la barra lateral se puede colocar de ofertas de productos o historial de bienes. Si el usuario ha pasado a la página con los productos básicos y ha decidido que el producto no es adecuado, o bien continuará la búsqueda o abandona el sitio. Usted está interesado en que, para facilitar al usuario la elección de la primera opción. Si usted coloque propuestas alternativas o complementarias de las mercancías en la barra lateral (cm. Ilustración de arriba), lo dice un usuario, las páginas a las que se puede pasar, si visto de la mercancía le parece inadecuado.

También una buena solución puede ser la colocación de la lista de recientes productos. Esta simplificación de la transición de un producto a otro, ayuda a mejorar la búsqueda personalizado. Así se puede promover enteras categorías de productos, pero lo mejor es seguir por el usuario, ofreciéndole en cada página, el siguiente paso para la transición. Sin embargo, a veces la primera estrategia funciona mejor, ya que permite al usuario ver las ofertas del sitio de una forma más coherente, mientras que las transiciones de ida y vuelta son menos predecibles.

Asegúrese de que su oferta de rutas mantienen un cierto equilibrio entre las categorías y el destino de los bienes. “Pegajosos” de la tarjeta de bienes. La tarjeta de bienes y el botón de “Agregar al carrito” que se puede conectar en la parte superior de la pantalla y, a continuación, el usuario va a ver, viendo el largo de las páginas de.

La página con la descripción de los productos pueden ser muy largas, ya que se incluyen imágenes de los productos, descripciones, especificaciones, opiniones de clientes, ofertas alternativas o adicionales de productos, lista de las preguntas frecuentes, etc. Nuestros estudios de usabilidad muestran que cuanto más información sobre el producto, mejor (si, por supuesto, es contenido de calidad. útil, detallado y creíble). Y con frecuencia, el usuario termina esta visualización ya muy lejos de las principales características de la mercancía (nombre, precio, las modificaciones y el botón “Comprar”).

Para el principal de la marca que el contenido sea siempre a la mano, puede anclarla a la barra lateral y, a continuación, el usuario va a ver todo el tiempo, mientras se desplaza por la página. Esto es un resumen puede ser una versión ligeramente modificada de los iconos de la mercancía en la lista, o parecer un poco más atractiva a la vista. Pero sólo puede proporcionar al usuario más importante el contenido. Nombre del producto, su precio y su modificación, y por supuesto en el botón “Poner en la papelera de reciclaje”.

Deje que sea cercano, cuando el usuario lee la siguiente reseña feliz poseedor de este producto. Los datos de pedido y las coordenadas de los servicios de apoyo. Si en la pantalla de espacio suficiente, se puede colocar en la barra lateral de datos por encargo y las coordenadas de los servicios de apoyo.

Los estudios muestran que en las pantallas sigue siendo a menudo un montón de espacio no utilizado en horizontal. Esto ocurre porque, en primer lugar, las páginas web generalmente se enfocan en una cosa, y en segundo lugar, formas pueden causar problemas de usabilidad. En la pantalla grande es el mar blanco el espacio puede ser ocupado final de la información del pedido y los contactos de los servicios de apoyo. En este caso, la información sobre el pedido estará siempre en el campo de visión del usuario, recordándole los productos que puede comprar, literalmente, este minuto.

Guía de asistencia técnica también se puede mover hacia arriba desde su posición normal en el pie de página. Ya que se convierten en accesibles para el usuario, si tienen algún problema durante la navegación. Si su servicio de asistencia y, además, muy cargado, usted puede publicar información acerca de ella, más selectivo, en base a la información de la tarjeta de pedido o en función de cómo haya avanzado el usuario en su búsqueda y de hecho si había algún error.

Es sorprendente lo poco que e-commerce sitios optimizan sus páginas para pantallas más grandes. Incluso los 18% de los líderes, que tienen algún tipo de experiencia en la optimización, en realidad, lo hicieron sólo los primeros tímidos pasos en esta dirección. Entre tanto, teniendo en cuenta la gran segmento de usuarios con grandes pantallas la adaptación de la escala tiene un enorme potencial para el desarrollo de la. Aplicando la adaptación de la escala, es importante respetar un principio fundamental de.

“El mismo contenido, el otro embalaje”. Lo que está en la pantalla, el usuario tiene más espacio, no significa que en él se puede tumbar el aluvión de contenido inapropiado. Explora todo tipo de formas de representar el contenido existente y crea una mejor experiencia de usuario para los propietarios de grandes pantallas. Todos los 11 de las ideas que aparecen en este artículo, se basan en el principio de que “El mismo contenido, el otro embalaje”.

Tomamos el contenido existente, escalable o mueve, a veces un poco, y a veces es bastante esencial. Si usted tiene sus propias ideas sobre la optimización de ecommerce sitios web para monitores de gran tamaño, compártelas en los comentarios.

Source: google.co.uk/blog/6-tools-that-simplify-work-with-offshore-development-teams/

Leave a Reply