45
Que voyez-vous? Systèmes d’Information: Systèmes d’Information: Utilisabilité

Usability and design (en francais)

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Usability and design (en francais)

Que voyez-vous?

Systèmes d’Information: Systèmes d’Information: Utilisabilité

Page 2: Usability and design (en francais)

Les défisProgrammation complexe

Diversité D’objectives (site et utilisateurs)

Equipment et systèmes NavigateursVitesses de connectionExpériences http://www.idboox.com/ebook/infos-

ebooks/un-ipad-une-wii-une-web-cam-et-des-seniors/

Page 3: Usability and design (en francais)
Page 4: Usability and design (en francais)

Examples• http://shihtzu.free.fr/index.htm• http://www.seloger.com • http://www.conforama.fr/

Page 5: Usability and design (en francais)

Norauto & Google Maps

Page 6: Usability and design (en francais)

Heures d’ouverture

Page 7: Usability and design (en francais)

Visas pour la France

Page 8: Usability and design (en francais)

Les étapes typiques

1. Analyse des besoins (discutez et recherchez)

2. Recherche et créeation des « personas »

3. Architecture de l'information (testez)

4. Maquettage low-fidelity (testez)

5. Design graphique (testez)

6. Implémentation

7. Tests utilisateurs

8. Ajustements suite aux tests

9. Lancement

10. Publicité

Page 9: Usability and design (en francais)

Analyse des besoins

• Le but du site de notre point de vue• Les utilisateurs probable/desirés• Cherchez l’intersection le plus simple de ceux que vous

voulez et ceux que vos utilisateurs voudront

• E.g. http://www.seloger.com/ - qui veut quoi du site?

Page 10: Usability and design (en francais)

Création des « personas »

specifiqspecifiqueue

Page 11: Usability and design (en francais)

Architecture de l'information • Card sorting – ouvert v. fermé

Page 12: Usability and design (en francais)

Maquettage low-fidelity (wireframe)

Page 13: Usability and design (en francais)

Design graphique• Utilizer un professionel• Erreurs typiques:

• Trop d’information / de messages sur la page• Information important sous la première vue (below the fold)• Trop de mouvement / d’animation• Manque d’images / mauvais images / images trop utilisés• Manque de contraste de couleurs• Photos ou videos non-optimisés

Page 14: Usability and design (en francais)

Les testes d’utilisateurs

Page 15: Usability and design (en francais)
Page 16: Usability and design (en francais)

Methodes de controle

Focus groups (face-à-face ou en ligne)LaboratoireSondage au site webAnalyse des statistiques d’utilisationCommentaires des consumateursTestes d’utilisation à distance

Page 17: Usability and design (en francais)

Focus Groups 6 – 12 personnesLes examplaires des pages, le card-sort, etcClient derrière un mirroirBesoin d’un bon moderateur Assurez que les participants sont vraiment

comme vos clients desirés

Page 18: Usability and design (en francais)

Focus Groups – utile quand:

Très totReactions emotional aux couleurs, images

Une idée général du contenu desiré

Page 19: Usability and design (en francais)

Focus Groups - RisquesLes utilisateurs ne font pas

tousjours ce qu’il anticipésInutile pour la navigation“Groupthink”; faible moderationLimitation de geographie,

geography, et la disponabilité - Bias

Page 20: Usability and design (en francais)

Les Prototypes & Card Sorts

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

• Pas cher• Pas compliqué

• Mais pas assez toute seul

Page 21: Usability and design (en francais)

Controles au laboratoire

Une à la fois; vocaliser leurs pensées Moderator peut etre présentSouvent videographiéClient peut regarder derríère un mirrorMinimum 5 - 6 utilisateurs; plus est mieux, mais chèr

Page 22: Usability and design (en francais)

Laboratoire - Avantages

On peut demander des questions pendant que le testeur utilise le site

On peut voir leur visage, leurs hesitations Pas necessaire de coordiner toute une groupe en meme

tempsPeut mesurer le temps que ca prend pour completer les

taches.

Page 23: Usability and design (en francais)

Laboratoire - negatives

Stressante; impact sur leur performance

Des ordinateurs étrange

Les testeurs doivent avoir le temps et la capacité de venir au labo

Limitation geographiques

Très peu de testeurs

Peut etre très cher

Page 24: Usability and design (en francais)

Laboratoire est utile quand:

On veut voir / percevoir les subtiltés

On a déjà une site disponible sur l’ordinateur pour tester

Page 25: Usability and design (en francais)

Eye Trackinghttp://www.youtube.com/watch?

v=xKdOMgu0C5Q&feature=related

• Gauche à droite• Visages / photos• Placements “traditionel”

