Ux design atelier : intro et lo-fi

UX DESIGNAtelier Maquettage & Prototypage

DéroulementLe Studio 1110

Définitions

Place dans l’UX et la créa

Pour quoi ?

Workflow…

Des logiciels

L’atelier : quoi faire ?

Et après ?

Le Studio 1110• Ingénieur en Génie Logiciel en

activité depuis 2004

• Indépendant + Réseau de confrères

• Situé à Moroges

• Spécialités : sites internet sur mesure et applications mobiles

• Maitrise de l’ensemble de la chaine : design, intégration, développement, mise en ligne

http://onzedix.fr

Définitions• Lo-fi : représentation d’une ou plusieurs interfaces sous

forme de boites grises afin d’étudier/explorer la structure, le contenu, l’organisation

• Maquette, Mockup : la représentation est plus fine et plus précise, autant dans la définition du contenu que dans les tailles et positions. C’est une base pour le graphiste, le CDC et peut servir à des tests UX.

• Prototype : l’objectif est bien de valider l’usabilité et d’éventuels contraintes techniques sur un ensemble plus ou moins important de fonctionnalités. C’est un démonstrateur.

Place des outils dans le cycle de création

POST-IT & PAPIER

1 Rapide, jetable, réorganisable, coloré, grande visibilité pour tous et très accessible

UIDEVIS DEV TEST LIVRAIS

MAQUETTE PROTOTYPE

MESURES + UTILISATEURS

SAV, Client

2 Les outils sont visuels et recueillent les ressentis

3 Les outils sont interactifs, recueillent les ressentis et valident un process ou un algorithme

4 Les utilisateurs testeurs sont là pour fournir retour, ressentis et usages

5 Le produit livré continue d’envoyer des signaux

Des interfaces Des sites internet

Contenter les clients

Des panneaux de contrôle

Valider un process Améliorer

25% 50% 75%

Pour quoi ?

Workflow

LO-FIBESOINS : PAPIER/POST-IT

CLIENTS UTILISATEURS

1 2

3 MAQUETTE

PROTOTYPE(S)

interact

Des logicielsType Invision, Sketch et Balsamiq

http://www.invisionapp.com/ http://www.sketchapp.com/

http://balsamiq.com

BALSAMIQ

• lo-fi

• dessin très simple

• orienté web

• collaboratif

SKETCH

• lo-fi à hi-fi

• vectoriel

• plugins

• artboards

• communauté

INVISION

• interactions

• online

• communauté

• sketch + photoshop

Les maquettes lo-fi

• Quels outils ?

• Exemples…

• Essayons ensemble !

Prochaine étape

• Vos retours

• Le maquettage

Finmerci ;)