Cour2 Design d'interaction

Design d’intéractionCours #2

Tuesday, September 20, 2011

Avez-vous fait vos devoirs?


Évaluer 3 designs

(Choisir au moins un design d’interface)

Quels sont les objectif(s)

Comment auriez-vous innové ce design?

Devoir


Processus de design d’un produit


Waterfall (classique)


Waterfall

http://en.wikipedia.org/wiki/Waterfall_modelTuesday, September 20, 2011

http://en.wikipedia.org/wiki/Waterfall_model

http://en.wikipedia.org/wiki/Waterfall_model

Waterfall


Livrables

Requirements

★ Brief (Collecte d'informations)

★ Collecte et analyse des metrics (Données du site)

★ Audit du site (Étude d'utilisabilité des éléments existants)

★ Ethnographie ou entrevues (Définir le profil utilisateurs)

★ Benchmarking (Marché/Concurrence)

★ Card sorting (Le tri par cartes)


Livrables

UX Design

★ Persona: (Utilisateurs-types)

★ Plans du site et inventaire des contenus / arborescence

★ UseCase (Scénarios d'utilisation)

★ Wireframes (Croquis d'écrans)

★ PDD

★ Test utilisateurs


Personas


Wireframes


PDD aka Project Design Document


Livrables

V Design

★ Brainstorm (collecte d'idées inspirantes)

★ Maquettes graphiques (visualisation précise du résultat final)

★ Itérations

★ Prototypage


Livrables

Implémentation (Production)

★ Documentation des exigences d’affaires

★ Déclinaisons infographiques

★ Découpage

★ Intégration CSS/HTML

★ Programmation (Back end)


Livrables

Test / Analyse

★ Environement de test

★ Test utilisateurs

★ Modifications design (ux et v)

★ Déploiement

★ Modifications et tests

★ Mise en ligne


Agile


UX Agile

http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html




UX Agile



Agile


http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465Tuesday, September 20, 2011

http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465

http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465

Glossaire.


UX[User Experience Design]

Aspect du design qui répond à comment l’utilisateur va utiliser, apprendre, et pecevoir un produit.

Ce domaine a les rascines dans l’ergonomie et l’aspect humain (human factor). L’objectif principal est de créer des systèmes entre l’homme et la machine de façon à créer une expérience intuitive et productive pour les deux. Ce domaine emprunte les lois et principes du Human Centered Design.


UX DesignLe design UX est un champ du design d'expérience. Il concerne la création des modèles architecturaux et interactifs qui affectent l'expérience-utilisateur dans un appareil ou un système.

Étant donné son caractère subjectif, l'expérience-utilisateur ne peut être designée. On doit plutôt designer en fonction de l'expérience-utilisateur, en essayant d'activer certains types d'expérience. La portée de cette pratique couvre « tous les aspects de l'interaction des utilisateurs avec le produit, incluant la façon dont il sera perçu, maîtrisé et utilisé. »


ErgonomieOn nomme ergonomie « l'étude scientifique de la relation entre l'homme et ses moyens, méthodes et milieux de travail » et l'application de ses connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité par le plus grand nombre. »



GabaritsLe modèle (ou gabarit) permet de construire les pages d'un site web selon une trame (un squelette) de page identique constituée d'éléments modifiables


PatternsLes patrons sont des solutions aux problèmes communs.


PatternsChaque patron a 4 composantes:

1. un titre

2. un problème

3. un contexte

4. une solution


Les patterns peuvent être combinés ensemble


Jeu.


Dessinez-moi un Wizywig


WYSIWYGProblème:

“Je veux pouvoir écrire du texte et ajouter

des images, mais je ne sais pas écrire du

HTML pour le faire.”


WYSIWYGWhat You See Is What You Get


WYSIWYGSolutions apportées:

• Donner à l’utilisateur une idée du

résultat final de son intéraction

• Facilite l’édition du contenu en ligne ainsi

que sa manipulation


Dessinez-moi un Password Strength

MeterTuesday, September 20, 2011

Password Strength Meter

Problème:

“Je veux pouvoir indiquer à mon utilisateur

que son mot de passe est safe.”




Solutions apportées:

• Indique clairement à l’utilisateur si le mot

de passe est assez sécuritaire

• Informe et sécurise l’utilisateur



Dessinez-moi un caroussel


Caroussel

Problème:

“Je veux avoir une idée du contenu qu’offre

ce site.”


Caroussel

Problème:

“Je veux avoir une idée du contenu qu’offre

ce site.”

Attention!

Personne ne s’exprime comme ça!!!


Caroussel



• Permet d’économiser l’espace sur une

page et d’offrir une série de contenu

navigable

• Facilite la promotion de contenu qui

autrement n’aurait pas été visible à

l’utilisateur

Caroussel


Dessinez-moi un fil d’ariane


Problème:

“Je veux savoir où je suis dans ce site.”

Fil d’ariane a.k.a Breadcrumb





• Permet à l’utilisateur de retrouver son

chemin

• Si l’utilisateur arrive sur la page par une

recherche, il peut naviguer vers des

sections principales



Dessinez-moi un accordéon


Problème:

“Je veux pouvoir survoler l’information

principale d’abord.”

Accordéon

Attention!

Personne ne s’exprime comme ça!!!


Accordéon


Accordéon



• Permet la navigation rapide et

thématique

• Permet d’afficher des options de

navigation tout en ayant une interface

épurée

Accordéon


Sprint


Dessinez-moi un menu déroulant


Problème:

“Je veux naviguer ce site facilement.”

Menu déroulant aka dropdown menu (Select)


Menu déroulant aka dropdown menu (Select)


Dessinez-moi un menu déroulant de

navigationTuesday, September 20, 2011

Problème:

“Je veux naviguer ce site facilement.”

Menu déroulant (nav) aka navigational dropdown menu


Menu déroulant (nav) aka navigational dropdown menu


Dessinez-moi un .toggle()


Toggle vrs. Check Box


Toggle vrs. Check Boxl’un ou l’autre peut être l’un et l’autre


Arbo.


Arbo. Web site : Accueil

Groupe d’informa7on A Groupe d’informa7on B Groupe d’informa7on C Groupe d’informa7on D

Sous-‐groupe A1 Sous-‐groupe A2

Sec7on A2

Sec7on B1 Sec7on C1

Sec7on B2 Sec7on C2

Sous-‐groupe D1 Sous-‐groupe D2

Sec7on D1

Sec7on D1’

Sec7on C3

Recherche

Thèmes communs

Thèmes 1

Thèmes 2

Thèmes 3

Thèmes 4

CommunautéForum de

conversa7onUGC


Navigation principaleL’objectif de cet exercice :

★ Organiser le contenu principal

★ S’addresser au 80% des utilisateurs

★ Avoir un objectif principale

Web site : Accueil

Groupe d’informa7on A Groupe d’informa7on B Groupe d’informa7on C Groupe d’informa7on D

Recherche


Navigation secondaire


Navigation secondaireL’objectif de cet exercice :

★ Trouver l’informa7on clé à travers tout le site

★ Contenir des sec7ons cachées (les meLre de l’avant)

★ Créer des liens vers les sites partenaires (ou des sites externes)


Audit du contenu


Audit de contenuL’objectif de cet exercice :

★ Connaître le contenu

★ Créer des liens entre différentes sections

★ Comprendre la dynamique du site

★ Comprendre comment ce site ce construit

★ Regroupement des grands contenus

★ “Card sorting”


Audit de contenu★ Arborescence principale : Accueil, Société,

musique, ...

★ Arborescence secondaire correspondant

★ Détail du contenu (type, mise à jour)

★ Détail des éléments répétitifs ou confondants


Tri de carte


Tri de carteL’objectif de cet exercice :

★ Regrouper le contenu sous de grande catégorie

★ Permettre de classer les éléments de navigation

★ Créer ou découvrir de nouvelles catégorie lors de la réorganisation de l’arborescence d’un site


Tri de carteDeux méthodes possibles:

★ Première: Inviter un groupe à classer par catégorie non définit les différentes parties de contenu d’un site

★ Deuxième: Inviter un groupe à classer selon des catégories définies les différentes parties de contenu d’un site

http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide




À vous de jouer!


Design et organisation 1

http://www.maisoncorbeil.com

Faire un audit de contenu détaillé

Préparer les éléments pour un tri de carte en groupe la semaine prochaine

Atelier


http://www.maisoncorbeil.com/

http://www.maisoncorbeil.com/