Les fondamentaux de la refonte de site Web - Une étude de cas

Il n'est pas rare de terminer un projet de refonte de site Web pour ensuite regarder en arrière et se dire : « J'aurais fait les choses différemment si j'avais su ce que je sais aujourd'hui ».

Nous y avons tous été. Nous sommes enthousiasmés par un nouveau projet, plaisantons avec le client, signons des contrats et commençons à simuler des prototypes. La vie s'annonce belle, mais les fondations du projet sont fragiles.

Inévitablement, les révisions et le fluage de la portée commencent à se faufiler dès que le premier concept de conception est présenté, et c'est en descente à partir de là. La communication s'effondre, rien ne se passe comme prévu et, finalement, le site Web nouvellement conçu ressemble à la monstruosité que vous avez été embauché pour réparer.

La conception et l'expérience utilisateur de classe mondiale ne commencent pas par une jolie maquette, elles reposent sur une planification stratégique et une vision de la conception axée sur les objectifs de l'entreprise. L'objectif principal ne peut pas être "Créons un site Web plus joli".

Les concepteurs de sites Web sont responsables de l'expérience utilisateur (UX) et de l'interface utilisateur (UI). C'est notre travail de nous assurer que les utilisateurs ont une expérience optimale d'interaction avec les interfaces que nous concevons. Cela nécessite une planification minutieuse dès la conception d'un projet.

Cet article décrit un processus fiable qui vous aidera à vous assurer que la prochaine refonte de votre site Web repose sur une base solide.

La valeur de la recherche d'avant-projet de refonte de site Web

Pour illustrer le processus, passons en revue les phases d'une refonte de site Web réalisée pour Archaeology Southwest, une organisation à but non lucratif qui explore et protège les sites archéologiques du sud-ouest des États-Unis.

Après une enquête préliminaire sur le domaine et la concurrence du client, inspectez attentivement chaque élément de site Web disponible. Cette analyse est facturée séparément et a lieu avant la rédaction d'un devis de projet. Travailler de cette manière évite les estimations ambiguës ou gonflées qui se produisent lorsque les concepteurs Web tentent de tenir compte des problèmes qui pourraient remonter à la surface plus tard dans un projet.

Dans le cas d'Archaeology Southwest, j'ai été confronté à un site qui avait un besoin urgent d'attention - des montagnes et des montagnes de contenu encombré à l'intérieur d'un ancien portail CMS. C'était mauvais, alors j'ai décidé de créer de l'ordre.

Étape 1 : Familiarisez-vous avec le contenu

Lors de la rénovation d'une maison, il est important d'essayer de récupérer des matériaux de valeur avant le jour de la démolition. Le même principe s'applique à la conception de sites Web. Vous devez parcourir le site page par page et en extraire tout le contenu. En tant que concepteurs, nous devons déterminer quel contenu mérite d'être un type de publication unique et quelles pages sont statiques.

Une fois cela accompli, élaborez une stratégie pour tout organiser, mais ne décidez pas quel contenu doit rester et ce qui doit être supprimé. Pourquoi pas?

Lorsque vous traitez avec des entreprises et des organisations du monde réel, il existe un certain nombre de personnes différentes responsables du contenu d'un site, et la quantité de contenu qui existe peut être stupéfiante. La meilleure approche consiste à tout classer en premier.

Je commence généralement par la navigation principale et vais page par page. De cette façon, j'aurai l'architecture de l'information et le plan du site avant la première réunion avec le client.

Malheureusement, le site d'Archaeology Southwest n'était pas typique. La plupart des liens n'étaient pas accessibles via la navigation supérieure et étaient cachés dans le contenu. J'aurais eu une mauvaise surprise si j'avais cité le projet basé sur la navigation seule.

