Home > Design > Design Interface

Design Interface

Définition

UX = Process complet pour donner la meilleure expérience possible à un utilisateur, sous tous ses aspects, comme : l'utilisabilité, l'attirance, le ressenti, l'accessibilité...

UI = Interface entre l'humain et la machine. Peut se résumer à l'aspect et l'organisation des éléments graphiques et textuels dans un espace (typographies, couleurs, univers,...)

Remarque : L'UX ce n'est pas de l'UI mais l'UI c'est de l'UX

Dépendance entre les développeurs et les designers

  • Sans développeur : un designer n'a aucune idée des possibilités, de la faisabilité technique des solutions, des coûts, ...
  • Sans designer : un développeur n'a pas de maquettes ou de design pour commencer à travailler, connecter les fonctionnalités entre elles, et les attentes des utilisateurs n'ont pas toutes été prises en compte.

Timeline projet / Process

  • Découvrir : explorer le sujet, définir les enjeux et problématiques, rassembler des idées
  • Définir : tirer des conclusions de la phase de découverte, concrétiser le concept, les fonctionnalités
  • Développer : trouver et mettre en place des solutions, épourver le concept, l'améliorer
  • Délivrer : optimiser et termine le projet pour arriver à la meilleure solution possible

Phase découvrir

Le benchmark est une technique marketing ou de gestion de la qualité qui consiste à étudier et naalyser les techniques de gestion, les modes d'organisation des autres entreprises afin de s'en inspirer et d'en tirer le meilleur.

  1. Explorer le thème : chercher des cas réels et faire le tri dans ce qui est intéressant
  2. Définir les enjeux et problématiques : identifier et expliquer les enjeux et les problématiques qui apparaissent
  3. Rendre compte : mettre en forme un compte rendu, en faisant le lien entre les enjeux et les cas étudiés

Outil : Real Time Board

Phase de définition

Les outils :

  • Personas : définir les cibles "type" de notre intervention
  • User journeys : comprendre les chemins habituels et définir les chemins idéaux pour notre cible
  • Fonctionnalités et architecture : lister et organiser les leviers que l'on donne aux users pour répondre à leurs besoins

Définir son idée

Brainstorm : grâce à la phase d'exploration, réfléchir à des réponses possible aux enjeux/problématiques relevées, au regard des problèmes récurrents pour les utilisateurs.

Lister les fonctionnalités : définir ce que fera l'utilisateur dans votre solution idéale, lister les interactions principales qu'il aura avec l'application.

Phase de développement

Wireframes

"Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d'une interface pour définir les zones et composants qu'elle doit contenir. À partir d'un wireframe peut être réalisée l'interface proprement dite par un graphiste."

Illustrer les fonctionnalités clef

Grâce au travail de définition des fonctionnalités, illustrer les premiers écrans de notre application (minimum 1 écran par fonctionnalité principale pour commencer).

Questions à se poser :

  • Qu'est ce que doit faire mon user dans cet écran ?
  • Où est-ce que cela l'emmène ?
  • Quel type d’éléments/contenus sont manipulés ?
  • De quelles informations a-t-il besoin ?

Outil : Figma

Les lois, règles générales d'UX

Source : Laws of UX

L'empathie

Comprendre pour mieux aider. Certainement le skill le plus utile lorsqu'on conçoit des choses pour les autres. Il faut se mettre dans la peau de l'utilisateur pour lui rendre service.

Sentier de dépendance (loi de Jakob)

Des modèles historiques, justifiés à une époque, peuvent cesser d'être rationnels ou optimaux mais continuer à perdurer.

Les changer impliquerait un coût trop élevé sur le moment, même cela serait bénéfique sur le long terme.

Vos utilisateurs passent plus de temps sur d'autres applications que sur la vôtre : ils préfèrent donc que votre application fonctionne comme les autres.

jakob_law

Réduction de la complexité (loi de Hick)

Le temps qu'il faut pour prendre une décision augmente avec le nombre et la complexité du choix.

Il est préférable de séquencer les actions complexes en plusieurs étapes pour simplifier la tâche à l'utilisateur.

La route la plus rapide n'est pas forcément la plus courte.

hick_law

Effet de position sérielle

On se rappelle toujours mieux des éléments au début (primauté) et à la fin (récence) d'une liste, série ou chaîne d'informations.

Ces places doivent donc être réservées aux choses les plus pertinentes pour l'utilisateur, ou les plus importantes.

Il faut soigner sa première impression autant que sa dernière.

position_law

Loi de proximité

Les objets semblables, ou proches les un des autres ont tendance à être regroupés.

Assurez-vous que les éléments d’un écran n’appartenant pas au même groupe ne soient pas perçus comme un objet unique.

Des marges claires, des styles d'objets et des couleurs bien définies aident à différencier les groupes entre eux.

proximity_law

Effet d'isolation (effet Von Restorff)

Dans un ensemble, un objet qui se détache des autres par sa couleur, forme, taille ou texture est plus susceptible d'être retenu.

Pas besoin de toujours mettre les choses en gros ou d'ajouter mille effets: parfois un changement subtil en dit bien plus.

Le cerveau cherche constamment identifier les différences pour sortir de la monotonie.

restorff_law

Feedbacks & feedforwards

  • Feedback : réponse de l'interface à une action. C'est un moyen de dire à l'utilisateur qu'on a bien pris en compte son action, et que tout fonctionne comme prévu.
  • Feedforward : indiquer le résultat d'un action. On montre à l'utilisateur ce qu'il va se passer en avance, pour lui permettre de confirmer son action.

feedbacks_feedforwards

Principe de supériorité de l'image

Des études on démontré qu'en matière de rétention d'information, les images surpassent les mots de manière significative.

Quand on introduit un nouveau concept, il est utile de l'accompagner d'un signe reconnaissable.

