Techniques d’UX & UI Design

Post on 14-Nov-2014

977 views 1 download

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

Décideurs informatiques#mstechdays

TECHNIQUES D’UX & D’UI DESIGN

Bewise by Ai3

Jocelyn Tricoire / Axel Nemethwww.ai3.fr

Décideurs informatiques#mstechdays

Jocelyn TRICOIRE

@JocelynTricoirejocelyn.tricoire@ai3.fr

Responsable Solution UX

Décideurs informatiques#mstechdays

Axel NEMETH

@AxelNemeth

axel.nemeth@ai3.fr

UX & UI Designer

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

Décideurs informatiques#mstechdays

INTRODUCTION GENERALE

CCU & Créativité

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

Décideurs informatiques#mstechdays

CCUIntroduction

Incertitude Certitude

RechercheCréation/idéation Production

* Représentation de Damien Newman - Central

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

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

Décideurs informatiques#mstechdays

2+2=?CREATIVITEIntroduction

Tina Seelig inGenius: A Crash Course on Creativity

Décideurs informatiques#mstechdays

?+?=4CREATIVITEIntroduction

Tina Seelig inGenius: A Crash Course on Creativity

Décideurs informatiques#mstechdays

SOUL TRAVEL

Application de voyageWindows 8.1

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

Décideurs informatiques#mstechdays

Décideurs informatiques#mstechdays

PHASE DE RECHERCHE

Existant, Interview,Observation, Persona

Décideurs informatiques#mstechdays

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

EXISTANTRecherche

Ergo+designer

Décideurs informatiques#mstechdays

Parties prenantes & utilisateursQuestionnaires / grille d’entretien

INTERVIEWSRecherche

Ergonome

Décideurs informatiques#mstechdays

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

OBSERVATIONRecherche

Ergonome

Décideurs informatiques#mstechdays

PERSONARecherche

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

Décideurs informatiques#mstechdays

PHASE D’IDEATION & DE CREATIVITE

Brainstroming, Trending,Six-to-One

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

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

Décideurs informatiques#mstechdays

TRENDINGIdéation / Créa

Pictures courtesy of their ownersDesigner

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

Décideurs informatiques#mstechdays

PHASE DE PRODUCTION

Maquettage, Tests Utilisateurs, Design

Décideurs informatiques#mstechdays

Maquettes fils de ferPas de graphismeBalsamiq, PowerPoint, SketchFlow

MAQUETTAGEProduction

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

Décideurs informatiques#mstechdays

MAQUETTAGEProduction

Décideurs informatiques#mstechdays

MAQUETTAGEProduction

Décideurs informatiques#mstechdays

SketchFlowMAQUETTAGEProduction

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

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

Décideurs informatiques#mstechdays

DESIGNProduction

Designer

Décideurs informatiques#mstechdays

DESIGNProduction

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

Décideurs informatiques#mstechdays

DESIGNProduction

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

Décideurs informatiques#mstechdays

DESIGNProduction

Responsive design Ethan Marcotte – Responsive Web DesignDesigner

Décideurs informatiques#mstechdays

DESIGNProduction

White space

Décideurs informatiques#mstechdays

DESIGNProduction

White space

Décideurs informatiques#mstechdays

DESIGNProduction

Focus visuel Pyramyd – Petit Manuel de GraphismeDesigner

Décideurs informatiques#mstechdays

Décideurs informatiques#mstechdays

Décideurs informatiques#mstechdays

Décideurs informatiques#mstechdays

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

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 !

© 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