Techniques d’UX & UI Design
-
Upload
microsoft-developpeurs -
Category
Technology
-
view
978 -
download
1
description
Transcript of Techniques d’UX & UI Design
![Page 1: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/1.jpg)
![Page 2: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/2.jpg)
Décideurs informatiques#mstechdays
TECHNIQUES D’UX & D’UI DESIGN
Bewise by Ai3
Jocelyn Tricoire / Axel Nemethwww.ai3.fr
![Page 5: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/5.jpg)
Décideurs informatiques#mstechdays
1
Introduction générale
2
Phase de recherche
3
Phase d’idéation et de créativité
4
Phase de production
![Page 6: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/6.jpg)
Décideurs informatiques#mstechdays
INTRODUCTION GENERALE
CCU & Créativité
![Page 7: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/7.jpg)
Décideurs informatiques#mstechdays
CCUPhilosophie 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
Introduction
Norme ISO 9241-210
![Page 8: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/8.jpg)
Décideurs informatiques#mstechdays
CCUIntroduction
Incertitude Certitude
RechercheCréation/idéation Production
* Représentation de Damien Newman - Central
![Page 9: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/9.jpg)
Décideurs informatiques#mstechdays
CCUUX DESIGNERExpérience utilisateur, ergonome
Introduction
UI DESIGNERExpérience visuelle et émotionnelle, graphisme
FRONT-END DEVELOPPERIntégration et animations
Norme ISO 9241-210
![Page 10: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/10.jpg)
Décideurs informatiques#mstechdays
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.
CREATIVITEIntroduction
Tina Seelig inGenius: A Crash Course on Creativity
![Page 11: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/11.jpg)
Décideurs informatiques#mstechdays
2+2=?CREATIVITEIntroduction
Tina Seelig inGenius: A Crash Course on Creativity
![Page 12: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/12.jpg)
Décideurs informatiques#mstechdays
?+?=4CREATIVITEIntroduction
Tina Seelig inGenius: A Crash Course on Creativity
![Page 13: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/13.jpg)
Décideurs informatiques#mstechdays
SOUL TRAVEL
Application de voyageWindows 8.1
![Page 14: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/14.jpg)
Décideurs informatiques#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
BRIEFSoul Travel
![Page 15: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/15.jpg)
Décideurs informatiques#mstechdays
![Page 16: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/16.jpg)
Décideurs informatiques#mstechdays
PHASE DE RECHERCHE
Existant, Interview,Observation, Persona
![Page 17: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/17.jpg)
Décideurs informatiques#mstechdays
Etudes & statistiquesProblèmes / points négatifsBenchmarkingRecueil des besoinsScenarii d’usage
EXISTANTRecherche
Ergo+designer
![Page 18: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/18.jpg)
Décideurs informatiques#mstechdays
Parties prenantes & utilisateursQuestionnaires / grille d’entretien
INTERVIEWSRecherche
Ergonome
![Page 19: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/19.jpg)
Décideurs informatiques#mstechdays
Aller plus loin que le simple témoignage ShadowingFly-on-the-wall
OBSERVATIONRecherche
Ergonome
![Page 20: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/20.jpg)
Décideurs informatiques#mstechdays
PERSONARecherche
Cooper, Alan. The Inmates are Running the Asylum.Ergo+designer
![Page 21: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/21.jpg)
Décideurs informatiques#mstechdays
PHASE D’IDEATION & DE CREATIVITE
Brainstroming, Trending,Six-to-One
![Page 22: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/22.jpg)
Décideurs informatiques#mstechdays
Alex F. Osborn en 19531 seul sujet, 1 responsable des débatsTout est permisChercher la quantité et non la qualitéLe + : la pluridisciplinarité
BRAINSTORMINGIdéation / Créa
Osborn, Alex F. Applied Imagination: Principles and Procedures of Creative Problem Solving.Tout le monde
![Page 23: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/23.jpg)
Décideurs informatiques#mstechdays
Veille en continuPlanches de tendances basées sur des valeurs et des concepts formels génériques
TRENDINGIdéation / Créa
Designer
![Page 24: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/24.jpg)
Décideurs informatiques#mstechdays
TRENDINGIdéation / Créa
Pictures courtesy of their ownersDesigner
![Page 25: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/25.jpg)
Décideurs informatiques#mstechdays
James Downes en 2010Papier & crayon6 versions avec temps limité (5 – 10 min)1 version plus détaillée
SIX-TO-ONEIdéation / Créa
http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces/Tout le monde
![Page 26: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/26.jpg)
Décideurs informatiques#mstechdays
PHASE DE PRODUCTION
Maquettage, Tests Utilisateurs, Design
![Page 27: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/27.jpg)
Décideurs informatiques#mstechdays
Maquettes fils de ferPas de graphismeBalsamiq, PowerPoint, SketchFlow
MAQUETTAGEProduction
http://msdn.microsoft.com/en-US/windows/apps/bg125377Ergonome
![Page 28: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/28.jpg)
Décideurs informatiques#mstechdays
MAQUETTAGEProduction
![Page 29: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/29.jpg)
Décideurs informatiques#mstechdays
MAQUETTAGEProduction
![Page 30: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/30.jpg)
Décideurs informatiques#mstechdays
SketchFlowMAQUETTAGEProduction
http://msdn.microsoft.com/en-US/windows/apps/bg125377Ergonome
![Page 31: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/31.jpg)
Décideurs informatiques#mstechdays
Améliorer / valider les hypothèsesTests des prototypes, de l’applicationLe plus souvent possibleDétecter les erreurs & corriger
TESTS UTILISATEURSProduction
http://msdn.microsoft.com/en-US/windows/apps/bg125377Ergonome
![Page 32: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/32.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
Designer
![Page 33: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/33.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
Grid design Josef Muller-Brockmann - Grid Systems in Graphic DesignDesigner
![Page 34: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/34.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
Grid design Josef Muller-Brockmann - Grid Systems in Graphic DesignDesigner
![Page 35: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/35.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
Responsive design Ethan Marcotte – Responsive Web DesignDesigner
![Page 36: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/36.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
White space
![Page 37: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/37.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
White space
![Page 38: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/38.jpg)
Décideurs informatiques#mstechdays
DESIGNProduction
Focus visuel Pyramyd – Petit Manuel de GraphismeDesigner
![Page 39: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/39.jpg)
Décideurs informatiques#mstechdays
![Page 40: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/40.jpg)
Décideurs informatiques#mstechdays
![Page 41: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/41.jpg)
Décideurs informatiques#mstechdays
![Page 42: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/42.jpg)
Décideurs informatiques#mstechdays
![Page 43: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/43.jpg)
Décideurs informatiques#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
CONCLUSIONThe end
![Page 44: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/44.jpg)
Décideurs informatiques#mstechdays
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 !
Donnez votre avis !
![Page 45: Techniques d’UX & UI Design](https://reader033.fdocument.pub/reader033/viewer/2022061115/5465007aaf7959e3078b5659/html5/thumbnails/45.jpg)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Digital is business