Crítica del diseño web # 69 Okay Geek

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 Okay Geek, un blog de tecnología deliciosamente geek que hemos visto antes en Design Shack. ¡Entremos y veamos qué pensamos del nuevo diseño!

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.

Acerca de Okay Geek

? Está bien, Geek es un blog que escribe sobre cosas que a nuestros editores les parecen interesantes. No proveemos nuestro contenido a nadie más que a nosotros mismos. Y aunque esto puede sonar un poco extraño, lo hacemos con la esperanza de crear contenido que realmente exprese nuestro disfrute y permita que los lectores se relacionen con nosotros y con lo que escribimos.

Clientes que regresan

Una rápida nota de autoservicio. Si se está preguntando si una Crítica de diseño de Design Shack vale la pena o no, no necesita buscar más que nuestros clientes devueltos como Okay Geek. Varios sitios no solo han tomado en cuenta nuestros consejos, sino que también han implementado muchos de los cambios sugeridos y han regresado para otra crítica. Si tiene dudas sobre su diseño, envíenos un mensaje y haga una crítica hoy.

Ahora en la crítica, aquí hay una captura de pantalla de la página principal de Okay Geek:

Primera impresión

En nuestra crítica anterior de Okay Geek, los complementamos por tener un sitio con un aspecto muy limpio y nítido que resaltaba bien el contenido mientras permanecía casi sin desorden. Parece que los diseñadores han decidido llevar esta idea aún más lejos al minimizar realmente el diseño y eliminar todas las partes innecesarias. El resultado es una experiencia súper optimizada que lo convierte en una gran experiencia de navegación.

Felicito a los diseñadores por su trabajo y realmente creo que han hecho un gran trabajo aquí. Sin embargo, como siempre, estoy lleno de sugerencias sobre cómo hacerlo aún mejor. Echemos un vistazo más de cerca y veamos cuáles son.

Navegación

Uno de mis mayores problemas con el rediseño es el área de navegación. Estrictamente desde un punto de vista estético, es genial. Hay un atractivo mínimo agradable que realmente complementa bien el sitio. Sin embargo, desde el punto de vista de la usabilidad, no tiene una puntuación tan alta. Los distintos enlaces se dividen en dos secciones diferentes en el encabezado:

La primera sección está bien hecha y tiene mucho sentido: reseñas, editoriales, contacto, sobre nosotros. Sin embargo, el segundo es una tira de iconos que controla el contenido de la barra lateral en una especie de método con pestañas. De hecho, me gusta lo que están haciendo aquí y creo que realmente han creado una barra lateral versátil, pero tengo algunos problemas con los iconos.

Una vez más, aunque se ven muy bien, son bastante vagos. Por ejemplo, la estrella, que es un símbolo web universal para hacer que algo sea un favorito, es en realidad un enlace a la? Principal? sección de la barra lateral. Los? Temas? La sección es igualmente confusa, ya que está representada por cuatro cuadrados (lo cual tiene sentido solo después de hacer clic en ella). Los títulos aparecen al pasar, pero hasta entonces, realmente no tienes idea de para qué son estos íconos.

Encontrando tu camino

En un blog de tecnología como este, que cubre un amplio espectro de temas, es importante que los usuarios puedan encontrar rápidamente el nicho en el que están interesados. Como prueba, si coloca a alguien delante de este sitio por primera vez y decir, 'encontrar los artículos de juego,' es probable que les lleve más de diez segundos encontrar los temas? sección, que luego les lleva a los juegos.

No estoy muy seguro de cómo lo haría, pero definitivamente recomendaría reflexionar sobre cómo hacer que sea más fácil para los usuarios profundizar solo en el contenido que les gustaría ver. Honestamente, podría ser tan simple como hacer que el texto sea visible debajo de los íconos todo el tiempo.

Contenido destacado

Al igual que cualquier sitio de buenas noticias, hay un par de ubicaciones de contenido destacado diferentes que ayudan a resaltar los artículos más allá de lo que aparece en el canal principal de la página principal. Se ven muy bien y, al igual que la navegación, aparecen tanto en la parte superior izquierda como en la barra lateral de la derecha.

Repetición

En cuanto a estos, veo una de mis herramientas de diseño favoritas en el trabajo: la repetición. Hay una consistencia realmente agradable pero simple en el etiquetado de cada sección. Sin embargo, este es un ejemplo perfecto de cómo la repetición puede ser una bestia engañosa e incluso puede inducir a error al usuario. Considere el siguiente gráfico, que muestra tres encabezados diseñados consistentemente desde la página:

Ahora, los dos primeros de estos sirven como encabezados de sección. Se sientan sobre el contenido y simplemente sirven como una etiqueta para lo que hay debajo de ellos. No son enlaces, solo ayudas visuales. Esto hace que su cerebro piense que este será el caso de todos los elementos similares que vea en todo el sitio. Sin embargo, el tercero te lanza una bola curva.

Esta etiqueta se encuentra sobre un espacio vacío, lo que lo confunde de inmediato en cuanto a lo que hace referencia. Recuerde que los otros dos encabezados ya nos han enseñado que estos no son enlaces, por lo que nos queda concluir que "¿Más cosas impresionantes?" aún no se ha añadido. Sin embargo, resulta que este encabezado no es en realidad un encabezado sino un enlace a una página diferente.

Repetición Selectiva

La lección de diseño simple aquí es que la repetición debe manejarse con cuidado. Asegúrese de que cuando repite un estilo o elemento de diseño visual, los elementos compartan un propósito y una funcionalidad comunes. De lo contrario, configura un arquetipo esperado que luego rompe, lo que reduce la facilidad de uso a través de la repetición en lugar de mejorarlo.

Veo este mismo problema que surge al menos otro lugar en el sitio en el caso del ícono de estrella mencionado anteriormente. Se usa en la barra lateral simplemente para denotar el? Principal? y se repite en las previsualizaciones de la publicación para indicar que la publicación es "Contenido exclusivo y destacado". Una vez más, la repetición en realidad está eliminando el significado del icono porque se está utilizando para dos propósitos muy diferentes.

Publicaciones y avances

Aparte de la repetición de iconos que he indicado anteriormente, me gusta mucho el nuevo formato de vista previa de la publicación. Las imágenes grandes y agradables te atraen y toda la información sobre la publicación que necesitas está claramente representada de una manera muy organizada.

También me doy cuenta de que el viejo vago? ¿Salvar? botón se ha cambiado a un? Guardar en Instapaper? botón por mi sugerencia. ¡Puntos de bonificación por implementar algunos cambios sugeridos! Creo que esto hace que sea infinitamente más claro lo que está sucediendo con este botón.

De manera similar, cuando hace clic y sigue una publicación específica, vemos algunos ejemplos más de trabajo de diseño realmente atractivo. El final de una publicación es donde las personas tradicionalmente colocan una gran cantidad de contenido, como compartir, artículos similares y comentarios. Esta área puede convertirse rápidamente en un desorden desordenado, pero me encanta cómo se manejó aquí. Las tres secciones diferentes son claramente distintas pero visualmente similares y realmente encajan bien con el tema general del sitio.

Sabes que un diseñador es bueno cuando pasa mucho tiempo haciendo las cosas pequeñas a la perfección y creo que esta sección es un claro ejemplo de lo bien que trabajan los diseñadores en este proyecto.

Sobre nosotros

La sección final que creo que merece atención es la página Acerca de nosotros. Cuando la página se cargó por primera vez, me sorprendió lo atractivo que era. Este es un diseño realmente agradable que difiere mucho del resto del sitio y se mantiene al 100% en la marca.

Conclusión

Los chicos de Okay Geek realmente me animaron a echar un vistazo alrededor del sitio y darles los dos barriles cuando noté algo que necesitaba ser abordado. Esto indica una clara voluntad de hacer que el sitio sea lo mejor posible para los usuarios.

Tomar críticas es una de las tareas más difíciles que enfrentará como diseñador. Nos metemos en nuestros proyectos tanto que una crítica se siente como un ataque personal. Cuando podemos alejarnos de esta respuesta emocional y evaluar los comentarios de una manera lógica, nos convertimos en mejores diseñadores y nuestros proyectos mejoran exponencialmente.

Como dije repetidamente a lo largo de la crítica, este sitio es magnífico desde un punto de vista puramente visual. Las áreas que sugerí mejorar están muy relacionadas con la facilidad de uso y la experiencia del usuario. Estas son las cosas que son fáciles de pasar por alto cuando hemos contemplado un proyecto durante demasiado tiempo. Estoy seguro de que el equipo considerará y abordará muchos de estos problemas y seguirá haciendo de Okay Geek un lugar realmente genial para conocer los últimos desarrollos en el mundo de la tecnología.

¡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.