user-centered-design dossier de travaux pratiques · user-centered-design : dossier tp 2.strategy...

User-Centered-DesignDossier de travaux pratiques

Kilian Cuche

794-21n User-Centered-Design

Professeur : Réné Schneider

Assistant : Julien Raemy

HEG Genève

Information Documentaire

08/05/18

Bachelor – Semestre 6

Table des matières1. Introduction..........................................................................................................1

2. Strategy.................................................................................................................2

2.1. User Stories................................................................................................................2

2.2. Personas.....................................................................................................................2

3. Scope......................................................................................................................5

3.1. User journey...............................................................................................................5

4. Structure...............................................................................................................6

4.1. Card Sorting...............................................................................................................6

5. Skeleton.................................................................................................................7

5.1. Prototype papier.........................................................................................................7

5.2. Maquettes...................................................................................................................9

6. Surface..................................................................................................................9

6.1. Design Patterns...........................................................................................................9

6.2. Justification et illustration du design visuel..............................................................10

7. Test d'utilisabilité...............................................................................................11

7.1. Type de test...............................................................................................................11

7.2. Déclaration d'accord.................................................................................................11

7.3. Tâches et questions...................................................................................................12

7.4. Post-questionnaire....................................................................................................12

8. Conclusion..........................................................................................................13

9. Annexes...............................................................................................................13

9.1. Annexe 1 : User Journey..........................................................................................13

9.2. Annexe 2 : Tri de cartes............................................................................................14

9.3. Annexe 3 : Maquettes...............................................................................................14

9.3.1. Maquette Moqups - Accueil.............................................................................14

9.3.2. Maquette Moqups – Process.............................................................................15

9.3.3. Maquette Moqups – Purchasing.......................................................................16

9.3.4. Maquette Axure – Accueil mobile....................................................................17

User-Centered-Design : Dossier TP

1. Introduction

Dans le cadre du cours "User-Centered-Design" donné par Monsieur René Schneider etson assistant Monsieur Julien Raemy à la Haute École de Gestion de Genève, j'ai réaliséce dossier qui réuni les diverses notions abordées lors de ce cours, complété avec desmises en pratique des notions et méthodes par l'intermédiaire d'exemples concretsappliqué à un site web existant. Afin de faciliter la lecture de ce dossier, il est structuréselon les cinq niveaux du design centré sur l'utilisateur présenté ci-dessous.

Pour la réalisation de ce dossier, je me suis basé sur l'un des sites web du CERNexistant : https://it-dep-cda.web.cern.ch/it-dep-cda/. Chaque étape de la réflexion ainsi quela plupart des exemples pratiques sont basés sur ce site web. La théorie est basée sur lecours donné à la HEG.

Kilian Cuche 1

https://it-dep-cda.web.cern.ch/it-dep-cda/


2. Strategy

C'est le premier niveau du design centré sur l'utilisateur : la stratégie. Il est composé qued'une composante. Ce niveau est utile pour définir les besoins des utilisateurs ainsi queles objectifs du site et comment les concilier. Pour cette phase, nous avons vu deuxtechniques : les "user stories" (récits d'utilisateurs) et les personas.

2.1. User Stories

Les récits d'utilisateurs sont utilisés pour comprendre ce que l'on veut créer et définir lesbuts du site web. Ils sont restreint par leur forme et leur structure : "En tant que <rôle>, jevoudrais <objectifs/souhait/besoin>, pour <bénéfice>".

Exemples d'User Stories :

• En tant que chercheur au CERN, je voudrais pouvoir réserver une salle pourdonner une conférence.

• En tant qu'informaticienne au CERN, je voudrais trouver un répertoire d'outils pourm'aider dans mon travail.

• En tant que chercheur au CERN, je voudrais commander un ordinateur portablepour pouvoir travailler lors de mes déplacements.

2.2. Personas

Les personas sont des "stéréotypes" des utilisateurs types de notre futur site web. Pourpouvoir utiliser ces personas et se les approprier facilement, on leur donne un nom, unvisage et on les décrit de manière précise. On utilise les user stories pour définir le but despersonas. On peut créer des personas en se basant sur nos intuitions mais il estpréférable de se baser sur des données sur le public du site web.

J'ai réalisé les deux personas ci-dessous avec le logiciel en ligne UserForge :https://userforge.com/

