Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

5. Grands principes de conception

133 views

Published on

--
Cours n°5/7 donné Master 2 Création et Communication Numérique à l'ISCOM, Année 2016/2017.

Published in: Design
  • Be the first to comment

5. Grands principes de conception

  1. 1. Conception ISCOM — Master 2 CCN 2016 Laurent Barbat - @lbarbat
  2. 2. Au sommaire… Adapté du livre « Méthodes de design UX », Lallemand / Gronier — 2015 CADRAGE EXPLORATION SYNTHÈSE CRÉATION ÉVALUATIONIDÉATION
  3. 3. Création Concevoir puis développer le produit ou service. Arborescence Wireframes Prototype Cadrage Exploration Synthèse Création ÉvaluationIdéation Maquettes graphiques
  4. 4. Principes de conception
  5. 5. Les Théories de la Gestalt ou la Psychologie de la Forme
  6. 6. Loi de Proximité Nous regroupons les points d’abord les plus proches les uns des autres.
  7. 7. Loi de Proximité
  8. 8. Loi de Proximité
  9. 9. Loi de Proximité
  10. 10. Loi de Similitude Si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme.
  11. 11. Loi de Similitude
  12. 12. Similitude et Proximité SIMILITUDE PROXIMITÉ
  13. 13. Taille
  14. 14. Couleur
  15. 15. Intensité
  16. 16. Forme
  17. 17. Orientation
  18. 18. Longueur
  19. 19. Contour
  20. 20. Position
  21. 21. Loi de Fitts Une cible est d’autant plus facile à atteindre 
 qu’elle est proche et grande.
  22. 22. Loi de Fitts « Une cible est d’autant plus facile à atteindre qu’elle est proche et grande » Enregister Enregistrer Michel Legrand Michel Legrand versus
  23. 23. Loi de Hick Le temps qu'il faut à un utilisateur pour prendre une décision 
 est fonction du nombre de choix à sa disposition.
  24. 24. L’expérience des pots de confiture 6 pots en dégustation 40% des passants s’arrêtent pour gouter 30% achètent Sur 100 passants, 12 achètent 24 pots en dégustation 60% des passants s’arrêtent pour gouter 3% achètent Sur 100 passants, 2 achètent
  25. 25. Loi de Hick Le temps qu'il faut à un utilisateur pour prendre une décision est fonction du nombre de choix à sa disposition.
  26. 26. L’Affordance Capacité d’un système ou d'un produit à suggérer sa propre utilisation.
  27. 27. Comment ouvrir cette porte ?
  28. 28. Comment ouvrir cette porte ?
  29. 29. Comment ouvrir cette porte ?
  30. 30. Comment ouvrir cette porte ? Source image : http://www.doctordisruption.com/design/principles-of-design-51-affordance/
  31. 31. La charge cognitive
  32. 32. Barrières cognitives Source : http://uxmag.com/articles/cognition-the-intrinsic-user-experience Charge cognitive
  33. 33. Le Feedback
  34. 34. Écrire pour le web
  35. 35. Constat
  36. 36. Les internautes scannent les pages… …Et ne lisent attentivement que lorsqu’ils pensent avoir trouvé ce qu’ils cherchent.
  37. 37. Les 3 niveaux de lecture 1 Repérage 
 (exploration) Recherche de 
 points d’entrée Vision, 
 Pré-attention Système visuel) 1 à 3 sec 2 Balayage
 (synthèse) Analyse, 
 Phase de décision Perception, Attention Mémoire courte (5 à 9 éléments) 15 à 30 sec 3 Lecture 
 profonde 
 (mot à mot) Lecture suivie, Intérêt capté Mémorisation, Répétition Mémoire longue (culture) Min, Heure s
  38. 38. Bonnes pratiques d’écriture
  39. 39. Quelques bonnes pratiques d’écriture pour le web 1. Mettre l’info importante en premier 2. Une idée = un paragraphe 3. Faciliter la compréhension : simple, précis, court 4. Relire pour réduire 5. Écrire plus gros 6. Forcer les contrastes
  40. 40. 1. L’information importante en premier contenu important contenu moins important SYNTHÉTIQUE EXHAUSTIF
  41. 41. 2. Une idée = un paragraphe UNE PAGE = UN MESSAGE UN PARAGRAPHE = UNE IDÉE
  42. 42. 3. Écrire simple, précis, court • Écrire simplement - Utiliser des constructions simples Sujet/Verbe/Complément - Utiliser des mots concrets, courants - Éviter le jargon et les métaphores • Écrire avec précision - Éviter les mots-valises comme «faire» - Se méfier des adverbes, dont la nuance n’est pas toujours comprise. 
 Ex : « les logiciels ont souvent des erreurs » risque d’être compris comme « les logiciels ont des erreurs » • Écrire court - Rédiger des phrases de 12-15 mots (20 mots max) - Éviter la forme passive et les tournures négatives - Scinder en deux une phrase quand elle contient deux verbes conjugués, un participe présent ou une subordonnée - Éviter de donner plus d’un chiffre par phrase - Un message clé par page
  43. 43. 3. Faciliter la compréhension NE PAS ÉCRIRE Utilisation Excessivement Antérieurement Suffisant Sélectionne Constamment Absolument essentiel Rassemblés en commun Désappointé ÉCRIRE Usage Trop Avant Assez Choisir, trier Toujours/souvent Essentiel Rassemblés Déçu
  44. 44. 3. Faciliter la compréhension NE PAS ÉCRIRE Tout à fait unique D'une longueur d'un mètre Bilan total Le premier de tous De couleur rouge Entièrement éliminé ÉCRIRE Unique Un mètre Bilan Le premier Rouge Éliminé
  45. 45. 3. Faciliter la compréhension NE PAS ÉCRIRE Prendre une décision Mener une enquête Faire usage de Permet d’expliquer Procéder à un examen ÉCRIRE Décider Enquêter Utiliser Expliquer Examiner
  46. 46. 4. Relire pour réduire
  47. 47. 5. Écrire plus gros 16 pixels est la taille de confort pour la plupart des écrans.
  48. 48. 6. Forcer les contrastes À 40 ans la quantité de lumière qui passe à travers la rétine est 50% plus faible qu’à 20 ans. À partir de 60 ans, c’est seulement 20%. LE TEXTE LE TEXTE LE TEXTE
  49. 49. On récapitule…
  50. 50. 1. L’information importante en premier
  51. 51. 2. Une idée = un paragraphe
  52. 52. 3. Écrire simple, précis, court
  53. 53. 4. Relire pour réduire
  54. 54. 5. Aérer
  55. 55. 6. Forcer les contrastes
  56. 56. 7. Last but not least… Un titre court et porteur de sens
  57. 57. Et écrire pour le mobile ? 1. Mettre l’info importante en premier 2. Une idée = un paragraphe 3. Faciliter la compréhension : simple, précis, court 4. Relire pour réduire 5. Écrire plus gros 6. Forcer les contrastes
  58. 58. Une dernière chose… CLIQUEZ-ICI NEIN !
  59. 59. Un autre point de vue sur le déroulement d’un projet UX
  60. 60. Source : The Elements of User Experience, Jesse James Garrett Les « 5 éléments de l’expérience utilisateur » structurent la création d’un produit. Chaque étape s’appuie sur la précédente.
  61. 61. Surface : Le graphisme. Skeleton : L’ergonomie, la hiérarchie de l’information sur la page. Structure : La structure du site, l’arborescence, le système de navigation. Scope : Le périmètre du projet, la liste des contenus et des fonctionnalités. Strategy : Les objectifs du site, la stratégie de l’entreprise. Les moyens humains et matériels mis en oeuvre. Source : The Elements of User Experience, Jesse James Garrett
  62. 62. Source : The Elements of User Experience, Jesse James Garrett Correspond à la phase de Création Inclut la phase de Recherche
  63. 63. Le « profil en T » 
 d’un UX Designer
  64. 64. Le « profil en T » d’un UX Designer RECHERCHEUTILISATEUR STRATÉGIEDECONTENU ARCHITECTUREDEL’INFORMATION DESIGNGRAPHIQUE/UI DESIGND’INTERACTION BUSINESS TECHNIQUE UX DESIGN
  65. 65. RECHERCHEUTILISATEUR STRATÉGIEDECONTENU ARCHITECTUREDEL’INFORMATION DESIGNGRAPHIQUE/UI DESIGND’INTERACTION BUSINESS TECHNIQUE Le « profil en T » d’un UX Designer UX DESIGN Transmet aux autres Maitrise le sujet Connait les bases
  66. 66. Le « profil en T » d’un UX Designer RECHERCHEUTILISATEUR STRATÉGIEDECONTENU ARCHITECTUREDEL’INFORMATION DESIGNGRAPHIQUE/UI DESIGND’INTERACTION BUSINESS TECHNIQUE UX DESIGN
  67. 67. RECHERCHEUTILISATEUR STRATÉGIEDECONTENU ARCHITECTUREDEL’INFORMATION DESIGNGRAPHIQUE/UI DESIGND’INTERACTION BUSINESS TECHNIQUE Le « profil en T » d’un UX Designer UX DESIGN
  68. 68. Le « profil en T » d’un UX Designer RECHERCHEUTILISATEUR STRATÉGIEDECONTENU ARCHITECTUREDEL’INFORMATION DESIGNGRAPHIQUE/UI DESIGND’INTERACTION BUSINESS TECHNIQUE UX DESIGN
  69. 69. Source : The Elements of User Experience, Jesse James Garrett User researcher Designer graphique Architecte de l’info Stratège de contenu Business Technique Designer d’interaction Pour simplifier…
  70. 70. Source : The Elements of User Experience, Jesse James Garrett Une meilleure approche est de commencer l’étape suivante un peu avant que l’étape actuelle soit terminée. 
 On favorise ainsi la collaboration. Toutefois, imposer de terminer chaque étape avant de commencer la suivante n’est pas la meilleure solution.
  71. 71. 11 Règles ergonomiques
  72. 72. L’ergonomie en 11 règles Les règles d’ergonomie permettent d’optimiser la qualité d’utilisation d’un produit selon un double mouvement : d’une part, elles influencent la conception, d’autre part elles sont un outil pour évaluer une interface existante.
  73. 73. 11 Règles ergonomiques Architecture : le produit est bien structuré Organisation visuelle : la page est bien organisée Cohérence : le produit capitalise sur l'apprentissage interne Convention : le produit capitalise sur l'apprentissage externe Information : le produit informe l'internaute et lui répond Compréhension : Les mots et symboles sont choisis minutieusement Assistance : Le produit aide et dirige l'internaute Gestion des erreurs : Le produit prévoit que l'internaute se trompe Rapidité : L'internaute ne perd pas son temps Contrôle : C'est l’internaute qui commande Accessibilité : Un produit facile d'accès pour tous 1 2 3 4 5 6 7 8 9 10 11 Source : Ergonomie Web, Amélie Boucher
  74. 74. Architecture Le produit est bien structuré 1
  75. 75. Faciliter la recherche de l’information LISTE CLIENTS FICHE CLIENT RECH. IDENTIF. CLIENT ARBORESCENCE Application vendeur Aigle PANIER INFOS CLIENT INFOS DE PAIEMENT INFOS DE LIVRAISON CONFIRMATION RECAP SCAN LISTE DE PRODUITS FICHE PRODUIT CONF AJOUT + CROSS-SELL MENU + RECHERCHE CONFIRMATION INSCRIPTION Catalogue Scanner Client Programme de fidélité Mon profil Commander MODULE VENDEUR LOGIN VENDEUR
  76. 76. Faciliter la recherche de l’information Fiche ApartHotel Accueil Résultats de recherche Découvrez Adagio 100 aparthotels dans le monde (carte) Offres spéciales Programme de fidélité Mon compte, ma réservation Comparateur Demande de devis Long séjour Recherche Confirmation de demande de devis Informations personelles Préférences Newsletters Tableau de bord Réservations Réservations en cours Historique Mon profil FAQ Club Créer un compte Modifier une réservation Confirmation de modification Mot de passe oublié e-mail de renouvellement de mot de passe Nouveau mot de passe Confirmation de changement de mot de passe Confirmation de création de compte e-mail de confirmation de création de compte e-mail de confirmation de modification PLAN DE SITE - ADAGIO v2 Mon Dec 01 2014 LÉGENDE FAQ Contact Mentions légales + CGV, Données perso Presse Recrutement Investisseurs Franchises Landing page Destination Pays / Région / Ville Twitter Facebook Liste des marques Accor / P&V Pierre & Vacances Page de redirection vers hotel du Groupe Accor Page 404 Popin Web Callback Page Accor (gris clair) Page Adagio (gris foncé) Module (ce n'est pas une page) Pile de pages (même template) e-mail envoyé 1. Choix de l'appartement 2. Options 3. Récapitulatif 4. Paiement 5. Confirmation e-mail de confirmation Le Mag Adagio FOOTER LP Segments : Acheteurs, CE, ... e-mail de confirmation de demande de devis LP Offre : Petit prix dès 4 nuits Développement durable Consulter ou Annuler une réservation (sans connexion) Vers "réservations en cours" e-mail de partage de l'aparthotel Gammes Adagio / Adagio Access + Premium? Pour un déplacement professionnel Garantie du meilleur prix Avis clients sur Adagio Long séjour Appartements Services Localisation et Accès Galerie photo / vidéo À proximité Google+ Pinterest PAGES TRANSVERSES partenaire du site
  77. 77. Organisation visuelle La page est bien organisée 2
  78. 78. Des exceptions…
  79. 79. Cohérence le produit capitalise sur 
 l'apprentissage interne 3
  80. 80. Convention le produit capitalise sur l'apprentissage externe 4
  81. 81. Des conventions internationales
  82. 82. Le poids des conventions Clavier AZERTY Clavier Dvorak
  83. 83. Information le produit informe l'internaute et lui répond 5
  84. 84. La bonne info au bon moment
  85. 85. La bonne info au bon moment
  86. 86. Une information à jour
  87. 87. Compréhension Les mots et symboles sont choisis minutieusement 6
  88. 88. Une app officielle qui ne prend pas ses responsabilités
  89. 89. Le sujet sensible des données personnelles
  90. 90. Des partis pris farfelus
  91. 91. Utiliser le concept d’affordance
  92. 92. Assistance Le produit aide et dirige l'internaute 7
  93. 93. Aider la saisie des informations
  94. 94. Beaucoup de données, 
 une comparaison peu évidente
  95. 95. Prendre le point de vue de l’utilisateur
  96. 96. Répondre aux vraies questions des consommateurs
  97. 97. Gestion des erreurs Le produit prévoit que l'internaute se trompe 8
  98. 98. Contextualiser les messages d’erreur
  99. 99. Anticiper les erreurs avant validation du formulaire
  100. 100. Permettre de revenir en arrière
  101. 101. Rapidité L'internaute ne perd pas son temps 9
  102. 102. Contrôle C'est l’internaute qui commande 10
  103. 103. Définir ses préférences
  104. 104. Définir ses préférences
  105. 105. À propos de la connexion via Facebook, Twitter
  106. 106. Accessibilité Un produit facile d’accès pour tous 11
  107. 107. Accessibilité physique…
  108. 108. …Accessibilité technique
  109. 109. …Accessibilité technique
  110. 110. …Accessibilité technique
  111. 111. 11 Règles ergonomiques Architecture : le produit est bien structuré Organisation visuelle : la page est bien organisée Cohérence : le produit capitalise sur l'apprentissage interne Convention : le produit capitalise sur l'apprentissage externe Information : le produit informe l'internaute et lui répond Compréhension : Les mots et symboles sont choisis minutieusement Assistance : Le produit aide et dirige l'internaute Gestion des erreurs : Le produit prévoit que l'internaute se trompe Rapidité : L'internaute ne perd pas son temps Contrôle : C'est l’internaute qui commande Accessibilité : Un produit facile d'accès pour tous 1 2 3 4 5 6 7 8 9 10 11 Source : Ergonomie Web, Amélie Boucher
  112. 112. Excellente ressource sur les bonnes pratiques de conception UX/UI Le Pixel Perfect Precision Handbook 
 de l’agence ustwo : Interaction When creating designs for touch-based devices, always consider how easy they are to operate using fingers and thumbs. We usually base our designs on a minimum touch area of 7mm × 7mm, which is the rough size of the contact area between a finger and screen, and then leave at least a 2mm gap between items so they don’t get pressed accidentally. If you’ve got components that will be primarily thumb-operated, then make those wider, as the average width of an adult thumb is 25mm. Naughty Nice 48Pixel Perfect Precision 
 Touch Targets 7mm 7mm
  113. 113. Il semble que la perfection soit atteinte, non quand il n’y a plus rien à ajouter mais quand il n’y a plus rien à retrancher. Antoine de Saint-Exupéry “ ” Une question, une suggestion ? http://bit.ly/feedback-ux

×