Conception
centrée utilisateur
Johanna Rowe Calvi
Interaction & User Experience
Designer chez Expertime
MVP Emerging Exper...
partie 1
EXPERIENCE UTILISATEUR
ET DESIGN D’INTERACTION
1 Problématique
Résumer la problématique en une phrase
[ ]
2 Recherches
2Accumuler un maximum d’informations
[ ]
3 Questions
Se poser les questions nécessaires
[ ]
4 Réponses
Confronter ses réponses
[ ]
5 Storyboard
Raconter l’histoire de l’expérience
utilisateurs imaginée.[ ]
6 Atelier
Rassembler et échanger
de manière dynamique et ludique[ ]
7 Identification
Analyser les résultats du workshop
[ ]
8 Idéation individuelle
Trouver des concepts et creuser les idées
[ ]
9 Consolidation
Observer son travail de manière critique
[ ]
10 Prototype
Prototypage dans le but d’échanger
[ ]
Illustrator
Invision
Axure
Balsamiq
Sketch
Marvel
Arduino
Impression 3D
Papier et ciseaux
Clay
Mousse de
polyuréthane
DANS...
11 Présentation
Rendre palpable votre projet pour
vos prospects, clients et utilisateurs[ ]
Workflow
User
Centered
Design
Qui et comment ?
Soi-même
[ ]
Sous-traiter
[ ]
Embaucher
[ ]
Freelance
Agence
Le designer a toute la connaissance sur
l’UX sur laquelle se ...
partie 2
IDENTITÉ DE MARQUE
12 Identité mémorable
Reconnaissable, identifiable au premier
Regard avec une vraie signification[ ]
13 Charte graphique
Typo Couleur Bg Icônes
LES ELEMENTS CLEFS
LA TYPOGRAPHIE
Serif
LA TYPOGRAPHIE
Sans Serif
LA TYPOGRAPHIE
Cursive
LA TYPOGRAPHIE
Monospace
typement.com
LA TYPOGRAPHIE
fontsquirrel.com
myfonts.com/WhatTheFont/
LA COULEUR
Chaude/Froide
LA COULEUR
Primaire/secondaire
LA COULEUR
Pastel (Flat)
LA COULEUR
Acidulé
color.adobe.com
LA COULEUR
flatuicolors.com
tintui.com
LE BACKGROUND
Aplat/Dégradé
LE BACKGROUND
Pattern
LE BACKGROUND
Photo
LE BACKGROUND
Texture
thepatternlibrary.com
LE BACKGROUND
qrohlf.com/trianglify-generator
www.transparenttextures.com
LES ICÔNES
Pleine
LES ICÔNES
Contour
LES ICÔNES
Couleur
LES ICÔNES
Detaillé
icons8.com
LES ICÔNES
Iconmonstr.com
flaticons.net
Segoe MDL2
UI KIT
• Typo : Linéale
• Couleur : Pastel
• Background : Pattern
• Icône : Pleine
LA DIRECTION ARTISTIQUE
Lisible, Clair, Moderne
• Typo : Serif
• Couleur : Gold
• Background : Trame
• Icône : Contour/Détaillées
LA DIRECTION ARTISTIQUE
Expressif, Carac...
Q ui et comment ?
C’est la solution qui semble être la moins
couteuse au départ.
!
Soi-même
[ ]
Sous-traiter
[ ]
Embaucher
[ ]
Freelance
Age...
partie 4
UNE COMMUNICATION
SANS FAILLES
14Communication
La communication est au cœur de la réussite. Les équipes techniques
et créatives doivent trouver des solutions et compromi...
Ces conseils pour vous faciliter la vie afin que
vos matins ressemblent un peu plus souvent
à ça…
@johanna_rowe
design in progress
design in progress
rowejohanna
johannarowe.com
jrowe@expertime.com
JOHANNA ROWE CALVI
@Ai...
Conception centrée utilisateur en 14 étapes - NUI Day 2015
Conception centrée utilisateur en 14 étapes - NUI Day 2015
Prochain SlideShare
Chargement dans…5
×

Conception centrée utilisateur en 14 étapes - NUI Day 2015

8 vues

Publié le

Session présentée par Johanna Rowe-Calvi (Expertime) et Benjamin Launay (Naviso Dev)

