10 indicateurs de conception correctifs pour les développeurs

Voici une situation que vous connaissez peut-être: vous êtes un développeur et vous construisez un prototype pour démontrer quelque chose. Cela fonctionne comme vous le voulez, mais l'apparence d'horreur sur le visage de vos utilisateurs vous dit que quelque chose ne va pas, votre démo ressemble à de la merde..

Regardons quelques conseils et astuces simples pour aider vos démos à paraître aussi bien qu’elles le devraient..

Se détendre

Vous avez peut-être entendu ce qui suit: 

«Un bon design, quand il est bien fait, devient invisible. C'est seulement quand c'est mal fait que nous le remarquons. ”- Jared Spool

Cela concerne tous les concepteurs, mais particulièrement pour vous, en tant que développeur. Vous construisez une démo; quelque chose qui est uniquement destiné à démontrer quelque chose. Ses utilisateurs doivent être absorbés par la tâche que vous leur présentez, sans réagir au «design».

Pointeur n ° 1: En essayant de faire une déclaration stylistique, il y a de fortes chances que vous vous éloigniez vraiment de la réalisation d'une bonne démo. Rester simple. S'en tenir au travail.

Si quelque chose "ne semble pas bon", supprimez tous les détails visuels que vous avez ajoutés (tels que les ombres, les bordures, les effets) et revenez à la planche à dessin..

Maintenant nous avons ce mot d’avertissement conduisant à l’esprit, concentrons-nous sur des indications plus pratiques.!

Évitez une palette malpropre

Rien n'est plus offensant instantanément pour les yeux que de mauvais choix de couleurs. En réalité, les décisions de couleur devraient être prises en compte dans le processus de conception de l'interface utilisateur, mais il est toujours tentant de faire des choix de couleurs audacieux dès le début..

Non, clairement pas ce que nous recherchons

Si vous utilisiez une interface utilisateur en mode filaire, vous commenceriez aussi simplement que possible; avec des formes rudimentaires, des lignes et monochromes. Une fois que la mise en page et les relations ont été réglées, vous ajouterez plus de détails, évoluant vers une fidélité accrue jusqu'à ce que vous commenciez à dessein explorer la couleur. Alors alors, quelques indications:

Aiguille # 2: Envisagez de passer au monochrome sur vos propres démonstrations. Coller aux nuances de gris (cinquante?) Jusqu'à ce que vous soyez prêt à utiliser la couleur pour clarifier les choses.

Même si nous le faisons rien sinon, c'est une amélioration

Aiguille # 3: En règle générale, évitez les couleurs complètement saturées (c'est-à-dire: les couleurs à pleine force, sans ajout de teinte blanche). En particulier lorsqu'ils sont visionnés sur un écran illuminé, ils peuvent être inconfortables à regarder lorsqu'ils sont combinés les uns aux autres.

Aiguille # 4: La même chose est vraie du noir et blanc. En évitant les extrêmes, en collant au blanc cassé et au blanc cassé, vous aurez moins de chances de donner à vos utilisateurs des yeux fatigués..

Allez encore plus loin et ajoutez une touche de couleur à vos noirs et gris. Comme Ian Storm Taylor l’a dit en 2012:

"Les ombres ne sont pas noires"

Les leçons d'Ian de l'école d'art sont à l'image de mon professeur. Je me souviens que mon professeur m'avait mis au défi de trouver un point noir dans Un dimanche après-midi de Georges Seurat sur l'île de La Grande Jatte..

Spoiler: vous n'en trouverez pas

Aiguille # 5: Lorsque vous ajoutez des couleurs à votre motif monochrome, faites-le une à la fois. Chaque couleur que vous ajoutez est une invitation à la distraction de l'utilisateur. Nous avons brièvement parlé de la nécessité d'éviter une saturation élevée, mais rien ne dit que vous ne pouvez pas utiliser une plage de saturations d'une teinte. Cela vous donnera la variété et la profondeur dont vous avez besoin, sans risque.

Ne pas trop compliquer la typographie

Si nous parlons de démos et de prototypes, inutile d’utiliser des polices système (voir le pointeur n ° 1). Néanmoins, considérez ce qui suit:

Aiguille # 6: Vous êtes entre de bonnes mains avec sans-serif («sans» serif). Les caractères Serif sont ceux qui ont les détails où les traits se terminent (du jargon est là pour vous).

