SlideShare une entreprise Scribd logo
Principes de design
de l’expérience utilisateur
UX design
Réaliser des supports
d’informations efficaces est une
action délicate. Le design n’est
pas juste un assemblage, une
organisation ou une modification
de l’information. Il doit ajouter du
sens et de la valeur. Dans le but
de simplifier, mettre en valeur et
persuader de la
pertinence. Parfois même, le
design n’est présent que dans le
but d’amuser vos internautes
autour de vos données.
2
UX DESIGNER ?
Le métier de l’UX designer est de partir de l’utilisateur pour réaliser un produit, votre
rôle est de réduire l’écart entre les utilisateurs et l’organisation.
Dans un premier temps, vous devez penser, interroger : tous les types de personnes
pouvant entrer en contact ou rencontrer des problématiques métiers en lien avec
votre interface.
Il vous faudra ensuite réunir les différentes équipes de l’entreprise autour d’une
même table (ce qui n’est peut-être jamais arrivé auparavant) et les faire travailler
ensemble.
3
PRATIQUE
Dessinez, un, deux, dix, vingt croquis en fonction des informations qui sont
désormais en votre possession.
Et de nouveau faite travailler les équipes ensemble.
L’intelligence collective est plus forte qu’un homme seul.
Des dizaines de croquis émergent des prototypes, pas toujours finis mais qui
donnent les différentes pistes à explorer.
4
Les 15 principes de l’UX
1. INTERACTONS
Les interfaces existent dans un but simple, connecter les individus avec vous (avec
votre univers ou celui de votre client).
Elles aident à clarifier votre discours, montrent les relations entre les éléments.
Elles permettent également de donner accès à des services.
Le design n’est pas de l’art, il ne s’agit pas de monuments immuables.
Il y a une différence forte et persistante entre l’interface utilisateur et une oeuvre d’art
(au sens classique du terme).
6
L’interface a un rôle qu’elle se doit de jouer, vous devez être en capacité d’en mesurer son
efficacité.
The Elements of User Experience
A basic duality: The Web was originally conceived as a hypertextual information space;
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Jesse James Garrett
jjg@jjg.net
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel")
Information Architecture: structural design
of the information space to facilitate
intuitive access to content
Interaction Design: development of
application flows to facilitate user tasks,
defining how the user interacts with
site functionality
Navigation Design: design of interface
elements to facilitate the user's movement
through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding
Functional Specifications: "feature set":
detailed descriptions of functionality the site
must include in order to meet user needs
User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site
Content Requirements: definition of
content elements required in the site
in order to meet user needs
Interface Design: as in traditional HCI:
design of interface elements to facilitate
user interaction with functionality
Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,
graphic page elements and navigational
components
Concrete
Abstract timeConception
Completion
Functional
Specifications
Content
Requirements
Interaction
Design
Information
Architecture
Visual Design
Information Design
Interface Design Navigation Design
Site Objectives
User Needs
User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
2. Clarté
La plus grande mission de votre
interface est de rendre claires et
accessibles vos informations.
Pour être efficiente, elle doit permettre
à tout individu l’utilisant de
reconnaître à quoi elle sert.
Les utilisateurs doivent avoir envie
d’en prendre soin, ils doivent être en
mesure de la reconnaître entre mille et
de prévoir son évolution.
9
La clarté inspire la confiance et conduit à de
nombreuses utilisations.
3. Conserver l’attention
Regardez autour de vous, nous vivons désormais dans un monde continuellement
interrompu. Il est maintenant difficile de garder un espace indépendant, calme et où la
lecture est aisée (et continue).
L’attention est précieuse, terriblement rare.
Ne laissez pas votre interface être perturbée par des éléments externes pouvant
détourner l’attention des utilisateurs.
Rappelez-vous à quoi servent les écrans, afficher de l’information utile.
Evitez autant que possible la publicité au sein de votre interface.
10
Lorsque l’utilisation est le but, l’attention devient le pré-requis.
4. Manipulez
La meilleure interface possible ne l’est
que dans notre monde « IRL », cela grâce
à la manipulation physique d’objets. Nous
ne sommes pas capable de la recréer
virtuellement, alors essayons de nous en
approcher.
Les données sont vos objets, vous devez
créer une interface capable d’être l’outil
pour les manipuler.
Il est facile de créer un design avec plus
d’éléments que nécessaire.
Trop de boutons, illustrations, options,
préférences, fenêtres et autres éléments
qui rendent difficile l’UX.
Tout cela au détriment de ce qui est
important : votre contenu.
11
Rapprochez-vous au maximum de la gestuelle
humaine dans vos design, reléguez l’aspect
artistique au second plan.
5. Gardez le contrôle
Les êtres humains se sentent à l’aise lors qu’ils ont l’impression d’avoir le contrôle
d’eux-même et de leur environnement.
Beaucoup de logiciels / sites ne respectent pas ce principe universel et imposent des
interactions peu claires et non naturelles. Rendant confuse la compréhension et
l’utilisation des qualités de ces outils.
Gardez les utilisateurs sous contrôle en ne laissant pas transparaître les messages de
votre système (les alertes si peu compréhensibles au commun des mortels). Laissez
toujours entrevoir se qui se cache au prochain tournant.
12
N’ayez pas peur de pointer du doigt l’évident, l’évident ne l’est jamais assez.
6. Une page = une fonction
Chaque page / écran de votre interface devrait servir à une seule fonction clairement
identifiée ayant une vraie valeur ajoutée. Ceci rend l’apprentissage plus simple et intuitif.
Les écrans plus d’une action principale deviennent rapidement confus.
Reprenez les 20 conseils d’Apple* sur la gestion des interfaces mobiles et appliquez les
à vos créations.
13
Tout comme pour les applications mobiles,
laissez votre utilisateur concentré sur une tâche à la fois.
7. Fonctions secondaires
Si elles sont secondaires, elles doivent le rester.
Les pages avec une fonction principale identifiée peuvent comporter d’autres
fonctionnalités. Mais elles doivent rester en retrait pour garder une cohérence
d’utilisation.
Prenons l’exemple des boutons de partage sur les articles, vos écrits existent pour être
lus et compris, pas pour être envoyés sur Twitter, Facebook et autres. C’est une option
secondaire.
14
Ce qui n’est pas principal doit rester en arrière-plan.
8. Etape suivante
Les quelques interactions nécessaire pour poursuivre l’expérience utilisateur doivent
être naturelles.
Anticipez toute future interaction de l’utilisateur avec votre produit.
Prévoyez ce qui doit être utilisé afin que son apparence ressemble au ressenti qu’il
doit procurer.
Tout comme une conversation avec une autre personne, pour continuer la
discussion, laissez une ouverture au dialogue.
15
Donnez la possibilité de poursuivre naturellement l’expérience, le tout pour atteindre
les buts que vous avez fixé.
9. Fonctionnalité avant apparence
Les individus se sentent à l’aise avec les choses qui réagissent tels qu’ils le
prévoient.
Lorsqu’une action en entraine une autre qui n’est pas en liaison directe ou qui ne
correspond pas à ce que l’utilisateur attend, un sentiment de peur de mal faire
s’installe.
A l’inverse, un sentiment de confiance peut être en place. C’est votre but.
Les éléments de design doivent correspondre avec leurs fonctions. L’utilisateur final
doit pouvoir annoncer et prédire ce qui se passera une fois l’action effectuée.
16
« Si ça ressemble à un bouton, ça doit réagir comme un bouton. »
10. De la cohérence
En suivant les précédentes affirmations, il est aisé de dresser un postulat simple : les
éléments doivent être communs au long de l’expérience utilisateur.
Toutefois, ce qui doit changer suivant les choix, doit être changé.
L’ensemble doit être cohérent et doit respecter une ligne directrice clairement
exprimée en début d’aventure.
Régulièrement, le côté artistique dégrade l’expérience en proposant de nouveaux
concepts et de nouvelles interactions.
17
Ré-utilisez les codes mis en place, n’en changez pas.
11. Hiérarchisation
Une hiérarchie forte et visuelle est ce qui
fonctionne le mieux, elle correspond à ce que
l’esprit humain attend d’une série de données.
Votre interface doit proposer un ordre
d’apparence en relation avec l’importance des
informations affichées.
Utilisez avec soins les effets de textes pour
mettre en valeur ce qui doit l’être et qui apporte
une valeur supplémentaire à l’utilisation de votre
interface. Lorsque tout est en gras, rien ne
l’est.
La plupart des personnes ne voient pas la
hiérarchie visuelle, pourtant ils la comprennent
naturellement.
18
Il s’agit de la meilleure méthode pour renforcer (ou affaiblir) un design.
15. Les problèmes créent de la valeur
Les gens ne recherchent des solutions qu’aux problèmes qu’ils ont déjà, pas aux
potentiels ou futurs soucis.
Pourtant, il faut s’astreindre à imaginer les difficultés pour en trouver les solutions, et donc
les inclure dans vos créations avant qu’elles n’en soient.
19
Provoquez les problèmes, n’attendez pas qu’ils deviennent bloquants.

