1. @ OUJAGIR ALBAN
How to
GESTION
DE
PROJET

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. Conception fonctionnelle, graphique et ergonomique.

4. 9 règles d’ergonomie de base
pour les applications mobiles

5. 1- Tu privilégieras la lisibilité et la visibilité des informations

6. 2- Tu créeras une application simple et utilisable

7. - Tu créeras une application simple et utilisable
http://bit.ly/1iHF7Ct

8. 3- Tu choieras la navigation pour ne pas égarer l’utilisateur

9. 4- Tu concevras une application que l’utilisateur pourra s’approprier

10. 5- Tu intégreras les services du mobile

11. 6- Tu anticiperas le parcours des utilisateurs

12. 7- Tu mettras à jour régulièrement les contenus

13. 8- Tu penseras « light »

14. 9 - Tu accompagneras l’utilisateur

15. http://inspired-ui.com/http://pttrns.com/

16. FOCUS : Conception ergonomique / fonctionnelle

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. 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. 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. 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. 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. 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. 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. 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. • 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. http://bit.ly/MRI8ow
Pour LES CURIEUX
HOW TO CDC

27. A VOUS DE JOUEr

28. 1 pitch
+ 2/3 écrans

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/