SlideShare une entreprise Scribd logo
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 adéquation avec
les caractéristiques physiologiques, perceptives
et cognitives de leurs utilisateurs potentiels.»
WIKIPEDIA
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?
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.
2

Wireframe
ou ergolayout, maquette filaire
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.»
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.»
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
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
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
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
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
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
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
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
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 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.
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
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.
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
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, …
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
3

Les outils
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
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 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.
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.
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
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
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
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
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
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?
Merci



Nathalie Gouzée (@gouzn)
Pour la FEWEB du 29 octobre 2013

Contenu connexe

En vedette

How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
UserZoom
 
Extreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rushExtreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rush
Emiland
 
Design itératif pour une site web de grande échelle
Design itératif pour une site web de grande échelleDesign itératif pour une site web de grande échelle
Design itératif pour une site web de grande échelle
Hervé Mischler
 
Du zoning au mockup, itinéraire d'une maquette web
Du zoning au mockup, itinéraire d'une maquette webDu zoning au mockup, itinéraire d'une maquette web
Du zoning au mockup, itinéraire d'une maquette web
Romy Duhem-Verdière
 
DETERMINACIÓN DE LA CALIDAD DE AGUA EN ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...
DETERMINACIÓN DE LA CALIDAD DE AGUA EN  ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...DETERMINACIÓN DE LA CALIDAD DE AGUA EN  ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...
DETERMINACIÓN DE LA CALIDAD DE AGUA EN ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...
Alexis Romero Osuna
 
trabajo simultaneo noviembre
trabajo simultaneo noviembretrabajo simultaneo noviembre
trabajo simultaneo noviembre
Paolis Villarreal
 
Que son y un poco de historiade las tribus hhurbanas
Que son y un poco de historiade las tribus hhurbanasQue son y un poco de historiade las tribus hhurbanas
Que son y un poco de historiade las tribus hhurbanas
Gerqldiin Ochoq
 
SCTP
SCTP SCTP
Practica 4 Innovación educativa con Recursos Educativos Abiertos
Practica 4 Innovación educativa con Recursos Educativos AbiertosPractica 4 Innovación educativa con Recursos Educativos Abiertos
Practica 4 Innovación educativa con Recursos Educativos Abiertos
David Gomez
 
TRABAJO SIMULTANEO OCTUBRE
TRABAJO SIMULTANEO OCTUBRETRABAJO SIMULTANEO OCTUBRE
TRABAJO SIMULTANEO OCTUBRE
Paolis Villarreal
 
Silkul jawahir
Silkul jawahirSilkul jawahir
Silkul jawahir
falloug
 
Laurence Minne - Région Rhône-Aples - Achat public innovant pour stimuler le...
Laurence Minne - Région Rhône-Aples -  Achat public innovant pour stimuler le...Laurence Minne - Région Rhône-Aples -  Achat public innovant pour stimuler le...
Laurence Minne - Région Rhône-Aples - Achat public innovant pour stimuler le...
Les Interconnectés
 
Boletin noviembre
Boletin noviembreBoletin noviembre
Boletin noviembre
Yovani Gerena
 
Mon album de famille
Mon album de familleMon album de famille
Mon album de famille
em311
 
Ma présence sur internet
Ma présence sur internetMa présence sur internet
Ma présence sur internet
Simon Salembier
 
Gestion dématérialisée stationnement résidents usagers - Mulhouse
Gestion dématérialisée stationnement résidents usagers - MulhouseGestion dématérialisée stationnement résidents usagers - Mulhouse
Gestion dématérialisée stationnement résidents usagers - Mulhouse
Les Interconnectés
 

En vedette (19)

How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
 
Extreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rushExtreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rush
 
Design itératif pour une site web de grande échelle
Design itératif pour une site web de grande échelleDesign itératif pour une site web de grande échelle
Design itératif pour une site web de grande échelle
 