Contenu connexe

Tendances

UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
Carine Lallemand
 
Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
Microsoft
 
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
Carine Lallemand
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
NovUp
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Marie Glandus
 
Opening keynote Blendwebmix 2019 - Carine Lallemand
Opening keynote Blendwebmix 2019 - Carine LallemandOpening keynote Blendwebmix 2019 - Carine Lallemand
Opening keynote Blendwebmix 2019 - Carine Lallemand
Carine Lallemand
 
CN2 - Faire d'UX sur son site web
CN2 - Faire d'UX sur son site webCN2 - Faire d'UX sur son site web
CN2 - Faire d'UX sur son site web
Cap'Com
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL
 
FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...
FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...
FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...
Flupa
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
Carine Lallemand
 
Mix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaMix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur Steria
Steria
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
Sylvie Daumal
 
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UXFlupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Carine Lallemand
 
Ux design-jean-françois-marti
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-martiFrenchWeb.fr
 
Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
David Raichman
 
Workshop UX Design - FLUPA UX-Day 2013
Workshop UX Design - FLUPA UX-Day 2013Workshop UX Design - FLUPA UX-Day 2013
Workshop UX Design - FLUPA UX-Day 2013
Carine Lallemand
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizon
HETIC
 
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
Carine Lallemand
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
Kiss The Bride
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
Newflux UX/UI News
 