Les sérif peuvent être utiles pour ajouter de la personnalité à un dessin et peuvent souvent rendre un corps de texte plus facile à lire. Mais ils ne sont généralement pas utilisés dans la conception d'interface utilisateur, en particulier pour les petites tailles, car ils affichent souvent des poids de trait variés..

Remarque: à mesure que les résolutions d'écran augmentent, la clarté s'améliore et cet argument a moins de poids.

Roboto et Noto

Google utilise le “humaniste” Droid Sans dans ses interfaces Android, et plus récemment Roboto et Noto. Apple utilise San Francisco pour sa gamme de systèmes d'exploitation, et avant cela, Neue Helvetica. Firefox OS utilise Fira Sans. Remarquez le thème commun ici? Tous les sans-serif.

Aiguille #7: Évitez les ambiguïtés. Les combinaisons de caractères telles que OO, aeo, 8B, Il1, 5S, 2Z, 6b et 9g sont parfois difficiles à distinguer, en fonction du type choisi. Testez-les si vous avez du mal à les différencier, il serait sage de choisir une police de caractères différente.

Fira Sans (de Firefox OS) est parfaitement clair

Pièce pour respirer

Les espaces blancs (espaces fonctionnels) servent le concepteur visuel de plusieurs façons. Cela aide à créer un sens de l'équilibre, attire l'attention sur les aspects nécessaires de la conception, réduit la charge cognitive de l'utilisateur (je pourrais continuer). Si votre interface utilisateur est à l'étroit, les utilisateurs se sentiront rapidement mal à l'aise et réduiront leur capacité à traiter efficacement les tâches..

Lorsque vous manipulez beaucoup d’informations, tentez d’en insérer le plus possible, mais lequel de ces deux exemples trouvez-vous le plus facile à regarder??

Ouch-ce titre est écrasé contre le haut de la pageAjout d'espace pour les cellules du tableau et autour du tout

Aiguille # 8: En ce qui concerne la respiration, «plus» est presque toujours préférable. Ajoutez du rembourrage, ajoutez des marges, augmentez la hauteur des lignes, étalez tout.

Aiguille # 9: Rendre votre espacement cohérent. Utilisez une unité standard comme base, en ajoutant de l'espace par incréments de (par exemple) 10 px. La cohérence est la clé pour créer du rythme et de l'harmonie.

Type sans empattement, monochrome avec une couleur d'accent, beaucoup d'espace, espacement constant

Facilitez-vous la vie

Il n'y a pas de honte dedans; laissez des structures telles que Bootstrap et Foundation effectuer le travail difficile pour vous. On leur reproche souvent de donner aux sites Web de production une apparence générique et dénuée d'imagination, mais pour les prototypes, ils sont absolument parfaits, tout de suite.. 

Toutes les décisions que nous avons discutées jusqu'à présent ont déjà été prises pour vous: typographie, couleurs, espacement, cohérence et des détails complexes comme les formulaires, vous ne pouvez pas vous tromper..

Aiguille #dix: Tenez-vous sur les épaules des autres. Attrapez les modèles Bootstrap existants, les modèles Foundation, ou Material Design Lite, ou Skeleton, ou Pure CSS, ou UIKit, ou celui que vous souhaitiez parmi les millions de frameworks CSS! N'ayez pas peur d'ajouter vos propres styles par dessus, en gardant à l'esprit tous les points que nous avons discutés jusqu'à présent..

À partir des blocs de construction de ZURB

Ces cadres sont tous très complets. Assurez-vous d'utiliser tous les éléments dont vous avez besoin. vous aurez probablement des problèmes si vous choisissez seulement quelques éléments.

Conclusion

Ceci n'était pas destiné à être un article sur les principes fondamentaux de la conception, mais plutôt à vous aider à résoudre tous les problèmes que vous rencontrez avec la conception de vos prototypes. Si vous êtes un développeur (peut-être enregistrez-vous un cours, ou présentez-vous un produit à des clients ou à votre équipe) et souhaitez-vous que vos démos fassent leur travail, ces indicateurs devraient vous mettre sur la bonne voie. Faites-moi savoir dans les commentaires si vous avez des questions spécifiques. Bonne chance!