Reconception de Happy Cog sur VisitPhilly.com: un site Web moderne exemplaire

En janvier, Jason Santa Maria a envoyé un tweet annoncer que visitphilly.com avait été repensé par un studio de design de renommée mondiale Cog heureux . Mon intérêt a été piqué et je n'ai pu m'empêcher de jeter un coup d'œil.

Je peux honnêtement dire que je n'ai jamais été aussi impressionné par la refonte d'un site Web que par le passé.

Le fait que Happy Cog ait réussi à transformer un site Web aussi vaste en une expérience utilisateur belle, accessible, fonctionnelle et accueillante témoigne du talent de l’équipe de Happy Cog.

Je ne suis en aucun cas en mesure de proposer une critique qui rend justice à la planification, à la conception et au développement de ce projet.

Mais j'ai pensé qu'il serait utile de souligner pourquoi cette refonte incarne la conception d'un site Web magnifique et efficace pour le marché d'aujourd'hui.

Un objectif clair

Le nom de domaine, le logo accrocheur, les menus déroulants clairs, la belle photographie: tout cela joue un rôle clé dans la communication du but distinct du site (encourager les utilisateurs à visiter la ville de Philadelphie) et inviter les utilisateurs à explorer via le site Web est ce qui est (assez surprenant) une belle ville américaine.

Les premiers éléments de navigation que l'utilisateur remarque sont les méga liens dans le menu déroulant et les gros liens de texte qui recouvrent l'image rotative principale.

La capture d'écran ci-dessous met en évidence ces liens, à savoir "Choses à faire" (qui est affiché actif), "Planifiez votre voyage", "Philly Now" et la superposition d'images "Power Lunch".

Ces éléments étaient évidemment destinés à être remarqués immédiatement. Dans la photo ci-dessous, j'ai cartographié le chemin de l'œil le plus probable d'un utilisateur scannant la page d'accueil.

Après avoir noté (et éventuellement exploré) un ou plusieurs des menus déroulants, l’utilisateur numérisait le texte associé à l’image active, puis se déplaçait naturellement vers la section intitulée «Quoi de neuf», pour finalement revenir à un cercle complet. l'en-tête près du champ de recherche.

Le contenu est organisé de manière à ce que l'utilisateur puisse parcourir en quelques secondes un parcours informatif et mémorable à travers les sections les plus importantes de la page.

L'utilisateur ne serait probablement pas retardé, confus ou débordé, malgré la quantité de contenu disponible à explorer.

Un minimum de liens primaires

Comme mentionné, l'un des domaines les plus importants est le menu déroulant. La décision de s'en tenir à un nombre minimum de liens primaires est la bonne.

Le fait de n'avoir que trois liens permet d'afficher les éléments dans une police plus grande, ce qui permet de garder l'attention de l'utilisateur et de démontrer la structure ciblée du site Web.

La barre de navigation minimale est l'un des changements majeurs dans la refonte et apporte de grands avantages. Comparez-le à la section d'en-tête de l'ancien modèle, qui n'est pas aussi ciblée:

Bien que l’ancien en-tête ne soit pas mal conçu ou inutilisable, il n’est pas aussi ciblé et pas aussi beau que le nouveau. L'absence d'indicateurs dans les menus déroulants, qui sont clairs et attrayants, constitue un autre point faible.

Lorsqu'un utilisateur arrive sur un site Web tel que celui-ci (souvent par le biais d'une recherche Google), il souhaite le plus souvent réaliser l'une des deux choses suivantes: voir ce que la ville de Philadelphie a à offrir ou planifier son voyage.

La navigation simplifiée dans l'en-tête aide l'utilisateur à atteindre ces objectifs rapidement et efficacement.

Belle typographie

Serions-nous en droit d'attendre moins de Happy Cog? J'adore la police utilisée pour le logo "Philadelphia and the Countryside".

Il a un aspect subtilement occidental mais reste moderne et digne. Pour que la marque reste cohérente, la police est réutilisée pour de nombreuses rubriques du site Web, dont certaines sont mises en évidence dans la capture d'écran ci-dessous.