Une expérience utilisateur optimale est essentielle pour la réussite d’un projet. Que ce « produit final » soit une interface, un objet, un service ou un mélange de tout ça, le ressentit utilisateur doit être au cœur de toutes les démarches. Cette session est orientée méthodologie. Le design d’interaction, les ateliers utilisateurs, les séances de créativité, les outils, l’identité de marque et le design graphique sont les sujets qui seront abordés.

http://www.nuiday.com/nui-day-2015/programme/conception-centree-utilisateur/

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive
  • En 14 étapes
  • A quel besoin doit-on répondre en termes de besoin
  • En quelques lignes
    Quelles sont la/les problématiques auxquelles vous souhaitez répondre avec votre solution
    A quel besoin doit-on répondre en termes de design
  • Faire des recherches dans tous les endroits potentiellements interessants dans le cadre de votre projet. Livre, musées, expositions, magasin, nature, lieux publiques. Etc
    Concurrence, inspirations, recherches sur la problématiques et les solutions existantes actuellement (même si dans un autre domaine, pour d’autres utilisateurs etc.)
    Solutions dans l’histoire
    Ça pourrait aussi être le moment d’observer autour de vous, de poser des questions.
  • Où (mobilité, salon, en atelier sale,…) , quand, comment, qui, pour qui (type d’utilisateur/combien d’utilisateurs/combien d’utilisateurs simultanés), pourquoi, quand (moment, temps d’utilisation, durée pour atteindre une étape précise)
  • Enoncer les réponses et laisser réagir les clients/utilisateurs. Par mails, téléphones, en personne mais plus en mode présentation
    Ne pas influencer les réponses et les réactions.
  • Préparer l’histoire à raconter
  • Raconter une histoire.
    Storyboard comparatif/ storyboard explicatif
    Photo/dessins
  • Les ateliers sont un moment clé d’échange ouvert sans jugement
    Avec des utilisateurs de tous types. Différentes visions, différents âges, etc.
    Ne pas mettre un supérieur hiérarchique dans la salle durant ce type d’échange. Guider et faire parler toutes les personnes et calmer les personnes de type « leader ».
  • Séance de créativité, brainstorming, atelier plus classiques
    Lego Serious Play
    Cela doit être un moment léger et ludique pour les utilisateurs. Ils seront plus a même de revenir et répondre vite à vos questions. Ils sauront se rendre disponible et pousser votre projet autour d’eux.
    Lego/pate a modeler/decoupage et collage (en petites équipes)
  • L’ensemble des problématiques, des besoins
    Les utilisateurs : Vos soutiens, des personnes qui sont engagées et qui broadcasteront les infos
  • Nouveaux besoins qui ont émergé lors du workshop. L’importance et l’ordre des actions doit être revu. De nouvelles recherches pour compléter.
    On est toujours dans une phase d’ouverture.
  • Idéation personnelle du designer. Phase de créativité et toujours d’ouverture.
  • Concepts + idées pour chaque concepts. Elargir le champs, penser à tout, se laisser libre de tout. S’ouvrir et rêver.
    Ne pas hésiter à jeter et recommencer
    Le but étant de ne pas se laisser submerger par les contraintes techniques à cette étape mais de s’immerger dans ses idées.
  • Restriction, problématiques techniques, coût, ordre d’importances (lotissement) etc.
  • - C’est l’étape où on va écrémer les idées et les concepts. On prendra une sélection qui parait judicieuse au regard des contraintes dont on est conscient (coût, temps, pertinent en termes de business).
    - Il faudra aussi établir ce qui parait être essentiel en Lot 1/lot 2/… puis V1/V2/… Cette seconde étape se fait évidement avec les autres membres de l’équipe
  • App : Sans développement ni graphisme
  • Prototypage type Pentotype/Invision. Permet d’échanger, mettre dans les mains un prototype manipulable à moindre coût, garder la main sur la conception (ne pas donner la main sur la modification du prototype/wireframe)
    Pour réaliser quelque chose de testable.
  • La seule limite est l’imagination pour les prototypes
  • Mise dans les mains des utilisateurs
  • Présenter, écouter, échanger, noter
    Récupérer les feedbacks et les traiter (boucle dans le workflow)
    Et surtout ne pas faire l’autruche, il s’agit de véritable écoute
  • Mais tout ça n’est pas linéaire
  • Et on reboucle sur d’autres étapes selon le résultat. La phase de design n’est pas forcément linéaire et chaque étape peut nécessiter un temps variable selon les projets et l’importance des problématiques à solutionner.
  • Vulgairement UX designer
    Source des salaires : sondage association designer interactif
  • Axure : la machine de guerre anti créatifs
  • Axure : la machine de guerre anti créatifs
  • Axure : la machine de guerre anti créatifs
  • Créer un logo mémorable qui symbolise l’essence de votre marque.
    Nike : le dynamisme (déesse grecque de la victoire, Niké. C’était une déesse ailée capable de se déplacer très vite.)
    Apple : Steve Jobs l’envie de croquer dans la pomme. Une marque désirable (Bien qu’il s’agisse d’un hommage a Isaac Newton et de l’épisode de la pomme)
  • Créer un logo mémorable qui symbolise l’essence de votre marque.
    Nike : le dynamisme (déesse grecque de la victoire, Niké. C’était une déesse ailée capable de se déplacer très vite.)
    Apple : Steve Jobs l’envie de croquer dans la pomme. Une marque désirable (Bien qu’il s’agisse d’un hommage a Isaac Newton et de l’épisode de la pomme)
  • Ces quatre éléments ont un rôle clef dans l’image perçue de votre application. Ils doivent être en parfait accord avec l’image de marque que vous aurez défini en amont.
  • Nous allons voir ensemble qu’un grand nombre de possibilités s’offrent à vous dans le choix de ces assets.
    Chaque famille de typo à son histoire et porte donc un message fort qui sera ressenti par vos utilisateurs.
  • Froid = B2B (Corporate)
    Chaud = B2C
  • Couleurs primaires + secondaire = lié à l’univers de l’enfance.
    Google = image de marque liée à l’enfance, évoque la simplicité, l’évidence.
  • On peut aussi classer les couleurs par tonalité
    Couleur tendances
    Flat color > Vine
  • Acidulé > Candy Crush
    On se rapproche des couleurs primaires, monde du jeu
    Évoque l’éveil, l’énergie.
  • Urza > Photo Blur
  • Charte graphique : simple, efficace, représentative, cohérente, différenciante.
    Prendre 1 écran représentatif de votre premier produit numérique pour le réaliser
  • Plus le graphiste déclinera sur un grand nombre de page, plus il sera facile pour les autres (intégration).
    Ce peu être un profil différent et bien moins cher qui fait cette étape.
  • Plus vulgairement UI designer
  • VAS AU SLIDE SUIVANT
  • Une communication constante avec l’équipe technique.
  • Conception centrée utilisateur en 14 étapes - NUI Day 2015

    1. 1. Conception centrée utilisateur Johanna Rowe Calvi Interaction & User Experience Designer chez Expertime MVP Emerging Experiences Benjamin Launay User Interface designer at Naviso Dev MVP Windows Development plateform
    2. 2. partie 1 EXPERIENCE UTILISATEUR ET DESIGN D’INTERACTION
    3. 3. 1 Problématique
    4. 4. Résumer la problématique en une phrase [ ]
    5. 5. 2 Recherches
    6. 6. 2Accumuler un maximum d’informations [ ]
    7. 7. 3 Questions
    8. 8. Se poser les questions nécessaires [ ]
    9. 9. 4 Réponses
    10. 10. Confronter ses réponses [ ]
    11. 11. 5 Storyboard
    12. 12. Raconter l’histoire de l’expérience utilisateurs imaginée.[ ]
    13. 13. 6 Atelier
    14. 14. Rassembler et échanger de manière dynamique et ludique[ ]
    15. 15. 7 Identification
    16. 16. Analyser les résultats du workshop [ ]
    17. 17. 8 Idéation individuelle
    18. 18. Trouver des concepts et creuser les idées [ ]
    19. 19. 9 Consolidation
    20. 20. Observer son travail de manière critique [ ]
    21. 21. 10 Prototype
    22. 22. Prototypage dans le but d’échanger [ ]
    23. 23. Illustrator Invision Axure Balsamiq Sketch Marvel Arduino Impression 3D Papier et ciseaux Clay Mousse de polyuréthane DANS UN ATELIERDEVANT SON PC Et tant d’autres… LEGO Pâte à modeler
    24. 24. 11 Présentation
    25. 25. Rendre palpable votre projet pour vos prospects, clients et utilisateurs[ ]
    26. 26. Workflow
    27. 27. User Centered Design
    28. 28. Qui et comment ?
    29. 29. Soi-même [ ] Sous-traiter [ ] Embaucher [ ] Freelance Agence Le designer a toute la connaissance sur l’UX sur laquelle se base les autres métiers. Les livrables doivent-être très clair et complet pour vous. Stagiaire Designer d’interaction et d’expériences numériques C’est la solution qui semble être la moins couteuse au départ. Être curieux, inventif, créatif, imaginatif savoir anticiper sur les usages à venir, s’intéresser aux utilisateurs pour faciliter ou embellir leur quotidien. DESIGNER D’INTERACTION ET D’EXPÉRIENCES NUMÉRIQUES Pour les ateliers utilisateur, les séances de créativité, l’organisation des brainstorming, les wireframes, les storyboards. C’est le profil garant de l’expérience utilisateur. !
    30. 30. partie 2 IDENTITÉ DE MARQUE
    31. 31. 12 Identité mémorable
    32. 32. Reconnaissable, identifiable au premier Regard avec une vraie signification[ ]
    33. 33. 13 Charte graphique
    34. 34. Typo Couleur Bg Icônes LES ELEMENTS CLEFS
    35. 35. LA TYPOGRAPHIE Serif
    36. 36. LA TYPOGRAPHIE Sans Serif
    37. 37. LA TYPOGRAPHIE Cursive
    38. 38. LA TYPOGRAPHIE Monospace
    39. 39. typement.com LA TYPOGRAPHIE fontsquirrel.com myfonts.com/WhatTheFont/
    40. 40. LA COULEUR Chaude/Froide
    41. 41. LA COULEUR Primaire/secondaire
    42. 42. LA COULEUR Pastel (Flat)
    43. 43. LA COULEUR Acidulé
    44. 44. color.adobe.com LA COULEUR flatuicolors.com tintui.com
    45. 45. LE BACKGROUND Aplat/Dégradé
    46. 46. LE BACKGROUND Pattern
    47. 47. LE BACKGROUND Photo
    48. 48. LE BACKGROUND Texture
    49. 49. thepatternlibrary.com LE BACKGROUND qrohlf.com/trianglify-generator www.transparenttextures.com
    50. 50. LES ICÔNES Pleine
    51. 51. LES ICÔNES Contour
    52. 52. LES ICÔNES Couleur
    53. 53. LES ICÔNES Detaillé
    54. 54. icons8.com LES ICÔNES Iconmonstr.com flaticons.net Segoe MDL2
    55. 55. UI KIT
    56. 56. • Typo : Linéale • Couleur : Pastel • Background : Pattern • Icône : Pleine LA DIRECTION ARTISTIQUE Lisible, Clair, Moderne
    57. 57. • Typo : Serif • Couleur : Gold • Background : Trame • Icône : Contour/Détaillées LA DIRECTION ARTISTIQUE Expressif, Caractère, Luxe
    58. 58. Q ui et comment ?
    59. 59. C’est la solution qui semble être la moins couteuse au départ. ! Soi-même [ ] Sous-traiter [ ] Embaucher [ ] Freelance Agence Stagiaire Designer d’interaction et d’expériences numériques DIRECTEUR ARTISTIQUE ET GRAPHISTE Pour le logo, charte graphique, style graphique et iconographie de vos projets Nécessite de l’engagement en temps de votre part surtout pour l’identité. Les livrables doivent-être très clairs et complets pour vous. Savoir observer, analyser, faire simple, être créatif, être indépendant sur ses outils, savoir présenter des concepts, travailler en équipe, avoir le sens du détail.
    60. 60. partie 4 UNE COMMUNICATION SANS FAILLES
    61. 61. 14Communication
    62. 62. La communication est au cœur de la réussite. Les équipes techniques et créatives doivent trouver des solutions et compromis ensemble[ ]
    63. 63. Ces conseils pour vous faciliter la vie afin que vos matins ressemblent un peu plus souvent à ça…
    64. 64. @johanna_rowe design in progress design in progress rowejohanna johannarowe.com jrowe@expertime.com JOHANNA ROWE CALVI @AieAieEye AieAieEye AieAieEye AieAieEye aieaieeye.com benjamin.launay@naviso.com BENJAMIN LAUNAY

    ×