Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Sonic Electronix, una compañía de electrónica de consumo. ¡Saltemos y veamos lo que pensamos!
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Sobre Sonic Electronix
? Sonic Electronix es un minorista líder mundial de audio para autos y otros productos electrónicos de consumo. Nuestro almacén transporta más de 15,000 productos electrónicos de alta calidad. Brindamos un servicio inigualable a precios inmejorables. Comience a construir el sistema de audio para automóvil de sus sueños hoy y disfrute de un servicio superior y un envío rápido. También ofrecemos una amplia selección de productos de audio profesional, equipos de DJ y karaoke para aplicaciones que van desde el nivel de entrada hasta el especialista en audio más serio.
Aquí hay una captura de pantalla de la página de inicio:
¡Puntúalo!
Primeras impresiones
Sonic Electronix parece un minorista en línea bastante típico. De un vistazo, hay varios aspectos del diseño que creo que están bien hechos. Puedo decir que definitivamente ha habido algún esfuerzo aquí para darle al sitio un atractivo estético, lo cual es genial. He visto innumerables sitios en este género con un verdadero lío de una página de inicio.
Desde el principio, lo que me atrae son las tomas limpias y consistentes del producto. Cada producto se muestra en un fondo blanco y se ve profesionalmente presentado. Esta dedicación a la coherencia se intenta en todo el sitio en varias formas mediante la repetición de colores, estilos de botones, etc.
? Hay puntos en los que la página parece estar realmente luchando contra el desorden? ?Dicho todo esto, hay puntos en los que la página parece estar realmente luchando contra el desorden, como suele hacer la gran mayoría de las tiendas en línea. Además, hay varios ajustes y cambios que podrían ejecutarse para mejorar la usabilidad y el flujo de la página. En última instancia, creo que se podrían hacer grandes mejoras. Vamos a descomponerlo y ver cómo.
El comercio electrónico es diferente
La mayoría del diseño web se puede abordar desde un punto de vista similar. Puedo tomar algunos principios básicos de diseño y revisar los sitios web más feos. Sin embargo, lo interesante del comercio electrónico es que es un campo peculiar donde a veces los sitios con el peor diseño parecen ser los más exitosos.
"Debemos tener en cuenta al criticar un sitio como este que este género opera según sus propias reglas".¿Significa eso que deberíamos intencionalmente hacer que los sitios de comercio electrónico sean feos? Absolutamente no. Sin embargo, al criticar un sitio como este, debemos tener en cuenta que este género opera según sus propias reglas y que algunas cosas que pueden parecer realmente importantes en el diseño de una cartera son casi irrelevantes en esta situación.
Definitivamente es una buena idea mirar constantemente alrededor de la industria y decidir quién está bien y por qué. Cuando una compañía tiene cientos de miles de dólares para invertir en la investigación de diseños y flujos de compra más efectivos, ¿qué se les ocurre? Como le doy consejos a continuación, trataré de obtener referencias externas para ayudarnos a mantenernos en el punto.
Título de la página
Una de las primeras cosas que hago cuando visito un sitio es mirar la barra de título. Esto es completamente instintivo, la web me ha entrenado para pensar que esto me dirá de qué se trata un sitio. Esto es lo que veo en la página de Sonic Electronix.
Como puede ver, la barra de título se centra únicamente en el audio del automóvil. Ahora, estoy dispuesto a apostar que esto es para propósitos de SEO y realmente es más para el cramming de palabras clave que para transmitir información al usuario. Estoy a favor de optimizar su página para los motores de búsqueda, pero no si reduce la utilidad para el usuario, y eso es exactamente lo que está sucediendo aquí.
"Estoy a favor de optimizar su página para los motores de búsqueda, pero no si reduce la utilidad para el usuario".El problema aquí es que, tan pronto como leo esto, si no estoy buscando un equipo de audio para automóvil, me voy. Es probable que ni siquiera mire el resto de la página, especialmente si tengo cinco pestañas abiertas de una búsqueda en Google y las recorro rápidamente para ver cuál tiene los productos que necesito.
Incluso si el audio del automóvil es su mayor vendedor, y parece que sí lo es, creo que esto podría volver a trabajar en algo más indicativo de los productos que realmente vende. Por ejemplo: "Audio para automóvil, GPS, seguridad, teléfonos celulares y más". Algo como esto golpea esas palabras clave que te gustan y al mismo tiempo transmite una descripción precisa del sitio.
Encabezamiento
Uno de los lugares principales en la página que veo luchando contra el desorden es el encabezado. Este es un problema extremadamente común en todos los tipos de sitios web porque desea abarrotar esa primera impresión tan importante.
Mientras pensamos en cómo mejorar este encabezado para hacerlo un poco más fácil de usar, vamos a tener una perspectiva externa. Tan pronto como comencé a buscar en varios sitios de comercio electrónico populares, noté algo muy interesante sobre cómo tratan el espacio en sus encabezados. Aquí hay dos ejemplos, el primero de Amazon y el segundo de Overstock.
¡Mira el tamaño de esas barras de búsqueda! Obviamente, consideran que la función de búsqueda es el destino principal para los usuarios que visitan su sitio y quieren asegurarse de que se presente de la manera más prominente posible.
"Definitivamente sugiero probar una página con el encabezado reelaborado para la búsqueda de características por encima de todo lo demás".En Sonic Electronix, hay espacio significativo disponible para un gran campo de búsqueda, pero se sacrifica en busca de otras ideas. Definitivamente, sugiero probar una página con el encabezado modificado para la búsqueda de características por encima de todo lo demás.
Navegación
Me he movido de un lado a otro sobre cómo me siento con respecto a los mega menús que contienen un millón de enlaces, pero un lugar que parece funcionar bien es en los sitios de comercio electrónico que tienen una gran cantidad de contenido para analizar. Los menús de navegación de Sonic Electronix están bien organizados y hacen que sea bastante fácil detectar rápidamente lo que estoy buscando comprar.
Sin embargo, una vez más, creo que el desorden de encabezados está trabajando en contra de nosotros en esta área. Si dirigimos nuestros ojos hacia donde esperamos que esté el menú de navegación, sí lo encontramos, pero está un poco perdido en un mar de enlaces, degradados, marcas de verificación, menús desplegables, etc.
El buen diseño se trata de tomar decisiones. Tienes que decidir qué es importante y cómo lo vas a resaltar. Si te preocupas y tratas de hacer que todo sea importante, entonces todo lo que estás haciendo es no hacer nada importante.
Elementos destacados
A continuación, vamos a saltar a la parte de la página de elementos destacados. Aquí es donde obtiene su primera dosis visual real de la variedad y calidad de los productos que se ofrecen en el sitio. Los elementos están ordenados ordenadamente en una cuadrícula y, como señalé anteriormente, utilizan un bonito aspecto de fondo de estudio con mucho espacio en blanco.
Realmente me gusta esta área, pero hay algunos problemas que tengo con ella. En primer lugar, desde la perspectiva de la usabilidad, es bastante molesto que cada casilla completa no sea un área en la que se pueda hacer clic. Se puede hacer clic en la imagen, así como el nombre del producto y "Comprar ahora". botón, pero si mira a su alrededor en otros sitios, la tendencia aquí es hacerlo para que pueda hacer clic en cualquier lugar dentro de los límites del cuadro para ir a la página dedicada del producto. Con la configuración actual, podría llevar a una persona unos pocos clics para hacerlo bien.
"Encontrará que los usuarios son bastante cautelosos al presionar los botones en los sitios de comercio electrónico por temor a comprar algo de forma involuntaria".Además, me siento como el? Comprar ahora? los botones son vagos No estoy completamente seguro de qué significa eso y cómo se relaciona con lo que sucede cuando presiono el botón. ¿No estoy comprando desde el segundo que carga la página? ¿Este botón comprará el artículo? ¿Es simplemente algo en lo que hago clic para obtener más información?
Descubrirá que los usuarios son bastante cautelosos al presionar los botones en los sitios de comercio electrónico por temor a comprar algo de forma involuntaria. Cuando cree un botón, asegúrese de que me prepare adecuadamente para lo que sucederá cuando lo presione.
¿Por qué comprar Sonic?
Mi parte menos favorita de la página es "¿Por qué comprar Sonic?" Sección cerca de la parte inferior. Esta sección es simplemente una caja con cuatro párrafos grandes. ¿No está realmente diseñado? tanto como tirado. Se siente como si fuera una gran parte del contenido que el diseñador simplemente no tenía idea de qué hacer con:
Este es un gran bloque de información aburrida que simplemente nunca leeré como usuario a menos que usted lo haga más interesante. Entonces, ¿cómo podemos arreglarlo? Resulta que el contenido aquí es realmente una lista de características: envío rápido, pagos seguros, etc. Teniendo en cuenta esta información, no es difícil encontrar alguna inspiración sólida. Echa un vistazo a cómo Apple Store en línea aborda este problema:
¿Ves cuanto mejor es eso? En la sección de Sonic Electronix, todo se arroja en una columna incómodamente larga que está vacía de imágenes o imágenes atractivas. Apple abordó esto de manera muy diferente al dividir el contenido en cuatro columnas, manteniendo el texto en un breve párrafo y llamando su atención con hermosos íconos y fotos.
Pie de página
Un último comentario antes de concluir esta crítica: creo que el pie de página es un poco extraño:
No estoy seguro de que necesite las viñetas o el subrayado del enlace, pero estoy seguro de que ambos juntos hacen que esta área sea difícil de leer. Si tuviera que deshacerme de uno, tiraría los subrayados para que el pie de página se pareciera más al de Newegg.com:
Las diferencias entre estos dos pies de página son sutiles para el ojo inexperto, pero el Newegg solo se ve mucho más limpio y fácil de navegar.
Conclusión
En general, creo que el sitio de Sonic Electronix ha tenido un comienzo sólido con su diseño, pero necesitan repensar la jerarquía de la información. Este es el problema con el que nos encontramos una y otra vez a medida que avanzábamos por la página.
"Presentar el contenido de una manera lógica, navegable y atractiva es un objetivo primordial del diseño web".La presentación de contenido de una manera lógica, navegable y atractiva es un objetivo primordial del diseño web. Información abarrotada y un poco de pereza por parte del diseñador en casos como el de "¿Por qué comprar Sonic?" sección están reteniendo el sitio de lo que podría ser.
En última instancia, sugiero algunos estudios de seguimiento de clics para ver qué les gusta o necesita a los usuarios. Use esta información para reducir lo que no es efectivo y resaltar lo que es. Sospecho fuertemente que los elementos como la barra de búsqueda podrían ser mucho más efectivos si fueran más prominentes.
¡Tu turno!
Ahora que ha leído mis comentarios, contribuya y ayude, dando al diseñador algunos consejos adicionales. Háganos saber lo que cree que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca consejos constructivos claros y sin insultos severos.