Apple, à l’origine de cette tendance ?

Il me semble que l’absence de barre de titre et de menu s’est faite remarquer en premier sur les applications d’Apple. Ci-dessous un aperçu de la dernière version d’iTunes puis de Safari.

Pas barre de titre donc, et Apple va même jusqu’à ne pas indiquer le titre de l’application du tout. Le contenu prime et suffit pour définir l’application. En titre sur Safari, le titre de la page web.

La barre de menu classique a également disparue. Je parle de cette barre de menu commençant en général par « Fichier  Édition  Affichage… » que l’on avait pris l’habitude de retrouver dans toutes applications…. et qui semble avoir fait son temps.

Microsoft garde la barre de titre et délocalise le menu

On note également une évolution dans ce sens chez Microsoft, mais si la barre de titre classique disparait, la barre de titre, elle, est encore là.

Sur le messenger de Windows Live par exemple, le menu se trouve rangé derrière une icône en bas à droite du header qui représente justement cette barre de menu classique, et en dernière position, ce menu propose de faire réapparaitre la barre de menu classique.

Idem sur Internet Explorer, la barre de titre est encore là, mais les menus se trouvent condensés derrières trois titres dans le coin inférieur droit du header.

Adobe garde le menu et supprime la barre de titre

De son côté, Adobe fait l’inverse de Microsoft : le menu ne change pas mais la barre de titre disparait. Enfin pas tout à fait : le logo en tête de menu rappel sur quelle application on se trouve, et les fonctions d’ajustement de la taille de la fenêtre et de fermeture se retrouvent en bout de ligne. Une sorte de 2 en 1. Un exemple avec Adobe Photosop :

Du côté des navigateurs internet, Chrome suit la tendance

Alors que Firefox est encore au format classique barre de titre + barre de menu, et qu’Internet Explorer suit le nouveau modèle Microsoft comme vu ci-dessus, Chrome suit la nouvelle tendance :

Pas de barre de titre, la fenêtre commence aux onglets, au contenu.

Les premiers tests d’utilisabilité de l’iPad rappellent à quel point les standards sont importants. Ce qui rend une interface intuitive, c’est le fait qu’on comprenne rapidement comment elle marche, ce qu’on peut faire, et qu’elle réagisse conformément à nos attentes. Encore faut-il avoir des attentes. Si les standards du web sont maintenant bien connus et mémorisés par les utilisateurs, tout nouveau support entraine une expérience utilisateur différente et de nouveaux standards à construire. Jakob Nielsen met en avant dans son étude le problème que pose l’absence de conventions et donc d’attentes des utilisateurs. C’est à dire qu’ils ne connaissent pas à l’avance les actions possibles, le résultat de leurs actions et la manière dont tel ou tel résultat devrait pouvoir être obtenu.

Le support étant nouveau, l’utilisateur est tolérant et enregistre le fonctionnement des interfaces qu’il parcoure. Mais le problème est que chaque concepteur a imaginé un fonctionnement différent et que chaque interface réagit différemment. Les utilisateurs ne peuvent donc pas transférer les acquis d’une application à une autre.

L’étude souligne par exemple le fait que de cliquer sur une image peut donner 5 résultats différents :
- ne rien faire,
- agrandir l’image,
- envoyer sur une autre page,
- passer à une autre image,
- afficher des options.

De même, le scroll peut fonctionner de plusieurs façons :
- faire défiler une page avec un mouvement de haut en bas, comme une barre de défilement verticale,
- faire défiler une page avec un mouvement de bas en haut, comme pour faire remonter la page,
- faire défiler une page latéralement, comme on tourne une page.

Comme le fait remarquer SimpleWeb.fr, le problème est amplifié par le fait que les écrans tactiles ont cette possibilité en moins de pouvoir déclencher des actions au survol de la souris, qui permettent de prévoir la possibilité d’une action et son résultat : changement d’apparence qui indique qu’un élément est cliquable, apparition d’une loupe au survol d’une image, etc. Ceci renforce le besoin de standards, et l’effort que doit faire le concepteur pour permettre à l’utilisateur de comprendre ce qu’il peut faire et le résultat que va produire une action. D’autant plus important qu’il n’y a pas de bouton « retour » !

