Usability &
Wireframe.




Nathalie Gouzée (@gouzn)
Pour la FEWEB du 29 octobre 2013
« If you fail to plan,
you plan to fail. »
BENJAMIN FRANKLIN ET/OU WINSTON CHURCHILL
1

Usability
ou ergonomie informatique
1

Usability
ou ergonomie informatique
« Pratique cherchant à concevoir ou modifier des
interfaces afin qu'elles soient en a...
Les grandes questions…
1. A qui je m’adresse?
2. Quel est le message à faire passer?
3. Dans quel contexte ce message inte...
2 types de méthodes:
1. Méthodes faisant appel aux utilisateurs
Test utilisateur, focus groupe, AB testing, tri par
cartes...
2

Wireframe
ou ergolayout, maquette filaire
2

Wireframe
ou ergolayout, maquette filaire
« Outil de communication entre tous les
intervenants d’un projet informatique ...
2

Wireframe
ou ergolayout, maquette filaire
« Outil de communication entre tous les
intervenants d’un projet informatique ...
Pourquoi un wireframe?
•

Permet de rassembler et de synthétiser les
demandes

•

Permet d’impliquer le commanditaire et/o...
Quels intervenants?
1.
2.
3.
4.
5.
6.

Le client
Les PM / Commerciaux
Le marketing
Les designers / Intégrateurs
Les dévelo...
Quels intervenants?
1. Le client !
•
•

2.
3.
4.
5.
6.

Est-ce bien ce qu’il a demandé?
Indication sur les contenus à four...
Quels intervenants?
1. Le client
2. Les PM / Commerciaux
•
•

3.
4.
5.
6.

Validation et synthèse de la masse de travail à...
Quels intervenants?
1. Le client
2. Les PM / Commerciaux
3. Le marketing!
•

Est-ce que l’on s’adresse sur le bon ton aux ...
Quels intervenants?
1.
2.
3.
4.

Le client
Les PM / Commerciaux
Le marketing
Les designers / Intégrateurs!
•

Idée de base...
Quels intervenants?
1.
2.
3.
4.
5.

Le client
Les PM / Commerciaux
Le marketing
Les designers / Intégrateurs
Les développe...
Quels intervenants?
1.
2.
3.
4.
5.
6.

Le client
Les PM / Commerciaux
Le marketing
Les designers / Intégrateurs
Les dévelo...
3 types de wireframes
1. Sketch
2. Low-fidelity (Zoning)
3. High Fidelity
1. Sketch
Rapide, Expérimental. (Outil Personnel / utilisé en






interne)





Points positifs :!
•

Schématisation des...
2. Low-Fidelity (Zoning)
Zones de référence, début de hiérarchisation





Points positifs :!
•

Permet de lister le conte...
3. High-Fidelity
Complexe, qui peut être compris sans explication
Respecte les proportions et le contenu





Points posit...
3

Les outils
Petites listes non exhaustive
•

Applications de Bureau : Axure, Omnigraffle,
JustInMind, EasyPrototype, …

•

Logiciels gr...
4

Conclusion
Il n’existe pas de bonnes ou de
mauvaises solutions en
matière de choix de wireframe.
1. Le choix du type de wireframe est...
Toujours indispensable?
•

Pas pour les petits projets

•

Pas lorsqu’il y a pas ou peu d’intervenants

•

Pas lorsque le ...
Ce que l’on attend d’un
wireframe?
1. Qu’il soit clair, précis, simple et sans
graphisme!
2. Qu’il se focalise sur les fon...
Les points-clés d’un
wireframe
1. Navigation soignée
2. Layout et structure de page travaillée
3. Intégration du contenu c...
Les points-clés d’un
wireframe
1. Navigation soignée !
•

Où suis-je? Suis-je au bon endroit?

•

Où est-ce que je veux al...
Les points-clés d’un
wireframe
1. Navigation soignée
2. Layout et structure de la page travaillée!
•

Qu’est-ce que j’ai r...
Les points-clés d’un
wireframe
1. Navigation soignée
2. Layout et structure de page travaillée
3. Intégration du contenu c...
Les points-clés d’un
wireframe
1.
2.
3.
4.

Navigation soignée
Layout et structure de page travaillée
Intégration du conte...
Merci



Nathalie Gouzée (@gouzn)
Pour la FEWEB du 29 octobre 2013
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Prochain SlideShare
Chargement dans…5
×

Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik

2 010 vues

Publié le

