Visitez http://liliasfaxi.wix.com/liliasfaxi !

1. 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

2. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 2
Design d’Applications Mobiles

3. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 3
Design Mobile

4. USER EXPERIENCE (UX)
Chp2: Design des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 4

5. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 5
User Experience (UX)

6. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 6
User Experience (UX)

7. 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 clairs, concis et descriptifs pour les liens et boutons de
navigation
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 7
User Experience (UX)

8. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 8
User Experience (UX)

9. 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: faire 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 9
User Experience (UX)

10. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 10
User Experience (UX)

11. 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
cuisine!
• 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 11
User Experience (UX)

12. 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
• Certaines 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 12
User Experience (UX)

13. 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 clairement vos pratiques métier en offrant des liens explicites
vers les politiques de sécurité
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 13
User Experience (UX)

14. Composant 9: Feedback
• Comment attirer l’attention de l’utilisateur et afficher les informations
importantes?
• Guidelines
• Minimiser le nombre d’alertes 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 status
bar:
• Les garder à jour
• Les supprimer uniquement quand l’utilisateur en a pris connaissance
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 14
User Experience (UX)

15. Composant 10: Aide
• Options, produits et services disponibles pour assister l’utilisateur dans
la manipulation de l’application
• Guidelines
• Rendre l’accès à l’aide facile, et à un endroit distinguable par l’utilisateur
• Offrir plusieurs moyens d’avoir un support
• FAQ, appel, tweets…
• Offrir un tutorial 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 15
User Experience (UX)

16. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 16
User Experience (UX)

17. 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. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 17
User Experience (UX)

18. DESIGN PATTERNS D’INTERFACES MOBILES
Chp2: Design des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 18

19. Interaction Mobile: Les Bases
Mobile Action PC
Toucher Je veux ça Cliquer
Soumettre Fais-le! Soumettre
Balayer Suivant, Bouger ou Supprimer Suivant
Presser Fais quelque chose Double-clic / Clic droit
Pincer (Pinch) Zoom out Barre de défilement
Étaler (Spread) Zoom in Barre de défilement
Rotation Rotation Barre de défilement
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 19
Design Patterns d’Interfaces Mobiles

20. Patrons de Navigation Principaux
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 20
Patrons de Conception Mobile

21. SpringBoard
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 21
Irrégulier Plusieurs pages Circulaire Avec Drill-Down

22. List Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 22
Liste catégorisée

23. List Menu (Side Drawer)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 23
Taperpour afficherle menu
Overlay : la page principale
est couverte

24. List Menu (Side Drawer)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 24
Glisserpour afficherle menu
Inlay : la pageprincipale
est poussée

25. Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 25
Tabulations en bas
Tabulations navigables

26. Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 26
Tabulations en haut

27. Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 27
Avec Boutons de Commande

28. Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 28
Side bars (dans ce cas mal conçues car sans étiquettes, redondantes…)

29. Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 29
Tab Menu (ou Bar) Toolbar
ATTENTION !

30. Galerie
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 30

31. Dashboard
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 31

32. Métaphore (ou Skeuomorphic)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 32

33. Métaphore
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 33

34. Mega Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 34

35. Patrons de Navigation Secondaires
• Navigation secondaire: naviguer à l’intérieur d’un autre élément
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 35
Patrons de Conception Mobile
+ tous les patronsde navigationprimairespeuventêtreutilisés ensemble

36. Combinaisons
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 36
Tabs + Galerie Tabs + Metaphor Tabs + Springboard
personnalisé

37. Carousel de Page
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 37
Avec indicateurs de page (petits points)

38. Carousel de Page
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 38
Trop de pages !

39. Extension de Ligne
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 39

40. 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
(*) Lire le livre de Theresa Neil, « Mobile Design Pattern Gallery: UI Patterns for
Mobile Applications »
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 40
Patrons de Conception Mobile
*

41. 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 se
montrer créatif, original, en utilisant des éléments
graphiques non-standards
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 41
Patrons de Conception Mobile

42. Un conseil…
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 42
Patrons de Conception Mobile
Jusqu’à ce que vous connaissiez les standards UI mobiles!

43. Anti-Patterns
Le PCisme
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 43
Patrons de Conception Mobile

44. Anti-Patterns
Idiot Box
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 44
Patrons de Conception Mobile

45. Anti-Patterns
L’ océan de Boutons
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 45
Patrons de Conception Mobile

46. Anti-Patterns
• L’emplacement du menu n’est pas standard, surtout pour iOS
• Trop de couleurs
• Le text inversé est difficile à lire, il vaut mieux utiliser une liste de catégories
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 46
Patrons de Conception Mobile

47. Anti-Patterns
Résultats de recherche avec un scrollbar!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 47
Patrons de Conception Mobile

48. Anti-Patterns
Besoin de faire un
clic-long puis un
glisser-déplacer pour
sauvegarder.. Trop
complexe et non-
intuitif!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 48
Patrons de Conception Mobile

49. Anti-Patterns
Le contrôle de
luminosité se trouve
sous l’icône du font!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 49
Patrons de Conception Mobile

50. Anti-Patterns
Métaphore mal utilisée: représenter les requêtes du help desk comme étant une
liste de shopping!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 50
Patrons de Conception Mobile

51. Anti-Patterns
No Comment…
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 51
Patrons de Conception Mobile

52. Références
• Lyndon Cerejo http://www.smashingmagazine.com/2012/07/12/elements-mobile-
user-experience/, article dans le magazine SmashingMagazine, publié en Juillet 2012,
consulté le 6 mars 2015
• Dan Hermes, « Mobile Design Patterns », Boston Code Camps 21
• Theresa Neil, « Mobile Design Pattern Gallery: UI Patterns for Mobile Applications »,
O’Reilly Media, Février 2012
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 52
Sites Web & Livres