Les premières applications pour l’iPad mettent l’accent sur le design, mais pour que les utilisateurs s’approprient ce nouveau support, il sera nécessaire de revoir les priorités et d’accorder plus d’importance à la compréhensibilité et l’établissement de conventions.

Parmi les nombreux points qu’il faut soigner lors de la création d’un formulaire, la gestion des erreurs est cruciale. Rien de plus énervant que de se faire renvoyer sur le formulaire avec des messages d’erreurs regroupés en haut de la page ou dans un pop-up. Encore pire si entre temps certains champs (souvent le mot de passe et sa confirmation) ont été effacés. Il y a certains formulaires qu’on valide 3 ou 4 fois avant de se voir autoriser à accéder à la page suivante !

Une gestion optimisée des erreurs, c’est

• Dans un premier temps, utiliser des libellés clairs et donner une explication ou un exemple si nécessaire, pour éviter que l’utilisateur fasse des erreurs.
• Afficher un message d’erreur clair, situé au niveau de l’erreur. Et le must : une vérification à la volée, c’est à dire lors du passage au champs suivant, et pas uniquement lors de la validation finale du formulaire. C’est de cela qu’il est question avec le plugin Ketchup.

Ce plugin qui utilise le jQuery permet d’afficher un message dans une bulle couleur Ketchup lorsque le contenu d’un champs n’est pas correct. Et bien entendu, la bulle disparait lorsque la saisie est corrigée.

Ketchup gère 17 validations, qui peuvent être combinées. Pour les autres, il faudra les ajouter soi-même. Et concernant l’apparence des messages d’erreur ou le message en lui même, il ne tient qu’à vous de les adapter.

Toutes les infos pour installer ce plugin sur le site du plugin Ketchup.

Voici à quoi ressemble l’espace de travail :

HotGloo met à disposition de nombreux éléments de design pour la réalisation des maquettes, et chaque élément possède des propriétés avancées.

Hotgloo permet de réaliser des storyboards dynamiques. On peut choisir d’envoyer sur une autre page du storyboard, sur une URL ou de faire apparaitre une alerte lors d’un clic sur un élément.

Tous les raccourcis claviers que vous avez l’habitude d’utiliser fonctionnent : Ctrl+C / Ctrl+V, sélection multiple avec la touche Maj, Ctrl + et Ctrl – pour zoomer, Ctrl+Z / Ctrl+Y pour l’historique des actions…

Enfin, passez en mode Rewiew pour voir votre storyboard fonctionner. Invitez vos collaborateurs à voir, modifier ou commenter votre storyboard.

HotGloo propose également de l’exporter en PNG ou PDF.

Il existe une application en ligne réservée à la création de wireframes pour applications iPhone : iPhone Mockup.

Toutes les formes prédéfinies se trouvent dans la colonne de gauche, et vous pouvez uploader toutes les autres formes ou images dont vous pouvez avoir besoin.

L’application est simplifiée au maximum. Attention, pas de création de compte sur iPhone Mockup, pensez à enregistrer l’URL de chacune de vos maquettes pour les retrouver et les partager !

Avec en plus deux choix de style, il plaira à tous.

Petite précision : l’application ne s’affiche pas correctement sur IE.

Erreur 1 : Un texte par défaut qui ne s’efface pas automatiquement

Problème : Dans un formulaire, on écrit parfois un texte par défaut pour indiquer aux internautes ce que l’on attend dans ce champs. Et c’est énervant quand ce texte ne s’efface pas tout seul lorsqu’on clique sur le champ !

Exemple :

Solution : Ajoutez dans le code de votre formulaire un peu de JavaScript qui demande de supprimer le contenu du champ lorsque le champ est sélectionné, si le texte qu’il contient est le texte par défaut.

<input id="e-mail" type="text" value="texte par défaut" onFocus="if (this.value=='texte par défaut') this.value=''" />

Cela donne :

Erreur 2 : Les étiquettes des formulaires non associées aux boutons radio ou cases à cocher

