Wireframing

Entre UI et UX
mathieu.mare@gmail.com
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 (http://wireframes.tumblr.com/)

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 : sneakpeekit.com

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