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)
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
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
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
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
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
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
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
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.
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 : …, ..., …