Una vitrina de e-Commerce móvil
La optimización de sitios web para la web móvil es una tarea ardua. Y la optimización de los sitios web de comercio electrónico para la web móvil es una bestia que los diseñadores y desarrolladores solo han empezado a domesticar.
No es sorprendente que las empresas más grandes estén adoptando primero el medio, probablemente porque tienen los recursos y el flujo de ventas para justificarlo. Después de todo, incluso si un sitio web de comercio electrónico obtiene un tráfico considerable, un pequeño porcentaje de ese porcentaje estará basado en dispositivos móviles. Y un porcentaje aún menor de ese tráfico completará sus ventas.
Con el impulso realmente solo comenzando en este ámbito, la experiencia de las personas con las transacciones de comercio electrónico móvil es limitada. Esto hace que el nicho sea experimental en el mejor de los casos. Afortunadamente, dada la naturaleza del comercio electrónico, el éxito se puede medir y probar cuidadosamente. Este es un medio que aún necesita definición.
Un gran obstáculo para el progreso es la escasez de ejemplos. Las galerías de surf para encontrar un montón de ideas interesantes ni siquiera están cerca de ser rápidas y fáciles. Solo hay unas pocas colecciones pequeñas de diseño móvil, incluso menos para el comercio electrónico. Para abordar esto, he recopilado 10 fantásticos ejemplos de comercio electrónico móvil. QR Se han incluido códigos para facilitar la navegación. Puede encontrar muchas aplicaciones para sus teléfonos móviles que pueden leer estos códigos.
1. Walmart
Un enfoque común de todos los sitios web presentados aquí es tener una página de inicio de tipo portal. Walmart no es diferente Sin embargo, aunque la mayoría de los sitios web dependen de listas basadas en texto, esta tiene una grilla de iconos, que es mucho más fácil de navegar. Muchos de los sitios web móviles que se incluyen aquí tienen listas que son tan pequeñas que son difíciles de usar. Walmart combina iconos con texto para que los objetivos sean fáciles de alcanzar.
El mayor problema en el sitio web de Walmart es que debe ir al sitio web principal para completar una transacción. Aún así, la información y los botones son extremadamente fáciles de usar, claros en su función y bien organizados.
2. Toys-R-Us
los Toys R Us el sitio web es un paso en la dirección correcta. Pero podría mejorar algunas cosas clave. Primero, encontré que la lista de botones en la página de inicio era demasiado pequeña. Entiendo la tentación de reducirlos para preservar el espacio, pero serían mucho más fáciles de usar con solo un poco más de espacio. Claro, tendría que desplazarme más, pero esa es una buena compensación.
Una vez que pasas la página de inicio, se pone mucho mejor. En particular, este sitio web tiene una de las mejores páginas de carrito de la compra. Los botones están limpios, y el equilibrio entre la densidad y la habilidad de tap parecen correctos. En general, un buen ejemplo de cómo comunicar claramente los puntos de acción.
3. Crocs
El desarrollo móvil todavía está muy dominado por los desarrolladores, por lo que encontrar un sitio web móvil bellamente diseñado es un alivio. Tal es el caso con Crocs . Su sitio web está bien implementado y es una belleza para mirar.
La vista de lista de catálogo es particularmente limpia. La única forma en que podría hacerse más fácil sería eliminar nombres de productos. De todos modos, cada fila es un objetivo fácil, con información clara y relevante.
4. JC Penny
Un problema que los diseñadores de JC Penny La tienda móvil enfrentada fue el alcance del producto. ¿Cómo se les permite a los usuarios navegar eficazmente por una amplia gama de opciones en una sección como los pantalones de hombre? La solución, un simple sistema desplegable, permite a los clientes filtrar rápidamente los criterios para llegar a los productos que necesitan.
Las imágenes grandes también son una buena característica. Observe qué fácil es ver los elementos reales en la vista de detalles del producto. Sospecho que la tasa de conversión de los sitios web móviles es extremadamente baja, y no puedo dejar de pensar que una gran fotografía como esta es una de las pocas armas para combatir esto.
5. Pottery Barn
La fórmula debería ser bastante clara ahora: logotipo en la parte superior, búsqueda debajo de eso, un gráfico de entrada para promocionar un producto o venta, seguido de una lista de categorías de productos principales. Y encontramos esa estructura exacta en Pottery Barn Sitio web móvil de.
Un detalle absolutamente brillante es la solución de este sitio web al problema de las migas de pan largas. Notará en la lista de categorías de productos que la ruta de navegación ha sido acortada para incluir solo la última parte de la cadena. Compare esto con la intrusión de la migaja en Toys-R-Us, y apreciará esta solución de ahorro de espacio.
6. Threadless
No es sorpresa que Threadless 'El sitio web móvil es fantástico. La página de inicio sigue la fórmula del portal de categoría, pero con un giro. Al igual que el sitio web de Walmart, el enfoque de la grilla aquí es mucho más fácil de usar que la mayoría. La fotografía es atractiva y hace que la tienda se sienta como una verdadera experiencia de compra. Algo sobre esto se siente menos mecánico que la mayoría de las otras tiendas cubiertas aquí.
Encontrará este mismo enfoque de grilla en la vista de lista de productos, que es un buen alivio y muestra muy bien los productos. Los diseñadores lograron minimizar el espacio desperdiciado manteniendo la facilidad de uso.
7. Brookstone
Brookstone La tienda móvil sufre de una página de inicio densa. Pero una vez que lo superas, el sitio web mejora. La gran fotografía clara es muy apreciada. No sé si las imágenes fueron optimizadas para dispositivos móviles, pero seguro que están entre las más fáciles de ver en este lote.
Un punto débil es la cantidad de desplazamiento requerida en la página del carrito de compras para llegar al botón de salida. El contenido podría funcionar con cierta reducción y optimización para cerrar el trato.
8. Dooney y Bourke
Realmente aprecio la fotografía en Dooney y Bourke Página de inicio de. Transmite exactamente lo que la empresa vende tan pronto como aterriza en la página. Un detalle sutil para decir lo menos, pero sin duda algo a considerar.
Un punto irritante acerca de la vista detallada del producto es que el campo de cantidad está en blanco por defecto. Tuve que agregar un "1" para agregar un producto a mi carrito. Pero es poco probable que yo ordene más de uno de la misma bolsa de $ 150.
Además, la página del carrito de compras se siente como una ocurrencia tardía. Pero le daré crédito a la compañía por poner artículos de acción clave en la parte superior. Las posibilidades de que los clientes olviden lo que acaban de poner en su carrito son escasas, por lo que centrarse en ayudarlos a llegar a la página de salida es una buena idea.
9. Buy.com
La página de inicio de Buy.com tiene algo que ninguna otra página de inicio en este artículo tiene: un producto real. La idea de la mayoría de las tiendas de comercio electrónico es crear un portal móvil que permita a los usuarios profundizar en la línea de productos completa. Si bien esto podría ser esencial, Buy.com me inspira a considerar alternativas.
¿Qué pasa si un mejor enfoque es enfocarse en las ofertas? La página de inicio es inmobiliaria de primer orden; Dado el desafío de cerrar ventas, ¿por qué no dedicar todo su esfuerzo a poner algo irresistible frente a los clientes? Tenga en cuenta que antes de llegar a la lista de departamentos en este sitio web, verá el producto presentado y cuatro enlaces separados para ventas, ofertas y especiales.
10. Petco
Una gran característica de la web móvil es que elimina la pelusa. Entonces, cuando veo la página de inicio de Petco En mi sitio web móvil, no puedo evitar preguntarme si la gran fotografía es útil de alguna manera. El nombre de la empresa y el icono de perro y gato que lo acompaña comunican el enfoque del producto. Entonces, ¿por qué mostrar esta imagen tonta? En cambio, pondría un trato especial o una grilla de íconos de categoría. Si bien aprecio el brillo del sitio web, podría modificarse un poco.
La empresa tiene una idea ingeniosa en la vista detallada del producto al destacar las ventas solo por Internet. ¿Por qué no dar un paso más y hacer algunas de ellas especiales para dispositivos móviles? Dejando a un lado la redacción, la página de detalles del producto es fantásticamente limpia y clara. Ocultar las descripciones completas debajo de las funciones clave y la información también parece una decisión sabia.
Conclusión
Diseñar sitios web móviles es difícil, y el diseño de sitios web de comercio electrónico móvil es quizás el doble. Averiguar cómo ayudar a los clientes a encontrar el producto correcto y cómo convertir ese proceso en una venta no es nada fácil. Espero que esta pequeña colección de recursos brinde algunas ideas nuevas para su próximo (o quizá primer) diseño de sitio web móvil.
Escrito exclusivamente para WDD por Patrick McNeil . Es escritor, desarrollador y diseñador independiente. En particular, le encanta escribir sobre diseño web, capacitar a las personas en el desarrollo web y crear sitios web. La pasión de Patrick por las tendencias y patrones del diseño web se puede encontrar en sus libros sobre TheWebDesignersIdeaBook.com . Sigue a Patrick en Twitter @designmeltdown .
¿Qué piensas si estos ejemplos? Por favor comparte en los comentarios a continuación ...