Loi de Fitts

Le temps nécessaire pour atteindre une cible est relatif à la distance et à la taille de la cible.

Les éléments qui nécessitent le plus d'interaction doivent être de taille suffisante, et proches de la dernière position de l'user.

fitts_law

Sur mobile, la loi de Fitts doit être mise en rapport avec notre connaissance des zones les plus facilement accessibles liées au format de l'écran.

fitts_law_2

UI et Identité Graphique

Identité graphique

Ensemble d’éléments visuels cohérents qui permettent d’identifier une même entité au travers des différents médias de communication qu’elle émet.

Composition de l'identité graphique :

  • Nom & logo
  • Couleurs & contraste
  • Typographie (police, mesure, styles)
  • Textes / façon de s'exprimer
  • Iconographie (images, photos, illustrations, motifs, …)
  • Pictogrammes / icônes
  • Types d’effets (couleur, ombres, dégradés …)
  • Principes de composition (grilles, dimensions, marges, …)

Charte graphique

Un document de travail qui contient l'ensemble des règles fondamentales d'utilisation des signes graphiques qui constituent l'identité graphique d'une organisation, d'un projet, d'une entreprise.

Pour les créateurs : garder intacte l’identité quel que soit le contexte, afin que le projet, l’entreprise ou l’organisation puisse parler « d’une seule voix». Ne pas avoir à réinventer la roue pour chaque projet.

Pour le récepteur : Identifier facilement l’émetteur, et par habitude si la cohérence est respectée, de se repérer entre les différents supports (voire même au sein d'un même support).

Charte graphique numérique

Dans les projets numériques, une charte inclut aussi des éléments propres au support :

  • Les règles d'animation & interaction : grands principes, actions, transitions, mouvements, ...
  • Les composants : référence, hiérarchie, comportements, spec. techniques, ...
  • Principes de composition selon les supports : tailles,comportements mobiles/tactiles, dimensions variables (em/px/%/vw), ...
dls-foundation
Source : airbnb

Définir son univers graphique

Quelques questions à se poser avant de commencer :

  • Qui je suis ? (acteur(s) du projet, background)
  • Quel service j'offre ?
  • À qui je m'adresse ? (cible)
  • Quel est le rapport que je veux créer avec ma cible ?

Répondre à ces questions nous aide à comprendre l'image qu'on souhaite mettre en place, qui se déclinera à travers tous les éléments de notre univers graphique.

Typographie

La typographie désigne les différents procédés de composition et d’impression utilisant des caractères et des formes en relief, ainsi que l’art et la manière d’utiliser les différents types de caractères dans un but esthétique et pratique.

Les familles de caractères (ensembles de polices dessinées de manière cohérente entre elles) ont toutes des connotations historiques, politiques, géographiques, culturelles, applicatives, sentimentales, ...

Leur choix reflète directement l'identité de votre produit, il doit donc être réflechi.

Hiérarchie

La typographie est importante pour établir la hiérarchie de l'information. On distingue deux niveaux hiérarchiques principaux :

  • Titrage : Les informations principales
  • Texte courant : Les textes plus long, qui demandent donc un traitement particulier pour garantir un confort de lecture.

En règle générale, deux familles de caractères sont assez pour créer cette hiérarchie de manière claire.

Association

Pour associer des familles ensemble, deux choses à éviter :

  • Trop proche : Les familles trop similaires créent de la confusion, le contraste n'est pas assez important pour les discerner.
  • Trop éloigné : Les familles aux identités trop différentes créent un aspect aléatoire, le contraste est trop fort.

Une bonne pratique est de trouver des fontes qui partagent les mêmes mesures (hauteur d'x, taille des ascendantes, ...)

dls-foundation

Alternative : les "Super Familles" : Familles de caractères au nombre de variations très large.

dls-foundation

Ressources

  • Google Fonts : Webfonts gratuites et libres de droit (elles sont toutes présentes dans Figma sans avoir à les installer)
  • Font Squirrel : Webfonts gratuites et libres de droit (à télécharger)
  • Fontpair : Outil de combinaisons de fontes à tester, basé sur les google fonts
  • Typewolf : Site de tendances typo, propose des recommandations de combinaisons & alternatives de qualité aux fontes les plus connues

Styles

Pour garantir l’homogénéité d'une l'identité, il est nécessaire de charter les styles typographiques de manière précise.

dls-foundation

Couleurs

Les couleurs sont une autre composante majeure de l'identité. Par la connotation des couleurs de la palette utilisée, on affirme la personnalité du produit (chaleureux, froid, acidulé, discret, sérieux, poétique, terne, ...).

Pour définir sa palette, on utilise de principes de théorie des couleurs simples, et on affine par la suite.

Contraste

Le contraste est important dans une palette pour plusieurs raisons :

  • La lisibilité : Un contraste trop faible rend les choses incompréhensibles.
  • L'accessibilité : Il faut penser aux déficient visuels (daltoniens, malvoyants, ...) qui font aussi partie de nos utilisateurs.

Pour garantir un web accessible et lisible, des règles ont été mises en place par le W3C : Web Content Accessibility Guidelines.

Ressources

  • Contraste
  • Colorhunt : Regroupe des palettes de couleurs tendance, mis à jour régulièrement
  • Colorspace : Générateur de palettes à partir d'une couleur principale

Iconographie

À la croisée de la couleur et de la typographie, l'iconographie est l’élément le plus visuel de l'identité. Selon la typologie d'images que l'on utilise, on peut signifier des choses complètement différentes.

Pictogrammes

Un pictogramme est une représentation graphique schématique d'un concept. Le pictogramme est proche du langage : il doit être assez explicite, et fonctionner dans un système défini qui ne le contredit pas.

Ressources