Techniques d’UX & UI Design
•Transferir como PPTX, PDF•
16 gostaram•5,442 visualizações
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)
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (8)
Semelhante a Techniques d’UX & UI Design
Semelhante a Techniques d’UX & UI Design (20)
Mais de Microsoft
Mais de Microsoft (20)
Techniques d’UX & UI Design
- 2. TECHNIQUES D’UX & D’UI DESIGN Bewise by Ai3 Jocelyn Tricoire / Axel Nemeth www.ai3.fr #mstechdays Décideurs informatiques
- 4. Axel NEMETH UX & UI Designer @AxelNemeth axel.nemeth@ai3.fr #mstechdays Décideurs informatiques
- 5. 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
- 7. 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
- 8. Incertitude Certitude CCU Introduction Recherche Création/idéation Production * Représentation de Damien Newman - Central #mstechdays Décideurs informatiques
- 9. 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
- 10. 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
- 11. CREATIVITE Introduction 2+2=? Tina Seelig inGenius: A Crash Course on Creativity #mstechdays Décideurs informatiques
- 12. CREATIVITE Introduction ?+?=4 Tina Seelig inGenius: A Crash Course on Creativity #mstechdays Décideurs informatiques
- 13. SOUL TRAVEL Application de voyage Windows 8.1 #mstechdays Décideurs informatiques
- 14. 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
- 16. PHASE DE RECHERCHE Existant, Interview, Observation, Persona #mstechdays Décideurs informatiques
- 17. EXISTANT Recherche Etudes & statistiques Problèmes / points négatifs Benchmarking Recueil des besoins Scenarii d’usage Ergo+designer #mstechdays Décideurs informatiques
- 18. INTERVIEWS Recherche Parties prenantes & utilisateurs Questionnaires / grille d’entretien Ergonome #mstechdays Décideurs informatiques
- 19. OBSERVATION Recherche Aller plus loin que le simple témoignage Shadowing Fly-on-the-wall Ergonome #mstechdays Décideurs informatiques
- 20. PERSONA Recherche Ergo+designer #mstechdays Cooper, Alan. The Inmates are Running the Asylum. Décideurs informatiques
- 21. PHASE D’IDEATION & DE CREATIVITE Brainstroming, Trending, Six-to-One #mstechdays Décideurs informatiques
- 22. 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
- 23. 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
- 24. TRENDING Idéation / Créa Designer Pictures courtesy of their owners #mstechdays Décideurs informatiques
- 25. 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
- 26. PHASE DE PRODUCTION Maquettage, Tests Utilisateurs, Design #mstechdays Décideurs informatiques
- 27. 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
- 31. 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
- 33. DESIGN Production Designer #mstechdays Grid design Josef Muller-Brockmann - Grid Systems in Graphic Design Décideurs informatiques
- 34. DESIGN Production Designer #mstechdays Grid design Josef Muller-Brockmann - Grid Systems in Graphic Design Décideurs informatiques
- 35. DESIGN Production Designer #mstechdays Responsive design Ethan Marcotte – Responsive Web Design Décideurs informatiques
- 38. DESIGN Production Designer #mstechdays Focus visuel Pyramyd – Petit Manuel de Graphisme Décideurs informatiques
- 43. 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
- 44. 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
Notas do Editor
- 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 : …, ..., …