Los sitios de comercio electrónico están notoriamente ocupados y saturados.
Hoy examinaremos una tonelada de tiendas en línea que rompen esta tendencia al ser funcionales y atractivas. Cada uno de los ejemplos a continuación tiene una lección única que nos enseña sobre un buen diseño de comercio electrónico. ¡Empecemos!
Primero, el problema
Antes de que podamos apreciar los sitios que están bien diseñados, debemos pensar qué está mal con el formato tradicional de comercio electrónico. Alguna persona sabia comentó una vez que un camello es un caballo diseñado por un comité. Esta broma inteligente definitivamente se aplica a los sitios de comercio electrónico. Las tiendas en línea de gran renombre a menudo tienen demasiada información de demasiadas personas, lo que resulta en un caos de buenas intenciones y grandes ideas de características que nunca se integraron adecuadamente entre sí de manera sinérgica.
La captura de pantalla de arriba es solo una pequeña parte de la página de inicio de Kmart.com. Como puedes ver, es un choque de trenes. Navega por el sitio y verás que la página tomada en conjunto es aún peor. Al igual que Kmart.com, muchos sitios de comercio electrónico sufren un inmenso desorden. Hay tanta competencia en tu atención que el resultado final es que tus ojos rebotan de un lugar a otro sin un propósito o enfoque real.
Ahora la solucion
Echemos un vistazo en profundidad a algunos sitios que lo hicieron bien. Al observar cada uno de los sitios a continuación, compare la interfaz con la de Kmart para ver qué tan efectivo puede ser un diseño simple y limpio.
Xtreme Mac
Xtreme Mac tiene la experiencia de compra más original e innovadora que encontré en mi búsqueda (Icon Dock a continuación quedó en segundo lugar). Se le presenta una cuadrícula simple de tomas de productos con efectos de rollover brillantes y coloridos. Cuando hace clic en un elemento, en lugar de pasar a una página dedicada, toda la cuadrícula se desplaza de manera fluida para que la celda seleccionada pueda expandirse hasta ocho veces su tamaño normal. Luego se le ofrece una oportunidad de producto más grande, una breve descripción y la opción de aprender más o comprar ahora. Haga clic en otro elemento y el diseño dinámico volverá a aparecer para mostrar ese elemento.
Encontré que la interfaz de Xtreme Mac es hermosa y muy divertida para jugar. Lograr que sus visitantes no solo se impresionen con el diseño de su sitio, sino que realmente disfrute de la experiencia de compra es el santo grial del diseño de comercio electrónico. Cuanto más disfrutan de su sitio, más tiempo pasan en él. Lo que, en teoría, hace que sea más probable que compren algo (¡el objetivo final de cualquier sitio de comercio electrónico!).
Icono de muelle
Desde el principio, puedes ver que Icon Dock es un sitio hermoso lleno de ilustraciones de primer nivel. Sin embargo, lo que más me gusta de Icon Dock es cómo manejaron los carritos de la compra. Algunos sitios web hacen que sea bastante difícil ver y editar el contenido de su carrito, pero Icon Dock le ofrece un acoplamiento visual. de iconos que se quedan contigo mientras compras. Cuando quiera agregarle algo, simplemente arrastre el ícono al dock para soltarlo. Entonces, si desea eliminar algo del dock, simplemente presione la pequeña? X? en el icono
Esto está diseñado de una manera tan intuitiva que realmente no necesita ninguna instrucción. Funciona exactamente como esperas. Y para aquellos que no lo consiguen de inmediato, todavía existe la opción anterior de hacer clic en "agregar al carrito". botón. Esta es una característica importante. Al diseñar una interfaz única e interactiva, siempre piense si aún debe incluir la forma tradicional para aquellos que no entiendan su idea nueva y elegante. Esto le permite abrir su propio camino en la interactividad al tiempo que conserva la facilidad de uso.
Nike
Lo sentimos, pero me gusta mucho este sitio. Para conceder un poco, los tiempos de carga para cada página son bastante molestos. Sin embargo, el sitio en general es un tratamiento visual impresionante. Al igual que Kmart, tienen una tonelada de artículos en venta (quizás no tanto, pero el argumento sigue siendo válido), pero en lugar de saturar la página de inicio con artículos destacados no coincidentes, Nike ha integrado todo en la página de forma visual manera perfecta Tienen más de diez secciones únicas en una sola página, pero parece completamente cohesivo. Veamos algunas de las cosas que han hecho para lograr esto.
Lo primero que han hecho para cortar el desorden es bastante simple. En lugar de apilar pancartas de tamaño aleatorio que promocionan diferentes elementos uno encima del otro, como Kmart, Nike tiene una pancarta principal que gira entre tres mensajes. Esto seguramente no es innovador, pero es algo que muy pocos diseñadores consideran cuando se enfrentan a cargar una página a tope con contenido. Las bibliotecas pre-compiladas como jQuery hacen que este tipo de contenido rotativo sea un juego de tiras y realmente puede hacer que una página estática de otra manera cobre vida de una manera sutil y no molesta.
Lo siguiente que Nike ha hecho para reducir el desorden es colocar todas las secciones debajo del banner principal en un color de fondo continuo para evitar que se caiga. Mira lo que obtienes con las cajas de artículos de venta en el diseño de Kmart. Esto hace que toda la página se vea como si hubiera sido construida al mismo tiempo por los mismos diseñadores, en lugar de tener un diseño antiguo en el que se siguen acumulando más y más elementos no coincidentes en el tiempo. Se trata de gente sinergia.
Dyson
La lección que podemos aprender de Dyson es que puede hacer que las compras para un vacío se sientan como comprar un Mercedes. Independientemente de lo que esté vendiendo, si desea que se vea elegante, obtenga su inspiración de los sitios web que venden autos de lujo, yates o cualquier otra cosa que cueste más de lo que gana en un año. El fondo negro y gris se complementa realmente con toques de blanco y / o azul que realmente saltan de la página con contraste. Lo que realmente roba el espectáculo es la fotografía del producto (sin duda tanto Photoshop como la foto real), que realmente captura la esencia del atractivo diseño del producto. También note la bandera giratoria como en el ejemplo de Nike.Verá esto una y otra vez a lo largo de los ejemplos a continuación por una buena razón, es solo una excelente manera de poner una tonelada de contenido en un espacio pequeño sin ningún desorden visual.
SkinBox
Skinbox hace que la compra de pieles de foro sea increíblemente simple. La página principal está compuesta principalmente por una gran sección que muestra sus temas. Las categorías lógicas (light, dark professional, etc.) facilitan la búsqueda inmediata del tipo de skins que está buscando. Las máscaras de cada categoría se muestran en una cuadrícula grande con la opción de comprar ahora o ver más información sobre la máscara. La última opción es importante. Los sitios de comercio electrónico con demasiada frecuencia llenan una página con información aburrida del producto, lo que resulta en un diseño de texto pesado que intenta vender algo que realmente se trata de atractivo visual (al menos en este caso). Si está vendiendo el diseño de un artículo, considere poner las características específicas de la funcionalidad detrás de "más información". para que los usuarios que deseen esa información puedan encontrarla fácilmente y los usuarios que solo están navegando no se distraigan.
DropBags
Sinceramente, no tengo idea de lo que este sitio está vendiendo. ¿Cómo se usa? La sección dice algo acerca de poner la bolsa en un cubo, llenarla con plantas y hielo y removerla, pero no puedo imaginar por qué querría congelar la vida vegetal. Es posible que quieran que piense que es científico, pero estoy bastante seguro de que es brujería.
El punto es, es un producto funky. Están vendiendo una bolsa que pones en un cubo. Gran cosa ¿verdad? Sin embargo, han hecho que el sitio alrededor de la loca bolsa de cubo sea tan atractivo que casi me convencí de que necesitaba uno. Como diseñador web, no siempre puedes usar la cuenta de Nike. A veces, se obtiene un cliente que quiere vender un kit de extracción multiuso. que es esencialmente un forro de cubo caro. En estas circunstancias, debe hacer el mismo esfuerzo y creatividad que si estuviera trabajando para cualquier cliente de renombre. Haga que la experiencia de compra sea lo más simple y directa posible y haga que el entorno alrededor del producto sea atractivo y atractivo.
IKEA
Ikea gana el premio a la experiencia de compra más interactiva. Cuando recibo el catálogo de Ikea por correo, a mi esposa y a mí nos encanta sentarnos juntos y hojearlo para obtener ideas de diseño y ver qué productos nuevos y geniales han creado. Esto es agradable porque la experiencia de Ikea se ha estructurado cuidadosamente para que hojear el catálogo sea como caminar en su sala de exposición. En lugar de presentar artículos individuales, se ve una fotografía personalizada de una habitación completa completamente compuesta por productos de Ikea. Le proporcionan desgloses útiles de lo que cuesta cada artículo, así como el costo de comprar la habitación completa como un conjunto. Esto ayuda a las personas normales que no saben mucho sobre diseño de interiores a crear hermosas habitaciones.
Recientemente, Ikea ha transferido esta experiencia a su tienda en línea. Lo que obtienes es una experiencia que se parece mucho a hojear el catálogo, pero es mucho más interactiva y dinámica. Puede hacer clic en los íconos junto a ciertos productos para ver más de cerca o ver características ocultas, cambiar las vistas para mirar alrededor de la sala, o saltear la vista de la sala y ver una cuadrícula simple de productos. Al igual que en algunos de los otros ejemplos anteriores, Ikea está buscando una experiencia de compra que no solo sea agradable, sino que incluso podría considerarse divertida. Si está construyendo un sitio de comercio electrónico, piense cómo puede animar la experiencia agregando algo un poco más interactivo que su tienda en línea promedio.
Ladrón de bodega
Cellar Thief es solo un gran ejemplo de diseño web creativo. Los diseñadores mezclaron las tendencias actuales de diseño web con texturas ricas y colores brillantes de la industria del vino para crear una tienda en línea sorprendentemente atractiva. Tenga en cuenta que en realidad solo están vendiendo tres vinos separados, que es un conjunto de productos más pequeño de lo que probablemente tendrá en sus proyectos, pero todavía hay mucho que aprender de este ejemplo.
En primer lugar, aparte de los vinos en venta, hay un montón de contenido secundario en la página, como consejos sobre vinos, un blog, etc. Tenga en cuenta que cada una de estas pequeñas secciones se ha colocado en el lado derecho de una página llena de izquierda. texto alineado Esto está estructurado de modo que lo primero que vea (mirando la página de izquierda a derecha) sea el contenido principal: el producto a la venta. Solo después de mirar la página durante unos segundos, observará el contenido secundario. En esta página en particular, esto no sería cierto si ese contenido se colocara a la izquierda. La alineación a la izquierda de este contenido secundario podría darle una posición primaria no merecida en la jerarquía visual. Siempre intente imaginar el orden en el que un visitante verá los objetos en la página y estructurará su contenido en consecuencia.
Una última cosa sobre la organización de la información. Echa un vistazo a la cantidad de contenido que está relacionado con cada vino individual. Ahora imagine cómo se vería la página si el diseñador no hubiera pensado dividir esa información en pestañas. Al igual que el encabezado rotativo del contenido que analizamos anteriormente, las pestañas brindan una forma elegante y efectiva de meter una cantidad ridícula de contenido en un espacio pequeño y fácil de usar. Al diseñar materiales impresos, estoy constantemente suplicando a mis clientes que recorten la información requerida debido a restricciones espaciales. Por el contrario, el diseño web le brinda mucha más libertad para proporcionar la cantidad de información que su cliente desea en la forma contenida que requiere un buen diseño.
Sitios de comercio electrónico más atractivos
Aquí hay un montón de ejemplos de diseñadores que superaron el estigma del comercio electrónico abarrotado y torpe, centrándose tanto en el atractivo estético como en la funcionalidad. Pase por cada ejemplo y busque las cosas que mencionamos anteriormente.Hay muchos ejemplos de experiencias de compra divertidas pero simples, fotografía / arte increíble y organización de contenido creativo para inspirarte a la grandeza del comercio electrónico.
Baby Quasar
Zona de ooga
ShoeGuru
Bicicletas de Madsen
yo / denti / tee
Abercrombie & Fitch
Sucr?
ADN11
MacStylez
One + Only
Doce sur
Sony
Conclusión
Ahora que hemos analizado lo que considero que es la forma incorrecta y correcta de diseñar un sitio de comercio electrónico, me gustaría escuchar sus opiniones. Díganos qué le molesta de comprar en línea y qué es lo que le encanta u odia de los ejemplos anteriores.
Para obtener más inspiración para el comercio electrónico, visite Cart Frenzy, una galería dedicada al diseño de tiendas en línea.