La majeure partie du texte sur le reste du site est en Géorgie, avec l'utilisation occasionnelle d'Arial, mais de manière très élégante. La diversité des rubriques, des copies de corps, des légendes et autres éléments descriptifs du site Web est extrêmement lisible et présentée avec goût.

Malgré la quantité de contenu, même sur les pages internes, l’utilisateur se sent rarement, voire jamais, dépassé, contrairement à ancien site web .

Performances accrues et vitesse perçue

Un site Web avec tant de contenu et autant d'images prend inévitablement un coup dans les performances. Les développeurs en étaient conscients et ont pris grand soin de veiller à ce que tout contenu à chargement différé ne gêne pas les visiteurs et ne les laisse une autre ville du Pennsylvanien .

Comme indiqué ci-dessous, lorsque l'utilisateur visite la page d'accueil, le dernier élément à charger est l'un des éléments les plus importants de la nouvelle présentation: l'image rotative principale. Mais la lenteur réelle est atténuée par l’indicateur de chargement de contenu (le graphique animé tournant):

Cette amélioration de la convivialité n'est pas limitée aux grandes images non plus. En raison de la diversité des contenus dans les menus déroulants, un graphique de chargement de contenu similaire est affiché lors du chargement du contenu du menu via Ajax:

Pour ce menu, l'amélioration est impérative, car les menus déroulants ne sont généralement pas retardés lors du déclenchement.

Aucun indicateur de chargement n'aurait provoqué de confusion, ce qui aurait peut-être détourné l'utilisateur de la souris, puis rétabli la souris, en se demandant pourquoi la fonctionnalité est bloquée.

Ainsi, bien que la page ne se charge pas plus rapidement, la vitesse perçue est augmentée. C'est une leçon pour tous les concepteurs et développeurs de penser non seulement à la vitesse réelle mais aussi à la vitesse perçue.

Fonctions orientées utilisateur

L'une des caractéristiques les plus importantes du nouveau site Web est la manière dont la transition vers la nouvelle conception a été effectuée, ce qui garantit que les visiteurs qui reviennent ne sont pas choqués par les changements radicaux.

Lorsque vous visitez le site Web pour la première fois, vous remarquez une grande bannière rouge en haut de la page, vous informant que le site Web a été remanié et est toujours en version bêta. Vous avez la possibilité de naviguer sur le site Web en utilisant l’ancienne interface.

Il est essentiel de donner aux visiteurs habitués à l'ancienne disposition et à la structure la possibilité d'y revenir, car cela garantit qu'ils ne sont pas frustrés en essayant de trouver du contenu familier.

Sur un site Web aussi vaste, en particulier celui qui a été repensé par une société connue pour ses conceptions axées sur l'utilisateur, ces changements et améliorations architecturaux majeurs risquent de décourager les visiteurs habitués à l'ancien style.

Le message dans la bannière rouge empêche alors toute confusion ou frustration de la part des visiteurs.

Je n'ai pas passé beaucoup de temps à comparer l'ancien site au nouveau, donc je ne peux pas confirmer la similarité des contenus et des architectures, mais comme nous avons la possibilité de visiter l'ancien site Web, le contenu doit être similaire. si nous pouvons accéder aux événements actuels et à d’autres éléments régulièrement mis à jour dans les deux versions.

Un élément commun est le lien qui apparaît au-dessus du champ de recherche, sollicitant des commentaires sur la nouvelle conception en invitant les utilisateurs à remplir une «enquête bêta». Cette fonctionnalité montre que les propriétaires se soucient de la perception et de la perception du site.

Contenu entièrement accessible

Bon nombre des membres de l'équipe Happy Cog sont bien connus en ligne pour leur plaidoyer en faveur des normes Web et du contenu accessible. Il n'est donc pas surprenant que ce site soit entièrement accessible à pratiquement tous les utilisateurs sur toutes les plateformes.

Avec JavaScript désactivé, l'expérience de l'utilisateur sur le site Web est très similaire, même si de nombreuses améliorations ne sont plus disponibles.

Le CSS text-indent property est utilisé pour remplacer le texte dans les en-têtes par des images montrant la police personnalisée. Cela garantit que les pages restent sémantiques, SEO-friendly et visible pour tous les utilisateurs.

