ESG - Lesson 5

1 111 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

ESG - Lesson 5

  1. 1. @ OUJAGIR ALBAN How to GESTION DE PROJET
  2. 2. 3. «How to» : Gestion de projet mobile ! - Méthodologie et grandes étapes d’un projet - Conception fonctionnelle, graphique et ergonomique. - Zoom sur la conception fonctionnelle - Zoom sur la conception ergonomique - Site mobile et responsive design - Travaux pratiques : Applications PLaN DE COURS
  3. 3. Conception fonctionnelle, graphique et ergonomique.
  4. 4. 9 règles d’ergonomie de base pour les applications mobiles
  5. 5. 1- Tu privilégieras la lisibilité et la visibilité des informations
  6. 6. 2- Tu créeras une application simple et utilisable
  7. 7. - Tu créeras une application simple et utilisable http://bit.ly/1iHF7Ct
  8. 8. 3- Tu choieras la navigation pour ne pas égarer l’utilisateur
  9. 9. 4- Tu concevras une application que l’utilisateur pourra s’approprier
  10. 10. 5- Tu intégreras les services du mobile
  11. 11. 6- Tu anticiperas le parcours des utilisateurs
  12. 12. 7- Tu mettras à jour régulièrement les contenus
  13. 13. 8- Tu penseras « light »
  14. 14. 9 - Tu accompagneras l’utilisateur
  15. 15. http://inspired-ui.com/http://pttrns.com/
  16. 16. FOCUS : Conception ergonomique / fonctionnelle
  17. 17. A NOTER « L’utilisateur de smartphone est un pouce et un œil » Bruits, mouvements, ensoleillement... l’utilisateur en mobilité est souvent dérangé et ne dispose pas toujours de sa totale liberté de mouvement (paradigme de la double tache).
  18. 18. TIPS 1 VISUEL VISUEL VISUEL VISUEL ESG 1:23 PM●●●●● 100% ⃝ Tab ⃝ Tab ⃝ Tab 2 ● Tab Les liens prennent trop de place. Laissez d’abord vos utilisateurs lire, regarder, écouter. Ils approfondiront s’ils le souhaitent. ! Pousser immédiatement les contenus chauds, et laisser les liens et options de navigation accessibles à la demande.
  19. 19. TIPS 2 1:23 PM●●●●● 100% ⃝ Tab ⃝ Tab ⃝ Tab 2 ● Tab ESG 1:23 PM●●●●● 100% ⃝ Tab ⃝ Tab ⃝ Tab 2 ● Tab ESG LINK 1 LINK 2 LINK 3 LINK 4 LINK 5 Privilégiez les barres de navigation de type burger car elles occupent moins de place que des menus déroulants. ! Un accès à l’ensemble des catégories / rubriques depuis toutes les pages n’est pas utile.
  20. 20. TIPS 3 1:23 PM●●●●● 100% Search Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Read more Nullam id dolor id nibh ultricies vehicula. 12/04/2014 SOCIAL SHARING A lire aussi : VISUEL VISUEL Facilitez les poursuites de lecture là où elles sont pertinentes (dans leur contexte), via des liens intelligemment placés après le contenu. ! Laisser toujours le choix à l’utilisateur de poursuivre ou d’interrompre sa lecture.
  21. 21. CHOISIR LES BONS GESTES Les smartphones sont caractérisés par leurs interfaces tactiles. Cette manière d’interagir est certes très intuitive, mais elle reste nouvelle pour le grand public. De nombreux types de gestes existent et peuvent encore être inventés ; mais l’ergonomie ayant pour vocation de simplifier et fluidifier l’usage, il faut les utiliser à bon escient.
  22. 22. CHOISIR LES BONS GESTES! Les utilisateurs d’aujourd’hui ne connaissent pas encore toutes les subtilités possibles et aucune norme universelle ne s’est encore installée comme par exemple: - Le clic droit de la souris pour accéder à des options avancées - La croix qui indique la fonction de fermeture d’une fenêtre ! Touch Gesture Reference Guide » http:// www.lukew.com Tap Press Double tap Drag Flick Pinch Spread Rotate OR OR OR Press and drag
  23. 23. Gérer l’absence de pointeur Pas de pointeur = pas de survol (roll-over) Les interactions disponibles via le survol dans les sites classiques doivent être totalement repensées sur le smartphone et sur les tablettes:
  24. 24. Gérer l’absence de pointeur Quelques approches: 
 • Afficher directement les contenus dans l’écran car ces contenus sont jugés bien trop importants pour l’utilisateur. 
 • Les insérer dans l’écran par un geste (tap, press, flick) permet de conserver leur affichage contextuel au coté des contenus de l’écran (le plus simple étant généralement d’autoriser un tap pour activer l’effet du roll-over). 
 • Les afficher sur un écran séparé car la quantité de contenu est trop importante et ces contenus ne peuvent pas être tronqués • Ne rien faire car les contenus sont secondaires et que l’utilisateur peut aisément s’en passer. ! En règle générale: sur un site grand-public, l’utilisateur doit pouvoir se passer de l’interaction de survol à moins de n’avoir développé une version dédiée aux tablettes. Cette remarque est d’autant plus importante pour les sites de e-commerce!
  25. 25. • Ne garder que ce qui est essentiel et supprimer le reste
 • Présentation en ligne par ligne avec le label au dessus - ou dans le champ de saisie • Pré-formater la saisie selon le type de donnée attendue (alphabétique, numérique, email, url, ...) et le nombre de caractères (année, numéro de téléphone, ...) fera gagner beaucoup de temps à vos utilisateurs. • Utiliser les claviers adaptés en donnant accès directement aux caractères utiles tels que @ • Utiliser des masques de saisie pour guider l’utilisateur sur les données attendues • Utiliser des valeurs par défaut lorsque cela a du sens et répond à la majorité des cas d’utilisation. (ex : Voyages-SNCF). • Exploiter les capacités des smartphones : géolocalisation, caméra, microphone Malgré les innovations sur les claviers, la reconnaissance d’écriture ou autre technologie, la saisie sur Smartphone reste délicate et doit donc être simplifiée. SAISIE DES DONNées 8 TUV 7 PQRS 9 WXYZ 5 JKL 6 MNO 4 GHI 3 DEF 2 ABC 1 0 1 2 3 4 5 6 7 8 9 0 - / : ; ( ) $ & @ . , ? ! ’#+= spaceABC return ”
  26. 26. http://bit.ly/MRI8ow Pour LES CURIEUX HOW TO CDC
  27. 27. A VOUS DE JOUEr
  28. 28. 1 pitch + 2/3 écrans
  29. 29. http://bit.ly/1jaX2RD http://bit.ly/JPTvfb OmniGraffle A VOUS DE JOUEr How TO How TO DL DL http://www.omnigroup.com/omnigraffle http://www.axure.com/

×