Utilisabilité visuelle d'un nouveau site Web - Les nuls

Travailler sur la conception d'interaction pour une tâche est une partie du bon sens et une partie de la logique quand il s'agit out les widgets à utiliser et le flux pour les organiser. Le reste est tout le design visuel. L'emplacement, le regroupement, l'agencement relatif et la conception de vos composants interactifs peuvent grandement contribuer à la fluidité d'une tâche ou à son arrêt.

cet exemple de formulaire manque de conception visuelle et d'organisation, ce qui le rend plus difficile à suivre.

Cet exemple a une meilleure organisation de la conception, un design visuel un peu meilleur et un texte d'aide qui rend cette forme beaucoup plus facile à utiliser.

Donner un avis de retournement

Un moyen sûr de faire savoir aux gens que les choses sont interactives est de leur faire changer d'apparence ou de déclencher une action lorsque le curseur entre en contact avec eux. Lorsque le curseur entre en contact avec quelque chose à l'écran, il s'agit d'un roulement . Un certain nombre de choses peuvent se produire lorsque le pointeur de la souris survole un composant interactif. Si l'élément a un lien, le curseur lui-même passe d'une flèche à un doigt pointé. C'est un moyen simple et intégré de fournir un retour visuel afin que vous puissiez faire savoir aux gens qu'un élément est interactif. Cependant, vous pouvez fournir des commentaires supplémentaires lors du rollover - des commentaires qui peuvent même aider quelqu'un à utiliser la navigation. Voici quelques façons de le faire:

• Modifie l'apparence du graphique.

  Souvent les concepteurs ne prennent pas la peine de fournir un état cliqué. Rappelez-vous, chaque état est un graphique unique que vous devez produire - et que le navigateur doit charger.

• Développez ou animez l'élément.

  

  Un survol change d'apparence lorsqu'un utilisateur le survole ou le clique.

Concevoir des boutons de site Web qui semblent cliquables

Si vous comptez simplement sur le retour de survol (par exemple, le curseur se transforme en doigt de pointage lors d'un survol), vous créez l'utilisateur frottez le curseur sur tout l'écran à la recherche de choses interactives. Par conséquent, il est important de cliquer sur pour que les éléments interactifs soient cliquables.

En général, vous pouvez rendre les éléments de l'interface graphique plus cliquables de l'une des trois façons suivantes:

• Étiqueter les boutons avec des phrases d'action. Il est recommandé de placer des étiquettes courtes et précises sur les boutons et de conduire l'utilisateur avec des verbes d'action non-sens tels que Imprimer ou Voir la carte. Les étiquettes passives telles que Visite virtuelle ou les étiquettes nébuleuses de type marketing comme Magical journey sont moins efficaces.

• Ajouter une cote Faites en sorte que les éléments du bouton se démarquent physiquement sur la page en leur donnant une qualité en trois dimensions.

Tirer des indices de la vie quotidienne

La conception visuelle et la texture de vos composants interactifs aident les gens à savoir comment interagir avec eux. Les objets avec lesquels vous interagissez tous les jours, tels que les boutons, les tiroirs et les cadrans, sont une excellente source d'inspiration pour la conception d'éléments interactifs sur votre page Web. Les gens sont déjà bien formés pour utiliser ces objets quotidiens; tout le monde sait comment appuyer sur les boutons, tirer sur les poignées des tiroirs et tourner les cadrans.

Regardez à la fois l'interface de numérotation et le schéma de tiroir du lecteur QuickTime d'Apple. Déterminer comment utiliser ces petits widgets pour contrôler le volume et accéder à un menu d'options est facile. Pour le volume, vous cliquez et faites glisser la molette pour activer ou désactiver l'audio. Pour le tiroir des options, vous prenez la zone de poignée et faites glisser vers le bas.

Regroupement et imbrication d'éléments sur un site Web

L'emplacement relatif et la mise en grappe des composants interactifs sont autant d'indices de leur nature interactive que tout autre traitement visuel. Par exemple, le regroupement d'une série d'éléments d'interface similaires dans une même unité graphique peut leur donner une apparence cliquable, même si les graphiques eux-mêmes ne semblent pas cliquables.

Si vous regroupez et que vous conservez une série d'éléments en texte brut qui ont le même traitement de police, vous créez un élément graphique fort qui se démarque des autres éléments de la page et implique de l'interactivité. Voir des éléments semblables dans un groupe accomplit deux choses:

• Un groupe implique de l'interactivité. Un ensemble de textes ou d'éléments graphiques regroupés crée une unité visuelle qui attire l'attention des gens.

• Un groupe implique une fonction similaire. En associant visuellement un ensemble de liens, vous indiquez qu'ils exécutent tous des fonctions similaires et ont la même priorité relative sur le site.

Vous pouvez également impliquer une relation dans les éléments groupés en imbriquant certains éléments sous d'autres.

Placez des liens de texte simples dans un conteneur pour le différencier du design de la page et impliquer une interactivité.

En imbriquant des éléments sous d'autres, vous pouvez impliquer une relation hiérarchique entre eux.

Commentaires «Vous êtes ici»

Lorsque les utilisateurs naviguent sur des sites, ils aiment avoir une idée de l'endroit où ils se trouvent et, s'ils travaillent, combien de temps se passera-t-il?. Pour vous aider à répondre à ces questions, votre interface peut vous fournir les commentaires «Vous êtes ici» comme suit:

• Mettez en surbrillance les options de navigation sélectionnées. Lorsqu'un utilisateur clique sur un élément de navigation, même s'il a sélectionné quelque chose dans un menu déroulant, il est préférable de le mettre en surbrillance pour lui indiquer dans quelle section il se trouve.

• Afficher la progression. Si quelqu'un effectue une tâche en plusieurs étapes, c'est une bonne idée de lui montrer un indicateur de progression lui indiquant où il se trouve et combien il doit faire de plus.

  

  Crédit: © Kawasaki Motors Corp., États-Unis A. Ce site Web place sa navigation globale verticalement sur le côté gauche, mais il est toujours clair de voir dans quelle section vous vous trouvez.

  

  Crédit: © EviteLes étapes numérotées aident l'utilisateur à savoir où il se trouve dans un processus.