L'image ci-dessous montre un en-tête sur une page interne, à gauche avec le style désactivé, à droite avec le mode activé.

Nous pouvons voir comment les images sont améliorées par des images sans perdre leur valeur sémantique et sans que les concepteurs aient recours à des méthodes de remplacement de polices inutilement complexes.

Une autre fonctionnalité d'accessibilité clé est la manière dont les améliorations JavaScript sont implémentées. La page d'accueil comporte deux commutateurs de contenu à onglets, l'un appelé "Book Online", et l'autre se connectant aux réseaux sociaux de visitphilly.com:

Lorsque JavaScript est désactivé, tout le contenu des deux onglets est affiché. De nombreux sites Web dotés de widgets à onglets affichent un seul des champs lorsque JavaScript est désactivé, mais ce n'est généralement pas la meilleure pratique.

Cette technique est utilisée de manière cohérente dans tout le site Web pour un certain nombre de fonctionnalités, garantissant que la couche comportementale (c.-à-d. Ajax et JavaScript) est une amélioration, pas une nécessité.

Cela rend le contenu accessible non seulement aux utilisateurs qui naviguent sans JavaScript, mais aussi aux moteurs de recherche tels que Googlebot.

Des faiblesses dans la conception?

Encore une fois, je ne suis pas en mesure de critiquer équitablement un dessin réalisé par une entreprise telle que Happy Cog. Mais je soulignerai (prudemment) deux faiblesses mineures dans le nouveau design et la nouvelle structure.

Tout d'abord, je trouve un peu vague la formulation du troisième lien dans le menu de navigation principal ("Philly Now").

Je ne savais pas tout de suite ce que cela signifiait. J'avais supposé que cela signifiait les événements actuels, mais c'est apparemment une combinaison d'événements, de conditions météorologiques et de photos actuelles. Je ne sais toujours pas comment le décrire, et j'ai l'impression que le lien sera rarement cliqué.

L’autre faiblesse réside dans les triangles pointant vers la droite dans le menu de navigation secondaire des pages internes:

J'ai supposé que ces triangles indiquaient des menus déroulants, mais il n'y a pas de fly-outs. Les triangles ne sont que des pointeurs permettant d'attirer l'attention de l'utilisateur sur la zone de contenu. Les triangles pointant vers la droite sont mieux réservés aux liens autonomes et aux menus déroulants, pas à la navigation verticale comme celle-ci.

Nous trouvons la même chose sur la page d'accueil, mais ce n'est pas aussi grave car les flèches font partie d'un sélecteur de contenu basé sur JavaScript.

Aucune de ces "faiblesses" nuit beaucoup à l'expérience de l'utilisateur. Et le fait que je ne puisse trouver que deux faiblesses montre à quel point c'est vraiment une refonte.

Digne d'examen et d'imitation

On pourrait en dire beaucoup plus sur l'efficacité de la conception et du code de visitphilly.com, au-delà de la portée de cet article.

En plus de ce que nous avons discuté ici, je pourrais souligner le code valide et bien commenté, l'utilisation efficace des espaces blancs, la hiérarchie visuelle, les excellents choix de couleurs, l'expérience pratiquement identique dans IE6 et plus.

J'espère que cette analyse donne un aperçu correct de certaines des principales caractéristiques de ce nouveau design et de la manière dont elle personnalise la conception Web moderne dans l'industrie.

Lectures complémentaires

Cet article a été écrit exclusivement pour Webdesigner Depot par Louis Lazaris, rédacteur indépendant et développeur web. Louis court Web impressionnant où il publie des articles et des tutoriels sur la conception de sites Web. Vous pouvez suivre Louis sur Twitter ou entrer en contact avec lui à travers son site web .

Aimez-vous le nouveau visitphilly.com? Est-ce que d'autres fonctionnalités de la conception, de la mise en page ou de l'architecture améliorent l'expérience utilisateur? S'il vous plaît offrir vos commentaires ci-dessous.

création de sites web pignon heureux jason santa maria redéfinir visitphilly

Redesign de Happy Cog de VisitPhilly.Com: Un site Web moderne exemplaire