Problème : Lorsqu’on ne déclare pas dans son code quelle étiquette (<label> étiquette </label>) va avec quel élément alors ils ne sont pas associés et cliquer sur l’étiquette d’un bouton radio ou d’une case à cocher ne  permet pas de cocher la case.

Exemple :

Solution : Utiliser l’attribut "for".

<input id="accepter" type="checkbox" />
<label for="accepter">J’accèpte</label>

Cela donne :

Erreur 3 : Ne pas indiquer le champ sélectionné

Problème : Sur un formulaire, si on ne sait pas sur quel champ on se trouve la navigation au clavier devient impossible.

Solution : Préciser en CSS l’apparence du champ lorsqu’il est actif : bordure plus foncée, background….

textarea:focus {
border: 1px solid black;
}

Erreur 4 : Une image sans texte alternatif

Problème : L’absence d’alternative textuelle pour les graphiques et les images est l’un des plus grands problèmes d’accessibilité sur le Web.

Solution : Utilisez toujours l’attribut alt. Il doit contenir le but de l’image plutôt que sa description. Pour une image décorative, utilisez un alt vide alt="" pour indiquer que cette image peut être ignorée.

<img src="chemin de l’image" alt="but de l’image" />

Erreur 5 : Une image en background sans background color

Problème : Si l’image en background n’apparait pas pour une raison ou une autre, le texte qui devait apparaitre sur cette image va apparaitre sur un fond blanc et ne sera peut-être pas lisible.

Solution : Toujours préciser la couleur d’arrière plan au cas où l’image n’apparaisse pas.

Erreur 6 : Souligner du texte qui n’est pas un lien

Problème : Le fait de souligner les liens (en permanence ou au passage de la souris) est un standard du web. En scannant un texte, un internaute aura donc tendance à penser qu’un texte souligné est cliquable.

Solution : Utilisez du texte en gras pour faire ressortir des éléments et réservez le soulignement aux liens.

Erreur 7 : Ne pas indiquer un lien visité

Problème : Ne pas changer l’apparence des liens visités empêche de savoir quels liens ont déjà été suivis.

Solution : Ne pas oublier de déclarer l’état a:visited dans le CSS.

a:visited {
color: #551A8B;
decoration: underline;
}

Erreur 8 : Cliquez-ici !

Problème : Les internautes ne lisent pas les pages, ils les scannent… leur regard est attiré par les titres, les visuels, et les liens en raison de leur mise en forme. Si le lien porte sur cliquez-ici, l’internaute n’aura recueilli aucune information. Il devra lire le paragraphe pour savoir sur quoi porte le lien.

Solution : Faites porter le liens sur un groupe de mot qui décrit le lien.

Erreur 9 : Justifier des colonnes trop larges ou trop étroites

Problème : Justifier le texte rend une page plus esthétique, mais cela peut considérablement gêner la lecture si le texte s’étend sur une trop petite ou au contraire une trop grande largeur.
Trop petite largeur : espace démesuré entre les mots.
Trop grande largeur : difficile de se repérer lorsque l’on passe d’une ligne à l’autre.

Exemple :

Solution : Colonne large : ne pas justifier le texte où faire deux colonnes. Colonne étroite : ne pas justifier le texte.

Erreur 10 : Un logo qui ne renvoie pas sur la home

Problème : Le fait de retourner sur la page d’accueil quand on clique sur le logo en haut à gauche d’une page est devenu un standard du web. Ne pas le respecter risque de gêner les utilisateurs !

Solution : Toujours faire en sorte que le logo en haut à gauche renvoie sur la page d’accueil du site. Certains site le fond remarquer habilement en faisant apparaitre le mot home ou le symbole de la petite maison au passage de la souris.

Il est maintenant possible de tester une nouvelle interface plus colorée, avec une barre de recherche et des boutons encore plus gros…

Et la page des résultats de recherche change aussi. Personnellement, la large barre de recherche avec le bouton search bleu à la fin m’a tout de suite fait penser à Bing !

Voici comment faire pour avoir accès à cette interface

