SlideShare une entreprise Scribd logo
UX for Apps !
Virginie COLOMBEL
D'après Amélie BOUCHER,
Expérience Utilisateur Mobile,
Eyrolles
Un outil utile et utilisable.
Chapitre 1
Une expérience sensorielle
1.Une expérience visuelle.
La loi du point focal.
Concevoir son
écran de telle
sorte que
l'utilisateur voit
tout de suite ce
qui est
important.
C'est une loi de la Gestalt qui nous apprend
que lors de la perception visuelle d'une scène,
notre attention sera naturellement dirigée vers
les éléments saillants de cette scène, ceux qui
se distinguent du reste.
Ici, le bouton "commander" agit bien comme
point focal car il est saillant et se démarque
bien des autres éléments de l'écran.
L'animation pour
attirer l'oeil : Le
point focal
temporaire
Point trop n'en faut,
bien sûr.
Hiérarchiser les contenus.
Le flat design.
On rencontre des
interfaces où rien ne
ressort. Tout est au
même plan, au même
niveau graphiquement.
On demande un effort
mental à l'utilisateur.
Quelle que soit la
plateforme sur laquelle
vous travaillez, n'hésitez
pas à jouer sur les tailles,
les formes, les couleurs
et les typographies.
Prévoir la distraction.
Partez toujours du principe que votre
utilisateur risque d'être distrait pendant son
utilisation.
Faciliter la prise d'informations visuelles.
Un écran libéré pour le contenu.
L'effet cocktail party.
Demandez-vous toujours quand votre
utilisateur a besoin des options de navigation
et à quel moment vous devez le laisser se
concentrer sur le contenu.
Présentez les textes pour une
lecture confortable.
1. Morceler le contenu pour le
rendre plus lisible.
2. Contrôler les contrastes
fond/caractères.
Vous avez dit
contraste fond/
caractères ?
3.Optimisez la taille des textes.
4. Pensez aux interlignes et aux marges.
2. Une expérience
tactile
1. Faciliter l'interaction tactile.
C'est la loi de Fitts.
La loi de Fitts est une fonction logarithmique.
Elle nous enseigne que le temps que l'on met
pour atteindre une cible est proportionnel à la
distance à laquelle elle se trouve mais aussi à
sa taille.
En créant des zones actives
suffisamment proches des doigts
et qui tiennent compte des
usages.
La manière dont on tient notre téléphone
conditionne de près l'atteignabilité des zones
de l'écran. 75% des usages se font avec le
pouce.
Créer des zones actives suffisamment grandes.
On ne parle pas de la taille perçue à l'écran mais de la zone
active. Pensez à les écarter suffisamment.
2. Que puis-je utiliser et comment ?
Une interface tactile réussie permet notamment à l'utilisateur
de repérer sans erreur ce qui est actionnable ou non.
La notion d'affordance.
Les affordances sont les possibilités d'action suggérées par les
caractéristiques d'un objet.
Des call-to-action affordants grâce
à leur format.
Pas bien.
Vous pouvez ajouter un élément
pour communiquer l'affordance ∇
ou utiliser les affordances
naturelles.
Adaptez les affordances à l'état des call-to-
action.
Tant que je n'ai pas rempli tous les champs, le bouton est
opacifié.
Apportez du feedback à l'action utilisateur.
L'interface doit sembler réagir au doigt et à l'oeil.
3. Une expérience gestuelle.
Privilégiez le swip. Mais offrez toujours la
double possibilité.
N'hésitez pas à dire.
3.Une expérience
proprioreceptive.
Capter, bouger pour commander,
secouer, retourner, faire vibrer..
Uniquement si c'est utile. Notamment pour un
feedback utilisateur.
4. Une expérience
sonore.
Voyons quelques règles à
respecter pour une expérience
sonore de qualité.
Une virgule sonore pour le feedback.
Un son léger pour accompagner un changement d'outil par
exemple.
C'est tout.
À Retenir
1. Les usages mobiles s'exercent dans des contextes dégradés
: bruyants, mouvants, sollicitant beaucoup d'attention.
L'utilisateur manque de temps et est souvent interrompu.
2. Vous pouvez l'aider à se concentrer en n'affichant que le
strict nécessaire en fonction du moment d'interaction.
Utilisez la loi du point focal et hiérarchisez vos contenus
pour ne pas sur-solliciter ses capacités d'attention partagée.
3. Placez vos éléments à l'écran en tenant compte des zones
de confort liées aux usages.
4. Prévoyez des zones suffisamment grandes allant de 9 à 12
mm.
5. Rendez vos call-to-action affordants.
6. Utilisez les gestes pour libérer de la place à l'écran.
7. N'utilisez les capteurs, le secouement ou les vibrations que
s'ils sont utiles.
8. Préférez les virgules sonores aux sons d'ambiances.
Chapitre 2
Contenu et navigation sur mobile.
1. Que mettre dans un service
mobile ?
Le mobile force à faire le choix de
la simplicité.
La contrainte de l'espace d'écran
disponible vous guidera
naturellement à être plus concis, à
faire de vrais choix.
" Less is more" or The paradox of
choice.
Il ne suffit pas de faire moins pour
réussir.
"Less isn't more; just enough is more"
On peut cacher pour paraître
simple, ainsi la recherche de
simplicité se fait par un travail sur
l'architecture des contenus.
2. Quel type de menu pour quel
contexte?
Un menu directement visible
lorsque:
• le menu doit avoir un pouvoir suggestif
• l'utilisateur a un besoin d'efficience fort
• le menu contient peu d'items
• l'utilisateur passe souvent d'une rubrique à
l'autre.
Le menu visible permet de fournir un accès en un
tap à des fonctions clés ou de donner l'idée à
l'utilisateur.
Pour compenser les défauts du
menu visible, on le fait disparaître
quand l'utilisateur est en phase
d'exploration de la page.
Un menu caché lorsque:
• Le menu ne contient rien de stratégique
• Votre écran par défaut couvre déjà la majorité des usages.
• L'utilisateur sait ou se doute que la fonctionnalité existe
• Lorsque les rubriques seront de toutes façons rencontrées
par l'usager dans un flux d'interaction normal
• Lorsque la liste des rubrique est longue.
Les techniques dites de
dissimulation vous permettront
d'intégrer des fonctionnalités sans
qu'elles ajoutent trop de bruit
visuel.
Cachez-les sous des menus, des icônes, des
flèches ou encore des gestes.
Pour indiquer la présence d'un
menu caché, utilisez un
pictogramme conventionnel.
Associez-lui un libellé ou des notifications.
Incitez vos utilisateurs à faire
défiler le contenu en pratiquant le
cut-off design.
Utilisez des ancres pour compenser les
manque de visibilité de certains éléments qui
se trouveraient plus bas dans l'écran.
Vous pouvez fixer des éléments à l'écran pour
faciliter leur atteignabilité lorsque l'utilisateur
scrolle.
Pour faciliter la navigation:
• choisissez bien l'écran sur lequel vous
faites arriver votre utilisateur:
De quoi a-t-il besoin ?
Que voudra-t-il faire le plus fréquemment ?
• Différenciez les contenus visités de ceux
non visités.
• Facilitez la navigation transversale pour
compenser la profondeur des architectures
de l'information mobile : permettez à
l'utilisateur de passer directement entre les
contenus de même niveau.
Suite au prochain épisode :
Une expérience émotionnelle