Du zoning au mockup, itinéraire d'une maquette web
Du zoning au mockup, itinéraire d'une maquette webDu zoning au mockup, itinéraire d'une maquette web
Du zoning au mockup, itinéraire d'une maquette web
 
DETERMINACIÓN DE LA CALIDAD DE AGUA EN ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...
DETERMINACIÓN DE LA CALIDAD DE AGUA EN  ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...DETERMINACIÓN DE LA CALIDAD DE AGUA EN  ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...
DETERMINACIÓN DE LA CALIDAD DE AGUA EN ACUÍFERO, RÍO PRESIDIO Y LAGUNA HUIZA...
 
trabajo simultaneo noviembre
trabajo simultaneo noviembretrabajo simultaneo noviembre
trabajo simultaneo noviembre
 
Que son y un poco de historiade las tribus hhurbanas
Que son y un poco de historiade las tribus hhurbanasQue son y un poco de historiade las tribus hhurbanas
Que son y un poco de historiade las tribus hhurbanas
 
SCTP
SCTP SCTP
SCTP
 
Practica 4 Innovación educativa con Recursos Educativos Abiertos
Practica 4 Innovación educativa con Recursos Educativos AbiertosPractica 4 Innovación educativa con Recursos Educativos Abiertos
Practica 4 Innovación educativa con Recursos Educativos Abiertos
 
TRABAJO SIMULTANEO OCTUBRE
TRABAJO SIMULTANEO OCTUBRETRABAJO SIMULTANEO OCTUBRE
TRABAJO SIMULTANEO OCTUBRE
 
8 portail internetmobilités
8 portail internetmobilités8 portail internetmobilités
8 portail internetmobilités
 
Silkul jawahir
Silkul jawahirSilkul jawahir
Silkul jawahir
 
Laurence Minne - Région Rhône-Aples - Achat public innovant pour stimuler le...
Laurence Minne - Région Rhône-Aples -  Achat public innovant pour stimuler le...Laurence Minne - Région Rhône-Aples -  Achat public innovant pour stimuler le...
Laurence Minne - Région Rhône-Aples - Achat public innovant pour stimuler le...
 
Boletin noviembre
Boletin noviembreBoletin noviembre
Boletin noviembre
 
Wei
WeiWei
Wei
 
Mon album de famille
Mon album de familleMon album de famille
Mon album de famille
 
Ma présence sur internet
Ma présence sur internetMa présence sur internet
Ma présence sur internet
 
Mardi découverte page couv + progr intérieur
Mardi découverte page couv + progr intérieurMardi découverte page couv + progr intérieur
Mardi découverte page couv + progr intérieur
 
Gestion dématérialisée stationnement résidents usagers - Mulhouse
Gestion dématérialisée stationnement résidents usagers - MulhouseGestion dématérialisée stationnement résidents usagers - Mulhouse
Gestion dématérialisée stationnement résidents usagers - Mulhouse
 

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

Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Ardesi Midi-Pyrénées
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
Laurent Barbat
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
Use Age
 
Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*
designers interactifs
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
Benjamin Hoguet
 
L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016
Christophe Clouzeau
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
Catherine Verfaillie
 
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Médiathèque de Roubaix - La Grand-Plage
 
conduite_et_management_de_projet_9.pdf
conduite_et_management_de_projet_9.pdfconduite_et_management_de_projet_9.pdf
conduite_et_management_de_projet_9.pdf
KawtarBahlouLi1
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
Flupa
 
Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !
Marseille Innovation
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
Marc Wabnitz
 
(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)
(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)
(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)
Claire Morin
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
StrasWeb
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
Cap'Com
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications web
madsgraphics
 
Introduction à Scrum et aux méthodes agiles (v1.0)
Introduction à Scrum et aux méthodes agiles (v1.0)Introduction à Scrum et aux méthodes agiles (v1.0)
Introduction à Scrum et aux méthodes agiles (v1.0)
Blackbird
 
Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...
Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...
Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...
Camille Perazzi
 
