Techniques d’UX & UI Design

2 878 vues

Publié le

Au travers de la création d'une application Windows 8.1, découvrez comment intégrer efficacement l’ergonomie et le design dans vos développement ainsi que quelques savoir-faire UI & UX indispensables : observation, brainstorming, 6 to 1, prototypage, planches de tendances, grid design, tests utilisateurs.

Speakers : Jocelyn Tricoire (Bewise by Ai3), Axel Nemeth ( Bewise by Ai3)

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

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

Aucune remarque pour cette diapositive
  • JOCEUX : expérience utilisateur (user experience) > Ergonomie > usage, utilisabilité, utilitéUI : interface utilisateur (user interface) > Design > aspect émotionnel et visuelBlabla sur la société RAPIDE
  • JOCEPassionné ergo et arts martiaux, et en ce moment Leroy Merlin
  • AXELPassionné de design et de sport en tout genre (surtout la grimpette)
  • AXELIntroduction : CCU, ergonomie design, créativité/innovationLes 3 phases clefs de création d’interface
  • AXEL5 min
  • JOCEAutant une méthode qu’une philosophieParler des utilisateurs : Je ne suis pas un utilisateur Mon client est rarement un utilisateur > interprétation des usages et besoins Il faut convaincre le décideur que l’utilisateur est la personne principale à satisfaire (pas le marketing ou autre) Besoins latents
  • JOCEGagner en certitude > une modification est moins couteuse en début de projetNe pas avoir peur de se remettre en question en phase de recherche et de créationReprésentation actuelle d’un projet linéaire
  • JOCETrois types d’acteurs > importance majeureMais d’autres profils dans toutes les phases > tout le monde a un bon avis à donner
  • AXELPourquoi la créa : car il vous faudra un ou des éléments différentiateursConcrètement c’est quoi Alliance entre : culture, imagination, ressources, attitude, environnement, connaissances Donc une étape importante les expériences passées (beaware) Etre en équipe pour capitaliser sur une richesse d’expériences différentes (confronter les idées)
  • AXELEn résumé
  • AXELUne infinité de solutions
  • AXELStorytelling : y’a quelques années j’arrive à Toulouse on m’avait parlé d’une ville géniale avec une campagne super sympa avec plein d’activités > une ville très bien, une campagne horrible toute plate pas de sport possible du moins pas les miens, sauf à faire 2h de route. Donc mes attentes ne correspondaient pas au lieu. Idem sur un voyage > on peut être déçu > car les attentes ne correspondaient pas à la réalité > ou plutôt c’est la réalité du lieu qui ne correspond pas à ce que j’attendais donc le lieu était mal choisi. JOCE > Nous sommes partis de cette idée pour détailler les différentes phases qui constituent un projet 10 min
  • JOCEConcrètement pour aujourd’hui voilà le brief que l’on se donne. Donc si on prend ce brief tel quel que l’on applique les concepts ergonomiques de Windows 8.1 que vous connaissez bien on arrive quelque chose d’assez conventionnel
  • JOCEOn se démarque pas !
  • JOCEOn découpe du coup en différentes phases15 min
  • JOCEEtudes consommateurs (IPSOS, Gartner, ..)Recherches marketingEnquête de satisfactionBenchmarking : identifier les meilleurs pratiques pour une activité donnée (existant, concurrence, …)Le plus large possible (ne pas se retreindre à un seul domaine)DANS NOTRE EXEMPLE : étude des sites web existants
  • JOCEEcoute active5 Why’sAteliers (collages)> Avantage partie d’évangélisation possible pendant cette étapeDANS NOTRE EXEMPLE : interview de personnes qui aiment voyager (site web préféré, habitudes…)
  • JOCE
  • AXELAlan Cooper 1999 Persona il représente une cible utilisateur/ un groupe
  • AXEL25 min
  • AXELStorytelling : y’a quelques années j’arrive à Toulouse on m’avait parlé d’une ville géniale avec une campagne super sympa avec plein d’activités > une ville très bien, une campagne horrible toute plate pas de sport possible du moins pas les miens, sauf à faire 2h de route. Donc mes attentes ne correspondaient pas au lieu. AXELInterdits : jugements, prises de positionsPour aller plus loin : Tableau à Post-It, brainstorming masqué, tour de table, brainstorming parlementaireDANS NOTRE EXEMPLE : la question était comment choisit-on un voyage ? Il est ressorti : des éléments très variés, actualité (coupe du monde), âge, type, activités, culture, humanitaire, phobies, nourriture…
  • AXELPeut être fait en continu sur des sites web, mais aussi des expositions, des musées culture perso > classer les différentes tendances et établir leur pérénité
  • On s’occupe de tous les domaines et surtout de ce qui ne correspond pas à ce que l’on fait.
  • JOCEhttp://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces/> Ajouter image
  • JOCE35 min
  • JOCE
  • JOCE
  • JOCE
  • AXEL
  • JOCEAméliorer le travail effectuerProuver l’efficacité des hypothèses(option) Accompagner le changementFaire des tests ce n’est pas être testé :Ni pour la personne qui testeNi pour l’ergonomeAccepter les erreurs commisesFiltrerCorriger sans tout casserTester à nouveauExemple de test : Accueil de l’utilisateurExplications du dérouléObservation d’un écran principalManipulation libreManipulation avec scénarioRemerciement et échange libre
  • AXELPrincipe itératif après ergo et test on lance le design.40 min
  • AXEL
  • AXEL
  • AXEL
  • AXELOn affiche pas tout stop à l’interface rempli > on favorise l’intéraction
  • AXELHiérarchie visuelle
  • AXEL
  • AXEL
  • AXEL
  • JOCE + AXEL Ne pas foncer tête baisséePenser usage / utilisateurPhase d’idéationprimordialePleins de savoirs / méthodes à tester : …, ..., …
  • Techniques d’UX & UI Design

    1. 1. TECHNIQUES D’UX & D’UI DESIGN Bewise by Ai3 Jocelyn Tricoire / Axel Nemeth www.ai3.fr #mstechdays Décideurs informatiques
    2. 2. Jocelyn TRICOIRE Responsable Solution UX @JocelynTricoir e jocelyn.tricoire@ai3.fr #mstechdays Décideurs informatiques
    3. 3. Axel NEMETH UX & UI Designer @AxelNemeth axel.nemeth@ai3.fr #mstechdays Décideurs informatiques
    4. 4. 1 3 4 Introduction générale #mstechdays 2 Phase de recherche Phase d’idéation et de créativité Phase de production Décideurs informatiques
    5. 5. INTRODUCTION GENERALE CCU & Créativité #mstechdays Décideurs informatiques
    6. 6. CCU Introduction  Philosophie et démarche de conception , où les besoins, les attentes et les caractéristiques des utilisateurs finaux sont pris en compte à chaque étape du processus de développement d'un produit Norme ISO 9241-210 #mstechdays Décideurs informatiques
    7. 7. Incertitude Certitude CCU Introduction Recherche Création/idéation Production * Représentation de Damien Newman - Central #mstechdays Décideurs informatiques
    8. 8. CCU Introduction  UX DESIGNER Expérience utilisateur, ergonome UI DESIGNER Expérience visuelle et émotionnelle, graphisme Norme ISO 9241-210 #mstechdays Décideurs informatiques FRONT-END DEVELOPPER Intégration et animations
    9. 9. CREATIVITE Introduction  Capacité d'adapter les connaissances, expériences de la vie et courants de pensées, de les exploiter d'une manière nouvelle et ainsi de rompre avec les modèles existants. Tina Seelig inGenius: A Crash Course on Creativity #mstechdays Décideurs informatiques
    10. 10. CREATIVITE Introduction  2+2=? Tina Seelig inGenius: A Crash Course on Creativity #mstechdays Décideurs informatiques
    11. 11. CREATIVITE Introduction  ?+?=4 Tina Seelig inGenius: A Crash Course on Creativity #mstechdays Décideurs informatiques
    12. 12. SOUL TRAVEL Application de voyage Windows 8.1 #mstechdays Décideurs informatiques
    13. 13. BRIEF Soul Travel #mstechdays Agence qui dispose d’un catalogue de voyages dans différents pays et à différents prix. Et qui souhaite une application Windows 8.1 Décideurs informatiques
    14. 14. #mstechdays Décideurs informatiques
    15. 15. PHASE DE RECHERCHE Existant, Interview, Observation, Persona #mstechdays Décideurs informatiques
    16. 16. EXISTANT Recherche Etudes & statistiques Problèmes / points négatifs Benchmarking Recueil des besoins Scenarii d’usage Ergo+designer #mstechdays Décideurs informatiques
    17. 17. INTERVIEWS Recherche Parties prenantes & utilisateurs Questionnaires / grille d’entretien Ergonome #mstechdays Décideurs informatiques
    18. 18. OBSERVATION Recherche Aller plus loin que le simple témoignage Shadowing Fly-on-the-wall Ergonome #mstechdays Décideurs informatiques
    19. 19. PERSONA Recherche Ergo+designer #mstechdays  Cooper, Alan. The Inmates are Running the Asylum. Décideurs informatiques
    20. 20. PHASE D’IDEATION & DE CREATIVITE Brainstroming, Trending, Six-to-One #mstechdays Décideurs informatiques
    21. 21. BRAINSTORMIN G Idéation / Créa Tout le monde #mstechdays  Alex F. Osborn en 1953 1 seul sujet, 1 responsable des débats Tout est permis Chercher la quantité et non la qualité Le + : la pluridisciplinarité Osborn, Alex F. Applied Imagination: Principles and Procedures of Creative Problem Solving. Décideurs informatiques
    22. 22. TRENDING Idéation / Créa Veille en continu Planches de tendances basées sur des valeurs et des concepts formels génériques Designer #mstechdays Décideurs informatiques
    23. 23. TRENDING Idéation / Créa Designer Pictures courtesy of their owners #mstechdays Décideurs informatiques
    24. 24. James Downes en 2010 Papier & crayon 6 versions avec temps limité (5 – 10 min) 1 version plus détaillée SIX-TO-ONE Idéation / Créa Tout le monde #mstechdays  http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces/ Décideurs informatiques
    25. 25. PHASE DE PRODUCTION Maquettage, Tests Utilisateurs, Design #mstechdays Décideurs informatiques
    26. 26. Maquettes fils de fer Pas de graphisme Balsamiq, PowerPoint, SketchFlow MAQUETTAGE Production Ergonome #mstechdays  http://msdn.microsoft.com/en-US/windows/apps/bg125377 Décideurs informatiques
    27. 27. MAQUETTAGE Production #mstechdays Décideurs informatiques
    28. 28. MAQUETTAGE Production #mstechdays Décideurs informatiques
    29. 29. MAQUETTAGE SketchFlow Production Ergonome #mstechdays  http://msdn.microsoft.com/en-US/windows/apps/bg125377 Décideurs informatiques
    30. 30. Améliorer / valider les hypothèses Tests des prototypes, de l’application Le plus souvent possible Détecter les erreurs & corriger TESTS UTILISATEURS Production Ergonome #mstechdays  http://msdn.microsoft.com/en-US/windows/apps/bg125377 Décideurs informatiques
    31. 31. DESIGN Production Designer #mstechdays Décideurs informatiques
    32. 32. DESIGN Production Designer #mstechdays  Grid design Josef Muller-Brockmann - Grid Systems in Graphic Design Décideurs informatiques
    33. 33. DESIGN Production Designer #mstechdays  Grid design Josef Muller-Brockmann - Grid Systems in Graphic Design Décideurs informatiques
    34. 34. DESIGN Production Designer #mstechdays  Responsive design Ethan Marcotte – Responsive Web Design Décideurs informatiques
    35. 35. DESIGN Production White space #mstechdays Décideurs informatiques
    36. 36. DESIGN Production White space #mstechdays Décideurs informatiques
    37. 37. DESIGN Production Designer #mstechdays  Focus visuel Pyramyd – Petit Manuel de Graphisme Décideurs informatiques
    38. 38. #mstechdays Décideurs informatiques
    39. 39. #mstechdays Décideurs informatiques
    40. 40. #mstechdays Décideurs informatiques
    41. 41. #mstechdays Décideurs informatiques
    42. 42. CONCLUSION The end #mstechdays “I have not failed. I've just found 10,000 ways that won't work.” Thomas A. Edison "If I had asked people what they wanted, they would have said faster horses." Henry Ford Décideurs informatiques
    43. 43. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Décideurs informatiques
    44. 44. Digital is business

    ×