Petite approche de l'UX pour les applications à partir de l'ouvrage d'Amélie BOUCHER.

1. UX for Apps !
Virginie COLOMBEL
D'après Amélie BOUCHER,
Expérience Utilisateur Mobile,
Eyrolles

2. Un outil utile et utilisable.

3. Chapitre 1
Une expérience sensorielle

4. 1.Une expérience visuelle.

5. La loi du point focal.

6. Concevoir son
écran de telle
sorte que
l'utilisateur voit
tout de suite ce
qui est
important.

7. C'est une loi de la Gestalt qui nous apprend
que lors de la perception visuelle d'une scène,
notre attention sera naturellement dirigée vers
les éléments saillants de cette scène, ceux qui
se distinguent du reste.

9. Ici, le bouton "commander" agit bien comme
point focal car il est saillant et se démarque
bien des autres éléments de l'écran.

10. L'animation pour
attirer l'oeil : Le
point focal
temporaire
Point trop n'en faut,
bien sûr.

11. Hiérarchiser les contenus.

12. Le flat design.
On rencontre des
interfaces où rien ne
ressort. Tout est au
même plan, au même
niveau graphiquement.
On demande un effort
mental à l'utilisateur.

13. Quelle que soit la
plateforme sur laquelle
vous travaillez, n'hésitez
pas à jouer sur les tailles,
les formes, les couleurs
et les typographies.

14. Prévoir la distraction.
Partez toujours du principe que votre
utilisateur risque d'être distrait pendant son
utilisation.

15. Faciliter la prise d'informations visuelles.
Un écran libéré pour le contenu.

16. L'effet cocktail party.

17. Demandez-vous toujours quand votre
utilisateur a besoin des options de navigation
et à quel moment vous devez le laisser se
concentrer sur le contenu.

18. Présentez les textes pour une
lecture confortable.

19. 1. Morceler le contenu pour le
rendre plus lisible.

20. 2. Contrôler les contrastes
fond/caractères.

21. Vous avez dit
contraste fond/
caractères ?

22. 3.Optimisez la taille des textes.

23. 4. Pensez aux interlignes et aux marges.

24. 2. Une expérience
tactile

25. 1. Faciliter l'interaction tactile.

26. C'est la loi de Fitts.
La loi de Fitts est une fonction logarithmique.
Elle nous enseigne que le temps que l'on met
pour atteindre une cible est proportionnel à la
distance à laquelle elle se trouve mais aussi à
sa taille.

27. En créant des zones actives
suffisamment proches des doigts
et qui tiennent compte des
usages.

28. La manière dont on tient notre téléphone
conditionne de près l'atteignabilité des zones
de l'écran. 75% des usages se font avec le
pouce.

29. Créer des zones actives suffisamment grandes.
On ne parle pas de la taille perçue à l'écran mais de la zone
active. Pensez à les écarter suffisamment.

30. 2. Que puis-je utiliser et comment ?
Une interface tactile réussie permet notamment à l'utilisateur
de repérer sans erreur ce qui est actionnable ou non.

31. La notion d'affordance.
Les affordances sont les possibilités d'action suggérées par les
caractéristiques d'un objet.

32. Des call-to-action affordants grâce
à leur format.

33. Pas bien.

34. Vous pouvez ajouter un élément
pour communiquer l'affordance ∇
ou utiliser les affordances
naturelles.

35. Adaptez les affordances à l'état des call-to-
action.
Tant que je n'ai pas rempli tous les champs, le bouton est
opacifié.

36. Apportez du feedback à l'action utilisateur.
L'interface doit sembler réagir au doigt et à l'oeil.

37. 3. Une expérience gestuelle.
Privilégiez le swip. Mais offrez toujours la
double possibilité.

38. N'hésitez pas à dire.

39. 3.Une expérience
proprioreceptive.

40. Capter, bouger pour commander,
secouer, retourner, faire vibrer..
Uniquement si c'est utile. Notamment pour un
feedback utilisateur.