Meetup Flupa Paris - UX & Employee eXperience - par Nadege Bide - 15/11/2018
Meetup Flupa Paris - UX &  Employee eXperience - par Nadege Bide - 15/11/2018Meetup Flupa Paris - UX &  Employee eXperience - par Nadege Bide - 15/11/2018
Meetup Flupa Paris - UX & Employee eXperience - par Nadege Bide - 15/11/2018
Nadège Bide
 

Similaire à Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik (20)

Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
Réussir son analyse des besoins dans la conduite d'un projet informatique (2007)
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*Modèle de brief UX, par *designers interactifs*
Modèle de brief UX, par *designers interactifs*
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
 
L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016L’UX pour vendre - afterwork Flupa janvier 2016
L’UX pour vendre - afterwork Flupa janvier 2016
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
 
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
 
conduite_et_management_de_projet_9.pdf
conduite_et_management_de_projet_9.pdfconduite_et_management_de_projet_9.pdf
conduite_et_management_de_projet_9.pdf
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
 
Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)
(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)
(Re) Cadrage en équipe agile (Intégrer Scrum et Design Thinking : REX)
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
L'innovation par le web 2
L'innovation par le web 2L'innovation par le web 2
L'innovation par le web 2
 
Ergonomie des applications web
Ergonomie des applications webErgonomie des applications web
Ergonomie des applications web
 
Introduction à Scrum et aux méthodes agiles (v1.0)
Introduction à Scrum et aux méthodes agiles (v1.0)Introduction à Scrum et aux méthodes agiles (v1.0)
Introduction à Scrum et aux méthodes agiles (v1.0)
 
Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...
Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...
Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisat...
 
Meetup Flupa Paris - UX & Employee eXperience - par Nadege Bide - 15/11/2018
Meetup Flupa Paris - UX &  Employee eXperience - par Nadege Bide - 15/11/2018Meetup Flupa Paris - UX &  Employee eXperience - par Nadege Bide - 15/11/2018
Meetup Flupa Paris - UX & Employee eXperience - par Nadege Bide - 15/11/2018
 

Plus de La FeWeb

jQuery deffered objects
jQuery deffered objectsjQuery deffered objects
jQuery deffered objects
La FeWeb
 
Introduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxIntroduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolbox
La FeWeb
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design tool
La FeWeb
 
NoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedNoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learned
La FeWeb
 
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICNoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
La FeWeb
 
That's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICThat's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETIC
La FeWeb
 
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyIntroduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
La FeWeb
 
Le community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLe community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise Maton
La FeWeb
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
La FeWeb
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
La FeWeb
 
Less CSS by Gauthier Eloy
Less CSS by Gauthier EloyLess CSS by Gauthier Eloy
Less CSS by Gauthier Eloy
La FeWeb
 

Plus de La FeWeb (11)

jQuery deffered objects
jQuery deffered objectsjQuery deffered objects
jQuery deffered objects
 
Introduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxIntroduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolbox
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design tool
 
NoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedNoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learned
 
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICNoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
 
That's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICThat's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETIC
 
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyIntroduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
 
Le community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLe community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise Maton
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
Less CSS by Gauthier Eloy
Less CSS by Gauthier EloyLess CSS by Gauthier Eloy
Less CSS by Gauthier Eloy
 

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

  • 1. Usability & Wireframe. 
 Nathalie Gouzée (@gouzn) Pour la FEWEB du 29 octobre 2013
  • 2. « If you fail to plan, you plan to fail. » BENJAMIN FRANKLIN ET/OU WINSTON CHURCHILL
  • 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. 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. 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.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 3 types de wireframes 1. Sketch 2. Low-fidelity (Zoning) 3. High Fidelity
  • 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.
  • 23. 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.
  • 26. 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, …
  • 35. 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
  • 37. 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.
  • 38. 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.
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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?
  • 45. Merci 
 Nathalie Gouzée (@gouzn) Pour la FEWEB du 29 octobre 2013