Wireframing
Entre UI et UX
[Link]@[Link]
UX
Qu'est ce que l'UX ?
L'UX est un sigle anglais qui signifie User eXperience.
L'UX est un ensemble de normes et de bonnes pratiques dont l'objectif est
double : concevoir un produit, mais aussi l'expérience de son utilisation.
Prenez en compte les besoins
● travailler sur l'ergonomie du produit et
de son usage : pratique, accessible,
utile, facile à utiliser et à comprendre,
etc.
● anticiper l'usage : chercher ce dont
l'utilisateur a besoin, ce qu'il attend,
ce qu'il ne veut pas.
L’UX?
L’UX c’est ça
UX or UI
UX / UI?
L'UI est la partie visible de l'UX
● L'UX est un mix de parties visibles
+ parties invisibles qui, ensemble,
contribuent à l'expérience globale
de l'utilisateur sur l'application
mobile.
● L'UI est la partie "visible",
"perceptible" d'un produit : c'est
ce que l'on voit, entend, touche
lorsque l'on utilise une
application mobile par exemple.
A retenir
UX is not UI, but UI is UX
Wireframing
Wireframing?
= Maquettage
= Mockup
= prototypage
= Fil de fer
Mais pourquoi?
Pour structurer la navigation
Pour servir l'expérience utilisateur
Pour préparer les maquettes graphique
Pour faciliter le travail d’intégration
Avec quels outils?
Papier / crayons
Illustrator
Outils dédiés
Mais au fond : L’outil ne compte pas...
Prototypage
3 grandes phases
Prototype “basse définition”
Prototype “Moyenne Définition”
Prototype “Haute définition”
La phase “basse définition”
Schémas de principe
Rien n’est encore figé
Pas de couleur
2 tonalités
Gris foncé = éléments persistants
gris clair = éléments contextuels
La phase “basse définition”
Définir un objectif.
Imaginer un parcours utilisateur.
Se focaliser sur les zones essentielles:
Entete
Navigation
Corps
Footer
Exercice
A partir d’un site web existant d’un projet personnel, faire
(sur papier ou autre) le prototype “basse définition” des
pages principales en se focalisant sur la structure de
navigation et la hiérarchie des contenus
La phase “Moyenne définition”
Maquette de référence du
projet
Typage des éléments
Annotations possibles
Pas de graphisme
Limiter l’usage de la couleur
Ressources
Inspiration : I ♥ wireframes ([Link]
codrops
La haute définition
Templates PSD
Directement utilisés par les
intégrateurs front-end et
les développeurs
Graphisme définitif
Processus classique de conception
Le processus dans la réalité
Bonnes Pratiques
Structure
Outil utile: mindmup
Mobile First
12 colonnes
Colonnes divisibles
User centric
Communiquez!
D’une manière générale
● Soyez au clair avec vos objectifs
● Pensez “fonctionnel” et non “joli”
● Capitalisez sur votre expérience
● Fixez vous des “dead lines”
● Faites simple
● Pas d’excès de design
● Organisez!
Outils
Le Papier / crayon
Simple
Intuitif
Rapide
Interactivité variée possible!
Gabarits papier à télécharger : [Link]
Lociciels de dessin
Illustrator
Photoshop (attention)
Inkscape
Google drawings
Paint :)
etc...
Outils dédiés
Balsamic
Marvel App
Figma
Gravit
Axure
Travaux Pratiques
Like / Dislike
● Faire le wireframe d’un site que l’on aime
● Faire le wireframe d’un site que l’on aime pas
● Lister les points que l’on aime et que l’on aime pas sur
les deux wireframe
● Dégager des axes d’amélioration
