@ OUJAGIR ALBAN
How to GESTION DE PROJET
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
Conception fonctionnelle, graphique et ergonomique.
9 règles d’ergonomie de base pour les applications mobiles
1- Tu privilégieras la lisibilité et la visibilité des informations
2- Tu créeras une application simple et utilisable
- Tu créeras une application simple et utilisablehttp://bit.ly/1iHF7Ct
3- Tu choieras la navigation pour ne pas égarer l’utilisateur
4- Tu concevras une application que l’utilisateur pourra s’approprier
5- Tu intégreras les services du mobile
6- Tu anticiperas le parcours des utilisateurs
7- Tu mettras à jour régulièrement les contenus
8- Tu penseras « light »
9 - Tu accompagneras l’utilisateur
FOCUS : Conception ergonomique / fonctionnelle
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).
TIPS 1
VISUEL
VISUEL VISUEL
VISUEL
ESG1: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.
TIPS 21: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.
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.
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.
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 SpreadRotate
OR OR OR
Press and drag
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:
Gérer l’absence de pointeurQuelques 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!
• 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
8TUV
7PQRS
9WXYZ
5JKL
6MNO
4GHI
3DEF
2ABC
1
0
1 2 3 4 5 6 7 8 9 0
- / : ; ( ) $ & @
. , ? ! ’#+=
spaceABC return
”
A VOUS DE JOUEr
1 pitch + 2/3 écrans
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/
Top Related