Kilian Cuche 2

https://userforge.com/


Kilian Cuche 3


Kilian Cuche 4


3. Scope

Le "Scope" est le deuxième niveau du design centré sur l'utilisateur, c'est ici que l'ons'occupe des spécifications fonctionnelles. Il est composé de deux composants : du côtélogiciel on aborde la description détaillée de ses caractéristiques tandis que du côtéinformation, on s'occupe de l'utilité du contenu à disposition. Cette phase est utile pourdéterminer le contenu qui sera sur le site ainsi que les caractéristiques des applications.Pour cette phase, nous avons vu la méthode des "user journey".

3.1. User journey

Le voyage de l'utilisateur ou "user journey" est une méthode pour étudier l'interaction entreun usager et le site web. On définit une série d'étapes par lesquelles passe l'usager pourinteragir avec notre site web et satisfaire l'un de ses besoins. Ces différents scénariospermettent d'imaginer comment l'utilisateur peut interagir avec notre site web. Cela permetde définir ce qui doit être mis à disposition sur le site web afin que cela soit accessiblefacilement pour l'usager. On peut representer ces étapes sous forme de tableau, de texte,de dessins ou de graphiques.

Exemples d'User Journey :

Pour l'exemple suivant, j'ai choisi d'illustrer une user story de mon persona Oskari : ladémarche pour réserver une salle de conférence. La version brouillon de cette UserJourney se trouve en annexe.

Kilian Cuche 5


4. Structure

La structure est le troisième niveau, il est également composé de deux composantes : ence qui concerne le logiciel, on s'occupe de définir le design de l'interaction, c'est-à-direcomment le logiciel va interagir avec les actions de l'utilisateur. Du côté de l'information, ondéfinit l'architecture de l'information, l'arrangement des éléments de contenu dansl'espace. Pour cette phase nous avons mis en pratique la technique de "Card Sorting" outri de cartes.

4.1. Card Sorting

Le "Card Sorting" ou tri de cartes est une méthode pour classer l'information dansdifférentes catégories. C'est une méthode largement utilisée pour créer ou tester lastructure d'un site web.

Le but est de donner des cartes qui représentent des contenus à des participants. Ilsdoivent ensuite les regrouper selons des catégories ou créer leurs prorpres catégories. Eneffet, il existe différentes sortes de tri de cartes :

• Ouvert : les participants créent eux-mêmes les catégories pour classer lescontenus ;

• Fermé : les participants classent les contenus dans des catégories déjà définies audépart ;

• Générique : les participants lisent des descriptions et créent eux-mêmes lesdescripteurs des contenus et des catégories ;

• Inversé : les particpants doivent localiser un contenu spécifique dans une structurecomplète.

Il faut également observer les participants pendant le tri pour identifier les contenus et/oules catégories qui posent des problèmes.

Pour l'exemple du CERN, nous avons fait un tri de cartes ouvert. Nous étions trois pour leréaliser. Cela était pratique car nous pouvions discuter à plusieurs pour déterminer noschoix. Nous avons au final créé sept catégories qui sont les suivantes :

1. Process

2. Projects

3. Digital Repositories

4. Blog

5. Services

6. Tools

7. About

Kilian Cuche 6


Nous avons ensuite classé nos contenus dans ces différentes catégories. Vous trouverezle résultat détaillé en annexe.

5. Skeleton

Ce quatrième niveau est lui composé de trois composantes : le design de l'information quicomporte la représentation de l'information, le design de l'interaction qui comporte ledesign de l'interface et le design de navigation qui comporte l'interface pour l'espace del'information. Pour cette phase, nous avons créé des prototypes papiers ainsi que desmaquettes ainsi que des design patterns.

5.1. Prototype papier

Il est indispensable lors de la création d'un site web de trouver le meilleur design quirépondra aux règles du design et de la conception de site. Le site web doit être utile,désirable, accessible, crédible, trouvable, utilisable afin de créer de la valeur. Le but duprototypage rapide sur papier n'est pas d'avoir un design parfait mais d'avoir les éléments

Kilian Cuche 7


principaux du futur site web. Ce n'est pas le produit final, juste une étape pour nous menerau design final. Vous trouverez ci-dessous le prototype papier que j'ai réalisé avant defaire mes maquettes.

Kilian Cuche 8