En discutant avec différentes personnes de l'équipe du client, j'ai pu me faire une meilleure idée de la portée du projet et, après une réunion avec le client, j'ai pu identifier l'orientation, le flux de travail, le contenu et les fonctionnalités de son site Web. À partir de là, nous avons proposé les principaux types de contenu suivants (certains nouveaux, d'autres existants) :

Étape 2 : Créer une mise au point. Simplifier. Organiser.

Une fois que tout le contenu est organisé en boîtes étiquetées, il est temps de développer le plan d'une nouvelle structure, qui présentera le contenu sous sa meilleure forme. Mais d'abord, nous devons créer une concentration.

Selon Archaeology Southwest, les gens visitent leur site Web pour rechercher des informations sur les projets en cours, se renseigner sur les événements à venir et lire un magazine mensuel. Ces activités répondent à la question « Que font les gens sur le site ? mais ne révélez pas pourquoi les gens visitent le site en premier lieu.

Le « pourquoi » est le centre d'intérêt du site Web. Afin de trouver l'orientation, regardez le cœur de l'organisation.

Dans ce cas, j'ai identifié le «lieu» comme étant le cœur d'Archéologie Sud-Ouest. Sans emplacement, il n'y aurait pas de sites archéologiques, pas de ruines, et certainement pas de musées ou d'expositions. Tout en archéologie se rapporte à l'emplacement.

Avec un objectif identifié, nous pouvons simplifier et organiser. Pour Archaeology Southwest, j'ai commencé par diviser le contenu en catégories qui n'étaient pas liées aux lieux, comme les pages d'équipe et les rapports annuels. Après un peu de rangement, je me suis retrouvé avec cette carte approximative :

L'image ci-dessus représente les deux domaines principaux qui ont émergé : Activités et Emplacements . Choses à faire (à gauche) couvre les activités qu'un visiteur du site peut découvrir et faire. Emplacements (à droite) se concentre sur le contenu du site lié à des emplacements spécifiques. Pourquoi le structurer ainsi ?

L'idée est qu'un utilisateur moyen peut ne pas connaître le nom d'une vidéo ou d'un projet, mais connaîtra probablement le nom d'un lieu. De cette façon, les visiteurs peuvent trouver du contenu en rapport avec l'emplacement.

De plus, chaque bloc de couleur dans Emplacements représente un type de publication unique. D'un point de vue organisationnel, les expositions, les cours et les expositions en ligne sont tous des événements de nature différente.

Dans l'ancien site Archaeology Southwest, il y avait des pages statiques séparées pour un magazine et une boutique en ligne où les visiteurs pouvaient acheter le magazine. Pour simplifier l'achat, j'ai intégré une option d'achat dans le modèle de magazine.

La structure organisationnelle restante était simple :

• Une page "A propos" pour en savoir plus sur l'organisation
• Un lien direct vers la page « Boutique »
• Une page "Don"
• Une nouvelle page "Mises à jour"

Les pages de la boutique et des dons sont lucratives, il était donc essentiel qu'elles soient incluses dans la navigation principale.

Une fois le plan d'organisation terminé, il est temps de connecter le contenu réel.

Étape 3 : Impliquez le client

Le plan du site inclut les types de page, mais il n'inclut pas le mappage du contenu. Les concepteurs Web chevronnés savent que la plupart des problèmes surviennent lorsqu'un client commence à ajouter du contenu à son site. Pour éviter ce problème, gardez le client en boucle depuis le début.

Pour Archaeology Southwest, j'ai créé un document Google qui comprenait le plan du site et j'ai demandé au client de mapper son ancien contenu avec la nouvelle structure.

Si quelque chose ne correspondait pas tout à fait, nous l'abordions plus tard. C'est une étape critique. Pourquoi? En plus d'impliquer le client dans le processus, il découvre les problèmes de structure avant le début de la mise en œuvre.

Dans ce cas, certains éléments du menu du plan du site ont été modifiés, et comme le client avait plusieurs pages de dons, il était logique de créer un type de publication unique juste pour cela.

Créer une structure visuelle grâce au wireframing

Dans cette étape, je commence à donner à l'œuvre une structure visuelle. Pour que le système fonctionne bien et intègre avec succès la notion que "tout est lié à la localisation", j'ai créé une relation bidirectionnelle entre les types de publications.

Voici l'idée de base : lorsque les visiteurs se rendent sur le site Web d'Archaeology Southwest et sélectionnent le Grand Canyon, ils verront des informations sur cet emplacement, mais ils trouveront également des informations relatives à des projets, des événements, des expositions et tout ce que les administrateurs du site marquent comme emplacement. spécifique.

Le lien étant bidirectionnel, les visiteurs peuvent également se rendre au Grand Canyon en visitant une page de projet. Au final, j'ai fini par ça :

La page d'index des emplacements présente tous les emplacements avec le plus récent en haut. La barre de recherche est la première chose que l'utilisateur voit en arrivant sur la page. La carte Google occupera environ 80% de l'écran. Cela permet aux utilisateurs de sélectionner des points sur la carte et, au fur et à mesure qu'ils font défiler ou recherchent, la grille de la liste apparaît.

Sur une seule page de localisation, le corps principal est sur la gauche puisqu'il s'agit de l'information la plus importante. Les méta-informations associées sont secondaires, elles se trouvent donc à droite. Pour obtenir une mise en page bien équilibrée, il est crucial d'avoir une hiérarchie distincte entre les premier, deuxième et troisième blocs d'éléments. Cela permet à l'œil de se déplacer sans effort entre les sections.

Dans la mise en page Archéologie Sud-Ouest, l'œil de l'utilisateur commence par l'en-tête, puis se déplace vers le bloc de contenu, et enfin suit la barre latérale droite. Chaque élément de contenu connexe est affiché par ordre de pertinence. Par exemple, si l'utilisateur lit sur le Grand Canyon, ce contenu sera probablement suivi de photos et d'une carte.

Puisqu'il s'agit principalement d'un site éducatif, il est important d'avoir une option « Lié à cet emplacement ». Cependant, il n'y a pas beaucoup de contenu associé de manière unique à chaque emplacement, j'ai donc combiné du contenu rarement utilisé (mais lié) en un seul bloc sous le corps.

Le fait de placer des miniatures de magazines et de vidéos sous un contenu connexe ajoute des éléments visuels supplémentaires et dirige les utilisateurs vers la page "Acheter". La page est complétée par l'affichage des lieux associés. C'est un excellent moyen d'inciter les utilisateurs à explorer davantage le site. L'étape suivante consiste à poursuivre cette structure pour d'autres types de postes.

Donnez à la page d'accueil un objectif clair

Avec un modèle général pour les types de publication en place, je peux me concentrer sur la page d'accueil. La première étape consiste à définir l'objectif de la page d'accueil - il s'agit d'une partie importante de la conception de l'interface utilisateur. Les recherches du client ont montré que de nombreux utilisateurs tombent sur le site sans bien comprendre de quoi il s'agit. Par conséquent, une introduction et un texte de bienvenue doivent être la première chose que les utilisateurs voient.

Le nouveau centre d'intérêt s'articule autour du bloc secondaire d'emplacements. Vient ensuite tout ce qui se passe sur archaeologysouthwest.org (le magazine actuel, le blog, les événements, la newsletter, etc.). Voici l'itération du processus de mise en page :

Avec la V1 (à gauche), j'ai conçu une mise en page de base qui ressemble à la page d'accueil d'origine. Il n'y a pas beaucoup de hiérarchie. La première chose que les utilisateurs voient est l'emplacement présenté, mais à partir de là, ils se perdront probablement dans les colonnes.

Pour V2 (centre), j'ai créé une colonne séparée qui est plus facile à suivre pour l'œil. Cependant, il peut encore être amélioré. C'est là que la connaissance du contenu joue un rôle majeur. Je sais que Archaeology Southwest n'a jamais plus de deux événements à la fois, il n'est donc pas logique d'avoir de la place pour plusieurs événements sur la page d'accueil.

Dans la V3 (à droite), je me suis concentré sur les événements à venir. Si, pour une raison quelconque, il y a plus de deux événements, l'utilisateur peut cliquer sur un bouton "Plus" et voir le reste. J'ai également mis un accent supplémentaire sur le magazine actuel car c'est le générateur d'argent du client. Les utilisateurs commencent par le haut et descendent selon un schéma en F. Le flux oculaire est :

Emplacement en vedette > Bienvenue > Magazine > Événements > Nouvelles

Avec un wireframe visuel et la structure du site en place, il est beaucoup plus facile de solidifier les fonctionnalités et le fonctionnement des choses. À ce stade, j'ai une autre réunion avec le client pour passer en revue les fonctionnalités et le flux d'interaction de l'utilisateur, qui sont tous deux beaucoup plus clairs à ce stade.

Y aura-t-il encore des révisions plus tard sur la route ? Oui, mais ce seront des ajustements, pas des changements de processus complets. Surtout, il n'y aura pas de surprises.

Intégrer le Brand Style Guide

Vient maintenant la partie passionnante - convertir les wireframes en quelque chose que les gens utiliseront et expérimenteront. Pour ce projet, je visais à rendre le contenu écrit facile à digérer en mettant en œuvre les couleurs et la typographie de la marque.

Expérimentez avec des combinaisons de typographie

La typographie fait partie intégrante d'une bonne conception Web, nous devons donc déterminer notre schéma de type tôt. La majeure partie de l'identité d'Archaeology Southwest utilise la police Univers Condensed Light et Adobe Caslon. Il n'y avait pas de règles pour quand Adobe Caslon devait être utilisé, mais j'ai remarqué qu'il n'était pas utilisé aussi souvent qu'Univers.

J'ai mené une petite étude sur les polices pour voir quelles combinaisons créent la meilleure sensation pour une organisation professionnelle à but non lucratif. Cependant, je ne voulais pas non plus que mon schéma de type soit trop différent de la documentation marketing du client.

Après avoir effectué des comparaisons de polices, il est devenu clair qu'Adobe Caslon devrait être la police du titre et Univers serait utilisé pour les sous-titres. Définir les principaux titres en casse donne à la marque une sensation plus personnelle, tandis que toutes les majuscules créent davantage une ambiance d'entreprise.

Peaufiner l'aspect et la convivialité du site Web

J'ai entrepris de créer une expérience légère et ouverte afin que les utilisateurs aient le sentiment qu'Archaeology Southwest est à la fois accessible et hautement compétent. D'après les données d'analyse, la majorité des visiteurs utilisent des navigateurs de bureau (probablement parce que la plupart des gens visitent le site à des fins de recherche). Par conséquent, mon objectif initial était de concevoir pour les utilisateurs de bureau.

En venant des ordinateurs de bureau, je voulais que les visiteurs voient immédiatement l'emplacement en vedette, le texte de bienvenue et les événements à venir suivis d'une partie du titre du magazine. De cette façon, les gens voient d'abord ce qu'est l'entreprise et ce qu'ils promeuvent.

Sur les appareils mobiles, les priorités sont un peu différentes. Étant donné que les utilisateurs accèdent aux informations en déplacement, les événements sont plus importants, ils sont donc placés plus haut sur la liste.

J'ai également mis à jour le bouton de don dans le pied de page pour qu'il soit plus convivial en le transformant d'un bouton en une phrase.

Finir en force : attention aux détails

Les utilisateurs accèdent à la page de détails pour deux raisons : soit ils souhaitent en savoir plus sur un point de repère, soit ils connaissent déjà un emplacement et recherchent des informations supplémentaires (itinéraires, numéros de téléphone, etc.). Par conséquent, il est important de présenter immédiatement les deux options afin que les utilisateurs n'aient pas à chercher.

J'ai décidé de séparer la colonne des détails de la zone de contenu pour lui donner plus de poids et rendre la page plus intéressante. Cela permet de créer une hiérarchie de composition. Ainsi, lorsqu'un visiteur accède à la page, il voit d'abord le titre de la page suivi d'une petite galerie d'images, puis de la colonne des détails.

Ce type de conception garantit que les utilisateurs remarqueront immédiatement les détails supplémentaires d'un emplacement. Un petit rembourrage supplémentaire entourant la colonne permet de garder les yeux concentrés et facilite la lecture des informations.

La vue mobile s'effondre comme on pouvait s'y attendre. Le contenu s'efface en premier, suivi des méta-informations. J'ai placé les vidéos et les magazines en dernier sur la page mobile car ils sont les moins importants pour les utilisateurs mobiles. Les autres pages suivent la même structure pour créer un flux et une expérience cohérents.

La refonte du Web repose sur une planification minutieuse

En regardant le processus de refonte du site Web, il est évident que la majorité du temps a été consacrée à l'organisation et à la planification. Seulement 30 % du projet a été consacré à la conception du site.

Souvent, lorsque les concepteurs montrent leur travail, ils ne parviennent pas à faire comprendre combien de temps est consacré aux rouages ​​​​de la communication, ce qui amène les concepteurs inexpérimentés à se lancer directement dans les maquettes. Le résultat? Des projets qui ont déraillé et des clients mécontents.

Une planification détaillée doit être faite pour qu'une refonte de site Web soit réussie. Prendre le temps de faire des recherches avant projet, se familiariser avec le contenu existant et impliquer le client sont des étapes cruciales.

En fin de compte, il n'y a pas moyen de contourner cela; la voie vers des refontes de sites Web étonnantes et la confiance professionnelle est pavée par une approche méthodique de l'organisation du projet.