Contenu connexe

Similaire à Initiation à l'UX design pour applications

Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...CARA_Lyon
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXNewflux UX/UI News
 
La conception d'interfaces narratives
La conception d'interfaces narrativesLa conception d'interfaces narratives
La conception d'interfaces narrativesBenjamin Hoguet
 
Petit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la data
Petit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la dataPetit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la data
Petit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la dataAlexandra Deutsch
 
Applications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-boardApplications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-boardMicrosoft
 
Ergonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenErgonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenElodieDescharmes
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Six étapes pour clarifier votre concept d’application mobile
Six étapes pour clarifier votre concept d’application mobileSix étapes pour clarifier votre concept d’application mobile
Six étapes pour clarifier votre concept d’application mobileMarginWeb
 
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1 ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1 Alban Oujagir
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Usabilis
 
L'UX Design dans les nouvelles technologies - Alexia Buclet
L'UX Design dans les nouvelles technologies - Alexia BucletL'UX Design dans les nouvelles technologies - Alexia Buclet
L'UX Design dans les nouvelles technologies - Alexia BucletAlexia Buclet
 
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA. 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.shirkaLAB
 
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Amelie Boucher
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014Loic Nunez
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCOMPETITIC
 
L'utilisabilité d'un site web
L'utilisabilité d'un site webL'utilisabilité d'un site web
L'utilisabilité d'un site webFrédéric Dufour
 
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...Olivier Destrebecq
 

