![Page 1: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/1.jpg)
Usability & Wireframe.
Nathalie Gouzée (@gouzn)Pour la FEWEB du 29 octobre 2013
![Page 2: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/2.jpg)
« If you fail to plan, you plan to fail. »
BENJAMIN FRANKLIN ET/OU WINSTON CHURCHILL
![Page 3: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/3.jpg)
Usabilityou ergonomie informatique
1
![Page 4: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/4.jpg)
Usabilityou ergonomie informatique
1
« 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
![Page 5: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/5.jpg)
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?
![Page 6: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/6.jpg)
1. Méthodes faisant appel aux utilisateurs
2. Méthodes uniquement basées sur! l’expertise de l’ergonome
Test utilisateur, focus groupe, AB testing, tri par cartes, etc.
Le wireframe, le prototype, l’audit ergonomique, etc.
2 types de méthodes:
![Page 7: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/7.jpg)
Wireframe2
ou ergolayout, maquette filaire
![Page 8: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/8.jpg)
ou ergolayout, maquette filaireWireframe
« 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.»
2
![Page 9: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/9.jpg)
Wireframe« 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.»
ou ergolayout, maquette filaire
2
![Page 10: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/10.jpg)
• 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
Pourquoi un wireframe?
![Page 11: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/11.jpg)
1. Le client 2. Les PM / Commerciaux 3. Le marketing 4. Les designers / Intégrateurs 5. Les développeurs 6. Les Beta-testeurs
Quels intervenants?
![Page 12: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/12.jpg)
1. Le client !• Est-ce bien ce qu’il a demandé? • Indication sur les contenus à fournir
2. Les PM / Commerciaux 3. Le marketing 4. Les designers / Intégrateurs 5. Les développeurs 6. Les Beta-testeurs
Quels intervenants?
![Page 13: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/13.jpg)
1. Le client 2. Les PM / Commerciaux
• Validation et synthèse de la masse de travail à fournir • « Bon à tirer »
3. Le marketing 4. Les designers / Intégrateurs 5. Les développeurs 6. Les Beta-testeurs
Quels intervenants?
![Page 14: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/14.jpg)
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
Quels intervenants?
![Page 15: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/15.jpg)
1. Le client 2. Les PM / Commerciaux 3. Le marketing 4. Les designers / Intégrateurs!
• Idée de base de la structure du contenu, des flux et descomposants
5. Les développeurs 6. Les Beta-testeurs
Quels intervenants?
![Page 16: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/16.jpg)
1. Le client 2. Les PM / Commerciaux 3. Le marketing 4. Les designers / Intégrateurs 5. Les développeurs!
• Illustration du comportement de l’application ou du site • Définition des fonctionnalités et des comportements
6. Les Beta-testeurs
Quels intervenants?
![Page 17: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/17.jpg)
1. Le client 2. Les PM / Commerciaux 3. Le marketing 4. Les designers / Intégrateurs 5. Les développeurs 6. Les Beta-testeurs!
• Outil pratique pour l’A/B Testing • Force le test sur les fonctionnalités sans influence d’artifices graphiques
Quels intervenants?
![Page 18: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/18.jpg)
3 types de wireframes1. Sketch 2. Low-fidelity (Zoning) 3. High Fidelity
![Page 19: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/19.jpg)
1. SketchRapide, Expérimental. (Outil Personnel / utilisé eninterne)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.
![Page 20: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/20.jpg)
![Page 21: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/21.jpg)
![Page 22: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/22.jpg)
![Page 23: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/23.jpg)
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.
![Page 24: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/24.jpg)
![Page 25: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/25.jpg)
![Page 26: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/26.jpg)
3. High-FidelityComplexe, 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, …
![Page 27: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/27.jpg)
![Page 28: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/28.jpg)
![Page 29: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/29.jpg)
![Page 30: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/30.jpg)
![Page 31: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/31.jpg)
![Page 32: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/32.jpg)
![Page 33: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/33.jpg)
![Page 34: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/34.jpg)
Les outils3
![Page 35: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/35.jpg)
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
![Page 36: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/36.jpg)
Conclusion4
![Page 37: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/37.jpg)
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.
![Page 38: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/38.jpg)
• 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
Toujours indispensable?
Toutefois, le sketch est toujours bien utile à titre personnel puisqu’il permet de synthétiser les
demandes et de ne rien oublier.
![Page 39: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/39.jpg)
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
Ce que l’on attend d’un wireframe?
![Page 40: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/40.jpg)
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
Les points-clés d’un wireframe
![Page 41: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/41.jpg)
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
Les points-clés d’un wireframe
![Page 42: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/42.jpg)
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
Les points-clés d’un wireframe
![Page 43: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/43.jpg)
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
Les points-clés d’un wireframe
![Page 44: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/44.jpg)
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!
• Que se passe-t-il si je clique ici? • Combien de temps cela prend-t-il? • Puis-je annuler?
Les points-clés d’un wireframe
![Page 45: Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik](https://reader033.vdocuments.us/reader033/viewer/2022051609/547b1279b4af9fc3158b4d92/html5/thumbnails/45.jpg)
MerciNathalie Gouzée (@gouzn)
Pour la FEWEB du 29 octobre 2013