Chp2 : Design d’Applications Mobiles
UX, Design Patterns et Meilleures Pratiques
Conception et Développement d’Application...
UI vs UX
UI: User Interface (Interface Graphique)
Technique: Ce que les clients utilisent pour
interagir avec le produit
U...
Style et Design: Pourquoi est-ce important?
• La forme suit la fonction
• Quel est le message de votre application?
• Cons...
USER EXPERIENCE (UX)
Chp2: Design des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 4
UX Mobile : Définition et Composants
• UX Mobile
• Perceptions et sentiments des utilisateurs avant, pendant et après leur...
Composant 1: Fonctionnalités
• Sélectionner les fonctionnalités pertinentes pour l’utilisateur
• Guidelines
• Offrir des f...
Composant 2: Architecture de l’Information
• Arranger le contenu suivant une structure logique pour permettre aux
utilisat...
Composant 3: Contenu
• Plusieurs formats de données (texte, images et vidéo) offrant une
information à l’utilisateur
• Gui...
Composant 4: Conception
• Présentation visuelle et l’expérience interactive de l’appareil
• Guidelines
• “Mobilize, don’t ...
Composant 5: Entrées Utilisateur
• Effort nécessaire pour produire des données
• Doit être minimisé
• Ne doit pas requérir...
Composant 6: Contexte Mobile
• L’ appareil peut être utilisé n’importe quand, n’importe où
• Prendre en considération de l...
Composant 7: Usage (Usability)
• A quel point est-ce que tous les éléments précédents (architecture de
l’information, le d...
Composant 8: Confiance
• Degré de confiance et d’aise que les utilisateurs ressentent en utilisant
une application
• Guide...
Composant 9: Feedback
• Comment attirer l’attention de l’utilisateur et afficher les informations
importantes?
• Guideline...
Composant 10: Aide
• Options, produits et services disponibles pour assister l’utilisateur dans
la manipulation de l’appli...
Composant 11: Social
• Contenu et fonctionnalités permettant de :
• Créer une participation sociale
• Provoquer une intera...
Composant 12: Marketing
• Méthodes permettant aux utilisateurs de trouver l’application ou site
• Facteurs encourageant l’...
DESIGN PATTERNS D’INTERFACES MOBILES
Chp2: Design des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfa...
Interaction Mobile: Les Bases
Mobile Action PC
Toucher Je	veux	ça Cliquer
Soumettre Fais-le! Soumettre
Balayer Suivant,	Bo...
Patrons de Navigation Principaux
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 20
Patrons de Conception Mobile
SpringBoard
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 21
Irrégulier Plusieurs pages Circulaire Avec Drill-Do...
List Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 22
Liste catégorisée
List Menu (Side Drawer)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 23
Taperpour afficherle menu
Overlay : la ...
List Menu (Side Drawer)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 24
Glisserpour afficherle menu
Inlay : la ...
Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 25
Tabulations en bas
Tabulations navigables
Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 26
Tabulations en haut
Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 27
Avec Boutons de Commande
Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 28
Side bars (dans ce cas mal conçues car sans étiquettes...
Tab Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 29
Tab Menu (ou Bar) Toolbar
ATTENTION !
Galerie
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 30
Dashboard
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 31
Métaphore (ou Skeuomorphic)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 32
Métaphore
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 33
Mega Menu
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 34
Patrons de Navigation Secondaires
• Navigation secondaire: naviguer à l’intérieur d’un autre élément
Dr. Lilia SFAXI
www.l...
Combinaisons
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 36
Tabs + Galerie Tabs + Metaphor Tabs + Springboard
...
Carousel de Page
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 37
Avec indicateurs de page (petits points)
Carousel de Page
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 38
Trop de pages !
Extension de Ligne
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 39
Et ce n’ est pas fini…
Ce ne sont QUE les patrons de navigation, il y’en a d’autres :
• Formulaires
• Tableaux
• Recherche...
Anti-Patterns
Les anti-patterns sont des classes de mauvaises solutions,
communément utilisées, à des problèmes récurrents...
Un conseil…
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 42
Patrons de Conception Mobile
Jusqu’à ce que vous co...
Anti-Patterns
Le PCisme
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 43
Patrons de Conception Mobile
Anti-Patterns
Idiot Box
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 44
Patrons de Conception Mobile
Anti-Patterns
L’ océan de Boutons
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 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 diffic...
Anti-Patterns
Résultats de recherche avec un scrollbar!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 47
Patrons...
Anti-Patterns
Besoin de faire un
clic-long puis un
glisser-déplacer pour
sauvegarder.. Trop
complexe et non-
intuitif!
Dr....
Anti-Patterns
Le contrôle de
luminosité se trouve
sous l’icône du font!
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
...
Anti-Patterns
Métaphore mal utilisée: représenter les requêtes du help desk comme étant une
liste de shopping!
Dr. Lilia S...
Anti-Patterns
No Comment…
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 51
Patrons de Conception Mobile
Références
• Lyndon Cerejo http://www.smashingmagazine.com/2012/07/12/elements-mobile-
user-experience/, article dans le m...
Prochain SlideShare
Chargement dans…5
×

Chp2 - Conception UX-UI des Applications Mobiles

1 967 vues

Publié le

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

Publié dans : Technologie
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 967
Sur SlideShare
0
Issues des intégrations
0
Intégrations
469
Actions
Partages
0
Téléchargements
138
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Chp2 - Conception UX-UI des Applications Mobiles

  1. 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. 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. 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. 4. USER EXPERIENCE (UX) Chp2: Design des Applications Mobiles Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. DESIGN PATTERNS D’INTERFACES MOBILES Chp2: Design des Applications Mobiles Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 18
  19. 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. 20. Patrons de Navigation Principaux Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 20 Patrons de Conception Mobile
  21. 21. SpringBoard Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 21 Irrégulier Plusieurs pages Circulaire Avec Drill-Down
  22. 22. List Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 22 Liste catégorisée
  23. 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. 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. 25. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 25 Tabulations en bas Tabulations navigables
  26. 26. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 26 Tabulations en haut
  27. 27. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 27 Avec Boutons de Commande
  28. 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. 29. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 29 Tab Menu (ou Bar) Toolbar ATTENTION !
  30. 30. Galerie Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 30
  31. 31. Dashboard Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 31
  32. 32. Métaphore (ou Skeuomorphic) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 32
  33. 33. Métaphore Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 33
  34. 34. Mega Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 34
  35. 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. 36. Combinaisons Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 36 Tabs + Galerie Tabs + Metaphor Tabs + Springboard personnalisé
  37. 37. Carousel de Page Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 37 Avec indicateurs de page (petits points)
  38. 38. Carousel de Page Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 38 Trop de pages !
  39. 39. Extension de Ligne Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 39
  40. 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. 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. 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. 43. Anti-Patterns Le PCisme Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 43 Patrons de Conception Mobile
  44. 44. Anti-Patterns Idiot Box Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 44 Patrons de Conception Mobile
  45. 45. Anti-Patterns L’ océan de Boutons Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 45 Patrons de Conception Mobile
  46. 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. 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. 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. 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. 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. 51. Anti-Patterns No Comment… Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 51 Patrons de Conception Mobile
  52. 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

×