41. 4. Une expérience
sonore.
Voyons quelques règles à
respecter pour une expérience
sonore de qualité.

42. Une virgule sonore pour le feedback.
Un son léger pour accompagner un changement d'outil par
exemple.
C'est tout.

43. À Retenir
1. Les usages mobiles s'exercent dans des contextes dégradés
: bruyants, mouvants, sollicitant beaucoup d'attention.
L'utilisateur manque de temps et est souvent interrompu.
2. Vous pouvez l'aider à se concentrer en n'affichant que le
strict nécessaire en fonction du moment d'interaction.
Utilisez la loi du point focal et hiérarchisez vos contenus
pour ne pas sur-solliciter ses capacités d'attention partagée.
3. Placez vos éléments à l'écran en tenant compte des zones
de confort liées aux usages.
4. Prévoyez des zones suffisamment grandes allant de 9 à 12
mm.
5. Rendez vos call-to-action affordants.
6. Utilisez les gestes pour libérer de la place à l'écran.
7. N'utilisez les capteurs, le secouement ou les vibrations que
s'ils sont utiles.
8. Préférez les virgules sonores aux sons d'ambiances.

44. Chapitre 2
Contenu et navigation sur mobile.

45. 1. Que mettre dans un service
mobile ?

46. Le mobile force à faire le choix de
la simplicité.

47. La contrainte de l'espace d'écran
disponible vous guidera
naturellement à être plus concis, à
faire de vrais choix.

48. " Less is more" or The paradox of
choice.

49. Il ne suffit pas de faire moins pour
réussir.
"Less isn't more; just enough is more"

50. On peut cacher pour paraître
simple, ainsi la recherche de
simplicité se fait par un travail sur
l'architecture des contenus.

51. 2. Quel type de menu pour quel
contexte?

52. Un menu directement visible
lorsque:
• le menu doit avoir un pouvoir suggestif
• l'utilisateur a un besoin d'efficience fort
• le menu contient peu d'items
• l'utilisateur passe souvent d'une rubrique à
l'autre.

53. Le menu visible permet de fournir un accès en un
tap à des fonctions clés ou de donner l'idée à
l'utilisateur.

54. Pour compenser les défauts du
menu visible, on le fait disparaître
quand l'utilisateur est en phase
d'exploration de la page.

55. Un menu caché lorsque:
• Le menu ne contient rien de stratégique
• Votre écran par défaut couvre déjà la majorité des usages.
• L'utilisateur sait ou se doute que la fonctionnalité existe
• Lorsque les rubriques seront de toutes façons rencontrées
par l'usager dans un flux d'interaction normal
• Lorsque la liste des rubrique est longue.

56. Les techniques dites de
dissimulation vous permettront
d'intégrer des fonctionnalités sans
qu'elles ajoutent trop de bruit
visuel.
Cachez-les sous des menus, des icônes, des
flèches ou encore des gestes.

57. Pour indiquer la présence d'un
menu caché, utilisez un
pictogramme conventionnel.
Associez-lui un libellé ou des notifications.

58. Incitez vos utilisateurs à faire
défiler le contenu en pratiquant le
cut-off design.

59. Utilisez des ancres pour compenser les
manque de visibilité de certains éléments qui
se trouveraient plus bas dans l'écran.

60. Vous pouvez fixer des éléments à l'écran pour
faciliter leur atteignabilité lorsque l'utilisateur
scrolle.

61. Pour faciliter la navigation:
• choisissez bien l'écran sur lequel vous
faites arriver votre utilisateur:
De quoi a-t-il besoin ?
Que voudra-t-il faire le plus fréquemment ?
• Différenciez les contenus visités de ceux
non visités.
• Facilitez la navigation transversale pour
compenser la profondeur des architectures
de l'information mobile : permettez à
l'utilisateur de passer directement entre les
contenus de même niveau.

62. Suite au prochain épisode :
Une expérience émotionnelle