@ 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

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

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

”

http://bit.ly/MRI8ow

Pour LES CURIEUX

HOW TO CDC

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/