Ergonomie dans les   applications poursmartphones et tablettes           1   Djavan Bertrand - Phonitive - Ergonomie
Plan• Concepts     généraux de l’ergonomie mobile• Concevoir    son application• Interfaces   réussies• Quelques     outil...
Définition de l’ergonomie• Expérience   utilisateur• Réactivité• Design        Ces trois points sont indissociables !      ...
Mauvais exemples                             Aubert                             App identique                             ...
Mauvais exemples       5 TMUG | Djavan Bertrand - Phonitive - Ergonomie
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   ...
Respect des règles•A   chaque plateforme correspondent des règles •   Bouton back inutile sur Android •   Barre de navigat...
Réutilisation• Utiliser         les composants fournis ou conseillés par la plateforme• Instaurer   une unité dans l’appli...
Hiérarchisation•3   niveaux : •   Important : central, très visible •   Normal : assez visible •   Support : peu visible, ...
Contextiser• L’utilisateur          doit avoir assez de contexte pour comprendre ce qui va se passer                      ...
Lien avec le marketing• Uneappli ergonomique est une appli utilisée, appréciée et bien notée• In-App   Purchase : incite l...
Tests utilisateurs• Détecter    les erreurs au plus tôt• Voir   l’appli au travers d’un oeil non habitué                  ...
Concevoir une interface        extensible• Smartphone           Tablette         ≠ x2• Gérer   des ressources optimisées  ...
Concevoir une interface        extensible• Composerlécran tablettes par des écrans smartphones• Compartimenter    l’écran•...
Exemple d’interfaces     réussies         15 TMUG | Djavan Bertrand - Phonitive - Ergonomie
Exemples Android• Plume• Youtube                 16 TMUG | Djavan Bertrand - Phonitive - Ergonomie
17 TMUG | Djavan Bertrand - Phonitive - Ergonomie
18 TMUG | Djavan Bertrand - Phonitive - Ergonomie
19 TMUG | Djavan Bertrand - Phonitive - Ergonomie
Quelques outils• Les   Storyboards (IOS)• Les   Fragments (Android)                            20 TMUG | Djavan Bertrand -...
Merci pour votre attention.   Place aux questions...             21 TMUG | Djavan Bertrand - Phonitive - Ergonomie
Prochain SlideShare
Chargement dans…5
×

Ergonomie smartphones et tablettes par Phonitive

4 308 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 308
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 065
Actions
Partages
0
Téléchargements
60
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Ergonomie smartphones et tablettes par Phonitive

    1. 1. Ergonomie dans les applications poursmartphones et tablettes 1 Djavan Bertrand - Phonitive - Ergonomie
    2. 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. 3. Définition de l’ergonomie• Expérience utilisateur• Réactivité• Design Ces trois points sont indissociables ! 3 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    4. 4. Mauvais exemples Aubert App identique smartphone/tablette 4 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    5. 5. Mauvais exemples 5 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    6. 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. 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. 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. 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. 10. Contextiser• L’utilisateur doit avoir assez de contexte pour comprendre ce qui va se passer 10 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    11. 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. 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. 13. Concevoir une interface extensible• Smartphone Tablette ≠ x2• Gérer des ressources optimisées 13 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    14. 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. 15. Exemple d’interfaces réussies 15 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    16. 16. Exemples Android• Plume• Youtube 16 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    17. 17. 17 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    18. 18. 18 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    19. 19. 19 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    20. 20. Quelques outils• Les Storyboards (IOS)• Les Fragments (Android) 20 TMUG | Djavan Bertrand - Phonitive - Ergonomie
    21. 21. Merci pour votre attention. Place aux questions... 21 TMUG | Djavan Bertrand - Phonitive - Ergonomie

    ×