Conseiller en expérience utilisateur et formateur passionné
blogue
Catégories
11 avril 2008
Analyse d'un site à une page : IconWerk
Lors de ma présentation du 28 mars dernier, j'ai analysé le site à une page de IconWerk. Je reprends ici mon propos.
La première chose qu'on constate lorsqu'on arrive sur ce site, c'est que la page est longue, même très longue. Eh alors? Pour un site à une page, la longueur de ladite page n'est pas un problème.
J'offre les services suivants. La première partie visible du site exprime clairement que vous êtes chez IconWerk et que le service offert consiste en la conception de pictogrammes et d'icônes sur mesure, le tout bien entendu agrémenté d'exemples.
J'effectue du vrai travail chez de vrais clients. Un peu plus loin sur le site, on peut voir ce que IconWerk a fait pour ESPN Magazine et que plus de 40 pictogrammes ont été réalisés pour ce client. Le fait de montrer un cas réel ajoute à la crédibilité.
Je peux vous aider. Cette autre section de la page présente les avantages des personnages illustrés pour représenter quelqu'un ou pour transmettre une émotion. C'est d'ailleurs en voyant ces exemples que j'ai demandé à IconWerk de faire mon personnage qui est devenu depuis février le logo de mon entreprise.
Je suis un professionnel. La dernière partie de la page nous montre que IconWerk, c'est Stefan Dziallas, qu'il est diplômé en arts et qu'il conçoit des icônes et des pictogrammes. Bien! Ça me dit que ce n'est pas un designer de sous-sol. Je sais aussi comment le joindre. La liste de ses clients est un élément essentiel pour me rassurer. Cela me dit que Stefan est un professionnel. Je crois que c'est le bon message à transmettre n'est-ce pas?
Vous voyez, ce n'est pas si compliqué que ça. Certes, cela prend du temps mais quel bon investissement en bout de ligne!
Commentaires (3) | Étude de cas
16 novembre 2007
Mur de la conception
J'ai enseigné l'ergonomie des interfaces utilisateurs de 1993 à 2006 à l'Université Laval et parfois, certains étudiants prennent le temps de m'écrire, ce qui me fait toujours grand plaisir. C'est ce qu'a fait Jacinthe Croisetière qui travaille comme directrice artistique et chargée de projets chez De Marque. Voici son courriel (reproduit avec sa permission) :
Salut Daniel,
Voici la « tapisserie » que j'ai installée au bureau pour la refonte de notre principal logiciel Tap'Touche. J'ai fait imprimer un schéma de navigation fait avec Inspiration, imprimé en sortie « plan » aux Copies de la Capitale.
Un peu pogné dans le corridor, à l'étroit, mais ça a ses avantages aussi! En effet, c'est un passage obligé par tous pour aller au café, et donc ce matin notamment, il y a eu des discussions très intéressantes autour de la murale qui ont fait débloquer bien des choses!
Je trouvais que j'avais bien mis en pratique tes leçons et je dois dire qu'à date, l'accueil et les réactions autour de cela sont TRÈS positives! Et donc très stimulantes pour l'équipe du projet! ;) J'ai même inclus des dessins de trois personnages!
Alors voilà ! je voulais simplement te donner des petites nouvelles et je me suis dit qu'être prof, c'est le genre de nouvelles qui me ferait plaisir d'entendre!
À une prochaine fois! Bye!
Jacinthe Croisetière
Commentaires (0) | Étude de cas
22 juin 2007
Vive les grandes surfaces !
La Ville de Québec est en train d'élaborer la prochaine version de son site Web ... et ils ont pensé à moi pour les aider =). Depuis novembre dernier, à temps partiel, on a rencontré des préposées aux renseignements (et d'autres personnes) pour connaître le citoyen, les raisons de ses appels, etc. C'est fou ce qu'on apprend quand on parle directement aux gens qui parlent aux gens. Par exemple, savez-vous que la raison d'appel numéro 1 est ... eh non, je ne vous le dirai pas tout de suite ;-) Tout ça pour dire que je ne l'aurais pas deviné comme ça, sans enquête utilisateurs. Un indice ? Disons que Claude Meunier jouait un personnage à la télévision qui en faisait une vraie obsession !
Cela dit, chaque renseignement a été colligé et documenté dans un rapport. Bien entendu, on a identifié des personnages. Puis on a écrit chacun de ces renseignements (personnage, déclencheur, raison d'appel, etc.) sur des Post-it qu'on a collés sur un grand mur pour en faciliter l'organisation et dériver une première arborescence du site. Il n'y a rien de tel qu'une grande surface (un espace partagé) pour avoir une vue d'ensemble et pouvoir réfléchir. Voici de quoi ça avait l'air après quelques séances :
Par la suite, pour chacun des noeuds et des feuilles de l'arborescence, un wireframe a été produit rapidement en équipe sur poster papier à l'aide d'un crayon feutre. Oui oui, du papier. Dans un processus d'idéation et de création, il n'y a rien de tel que les outils « low-tech ». Et on n'a pas perdu notre temps. L'architecture du site s'est réalisé en 10 jours, la conception des wireframes en 30 jours et je documente le tout ces jours-ci sur mon iMac à l'aide de OmniGraffle Pro (quel logiciel extraordinaire, bien fait, bien pensé !).
Pour la première fois, je réalise une arborescence détaillée, c'est-à -dire que chaque noeud et chaque feuille de l'arborescence est illustré à l'aide d'un wireframe et non d'une simple boîte. Ouf ! C'est pas mal de travail mais ça commence à prendre forme (j'ai 60 % de fait). Voici d'ailleurs de quoi ça a l'air aujourd'hui à 15h :
Je sais, c'est un peu petit sur mon blogue mais sachez que le tout sera imprimé sur une bannière d'environ 4 pieds de large sur 14 pieds de long... et fort probablement en couleurs. D'un coup d'oeil, on pourra non seulement voir l'ampleur du futur site Web de la Ville de Québec mais aussi en apprécier le contenu et les parties interactives. J'ai vraiment hâte de voir le produit final !
Bon, trêve de blogue et retour à OmniGraffle. Je dois continuer (et terminer) ce diagramme si je veux « tomber en vacances » vendredi prochain...
Voici de quoi a l'air la version finale :
Voici une page agrandie :
Je dois dire que la version imprimée est impressionnante. 14 pieds (environ 4,3 m), c'est long... mais quelle vue d'ensemble on a. Je vais certainement répéter l'expérience lors d'un prochain mandat.
Commentaires (7) | Étude de cas
27 mai 2007
5 erreurs : guide télé interactif VoilÃ
Le guide télé Voilà (application Flash) publié par Cyberpresse est dans son ensemble un bel exemple de conception Flash. Cela dit, en l'étudiant d'un peu plus près, j'ai relevé près d'une dizaine « d'erreurs » de design plus ou moins graves. Voici les cinq plus évidentes :
1. Il serait bien de renommer le bouton « OK » à l'aide d'une étiquette plus significative comme « Chercher » ou de simplement utiliser une icône si on manque d'espace. « OK » ne veut rien dire et on devrait restreindre son utilisation aux messages d'erreur et d'information (le bouton « OK » permet à l'utilisateur de signaler à l'application qu'il a bien reçu le message, point).
2. Afin de parler le langage de l'utilisateur, il serait bien d'adopter un format de date plus parlant que celui de la forme ISO. Ainsi, au lieu d'écrire « 2007-05-26 », on aurait dû écrire « samedi 26 mai ». C'est plus clair, ça ne porte pas à confusion et ça ne requiert pas d'effort mental. Aussi, dans le champ et la liste des dates, je remplacerais la date du jour par « aujourd'hui ».
3. Pour retirer une chaîne, il faut cocher une case... ce qui est à l'opposé de tous les standards existants depuis l'avènement du Macintosh en 1984 (à moins que la case ne soit précédée en entête du mot « Supprimer » ou d'une icône correspondante). Cochez une case signifie « oui, je le veux ». Si on regarde de près le symbole utilisé, on a employé un « X » rouge qui, pour certains designers, signifie « supprimer ». Je suis cependant loin d'être certain que la population fait une telle distinction. La solution est fort simple : cocher toutes les cases et demander à l'utilisateur de décocher celles des chaînes qu'il ne veut pas voir. Aussi, j'aurais déplacé le bouton « Réinitialiser les chaînes » dans la fenêtre qui apparaît au clic du bouton « Personnaliser les chaînes », question de lui donner moins d'importance et d'alléger la première page.
4. Le texte « Liste des canaux » est un hyperlien qui ouvre un fichier PDF présentant l'ensemble des canaux. Donc, si c'est un hyperlien, SVP le souligner. Aussi, puisqu'il s'agit d'un document PDF, il serait bien de l'indiquer. Par exemple : Liste des canaux (PDF : 1 page).
5. On peut mettre en évidence une catégorie d'émissions (par exemple ; cinéma, sport, etc), ce qui est bien =). Cependant, les boutons qui le permettent ne ressemblent pas assez à des boutons (à première vue, ils ne semblent pas cliquables). Aussi, pour retourner à l'affichage normal, il faut recliquer sur un même bouton, ce qui n'est pas évident. Voici une solution : inclure une étiquette du genre « Mettre en évidence » ou « Mettre en relief » suivie de cinq boutons qui ont réellement l'air de boutons étiquetés « aucun », « cinéma », « sport », « émission » et « divers ». Par défaut, c'est le bouton « aucun » qui est enfoncé alors que les quatre autres sont relevés.
En guise de conclusion, je citerais l'architecte Ludwig Mies van der Rohe qui a déjà dit :
« God is in the details ». Je suis bien d'accord avec lui !
Commentaires (2) | Étude de cas
18 février 2007
L'expérience Apple
En conception d'expérience utilisateur, Web ou autre, tout compte. Le choix des mots, des images, de l'information transmise et la mise en page contribuent à rassurer l'internaute et à lui assurer une expérience agréable. Et s'il y a une compagnie qui comprend ce concept, c'est bien Apple. Eh oui, encore et toujours Apple !
Comprenez-moi bien, je ne dis pas que tout est parfait sur le site Web de la pomme... mais quel site hors du commun ! Prenons par exemple le processus d'achat d'un iPod Shuffle dont j'ai fait l'expérience récemment.
Lorsqu'on visite la page du iPod Shuffle, on voit d'emblée la description du produit et qu'il est disponible dans plusieurs couleurs. Si on clique sur une couleur [1], on a un feedback immédiat : l'image de la personne portant le iPod change en fonction du choix de ladite couleur. Bien ! C'est aussi une bonne idée de montrer des gens avec le produit, car c'est plus vendeur.
On peut immédiatement acheter le iPod. Un bouton « Buy Now » est là , bien en évidence [2]. Excellent ! L'internaute qui vient sur cette page veut acheter et le site lui permet de le faire rapidement. Apple est en affaires et ça paraît.
Au moment de choisir la couleur du iPod Shuffle qui nous plaît, le bouton « Select » adopte la couleur du iPod en question [3]. Un petit détail qui renforce le choix de l'internaute. Simple et élégant.
Juste avant de finaliser la commande, on nous offre de faire graver un court texte sur notre iPod. Le langage est simple et direct (« No, thanks », « Yes ») [4], comme il se doit sur le Web. On a la possibilité d'avoir un aperçu [5] du texte qui sera gravé. On nous informe du délai et des frais de livraison [6]. Le prix est clairement affiché [7]. On peut indiquer qu'il s'agit d'un cadeau [8]. On peut même avoir accès à de l'assistance de la part d'Apple [9].
Si seulement les autres sites de commerce électronique en faisaient autant...
Commentaires (0) | Étude de cas
27 janvier 2007
Enfin une page d'accueil !
Ce site a vu le jour en mai 2004. Au départ, ce n'était qu'un blogue « minimaliste » dont l'apparence était basée sur un gabarit de MovableType (l'outil de gestion du blogue).
Au fil des années, mon blogue s'est enrichi de pages satellites : formation, à propos et services-conseils. En 2006, le visuel a été revampé. Le futur site que j'avais en tête commençait à prendre forme.
Après une enquête utilisateurs informelle, c'est-à -dire en posant des questions ici et là auprès de mes clients et partenaires d'affaires, et en étudiant d'autres sites de conférenciers, de consultants, d'artistes et de compagnies reconnues pour leur design (p. ex. Apple), j'en suis venu à élaborer le site que vous voyez aujourd'hui.
Il y a maintenant une page d'accueil. Le but de cette dernière ? Me présenter, exprimer clairement ce que je fais. C'est ce que je dis depuis des années à mes clients... il était plus que temps que je pratique ce que je prêche !
Une attention particulière a été portée au visuel. La présentation est sobre, épurée avec juste assez de relief aux bons endroits. Une séance de photos (250 pendant plus de deux heures !) dans un studio professionnel a permis d'en arriver à la photo de la page d'accueil... pas facile quand on n'est pas un top modèle ;-)
Pour ce qui est des textes, ils ont été pensés afin de répondre directement aux objectifs de mes clients, et ce, dans un langage clair et direct.
Bien entendu, j'ai assuré la conception de mon propre site. Cela dit, je voudrais remercier les personnes suivantes pour leur contribution (un site Web ne se fait jamais seul) :
- Marie-Josée Montminy pour la révision langagière
- Isabelle Fluet de iXmédia pour le design graphique
- Benoit Bruhmuller du studio Communigraph pour la photographie, assisté de Chantal Gagnon, maquilleuse
Et le blogue, il demeure ? Bien entendu ! Préparez-vous à avoir de nouveaux billets dans les prochaines semaines et une couverture en direct du CHI 2007 à San Jose à la fin du mois d'avril.
Commentaires (6) | Étude de cas
9 juin 2006
Étude de cas (2e partie) : produire des personnages
Le 19 février dernier, je vous avais présenté la première partie d'une étude de cas afin d'expliquer le processus entourant une enquête utilisateur. Voici enfin la seconde partie qui consiste à dériver des personnages à partir des données recueillies.
On se rappelle que pour bien connaître les utilisateurs du projet Web-Lunch, on est allé observer et interviewer des étudiants dans quelques services alimentaires du campus de l'université. Voici les profils d'utilisateurs identifiés :
Fait amusant, on s'est inspiré d'un trait de caractère des utilisateurs pour élaborer les profils de ces derniers. Cette façon de faire n'est pas obligatoire. Toutefois, j'ai trouvé cette idée fort intéressante (le crédit en revient à l'équipe composée de Jacinthe Croisetière, Guillaume Gagné-Gauthier, Alexandre Giguère-Duchesne et Nathalie Roy ... bravo !).
Notez que ça fait beaucoup de profils, ce qui n'est pas un problème pour le moment. Il faut maintenant tenter de regrouper les différents profils sur la base d'objectifs communs. À cette étape, il faut généraliser sinon on risque d'avoir des personnages en double, ce qui compliquera la tâche du concepteur ultérieurement.
Prenons par exemple le 3e groupe (rangée du milieu) : le sportif, l'étranger, l'allergique, celui qui suit un régime et le malade. Ceux-ci partagent un objectif commun qui est de savoir ce qu'ils peuvent/doivent manger. Par exemple, celui qui est allergique aux oeufs doit s'assurer que le repas qu'il va commander n'en contient pas. Celui dont la religion lui interdit la consommation de certains aliments doit aussi s'assurer que le repas qu'il va commander n'en contient pas. Le sportif de son côté veut probablement manger beaucoup de protéines. Celui qui suit son poids veut éviter certains aliments, etc. Vous voyez où je veux en venir ?
Finalement, on se choisit un personnage pour représenter chaque groupe de profils d'utilisateurs :
Puis vient le temps d'identifier le ou les personnages principaux (ceux qui ne sauraient se contenter de l'interface d'un autre personnage), les personnages secondaires (ceux qui se contenteraient de l'interface conçue pour un autre personnage) et facultativement l'anté-personnage (celui pour qui on ne veut pas concevoir).
Dans cette étude de cas, Marie-Ève est assurément un personnage principal. Elle doit savoir précisément ce qu'elle mange (elle représente le groupe des sportifs, étrangers, allergiques, ceux qui sont au régime et souffrant d'une maladie). Marie-Ève ne saurait se contenter de l'interface conçue pour William ou Joanne.
François est notre second personnage principal. Ayant un budget plutôt limité, le prix d'un repas est un facteur déterminant. Une interface où le prix ne serait présenté qu'en 2e plan ne le satisferait pas.
William et Joanne sont des personnages secondaires puisqu'ils n'ont pas de besoins particuliers et que l'interface conçue pour Marie-Ève et François risque de les satisfaire de toute façon.
Antoine est notre anté-personnage puisqu'il s'apporte un lunch (dont il raffole) préparé avec amour par sa maman. Antoine ne commandera certainement pas sur Web-Lunch.
Voilà ! On a maintenant nos personnages ? Nous verrons dans un prochain billet comment passer de ces personnages à la conception en passant auparavant par les scénarios.
(Illustrations © Guillaume Gagné-Gauthier, 2006. Reproduites avec permission.)
Commentaires (2) | Étude de cas
9 avril 2006
Question de Cedric Stevins
Moins de 12 heures après avoir publié mon offre de répondre à des questions de mes lecteurs, j'ai reçu ce premier message :
Je suis un lecteur belge de votre excellent blog. Je suis aussi le webmaster de GreenFacts.org, une organisation qui publie des résumés de documents scientifiques internationaux.
Je m'interroge sur la valeur ajoutée de notre système de navigation des dossiers GreenFacts. L'idée principale du système de navigation est de pouvoir passer facilement d'une question à une autre dans un niveau de complexité différent (Niveau 1 = très résumé, Niveau 2 = résumé, Niveau 3 = document original). La navigation horizontale et verticale se fait en utilisant des ancres internes.
Je vous invite à jeter un oeil sur la version anglaise du site puis en utilisant soit les onglets, soit des next question, previous question.
Que pensez-vous de ce système de navigation ? Est-il ergonomique ? Intuitif ? Le recommanderiez-vous ?
Cedric Stevins
M. Stevins,
J'ai visité votre site en évaluant strictement son volet « navigation ». Je vous propose la piste de solution suivante :
Compte tenu que votre site vise à vulgariser des concepts scientifiques, j'ai pensé que deux niveaux de détail (résumé et détaillé) étaient suffisants.
J'ai aussi retiré les onglets. Premièrement, il y en avait beaucoup (5 onglets par question sur une même page). Deuxièmement, tout rafraîchissement intra-page (sur le Web) cause une certaine désorientation puisque la page ne se réaffiche pas toujours exactement à l'endroit où on avait cliqué.
J'ai aussi enlevé les navigations intra-page. Toute navigation mène dorénavant à une page du site, ce qui est plus naturel sur le Web. C'est plus clair et on élimine du coup les liens « Top ».
Finalement, compte tenu que les questions sont affichées en tout temps, on n'a plus besoin des hyperliens « next question », « previous question », « level questions », etc.
Voici comment cette nouvelle version du site fonctionne. Lorsque l'utilisateur choisit un sujet sur votre site, il navigue vers une page composée de deux sections : un menu à gauche et l'information à droite. Le menu est composé d'une table des matières (contexte, questions, conclusion, et références) et de trois utilitaires :« Envoyer à un ami », « Commentaires » et « Version PDF ». À l'ouverture de cette page, c'est le sujet « Contexte » qui est présenté à droite. Pour accéder à de l'information, on clique sur le sujet dans le menu de gauche. Voilà , rien de plus simple.
Pour accéder à un niveau de détail plus élevé, on n'a qu'à cliquer sur l'hyperlien « Je veux en savoir plus ». Pour revenir à un niveau plus sommaire, on clique sur l'hyperlien « Je veux savoir l'essentiel »
En espérant que ma réponse vous sera utile. Au plaisir !
Commentaires (2) | Étude de cas
25 février 2006
Présentation des résultats
Pour faire suite à mon précédent billet, je vous propose une façon toute simple de présenter vos résultats d'enquête utilisateur (avant même de produire les personnages).
Vous n'aurez souvent guère plus de 20 minutes pour présenter le fruit de votre enquête. Allez droit au but et limitez-vous à 10 diapositives. Évitez d'en dire trop, allez à l'essentiel ! À cet effet, je vous propose le plan de présentation suivant :
[1] : Titre de votre présentation : « Enquête utilisateur pour le projet Web-Lunch ».
[2] : Mise en contexte afin que l'auditoire sache de quel projet vous allez parler. C'est l'introduction, le « quoi ». Dans le cas qui nous concerne, cette diapositive présenterait brièvement le mandat, c'est-à -dire « Connaître comment les utilisateurs choisissent un repas pour le projet Web-Lunch qui consiste en ... ».
[3] : Le « qui », c'est-à -dire ceux qui furent l'objet de l'enquête utilisateur : le nombre d'utilisateurs (hommes/femmes), profil social, etc. Par exemple : 40 étudiants (20 hommes, 20 femmes), dont 10 étrangers et 10 sportifs.
[4] : Le(s) lieux où l'enquête a été réalisée, c'est le « où ». Par exemple : le pavillon Desjardins, le PEPS, etc.
[5] : Le « quand », c'est-à -dire les moments de la journée, de la semaine, du mois ou de l'année où l'enquête a eu lieu (si requis). Par exemple, on voudrait peut-être vérifier s'il y a des différences dans les choix alimentaires de la semaine et ceux de la fin de semaine.
[6] : La démarche employée pour connaître les utilisateurs, le « comment ». Par exemple : entrevues, observations, envoi de sondages, etc.
[7] : Ce qu'on a voulu savoir, c'est-à -dire le sujet des questions posées ou des observations effectuées. Par exemple : le prix, les allergies alimentaires, les préoccupations d'ordre religieux, etc.
[8, 9] : Présentation des résultats. Les diagrammes à barres horizontales et les pointes de tarte sont de bonnes façons d'illustrer les fruits de l'enquête utilisateur.
[10] : La conclusion mettant en évidence ce qui est ressorti de l'enquête utilisateur.
Voilà , rien de bien compliqué ! Ce faisant, vous aurez démontré que vous avez bien fait votre travail et votre client-payeur n'en sera que satisfait !
Commentaires (3) | Enquête utilisateurs + Personnages
19 février 2006
Étude de cas (1ere partie) : connaître les utilisateurs
Dans le cadre du cours « Utilisabilité multimédia » que j'enseigne au 1er cycle à l'Université Laval, j'ai donné le travail pratique suivant à mes étudiants :
Une entreprise appelée Web-Lunch veut offrir un service de livraison de repas aux étudiants et aux membres du personnel de l’Université Laval.
Le concept est le suivant : où que soit le client sur le campus, celui-ci peut commander via un site Web un repas ou un goûter de son choix et il lui sera livré dans l’heure qui suit. Ce service est disponible 7 jours sur 7, 24 heures sur 24, 365 jours par année.
Cette entreprise vous engage afin de mieux connaître les utilisateurs potentiels d’un tel service. En équipe de 5 personnes, employez une des approches présentées en classe (observation, entrevue, sondage) pour bien connaître l’utilisateur, son contexte, sa tâche et bien entendu ses objectifs. Vous pouvez utiliser plus d’une approche.
Notez que ce travail pratique servira d’intrant au prochain travail pratique qui consistera à élaborer une distribution de personnages.
À titre d'information, cet exercice suit immédiatement la matière enseignée en classe sur la connaissance de l'utilisateur. Cela dit, comment vous y prendriez-vous ?
Avant tout, il est important de bien saisir ce qu'il faut faire (!). Il ne s'agit pas de réaliser une étude de marché, mais plutôt de connaître les utilisateurs de Web-Lunch pour concevoir un site Web qui réponde à leurs objectifs. Ça semble évident, mais c'est une erreur fréquente.
Ainsi, on évitera des questions du genre :« Combien de fois mangez-vous à la cafétéria par semaine ? » ou « Commanderiez-vous votre lunch par Internet ? » ou encore « Combien seriez-vous prêt à payer pour un repas ? », questions dont les réponses ne contribueront en rien à la conception du site.
On optera plutôt pour des questions comme : « Comment choisissez-vous votre repas ? », « Avez-vous un budget concernant les repas ? », « Souffrez-vous d'une allergie alimentaire ? », « Souffrez-vous d'une maladie comme le diabète, l'hypercholestérolémie, l'hypoglycémie, etc. ? » qui pourraient se résumer par « Y a-t-il des aliments que vous ne pouvez pas manger ? », « Y a-t-il des aliments que vous devez manger ? », « Suivez-vous un régime alimentaire ? », « Si oui, pourquoi ? », « Pourquoi avez-vous choisi ce repas ? », et ainsi de suite. On pourrait même combiner certaines de ces questions pour en arriver à moins de questions. Mieux vaut quelques bonnes questions que beaucoup de questions inutiles.
Aussi, j'éviterais les questions d'âge et de sexe puisqu'on peut très aisément en déduire les réponses lors des entrevues.
Le but de cette enquête utilisateur n'est pas de savoir si les étudiants utiliseraient Web-Lunch. Le but est de savoir ce qui influence un utilisateur lorsqu'il achète un repas ou se prépare un lunch.
Maintenant que l'on sait ce qu'on veut connaître, il faut établir qui on veut observer et interviewer et où on veut le faire.
Étant donné que le concept de Web-Lunch s'adresse aux étudiants et aux professeurs d'un campus, j'aurais tendance à observer/interviewer en plus des étudiants nord-américains, des étudiants étrangers (la nourriture est on ne peut plus culturelle et parfois d'ordre religieux), d'autres qui fréquentent le PEPS (pavillon de l'Éducation physique et des sports), des étudiants qui vivent en résidence, 50 % de gars, 50 % de filles (les hommes et les femmes n'ont pas toujours le même rapport avec la nourriture), etc. Je viserais en tout une cinquantaine d'étudiants et une dizaine de membres du personnel. En complément, on pourrait aussi interviewer des préposés aux cafétérias pour en savoir plus sur ce qui, selon eux, influence le choix d'un repas.
Comme on peut le constater, le « qui » influence souvent le « où ». Ce qui fait que l'enquête devrait avoir lieu dans des cafétérias fréquentées par les clientèles identifiées.
Dans un premier temps, je procéderais par observation puis par entrevue en utilisant les questions que j'aurai élaborées.
Je vous parlerai de la façon d'interpréter les données recueillies et comment en dériver des personnages dans un prochain billet.
Commentaires (1) | Étude de cas
7 décembre 2005
5 erreurs : Cégep de St-Jérôme
C'est déjà le temps d'un autre "5 erreurs", le dernier de 2005. Cette semaine, j'ai choisi le site du Cégep de St-Jérôme.
Voici les 5 erreurs que j'ai relevées à la suite de l'analyse de cette page :
1. On a ici deux erreurs pour le prix d'une : l'utilisation d'un "scroller" animé pour présenter les actualités ... en Java (!) combinée au désormais célèbre "Pour plus de détails, cliquez ici". La solution : présenter les actualités sans animation, en HTML. J'ajouterais aussi la date en format parlé (p. ex. 3 décembre 2005) à chaque manchette, question de connaître la "fraîcheur" de cette dernière. Lorsque requis, j'utiliserais le titre de la manchette comme hyperlien vers son détail, ce qui éliminerait le "Pour plus de détails, cliquez ici".
2. L'utilisation d'un "menu" inutilement animé en Flash. Aussi, dans certains cas, lorsqu'on clique sur un sujet, il y a des sous-sujets qui apparaissent dans le carré bleu animé. Dans d'autres cas, le détail apparaît dans la partie droite de la page. La solution : éliminer cette animation inutile et refaire le menu en HTML ou DHTML s'il le faut. Je précéderais les sujets qui s'éclatent en sous-sujets d'un symbole comme ">" pour les distinguer des autres sujets qui ne sont qu'à un niveau.
3. Une autre animation qui n'apporte rien au site. En effet, lorsqu'on choisit un sujet dans le menu, des images se mettent à bouger horizontalement. Un internaute pourrait penser que ces images sont cliquables sauf que ça n'a aucun effet. Pas que j'aurais recommandé cette solution mais ça démontre l'inutilité de cette animation. La solution : enlever l'animation, tout simplement, et remplacer les imagettes par une image qui renforce la sélection d'un sujet dans le menu. Prière de consulter un graphiste à cet effet.
4. Encore une animation (!). Ainsi, au survol de la souris dans cette zone, les mots se mettent à bouger. Qui plus est, ce sont des hyperliens ... qui l'aurait cru ? Essayer de cliquer sur un mot qui bouge n'est pas toujours évident et l'est encore moins lorsqu'il sort du cadre. La solution : enlever cette animation et la remplacer par un menu "classique" en HTML.
5. Les icônes sont trop petites, non identifiées et parfois non significatives. La solution : les redessiner pour les rendre plus significatives et plus grandes. Y rajouter une info-bulle ou mieux, ajouter un titre.
Une petite dernière : cette page est composée de plusieurs "frames". Depuis un certain nombre d'années, l'emploi de "frames" est reconnu comme étant une mauvaise pratique puisque cela provoque des problèmes d'impression, de définition de signets et autres. Vaudrait mieux refaire cette page sans "frames", sans Java et sans Flash. Je n'ai rien contre le Flash mais dans ce cas précis, cela ne contribue en rien à procurer une expérience utilisateur agréable. Bon, c'est tout. À la prochaine !
Commentaires (4) | Étude de cas
23 novembre 2005
5 erreurs : BMO
Voici le temps venu d'un autre billet relevant 5 erreurs d'une page Web. Cette semaine, j'ai choisi le site de l'institution financière BMO.
Dans son ensemble, cette page est bien faite. J'aime bien la distiction entre les trois clientèles que sont les "finances personnelles", les "services bancaires aux entreprises" et les "services aux grandes entreprises et institutions" mais j'aurais allégé le tout (voir point 2). J'y ai quand même recensé 5 erreurs :
1. L'utilisation de "Cliquez ici". Voici une erreur fréquente sur le Web. Selon moi, le seul fait d'indiquer qu'il faille cliquer ici est une erreur de conception. En effet, tout ce qui est cliquable doit avoir l'air cliquable. Qu'est-ce qui a l'air cliquable sur le Web ? Les hyperliens et les boutons. Une solution pour cette page consisterait à insérer un bouton sous forme d'icône ou avec un texte indiquant qu'un complément d'information suit.
2. L'utilisation de listes déroulantes pour naviguer aussitôt qu'une valeur a été sélectionnée est une autre erreur fréquente du Web. La liste déroulante a été conçue pour sélectionner, pas pour naviguer. Remarquez aussi l'incohérence d'utilisation des listes déroulantes sur cette page : parfois on doit cliquer sur un bouton, parfois pas... ce qui peut être déroutant. La solution : ajouter un bouton "Consulter" ou quelque chose du genre à la suite de la liste déroulante.
Toujours dans cette même partie de la page, je trouve qu'il y a beaucoup trop de texte pour rien et qu'on aurait pu alléger le tout. Ainsi, je remplacerais "Finances personnelles" par "Particuliers", "Services bancaires aux entreprises" par "PME" et "Services aux grandes entreprises et institutions" par "Grandes entreprises et institutions". Qui plus est, j'éliminerais le texte descriptif qui est inutile et le remplacerais par les 5 sujets les plus consultés ou propices à la clientèle visée. Je garderais finalement la liste déroulante (suivie d'un bouton "Consulter") pour les sujets secondaires.
3. Une troisième erreur classique du Web : l'emploi du mauvais verbe/adjectif dans un bouton. Dans ce cas précis, le mot "Aller" aurait dû être renommé "Ouvrir session". J'en aurais aussi profité pour enlever l'étiquette "Ouverture de session" qui précède la liste déroulante.
4. Une répétition de cette même erreur : le fameux bouton "Aller" qui sert à toutes les sauces. Encore là , la solution est on ne peut plus simple, renommer ce bouton "Rechercher" ou "Chercher". Tant qu'à y être, je déplacerais le champ de recherche un peu plus vers le haut.
5. Des animations. Pas une, mais deux. Ça bouge de partout en même temps. La solution : abolir ces animations ou au pire en limiter la durée à 10 secondes max.Voilà ! Comme on a pu le constater, le design Web, c'est aussi une attention aux moindres petits détails... détails qui font parfois la différence. À la prochaine !
Commentaires (1) | Étude de cas
10 novembre 2005
5 erreurs : Leon
Voici ma 2e évaluation d'un site afin d'y trouver 5 erreurs. Cette semaine, j'ai choisi le site de Léon.
En plus d'un visuel discutable, ce site comporte les erreurs suivantes :
1. Le bandeau du site est constamment animé. Tout le temps. Ça n'arrête jamais. Solution : éliminer cette animation. Pourquoi ? Tout simplement parce que tout ce qui bouge attire naturellement et implicitement l'attention de l'être humain... ce qui rend difficile la lecture du texte qui est présenté sur une page Web.
2. Le premier sujet est "Notre histoire". Or, il est plutôt rare qu'un client qui désire acheter un nouveau fauteuil veuille connaître l'histoire d'un magasin. Aussi, l'ordre dans lequel on positionne les éléments d'un menu doit être réfléchi. Les éléments devraient être présentés du plus fréquemment utilisé/important au moins fréquemment utilisé/important du haut vers le bas de la page. La solution : éliminer "Notre histoire" ou le placer dans le bas de la page et pas trop en évidence SVP.
3. Que signifie "Recherche rapide" ? Quelle est la différence entre "Recherche rapide" et "Recherchez" ? Qui plus est, cet élément du menu ne semble pas bien porter son nom puisqu'il mène à une page où on doit sélectionner plusieurs options afin de faire une recherche. Le concept derrière cette fonctionnalité est intéressant ; le nom qu'elle porte l'est beaucoup moins. La solution : remplacer le nom par "Recherche avancée" ou quelque chose du genre.
4. Le bouton pour lancer la recherche est étiqueté "Allez". La solution : renommer ce bouton par "Rechercher" ou "Chercher". L'étiquette d'un bouton doit toujours être significative. Évitez donc les "Allez", "Go" et "OK" qui ne veulent pas dire grand chose. Remplacez-les par des verbes (ou des adjectifs) qui représentent clairement l'action qui sera effectuée.
5. Que signifie "Meubles Occasionnels" ? Je n'ai pas compris à première vue ... ni à deuxième vue. La solution : remplacer ce terme par quelque chose de plus significatif.
Voilà c'est tout ! À la prochaine !
Commentaires (1) | Étude de cas
28 octobre 2005
5 erreurs : l'Anglicane de Lévis
Du nouveau sur mon blogue. À toutes les 2 semaines, je vais identifier 5 erreurs commises sur un site Web choisi au hasard. Le but n'est pas de démolir un site mais d'en faire une critique constructive. Je débute cette série par une salle bien connue de Lévis. En passant, je suis ouvert à toute suggestion de sites pour les prochaines évaluations (vous n'avez qu'à formuler un commentaire sur ce billet).
L'Anglicane jouit d'une réputation enviable en matière de salle de spectacles. Assister à une prestation du Susie Arioli Band dans cet environnement intime procure une expérience hors du commun. Ceci dit, son site nous fait vivre malheureusement une autre expérience...
J'y ai répertorié au moins 5 erreurs, qui soit dit en passant, sont faciles à corriger :
1. Où est l'entrée ? Où doit-on cliquer pour entrer dans le site ? De prime abord, on aurait tendance à cliquer sur l'image mais ça ne fait rien. Éliminer cette page d'accueil de type "splash-screen" serait une solution simple et efficace. D'autant plus que les internautes n'apprécient guère ces pages qui leur semblent inutiles.
2. Flash ? HTML ? Il faut cliquer là -dessus ? Est-ce que ça a l'air d'un bouton ou d'un hyperlien ? Est-ce que la clientèle visée par le site comprend ces termes plutôt techniques ? C'est loin d'être certain. Pour des raisons de simplicité, j'éliminerais tout simplement ces choix et opterais pour un accès direct à une page HTML. Le Flash, c'est bien beau mais quand ça en vaut vraiment la peine (par exemple pour implanter une navigation hautement interactive).
3. Beaucoup trop de texte, en très petite taille et qui plus est en gris, ce qui complique la vie des gens de plus de 40 ans. Il y a peu de chance que ce long texte soit lu. La solution à ce problème : remplacer ce texte par quelque chose de plus court, écrit plus gros et avec un meilleur contraste (noir sur blanc par exemple).
4. D'après vous, quelles seraient les raisons les plus probables d'aller visiter le site de l'Anglicane ? Est-ce que la consultation de l'horaire des spectacles à venir et l'achat de billets vous semblent de bonnes raisons ? Alors pourquoi est-ce que ce site cache cette information essentielle à un tel site ? Je sais, après voir lu le texte, j'ai compris que ce site sert au financement de l'Anglicane. Ceci dit, je ne crois pas qu'un site d'une salle de spectacles doit prioriser son financement au détriment de sa programmation. La solution : refaire le site en conséquence ou au pire, mettre en évidence l'accès à la programmation de la salle de spectacles.
5. La seule chose qui ressemble à un bouton est le logo de la compagnie qui a produit ce site. Je n'ai rien contre la publicité mais c'est dommage que le seul élément qui semble cliquable sur cette page amène au concepteur du site.
Voilà ! J'espère que vous aurez apprécié ce premier billet d'évaluation d'un site Web. À la prochaine !
Commentaires (5) | Étude de cas