Tendances (20)

UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
 
Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
 
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 
Opening keynote Blendwebmix 2019 - Carine Lallemand
Opening keynote Blendwebmix 2019 - Carine LallemandOpening keynote Blendwebmix 2019 - Carine Lallemand
Opening keynote Blendwebmix 2019 - Carine Lallemand
 
CN2 - Faire d'UX sur son site web
CN2 - Faire d'UX sur son site webCN2 - Faire d'UX sur son site web
CN2 - Faire d'UX sur son site web
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...
FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...
FLUPA UX-Days 2016 - "5 concepts pour briller en société (et accessoirement e...
 
WAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
 
Mix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur SteriaMix07 Ergonomie et Experience Utilisateur Steria
Mix07 Ergonomie et Experience Utilisateur Steria
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
 
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UXFlupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
 
Ux design-jean-françois-marti
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-marti
 
Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
 
Workshop UX Design - FLUPA UX-Day 2013
Workshop UX Design - FLUPA UX-Day 2013Workshop UX Design - FLUPA UX-Day 2013
Workshop UX Design - FLUPA UX-Day 2013
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizon
 
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
 

En vedette

Ubister recrute un developpeur confirmé
Ubister recrute un developpeur confirméUbister recrute un developpeur confirmé
Ubister recrute un developpeur confirmé
Ubister
 
