Ergonomie des Applications Web

CESI • 4 janvier 2011

*

Mais c’est qui, celui-là ?

1. contact@madsgraphics.com

2. @madsgraphics

3. flickr.com/madsgraphics

*

Qu’est-ce qu’il nous raconte ?

1. Ergo, Késako ?

2. Bien connaître l’ennemi

3. /** Pause **/

4. La base, les règles, voire +

5. /** Déjeuner **/

6. A fond les ballons

1. Les prototypes

2. Les trucs de pros

3. Le web pour tous

7. /** Pause **/

8. Flameware

*

Générateur de Newsletter Online (aka ‘‘le fil rouge’’)

1. Utilise un système de templates

2. Souple avec l’utilisation de sub-layouts

3. Autorise l’import de médias (images)

4. Facilite la saisie textuelle sans code

5. Multi-utilisateurs

6. Multi-sessions

7. Destiné à être utilisé par des personnes sans compétence informatique particulière

*

Pas de panique, tout va bien se passer ;)

*

Back to the future :Histoire de l’ergonomie

Web

*

”L’ensemble des connaissances scientifiques relative à l’Homme nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité,

et d'efficacité”Alain Wisner

Ergonomie Générale

Interfaces Homme-Machine (IHM)

Ergonomie des applications informatiques

Ergonomie Web

Utilité

Capter l’utilisateur

Utilisabilité

Efficacité Efficience Satisfaction

Non mais quel intérêt, franchement, je vous

demande ?!*

Méthodes expertesvs

Méthodes participatives

*

*

Soyez bon, soyez beau,mangez un ergonome au petit

dejeuner

*

C’est qui, mon internaute ?

*

Vos utilisateurs :méthode des personas1. Personas primaire /

secondaire

2. Conception des personas en groupe de travail

3. Définition des personas par granularité progressive

4. informations indispensables :

1. Photo

2. Devise

3. Orientation sur le projet

*

Bien concevoir vos personas

1. Priorisez les fonctionnalités

2. Abordez les problématiques complexes

3. Orientez les tâches sur l'équipe

4. Favorisez l'empathie et les échanges au sein de l'équipe

5. Titre / nom / devise / photo sont les éléments indispensables

6. Restez réalistes

*

N’assassinez jamais vos Personas !

*

Oui, mais c’est sûr ?

*

Méthode du Card-Sorting

1. Préparer votre matériel

2. Cibler vos utilisateurs

3. 2. 1. ... Triez !

4. Analyser les résultats

5. Limites de la méthode

*

Tests utilisateurs

1. Recruter vos testeurs

2. Quand tester quoi ?

3. Analyser les résultats

*

Bonus : la méthode Lean IA*Analyser

Prototyper

Tester

Livrer

/** Pause **/

Allez, on s’y colle pour de bon !*

C’est quoi, un site ergonomique ?

*

Principes de la Gestalt

1. Principe de proximité*

Principes de la Gestalt

1. Principe de proximité

2. Principe de similarité

*

Loi de Fitts

1. Augmenter la taille des éléments cliquables

2. Augmenter la surface de clic

3. Rapprocher les éléments cliquables

*

Principe d’affordance

1. Soyez explicite dans les interactions

2. Encouragez visuellement le contact

3. Ré-utilisez les apparences quotidiennes

*

Méfiez-vous des idées reçues

1. Les 3 clics

2. Les internautes sont tous des nazes

3. Ergonomie et Design, ennemis jurés ?

4. On le fera en Web2.0, Ajax, #WhatEverYouWant

5. Les internautes ne scrollent pas

6. L’ergo, on verra ça à la fin

*

Mains dans le cambouis : c’est parti,

je fais de l’ergo !

*

Règle #1 :Architecture & Organisation1. Regroupements logiques

2. Mise en avant des contenus clés

3. Menus intuitifs

4. Contenus directifs

5. Hiérarchie optimisée

*

Règle #2 :Cohérence & Conventions

1. Localisations intelligentes

2. Appellations fiables

3. Formats de référence

4. Utilisation des chartes

*

Règle #3 :Information de l’utilisateur

1. Le site informe et prévient

2. Le site répond aux actions de l’utilisateur

*