Présentation de Usability & Wireframe par Nathalie Gouzée 29/10/2013 - http://www.rubbik.com

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 010
Sur SlideShare
0
Issues des intégrations
0
Intégrations
44
Actions
Partages
0
Téléchargements
53
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik

  1. 1. Usability & Wireframe. 
 Nathalie Gouzée (@gouzn) Pour la FEWEB du 29 octobre 2013
  2. 2. « If you fail to plan, you plan to fail. » BENJAMIN FRANKLIN ET/OU WINSTON CHURCHILL
  3. 3. 1 Usability ou ergonomie informatique
  4. 4. 1 Usability ou ergonomie informatique « Pratique cherchant à concevoir ou modifier des interfaces afin qu'elles soient en adéquation avec les caractéristiques physiologiques, perceptives et cognitives de leurs utilisateurs potentiels.» WIKIPEDIA
  5. 5. Les grandes questions… 1. A qui je m’adresse? 2. Quel est le message à faire passer? 3. Dans quel contexte ce message intervient? 4. Comment vais-je faire passer ce message?
  6. 6. 2 types de méthodes: 1. Méthodes faisant appel aux utilisateurs Test utilisateur, focus groupe, AB testing, tri par cartes, etc. 2. Méthodes uniquement basées sur! l’expertise de l’ergonome Le wireframe, le prototype, l’audit ergonomique, etc.
  7. 7. 2 Wireframe ou ergolayout, maquette filaire
  8. 8. 2 Wireframe ou ergolayout, maquette filaire « Outil de communication entre tous les intervenants d’un projet informatique qui prend en considération la structure, le contenu, la hiérarchie de l’information, les fonctionnalités et les comportements d’une interface de site ou d’application sans artifice graphique.»
  9. 9. 2 Wireframe ou ergolayout, maquette filaire « Outil de communication entre tous les intervenants d’un projet informatique qui prend en considération la structure, le contenu, la hiérarchie de l’information, les fonctionnalités et les comportements d’une interface de site ou d’application sans artifice graphique.»
  10. 10. Pourquoi un wireframe? • Permet de rassembler et de synthétiser les demandes • Permet d’impliquer le commanditaire et/ou de faire du User Testing en amont afin de corriger le tir au plus tôt, avant la production! • Permet de travailler en parallèle Design / Développement! • Permet une vision globale et commune du projet et donc d’améliorer la communication entre tous les intervenants du projet
  11. 11. Quels intervenants? 1. 2. 3. 4. 5. 6. Le client Les PM / Commerciaux Le marketing Les designers / Intégrateurs Les développeurs Les Beta-testeurs
  12. 12. Quels intervenants? 1. Le client ! • • 2. 3. 4. 5. 6. Est-ce bien ce qu’il a demandé? Indication sur les contenus à fournir Les PM / Commerciaux Le marketing Les designers / Intégrateurs Les développeurs Les Beta-testeurs
  13. 13. Quels intervenants? 1. Le client 2. Les PM / Commerciaux • • 3. 4. 5. 6. Validation et synthèse de la masse de travail à fournir « Bon à tirer » Le marketing Les designers / Intégrateurs Les développeurs Les Beta-testeurs
  14. 14. Quels intervenants? 1. Le client 2. Les PM / Commerciaux 3. Le marketing! • Est-ce que l’on s’adresse sur le bon ton aux utilisateurs? • Est-ce que ce projet correspond à la stratégie de la marque? 4. Les designers / Intégrateurs 5. Les développeurs 6. Les Beta-testeurs
  15. 15. Quels intervenants? 1. 2. 3. 4. Le client Les PM / Commerciaux Le marketing Les designers / Intégrateurs! • Idée de base de la structure du contenu, des flux et des
 composants 5. Les développeurs 6. Les Beta-testeurs
  16. 16. Quels intervenants? 1. 2. 3. 4. 5. Le client Les PM / Commerciaux Le marketing Les designers / Intégrateurs Les développeurs! • Illustration du comportement de l’application ou du site • Définition des fonctionnalités et des comportements 6. Les Beta-testeurs
  17. 17. Quels intervenants? 1. 2. 3. 4. 5. 6. Le client Les PM / Commerciaux Le marketing Les designers / Intégrateurs Les développeurs Les Beta-testeurs! • Outil pratique pour l’A/B Testing • Force le test sur les fonctionnalités sans influence d’artifices 
 


 
graphiques
  18. 18. 3 types de wireframes 1. Sketch 2. Low-fidelity (Zoning) 3. High Fidelity
  19. 19. 1. Sketch Rapide, Expérimental. (Outil Personnel / utilisé en
 


 
interne)
 

 
Points positifs :! • Schématisation des idées et des concepts dans les grandes
 


 
lignes • Aperçu rapide du fonctionnement entre les pages
 

 
 Points négatifs :! • Limitation de la zone de travail • Pas digital, pas d’interaction • Annotations limitées, « versioning » compliqué 