Producciion
ProducciionProducciion
Producciion
oscar montealegre
 
Aliméntate Sano
Aliméntate SanoAliméntate Sano
Aliméntate Sano
Miguel Rojas
 
Tp2 blancoaidacurso2c2
Tp2 blancoaidacurso2c2Tp2 blancoaidacurso2c2
Tp2 blancoaidacurso2c2
BlancoAida
 
Sesión 4 Porfirio Díaz
Sesión 4 Porfirio DíazSesión 4 Porfirio Díaz
Sesión 4 Porfirio Díaz
zuly207
 
Vargas llosa, mario los jefes y los cachorros
Vargas llosa, mario los jefes y los cachorrosVargas llosa, mario los jefes y los cachorros
Vargas llosa, mario los jefes y los cachorros
marjoriefabiola
 
Sesión 4 porfirio díaz
Sesión 4 porfirio díazSesión 4 porfirio díaz
Sesión 4 porfirio díaz
zuly207
 
10 cualidades de un Community Manager
10 cualidades de un Community Manager10 cualidades de un Community Manager
10 cualidades de un Community Manager
Genes Interactive
 
Zap Them All!!! a presentation of Zap - Bug Hell by Precission Games [JVJ]
Zap Them All!!!   a presentation of Zap - Bug Hell by Precission Games [JVJ]Zap Them All!!!   a presentation of Zap - Bug Hell by Precission Games [JVJ]
Zap Them All!!! a presentation of Zap - Bug Hell by Precission Games [JVJ]
Jaime Fili
 
Adoption incrémentale des tests dans VS ALM
Adoption incrémentale des tests dans VS ALMAdoption incrémentale des tests dans VS ALM
Adoption incrémentale des tests dans VS ALM
MUG-Lyon Microsoft User Group
 
Angelina
AngelinaAngelina
Angelina
2005Johana
 
EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.
EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.
EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.
M. Claudia Londoño
 
Feliz aniversario
Feliz aniversarioFeliz aniversario
Feliz aniversario
Gabbie Alv
 
Servicios Ink
Servicios InkServicios Ink
La viejita-del_cruzero-_parlantes
 La viejita-del_cruzero-_parlantes La viejita-del_cruzero-_parlantes
La viejita-del_cruzero-_parlantes
male1164
 
Esquema unidad didactica
Esquema unidad didacticaEsquema unidad didactica
Esquema unidad didactica
nidiap
 
25 ans de passion
25 ans de passion25 ans de passion
25 ans de passion
Christophe GUILLARME
 
Biomateriales ultima
Biomateriales ultimaBiomateriales ultima
Biomateriales ultima
Rosa Estefani Castillo Oruna
 

En vedette (20)

Ubister recrute un developpeur confirmé
Ubister recrute un developpeur confirméUbister recrute un developpeur confirmé
Ubister recrute un developpeur confirmé
 
Producciion
ProducciionProducciion
Producciion
 
Aliméntate Sano
Aliméntate SanoAliméntate Sano
Aliméntate Sano
 
Tp2 blancoaidacurso2c2
Tp2 blancoaidacurso2c2Tp2 blancoaidacurso2c2
Tp2 blancoaidacurso2c2
 
Sesión 4 Porfirio Díaz
Sesión 4 Porfirio DíazSesión 4 Porfirio Díaz
Sesión 4 Porfirio Díaz
 
Vargas llosa, mario los jefes y los cachorros
Vargas llosa, mario los jefes y los cachorrosVargas llosa, mario los jefes y los cachorros
Vargas llosa, mario los jefes y los cachorros
 
Sesión 4 porfirio díaz
Sesión 4 porfirio díazSesión 4 porfirio díaz
Sesión 4 porfirio díaz
 
