Réalisme dans l’interface de conception


Original: http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/

 

L’histoire de la conception visuelle des interfaces utilisateur peut être décrit comme un changement graduel vers plus de réalisme. Comme les ordinateurs sont devenus plus rapides, les concepteurs ont ajouté des détails de plus en plus réalistes tels que la couleur, des effets 3D, des ombres, la translucidité, et même la physique simple. Certains de ces changements ont contribué à la convivialité. Ombres derrière les fenêtres nous aident à voir la fenêtre active. Le physique de l’interface utilisateur de l’iPhone rend le dispositif plus naturel à utiliser.

Dans d’autres domaines, les améliorations sont pour le moins discutable. Interfaces utilisateur graphiques sont généralement plein de symboles. La plupart des éléments graphiques que vous voyez sur votre écran sont destinés à tenir pour des idées ou des concepts. La petite maison sur votre bureau n’est pas une petite maison, c’est «la maison». L’œil n’est pas un œil réel, cela signifie «coup d’œil à l’élément sélectionné». La dent n’est pas un rouage, cela signifie «click me voir commandes disponibles». Vous êtes généralement pas en train de reproduire des objets physiques, vous essayez de communiquer des concepts.

Détails et réalisme peuvent distraire de ces concepts. Pour expliquer cela, je vais prendre une page de Scott McCloud de «Comprendre BD», un livre qui devrait être une lecture obligatoire pour tous les concepteurs.

Understanding Comics

L’image de gauche est un visage d’une personne spécifique. L’image de droite est le concept «visage»; il pourrait être n’importe quelle personne. Lors de la conception d’interfaces utilisateur, nous rarement voulons montrer une entité spécifique; généralement, nous voulons transmettre une idée ou un concept. Détails peuvent facilement distraire de cette idée ou un concept.

Symbol vs. Photo

 

Dans le même temps, il est évident que certains détails sont nécessaires. Trop peu de détails, et l’utilisateur ne reconnaissent pas l’idée du tout.

What's in a face?

 

Le cercle de gauche montre clairement un visage. Le cercle sur la droite n’est pas reconnaissable comme un visage plus.

Regardons un symbole que nous voyons réellement dans les interfaces utilisateur, le bouton d’accueil. Typiquement, ce bouton utilise une petite maison comme son symbole.

Home Buttons

 

La chose sur la gauche est une maison. La chose sur la droite signifie «la maison». Quelque part entre les deux, les commutateurs de sens de «une maison spécifique» à «la maison comme un concept». Le quelque chose de plus réaliste, plus il est difficile de comprendre le sens. Encore une fois, si l’image est trop simplifié, il n’est pas clairement et immédiatement reconnaissable plus.

Home Buttons losing details

 

La chose sur la gauche est un bouton d’accueil. La chose sur la droite pourrait aussi bien être une flèche pointant vers le haut; ou c’est peut-être la clé de ⇧.

Permettez-moi de vous expliquer ce concept à l’aide d’un graphique entièrement non scientifique:

Cognition

 

Les gens sont confus par des symboles s’ils ont trop ou trop peu de détails. Ils reconnaîtront les éléments de l’interface utilisateur qui sont quelque part au milieu.

L’astuce est de savoir qui détaille aider les utilisateurs à identifier l’élément de l’interface utilisateur, et dont les détails détourner de son sens voulu. Quelques détails permettent aux utilisateurs de comprendre ce qu’ils regardent et comment ils peuvent interagir avec lui; autres détails distraire de l’idée que vous essayez de transmettre. Ils transforment votre élément d’interface d’un concept en une chose spécifique. Ainsi, si un élément d’interface est trop distincte de son homologue de la vie réelle, il devient trop difficile à reconnaître. D’autre part, si elle est trop réaliste, les gens sont incapables de comprendre que vous essayez de communiquer une idée, et quelle idée qui pourrait être.

Buttons

 

Le bouton sur la gauche est trop réaliste. Le bouton sur la droite n’a pas suffisamment de détails pour être immédiatement reconnaissable comme un bouton.

Toggles

 

La même chose s’applique à ces bascules. Ombres et des dégradés aident l’utilisateur à comprendre ce qu’il regarde et comment interagir avec elle. Ajout trop de détails, cependant, finit par être source de confusion. L’interrupteur à bascule n’est plus seulement un interrupteur à bascule qui fait partie d’une interface utilisateur, il est clairement reconnaissable comme une photographie d’un interrupteur à bascule spécifique; il perd sa signification. Ce n’est plus un symbole, il est devenu une chose spécifique.

Home Button
une exception

Il ya au moins un domaine spécifique où plus de détails sont bons: les icônes d’application. Vous voulez que votre icône pour représenter un idée précise: Votre application.

Application Icons

 

La feuille de Coda n’est pas une représentation de l’idée d’une feuille; c’est une feuille très spécifique, la feuille Coda. Gland de gland n’est pas n’importe quel gland, c’est le gland. Ajout de détails déplace ces images à partir d’un concept générique vers une entité spécifique, et dans le cas d’une icône d’application, c’est exactement ce que vous voulez.

conclusion

Interfaces utilisateur graphiques sont pleins de symboles. Symboles doivent être réduites à leur essence. Cela permet d’éviter d’encombrer l’interface utilisateur avec les distractions de sens, et il est plus facile pour les gens à «lire» le symbole et comprendre le sens d’un élément d’interface. Détails réalistes peuvent obtenir de la manière de ce que vous essayez de communiquer à vos utilisateurs.

Sauf si vous créez une version virtuelle d’un objet physique réel, le but n’est pas de faire de votre interface utilisateur aussi réaliste que possible. Le but est d’ajouter les détails qui aident les utilisateurs à identifier ce qu’est un élément, et la façon d’interagir avec elle, et de ne pas ajouter plus de ces détails. Éléments de l’interface sont des abstractions qui véhiculent des concepts et des idées; ils devraient conserver que les détails qui sont pertinents à leur but. Éléments d’interface utilisateur ne sont presque jamais des représentations de choses réelles. Ajouter trop de réalisme peut causer de la confusion.

Merci à Max Steenbergen et Cameron Kenley Hunt pour m’aider à former une opinion cohérente sur ce sujet.
La deuxième icône de la maison est de graphisme de Dellustrations la «Dellipack».

Comments are closed.