Chp2 - Conception UX-UI des Applications Mobiles
-
Upload
lilia-sfaxi -
Category
Technology
-
view
181 -
download
7
Transcript of Chp2 - Conception UX-UI des Applications Mobiles
Chp2 : Design d’Applications MobilesUX, Design Patterns et Meilleures Pratiques
Conception et Développement d’Applications MobilesGL4 (Opt ion Mobi le) - 2015
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 1
UI vs UX
UI: User Interface (Interface Graphique)Technique: Ce que les clients utilisent pour
interagir avec le produit
UX: User eXperience (Expérience Utilisateur)Émotion: Ce que les clients ressentent en
utilisant le produit
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 2
Design d’Applications Mobiles
Style et Design: Pourquoi est-ce important?
• La forme suit la fonction• Quel est le message de votre application?
• Consistance• « Si cela se ressemble, cela doit agir de la même manière » (Android Style
Guide)
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 3
Design Mobile
USER EXPERIENCE (UX)Chp2: Design des Applications Mobiles
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 4
UX Mobile : Définition et Composants
• UX Mobile• Perceptions et sentiments des utilisateurs avant, pendant et après leur
interaction avec le mobile
• Obligation de repenser nos acquis par rapport à la conception d’applications desktop
• Considérer• La petite taille de l’écran• Les différences de fonctionnalités entre les appareils
• Les contraintes d’usage et de connectivité
• Le contexte perpétuellement changeant et difficile à identifier
• Disséquer l’expérience utilisateur mobile en plusieurs composants clefs
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 5
User Experience (UX)
Composant 1: Fonctionnalités
• Sélectionner les fonctionnalités pertinentes pour l’utilisateur
• Guidelines• Offrir des fonctionnalités adaptées au smartphone (ex: lecture de bar-
code)
• Priorité aux fonctionnalités utilisées dans un environnement mobile (statut des vols, géolocalisation…)
• S’assurer que les fonctionnalités fondamentales sont optimisées pour le mobile (num de téléphones clic-to-call par exemple)
• Les capacités clefs doivent être disponibles sur tous les canaux (app ou site)
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 6
User Experience (UX)
Composant 2: Architecture de l’Information
• Arranger le contenu suivant une structure logique pour permettre aux utilisateurs de trouver les informations nécessaires et compléter leurs tâches
• Guidelines• Prioriser selon les besoins de l’utilisateur• Minimiser le nombre de clics, rendre chaque clic utile
• Utilisation de Patrons de Conception Mobiles
• Rendre la navigation possible pour les écrans tactiles ou non tactiles
• Faciliter la navigation: permettre le retour arrière, retour à la page principale…
• Utiliser des noms cla irs, concis et descriptifs pour les liens et boutons de navigation
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 7
User Experience (UX)
Composant 3: Contenu
• Plusieurs formats de données (texte, images et vidéo) offrant une information à l’utilisateur
• Guidelines• Offrir un contenu adapté et équilibré
• Utiliser un contenu multimédia peut avoir une valeur ajoutée, surtout quand l’objectif de l’application est le divertissement, ou l’apprentissage
• Donner le contrôle à l’utilisateur sur le contenu multimédia: ne pas démarrer automatiquement une vidéo ou un son, par exemple
• S’assurer que le contenu est approprié au mobile (optimisation d’images et média…)
• S’assurer que le contenu est présenté dans un format supporté par l’appareil (on continue encore aux utilisateurs de iOS de télécharger Flash…)
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 8
User Experience (UX)
Composant 4: Conception
• Présentation visuelle et l’expérience interactive de l’appareil
• Guidelines• “Mobilize, don’t miniaturize” (Ballard) et “Don’t shrink, Rethink” (Nokia)
• Maintenir la consistance visuelle et l’originalité (couleur, typographie et personnalité) pour garantir une reconnaissance visuelle immédiate de la marque
• Concevoir pour retenir l’ information désirée en un coup d’œil
• Définir un flux visuel: fa ire en sorte que l’élément principal de l’application te guide vers les autres fonctionnalités
• Considérer à la fois l’orientation portrait et paysage
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 9
User Experience (UX)
Composant 5: Entrées Utilisateur
• Effort nécessaire pour produire des données • Doit être minimisé
• Ne doit pas requérir les deux mains
• Guidelines• Les formulaires mobiles doivent être efficaces et concis• Fournir une aide à la saisie (liste déroulante, auto-complete) le plus
fréquemment possible
• Offrir des modes de saisie alternatives selon l’appareil (mouvement, caméra, voix, géolocalisation…)
• Changer le clavier selon les champs à saisir (par exemple, utiliser un clavier contenant la touche @ en première page pour taper une adresse email)
• Considérer les suggestions de correction automatique (spell-check) pour réduire l’effort d’écriture
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 10
User Experience (UX)
Composant 6: Contexte Mobile
• L’ appareil peut être utilisé n’importe quand, n’importe où• Prendre en considération de l’environnement changeant rapidement
• Autant considérer les conditions extrêmement inconfortables qu’extrêmement confortables
• Guidelines• Utiliser les caractéristiques de l’appareil pour anticiper les besoins de
l’utilisateur dans le contexte d’utilisation de l’application• Offrir la possibilité de naviguer avec la voix pour parcourir les recettes de
cuis ine!
• Changer les caractéristiques de l’ interface selon le moment d’utilisation (automatiquement changer de la vue de jour vers vue de nuit par ex.)
• Utiliser l’emplacement pour afficher des informations de proximité
• Utiliser UX par défaut selon l’appareil, et autoriser des améliorations
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 11
User Experience (UX)
Composant 7: Usage (Usability)
• A quel point est-ce que tous les éléments précédents (architecture de l’information, le design, contenu…) collaborent ensemble?
• Guidelines• Bien montrer à l’utilisateur ce qui doit être sélectionné, cliqué ou balayé
• Faire en sorte que les cibles soient de taille correcte et bien espacés
• Placer les cibles dans des zones de l’écran appropriées• Certa ines zones, difficiles d’accès, peuvent être utilisées pour la suppression
• Réduire la courbe d’apprentissage en utilisant des conventions et patterns
• Éviter d’utiliser des technologies qui ne sont pas supportées par toutes les plateformes
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 12
User Experience (UX)
Composant 8: Confiance
• Degré de confiance et d’aise que les utilisateurs ressentent en utilisant une application
• Guidelines• Attention à la sécurité et au respect de la vie privée
• Ne pas collecter et utiliser des informations personnelles sans autorisation
• Laisser le contrôle à l’utilisateur concernant le partage de ses informations dans une application mobile
• Indiquer cla irement vos pratiques métier en offrant des liens explicites vers les politiques de sécurité
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 13
User Experience (UX)
Composant 9: Feedback
• Comment attirer l’attention de l’utilisateur et afficher les informations importantes?
• Guidelines• Minimiser le nombre d’a lertes et optimiser leur contenu
• Rendre les notifications brèves, informatives et facilement supprimables • Fournir un feedback et confirmation sans interrompre le travail de
l’utilisateur
• Si votre application fournit des badges et des notifications sur la statusbar:• Les garder à jour• Les supprimer uniquement quand l’utilisateur en a pris connaissance
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 14
User Experience (UX)
Composant 10: Aide
• Options, produits et services disponibles pour assister l’utilisateur dans la manipulation de l’application
• Guidelines• Rendre l’accès à l’a ide facile, et à un endroit distinguable par l’utilisateur
• Offrir plusieurs moyens d’avoir un support• FAQ, appel, tweets…
• Offrir un tutoria l rapide à la première utilisation d’une application
• Offrir une aide contextuelle et des conseils pour guider l’utilisateur quand l’application introduit un nouveau concept
• Offrir des vidéos de support quand c’est nécessaire, mais donner à l’utilisateur le pouvoir le les contrôler (volume, arrêt,…)
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 15
User Experience (UX)
Composant 11: Social
• Contenu et fonctionnalités permettant de :• Créer une participation sociale
• Provoquer une interaction utilisateur
• Faciliter le partage sur les réseaux sociaux confirmés
• Guidelines• Maintenir une présence dans les réseaux sociaux (page facebook par ex.)
• Incorporer vos activités sociales dans votre site mobile en montrant vos récentes activités et offrant un moyen facile de vous suivre ou vous liker
• Permettre aux utilisateurs de se connecter facilement à leur réseau social via votre application• Utiliser des APIs pour le partage, tag, like et commentaire
• Inviter les utilisateurs à générer du contenu sur votre marque/société en contre-partie d’un gain potentiel
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 16
User Experience (UX)
Composant 12: Marketing
• Méthodes permettant aux utilisateurs de trouver l’application ou site• Facteurs encourageant l’utilisation répétée
• Guidelines• Assurer votre visibilité en optimisant votre site/application pour la
recherche mobile• Offrir , dans les résultats de recherche, un accès direct aux informations de
localisation
• Offrir un QR code (Quick Response) pour votre application
• Promouvoir votre application sur d’autres canaux si possible (TV, impression…) et offrir des promotions pour son téléchargement/achat
• Demander aux utilisateurs de noter et commenter votre application, et de partager leurs avis sur des réseaux sociaux
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 17
User Experience (UX)
DESIGN PATTERNS D’INTERFACES MOBILESChp2: Design des Applications Mobiles
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 18
Interaction Mobile: Les Bases
Mobile Action PC
Toucher Jeveuxça Cliquer
Soumettre Fais-le! Soumettre
Balayer Suivant,BougerouSupprimer Suivant
Presser Faisquelquechose Double-clic/Clicdroit
Pincer(Pinch) Zoomout Barre dedéfilement
Étaler(Spread) Zoom in Barre dedéfilement
Rotation Rotation Barre dedéfilement
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 19
Design Patterns d’Interfaces Mobiles
Patrons de Navigation Principaux
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 20
Patrons de Conception Mobile
SpringBoardDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 21
Irrégulier Plusieurs pages Circulaire Avec Drill-Down
List MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 22
Liste catégorisée
List Menu (Side Drawer)Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 23
Taper pour afficher le menu
Overlay : la page principaleest couverte
List Menu (Side Drawer)Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 24
Glisser pour afficher le menu
Inlay : la page principaleest poussée
Tab MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 25
Tabulations en basTabulations navigables
Tab MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 26
Tabulations en haut
Tab MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 27
Avec Boutons de Commande
Tab MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 28
Side bars (dans ce cas mal conçues car sans étiquettes, redondantes…)
Tab MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 29
Tab Menu (ou Bar) Toolbar
ATTENTION !
GalerieDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 30
DashboardDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 31
Métaphore (ou Skeuomorphic)Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 32
MétaphoreDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 33
Mega MenuDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 34
Patrons de Navigation Secondaires
• Navigation secondaire: naviguer à l’intérieur d’un autre élément
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 35
Patrons de Conception Mobile
+ tous les patrons de navigation primaires peuvent être utilisés ensemble
CombinaisonsDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 36
Tabs + Galerie Tabs + Metaphor Tabs + Springboardpersonnalisé
Carousel de PageDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 37
Avec indicateurs de page (petits points)
Carousel de PageDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 38
Trop de pages !
Extension de LigneDr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 39
Et ce n’ est pas fini…
Ce ne sont QUE les patrons de navigation, il y’en a d’autres :• Formulaires
• Tableaux
• Recherche, Tri et Filtrage• Outils
• Diagrammes• Invitations
• Feedback • Aide
(* ) Li re le l iv re de Theresa Nei l , « Mobi le D esign Pattern Gal lery: UI Patterns for Mobi le Appl icat ions »
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 40
Patrons de Conception Mobile*
Anti-Patterns
Les anti-patterns sont des classes de mauvaises solutions,communément utilisées, à des problèmes récurrents.
A éviter…
Sont en général causées par le besoin d’innover, de semontrer créatif, original, en utilisant des élémentsgraphiques non-standards
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 41
Patrons de Conception Mobile
Un conseil…
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 42
Patrons de Conception Mobile
Jusqu’à ce que vous connaissiez les standards UI mobiles!
Anti-Patterns
Le PCisme
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 43
Patrons de Conception Mobile
Anti-Patterns
Idiot Box
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 44
Patrons de Conception Mobile
Anti-Patterns
L’ océan de Boutons
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 45
Patrons de Conception Mobile
Anti-Patterns
• L’emplacement du menu n’est pas standard, surtout pour iOS • Trop de couleurs • Le text inversé est di ffici le à li re, i l vaut mieux uti liser une liste de catégories
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 46
Patrons de Conception Mobile
Anti-Patterns
Résultats de recherche avec un scrollbar!Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 47
Patrons de Conception Mobile
Anti-Patterns
Besoin de faire un clic-long puis un glisser-déplacer pour sauvegarder.. Trop complexe et non-intuitif!
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 48
Patrons de Conception Mobile
Anti-Patterns
Le contrôle de luminosité se trouve sous l’icône du font!
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 49
Patrons de Conception Mobile
Anti-Patterns
Métaphore mal utilisée: représenter les requêtes du help desk comme étant une liste de shopping!
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 50
Patrons de Conception Mobile
Anti-Patterns
No Comment…
Dr. L i l ia SF AXI w w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 51
Patrons de Conception Mobile
Références
• Lyndon Cerejo http://www.smashingmagazine.com/2012/07/12/elements-mobi le-user-experience/, article dans le magazine SmashingMagazine, publié en Jui llet 2012, consulté le 6 mars 2015
• Dan Hermes, « Mobi le Design Patterns », Boston Code Camps 21• Theresa Nei l, « Mobi le Design Pattern Gallery: UI Patterns for Mobi le Applications »,
O’Rei lly Media, Février 2012
Dr. L i l ia SF AXIw w w .l i l iasfaxi .w ix.co m/ l i l iasfaxi
Sl id e 52
Sites Web & Livres