Djavan Bertrand nous a présenté tous les conseils de Phonitive pour la conception d'une application pour smartphones et tablettes ergonomique. Vous découvrirez ou approfondirez : - Le conception d'ergonomie, qu'est ce que c'est ? - Quelques mauvais exemples - Des conseils d'ergonomie généraux - Des conseils d'ergonomie spécifiques à la conception d'une application tablette - Quelques exemples très réussi - Des outils spécifiques à Android et iOS pour mettre en place ces conseils

1. Ergonomie dans les
applications pour
smartphones et tablettes
1 Djavan Bertrand - Phonitive - Ergonomie

2. Plan
• Concepts généraux de l’ergonomie mobile
• Concevoir son application
• Interfaces réussies
• Quelques outils
2 TMUG | Djavan Bertrand - Phonitive - Ergonomie

3. Définition de l’ergonomie
• Expérience utilisateur
• Réactivité
• Design
Ces trois points sont indissociables !
3 TMUG | Djavan Bertrand - Phonitive - Ergonomie

4. Mauvais exemples
Aubert
App identique
smartphone/tablette
4 TMUG | Djavan Bertrand - Phonitive - Ergonomie

5. Mauvais exemples
5 TMUG | Djavan Bertrand - Phonitive - Ergonomie

6. Le doigt
• L’unité de référence
• Pas une unité en pixel, plutôt en taille
• Pas les mêmes gestes qu’une souris
• Pas la même précision qu’un stylet
6 TMUG | Djavan Bertrand - Phonitive - Ergonomie

7. Respect des règles
•A chaque plateforme correspondent des règles
• Bouton back inutile sur Android
• Barre de navigation en haut sur IOS
• Des aides sont mises en place pour chaque
plateforme
• http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/
Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/
uid/TP40006556-CH20-SW1
• http://developer.android.com/design/get-started/principles.html
7 TMUG | Djavan Bertrand - Phonitive - Ergonomie

8. Réutilisation
• Utiliser
les composants fournis ou conseillés par la
plateforme
• Instaurer une unité dans l’application
8 TMUG | Djavan Bertrand - Phonitive - Ergonomie

9. Hiérarchisation
•3 niveaux :
• Important : central, très visible
• Normal : assez visible
• Support : peu visible, voir même caché
A chaque niveau correspondent une place et une
importance en terme de visibilité
9 TMUG | Djavan Bertrand - Phonitive - Ergonomie

10. Contextiser
• L’utilisateur
doit avoir assez de contexte pour
comprendre ce qui va se passer
10 TMUG | Djavan Bertrand - Phonitive - Ergonomie

11. Lien avec le marketing
• Uneappli ergonomique est une appli utilisée,
appréciée et bien notée
• In-App Purchase : incite l’utilisateur à acheter
11 TMUG | Djavan Bertrand - Phonitive - Ergonomie

12. Tests utilisateurs
• Détecter les erreurs au plus tôt
• Voir l’appli au travers d’un oeil non habitué
12 TMUG | Djavan Bertrand - Phonitive - Ergonomie

13. Concevoir une interface
extensible
• Smartphone Tablette ≠ x2
• Gérer des ressources optimisées
13 TMUG | Djavan Bertrand - Phonitive - Ergonomie

14. Concevoir une interface
extensible
• Composerl'écran tablettes par des écrans
smartphones
• Compartimenter l’écran
• Afficher des informations complémentaires
14 TMUG | Djavan Bertrand - Phonitive - Ergonomie

15. Exemple d’interfaces
réussies
15 TMUG | Djavan Bertrand - Phonitive - Ergonomie

16. Exemples Android
• Plume
• Youtube
16 TMUG | Djavan Bertrand - Phonitive - Ergonomie

17. 17 TMUG | Djavan Bertrand - Phonitive - Ergonomie

18. 18 TMUG | Djavan Bertrand - Phonitive - Ergonomie

19. 19 TMUG | Djavan Bertrand - Phonitive - Ergonomie

20. Quelques outils
• Les Storyboards (IOS)
• Les Fragments (Android)
20 TMUG | Djavan Bertrand - Phonitive - Ergonomie

21. Merci pour votre attention.
Place aux questions...
21 TMUG | Djavan Bertrand - Phonitive - Ergonomie