19
Principes de design de l’expérience utilisateur UX design

DocumentUx

Embed Size (px)

Citation preview

Page 1: DocumentUx

Principes de design de l’expérience utilisateur UX design

Page 2: DocumentUx

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

Page 3: DocumentUx

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

Page 4: DocumentUx

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

Page 5: DocumentUx

Les 15 principes de l’UX

Page 6: DocumentUx

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é.

Page 7: DocumentUx
Page 8: DocumentUx

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstracttim

eConception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally 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 auser 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/

Page 9: DocumentUx

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.

Page 10: DocumentUx

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.

Page 11: DocumentUx

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.

Page 12: DocumentUx

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.

Page 13: DocumentUx

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.

Page 14: DocumentUx

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.

Page 15: DocumentUx

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é.

Page 16: DocumentUx

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. »

Page 17: DocumentUx

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.

Page 18: DocumentUx

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.

Page 19: DocumentUx

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.