10 cualidades de un Community Manager
10 cualidades de un Community Manager10 cualidades de un Community Manager
10 cualidades de un Community Manager
 
Zap Them All!!! a presentation of Zap - Bug Hell by Precission Games [JVJ]
Zap Them All!!!   a presentation of Zap - Bug Hell by Precission Games [JVJ]Zap Them All!!!   a presentation of Zap - Bug Hell by Precission Games [JVJ]
Zap Them All!!! a presentation of Zap - Bug Hell by Precission Games [JVJ]
 
Adoption incrémentale des tests dans VS ALM
Adoption incrémentale des tests dans VS ALMAdoption incrémentale des tests dans VS ALM
Adoption incrémentale des tests dans VS ALM
 
Angelina
AngelinaAngelina
Angelina
 
EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.
EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.
EL CUARTETO DE PEDRO RUY BLAS ESTA TODA LA SEMANA EN EL CAFÉ CENTRAL.
 
Feliz aniversario
Feliz aniversarioFeliz aniversario
Feliz aniversario
 
Servicios Ink
Servicios InkServicios Ink
Servicios Ink
 
La viejita-del_cruzero-_parlantes
 La viejita-del_cruzero-_parlantes La viejita-del_cruzero-_parlantes
La viejita-del_cruzero-_parlantes
 
Esquema unidad didactica
Esquema unidad didacticaEsquema unidad didactica
Esquema unidad didactica
 
25 ans de passion
25 ans de passion25 ans de passion
25 ans de passion
 
28 aug2014
28 aug201428 aug2014
28 aug2014
 
Biomateriales ultima
Biomateriales ultimaBiomateriales ultima
Biomateriales ultima
 
Développons nos talents !
Développons nos talents !Développons nos talents !
Développons nos talents !
 

Similaire à Ux

1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
ssusercb2b311
 
UX guidelines
UX guidelinesUX guidelines
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
StrasWeb
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
JEAN-GUILLAUME DUJARDIN
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
Marc Wabnitz
 
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Anaël ICHANE
 
Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"
charlesbail
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
Valtech Canada
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
PMI-Montréal
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
Hugues Randriatsoa
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
Idean France
 
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien DaigleChers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Web à Québec
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
NiceToMeetYou
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
Virginie Boullé
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
takaclike
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UX
Zenika
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
Newflux UX/UI News
 

Similaire à Ux (20)

1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
 
UX guidelines
UX guidelinesUX guidelines
UX guidelines
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
 
Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"Ideation phase: "As many ideas as I have"
Ideation phase: "As many ideas as I have"
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien DaigleChers designers, c’est de votre faute… - Jean-Sébastien Daigle
Chers designers, c’est de votre faute… - Jean-Sébastien Daigle
 
ESG - Lesson 5
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
 
030 fondamentaux di
030   fondamentaux di030   fondamentaux di
030 fondamentaux di
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
Agile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UXAgile Wake Up #3 : Lean UX
Agile Wake Up #3 : Lean UX
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 

