chp2 - conception ux-ui des applications mobiles

52
Chp2 : Design d’Applications Mobiles UX, Design Patterns et Meilleures Pratiques Conception et Développement d’Applications Mobiles GL4 (Option Mobile) - 2015 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 1

Upload: lilia-sfaxi

Post on 20-Jul-2015

182 views

Category:

Technology


7 download

TRANSCRIPT

Page 1: 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

Page 2: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 3: Chp2 - Conception UX-UI des 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

Page 4: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 5: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 6: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 7: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 8: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 9: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 10: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 11: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 12: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 13: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 14: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 15: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 16: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 17: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 18: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 19: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 20: Chp2 - Conception UX-UI des Applications 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

Page 21: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 22: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 23: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 24: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 25: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 26: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 27: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 28: Chp2 - Conception UX-UI des Applications Mobiles

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…)

Page 29: Chp2 - Conception UX-UI des Applications Mobiles

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 !

Page 30: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 31: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 32: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 33: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 34: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 35: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 36: Chp2 - Conception UX-UI des Applications Mobiles

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é

Page 37: Chp2 - Conception UX-UI des Applications Mobiles

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)

Page 38: Chp2 - Conception UX-UI des Applications Mobiles

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 !

Page 39: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 40: Chp2 - Conception UX-UI des Applications Mobiles

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*

Page 41: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 42: Chp2 - Conception UX-UI des Applications Mobiles

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!

Page 43: Chp2 - Conception UX-UI des Applications 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

Page 44: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 45: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 46: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 47: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 48: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 49: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 50: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 51: Chp2 - Conception UX-UI des Applications Mobiles

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

Page 52: Chp2 - Conception UX-UI des Applications Mobiles

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