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.

1. ERGONOMIE VS. RIA RICH INTERNET APPLICATIONS LES BONNES PRATIQUES BY @SKWI69

2. RIA ? WASISDAS ?

3. INTERNET BON VIEUX SOFTWARE

4. INTERACTIF / ASYNCHRONE DISPONIBLE DE PARTOUT MULTIMÉDIA MISES À JOUR CÔTÉ SERVEUR

5. TECHNOLOGIE / INNOVATION EXPÉRIENCE UTILISATEUR UN MARIAGE A RISQUE !

6. 1 IMPLIQUER L’UTILISATEUR

7. FAITES DES MAQUETTES ! « Un bon croquis vaut mieux qu'un long discours » NAPOLEON

8. PAS D’UTILISATEUR POUR PARTICIPER AUX TEST ERGO ?

9. PAS D’UTILISATEUR POUR PARTICIPER AUX TEST ERGO ? SERVEZ VOUS DES PERSONAS ! Clique sur le mot ;)

10. 2 TRAVAILLER L’AFFORDANCE

11. CHAQUE ACTION A UNE FORME Un bouton Un lien Une bulle ÉVOQUE UNE ACTION ÉVOQUE UNE AUTRE PAGE ÉVOQUE UN COMPLÉMENT D’INFO

12. LES UTILISATEURS PASSENT LA PLUPART DE LEUR TEMPS …

13. LES UTILISATEURS PASSENT LA PLUPART DE LEUR TEMPS … SUR LES SITES DES AUTRES

14. 3 DONNER DU FEEDBACK

15. 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

16. L’UTILISATEUR SAIT QU’ IL NE SE TROMPE PAS , IL CHOISI BIEN L’iPOD ROSE

17. L’ ACTION A ENGENDRÉ UNE RÉACTION , LE MESSAGE INFORME L’UTILISATEUR. L’ACTION « UNDO » PERMET DE S’AFFRANCHIR DES MESSAGES DE CONFIRMATION

18. 4 GUIDER

19. 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)

20. 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)

21. OÙ ALLER ? ACCOMPAGNER L’UTILISATEUR DANS LA DIRECTION QU’IL SOUHAITE NE PAS NÉGLIGER L’AFFORDANCE PROBLÈME SOLUTION

22. 5 VISER LA PRODUCTIVITÉ

23. CERNER LES OBJECTIFS PRODUCTIVITÉ TAUX DE CONVERSION

24. LES EFFETS RIA DOIVENT RESTER DISCRETS PRODUCTIVITÉ TAUX DE CONVERSION ANIMATIONS VIDÉOS TRANSITIONS DRAG’N’DROP CARTES 3D TACTILE AUTOCOMPLÉTION THEMES WEBCAM MULTITOUCH

25. 6 RESTER ACCESSIBLE

26. IDÉE REÇUE UN SITE UTILISANT LES RIA N’EST PAS ACCESSIBLE

27. IDÉE REÇUE UN SITE UTILISANT LES RIA N’EST PAS ACCESSIBLE FAUX

28. ALTERNATIVE TECHNIQUE ALTERNATIVE FONCTIONNELLE LES TECHNOLOGIES METTENT EN ŒUVRE DES OUTILS POUR RENDRE LES DÉVELOPPEMENTS PLUS ACCESSIBLES ACCESSIBILITÉ = CONTENU ÉQUIVALENT ≠ CONTENU IDENTIQUE

29. RÉCAP ERGONOMIE vs RIA LES BONNES PRATIQUES 6 5 4 3 2 1 RESTER ACCESSIBLE IMPLIQUER L’UTILISATEUR TRAVAILLER L’AFFORDANCE DONNER DU FEEDBACK GUIDER VISER LA PRODUCTIVITÉ

30. MERCI ! @SKWI69 BLOG.SPALISTIK.COM

31. CRÉDITS : PHOTOS : DEVIANTART/HOLOGRAPHIC SCREEN/13FIREHUNTER13 DEVIANTART/WTF…/LILOU1984 FLICKR/MAC CLASSIC II/SILENT (E) DEVIANTART/WEDDING RINGS/ANDREWISHY DEVIANTART/THIS BUTTON?/SMOKINDOG FLICKR/EMPTY SEATS/BENSONKUA FLICKR/ANONYMOUS HOLLYWOOD/SCRAGZ FLICKR/KFC HEMELHEMPSTEAD/SLIMMER_JIMMER DEVIANTART/CARPAL TUNNEL/CENTERSPLODE FLICKR/KOMBI INSTRUMENT TEST/MROACH FLICKR/VOUS ETES ICI/ALX FLICKR/PLANE/GRANPAPA2006 FLICKR/WICH WAY NOW/SLAUP FLICKR/COMPASS ON DECK OF DERELICT FISHING SHIP/MIKEBAIRD FLICKR/PRODUCTIVITY/ORCMID FLICKR/HANDICAP PARKING/WELS.NET FLICKR/TODO/MNICOLEM FLICKR/THUMBS UP MANNING PARK/DFRTN SITES : ERGOPHILE / JACINTHE BUSSON USE IT / JACKOB NIELSON SMASHING MAGAZINE / SMASHING MEDIA GROUP BUILD INTERNET / SAM & ZACH DUNN LIVRES : ERGONOMIE WEB / AMÉLIE BOUCHER