Happy Cog rediseño de VisitPhilly.Com:
Un sitio web moderno ejemplar
En enero, Jason Santa Maria envió un Pío anunciando eso visitphilly.com había sido rediseñado por un estudio de diseño de renombre mundial Happy Cog . Mi interés se despertó, y no pude evitar echar un vistazo.
Honestamente puedo decir que nunca me ha impresionado más el rediseño de un sitio web que con este.
Que Happy Cog haya podido convertir un sitio web tan grande en una experiencia de usuario bella, accesible, funcional y atractiva demuestra el talento del equipo de Happy Cog.
De ninguna manera estoy en condiciones de ofrecer una crítica que haga justicia a la planificación, el diseño y el desarrollo que debe haber tenido este proyecto.
Pero pensé que sería útil señalar por qué este rediseño personifica un diseño web hermoso y eficaz para el mercado actual.
Un propósito claro
El nombre de dominio, el logotipo llamativo, los menús desplegables claros, la fotografía hermosa: todo esto y más desempeñan papeles clave en la comunicación del propósito distinto del sitio web (alentar a los usuarios a visitar la ciudad de Filadelfia) e invitar a los usuarios a explorar el sitio web que es (más bien sorprendentemente) una hermosa ciudad estadounidense.
Los primeros elementos de navegación que el usuario nota son los enlaces de mega menú desplegable y los enlaces de texto grandes que se superponen a la imagen giratoria principal.
La captura de pantalla a continuación destaca estos enlaces, a saber, "Cosas que hacer" (que se muestra activa), "Planificar su viaje", "Filadelfia ahora" y la superposición de imágenes "Almuerzo de poder".
Obviamente, estos artículos debían notarse inmediatamente. En el siguiente plano, he mapeado la ruta de acceso más probable de un usuario escaneando la página de inicio.
Después de observar (y posiblemente explorar) uno o más de los menús desplegables, el usuario escaneará el texto relacionado con la imagen activa, y luego, naturalmente, pasará a la sección etiquetada "Novedades", volviendo casi al final al círculo completo para el encabezado cerca del cuadro de búsqueda.
El contenido está organizado para que el usuario pueda realizar un recorrido informativo y visualmente memorable por las secciones más importantes de la página en cuestión de segundos.
El usuario probablemente no se demore, confundido o abrumado, a pesar de que hay tanto contenido disponible para explorar.
Un mínimo de enlaces primarios
Como se mencionó, una de las áreas más destacadas es el menú desplegable. La decisión de mantener un número mínimo de enlaces principales aquí es la correcta.
Tener solo tres enlaces permite que los elementos se muestren en una fuente más grande, manteniendo así la atención del usuario y demostrando la estructura enfocada del sitio web.
La barra de navegación mínima es uno de los principales cambios en el rediseño y brinda grandes beneficios. Compárelo con la sección del encabezado en el diseño anterior, que no está tan enfocado:
Aunque el encabezado anterior no está mal diseñado o inutilizable, no está tan enfocado y no es tan bonito como el nuevo. Otra debilidad es la falta de indicadores del menú desplegable, que en el nuevo sitio web son claros y atractivos.
Cuando un usuario llega a un sitio web como este (a menudo a través de una búsqueda en Google), la mayoría de las veces querrá hacer una de estas dos cosas: ver lo que la ciudad de Filadelfia tiene para ofrecer o planificar su viaje.
La navegación simplificada en el encabezado ayuda al usuario a lograr estos objetivos de manera rápida y eficiente.
Hermosa tipografía
¿Esperaríamos algo menos de Happy Cog? Me encanta la fuente utilizada para el logo de "Filadelfia y el campo".
Tiene un toque sutilmente occidental, pero sigue siendo moderno y digno. Para mantener la marca coherente, la fuente se reutiliza para muchos títulos en todo el sitio web, algunos de los cuales se destacan en la captura de pantalla a continuación.
La mayor parte del texto en el resto del sitio web está en letra Georgia, con el uso ocasional de Arial, pero se hace con bastante elegancia. La variada combinación de encabezados, textos, subtítulos y otros elementos descriptivos del sitio web es extremadamente legible y presentada con buen gusto.
A pesar de la cantidad de contenido, incluso en páginas internas, el usuario casi nunca se siente abrumado, a diferencia de la experiencia en el viejo sitio web .
Mayor rendimiento y velocidad percibida
Un sitio web con tanto contenido y tantas imágenes inevitablemente tiene un impacto en el rendimiento. Los desarrolladores fueron conscientes de esto y tuvieron mucho cuidado de asegurarse de que cualquier contenido de carga diferida no distraiga o haga que los visitantes se rindan y miren otra ciudad de Pensilvania .
Como se muestra a continuación, cuando el usuario visita la página de inicio, el último elemento para cargar es uno de los elementos más importantes en el nuevo diseño: la imagen giratoria principal. Pero la lentitud real se ve mitigada por el indicador de carga de contenido (el gráfico animado giratorio):
Esta mejora de usabilidad no está restringida a imágenes grandes tampoco. Debido a la diversidad de contenido en los menús desplegables, se muestra un gráfico de carga de contenido similar a medida que el contenido del menú se carga a través de Ajax:
Para este menú, la mejora es imprescindible, ya que los menús desplegables normalmente no se retrasan cuando se activan.
Ningún indicador de carga podría haber causado confusión, posiblemente haciendo que el usuario se alejara del mouse y luego volviera al mouse, preguntándose por qué la funcionalidad está atascada.
Entonces, aunque la página no se carga más rápido, la velocidad percibida aumenta. Esta es una lección para que todos los diseñadores y desarrolladores piensen no solo en la velocidad real sino también en la velocidad percibida.
Funciones orientadas al usuario
Una de las características más importantes del nuevo sitio web es la forma en que se realizó la transición al nuevo diseño, lo que garantiza que los visitantes que regresan no se sorprendan con los cambios drásticos.
La primera vez que visita el sitio web, observa un gran cartel rojo en la parte superior de la página, informándole que el sitio web ha sido rediseñado y aún está en versión beta. Tiene la opción de navegar por el sitio web utilizando la interfaz anterior.
Darles a los visitantes que están acostumbrados al diseño y la estructura anterior la opción de regresar es fundamental, ya que garantiza que no se frustren al tratar de encontrar contenido familiar.
En un sitio web tan grande, especialmente uno rediseñado por una empresa conocida por sus diseños centrados en el usuario, tales grandes cambios arquitectónicos y mejoras están destinados a rechazar a los visitantes que estaban acostumbrados al estilo antiguo.
El mensaje en el banner rojo, entonces, previene cualquier confusión o frustración por parte de los visitantes.
No pasé mucho tiempo comparando el viejo sitio web con el nuevo, por lo que no puedo confirmar cuán similares son los contenidos y las arquitecturas, pero dado que tenemos la opción de visitar el viejo sitio web, los contenidos deben ser similares. suficiente si podemos acceder a los eventos actuales y otros elementos actualizados regularmente en ambas versiones.
Un elemento común es el enlace que aparece sobre el cuadro de búsqueda, solicitando comentarios sobre el nuevo diseño invitando a los usuarios a completar una "encuesta beta". Esta característica muestra que los propietarios están preocupados acerca de cómo los usuarios experimentan y perciben el sitio web.
Contenido completamente accesible
Muchos de los miembros del equipo de Happy Cog son bien conocidos en línea por su defensa de los estándares web y el contenido accesible, por lo que no sorprende que este sitio web sea completamente accesible para prácticamente cualquier usuario en cualquier plataforma.
Con JavaScript desactivado, la experiencia del usuario en el sitio web es muy similar, a pesar de que muchas mejoras ya no están disponibles.
El CSS text-indent propiedad se utiliza para reemplazar el texto en los títulos con imágenes que muestran la fuente personalizada. Esto garantiza que las páginas permanezcan semánticas, optimizadas para SEO y visibles para todos los usuarios.
La imagen a continuación muestra un encabezado en una página interna, a la izquierda con el estilo deshabilitado, a la derecha con la opción habilitada.
Podemos ver cómo los encabezados se mejoran con las imágenes sin perder su valor semántico y sin que los diseñadores recurran innecesariamente a métodos complejos de reemplazo de fuentes.
Otra característica clave de accesibilidad es cómo se implementan las mejoras de JavaScript. La página de inicio tiene dos conmutadores de contenido con pestañas, uno llamado "Libro en línea" y el otro que se conecta a las redes sociales de visitphilly.com:
Cuando JavaScript está deshabilitado, se muestra todo el contenido en ambos cuadros con pestañas. Muchos sitios web con widgets con pestañas muestran solo una de las casillas cuando JavaScript está deshabilitado, pero eso generalmente no es la mejor práctica.
Esta técnica se utiliza de manera consistente en todo el sitio web para una serie de características, asegurando que la capa de comportamiento (es decir, Ajax y JavaScript) sea una mejora, no una necesidad.
Esto hace que el contenido sea accesible no solo para los usuarios que navegan sin JavaScript sino también para las arañas de los motores de búsqueda, como Googlebot.
Cualquier debilidad en el diseño?
Una vez más, no estoy en condiciones de criticar de manera justa un diseño realizado por una empresa como Happy Cog. Pero señalaré (con precaución) dos puntos débiles menores en el nuevo diseño y estructura.
En primer lugar, considero que la redacción del tercer enlace en el menú de navegación principal es un tanto vaga ("Filadelfia ahora").
No sabía de inmediato lo que eso significaba. Supuse que significaba eventos actuales, pero aparentemente es una combinación de eventos, clima y fotos actuales. Aún no estoy seguro de cómo describirlo, y tengo la sensación de que rara vez se hará clic en el enlace.
La otra debilidad son los triángulos que apuntan hacia la derecha en el menú de navegación secundario en las páginas internas:
Supuse que esos triángulos indicaban menús desplegables, pero no hay fly-outs. Los triángulos son solo punteros para llamar la atención del usuario sobre el área de contenido. Los triángulos que apuntan hacia la derecha se reservan mejor para enlaces independientes y menús desplegables, y no para navegación vertical como esta.
Encontramos lo mismo en la página de inicio, pero no es tan malo porque las flechas son parte de un conmutador de contenido impulsado por JavaScript.
Ninguna de estas "debilidades" perjudica mucho a la experiencia del usuario. Y el hecho de que puedo encontrar solo dos debilidades muestra cuán grande es el nuevo diseño.
Digno de examen e imitación
Se podría decir mucho más sobre la efectividad del diseño y el código de visitphilly.com, más allá del alcance de este artículo.
Además de lo que hemos discutido aquí, podría señalar el código válido y bien comentado, el uso efectivo del espacio en blanco, la jerarquía visual, las excelentes elecciones de color, la experiencia virtualmente idéntica en IE6 y más.
Espero que este análisis ofrezca una descripción decente de algunas de las características clave de este nuevo diseño y de cómo éste ejemplifica el diseño web moderno en la industria.
Otras lecturas
- Greater Philadelphia Tourism Marketing Corp. lanza la nueva marca visitphilly.com
- Portafolio Happy Cog Studios
- Revisión de Happy Cog de VisitPhilly
Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Webs impresionantes donde publica artículos y tutoriales sobre diseño web. Puedes seguir a Louis en Twitter o ponte en contacto con él a través de su sitio web .
¿Te gusta el nuevo visitphilly.com? ¿Alguna otra característica del diseño, diseño o arquitectura mejora la experiencia del usuario? Por favor, ofrezca sus comentarios a continuación.