Design et interactivité II - Cégep de Sainte-Foy

Design et interactivité II
5 8 2 – F W V – SF
CHAPITRE 3
Cégep de Sainte-Foy
Département des techniques de communication
Programme des Techniques d’intégration multimédia
SOMMAIRE
Chapitre 3 Eléments d’interface versus la tâche
Les éléments d’interfaces (les icônes).................................................................................................. xx
Considération conceptuelle des icônes ................................................................................................ xx
Concevoir les éléments d’interface ....................................................................................................... xx
Concept d’affordance ............................................................................................................................. xx
Médiagraphie.......................................................................................................................................... xx
Design et interactivité II 582-FWV-SF
2
Chapitre 3
Éléments d’interface
3.1 Icônes
Nous avions abordé le sujet des icônes dans le cours Design et interactivité I par le biais des règles de
construction des icônes. Nous reviendrons une fois de plus sur la conception d’icônes puisque ce sont des
éléments incontournables des interfaces graphiques utilisateurs de l’informatique moderne. Force est de
constater qu’au lieu de menus purement textuels et des boutons, nous avons adopté des métaphores
visuelles pour les fonctionnalités de notre ordinateur, par exemple la « corbeille » pour jeter les documents
inutilisés…
Nous observons aussi que les icônes conservent généralement un certain degré de
ressemblance avec le monde physique. Prenons l’exemple du CD qui représente le
lecteur de musique parce qu’il contient de la musique. L’avantage d’un langage visuel
basé sur la ressemblance avec le monde physique est que l’adoption virtuelle en est
facilitée. En effet, toute l’interface du système d’opération de notre ordinateur est
basée sur des métaphores : des « fenêtres », des « fichiers », des « dossiers », des
« pages », une « corbeille », le « bureau », etc.
Icône iTunes
Par contre, un désavantage à l’utilisation d’icônes calquées sur le monde physique est que la métaphore
utilisée pour les images puisse tomber en désuétude. Reprenons l’exemple du CD, la musique est de
moins en moins distribuée sur CD et de plus en plus sous forme de fichiers téléchargeables. Ainsi, l’icône
du CD ne s’applique plus vraiment...
Même chose pour la sauvegarde d’un fichier. L’icône disquette, bien qu’encore employée dans
certaines versions de logiciel, est un référent peu signifiant pour les jeunes utilisateurs nés après
1998, année où les lecteurs de disquettes sont disparus peu à peu des ordinateurs.
Améliorer l’ergonomie
Dans tous les cas, les icônes visent à améliorer l’intuitivité et l'ergonomie des interfaces. En créant des
raccourcis imagés, donc perçus et déchiffrés rapidement, les icônes améliorent le confort d’utilisation de
l’interface. Elles minimisent la charge mentale et la densité informationnelle.
Il existe cependant une différence importante entre « voir », action instantanée et basée sur une
compréhension implicite de signes ; et « lire », action qui demande un effort conscient et du temps. Dans
un contexte de compréhension rapide et intuitive, les icônes sont conçues pour être vues et comprises en
même temps.
La réalisation d’icônes, un exercice ardu.
Synthétiser l’idée ou l’action, l’exprimer clairement, trouver le style graphique, voilà en bref l’exercice de
réalisation des icônes. Le style graphique, en plus de s’appliquer de manière cohérente à l’ensemble des
jeux d’icônes d’une application, doit s’harmoniser avec le style général de l’environnement dans lequel
elles seront placées. On devra de plus tenir compte du contexte d’utilisation et du type d’utilisateur dans
les solutions retenues.
Avantages et inconvénients de l’utilisation des icônes
Avantages
Inconvénients
• perçues plus vite que le texte
• plus facilement mémorisées
• disent “plus” avec “moins” (suggestives)
• ne posent pas de problèmes linguistiques
(« universelles »)
• ne sont pas toujours explicites (claires)
• sont sujettes aux limites culturelles
• peuvent tomber en désuétude
• doivent être utilisées plusieurs fois pour permettre
l’efficience dans l’utilisation d’un produit.
Design et interactivité II 582-FWV-SF
3
3.2 Mise en relief des particularités des icônes
Consultez les différents hyperliens proposés dans la médiagraphie du chapitre 3 afin de vous familiariser
avec différents concepts relatifs à la conception d’icônes. Mais lisez d’abord les questions suivantes afin
de guider vos visites.
• Démarche de conception
Selon vous, quelle est la démarche de conception qui mène à la réalisation d’icônes ? Concrètement,
quelles étapes faut-il réaliser ?
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
• Ergonomie
Identifiez les critères ergonomiques qui doivent prédominer lors de la conception d’icônes. (voir chapitre 1)
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
_________________________________________________________________________________
• Traitement graphique
Lors de la réalisation d’une icône, on doit tenir compte de plusieurs aspects. Observez une icône que
vous jugez réussie et dégagez les qualités qui ont trait à :
la couleur : _______________________________________________________________________
_________________________________________________________________________________
la ligne (traits contour): ______________________________________________________________
_________________________________________________________________________________
la texture : ________________________________________________________________________
_________________________________________________________________________________
la perspective :_____________________________________________________________________
_________________________________________________________________________________
l’interactivité (qu’est-ce qui se passe au survol ?) :_________________________________________
_________________________________________________________________________________
Lors de la réalisation d’une famille d’icônes, quels sont les aspects auxquels il faudra porter attention
pour :
la couleur : ________________________________________________________________________
_________________________________________________________________________________
la ligne (trait de contour): _____________________________________________________________
_________________________________________________________________________________
la texture : ________________________________________________________________________
_________________________________________________________________________________
la perspective :_____________________________________________________________________
_________________________________________________________________________________
l’interactivité : ______________________________________________________________________
_________________________________________________________________________________
• Techniquement
Concrètement, comment allez-vous réaliser les icônes ?
_________________________________________________________________________________
_________________________________________________________________________________
Design et interactivité II 582-FWV-SF
4
3.3 Concevoir les éléments d’interfaces
Les designers visuels utilisent les éléments de base du langage visuel comme le point, la ligne, le plan.
Mais quand vient le temps de concevoir les interactions de l’humain avec l’interface, d’autres aspects
entrent en jeu comme le mouvement, l’espace, le temps, l’apparence, la texture et le son.
Des articles tirés du site ergolab.net discutent de sujets pertinents qui ont trait à la conception des
éléments d’interface qui supportent les interactions de l’humain avec la machine. En voici deux qui vous
aideront sans doute à concevoir votre application de manière ergonomique :
•
•
Une réflexion sur comment concevoir un menu :
http://www.ergolab.net/articles/ergonomie-menu-2.php
L’ergonomie dans la conception d’un formulaire :
http://www.ergolab.net/articles/ergonomie-formulaire.php
Le Guide pratique de conception et d'évaluation ergonomique de sites Web publié par le Centre de
Recherche Informatique de Montréal (CRIM) en 2001 (et toujours d’actualité), se veut un outil pratique
destiné tant aux spécialistes qu’aux non-spécialistes qui désirent concevoir et évaluer un site Web sur le
plan ergonomique.
Une copie PDF est disponible dans le dossier de la leçon 3. Vous pouvez également le télécharger sur le
site du CRIM http://www.crim.ca/
Nous attirons votre attention sur les chapitres suivants qui sont aussi des lectures préparatoires au travail
de conception des interfaces du projet 1: Fonction de recherche pp. 35-36 et Formulaires pp. 39 à 43.
3.3 Le concept d’affordance
(wikipédia)
L'affordance est la capacité d’un objet à suggérer sa propre utilisation. Le terme est utilisé dans différent
champs, notamment la psychologie cognitive, la psychologie de la perception, le design, l'interaction
homme-machine et l'intelligence artificielle.
Deux grandes voies de définition se sont développées à ce sujet :
1 - on doit à la psychologie la définition originale de l'affordance : elle désigne toutes les
possibilités d'actions sur un objet. Cette définition s'est ensuite restreinte aux seules possibilités dont
l'acteur est conscient et « compétent ». En effet, considérant un escalier « affordant », on ne peut espérer
d’un nourrisson qu’il sache le monter d’un premier regard…
2- par la suite le terme a été utilisé en ergonomie de manière encore plus restreinte : pour se
référer à la capacité d’un objet à suggérer sa propre utilisation, par exemple, sans qu'il ne soit nécessaire
de lire un mode d'emploi.
Le terme d'affordance est emprunté à l’anglais et il est parfois improprement traduit par « potentialité ». Il
dérive du verbe to afford qui a un double sens: «être en mesure de faire quelque chose» et «offrir».
Les affordances d’un objet, au sens large, ce sont donc les possibilités d’action qu’un individu peut entretenir avec cet objet, les possibilités conscientes… Sur le web, si je vois un lien ou un bouton, le libellé
(ou au pire, le contexte) vient m’indiquer ce qui m’attend si j’actionne l’objet.
Il faut donc trouver des solutions visuelles pour faire comprendre à l’usager de façon intuitive comment
l’objet doit être utilisé, sans questionnement.
Design et interactivité II 582-FWV-SF
5
3.5 Médiagraphie
Des galeries d’icônes
Des concepteurs d’icônes vous proposent leur travail.
En bas de page, vous pouvez visualiser leur collection. Fait intéressant, un jeu d’icônes décrit en légende
vous permettent d’identifier les formats d’icônes. Profitez-en pour vous questionner sur l’utilisabilité de ces
éléments.
http://www.irvi-soft.com/icon.html
Une collection d'icônes rassemblées sous forme de frise historique
http://www.guidebookgallery.org/icons
Une collection impressionnante d’icônes répertoriés à travers 1800 sites
http://www.intersmash.com/300images/
Designers
Un designer qui se spécialise dans des familles d’icônes destinées au système OSX. Observez les
particularités graphiques qui contribuent à l’uniformité d’icônes d’une même famille
http://www.bartelme.at/showroom/
Des experts dans le développement d’icône. Vous pouvez consulter leur catalogue en version PDF dans
le dossier du cours 3. Observez les qualités graphiques qui contribuent à la qualité de l’icône
http://www.iconexperience.com
Une fabrique d’icônes réputée. Une grande quantité de jeux et de styles d’icônes.
http://iconfactory.com/freeware
Un designer d’icônes nous offre ses services.
http://www.glyphlab.com/index.html
Susan Kare la créatrice (entre autres) des icones pour les premiers systèmes d'exploitation Apple puis
Windows
http://www.kare.com/
Guide de normes graphiques de l’interface du système OS X de Apple
L’environnement du système OSX a été développé avec beaucoup de soin. Un vaste cahier de normes
graphiques nous guide dans la conception d’icône pour ce système d’exploitation. Repérez le sous-menu
«Icons» à gauche.
Portez attention chapitre « Suggested Process for Creating Icons » qui vous propose une démarche de
conception.
«Creating Icons for Mac OS X v10.5 and Later» offre aussi de judicieux conseils pour la réalisation des
icônes.
http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html
Favicon
Connaissez-vous les Favicons» ?
http://en.wikipedia.org/wiki/Favicon
Une galerie de Favicons
http://mppierce66.home.comcast.net/web/fi/
Design et interactivité II 582-FWV-SF
6
Un répertoire de Favicons
http://deltatangobravo.com/archives/2004/march/favourite
Un utilitaire en ligne pour créer une Favicon
http://www.degraeve.com/favicon/
Un tutorial très simple pour réaliser une Favicon
http://www.rapidomaine.fr/tutoriaux/favicon.php
Tutoriaux
Voici quelques tutoriaux qui proposent des traitements actuels pour les icônes d’interface. Prenez le
temps de consulter les rendus.
Un tutorial très intéressant qui nous guide de manière simple dans la réalisation d’une icône. À consulter
absolument.
http://www.simplebits.com/notebook/2004/08/23/anatomy.html
Des tutoriels intéressants pour des techniques simples dans Photoshop ou Illustrator et en
français. :
Icônes dans un hublot
http://forum.crystalxp.net/index.php?showtopic=3518
Les styles de calque dans Photoshop pour donner du style à vos icônes, en français
http://www.forumgraphik.com/tuto-pack-dicones-initiation-aux-styles-vt178.html
Un icône de dossier
http://www.crystalxp.net/tuto/fr8-tuto-photoshop-faire-icone-dossier.html
Un icône en acier et en verre
http://www.crystalxp.net/tuto/fr24-realisation-icone-acier-et-verre.html
Une boule Aqua dans Adobe illustrator
http://forum.crystalxp.net/index.php?showtopic=11194
Exemples d’applications dédiées à la création d’icônes
http://www.axialis.com/iconworkshop/
http://iconfactory.com/software/iconbuilder - ibprofeatures
Concept d’affordance
http://www.pixenjoy.com/langage-visuel-laffordance
Design et interactivité II 582-FWV-SF
7