Outils :! • Papier et crayons, feutres, artline, UI Stencils, Sneakpeekit, etc.
  20. 20. 2. Low-Fidelity (Zoning) Zones de référence, début de hiérarchisation 


 Points positifs :! • Permet de lister le contenu de la page • Efficace pour tester les interactions ou flux (User Testing) • Laisse de l’espace pour la créativité (design) 


 Points négatifs :! • Improvisation, interprétation par rapport aux fonctionnalités
 


 
(Marketing / Graphiste / Dev) 
 
Outils :! • Balsamiq, Pencil, Moqups, MockFlow, Mockingbird, etc.
  21. 21. 3. High-Fidelity Complexe, qui peut être compris sans explication Respecte les proportions et le contenu 


 Points positifs :! • Outil complet de référence tout au long du projet • Utile lorsqu’il y a énormément d’intervenants et des
 


 
procédés de validation complexe 


 Points négatifs :! • Réalisation plus longue et couteuse • Peut souvent être confondu avec un mockup • Laisse peu de place à la créativité (design)
 
Outils :! • Axure, JustInMind, Invision, Jetstrap, Omnigraffle, HTML/CSS, …
  22. 22. 3 Les outils
  23. 23. Petites listes non exhaustive • Applications de Bureau : Axure, Omnigraffle, JustInMind, EasyPrototype, … • Logiciels graphiques : Fireworks, Photoshop, … (+ Invision ou Cageapp) • Outils Web : Balsamiq, HotGloo, Mockingbird, Moqups, Invision, Cageapp, Proto.io, wireframe.cc, …! • … Pen & Paper
  24. 24. 4 Conclusion
  25. 25. Il n’existe pas de bonnes ou de mauvaises solutions en matière de choix de wireframe. 1. Le choix du type de wireframe est dépendant du contexte (Projet, intervenants, habitudes de travail) 2. En général, plus il y a d’intervenants et de flux, plus le wireframe devra être détaillé. (Tout en prenant garde de ne pas franchir la limite du mockup). 3. Le wireframe est l’étape intermédiaire entre le concept et la création graphique/développement.
  26. 26. Toujours indispensable? • Pas pour les petits projets • Pas lorsqu’il y a pas ou peu d’intervenants • Pas lorsque le client n’est pas familier et réceptif à ce genre de communication Toutefois, le sketch est toujours bien utile à titre personnel puisqu’il permet de synthétiser les demandes et de ne rien oublier.
  27. 27. Ce que l’on attend d’un wireframe? 1. Qu’il soit clair, précis, simple et sans graphisme! 2. Qu’il se focalise sur les fonctionnalités, la structure de l’information et le contenu 3. Qu’il implique les grands acteurs du projet
  28. 28. Les points-clés d’un wireframe 1. Navigation soignée 2. Layout et structure de page travaillée 3. Intégration du contenu conceptualisée 4. Interaction et éléments dynamiques simulés
  29. 29. Les points-clés d’un wireframe 1. Navigation soignée ! • Où suis-je? Suis-je au bon endroit? • Où est-ce que je veux aller? Où ai-je déjà été? 2. Layout et structure de page travaillée 3. Intégration du contenu conceptualisée 4. Interaction et éléments dynamiques simulés
  30. 30. Les points-clés d’un wireframe 1. Navigation soignée 2. Layout et structure de la page travaillée! • Qu’est-ce que j’ai retenu en premier? • Comment l’information est-elle organisée? • Qu’est-ce qui est lié de page en page? 3. Intégration du contenu conceptualisée 4. Interaction et éléments dynamiques simulés
  31. 31. Les points-clés d’un wireframe 1. Navigation soignée 2. Layout et structure de page travaillée 3. Intégration du contenu conceptualisée! • Quel information je trouve dans cette page? • Qu’est-ce que je peux faire? 4. Interaction et éléments dynamiques simulés
  32. 32. Les points-clés d’un wireframe 1. 2. 3. 4. Navigation soignée Layout et structure de page travaillée Intégration du contenu conceptualisée Interaction et éléments dynamiques simulés! • Que se passe-t-il si je clique ici? • Combien de temps cela prend-t-il? • Puis-je annuler?
  33. 33. Merci 
 Nathalie Gouzée (@gouzn) Pour la FEWEB du 29 octobre 2013

×