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)

Sl id e 3

Design Mobile

USER EXPERIENCE (UX)Chp2: Design des Applications Mobiles

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

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-

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

Sl id e 6

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

Sl id e 7

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

Sl id e 8

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

Sl id e 9

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

Sl id e 10

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

Sl id e 11

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

Sl id e 12

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é

Sl id e 13

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

Sl id e 14

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

Sl id e 15

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

Sl id e 16

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

Sl id e 17

DESIGN PATTERNS D’INTERFACES MOBILESChp2: Design des Applications Mobiles

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

Sl id e 19

Design Patterns d’Interfaces Mobiles

Patrons de Navigation Principaux

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

Sl id e 26

Tabulations en haut

Sl id e 27

Avec Boutons de Commande

Sl id e 28

Side bars (dans ce cas mal conçues car sans étiquettes, redondantes…)

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

Sl id e 35

+ 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 »

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

Sl id e 41

Un conseil…

Sl id e 42

Jusqu’à ce que vous connaissiez les standards UI mobiles!

Anti-Patterns

Le PCisme

Sl id e 43

Anti-Patterns

Idiot Box

Sl id e 44

Anti-Patterns

L’ océan de Boutons

Sl id e 45

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

Sl id e 46

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

Anti-Patterns

Besoin de faire un clic-long puis un glisser-déplacer pour sauvegarder.. Trop complexe et non-intuitif!

Sl id e 48

Anti-Patterns

Le contrôle de luminosité se trouve sous l’icône du font!

Sl id e 49

Anti-Patterns

Métaphore mal utilisée: représenter les requêtes du help desk comme étant une liste de shopping!

Sl id e 50

Anti-Patterns

No Comment…

Sl id e 51

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

Sl id e 52

Sites Web & Livres

chp2 - conception ux-ui des applications mobiles

i asfax i

design mobile

experience ux chp2

experience ux composant

sfaxi www

produit ux

conception mobiles

ui vs ux ui

Technology

summary ece351 chp1 chp2 chp3

chp2 - test bank

serway chp2-relativity ii

chp2 - cahier des charges

intoducton of cb chp2

hds 5/11 ux · hds 5/11 ux, 1.064-031.0, 2016-09-06...

chp2 - diagramme des cas d'utilisation

advertising design chp2

fuel comb chp2 fuels slides

finn3226 chp2 moodle

mgt210 chp2 tasmia fall12

notes bk1 chp2

notre environnement naturel chp2

chp2-cold water supply

week02a dip chp2

eservices-chp2: soa

chp2 forces building the land

rlc circuits det2033 chp2

solution advanced accounting 11ed chp2

software engineering - chp2- requirements specification