Ce sujet a pour but d’exposer quelques règles essentielles pour aborder sereinement la création graphique et ergonomique d’un site web.
Favorisez la cohérence en respectant les conventions d’interaction et de représentation. Donnez un feedback aux actions de l’internaute. Il faut que les visiteurs identifient correctement les boutons. C’est son apparence et son comportement qui doit nous indiquer son utilité (affordance). Par exemple, un aspect bombé indique qu’il peut être enfoncé. Ainsi, le bouton a la capacité de suggérer sa propre utilisation.
Privilégiez la lisibilité et la visibilité des informations
L’expérience doit toujours sembler simple, même si le parcours est complexe et requiert un enchaînement d’interactions. C’est pourquoi il vaut mieux découper en plusieurs petites opérations faciles à réaliser isolément, plutôt que d’opter pour un dispositif visuellement complexe qui impose une trop lourde charge cognitive. Restez simple en respectant la loi de Fitts pour ne pas recourir à la mémoire. (ex : une cible est d’autant plus rapide à atteindre qu’elle est proche et grande).
Pensez taille plutôt que pixel. Ceci est comparable au dpi qui existe dans l’univers de l’impression.
Dans le iOS Human Interface Guidelines, Apple recommande de créer des cibles tactiles de 44 points. Il utilise des points plutôt que des pixels pour gérer leurs différentes résolutions. Pour tenir compte des variations de résolutions (en ppi), il est donc préférable de mesurer les cibles tactiles en dimensions physiques. Microsoft recommande plutôt des cibles de 9mm/34px, une taille minimale de 7mm/26px et un espacement minimal entre les actions de 2mm/8px. Il faut savoir qu’on parle de la zone tactile mais la représentation visuelle peut être de 50-100 % de la taille cible. Microsoft recommande aussi d’agrandir cette zone si l’élément de l’interface est fréquemment touché ou si l’élément est au bord de l’écran ou difficile à atteindre ou si l’élément est une tache séquentielle.
Pensez clic et oubliez le roll over et les tooltips. Limitez l’utilisation du clavier. Pensez également une charte graphique qui tient compte de l’éclairage extérieur. Il faut que les informations soient suffisamment contrastées pour qu’elles restent lisibles en plein soleil. Les conditions de mobilité ne sont pas les mêmes que sur un ordinateur de bureau. Privilégiez un fond clair plutôt qu’un fond foncé pour un contraste optimal. Vous pouvez vous appuyer sur Colour Contrast Analyser qui utilise un algorithme de contraste d’accessibilité.
Ainsi en suivant ces recommandations, vous répondez aux normes tactiles et par conséquent aux normes web actuelles. Ces règles sont bien sûr à pondérer en fonction du type d’utilisateur et du projet. Il faut savoir qu’il est toujours possible de transgresser ces règles en cas de besoin mais il faut en être conscient. Certaines choses peuvent être présentées différemment, l’ergonomie ne doit pas brider la créativité.
Mais n’oubliez pas, que l’être humain préfère toujours ce qu’il connaît, tout simplement.
Référence Amélie Boucher, ergonome