Embed Size (px)
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.
Citation preview
ERGONOMIEVS. RIA
RICH INTERNET APPLICATIONS
LES BONNESPRATIQUES
BY @SKWI69
RIA ?WASISDAS ?
INTERNET
BON VIEUX SOFTWARE
INTERACTIF /ASYNCHRONE
DISPONIBLEDE PARTOUT
MULTIMÉDIAMISES À JOUR
CÔTÉ SERVEUR
TECHNOLOGIE/ INNOVATION
EXPÉRIENCEUTILISATEUR
UN MARIAGE A RISQUE !
11IMPLIQUER L’UTILISATEURIMPLIQUER L’UTILISATEUR
FAITES DES MAQUETTES !
« Un bon croquis vaut mieux qu'un long discours »NAPOLEON
PAS D’UTILISATEUR POUR PARTICIPER AUX TEST ERGO ?
PAS D’UTILISATEUR POUR PARTICIPER AUX TEST ERGO ?
SERVEZ VOUS DES PERSONAS !
Clique sur le mot ;)
22TRAVAILLER L’AFFORDANCETRAVAILLER L’AFFORDANCE
CHAQUE ACTION A UNE FORME
Un bouton
Un lien
Une bulle
ÉVOQUE UNE ACTION
ÉVOQUE UNE AUTRE PAGE
ÉVOQUE UN COMPLÉMENT D’INFO
LES UTILISATEURS PASSENT LA PLUPART DE LEUR TEMPS …
LES UTILISATEURS PASSENT LA PLUPART DE LEUR TEMPS …
SUR LES SITES DES AUTRES
33DONNER DU FEEDBACKDONNER DU FEEDBACK
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
L’UTILISATEUR SAIT QU’IL NE SE TROMPE PAS, IL CHOISI
BIEN L’iPOD ROSE
L’ACTION A ENGENDRÉ UNE RÉACTION, LE MESSAGE INFORME
L’UTILISATEUR.
L’ACTION « UNDO » PERMET DE S’AFFRANCHIR DES MESSAGES DE
CONFIRMATION
44GUIDERGUIDER
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)
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)
OÙ ALLER ?
ACCOMPAGNER L’UTILISATEUR DANS LA DIRECTION QU’IL SOUHAITE
NE PAS NÉGLIGER L’AFFORDANCE
PROBLÈME
SOLUTION
55VISER LA PRODUCTIVITÉVISER LA PRODUCTIVITÉ
CERNER LES OBJECTIFS
PRODUCTIVITÉ
TAUX DE CONVERSION
LES EFFETS RIA DOIVENT RESTER DISCRETS
PRODUCTIVITÉ
TAUX DE CONVERSION
ANIMATIONS
VIDÉOS
TRANSITIONS
DRAG’N’DROPCARTES
3D
TACTILE
AUTOCOMPLÉTION
THEMES
WEBCAM
MULTITOUCH
66RESTER ACCESSIBLERESTER ACCESSIBLE
IDÉE REÇUE
UN SITE UTILISANT LES RIA N’EST PAS
ACCESSIBLE
IDÉE REÇUE
UN SITE UTILISANT LES RIA N’EST PAS
ACCESSIBLEFAUX
ALTERNATIVETECHNIQUE
ALTERNATIVEFONCTIONNELLE
LES TECHNOLOGIES METTENT EN ŒUVRE DES
OUTILS POUR RENDRE LES DÉVELOPPEMENTS PLUS
ACCESSIBLES
ACCESSIBILITÉ=
CONTENU ÉQUIVALENT≠
CONTENU IDENTIQUE
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É
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
