TECHNIQUES
D’UX & D’UI DESIGN

Bewise by Ai3
Jocelyn Tricoire / Axel Nemeth
www.ai3.fr

#mstechdays

Décideurs informatiqu...
Jocelyn
TRICOIRE
Responsable
Solution UX

@JocelynTricoir
e
jocelyn.tricoire@ai3.fr

#mstechdays

Décideurs informatiques
Axel NEMETH
UX & UI
Designer

@AxelNemeth
axel.nemeth@ai3.fr

#mstechdays

Décideurs informatiques
1

3

4

Introduction
générale

#mstechdays

2
Phase de
recherche

Phase
d’idéation et de
créativité

Phase de
production
...
INTRODUCTION
GENERALE

CCU &
Créativité

#mstechdays

Décideurs informatiques
CCU
Introduction



Philosophie et démarche de conception , où les
besoins, les attentes et les caractéristiques des
util...
Incertitude

Certitude

CCU
Introduction

Recherche Création/idéation

Production
* Représentation de Damien Newman - Cent...
CCU
Introduction



UX DESIGNER
Expérience
utilisateur,
ergonome

UI DESIGNER
Expérience
visuelle et
émotionnelle,
graphi...
CREATIVITE
Introduction



Capacité d'adapter les connaissances,
expériences de la vie et courants de
pensées, de les exp...
CREATIVITE
Introduction



2+2=?

Tina Seelig inGenius: A Crash Course on Creativity

#mstechdays

Décideurs informatique...
CREATIVITE
Introduction



?+?=4

Tina Seelig inGenius: A Crash Course on Creativity

#mstechdays

Décideurs informatique...
SOUL
TRAVEL

Application de voyage
Windows 8.1

#mstechdays

Décideurs informatiques
BRIEF
Soul Travel

#mstechdays

Agence qui dispose d’un catalogue de
voyages dans différents pays et à différents
prix. Et...
#mstechdays

Décideurs informatiques
PHASE
DE RECHERCHE

Existant, Interview,
Observation, Persona

#mstechdays

Décideurs informatiques
EXISTANT
Recherche

Etudes & statistiques
Problèmes / points négatifs
Benchmarking
Recueil des besoins
Scenarii d’usage

E...
INTERVIEWS
Recherche

Parties prenantes & utilisateurs
Questionnaires / grille d’entretien

Ergonome

#mstechdays

Décideu...
OBSERVATION
Recherche

Aller plus loin que le simple témoignage
Shadowing
Fly-on-the-wall

Ergonome

#mstechdays

Décideur...
PERSONA
Recherche

Ergo+designer

#mstechdays



Cooper, Alan. The Inmates are Running the Asylum.

Décideurs informatiqu...
PHASE
D’IDEATION &
DE CREATIVITE

Brainstroming, Trending,
Six-to-One

#mstechdays

Décideurs informatiques
BRAINSTORMIN
G
Idéation / Créa

Tout le monde

#mstechdays



Alex F. Osborn en 1953
1 seul sujet, 1 responsable des déba...
TRENDING
Idéation / Créa

Veille en continu
Planches de tendances basées sur des
valeurs et des concepts formels
générique...
TRENDING
Idéation / Créa

Designer
Pictures courtesy of their owners

#mstechdays

Décideurs informatiques
James Downes en 2010
Papier & crayon
6 versions avec temps limité (5 – 10 min)
1 version plus détaillée

SIX-TO-ONE
Idéati...
PHASE
DE PRODUCTION

Maquettage,
Tests Utilisateurs, Design

#mstechdays

Décideurs informatiques
Maquettes fils de fer
Pas de graphisme
Balsamiq, PowerPoint, SketchFlow

MAQUETTAGE
Production

Ergonome

#mstechdays



...
MAQUETTAGE
Production

#mstechdays

Décideurs informatiques
MAQUETTAGE
Production

#mstechdays

Décideurs informatiques
MAQUETTAGE

SketchFlow

Production

Ergonome

#mstechdays



http://msdn.microsoft.com/en-US/windows/apps/bg125377

Décid...
Améliorer / valider les hypothèses
Tests des prototypes, de l’application
Le plus souvent possible
Détecter les erreurs & ...
DESIGN
Production

Designer

#mstechdays

Décideurs informatiques
DESIGN
Production

Designer

#mstechdays



Grid design
Josef Muller-Brockmann - Grid Systems in Graphic Design

Décideur...
DESIGN
Production

Designer

#mstechdays



Grid design
Josef Muller-Brockmann - Grid Systems in Graphic Design

Décideur...
DESIGN
Production

Designer

#mstechdays



Responsive design
Ethan Marcotte – Responsive Web Design

Décideurs informati...
DESIGN
Production

White space

#mstechdays

Décideurs informatiques
DESIGN
Production

White space

#mstechdays

Décideurs informatiques
DESIGN
Production

Designer

#mstechdays



Focus visuel
Pyramyd – Petit Manuel de Graphisme

Décideurs informatiques
#mstechdays

Décideurs informatiques
#mstechdays

Décideurs informatiques
#mstechdays

Décideurs informatiques
#mstechdays

Décideurs informatiques
CONCLUSION
The end

#mstechdays

“I have not failed. I've just found 10,000 ways that won't
work.” Thomas A. Edison

"If I...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !...
Digital is
business
Techniques d’UX & UI Design
Prochain SlideShare
Chargement dans…5
×

Techniques d’UX & UI Design

3 917 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
  • Soyez le premier à commenter

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

×