Techniques d’UX & UI Design

45

description

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)

Transcript of Techniques d’UX & UI Design

Page 1: Techniques d’UX & UI Design
Page 2: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

TECHNIQUES D’UX & D’UI DESIGN

Bewise by Ai3

Jocelyn Tricoire / Axel Nemethwww.ai3.fr

Page 3: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Jocelyn TRICOIRE

@[email protected]

Responsable Solution UX

Page 4: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Axel NEMETH

@AxelNemeth

[email protected]

UX & UI Designer

Page 5: Techniques d’UX & UI Design

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

Décideurs informatiques#mstechdays

INTRODUCTION GENERALE

CCU & Créativité

Page 7: Techniques d’UX & UI Design

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

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

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

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

Décideurs informatiques#mstechdays

2+2=?CREATIVITEIntroduction

Tina Seelig inGenius: A Crash Course on Creativity

Page 12: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

?+?=4CREATIVITEIntroduction

Tina Seelig inGenius: A Crash Course on Creativity

Page 13: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

SOUL TRAVEL

Application de voyageWindows 8.1

Page 14: Techniques d’UX & UI Design

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

Décideurs informatiques#mstechdays

Page 16: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

PHASE DE RECHERCHE

Existant, Interview,Observation, Persona

Page 17: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Etudes & statistiquesProblèmes / points négatifsBenchmarkingRecueil des besoinsScenarii d’usage

EXISTANTRecherche

Ergo+designer

Page 18: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Parties prenantes & utilisateursQuestionnaires / grille d’entretien

INTERVIEWSRecherche

Ergonome

Page 19: Techniques d’UX & UI Design

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

Décideurs informatiques#mstechdays

PERSONARecherche

Cooper, Alan. The Inmates are Running the Asylum.Ergo+designer

Page 21: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

PHASE D’IDEATION & DE CREATIVITE

Brainstroming, Trending,Six-to-One

Page 22: Techniques d’UX & UI Design

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

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

Décideurs informatiques#mstechdays

TRENDINGIdéation / Créa

Pictures courtesy of their ownersDesigner

Page 25: Techniques d’UX & UI Design

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

Décideurs informatiques#mstechdays

PHASE DE PRODUCTION

Maquettage, Tests Utilisateurs, Design

Page 27: Techniques d’UX & UI Design

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

Décideurs informatiques#mstechdays

MAQUETTAGEProduction

Page 29: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

MAQUETTAGEProduction

Page 30: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

SketchFlowMAQUETTAGEProduction

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

Page 31: Techniques d’UX & UI Design

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

Décideurs informatiques#mstechdays

DESIGNProduction

Designer

Page 33: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

DESIGNProduction

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

Page 34: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

DESIGNProduction

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

Page 35: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

DESIGNProduction

Responsive design Ethan Marcotte – Responsive Web DesignDesigner

Page 36: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

DESIGNProduction

White space

Page 37: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

DESIGNProduction

White space

Page 38: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

DESIGNProduction

Focus visuel Pyramyd – Petit Manuel de GraphismeDesigner

Page 39: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Page 40: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Page 41: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Page 42: Techniques d’UX & UI Design

Décideurs informatiques#mstechdays

Page 43: Techniques d’UX & UI Design

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

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

© 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