En esta ronda de inspiración he recopilado juntos ejemplos de diseños de webs de eCommerce, para mostrar cómo se centran en sus productos para crear mejores experiencias.
Contenido tentador
Para que cualquiera disfrute el tiempo que pasa en un sitio web, es necesario que el contenido esté adaptado a sus necesidades. Una vez conseguido esto, es el momento de lograr que el contenido sea seductor. Es más fácil cumplir y mostrar este concepto trabajando con fotografías.
Observa el ejemplo de la página de producto de página de producto de Wonderland’s Store. Conforme te desplazas hacia abajo, las imágenes de sus productos están muy orientadas hacia un objetivo. La imagen de cada estampado, o sudadera, tiene el mismo suave tono gris neutro de fondo. Esto en el caso de Wonderland’s Store se trata de adorables ilustraciones de que representan a reconocidos famosos. Los estampados son simpáticos y super coloridos. Ésta es una manera sugerente de exponer el contenido.
Otra web que tiene excelente contenido es la del artista Janson Ratliff. En su página de inicio, ha organizado sus obras por categoría. Según vas hacia la parte inferior de la página, aparecen nuevos tipos de obras que atraen tu atención. El efecto no sería el mismo si las diferentes colecciones fuesen expuestas de forma intercalada y todas juntas a un mismo tiempo. Esto es importante porque permite al contenido crear una impresión única en cada momento en el usuario.
Ve directo al grano
En ocasiones es mejor «no andarse con rodeos» para crear una conexión emocional con el visitante.
Examinemos el diseño de presentación de J. Hanna. Lo que me chifla de la presentación es cómo va directa a lo importante. Dentro de las fotos de las joyas, no hay nada que nos distraiga. No son escenas elaboradas, o modelos posando en cualquier escenario, ni haciendo «nada». Es una sencilla y diáfana muestra de la joya portada por una persona. Los colores están bien compuestos para resaltar los tonos dorados. Puedo ver el producto, y por lo tanto, me puedo imaginar a mi mismo/a llevándolo. No es necesario adornar el contexto en el que se muestra la joya.
Información útil
Otra cosa que mejora la experiencia es eliminar el trabajo de invitados en la sección de información relacionada, como podría ser el envío gratuito, o las ofertas en curso. Una vez más, no necesitas adornar el contenido para hacerlo efectivo. Haz obvio para tus clientes potenciales que el envío gratuito está disponible y pasa a otra cosa. El envío gratuito debería ser la motivación secundaria (en el mejor de los casos) por la que visitan tu web, principalmente, están deseando comprar algo, y el hecho de saber que el envío es gratuito no debería hacer sombra a su objetivo primordial.
Un buen ejemplo de todo lo que acabamos de afirmar hasta ahora es la página de inicio de Ward Whillas. Lo primero que ves es la foto de una modelo, la fotografía está muy despejada y expone claramente su mensaje. Se trata de una hermosa fotografía que me emociona y despierta mi interés. Por último, colocan una pequeña etiqueta negra en la parte inferior izquierda para informar a sus clientes potenciales que proporcionan envíos gratuitos en US. No es un molesto banner parpadeante, por tanto consiguen que la experiencia en esta página de inicio sea mucho más placentera.
Me he topado con un tema para WooCommerce que también logra este efecto bastante bien. Como ves en el diseño, hay dos bloques que indican «Envío gratuito» y «Devoluciones gratuitas». Son mensajes directos, pero no dejan de encajar con la estética del diseño en su conjunto.
Vender con fotografías
Es muy difícil vender algo online con visuales pobres o mediocres. Una de las razones por las que las imágenes son cada vez más y más grandes, ocupando más espacio dentro de los diseños web es porque los humanos las comprendemos de forma innata; nos podemos identificar con ellas y procesarlas mentalmente a gran velocidad.
Tomemos como ejemplo el portafolio de Isabel Urbina Peña. En su página de inicio, muestra las portadas de libros que ha diseñado. Podría haber tomado la foto del libro sobre un fondo blanco, para aportar claridad, y haberlo dejado ahí. Pero eso no habría sido interesante. Eso es lo habitual. En cambio, Isabel ha diseñado imágenes gigantes para los fondos mostrando aún más su creatividad y acentuando el concepto del diseño del libro. El aspecto gráfico de estas imágenes de fondo es encantador, ayudan a construir una historia a partir del libro, que consigue atraer al usuario.
El sitio web de Tian emplea un efecto similar. Lo primero que ves cuando aterrizas en la página es una sencilla foto de una modelo jugando con un pañuelo. Las fotos son fantásticas en muchos sentidos. En principio, todo lo que ves es una modelo y su pañuelo, así que es fácil centrarse en ella. El pañuelo está flotando y sus vivos colores añaden dinamismo al conjunto. Por último, tenemos un sencillo CTA en la esquina superior derecha que indica con claridad en siguiente paso a seguir, pero que no emborrona el impacto de la foto.
He encontrado otro tema que expone los productos excelentemente. Se trata de Averly. En la captura de pantalla siguiente podrás observar como las fotos se emplean de dos formas diferentes. La primera enfatiza el producto, como un sombrero o un par de pantalones vaqueros cortos. Después, muestra el producto en un escenario real a través de la foto de una chica vistiéndolos por una calle. Esto crea proximidad con los consumidores. Puedes apreciar con claridad los dos tipos de fotografía, una te permite centrarte en el producto y la otra te permite soñar imaginándote en la vida real con el producto.
La consistencia en el diseño es clave
La inconsistencia en el diseño puede obstaculizar la fluidez de la experiencia del usuario. Cuando un usuario percibe inconsistencias, subliminalmente alza una tarjeta roja, lo dirigen a cadenas de pensamiento poco deseables. Tu persigues que el usuario permanezca centrado en la compra y que no perciba nada como inadecuado. Podría parecer trivial, pero la inconsistencia distrae mucho.
Kant es otro tema con diseño espectacular y consistente. Es audaz de principio a fin, y my placentero a la vista. Fácil de navegar y con un magnífico flujo en la estructura de la información, gracias a su clara interfaz de usuario. Las páginas de producto son, honestamente, muy bonitas. Todo el tema lo es.
Resumiendo
Espero que hayas disfrutado con mi recopilación de fantásticos temas para eCommerce que se centran en destacar los productos. ¡Me encantaría que estos ejemplos te inspirasen a crear tus propios diseños de eCommerce centrados en el producto!
Deja una respuesta