El mundo del eCommerce e Internet va a una velocidad de vértigo. Dónde estoy viendo cambios importantes últimamente es en las tendencias de diseño web a la hora de crear una tienda online. ¿Por qué? Sin duda por el creciente uso de nuestros dispositivos móviles.
Pienso que estamos en pañales en lo que se refiere a la adaptación de webs a navegación móvil, pero muchas empresas ya están realizando el cambio. Ya sea con webs con versión específica para móvil (m.dominio.com), o webs full responsive. Te preguntarás, ¿qué es mejor? Web mobile, responsive o APP?
Para responder a la pregunta te recomiendo un ebook de Metriplica que aún siendo del 2013 sigue siendo vigente: Descargar ebook
Contenido del artículo
Por cierto, ¿Qué es una web Responsive?
Pues una web que adapta su aspecto, diseño y disposición de elementos en función del tamaño del dispositivo que la esté visualizando.
Dicho esto, vamos a ver 7 tendencias de diseño eCommerce y web para 2015.
1. Diseño Responsive
Al diseñar la tienda online tendremos en cuenta las distintas presentaciones a maquetar. La capacidad de adaptación de este tipo de web ha hecho que los diseños se hayan vuelto más “grandes”, ocupando toda la pantalla.
Ejemplo de la nueva web de Trilogi.com, totalmente Responsive:
- Menú escondido
El tener que adaptar la web a pantallas pequeñas ha llevado a esconder el menú de categorías y para acceder al mismo la tendencia es el botón “hamburguesa”.
Ejemplo de la web mobile de Sprinter:
- Carrusel en Homepage
La tendencia es ubicar en la pagina inicial un carrussell “enorme” mostrando ofertas especiales o bondades de nuestro producto o servicio. Y ya seremos super trending si usamos efectos Parallax .
A tener en cuenta las recomendaciones anteriores en este tipo de elementos.
2. Letra más grande
Podemos apreciar como cada vez los textos mostrados en páginas web o tiendas online son de mayor tamaño. Seguro que el factor “Responsive” tiene mucho que ver, pero también que la gente lee poco, se guía más por las imagenes.
Dí poco, pero dilo grande y de forma efectiva.
3. Contenido en vídeo
La verdad es que no sé si será tendencia o no, pero debería serlo. En muchas webs se están utilizando como background. Podéis comprobarlo en la web de Paypal , con poco espacio comunica mucho, y de forma visual.
Para mí, imprescindible en una tienda online.
4. Botones Fantasma
Cada vez más utilizados. Se integran muy bien en el diseño, ideales para cuando no se trate de las principales “llamadas a la acción”, cuando sean secundarios o en webs exclusivamente corporativas.
5. Scroll sin hacer click
Aún recuerdo cuando hace pocos años la tendencia era que una web se tenía que mostrar toda en pantalla, presentada de forma horizontal, que no se tuviera que hacer scroll.
Pues las webs se están volviendo enormes y para poder mostrar todo el contenido tenemos que tirar “pa bajo” sí o sí. La tendencia está en evitar que el visitante tenga que hacer clics, que una vez se vaya desplazando para abajo la información se vaya cargando y mostrando (cómo si fuera un móvil).
Al margen del menú de navegación principal, empieza a ser habitual, como menú secundario guiar al visitante de forma mucho más visual.
Un ejemplo de una parte de la homepage de Furest Barcelona:
y otra por aquí:
7. Vista previa o «Quick view»
En muchas ocasiones las tendencias las marcan muchas de las plantillas disponibles por ahí, muchas de estas incorporan como función el “QuickView o Quickbuy”.
Permite visualizar un resumen del producto así como rápidamente incorporarlo en la cesta de la compra, sin tener que entrar en la ficha del mismo. A mi, particularmente, no me gusta. A no ser que se trate de una tienda en la que la cesta media de compra sea de más de 3 productos (como un supermercado), o en el caso de ser enlazado desde paginas de no compra directa como un lookbook de moda.
Os dejo con capturas de pantalla de templates más vendidas de uno de los portales más conocidos. Pienso que como un diseño a medida no hay nada, es simplemente para ver cómo estas tendencias se reproducen en los diseños más solicitados.
Diseños grandes, limpios y planos.
Pincha en las miniaturas para ampliar la imagen.
¿Me ayudas a difundir el artículo compartiendolo en Twitter o Google plus? Gracias! 🙂
Completísimo artículo Llorenç. Yo no tengo tienda online pero me sirve para cosas de la web. Hasta pronto, ya me he suscrito al blog
Muchas gracias Miguel! un placer tenerte como lector. Sí, la mayoría de puntos son aplicables a webs sin venta online.
Hola Llorenç! Como siempre en todos tus posts, muy completos y recomendables para toda la gente que queremos estar bien informados y rodeados de gente altamente experta como tú. Saludos! 😉
Gràcies Jordi! Espero leerte de nuevo por aquí 😉
Gracias por la informacion, los tips son muy buenos y deben de ser considerados, en nuestro caso ya estamos trabajando en ello.
Saludos
Hola Felipe, qué bueno volver a verte por aquí. Sí, es importante tener la web al día! Saludos
Hola, os muestro el ejemplo de como hemos adaptado nuestra web con diseño adaptativo «responsive»: http://www.asturalba.com/ ¿Qué os parece?
La adaptación Responsive está bastante bien, aunque el diseño no es muy actual
Que tal. Gracias por la informacion, estuviera completa tu informacion si se hubiece incluido los likns de los demos las plantillas. No tengo tienda ni nada por el estilo pero bueno tener conocimiento de ello. Gracias espero no haberte ofendido de ante mano gracias por la info… Saludos