En amont de l'ergonomie WEB
Définir une maquette stylisée de son web en vue de placer les éléments selon les normes et usages.
Le Mockup
Un mockup est un terme informatique, et même un terme de design, qui désigne une maquette d'une interface utilisateur. Cette maquette se veut volontairement simpliste pour se fier principalement sur les fonctionnalités que sur l'aspect esthétique final.
Création mockup online
Présentation
Un mockup représente un squelette d'une interface utilisateur. Ce squelette est en noir et blanc et à principalement pour but de montrer sur papier (ou sur ordinateur) où seront placé les éléments sur l'interface et comment fonctionnera l’interaction entre eux (bouton d'action, zone de texte, élément interactif ...).
Exemple fictif de mockup d'un site web
Avantages
Un mockup est une bonne méthode durant la phase de conception d'un site web, d'un logiciel ou de tout autre interface pour les raisons suivantes:
- Possibilité de montrer l'aperçu de l'interface à des collaborateurs
- Constater un problème de placement, de taille des éléments ou même une impossibilité technique
- Déplacer facilement un élément pour améliorer l'interface (expérience utilisateur, ergonomie ...)
- Mieux estimer la complexité d'une interface et donc meilleure estimation du temps de conception
- Modification rapide de l'interface avant même que les graphistes ou les développeurs n'ai commencé à travailler. Une modification en amont est plus rapide que pendant la phase d'intégration ou de développement
Le Zoning
Un parcours en "F"
Les parties coloriées en rouge sont celles sur lesquelles l'oeil des visiteurs s'est attardé le plus longtemps. Les parties bleues celles qui ont eu droit à un passage rapide. Les parties jaunes ont bénéficié d'une visibilité moyenne. Les parties grises n'ont pas ou quasiment pas été vues par les visiteurs.
L'oeil parcours la page Web en suivant un trajet en forme de "F" majuscule.
Dans cet exemple, c'est le centre gauche de la page qui semble bénéficier du maximum de visibilité. On peut toutefois supposer que si la page est jugée inintéressante au premier coup d'oeil, seule la zone supérieure gauche de la page aura été examinée.
Un parcours en "F" : l'oeil "accroche" sur les titres et les sous-titres ainsi que sur toutes les parties de la page présentant un fort contraste de couleur ou de luminosité. L'oeil a également tendance à explorer les éléments situés à droite des titres ou des différents éléments qui sont parvenus à attirer son attention.
Ordre du parcours : on constate que le premier balayage est horizontal et se situe dans la partie supérieure. L'oeil entame ensuite un balayage vertical calé sur le côté gauche du contenu principal avant d'explorer tous les points à fort contraste.
Que faut-il en conclure ?
Présentation en liste : les "puces" (points ou motifs de gauche) accroche le regard et améliorent le taux de lecture.
Le titre de votre page ainsi que les deux paragraphes qui le suivent sont des éléments essentiels pour déclancher l'intérêt du lecteur.
Les inter-titres ou sous-titres (en tête de chaque paragraphes) permettent de conserver les lecteurs qui s'apprêtent à quitter votre page
Le jeux des contrastes est celui qui vous permet de capter l'attention du lecteur.
Dans l'une de ses pages de conseils, Google propose des emplacements de publicités qui semble s'inspirer du parcours en "F". Le cadre rouge représente l'emplacement le plus lu, suivi des cadres oranges puis jaunes et blancs.
La prise en compte de ces conseils peut avoir une influence importante sur les revenus de vos publicités.
Comment présenter la page d'accueil : utilisabilité et conventions web
Les recommandations sur la présentation d'une page d'accueil ne sont pas uniquement le reflet des choix optimaux pour faciliter l'utilisation du site. On recommande de suivre les conventions en usage dans le domaine du web (c'est à dire respecter ce qui se fait le plus fréquemment), ce qui permet de capitaliser sur les apprentissages antérieurs des utilisateurs.
Même si ces conventions ne sont pas toujours parfaites d'un point de vue théorique, elles le deviennent car elles sont susceptibles d'être connues des internautes.
Eléments et emplacements de ces éléments
La page d'accueil est LA page spéciale d'un site web. Elle doit donc se distinguer par une mise en page spécifique. Cependant, les éléments clés du site doivent être cohérents avec les autres pages. Les éléments conventionnels d'une page d'accueil et leurs emplacements les plus fréquents sont les suivants:
- Un logo
> Emplacement recommandé : coin supérieur gauche - Une baseline, consistant en quelques mots descriptifs du thème du site
> Emplacement recommandé : sous / à droite du logo - Un champ de recherche lorsque le site fournit un moteur de recherche
> Emplacement recommandé : coin supérieur droit - La navigation principale, avec une mise en valeur de la rubrique courante. Cela permet d'introduire dès la première page le principe de mise en valeur. On recommande aussi que le bouton accueil ne soit pas cliquable, renforçant cette idée que l'on est déjà sur la page d'accueil.
> Emplacement recommandé : navigation horizontale : haut du site / navigation verticale : à gauche du site, sous le logo - Une présentation textuelle du site orientée objectif utilisateurs (elle doit mettre en avant l'intérêt du site pour les utilisateurs)
> Emplacement recommandé : corps de la page, premier contenu à présenter - Les liens dits "utilitaires" (plan du site, contact, à propos de, presse, changement de langue, etc.)
> Emplacement recommandé : coin supérieur droit - Des remontées de contenu : soit en utilisant un facteur chronologique (on présente des raccourcis vers les dernières infos parues, les derniers produits sortis, etc.), soit en utilisant un facteur mise en avant (on présente des raccourcis vers les contenus que l'on veut pousser)
> Emplacement recommandé : corps de la page - Un pied de page (ensemble de liens reprenant la navigation principale ainsi que des liens utilitaires : plan de site, contact, mentions légales, etc.).
> Emplacement recommandé : bas de la page
Un exemple
» Les points négatifs
1 - Le logo cliquable même sur la page d'accueil (Le logo est cliquable alors que l'on se trouve déjà sur la page d'accueil). On recommande en général de ne pas fournir de lien vers la page courante. Le logo Bokson devrait donc être cliquable partout sauf sur la page d'accueil.
2 - Pas de bouton "Accueil". Le lien "Accueil" n'apparaît en effet que dans les pages intérieures. Ce choix manque de cohérence. Les outils de navigation doivent rester homogènes quelque soit l'endroit où l'on se trouve dans le site. De plus, lorsqu'il n'existe pas de bouton "Accueil" sur la page d'accueil, on ne peut pas indiquer à l'utilisateur où il se trouve en mettant en valeur la rubrique consultée.
3 - Pas de baseline. Dans la même idée que le point précédent, l'absence de baseline descriptive manque pour accompagner le logo. Ce type d'élément permet de comprendre rapidement de quoi parle un site web et ce qu'il peut nous apporter.
4 - Le peu d'incitation sur l'image principale. La photo centrale est l'élément principal de la page d'accueil. Elle est cliquable et mène vers la chronique d'un disque. Cependant, l'utilisateur ne s'en rend compte qu'en cliquant sur l'image. On devrait préciser à quel événement ou à quel contenu correspond cette mise en avant (par exemple, chronique du dernier disque des Beastie Boys, 15.06.2004).
5 - Pas de présentation de l'objectif du site. Ce point est toutefois compensé par les autres éléments d'interface, très explicites et qui suggèrent que Bokson est un site traitant de musique (cf. les intitulés des rubriques, les noms des groupes, les photos des disques, les libellés des liens, etc.).
» Les points positifs
1 - La navigation qui s'installe dès la page d'accueil. Le fait que la barre de navigation (Rock, Electro, Hip Hop, World) soit présente dès la page d'accueil permet à l'internaute de l'utiliser en tant que référent, quelque soit l'endroit où il se trouve dans le site. On apprécie que cette barre de navigation ne change pas en fonction de la page où l'on se trouve.
2 - L'emplacement du moteur de recherche. Le moteur de recherche est placé de manière conventionnelle, en haut à droite de l'interface. De plus, il est présenté de façon optimale : on fournit directement un champ de recherche et non un simple lien vers la page de recherche, et on fournit aussi un lien direct vers les options de recherche avancée.
3 - Les liens textuels sur des contenus clés. On sait que les liens du type "tous les artistes" ou "les dernières chroniques" sont susceptibles d'intéresser les visiteurs du site Bokson. On fournit donc une zone spécifique où sont placés ces liens génériques. L'emplacement de cette zone est critique, puisqu'elle se situe juste en-dessous du moteur de recherche. C'est une zone qui a de grandes chances d'être parcourue du regard.
4 - Les dates, titres et liens vers les dernières news. Les news sont une des rubriques mises à jour régulièrement. A ce titre, il est intéressant de fournir dès la page d'accueil des raccourcis vers les dernières news. On supporte ainsi la fonction informative de la page d'accueil : si l'utilisateur voit qu'il a déjà lu la dernière news publiée, il n'a pas besoin d'aller consulter la rubrique news pour voir s'il en existe une nouvelle. On lui facilite donc la tâche de recherche de contenus ajoutés depuis sa dernière visite.
5 - Un lien vers la liste de toutes les news. Il paraît très intéressant de placer un lien vers la rubrique mère à côté des raccourcis liés à des contenus spécifiques. Cela permet à l'utilisateur de considérer la rubrique sous un autre angle que lorsqu'elle est uniquement présentée en barre de navigation. Il peut se faire une idée plus précise de son contenu.
6 - L'inscription à la newsletter sur la page d'accueil. Si l'inscription à la newsletter est une action clé sur le site, si on doit la mettre en avant, il est intéressant de laisser la possibilité d'accomplir l'action la plus courante (à savoir s'inscrire) dès la page d'accueil.
7 - La hiérarchisation des remontées de contenu. La page d'accueil de Bokson est conçue de sorte que l'on comprenne bien l'importance relative accordée à chacune des remontées de contenu. Il existe différents niveaux :
- Niveau 1 : Mise en avant d'une chronique, supportée par une grande image, actualité forte de la page d'accueil
- Niveau 2 : Pour chaque rubrique, mise en avant d'un disque avec facing
- Niveau 2 : Pour chaque rubrique, mise en avant d'une interview avec photo associée
- Niveau 3 : Pour chaque rubrique, mise en avant des dernières chroniques sous forme de liens texte
- Niveau 4 : Pour les 5 dernières news : Date, titre, rubrique, image et lien
8 - La place laissée aux photos et design. Le contenu de la page d'accueil de Boskon est accompagné par un design adapté : l'importance des visuels est à la hauteur des attentes des utilisateurs, mais ne mange pas l'information.