Publié le dans UI Design

Introduction au UI Design

Ceci n'est pas du design:

"Ajoute juste un peu de peinture sur les composants et rends ça agréable et joli."

—Trop de monde

Quelques règles d'interface utilisateur

  • Différence entre un artiste et un designer: Un artiste travaille pour lui-même, alors qu'un designer travaille pour les autres. Un designer résous des problèmes. Le fait de designer des interfaces n'est pas de l'Art.
  • L'espace est important. Doublez vos espaces.
  • Ne me faites pas réfléchir. L'évidence est la meilleure solution. Décrivez ce que les éléments vont faire, aussi précisément que possible. Il faut que ce soit clair. Réduisez la charge intellectuelle.
  • Le moins est le mieux. La simplification c'est compliqué. Enlevez tout ce que est inutile. Supprimez tous les éléments qui n'aident pqs l'utilisateur. Il peut aussi s'agir des lignes, couleurs, fonds, ombres. Le flat design en est l'example le plus extrême.
  • Utilisez des métaphores et examples du monde réel.
  • Le contenu caché est votre ennemi. Evitez de cacher du contenu aussi souvent que possible. Les éléments cachés sont vraisemblablement inutiles. Enlevez-les ou affichez-les.
  • Les interfaces existent pour être interactive. La meilleure interaction est pas d'interaction du tout. La meilleure interface n'est pas d'interface du tout. La manipulation directe est la meilleure. Le bon design est invisible.
  • Démarrez avec l'envirronnement de plus complexe et limitatif. Mobile-first, par example, vous force à enlever tous les éléments inutiles. Pour un logiciel il faut savoir qu'il est rare de toujours l'utiliser en plein écran.
  • Les utilisateurs détestent être limité. Mais les utilisateurs choisissent le choix par défaut... par défaut.
  • Fabriquez des interfaces consistantes. Ne faites pas un nouveau design sans une raison valable. Les gens détestent le changement. Cela signifie plus de risques.
  • Un élément qui ressort est plus à même d'être retenu plus longtemps que les autres.
  • Affichez un retour visuel et informatif. Donnez des indices visuels. Prévisibilité.
  • Les éléments fixes doivent être essentiels! (Comme les headers)
  • Un message d'erreur efficace est une combinaison d'une explication compréhensive accompagnée de conseils pour résoudre le problème
  • Placez l'élément de contrôle où les changements vont d'effectués. Si l'élément procède à des changements dans une zone entière, placez-le au dessus de cette zone.
  • Evitez le jargon techniques. Mais ne réinventez pas la terminologie.
  • Une photo, une histoire. Une page, un sujet. Un courriel, un bouton d'action. Un écran, une action principale.
  • Copier c'est ok, mais vous devez connaître les besoins business avant de juger si c'est élément est bon ou pas. Ce qui fonctionne pour vous, ne fonctionne pas pur les autres.
  • On lit avec le pattern "Z", alors que l'on navigue avec le pattern "F". Les formulaires sur une colonne sont les plus efficaces. Les labels doivent être placés au dessus du champs de saisie.
  • Simuler un chargement. Si une action est effectuée dans une durrée trop courte, cela peut sembler être un bug. Il faut laisser le temps de pour analyser ce qui se passe à l'écran. On a tendance à avoir plus confiance dans ce qui prends un peu plus de temps, surtout si ça semble compliqué à exécuter.
  • Couper les champs en fonction des séquences habituelles de la langue. Comme pour les numéros de téléphones, les numéros de cartes bancaires.
  • Les couleurs sont compliqués. Démarrez avec du noir et blanc. N'utilisez jamais de noir pur, ça n'existe pas.

Quelques règles d'expérience utilisateur

  • Plus l'émotion est grande (fun, surprise, douleur...), plus longtemps on s'en souvient.
  • Créer un user-flow. Cela aide à comprendre la compléxité et facilite le design.
  • Protégez le travail de l'utilsateur (rechargement de la page, quitter accidentellement un formulaire, problème de connection). Fait en sorte que les actions soient réversibles. Pardonnez. Annulez.
  • Impliquez les utilisateur, le plus tôt possible, souvent. Impliquez tout les participants (devs, marketing, utilisateurs, designers...)
  • N'attendez aucun retour d'un utilisateur. Personne ne sait vraiment ce qu'il veut. Mais demandez-leurs quand-même. Concentrez-vous les besoins business, pas sur les préférences personnelles. (Artiste contre Designer)

Ressources

Outils pour dévelopeurs des navigateurs

Le meilleur pour le CSS c'est Mozilla Firefox

Apprendre Flexbox and CSS Grid

Les librairies de CSS Grid ne sont vraiment utiles que pour du prototypage. Il faut utiliser CSS Grid en production.

  • Un Guide Complet à propos de Flexbox chez CSS-Tricks (EN)
  • Un Guide Complet à propos de CSS Grid chez CSS-Tricks (EN)
  • Grid Garden: A Jeux pour apprendre CSS Grid Layout (EN)
  • Grid by Example (EN)

Frameworks UI et Icons

Bien que je ne sois pas un grand fan des framewors d'interface utilisateur, ils aisent beaucoup un construire un produit final. Ils sont énormément testé, consistent et possèdent probablement tous les éléments dont vous avez beosin.

Souvent on trouve aussi des collections d'éléments pour Sketch ou Figma pour pouvoir designer rapidement sa nouvelle interface.

Livres

Plus général sur le design produit

  • Don't Make Me Think, Steve Krug (EN)
  • Ruined by Design, Mike Monteiro (EN)
  • Design is a Job, Mike Monteiro (EN)
  • The Design of Everyday Things, Don Norman (EN)