Similaire à Initiation à l'UX design pour applications (20)

Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
 
La conception d'interfaces narratives
La conception d'interfaces narrativesLa conception d'interfaces narratives
La conception d'interfaces narratives
 
Petit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la data
Petit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la dataPetit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la data
Petit déjeuner digital 20171109 - Optimisez UX et ROI grâce à la data
 
Applications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-boardApplications tactiles : Design en mode maquette papier et story-board
Applications tactiles : Design en mode maquette papier et story-board
 
Ergonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenErgonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de Nielsen
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Six étapes pour clarifier votre concept d’application mobile
Six étapes pour clarifier votre concept d’application mobileSix étapes pour clarifier votre concept d’application mobile
Six étapes pour clarifier votre concept d’application mobile
 
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1 ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
 
L'UX Design dans les nouvelles technologies - Alexia Buclet
L'UX Design dans les nouvelles technologies - Alexia BucletL'UX Design dans les nouvelles technologies - Alexia Buclet
L'UX Design dans les nouvelles technologies - Alexia Buclet
 
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA. 5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
5 CONSEILS POUR RÉUSSIR VOTRE APPLICATION VOCALE SUR GOOGLE ASSISTANT & ALEXA.
 
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clients
 
L'utilisabilité d'un site web
L'utilisabilité d'un site webL'utilisabilité d'un site web
L'utilisabilité d'un site web
 
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
 

Plus de Virginie Colombel

Communication : La communication interpersonnelle
Communication : La communication interpersonnelleCommunication : La communication interpersonnelle
Communication : La communication interpersonnelleVirginie Colombel
 
Introduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMIIntroduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMIVirginie Colombel
 
Utiliser les réseaux sociaux pour trouver un emploi
Utiliser les réseaux sociaux pour trouver un emploiUtiliser les réseaux sociaux pour trouver un emploi
Utiliser les réseaux sociaux pour trouver un emploiVirginie Colombel
 
Comment se préparer pour répondre à un appel d'offre
Comment se préparer pour répondre à un appel d'offreComment se préparer pour répondre à un appel d'offre
Comment se préparer pour répondre à un appel d'offreVirginie Colombel
 
Le mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERY
Le mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERYLe mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERY
Le mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERYVirginie Colombel
 
Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...
Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...
Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...Virginie Colombel
 
Infographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERY
Infographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERYInfographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERY
Infographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERYVirginie Colombel
 
Infographie réalisée par Carine lucas - MMI IUT de CHAMBERY
Infographie réalisée par Carine lucas - MMI IUT de CHAMBERYInfographie réalisée par Carine lucas - MMI IUT de CHAMBERY
Infographie réalisée par Carine lucas - MMI IUT de CHAMBERYVirginie Colombel
 
Infographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERY
Infographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERYInfographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERY
Infographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERYVirginie Colombel
 
Infographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de CHAMBERY
Infographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de  CHAMBERYInfographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de  CHAMBERY
Infographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de CHAMBERYVirginie Colombel
 
Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...
Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...
Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...Virginie Colombel
 
Infographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERY
Infographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERYInfographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERY
Infographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERYVirginie Colombel
 