Ux

  • 1. Principes de design de l’expérience utilisateur UX design
  • 2. Réaliser des supports d’informations efficaces est une action délicate. Le design n’est pas juste un assemblage, une organisation ou une modification de l’information. Il doit ajouter du sens et de la valeur. Dans le but de simplifier, mettre en valeur et persuader de la pertinence. Parfois même, le design n’est présent que dans le but d’amuser vos internautes autour de vos données. 2
  • 3. UX DESIGNER ? Le métier de l’UX designer est de partir de l’utilisateur pour réaliser un produit, votre rôle est de réduire l’écart entre les utilisateurs et l’organisation. Dans un premier temps, vous devez penser, interroger : tous les types de personnes pouvant entrer en contact ou rencontrer des problématiques métiers en lien avec votre interface. Il vous faudra ensuite réunir les différentes équipes de l’entreprise autour d’une même table (ce qui n’est peut-être jamais arrivé auparavant) et les faire travailler ensemble. 3
  • 4. PRATIQUE Dessinez, un, deux, dix, vingt croquis en fonction des informations qui sont désormais en votre possession. Et de nouveau faite travailler les équipes ensemble. L’intelligence collective est plus forte qu’un homme seul. Des dizaines de croquis émergent des prototypes, pas toujours finis mais qui donnent les différentes pistes à explorer. 4
  • 5. Les 15 principes de l’UX
  • 6. 1. INTERACTONS Les interfaces existent dans un but simple, connecter les individus avec vous (avec votre univers ou celui de votre client). Elles aident à clarifier votre discours, montrent les relations entre les éléments. Elles permettent également de donner accès à des services. Le design n’est pas de l’art, il ne s’agit pas de monuments immuables. Il y a une différence forte et persistante entre l’interface utilisateur et une oeuvre d’art (au sens classique du terme). 6 L’interface a un rôle qu’elle se doit de jouer, vous devez être en capacité d’en mesurer son efficacité.
  • 7.
  • 8. The Elements of User Experience A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Jesse James Garrett jjg@jjg.net Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Information Architecture: structural design of the information space to facilitate intuitive access to content Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Content Requirements: definition of content elements required in the site in order to meet user needs Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Web as software interface Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components Concrete Abstract timeConception Completion Functional Specifications Content Requirements Interaction Design Information Architecture Visual Design Information Design Interface Design Navigation Design Site Objectives User Needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. task-oriented information-oriented 30 March 2000 © 2000 Jesse James Garrett http://www.jjg.net/ia/
  • 9. 2. Clarté La plus grande mission de votre interface est de rendre claires et accessibles vos informations. Pour être efficiente, elle doit permettre à tout individu l’utilisant de reconnaître à quoi elle sert. Les utilisateurs doivent avoir envie d’en prendre soin, ils doivent être en mesure de la reconnaître entre mille et de prévoir son évolution. 9 La clarté inspire la confiance et conduit à de nombreuses utilisations.
  • 10. 3. Conserver l’attention Regardez autour de vous, nous vivons désormais dans un monde continuellement interrompu. Il est maintenant difficile de garder un espace indépendant, calme et où la lecture est aisée (et continue). L’attention est précieuse, terriblement rare. Ne laissez pas votre interface être perturbée par des éléments externes pouvant détourner l’attention des utilisateurs. Rappelez-vous à quoi servent les écrans, afficher de l’information utile. Evitez autant que possible la publicité au sein de votre interface. 10 Lorsque l’utilisation est le but, l’attention devient le pré-requis.
  • 11. 4. Manipulez La meilleure interface possible ne l’est que dans notre monde « IRL », cela grâce à la manipulation physique d’objets. Nous ne sommes pas capable de la recréer virtuellement, alors essayons de nous en approcher. Les données sont vos objets, vous devez créer une interface capable d’être l’outil pour les manipuler. Il est facile de créer un design avec plus d’éléments que nécessaire. Trop de boutons, illustrations, options, préférences, fenêtres et autres éléments qui rendent difficile l’UX. Tout cela au détriment de ce qui est important : votre contenu. 11 Rapprochez-vous au maximum de la gestuelle humaine dans vos design, reléguez l’aspect artistique au second plan.
  • 12. 5. Gardez le contrôle Les êtres humains se sentent à l’aise lors qu’ils ont l’impression d’avoir le contrôle d’eux-même et de leur environnement. Beaucoup de logiciels / sites ne respectent pas ce principe universel et imposent des interactions peu claires et non naturelles. Rendant confuse la compréhension et l’utilisation des qualités de ces outils. Gardez les utilisateurs sous contrôle en ne laissant pas transparaître les messages de votre système (les alertes si peu compréhensibles au commun des mortels). Laissez toujours entrevoir se qui se cache au prochain tournant. 12 N’ayez pas peur de pointer du doigt l’évident, l’évident ne l’est jamais assez.
  • 13. 6. Une page = une fonction Chaque page / écran de votre interface devrait servir à une seule fonction clairement identifiée ayant une vraie valeur ajoutée. Ceci rend l’apprentissage plus simple et intuitif. Les écrans plus d’une action principale deviennent rapidement confus. Reprenez les 20 conseils d’Apple* sur la gestion des interfaces mobiles et appliquez les à vos créations. 13 Tout comme pour les applications mobiles, laissez votre utilisateur concentré sur une tâche à la fois.
  • 14. 7. Fonctions secondaires Si elles sont secondaires, elles doivent le rester. Les pages avec une fonction principale identifiée peuvent comporter d’autres fonctionnalités. Mais elles doivent rester en retrait pour garder une cohérence d’utilisation. Prenons l’exemple des boutons de partage sur les articles, vos écrits existent pour être lus et compris, pas pour être envoyés sur Twitter, Facebook et autres. C’est une option secondaire. 14 Ce qui n’est pas principal doit rester en arrière-plan.
  • 15. 8. Etape suivante Les quelques interactions nécessaire pour poursuivre l’expérience utilisateur doivent être naturelles. Anticipez toute future interaction de l’utilisateur avec votre produit. Prévoyez ce qui doit être utilisé afin que son apparence ressemble au ressenti qu’il doit procurer. Tout comme une conversation avec une autre personne, pour continuer la discussion, laissez une ouverture au dialogue. 15 Donnez la possibilité de poursuivre naturellement l’expérience, le tout pour atteindre les buts que vous avez fixé.
  • 16. 9. Fonctionnalité avant apparence Les individus se sentent à l’aise avec les choses qui réagissent tels qu’ils le prévoient. Lorsqu’une action en entraine une autre qui n’est pas en liaison directe ou qui ne correspond pas à ce que l’utilisateur attend, un sentiment de peur de mal faire s’installe. A l’inverse, un sentiment de confiance peut être en place. C’est votre but. Les éléments de design doivent correspondre avec leurs fonctions. L’utilisateur final doit pouvoir annoncer et prédire ce qui se passera une fois l’action effectuée. 16 « Si ça ressemble à un bouton, ça doit réagir comme un bouton. »
  • 17. 10. De la cohérence En suivant les précédentes affirmations, il est aisé de dresser un postulat simple : les éléments doivent être communs au long de l’expérience utilisateur. Toutefois, ce qui doit changer suivant les choix, doit être changé. L’ensemble doit être cohérent et doit respecter une ligne directrice clairement exprimée en début d’aventure. Régulièrement, le côté artistique dégrade l’expérience en proposant de nouveaux concepts et de nouvelles interactions. 17 Ré-utilisez les codes mis en place, n’en changez pas.
  • 18. 11. Hiérarchisation Une hiérarchie forte et visuelle est ce qui fonctionne le mieux, elle correspond à ce que l’esprit humain attend d’une série de données. Votre interface doit proposer un ordre d’apparence en relation avec l’importance des informations affichées. Utilisez avec soins les effets de textes pour mettre en valeur ce qui doit l’être et qui apporte une valeur supplémentaire à l’utilisation de votre interface. Lorsque tout est en gras, rien ne l’est. La plupart des personnes ne voient pas la hiérarchie visuelle, pourtant ils la comprennent naturellement. 18 Il s’agit de la meilleure méthode pour renforcer (ou affaiblir) un design.
  • 19. 15. Les problèmes créent de la valeur Les gens ne recherchent des solutions qu’aux problèmes qu’ils ont déjà, pas aux potentiels ou futurs soucis. Pourtant, il faut s’astreindre à imaginer les difficultés pour en trouver les solutions, et donc les inclure dans vos créations avant qu’elles n’en soient. 19 Provoquez les problèmes, n’attendez pas qu’ils deviennent bloquants.