1. Allez sur Google.com et cliquez sur « Google.com in English » si nécessaire pour arriver sur la version anglaise.
2. Copiez collez le code ci-dessous dans votre barre d’adresse et validez.

javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");

3. Retournez sur Google.com (et recliquez sur « Google.com in English » si nécessaire).

Alors, vous en pensez quoi ?

La connaissance de ces éléments s’acquièrent au fil de la réalisation de maquettes de sites internet, mais les librairies de patterns, c’est à dire de modèles de conception, peuvent grandement vous aider.

Elles se présentent à peu près toutes de la même façon : une liste de modèles de conception, et pour chaque modèle les informations suivantes : le besoin qu’il satisfait, une description, les avantages et les inconvénient de cette solution, comment et pourquoi l’utiliser, et une galerie d’exemples graphiques (captures d’écran) que l’on peut en général commenter.

Il existe de nombreuses librairies de modèles de conception. Vous pourrez par exemple en trouver une dizaine dans cet article et une 20aine dans celui-là. Je vais vous présenter les trois que je préfère.

1. UI Patterns

UI Patterns présente une cinquantaine de modèles de conception et pour chacun d’eux, de très nombreux exemples. Sa richesse en captures d’écrans la rend également utile pour la partie design du site, qui vient après la réalisation des wireframes.

Ce que j’aime également dans cette librairie c’est la variété et l’originalité des exemples. Par exemple, disons que vous souhaitez aider les internautes à se repérer dans les ramifications du menu de votre site. Vous cliquez sur le pattern « breadcrumbs ». UI Patterns ne vous présente pas trois captures d’écran semblables d’un fil d’ariane classique  tel qu’on peut le voir partout, mais des breadcrumbs un peu différents qui joignent menu et fil d’ariane par exemple, ou avec des visuels. Voici un extrait de la galerie de captures d’écran de la librairie UI Patterns pour ce modèle :

Le site vous propose aussi de mettre de côté les patterns qui vous ont plu pour pouvoir les retrouver facilement.

UI Patterns Survey

Intéressant à savoir : UI Patterns fait des statistiques sur la forme, la dénomination et l’emplacement des éléments génériques des interfaces utilisateurs tels que le logo, la création de compte, l’accès au compte, la recherche, le menu ou l’aide. Le résultat de leur enquête permet de connaitre les standards du web, qui sont souvent un bon moyen de construire un site simple et efficace !

2. Quince

Quince est une autre librairie de patterns, également bien documentée.  Ce qu’elle a de spécial ? Le site réalisé avec la technologie Silverlight est vraiment beau et la navigation très agréable. De plus, les moyens d’explorer le catalogue de patterns y sont multiples. Alors que dans la plupart des librairie les patterns sont simplement présentées sous forme de liste arrangée par catégories, Quince propose quatre manières d’explorer le catalogue : par ordre alphabétique, par catégories et sous-catégories, par relation entre les patterns, et par wireframe.

Navigation par wireframe :

3. Ecommr

Ecommr est la librairie à utiliser si vous faites la maquette d’un site e-commerce. Elle présente des modèles d’éléments de sites e-commerce mais aussi des bannières de publicité et des newsletters commerciales. Je trouve que l’idée de regrouper les modèles de conception e-commerce est très bonne, cependant le site n’est pas documenté. On trouve seulement des galeries de captures d’écran. Sympa tout de même.

Un exemple avec les fiches produits :

Et vous, si vous utilisiez déjà des librairies de patterns, quelles sont celles que vous préférez ?

Commençons par le nouveau logo. J’aime toujours autant le petit papillon coloré qui joue avec la transparence et je trouve que la finesse des lettres va très bien avec le design épuré.

Concernant la navigation, MSN abandonne son bandeau de liens en bloc pour un vrai menu, déroulant, avec un code couleur. Il y a des chances pour qu’il soit plus utilisé !
avant :

après :

Dans le contenu de la page, MSN gagne énormément de place avec des blocs dont on peut faire défiler le contenu, et un système d’onglets. Très efficace pour proposer un contenu conséquent sans surcharger la page, les internautes pourront ne consulter que le contenu qui les intéresse.

