ergonomie et ria, les bonnes pratiques
DESCRIPTION
L'utilisation des RIA (Rich Internet Application) a ouvert de nouvelles possibilités en matière d'expérience utilisateur sur le web. Mais de nouvelles possibilités entraînent de nouveaux risques. Ce guide des bonnes pratiques propose des notions de base à garder en tête lors de la création d'interfaces riches.TRANSCRIPT
![Page 1: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/1.jpg)
ERGONOMIEVS. RIA
RICH INTERNET APPLICATIONS
LES BONNESPRATIQUES
BY @SKWI69
![Page 2: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/2.jpg)
RIA ?WASISDAS ?
![Page 3: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/3.jpg)
INTERNET
BON VIEUX SOFTWARE
![Page 4: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/4.jpg)
INTERACTIF /ASYNCHRONE
DISPONIBLEDE PARTOUT
MULTIMÉDIAMISES À JOUR
CÔTÉ SERVEUR
![Page 5: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/5.jpg)
TECHNOLOGIE/ INNOVATION
EXPÉRIENCEUTILISATEUR
UN MARIAGE A RISQUE !
![Page 6: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/6.jpg)
11IMPLIQUER L’UTILISATEURIMPLIQUER L’UTILISATEUR
![Page 7: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/7.jpg)
FAITES DES MAQUETTES !
« Un bon croquis vaut mieux qu'un long discours »NAPOLEON
![Page 8: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/8.jpg)
PAS D’UTILISATEUR POUR PARTICIPER AUX TEST ERGO ?
![Page 9: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/9.jpg)
PAS D’UTILISATEUR POUR PARTICIPER AUX TEST ERGO ?
SERVEZ VOUS DES PERSONAS !
Clique sur le mot ;)
![Page 10: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/10.jpg)
22TRAVAILLER L’AFFORDANCETRAVAILLER L’AFFORDANCE
![Page 11: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/11.jpg)
CHAQUE ACTION A UNE FORME
Un bouton
Un lien
Une bulle
ÉVOQUE UNE ACTION
ÉVOQUE UNE AUTRE PAGE
ÉVOQUE UN COMPLÉMENT D’INFO
![Page 12: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/12.jpg)
LES UTILISATEURS PASSENT LA PLUPART DE LEUR TEMPS …
![Page 13: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/13.jpg)
LES UTILISATEURS PASSENT LA PLUPART DE LEUR TEMPS …
SUR LES SITES DES AUTRES
![Page 14: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/14.jpg)
33DONNER DU FEEDBACKDONNER DU FEEDBACK
![Page 15: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/15.jpg)
LE TEMPS DE RÉPONSE
0,1 sec
1 sec
10 sec
1 min
MAITRISE DES ACTIONS
CONSCIENCE DE LA MACHINE
SENSATION DE LENTEUR
LIMITE ENTRE ACTIF ET PASSIF
![Page 16: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/16.jpg)
L’UTILISATEUR SAIT QU’IL NE SE TROMPE PAS, IL CHOISI
BIEN L’iPOD ROSE
![Page 17: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/17.jpg)
L’ACTION A ENGENDRÉ UNE RÉACTION, LE MESSAGE INFORME
L’UTILISATEUR.
L’ACTION « UNDO » PERMET DE S’AFFRANCHIR DES MESSAGES DE
CONFIRMATION
![Page 18: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/18.jpg)
44GUIDERGUIDER
![Page 19: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/19.jpg)
OÙ SUIS-JE ?
PERMETTRE À L’UTILISATEUR DE SE RÉPERER SUR LE SITE QU’IL PARCOURS
MISE EN SURBRILLANCE DE LA PAGE DANS LE MENU
PROBLÈME
SOLUTION (EXEMPLE)
![Page 20: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/20.jpg)
D’OÙ VIENS-JE ?
COMPENSER L’ASPECT VOLATILE DE LA MÉMOIRE INSTANTANÉE
GUIDER VIA LES FILS D’ARIANE (BREADCRUMB TRAILS)
PROBLÈME
SOLUTION (EXEMPLE)
![Page 21: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/21.jpg)
OÙ ALLER ?
ACCOMPAGNER L’UTILISATEUR DANS LA DIRECTION QU’IL SOUHAITE
NE PAS NÉGLIGER L’AFFORDANCE
PROBLÈME
SOLUTION
![Page 22: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/22.jpg)
55VISER LA PRODUCTIVITÉVISER LA PRODUCTIVITÉ
![Page 23: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/23.jpg)
CERNER LES OBJECTIFS
PRODUCTIVITÉ
TAUX DE CONVERSION
![Page 24: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/24.jpg)
LES EFFETS RIA DOIVENT RESTER DISCRETS
PRODUCTIVITÉ
TAUX DE CONVERSION
ANIMATIONS
VIDÉOS
TRANSITIONS
DRAG’N’DROPCARTES
3D
TACTILE
AUTOCOMPLÉTION
THEMES
WEBCAM
MULTITOUCH
![Page 25: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/25.jpg)
66RESTER ACCESSIBLERESTER ACCESSIBLE
![Page 26: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/26.jpg)
IDÉE REÇUE
UN SITE UTILISANT LES RIA N’EST PAS
ACCESSIBLE
![Page 27: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/27.jpg)
IDÉE REÇUE
UN SITE UTILISANT LES RIA N’EST PAS
ACCESSIBLEFAUX
![Page 28: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/28.jpg)
ALTERNATIVETECHNIQUE
ALTERNATIVEFONCTIONNELLE
LES TECHNOLOGIES METTENT EN ŒUVRE DES
OUTILS POUR RENDRE LES DÉVELOPPEMENTS PLUS
ACCESSIBLES
ACCESSIBILITÉ=
CONTENU ÉQUIVALENT≠
CONTENU IDENTIQUE
![Page 29: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/29.jpg)
RÉCAPRÉCAPERGONOMIE vs RIA
LES BONNES PRATIQUES
665544332211
RESTER ACCESSIBLERESTER ACCESSIBLE
IMPLIQUER L’UTILISATEURIMPLIQUER L’UTILISATEURTRAVAILLER L’AFFORDANCETRAVAILLER L’AFFORDANCEDONNER DU FEEDBACKDONNER DU FEEDBACKGUIDERGUIDERVISER LA PRODUCTIVITÉVISER LA PRODUCTIVITÉ
![Page 31: Ergonomie et RIA, les bonnes pratiques](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b399b1a28ab113f8b4726/html5/thumbnails/31.jpg)
CRÉDITS :PHOTOS : DEVIANTART/HOLOGRAPHIC SCREEN/13FIREHUNTER13DEVIANTART/WTF…/LILOU1984FLICKR/MAC CLASSIC II/SILENT (E)DEVIANTART/WEDDING RINGS/ANDREWISHYDEVIANTART/THIS BUTTON?/SMOKINDOGFLICKR/EMPTY SEATS/BENSONKUAFLICKR/ANONYMOUS HOLLYWOOD/SCRAGZFLICKR/KFC HEMELHEMPSTEAD/SLIMMER_JIMMERDEVIANTART/CARPAL TUNNEL/CENTERSPLODEFLICKR/KOMBI INSTRUMENT TEST/MROACHFLICKR/VOUS ETES ICI/ALXFLICKR/PLANE/GRANPAPA2006FLICKR/WICH WAY NOW/SLAUPFLICKR/COMPASS ON DECK OF DERELICT FISHING SHIP/MIKEBAIRDFLICKR/PRODUCTIVITY/ORCMIDFLICKR/HANDICAP PARKING/WELS.NETFLICKR/TODO/MNICOLEMFLICKR/THUMBS UP MANNING PARK/DFRTN
SITES : ERGOPHILE / JACINTHE BUSSON
USE IT / JACKOB NIELSONSMASHING MAGAZINE / SMASHING MEDIA GROUP
BUILD INTERNET / SAM & ZACH DUNN
LIVRES :ERGONOMIE WEB / AMÉLIE BOUCHER