Page 26: Usability and design (en francais)

Accessibilité• http://youtu.be/cWetc7AS37A

• Noms des liens (links)• Alt tags• http://www.w3.org/ (traductions francais à

http://www.yoyodesign.org/doc/w3c/index.php)

Page 27: Usability and design (en francais)

Sondages sur le site

Sondage apparait soit pour chaque visiteur, soit chaque certain nombre, soit quand ils quittent une certain page

Page 28: Usability and design (en francais)

Avantages des sondages webFacile à implementerOn peut obtenir beaucuoup de reponses très vite

Des vrai visiteursFacile à faire et d’obtenir grandes nombres vite

Pas chèrFacile à changer les questions

Page 29: Usability and design (en francais)

Désavantages des sondages

Les utilisateurs ont vu trop

Bias

Intrusive

Très peu de questions

Indique pas les défis de navigation

Page 30: Usability and design (en francais)

Utilize les sondages quand:

Le site existe déjà Le site a beaucoup de traffic Veut simplement des réactions genérales Rapidité est plus important que la profondeur

Page 31: Usability and design (en francais)

Statistiques / metriques

On peut analyzer les trajectoires pris par des visiteurs; on les perd ou?

Quels pages sont populaires?Utile comme suplément, mais on doit

déduire les motivations

0102030405060708090

100

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

Page 32: Usability and design (en francais)

Commentaires spontanées des clients

Plusieurs sourcesAvantages:

Pas chèreDes vrais clientsOpportunité de régler le problème

Page 33: Usability and design (en francais)

Désavantages Bias Ne trouve pas toutes les problèmes Ca peut etre cher (grandes entreprises) Il faut répondre vite et bien

(NB: Dangers des auto-répondeurs) Souvent pas assez de détail

Page 34: Usability and design (en francais)

Utilise quand:

Faire des petites ajustementsAide a verifier que les employées sont en accord avec les promesses du site

Des idées quand on veut refaire le site

Page 35: Usability and design (en francais)

Testes d’usabilité à distance

• Differentes types• En direct; partage l’ecran• Video (e.g. Morae http://www.techsmith.com/morae.asp)

• Grandes échantillons (e.g. Loop 11 http://www.loop11.com/)

Page 36: Usability and design (en francais)

AvantagesAucun limitation de géographie ni (selon la méthode)

d’heures Beaucoup de détail Qualitative et quantitativeEndroit normal pour l’utilisateurValidité statistique

Page 37: Usability and design (en francais)

Désavantages

Ne peut pas voir les visages

Pour certains systèmes les testeurs doit etre capable de suivre les instructions écrits et d’expliquer leurs actions en écrivant

Peut seulement le faire si le site est déjà montée

Page 38: Usability and design (en francais)

Quoi faire quand1. Dévelopement de Concept: focus groups, et

commentaires des clients existantes2. Une fois en ligne: Laboratoire si on doit voire les

visages. Si non, considère les utils à distance3. Continuelle: Sondages parfois;

statistiques/metriques, commentaires des clients; peut utiliser des techniques a distance pour étudier la concurrance

4. Révision du site: Techniques à distance avec des grandes nombres d’utilisateurs, plus autre information de l’étape continuelle.

Page 39: Usability and design (en francais)

1. Dévelopement de Concept:1. Dévelopement de Concept: focus groups, et commentaires focus groups, et commentaires

des clients existantesdes clients existantes

2. Une fois en ligne2. Une fois en ligne:: Laboratoire si on doit Laboratoire si on doit voire les visages. Si voire les visages. Si non, considère les non, considère les

utils à distanceutils à distance

3. Continuelle:3. Continuelle: Sondages Sondages parfois; parfois;

statistiques/metriques, statistiques/metriques, commentaires des clients; commentaires des clients;

peut utiliser des techniques a peut utiliser des techniques a distance pour étudier la distance pour étudier la

concurranceconcurrance

4. Révision du site:4. Révision du site: Techniques à distance Techniques à distance

avec des grandes avec des grandes nombres d’utilisateurs, nombres d’utilisateurs, plus autre information plus autre information de l’étape continuellede l’étape continuelle

Page 40: Usability and design (en francais)

Révision du site

Don’t throw out the baby with the bathwater!!

Page 41: Usability and design (en francais)

Today’s typical shopper

• Que veut-tu?• Recherche• Trouve les vendeurs• Opinions des autres• Décision• Achète en ligne ou au magasin

Page 42: Usability and design (en francais)
Page 43: Usability and design (en francais)
Page 44: Usability and design (en francais)
Page 45: Usability and design (en francais)

Idées? Quéstions?

[email protected]

http://emarketingmama.com