5.2. Maquettes

Les maquettes sont la suite du prototypage rapide sur papier. J'ai réalisé plusieursmaquettes avec deux logiciels. Les logiciels Moqups (en ligne) et Axure.

J'ai réalisé ma première maquette avec le logiciel en ligne Moqups. Cette maquette entrois parties (acceuil – processus – exemple de processus) est conçue pour un site websur un navigateur d'un ordinateur fixe ou portable. Vous trouverez la maquette avec lesliens de navigations internes fonctionnels à cette adresse :https://app.moqups.com/KilianCuche/R8BGjI17LL/view/page/aa9df7b72

La deuxième maquette réalisée sur Axure est une maquette pour un site web mobile. Ellereprésente l'interface de la page d'accueil sur un terminal mobile.

Vous trouverez également en annexe des captures d'écran de ces différentes maquettes.

6. Surface

La surface est le dernier niveau du design centré sur l'utilisateur, il ne comporte qu'uneseule composante, c'est le niveau où tout se rassemble. C'est ici que l'on peut évaluer leproduit dans son ensemble dans un visuel final. Nous avons vu ici les designs patterns, lajustification du design visuel ainsi que les test d'utilisabilité afin de pouvoir tester le rendufinal d'un site web.

6.1. Design Patterns

Les designs patterns ou éléments des interfaces sont des designs pour les interfaces.Nous en avons vu une centaine lors du cours et nous en avons sélectionné quelques unqui nous parraissent important pour le design d'un site web. Je vais vous en présentertrois que je trouve important et ensuite vous trouverez la sélection complète dans le point6.2.

Social Media Pattern – Sharing Widget

Les "sharing widget" ou widgets de partages sont utilisés dans la plupart des sites webactuels. Ils permettent de partager les contenus publiés sur les différents médias sociauxqui existent. Ils sont recommandés sur n'importe quel site qui publie du contenu originalafin de permettre une plus large diffusion de ce dernier.

Content Pattern – Feature, Search, Browse

Ce design pattern préconise de mettre trois éléments importants sur la page d'accueil àsavoir : un article ou produit à la une, une barre de recherche ainsi qu'une liste decatégories ou d'objets qui peuvent être recherchés. Ces éléments me paraissentessentiels et nous pouvons les retrouver dans la majorité des sites web. Ils sontparticulièrement adaptés aux sites d'e-commerce.

Kilian Cuche 9

https://app.moqups.com/KilianCuche/R8BGjI17LL/view/page/aa9df7b72


Navigation Pattern – Sitemap Footer

Le "sitemap footer" ou plan de site en pied de page est un design pattern qui nous permetde mettre un plan du site en pied de page sur chacune des pages du site web. Cela faitpartie de la navigation globale en complément de l'en-tête. Il est également possible deréduire le sitemap aux éléments essentiels afin de gagner en clarté et en espace.

6.2. Justification et illustration du design visuel

La photo ci-dessous illustre notre justification du design visuel ainsi que la répartition desdifférents design patterns selon les différents niveaux du design centré sur l'utilisateur.Nous étions trois pour réaliser ce modèle.

Kilian Cuche 10


7. Test d'utilisabilité

Les test d'utilisabilité sont des tests empiriques et qualitatifs qui ont pour but l'évaluationd'un site web ou d'un logiciel. Ils servent à observer les comportements des utilisateurs etleurs attitudes pour découvrir les fautes d'interaction et générer des propositionsd'améliorations. Ils permettent d'évaluer l'efficience, la satisfaction, la facilitéd'apprentissage, la rémanence ainsi que le taux d'erreurs.

7.1. Type de test

Il existe plusieurs types de tests mais je vais prendre le test certificatif pour l'exemple dutest d'utilisabilité suivant. Les test certificatifs servent à évaluer de manière définitive ledegré d'accomplissement d'un but. C'est un test qui se déroulera dans un laboratoiredédié aussi appelé usability lab pour une dizaine de testeurs. J'ai pris l'exemple de testerle site web du CERN.

7.2. Déclaration d'accord

Avant de faire passer le test à un utilisateur nous devons avoir son accord en ce quiconcerne son enregistrement (son, vidéo) ainsi que l'utilisation des données produites lorsdu test. Voici un exemple de déclaration d'accord pour mon test d'utilisabilité :

