Design

saralaoui@lri.fr

(partie de la présentation basée sur des transparents d’Anastasia Bezerianos, Fanis Tsandilas et Michel Beaudouin-Lafon, Jeremie Garcia)

L’art du Design

Conception centrée-utilisateur

Méthodes

Image par W. Mackay et M. Beaudouin-Lafon

Connaitre l’utilisateur et la situation

•  Qui est l’utilisateur? •  Quelle est la tache?

– Observer et tester ne pas imaginer. •  Outils

– Carnet de note – Camera – Enregistrement audio

Conception participative Participation active des utilisateurs à la conception

Definissez le problème

•  Centrez vous sur le problème et non la solution

•  Choisissez le bon niveau de détail.

•  Brainstorming –  Utiliser des jeux –  Des idées proches, –  Des objets

•  Bouger! –  Sketcher –  Construire des modèles –  Jouer

•  Les règles du jeu •  Une conversation à la fois, encourager les idée, rester

concentré, ne pas juger, construire sur les idées des autres.

Genérez le plus de solutions possible

Brainstorming

Selectionner une idée •  Définir l’importance de chaque idée

–  Est ce que ça résoud le problem –  Les utilisateurs l’appréciront-ils? –  Le logiciel et le hardware est disponible?

•  Classer les idées suivants ces critères

•  Choisir le TOP 10.

Story-boards

Prototyper

•  Basse fidelité (rapide pas cher, moche) – Papier, sketch,…

•  Moyenne fidelité (slower, more expensive) – Flash, JavaScript, AJAX, …

•  Grande fidelité (le plus cher, prend du temps) – Toute l’interaction

Prototyper

•  sketches, papiers, modèles, mousse

•  L’échelle: Plus basse à plus haute fidélité.

Prototyper

•  L’échelle: Plus basse à plus haute fidélité.

Prototyper

Evaluation •  Plusieurs types d’évaluation:

–  Walkthroughs –  Études Think-aloud –  Wizard-of-Oz –  Comparaison de performance

•  Type d’évaluation à choisir selon le niveau d’implémentation.

Prototype Walkthrough papier

•  http://www.youtube.com/watch?v=GrV2SZuRPv0

CRAP contraste, répétition, alignement, proximité

Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

CRAP

• Contraste

• Répétition

• Alignement

• Proximité

Robin Williams Non-Designers Design Book, Peachpit Press

CRAP • Contraste

Faire des choses différentes différents Maitre en évidence les élém. dominantes Faire élém. moins importants moins visible Créer un dynamisme

• Répétition

• Alignement

• Proximité

Robin Williams Non-Designers Design Book, Peachpit Press

1

2

3

4

5

CRAP • Contraste

• Répétition Conception repetée au long de l’interface Consistance Créer unité

• Alignement

• Proximité

Robin Williams Non-Designers Design Book, Peachpit Press

1

2 3

4

CRAP

• Contraste

• Répétition

• Alignement Créer un flux visuel Connecter élém.

• Proximité

Robin Williams Non-Designers Design Book, Peachpit Press

1

2

3

4

CRAP

• Contraste

• Répétition

• Alignement

• Proximité Groupes évidents Indépendants séparées

Robin Williams Non-Designers Design Book, Peachpit Press

1

2 3

Qu’est-ce que vous voyez d’abord?

•  CRAP donne des indices sur la façon de lire le graphique

Robin Williams Non-Designers Design Book, Peachpit Press

title

subtext

three points

main point sub point

The design of everyday things (Norman, 1990)

Les objets quotidiens reflètent les problèmes de conception des interfaces

Introduit les notions d’affordance, de métaphore, de modèle conceptuel

Donne des règles de

conception

Métaphore Transfert d’une relation d’un ensemble

d’objets vers un autre ensemble d’objets

Affordances

Contraintes Nos modèles conceptuels de la physique et

la mécanique nous permettent à prédire et simuler l’opération des objets

Mappings Ensemble de relations possibles entre les objets

- Contrôle (widget) et résultat - Liée au feedback et causalité

Causalité (et feedback) L’état du système juste après une action est perçu

comme le résultat de l’action - interprétation du feedback

Principes de Norman (1990)

1.  Rendre les choses visibles On peut connaître l’état d’un système en observant l’interface

2.  Principe du mapping

3.  Principe du feedback Informer l’utilisateur

Principes de Conception (Norman)

1.  Visibilité : Puis-je le voir? 2.  Feedback : Qu’est ce que ça fait? 3.  Affordances : Comment je l’utlise? 4.  Mapping : où suis-je où puis je aller? 5.  Contraintes : Qu’est ce que je ne

peux pas faire? 6.  Consistance (métaphore): Je crois

avoir déjà vu ça avant?