Interfaces utilisateur - Couleurs et mise en page

Question

Bien que je sois particulièrement intéressé par les informations sur les applications Web, je serais également quelque peu curieux de connaître le développement d'applications de bureau.Cette question est motivée par mon travail sur mon site Web personnel ainsi que par mon travail, où j'ai développé quelques fonctionnalités, mais j'ai laissé à d'autres le soin de les intégrer dans l'apparence du site.

Existe-t-il des guides ou des règles empiriques pour des choses comme les jeux de couleurs, les mises en page, le formatage, etc. ?Je veux garantir la lisibilité et la clarté pour les visiteurs, mais ne pas être à la fois fade et ennuyeux.

Quant à mes connaissances dans ce domaine - Si vous me remettez une image, j'ai suffisamment de connaissances pour la reproduire à l'écran, mais si vous me demandez de concevoir une nouvelle interface ou de repenser une interface existante, je ne saurais pas par où commencer .

Answer 1

Habituellement, chaque système d'exploitation a des directives d'interface utilisateur.Pour Windows, disposez d'un regarde ici.(Modifier:Les liens dans ce message sont rompus.Mais une recherche pour "Directives de l'interface utilisateur" sur MSDN, il y a des articles sur tout)

Apple a également le sien.Aussi, vous souhaiterez peut-être conserver accessibilité à l'esprit.

Answer 2

Une astuce pour vérifier si vos couleurs ont un bon contraste consiste à en prendre un instantané et à les convertir en niveaux de gris.Si vous ne savez pas lire quelque chose, les couleurs ont sûrement été mal choisies.

De plus, même s'il ne s'agit pas d'interfaces utilisateur, Magazine Avant-Après peut vous donner de très bons conseils sur la couleur, le design et des sujets connexes.Il propose même des fichiers PDF gratuits à télécharger.

Answer 3

Le livre Conception d'interfaces, de Jenifer Tidwell consacre un chapitre entier à ce sujet (chapitre 9, extraits accessibles en ligne).L'ensemble du livre mérite d'être recommandé.

Answer 4

Pour l'interface utilisateur Web, je vais prendre des risques ici et dire que la couleur la plus importante dans la conception Web est le blanc, ou "clair".C’est la couleur sur laquelle vous placez des étendues denses de contenu.

Texte sombre, fond clair, toujours, lorsqu'il s'agit de vos zones de contenu principales.

Et la règle la plus importante en matière de mise en page est l’espace.Laissez le contenu respirer.

Suivre ces deux règles simples vaut plus que la plupart des directives relatives à la convivialité de l'interface utilisateur.

Et en passant, les directives de l'interface utilisateur MS sont (dans l'ensemble) horribles.Lisez Jakob Nielsen, regardez l'esthétique du design Apple, mais restez à l'écart de la philosophie de texte MS "neutral gray/blue crunchbox" en 12 étapes de l'assistant 10 pt de l'interface utilisateur.

(Et je dis cela en tant que programmeur MS GUI de longue date)

Answer 5

J'ai du mal à trouver des couleurs qui vont bien ensemble, alors je triche et j'utilise des images de la nature qui sont principalement la couleur que je veux (disons, le vert), puis j'utilise ce site Web pour extraire la palette de couleurs principale.En général, la nature fait un très bon travail en créant ses propres combinaisons de couleurs.

Answer 6

Utilisez des combinaisons de couleurs à contraste élevé ;Le texte noir sur fond blanc est le meilleur exemple d’une combinaison à contraste élevé.

Une mauvaise combinaison est un texte vert sur fond rouge.C'est horrible pour les daltoniens (comme moi).

Voyez à quoi ressemble votre site pour une personne daltonienne : colorfilter.wickline.org

Answer 7

Quant aux applications de bureau :Quoi que vous fassiez, n’utilisez pas de couleurs triées sur le volet.Tenez-vous-en aux couleurs système nommées telles que « Arrière-plan de la fenêtre », « Texte du menu », etc.Sinon, les personnes qui comptent sur les fonctionnalités d'accessibilité du système d'exploitation seront bloquées avec vos choix de couleurs (impossibles de choisir un thème à contraste élevé, par exemple) et les personnes qui aiment personnaliser les thèmes de leur bureau penseront que votre application est floue.

Answer 8

Voici quelques conseils simples pour faciliter l'utilisation dans votre typographie.Ces éléments répondent principalement à des problèmes de lisibilité et d’accessibilité.

À faire :

• Utiliser la taille de police relative (em)
• Identifiez les changements de langue dans un document à l'aide de l'attribut LANG
• Texte noir sur fond blanc
• Pour les titres, utilisez H1, H2, etc.et emboîtez-les de manière appropriée
• Regroupez le contenu et organisez-le avec des titres qui correspondent à ce que recherchent vos utilisateurs.
• Rédiger une copie claire et simple
• Aligner à gauche, irrégulier à droite
• La couleur du texte sur l'arrière-plan doit être très contrastée

À NE PAS FAIRE :

• Utilisez « cliquez ici » ou « plus » comme texte du lien
• Utiliser le soulignement pour mettre l'accent
• Plus de 2 familles de types de polices
• Italique
• Blocs de texte en majuscules
• Utilisez du texte en vrai rouge ou en vrai bleu sur fond blanc (aberration chromatique)