Ecrire pour le Web : L'image
Ecrire pour le Web : L'imageEcrire pour le Web : L'image
Ecrire pour le Web : L'imageVirginie Colombel
 
Infographie réalisée par Marjolaine GAL
Infographie réalisée par Marjolaine GALInfographie réalisée par Marjolaine GAL
Infographie réalisée par Marjolaine GALVirginie Colombel
 
Infographie réalisée par Jérémy MINIE
Infographie réalisée par Jérémy MINIEInfographie réalisée par Jérémy MINIE
Infographie réalisée par Jérémy MINIEVirginie Colombel
 
Infographie " Paris Insolite " réalisée par Bastien TAUGIS
Infographie " Paris Insolite " réalisée par Bastien TAUGISInfographie " Paris Insolite " réalisée par Bastien TAUGIS
Infographie " Paris Insolite " réalisée par Bastien TAUGISVirginie Colombel
 
Infographie de Romain SEPULCHRE
Infographie de Romain SEPULCHREInfographie de Romain SEPULCHRE
Infographie de Romain SEPULCHREVirginie Colombel
 

Plus de Virginie Colombel (20)

UX design for web
UX design for webUX design for web
UX design for web
 
Communication : La communication interpersonnelle
Communication : La communication interpersonnelleCommunication : La communication interpersonnelle
Communication : La communication interpersonnelle
 
Introduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMIIntroduction aux théories de l'information et de la communication_DUT_MMI
Introduction aux théories de l'information et de la communication_DUT_MMI
 
Utiliser les réseaux sociaux pour trouver un emploi
Utiliser les réseaux sociaux pour trouver un emploiUtiliser les réseaux sociaux pour trouver un emploi
Utiliser les réseaux sociaux pour trouver un emploi
 
Publicité virale-LP 2016
Publicité virale-LP 2016Publicité virale-LP 2016
Publicité virale-LP 2016
 
Newsletter
NewsletterNewsletter
Newsletter
 
Comment se préparer pour répondre à un appel d'offre
Comment se préparer pour répondre à un appel d'offreComment se préparer pour répondre à un appel d'offre
Comment se préparer pour répondre à un appel d'offre
 
Le mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERY
Le mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERYLe mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERY
Le mur de Berlin - Infographie réalisée par Antoine JANSANA- MMI@IUTdeCHAMBERY
 
Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...
Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...
Infographie sur quelques données sur la bière par Lucas RENARD - MMI IUT de C...
 
Infographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERY
Infographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERYInfographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERY
Infographie sur Tinder réalisée par Agustina Garcia - MMI- IUT de CHAMBERY
 
Infographie réalisée par Carine lucas - MMI IUT de CHAMBERY
Infographie réalisée par Carine lucas - MMI IUT de CHAMBERYInfographie réalisée par Carine lucas - MMI IUT de CHAMBERY
Infographie réalisée par Carine lucas - MMI IUT de CHAMBERY
 
Infographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERY
Infographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERYInfographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERY
Infographie sur AIR FRANCE réalisée par Benjamin MARTINEZ- MMI - IUT de CHAMBERY
 
Infographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de CHAMBERY
Infographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de  CHAMBERYInfographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de  CHAMBERY
Infographie sur la Pizza réalisée par Dylan MILLON - MMI IUT de CHAMBERY
 
Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...
Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...
Tout petit cours de photographie en infographie par PE- HARICOT-MMI-IUT de CH...
 
Infographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERY
Infographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERYInfographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERY
Infographie sur Orangina réalisée par Kevin MOLES- MMI-IUT de CHAMBERY
 
Ecrire pour le Web : L'image
Ecrire pour le Web : L'imageEcrire pour le Web : L'image
Ecrire pour le Web : L'image
 
Infographie réalisée par Marjolaine GAL
Infographie réalisée par Marjolaine GALInfographie réalisée par Marjolaine GAL
Infographie réalisée par Marjolaine GAL
 