Autre élément sympa, la colonne de gauche (après la pub…) propose un accès à Hotmail et un récapitulatif de l’actualité sur son compte Windows live, Facebook et Twitter.

Bon, maintenant je passe aux défauts.

Concernant le design, ça « flotte » un peu vous ne trouvez pas ? Il n’y a plus de lignes verticales qui aident à la structuration du contenu et à l’inverse je me demande si certaines lignes horizontales sont vraiment nécessaires dans la partie basse. Mettre des points devant chaque ligne et suffisamment d’espace blanc, comme sur l’ancienne version et comme dans le premier bloc de contenu, me parait mieux.

L’agencement des onglets ne me parait pas toujours pertinent. La première série d’onglet reprend les news par catégories, pas de problème. La deuxième série d’onglet mélange les infos locales (météo, infos, événements), les films au ciné, la recherche d’emploi et Bing Maps. C’est à dire tout ce qui nécessite que vous indiquiez là où vous êtes. Je sais pas si la recherche d’emplois a vraiment sa place ici, mais passons. Dans le dernier groupe d’onglets, je ne vois pas le rapport entre « Popular Searches » et « Shopping ». Ça a effectivement un rapport pour MSN car les deux onglets renvoient vers des résultats de Bing, mais cela ne me semble pas pertinent pour l’utilisateur. Enfin bon, on peut se dire qu’une fois que les internautes se seront habitués à l’emplacement des informations ce ne sera plus un problème !

Enfin, ce que je trouve dommage, c’est que cette page ne soit pas personnalisable. Il est vrai qu’il y a une partie « local » et que la colonne de gauche est réservée à des infos personnelles (encore faut-il avoir un compte Hotmail, Facebook et Twitter). Mais on est loin de iGoogle et de la nouvelle page d’accueil Yahoo. La personnalisation est un élément qui me parait très important. En ce qui me concerne, je vais rester fidèle à iGoogle pour la page par défaut de mon navigateur.

Ce que révèlent les tests utilisateurs

Bien sûr, il y a des pages peu scrollées, les pages de résultats de Google par exemple. Mais c’est différent, c’est un moteur de recherche, vous lui avez dit ce que vous cherchez : c’est son boulot de le mettre en haut de la page !

Dans la majorité des cas, les internautes ne voient aucun inconvénient dans le fait de scroller les pages, même très longues.

Les internautes ne lisent pas les pages, ils les survolent

Les internautes ne lisent pas les pages, ils les scannent à la recherche d’un mot ou d’une phrase qui correspond à ce qu’ils recherchent. Lorsqu’ils ont identifié une zone qui semble convenir, ils cherchent la partie cliquable et cliquent.

L’explication de ce comportement est que l’internaute veut aller vite et que cliquer sur le premier lien qui semble satisfaisant s’avère plus efficace que l’évaluation des différentes opportunités offertes. En effet, sur internet on ne risque pas grand chose à se tromper. A condition que les pages se chargent vite, se tromper et cliquer sur la fonction retour du navigateur prend très peu de temps.

Conclusion

L’important, ce n’est pas de tout mettre au-dessus de la ligne de flottaison, mais plutôt de :

• Bien structurer sa page pour faciliter la navigation éclair des internautes : une mise en page aérée, des zones bien délimitées avec des titres clairs et bien visibles, des éléments cliquables mis en évidence. Attention, un élément qui semble cliquable mais qui ne l’est pas génère de la frustration : vous faites perdre du temps à l’utilisateur.
• Encourager le scroll. Pour cela,  il est important de
  - ne pas condenser trop informations en  haut de la page,
  - prévoir dans quel intervalle va se trouver la ligne de flottaison (selon les tailles et résolutions d’écran) pour faire attention de ne pas donner l’impression que le site s’arrête à cet endroit,
  - ne pas abuser des lignes transversales qui coupent la page.

Un exemple de refonte pour encourager le scroll :

avant :

après :

Vous n’êtes pas convaincu ? Installez un outils permettant d’enregistrer la navigation de vos internautes et observez-les !