Règle #4 :Aide & Gestion des erreurs1. Dirigez les actions de l’utilisateur

2. Assistez votre utilisateur

3. Fournissez de l’aide

4. Ne laissez pas la place à l’imprévu

5. Aidez l’utilisateur à comprendre ses erreurs

*

Règle #5 :Rapidité d’accès a l’outil

1. Optimisez les actions

2. Multipliez les points d’entrée

3. Facilitez les interactions

4. DRY : Ne vous répétez pas !

*

Règle #6 :L’internaute aux commandes

1. Respectez les contrôles conventionnels

2. Laissez le choix à l’utilisateur

3. N’allez jamais à l’encontre des habitudes de votre visiteur

*

Ca va ?Pas trop mal aux

cheveux ?

*

/** Pause **/

Si on essayait, maintenant ?

*

Ne tirez pas sur le Graphiste ...

*

Concepts & enjeux

1. Respect de l’identité de l’entreprise

2. Respect des contraintes ergonomiques du prototype

3. Respect de la sémantique du code

*

Un plan, c’est bien,une maison, c’est mieux !

*

Objectifs

1. Concrétiser les éléments ergonomiques

2. Rendre l’outil agréable à utiliser

3. Fidéliser / Monétiser le flux

*

Mes trucs à moiparce qu’en vrai, je suis vachement

sympa comme mec

*

Concevez des Wireframes*

Alla Gouraud • Artagence : Wireframe

Alla Gouraud • Artagence : Rendu final

Architecture des mock-ups

1. Respectez la charte graphique imposée

2. Utilisez des grilles de mise en forme (960gs, blueprint ...)

3. Choisissez correctement votre typo

*

Les PMR*, sur le web comme dans la vie !

*

Accessibilité, un enjeu majeur

1. Faciliter l’accès au plus grand nombre

2. Maintenir un code de qualité pour les évolutions futures

3. Améliorer l’utilisabilité de l’ensemble pour tous les visiteurs

*

Une seule norme pour les gouverner tous :

WCAG*

*

/** Pause **/

Lâchez-vous :Flameware*

La boîte à Outils*

Card-Sorting

1. xSort (Mac)

2. WebSort

3. Optimal Workshop

4. Du papier, des crayons, un polaroïd :)

*

Wireframes

1. Visio (PC)

2. Omnigraffle (Mac)

3. Keynote (Mac)

4. Illustrator (Mac & PC)

5. Photoshop (Mac & PC)

6. Pencil (*)

7. Outils en ligne

*

Mock-Ups

1. Photoshop (Mac & PC)

2. Illustrator (Mac & PC)

3. GIMP (*)

4. Fireworks (Mac & PC)

*

Architecture

1. Frameworks Grid System (960.gs / Blueprint / YUI)

2. Frameworks CSS (YUI, jQuery-UI)

3. Guides typographiques

4. Web Frameworks (SproutCore, Cappuccino)

*

Inspiration1. Inspiration Time

http://inspirationti.me

2. Trends Nowhttp://trendsnow.net/

3. Artskillshttp://www.artskills.net/

4. 365 PSDhttp://365psd.com/

5. Smashing Magazinehttp://smashingmagazine.com

6. Wireframes Magazinehttp://wireframes.linowski.ca/

7. Wireframe Showcasehttp://wireframeshowcase.com

8. Twitter@deaxon / @glazou /@wdfr

*

Add-ons

1. Kuler

2. VMware / Virtualbox

3. Editeur CSS

*

Ressources1. Ergonomie Web • Amélie Boucher • Ed.

Eyrolles

2. Interaction home-machine pour les SI • Christophe Kolski • Ed. Eyrolles

3. Ergonomie Web Illustrée • Amélie Boucher • Ed. Eyrolles

4. Mémento Sites Web : les bonnes pratiques • Elie Sloïm • Ed. Eyrolles

5. iPhone Human Interface Guidelines • Apple Developper portal

6. TUTS+ Network • tutsplus.com

7. Le Typographe • typographe.com

8. Ergolab • ergolab.net

9. Projet OPQUAST • opquast.com • opquast.org

*

slideshare.net/madsgraphics/ergonomie-des-applications-web

Merci ;)