Share
Les concepteurs contre les développeurs - c'est un argument aussi vieux que les ordinateurs. La vérité est que ni l'un ni l'autre ne peut vivre sans l'autre. Une conception d'interface utilisateur brillante est aussi inutile sans fonctionnalité que le meilleur morceau de code avec une interface laide et inutilisable. Dans ce premier article sur les bases de l’interface utilisateur pour les développeurs, je vais essayer d’énoncer quelques règles de base simples que les développeurs peuvent suivre pour s’assurer que leurs applications, modèles et prototypes sont aussi beaux que le code lui-même - et utilisables pour démarrer.
Pensez: la première impression est la dernière impression.
L'alignement fait référence à la position ou à l'orientation d'un élément par rapport à un autre élément ou à lui-même. Lorsque nous nous référons à deux éléments étant alignés l'un sur l'autre, l'alignement se réfère généralement à quel côté des deux éléments est en ligne. Dans le contexte du texte, l'alignement fait référence au côté auquel le texte est ancré en ligne droite..
Dans l'image ci-dessus, le deuxième exemple de conception de formulaire simple montre des étiquettes alignées à droite avec des champs de saisie alignés à gauche. Cela garantit que l'association entre chaque étiquette et son champ de saisie est claire et que l'utilisateur ne soit pas dérouté si certaines étiquettes sont trop petites alors que d'autres sont longues.
Réfléchissez: assurez-vous que les champs de saisie ne sont pas trop éloignés de la plus longue étiquette. Si la variation de largeur est faible, essayez les étiquettes d’alignement à droite et les champs de saisie alignés à gauche..
Pour le texte, il est idéal d’utiliser l’alignement à gauche lors de la conception de l’écran. Étant donné que la plupart des méthodes de rendu de type for-screen ne permettent pas de répartir l'espace de manière appropriée lors de la justification de texte des deux côtés, l'alignement à gauche permet de garder le texte lisible et bien organisé. Vous pouvez, bien sûr, utiliser les alignements centre et droit là où le dessin l'exige, mais ceux-ci sont généralement réservés aux cas spéciaux et aux morceaux de texte plus petits..
L'objectif principal de toute interface utilisateur est de laisser l'interface utilisateur s'interfacer avec l'application. Ceci, croyez-le ou non, ne sera possible que si vous indiquez à l'utilisateur ce qu'il doit faire et dans quel ordre. Étant donné que vous ne serez pas là derrière chaque utilisateur pour l'aider, l'interface doit fournir toutes les indications. Voici quelques questions à poser pour évaluer si le flux de travail prévu est approprié:
Prenons l'exemple d'une sélection de catégorie de recherche sur iStockPhoto. Dans ce cas, je peux tout rechercher ou sélectionner une catégorie spécifique pour limiter mes recherches à ce type d'informations. Puisque l'acte principal est d'entrer un terme de recherche et d'appuyer sur Rechercher, ceux-ci devraient être assez évidents. Une étape possible entre les deux consiste à sélectionner une catégorie, qui peut être une liste déroulante entre (vous l’avez bien deviné) le champ de recherche et le bouton Rechercher..
Un autre exemple est la boîte de dialogue de saisie des revenus / dépenses dans l'application Cashbase. Les champs sont organisés en fonction du flux de travail typique utilisé pour consigner ces informations: entrez le montant (l'élément le plus important), sélectionnez une catégorie, ajoutez une note si nécessaire, puis cliquez sur Ajouter. Des informations secondaires qui seront utilisées beaucoup moins fréquemment - comme la date par défaut d'aujourd'hui et l'option de répéter ou d'annuler - sont disponibles, mais beaucoup plus subtiles.
Les éléments associés dans une interface doivent être regroupés. Cela peut sembler du bon sens quand je le mentionne, mais ce n'est pas toujours bien compris. La raison pour laquelle tous les liens de navigation de page sur la plupart des sites Web sont disposés dans une seule barre horizontale est que l'utilisateur peut identifier la relation en un coup d'œil et faire le choix d'interagir avec eux sans aucune confusion.
Regardons cet exemple de Gmail - une application que beaucoup utilisent régulièrement. C'est la barre d'outils qui apparaît en haut lorsque vous ouvrez un courrier. Bien que tous ces boutons effectuent une action sur le message ouvert, ils sont ensuite regroupés en fonction de ce qu’ils font - actions que l’on utiliserait pour supprimer le message (archive, spam, supprimer), pour changer l’importance du message (lorsque en utilisant la boîte de réception prioritaire), les actions liées aux étiquettes et enfin une liste déroulante avec des options secondaires.
Un autre exemple d'utilisation judicieuse de la proximité est la barre d'options de Zootool. La barre d'outils en bas est divisée en trois ensembles, chacun correspondant aux trois volets de l'application: la liste des packs à gauche, la fenêtre de messagerie au centre qui contient tous vos signets et le volet d'informations à droite..
Tout ce qui se trouve dans une interface utilisateur, ou n'importe quelle mise en page, n'a pas la même importance que tout le reste. La hiérarchie est la disposition des éléments d'une manière qui indique ce qui est le plus élevé dans l'ordre, ce qui vient ensuite, etc..
Regardons cet exemple ici et essayons d’identifier l’ordre de priorité. Puisque tout - les titres, les étiquettes et le texte de paragraphe - a la même apparence, il faut tout lire pour avoir un sens. Si la même interface a été légèrement modifiée, l’impact global sur la lisibilité et, partant, la facilité d’utilisation de l’interface est énorme..
En règle générale, l'en-tête de page doit être le plus grand et le plus visible à l'écran. Viennent ensuite les titres de section, les sous-titres et les étiquettes plus petites. Le texte du paragraphe peut être plus ou moins important selon son objectif. Il n'est pas non plus limité au texte. Les boutons d'action principale peuvent être différenciés des actions secondaires en les rendant plus brillants, plus grands ou plus sophistiqués. Les champs de saisie des entrées obligatoires peuvent être plus évidents que les autres. Je pourrais continuer, mais je pense que vous avez l'idée.
Un autre aspect très important à prendre en compte lors de la conception des interfaces consiste à assurer une différenciation claire entre les éléments. Bien sûr, vous souhaitez que le texte soit lisible sur le fond, mais le contraste va au-delà du texte clair sur un fond sombre ou inversement. Les titres et les paragraphes doivent être clairement distinguables. Les panneaux et les barres de navigation doivent être séparés les uns des autres pour que l'utilisateur sache quoi. La liste continue.
Le contraste peut être établi en utilisant une ou plusieurs des caractéristiques suivantes:
Cela devrait être évident, mais il est étonnant de constater à quelle fréquence les gens glissent sur ce point. Si votre arrière-plan est clair, vous voulez évidemment que le texte soit sombre pour assurer la lisibilité. Bien qu'en théorie, les couleurs complémentaires fonctionnent bien ensemble, ce n'est pas toujours aussi simple. Essayez de placer du texte vert clair sur un fond rouge et vous saurez ce que je dis.
Les possibilités ici étant illimitées, ma première recommandation à quiconque souhaite sélectionner des couleurs est de choisir une palette de couleurs populaire sur des sites tels que Adobe Kuler ou ColourLovers. Ils sont contribués, évalués et approuvés par des utilisateurs passionnés qui connaissent généralement bien la couleur. Toutes les bases de la correspondance des couleurs et du contraste sont généralement prises en charge. Il suffit donc de décider quel jeu de couleurs fonctionne dans le contexte de votre application..
Une note de prudence cependant - soyez très prudent d'aller trop loin avec la couleur. Vous ne voulez pas qu'ils occultent l'utilité et la convivialité de votre application.
Un autre bon moyen de différencier les éléments - en fonction de la hiérarchie, de la catégorisation ou du flux visuel - consiste à utiliser des tailles différentes. Cela s'applique autant au texte qu'aux images, aux arrière-plans et aux éléments statiques ou interactifs. Vous voudrez peut-être mettre davantage l'accent sur le bouton d'action principal, par exemple, et laisser les boutons secondaires relativement moins accessibles. Ou les invites facultatives peuvent être plus petites et plus légères que les étiquettes principales d'un formulaire.
L'application TeuxDeux fait un travail brillant en utilisant la couleur pour différencier les jours passés, présents et futurs. Étant donné que la mise en page est adaptée à une semaine de travail, différentes tailles de texte sont utilisées pour que les noms de jours soient faciles à identifier, tandis que les dates sont comparativement plus subtiles..
Étant donné que le but principal de toute interface utilisateur est de permettre aux utilisateurs d'interagir avec l'application, il est impératif que les apprenants sachent intuitivement quoi faire. En tant que créateurs de l'interface, il est très facile d'oublier que tous les utilisateurs ne seront pas là pour leur dire quoi faire. Les utilisateurs n'ont plus la patience de lire des manuels et des guides de démarrage rapide avant de se plonger dans l'utilisation d'une application. L’interface est nécessaire pour indiquer clairement quelles parties de celle-ci sont cliquables, palpables, déplaçables - bref, interactives.
Tout le monde sait comment actionner un interrupteur électrique, non? La chose qui rend évident à quiconque qu’un commutateur doit être pressé à un moment donné pour changer d’état s’appelle pouvoir. Sur la surface plane d'un écran - bureau, mobile ou autre - différentes techniques peuvent être utilisées pour permettre aux utilisateurs de cliquer de manière intuitive sur un bouton ou de taper à l'intérieur d'un champ de saisie. Lors de la création de liens hypertextes, l’ajout d’un soulignement au lien est la norme la plus couramment utilisée, bien qu’il existe de nombreux autres moyens créatifs de le faire..
Voici quelques exemples:
En prenant l'exemple du commutateur, comment savoir si appuyer sur le commutateur a fait ce qu'il était censé faire? Le voyant s'allume ou s'éteint ou, dans certains cas, un voyant à l'intérieur du commutateur permet d'indiquer clairement si le commutateur est activé ou désactivé..
Dans une application, de tels commentaires peuvent être très évidents dans les cas où un bouton navigue vers une autre page ou ouvre une fenêtre contextuelle, mais qu'en est-il des situations où il ne traite que certaines données en arrière-plan, comme lors de la sauvegarde des modifications apportées aux paramètres utilisateur? Un mécanisme de retour d'information est essentiel pour informer les utilisateurs de l'efficacité de leur action. Cela peut être aussi simple qu'un message "Vos paramètres ont été enregistrés", une brève notification en haut de la page ou une mise en surbrillance rapide autour de la zone mise à jour..
Lorsque vous ajoutez une nouvelle tâche dans Remember the Milk, elle peut soit apparaître dans la liste de la même page, soit simplement être ajoutée à une autre liste en arrière-plan (si, par exemple, la tâche a été affectée à une catégorie différente). Le retour d’action de l’action se fait donc à deux niveaux:
Le texte de votre application, du logo aux titres, en passant par les libellés et les copies, constitue votre principal mode de communication avec les utilisateurs. Comme il s’agit de la manière dont vos utilisateurs accèdent aux informations relatives à l’application ou via celle-ci, la manière dont vous définissez le type peut faire toute la différence entre succès et échec. Bien sûr, les titres doivent être plus volumineux que le corps du texte et les petits caractères doivent être bien, très bien; mais beaucoup d'autres décisions influencent également la façon dont les utilisateurs consomment de l'information.
Première étape: définissez vos polices. Cela me surprend de voir combien de développeurs ne changent jamais la police dans laquelle leur texte est généré. Les polices par défaut changent d’un système à l’autre, ce qui signifie que si vous ne spécifiez pas explicitement la police que vous souhaitez utiliser, votre texte semble différent dans chaque combinaison de système d'exploitation et de navigateur. De plus, Times New Roman - que beaucoup de navigateurs utilisent encore comme police par défaut - n’est tout simplement pas une bonne police pour la lecture à l’écran. Ma première recommandation consiste souvent à utiliser une police sans empattement, bien que Georgia ou la nouvelle police Cambria de Windows 7 soient également esthétiques..
Si vous décidez d'utiliser des polices autres que les polices sûres et universellement disponibles, telles qu'Arial / Helvetica, Georgia, Tahoma, etc., assurez-vous qu'il existe un moyen de les faire afficher de manière similaire sur toutes les plates-formes. Si Flash est votre environnement de développement de choix, intégrez-les si nécessaire. Pour les applications basées sur HTML / JS, utilisez @ font-face en CSS ou n’importe quel service de police Web tel que Typekit ou Google WebFonts. N'oubliez pas cependant que ces techniques s'accompagnent d'une limitation des tailles de fichier supplémentaires pour les polices incorporées. Si la rapidité et la réactivité sont primordiales pour vous, le mieux est de vous en tenir aux polices de base..
Avertissement: Oui, je sais qu'Arial et Helvetica ne sont pas exactement similaires, mais ils sont suffisamment similaires pour que la plupart des utilisateurs ne remarquent pas la différence.
La quantité d'espace entre deux lignes de texte est la principale. Vous voulez que le début de votre texte de paragraphe (line-height en langage CSS) représente au moins 140% de la taille de la police pour vous assurer qu'il est facilement lisible. Moins et votre texte sera beaucoup plus difficile à lire et - plus important encore - à parcourir.
Si vous envisagez de traduire votre application dans d'autres langues - et vous devriez le faire -, il est préférable de tester l'interface à un stade précoce avec différents scripts. À tout le moins, la quantité d'espace requise par un message donné peut varier considérablement d'un script à l'autre. Les scripts est-asiatiques utilisent en moyenne moins de mots, mais nécessitent une taille de police plus grande. Les scripts indiens (Indic) doivent également être légèrement plus grands pour être lisibles. -à droite.
C'est tout pour l'instant. J'espère que ces conseils couvrent suffisamment de bases pour que vous puissiez les appliquer dès maintenant dans vos projets. Comme dans la plupart des disciplines liées au design, il n'y a pas de règles strictes à suivre, et chacun a sa propre vision de la façon dont les choses devraient fonctionner. Donc, si vous êtes en désaccord avec l'une de mes suggestions ci-dessus - ou même si vous êtes d'accord avec elles mais que vous avez un point de vue différent - écoutons-les dans les commentaires..
Ensuite, nous allons prendre toute cette sagesse et essayer de l’appliquer à une interface réelle. Restez à l'écoute!
Accentsconagua