ESG - Lesson 5

Download ESG - Lesson 5

Post on 10-Jul-2015

749 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>@ OUJAGIR ALBAN</p><p>How to GESTION DE PROJET</p></li><li><p>3. How to : Gestion de projet mobile !</p><p>- Mthodologie et grandes tapes dun projet - Conception fonctionnelle, graphique et ergonomique. - Zoom sur la conception fonctionnelle - Zoom sur la conception ergonomique - Site mobile et responsive design - Travaux pratiques : Applications </p><p>PLaN DE COURS</p></li><li><p>Conception fonctionnelle, graphique et ergonomique.</p></li><li><p>9 rgles dergonomie de base pour les applications mobiles</p></li><li><p>1- Tu privilgieras la lisibilit et la visibilit des informations</p></li><li><p>2- Tu creras une application simple et utilisable</p></li><li><p> - Tu creras une application simple et utilisablehttp://bit.ly/1iHF7Ct</p></li><li><p>3- Tu choieras la navigation pour ne pas garer lutilisateur</p></li><li><p>4- Tu concevras une application que lutilisateur pourra sapproprier</p></li><li><p>5- Tu intgreras les services du mobile</p></li><li><p>6- Tu anticiperas le parcours des utilisateurs</p></li><li><p>7- Tu mettras jour rgulirement les contenus</p></li><li><p>8- Tu penseras light </p></li><li><p>9 - Tu accompagneras lutilisateur</p></li><li><p>http://inspired-ui.com/http://pttrns.com/</p></li><li><p>FOCUS : Conception ergonomique / fonctionnelle</p></li><li><p>A NOTER</p><p> Lutilisateur de smartphone est un pouce et un il Bruits, mouvements, ensoleillement... lutilisateur en mobilit est souvent drang et ne dispose pas toujours de sa totale libert de mouvement (paradigme de la double tache). </p></li><li><p>TIPS 1</p><p>VISUEL</p><p>VISUEL VISUEL</p><p>VISUEL</p><p>ESG1:23 PM 100%</p><p>Tab</p><p>Tab</p><p>Tab</p><p>2Tab</p><p>Les liens prennent trop de place. Laissez dabord vos utilisateurs lire, regarder, couter. </p><p>Ils approfondiront sils le souhaitent. !</p><p>Pousser immdiatement les contenus chauds, et laisser les liens et options de navigation accessibles la demande.</p></li><li><p>TIPS 21:23 PM 100%</p><p>Tab</p><p>Tab</p><p>Tab</p><p>2Tab</p><p>ESG</p><p>1:23 PM 100%</p><p>Tab</p><p>Tab</p><p>Tab</p><p>2Tab</p><p>ESG</p><p>LINK 1LINK 2LINK 3LINK 4LINK 5</p><p>Privilgiez les barres de navigation de type burger car elles occupent moins de place que des menus droulants. !</p><p>Un accs lensemble des catgories / rubriques depuis toutes les pages nest pas utile. </p></li><li><p>TIPS 3 1:23 PM 100%Search</p><p>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</p><p>Nullam id dolor id nibh ultricies vehicula.12/04/2014</p><p>SOCIAL SHARING</p><p>A lire aussi : </p><p>VISUEL VISUEL</p><p>Facilitez les poursuites de lecture l o elles sont pertinentes (dans leur contexte), via des liens intelligemment placs aprs le contenu. !</p><p>Laisser toujours le choix lutilisateur de poursuivre ou dinterrompre sa lecture.</p></li><li><p>CHOISIR LES BONS GESTES</p><p>Les smartphones sont caractriss par leurs interfaces tactiles. Cette manire dinteragir est certes trs intuitive, mais elle reste nouvelle pour le grand public. De nombreux types de gestes existent et peuvent </p><p>encore tre invents ; mais lergonomie ayant pour vocation de simplifier et fluidifier lusage, il faut les utiliser bon escient.</p></li><li><p>CHOISIR LES BONS GESTES!</p><p>Les utilisateurs daujourdhui ne connaissent pas encore toutes les subtilits possibles et aucune norme universelle ne sest encore installe comme par exemple: - Le clic droit de la souris pour accder des options avances </p><p>- La croix qui indique la fonction de fermeture dune fentre</p><p>!</p><p>Touch Gesture Reference Guide http://www.lukew.com</p><p>Tap Press Double tap</p><p>Drag Flick</p><p>Pinch SpreadRotate</p><p>OR OR OR</p><p>Press and drag</p></li><li><p>Grer labsence de pointeur</p><p>Pas de pointeur = pas de survol (roll-over) Les interactions disponibles via le survol dans les sites classiques doivent tre totalement repenses sur le smartphone et sur les tablettes:</p></li><li><p>Grer labsence de pointeurQuelques approches: Afficher directement les contenus dans lcran car ces contenus sont jugs bien trop importants pour lutilisateur. Les insrer dans lcran par un geste (tap, press, flick) permet de conserver leur affichage contextuel au cot des contenus de lcran (le plus simple tant gnralement dautoriser un tap pour activer leffet du roll-over). Les afficher sur un cran spar car la quantit de contenu est trop importante et ces contenus ne peuvent pas tre tronqus Ne rien faire car les contenus sont secondaires et que lutilisateur peut aisment sen passer.!</p><p>En rgle gnrale: sur un site grand-public, lutilisateur doit pouvoir se passer de linteraction de survol moins de navoir dvelopp une version ddie aux tablettes. Cette remarque est dautant plus importante pour les sites de e-commerce!</p></li><li><p> Ne garder que ce qui est essentiel et supprimer le reste Prsentation en ligne par ligne avec le label au dessus - ou dans le champ</p><p>de saisie</p><p> Pr-formater la saisie selon le type de donne attendue (alphabtique, numrique, email, url, ...) et le nombre de caractres (anne, numro de tlphone, ...) fera gagner beaucoup de temps vos utilisateurs.</p><p> Utiliser les claviers adapts en donnant accs directement aux caractres utiles tels que @</p><p> Utiliser des masques de saisie pour guider lutilisateur sur les donnes attendues</p><p> Utiliser des valeurs par dfaut lorsque cela a du sens et rpond la majorit des cas dutilisation. (ex : Voyages-SNCF).</p><p> Exploiter les capacits des smartphones : golocalisation, camra, microphone</p><p>Malgr les innovations sur les claviers, la reconnaissance dcriture ou autre technologie, la saisie sur Smartphone reste dlicate et doit donc tre simplifie.</p><p>SAISIE DES DONNes</p><p>8TUV</p><p>7PQRS</p><p>9WXYZ</p><p>5JKL</p><p>6MNO</p><p>4GHI</p><p>3DEF</p><p>2ABC</p><p>1 </p><p>0</p><p>1 2 3 4 5 6 7 8 9 0</p><p>- / : ; ( ) $ &amp; @</p><p>. , ? ! #+=</p><p>spaceABC return</p></li><li><p>http://bit.ly/MRI8ow</p><p>Pour LES CURIEUX</p><p>HOW TO CDC </p></li><li><p>A VOUS DE JOUEr</p></li><li><p>1 pitch + 2/3 crans</p></li><li><p>http://bit.ly/1jaX2RD http://bit.ly/JPTvfb</p><p>OmniGrae</p><p>A VOUS DE JOUEr</p><p>How TO How TO</p><p>DL DL</p><p>http://www.omnigroup.com/omnigraffle http://www.axure.com/</p></li></ul>