ux design atelier : intro et lo-fi

12
UX DESIGN Atelier Maquettage & Prototypage

Upload: pierre-canthelou

Post on 12-Feb-2017

178 views

Category:

Presentations & Public Speaking


1 download

TRANSCRIPT

Page 1: Ux design atelier : intro et lo-fi

UX DESIGNAtelier Maquettage & Prototypage

Page 2: Ux design atelier : intro et lo-fi

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 ?

Page 3: Ux design atelier : intro et lo-fi

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

Page 4: Ux design atelier : intro et lo-fi

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.

Page 5: Ux design atelier : intro et lo-fi

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

Page 6: Ux design atelier : intro et lo-fi

Des interfaces Des sites internet

Contenter les clients

Des panneaux de contrôle

Valider un process Améliorer

25% 50% 75%

Pour quoi ?

Page 7: Ux design atelier : intro et lo-fi

Workflow

LO-FIBESOINS : PAPIER/POST-IT

CLIENTS UTILISATEURS

1 2

3 MAQUETTE

PROTOTYPE(S)

interact

Page 8: Ux design atelier : intro et lo-fi

Des logicielsType Invision, Sketch et Balsamiq

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

http://balsamiq.com

Page 9: Ux design atelier : intro et lo-fi

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

Page 10: Ux design atelier : intro et lo-fi

Les maquettes lo-fi

• Quels outils ?

• Exemples…

• Essayons ensemble !

Page 11: Ux design atelier : intro et lo-fi

Prochaine étape

• Vos retours

• Le maquettage

Page 12: Ux design atelier : intro et lo-fi

Finmerci ;)