Déclaration d'accord

Test d'utilisabilité : CERN – espace informatique

Merci de lire cette page attentivement.

Le CERN, en collaboration avec la Haute École de Gestion de Genève, vous demande departiciper à un test d'utilisabilité. En participant à cette évaluation, vous nous aiderez àaméliorer l'interface du site web du CERN dédié à l'informatique.

Nous allons vous observer et enregistrer des informations sur votre manière de navigueret d'utiliser le site web. Nous pouvons aussi vous demander de remplir des questionnaireset répondre à des questions spécifiques. Nous allons enregistrer vos activités et si vous lepermettez, nous allons filmer certaines parties. En signant le présent formulaire, vousdonnez votre permission à la Haute École de Gestion d'utiliser votre voix, vos citations etde vous filmer pour le seul et unique but d'évaluer le site web du CERN. De plus, nousn'allons pas utiliser votre nom, nous allons anonymiser les données et nous n'allons paspublier les données sur le web ou n'importe où ailleurs.

Et nous vous rappelons bien que ce n'est pas vous qui êtes testé mais seulementl'interface. Vous pouvez poser des questions à n'importe quel moment et prendre despauses si besoins. Vous pouvez également vous désister à tout moment.

Si vous acceptez les termes ci-dessus, merci de signer le présent document ici :

Nom : Date : Signature :

Kilian Cuche 11


7.3. Tâches et questions

Pour ce test d'utilisabilité je vais demander de réaliser trois tâches à mes testeurs :

Tâche 1 : Projets

• Depuis la page d'accueil du site du CERN, aller à l'endroit où vous penserieztrouver les projets informatiques en cours.

• Une fois que vous les avez trouvés, est-ce que vous pensez que ce contenu est àla bonne place ?

Tâche 2 : Contact

• Depuis la page des projets, retourner sur la page d'accueil.

• Trouvez l'adresse e-mail du service repository tools. Est-ce que l'information setrouve à un endroit logique selon vous ?

Tâche 3 : Réservation

• Depuis la page de l'adresse mail, aller directement à l'endroit où vous penseztrouver le formulaire pour réserver une salle de conférence.

• Est-ce possible d'y accéder sans passer par l'accueil ?

• Faire la démarche pour réserver une salle, jusqu'à l'envoi du formulaire.

• Comment avez-vous trouvé ce processus ? Difficulté ? Durée ? Clarté ?

7.4. Post-questionnaire

Après le test il est possible de donner un questionnaire au testeur afin de receuillir sesimpressions ainsi que quelques données supplémentaires. Voici une liste de questionsque je pourrai intégrer à mon post-questionnaire pour le test d'utilisabilité du site web duCERN.

• Aviez-vous déjà utilisé ce site web avant ce test ?

• Qu'avez-vous pensé de l'architecture de l'information sur ce site web ?

◦ Pas du tout logique / Pas logique / Neutre / Logique / Très logique

• Citez la liste des labels dont vous vous souvenez.

• Comment jugez-vous la navigation au sein de ce site web ?

◦ Pas du tout intuitive / Pas intuitive / Neutre / Intuitive / Très intuitive

• Qu'est-ce qui pourrait être amélioré selon vous dans le processus de réservation desalle de conférence ?

• Est-ce que vous rajouteriez des informations sur la page d'accueil ?

Kilian Cuche 12


8. Conclusion

Ce dossier permet donc de visualiser des exemples concrets de méthodes d'user-centered-design appliquées aux différentes phases de l'expérience utilisateur. C'est unebonne expérience afin de se rendre compte des étapes à réaliser pour la conception d'unsite web orienté utilisateur. C'est sans aucun doute que je mettrai en pratique ces acquislors de ma vie professionnelle.

9. Annexes

9.1. Annexe 1 : User Journey

Kilian Cuche 13


9.2. Annexe 2 : Tri de cartes

9.3. Annexe 3 : Maquettes

9.3.1. Maquette Moqups - Accueil

Kilian Cuche 14


9.3.2. Maquette Moqups – Process

Kilian Cuche 15


9.3.3. Maquette Moqups – Purchasing

Kilian Cuche 16


9.3.4. Maquette Axure – Accueil mobile

Kilian Cuche 17

user-centered-design dossier de travaux pratiques · user-centered-design : dossier tp 2.strategy...

Documents