Infographie réalisée par Jérémy MINIE
Infographie réalisée par Jérémy MINIEInfographie réalisée par Jérémy MINIE
Infographie réalisée par Jérémy MINIE
 
Infographie " Paris Insolite " réalisée par Bastien TAUGIS
Infographie " Paris Insolite " réalisée par Bastien TAUGISInfographie " Paris Insolite " réalisée par Bastien TAUGIS
Infographie " Paris Insolite " réalisée par Bastien TAUGIS
 
Infographie de Romain SEPULCHRE
Infographie de Romain SEPULCHREInfographie de Romain SEPULCHRE
Infographie de Romain SEPULCHRE
 

Initiation à l'UX design pour applications

  • 1. UX for Apps ! Virginie COLOMBEL D'après Amélie BOUCHER, Expérience Utilisateur Mobile, Eyrolles
  • 2. Un outil utile et utilisable.
  • 5. La loi du point focal.
  • 6. Concevoir son écran de telle sorte que l'utilisateur voit tout de suite ce qui est important.
  • 7. C'est une loi de la Gestalt qui nous apprend que lors de la perception visuelle d'une scène, notre attention sera naturellement dirigée vers les éléments saillants de cette scène, ceux qui se distinguent du reste.
  • 8.
  • 9. Ici, le bouton "commander" agit bien comme point focal car il est saillant et se démarque bien des autres éléments de l'écran.
  • 10. L'animation pour attirer l'oeil : Le point focal temporaire Point trop n'en faut, bien sûr.
  • 12. Le flat design. On rencontre des interfaces où rien ne ressort. Tout est au même plan, au même niveau graphiquement. On demande un effort mental à l'utilisateur.
  • 13. Quelle que soit la plateforme sur laquelle vous travaillez, n'hésitez pas à jouer sur les tailles, les formes, les couleurs et les typographies.
  • 14. Prévoir la distraction. Partez toujours du principe que votre utilisateur risque d'être distrait pendant son utilisation.
  • 15. Faciliter la prise d'informations visuelles. Un écran libéré pour le contenu.
  • 17. Demandez-vous toujours quand votre utilisateur a besoin des options de navigation et à quel moment vous devez le laisser se concentrer sur le contenu.
  • 18. Présentez les textes pour une lecture confortable.
  • 19. 1. Morceler le contenu pour le rendre plus lisible.
  • 20. 2. Contrôler les contrastes fond/caractères.
  • 21. Vous avez dit contraste fond/ caractères ?
  • 22. 3.Optimisez la taille des textes.
  • 23. 4. Pensez aux interlignes et aux marges.
  • 26. C'est la loi de Fitts. La loi de Fitts est une fonction logarithmique. Elle nous enseigne que le temps que l'on met pour atteindre une cible est proportionnel à la distance à laquelle elle se trouve mais aussi à sa taille.
  • 27. En créant des zones actives suffisamment proches des doigts et qui tiennent compte des usages.
  • 28. La manière dont on tient notre téléphone conditionne de près l'atteignabilité des zones de l'écran. 75% des usages se font avec le pouce.
  • 29. Créer des zones actives suffisamment grandes. On ne parle pas de la taille perçue à l'écran mais de la zone active. Pensez à les écarter suffisamment.
  • 30. 2. Que puis-je utiliser et comment ? Une interface tactile réussie permet notamment à l'utilisateur de repérer sans erreur ce qui est actionnable ou non.
  • 31. La notion d'affordance. Les affordances sont les possibilités d'action suggérées par les caractéristiques d'un objet.
  • 32. Des call-to-action affordants grâce à leur format.
  • 34. Vous pouvez ajouter un élément pour communiquer l'affordance ∇ ou utiliser les affordances naturelles.
  • 35. Adaptez les affordances à l'état des call-to- action. Tant que je n'ai pas rempli tous les champs, le bouton est opacifié.
  • 36. Apportez du feedback à l'action utilisateur. L'interface doit sembler réagir au doigt et à l'oeil.
  • 37. 3. Une expérience gestuelle. Privilégiez le swip. Mais offrez toujours la double possibilité.
  • 40. Capter, bouger pour commander, secouer, retourner, faire vibrer.. Uniquement si c'est utile. Notamment pour un feedback utilisateur.
  • 41. 4. Une expérience sonore. Voyons quelques règles à respecter pour une expérience sonore de qualité.
  • 42. Une virgule sonore pour le feedback. Un son léger pour accompagner un changement d'outil par exemple. C'est tout.
  • 43. À Retenir 1. Les usages mobiles s'exercent dans des contextes dégradés : bruyants, mouvants, sollicitant beaucoup d'attention. L'utilisateur manque de temps et est souvent interrompu. 2. Vous pouvez l'aider à se concentrer en n'affichant que le strict nécessaire en fonction du moment d'interaction. Utilisez la loi du point focal et hiérarchisez vos contenus pour ne pas sur-solliciter ses capacités d'attention partagée. 3. Placez vos éléments à l'écran en tenant compte des zones de confort liées aux usages. 4. Prévoyez des zones suffisamment grandes allant de 9 à 12 mm. 5. Rendez vos call-to-action affordants. 6. Utilisez les gestes pour libérer de la place à l'écran. 7. N'utilisez les capteurs, le secouement ou les vibrations que s'ils sont utiles. 8. Préférez les virgules sonores aux sons d'ambiances.
  • 44. Chapitre 2 Contenu et navigation sur mobile.
  • 45. 1. Que mettre dans un service mobile ?
  • 46. Le mobile force à faire le choix de la simplicité.
  • 47. La contrainte de l'espace d'écran disponible vous guidera naturellement à être plus concis, à faire de vrais choix.
  • 48. " Less is more" or The paradox of choice.
  • 49. Il ne suffit pas de faire moins pour réussir. "Less isn't more; just enough is more"
  • 50. On peut cacher pour paraître simple, ainsi la recherche de simplicité se fait par un travail sur l'architecture des contenus.
  • 51. 2. Quel type de menu pour quel contexte?
  • 52. Un menu directement visible lorsque: • le menu doit avoir un pouvoir suggestif • l'utilisateur a un besoin d'efficience fort • le menu contient peu d'items • l'utilisateur passe souvent d'une rubrique à l'autre.
  • 53. Le menu visible permet de fournir un accès en un tap à des fonctions clés ou de donner l'idée à l'utilisateur.
  • 54. Pour compenser les défauts du menu visible, on le fait disparaître quand l'utilisateur est en phase d'exploration de la page.
  • 55. Un menu caché lorsque: • Le menu ne contient rien de stratégique • Votre écran par défaut couvre déjà la majorité des usages. • L'utilisateur sait ou se doute que la fonctionnalité existe • Lorsque les rubriques seront de toutes façons rencontrées par l'usager dans un flux d'interaction normal • Lorsque la liste des rubrique est longue.
  • 56. Les techniques dites de dissimulation vous permettront d'intégrer des fonctionnalités sans qu'elles ajoutent trop de bruit visuel. Cachez-les sous des menus, des icônes, des flèches ou encore des gestes.
  • 57. Pour indiquer la présence d'un menu caché, utilisez un pictogramme conventionnel. Associez-lui un libellé ou des notifications.
  • 58. Incitez vos utilisateurs à faire défiler le contenu en pratiquant le cut-off design.
  • 59. Utilisez des ancres pour compenser les manque de visibilité de certains éléments qui se trouveraient plus bas dans l'écran.
  • 60. Vous pouvez fixer des éléments à l'écran pour faciliter leur atteignabilité lorsque l'utilisateur scrolle.
  • 61. Pour faciliter la navigation: • choisissez bien l'écran sur lequel vous faites arriver votre utilisateur: De quoi a-t-il besoin ? Que voudra-t-il faire le plus fréquemment ? • Différenciez les contenus visités de ceux non visités. • Facilitez la navigation transversale pour compenser la profondeur des architectures de l'information mobile : permettez à l'utilisateur de passer directement entre les contenus de même niveau.
  • 62. Suite au prochain épisode : Une expérience émotionnelle