Meilleures pratiques & amp; Principes pour la conception d'interface graphique [fermé]

Question

Quel est votre meilleur concept ou principe d’interface utilisateur convivial et pratique?

S'il vous plaît, soumettez les pratiques qui, à votre avis, rendent les choses vraiment utiles - peu importe les circonstances - si cela fonctionne pour vos utilisateurs, partagez-les!

Résumé / Classement

Principes

1. KISS.
2. Soyez clair et précis sur ce qu'une option obtiendra: utilisez par exemple des verbes qui indiquent l'action qui suivra un choix (voir: Impl. 1).
3. Utilisez des actions par défaut évidentes correspondant à ce que l'utilisateur souhaite / souhaite atteindre.
4. Adapter l'apparence et le comportement de l'interface utilisateur à l'environnement / au processus / au public cible: application autonome, page Web, portable, analyse scientifique, jeu flash, professionnels / enfants, ...
5. Réduisez la courbe d'apprentissage d'un nouvel utilisateur.
6. Plutôt que de désactiver ou de masquer les options, envisagez d'envoyer un message utile indiquant aux utilisateurs qu'ils peuvent avoir des alternatives, mais uniquement lorsque ces alternatives existent. Si aucune alternative n'est disponible, il est préférable de désactiver l'option - qui indique visuellement que l'option n'est pas disponible - ne masquez pas les options non disponibles, mais expliquez plutôt dans une fenêtre contextuelle pourquoi elle est désactivée.
7. Restez cohérent et conformez-vous aux pratiques et à l'emplacement des contrôles, comme cela a été mis en œuvre dans les applications les plus utilisées et qui ont réussi
8. Dirigez les attentes de l'utilisateur et laissez votre programme se comporter en fonction de ces attentes.
9. S'en tenir au vocabulaire et aux connaissances de l'utilisateur et ne pas utiliser la terminologie programmeur / implémentation.
10. Suivez les principes de conception de base: contraste (évidence), répétition (cohérence), alignement (apparence) et proximité (groupement).

Mise en oeuvre

1. (Voir réponse par paiNie) "Essayez d'utiliser les verbes dans vos boîtes de dialogue."
2. Autoriser / implémenter annuler et rétablir.

Références

1. Consignes relatives à l'expérience utilisateur de Windows Vista [ http://msdn.microsoft. com / fr-us / library / aa511258.aspx]
2. Sites Web néerlandais - "Drempelvrij" directives [ http://www.drempelvrij.nl/richtlijnen]
3. Directives pour l'accessibilité aux contenus Web (WCAG 1.0) [ http://www.w3.org/ TR / WCAG10 /]
4. Consistence [ http://www.amazon.com/Design-Everyday-Things -Donald-Norman / dp / 0385267746]
5. Ne me faites pas penser [ http://www.amazon.com/ Dont-Me-Me-Think-Utilisabilité / dp / 0321344758 / ref = pdbbssr_1? Ie = UTF8 & livres = & qid = 1221726383 & amp; sr = 8-1]
6. Soyez puissant et simple [ http://msdn.microsoft.com /en-us/library/aa511332.aspx]
7. Lois sur la conception Gestalt [ http://www.squidoo.com/gestaltlaws]

Answer 1

Essayez d’utiliser des verbes dans vos boîtes de dialogue.

Cela signifie utiliser

au lieu de

Answer 2

Je teste mon interface graphique contre ma grand-mère.

Answer 3

Suivez les principes de conception de base

• C ontrast: créez des éléments différents différents
• R epetition - Répète le même style dans un écran et pour d'autres écrans
• A - Alignement des éléments d’écran vers le haut! Oui, cela inclut du texte, des images, des contrôles et des étiquettes.
• P roximity - Regroupez les éléments associés. Un ensemble de champs de saisie permettant de saisir une adresse doit être regroupé et distinct du groupe de champs de saisie permettant de saisir les informations de carte de crédit. Ceci est basique Gestalt Design Laws .

Answer 4

Jamais demandez "Êtes-vous sûr?". Autorisez simplement des annulations / rétablissements fiables et illimités.

Answer 5

Essayez de penser à ce que votre utilisateur souhaite atteindre au lieu de définir les exigences.

L’utilisateur entrera dans votre système et l’utilisera pour atteindre un objectif. Lorsque vous ouvrez calc, vous devez effectuer un calcul rapide simple dans 90% des cas. C'est pourquoi, par défaut, il est défini sur le mode simple.

Alors, ne réfléchissez pas à ce que l’application doit faire, mais pensez à l’utilisateur qui le fera, probablement ennuyé, et essayez de concevoir en fonction de ses intentions, essayez de lui rendre la vie plus facile.

Answer 6

Si vous faites quelque chose pour le Web ou pour toute application logicielle frontale, vous vous devez de lire ...

Ne me faites pas réfléchir - Steve Krug

Answer 7

Fil d'Ariane dans les applications Web:
Dites - > Le - > Utilisateur - > Où - > Elle - > se trouve dans le système

C’est assez difficile à faire dans " dynamique " systèmes avec plusieurs chemins d'accès aux mêmes données, mais cela aide souvent à naviguer dans le système.

Answer 8

J'essaie de m'adapter à l'environnement.

Lorsque je développe pour une application Windows, j'utilise les Consignes relatives à l'expérience utilisateur de Windows Vista. mais lorsque je développe une application Web, j'utilise les directives appropriées, car je développe des sites Web néerlandais, j'utilise le " Drempelvrij " consignes qui reposent sur les consignes relatives à l'accessibilité aux contenus Web (WCAG 1.0) de le World Wide Web Consortium (W3C).

Mon objectif est de réduire la courbe d'apprentissage d'un nouvel utilisateur.

Answer 9

Je recommanderais de bien comprendre la conception de l'interface graphique en lisant le livre La conception des choses de tous les jours . Bien que la version imprimable principale soit un commentaire de Joel Spolsky : Le comportement de l'application diffère de ce que l'utilisateur s'attend à ce que vous rencontriez un problème avec votre interface utilisateur graphique.

Le meilleur exemple est le cas où quelqu'un bascule autour des boutons OK et Annuler de certains sites Web. L'utilisateur s'attend à ce que le bouton OK soit à gauche et le bouton Annuler à droite. En bref, lorsque le comportement de l'application diffère de ce à quoi l'utilisateur s'attend, il y a un problème de conception d'interface utilisateur.

Bien que le meilleur conseil, quel que soit le design ou le modèle de design que vous suivez, est de maintenir la cohérence du design et des conventions dans l'application.

Answer 10

Évitez de demander à l'utilisateur de faire des choix chaque fois que vous le pouvez (c'est-à-dire, ne créez pas de fork avec un dialogue de configuration!)

Pour chaque option et chaque boîte de message, demandez-vous: puis-je avoir un comportement par défaut raisonnable qui

• est logique?
• ne gêne pas l'utilisateur?
• est assez facile d’apprendre que c’est peu de frais pour l’utilisateur que je le lui impose?

Je peux utiliser mon ordinateur de poche Palm comme exemple: les paramètres sont vraiment minimalistes et je suis assez content de cela. Les applications de base sont suffisamment bien conçues pour que je puisse les utiliser sans ressentir le besoin d’être peaufinées. Ok, il y a des choses que je ne peux pas faire, et en fait je devais en quelque sorte m'adapter à l'outil (au lieu de l'inverse), mais à la fin cela me rend vraiment la vie plus facile.

Ce site Web est un autre exemple: vous ne pouvez rien configurer et pourtant je le trouve très agréable à utiliser.

Il est parfois difficile de déterminer les valeurs par défaut raisonnables, et de simples tests de convivialité peuvent vous fournir de nombreux indices.

Answer 11

Afficher l'interface à un échantillon d'utilisateurs. Demandez-leur d'effectuer une tâche typique. Surveillez leurs erreurs. Écoutez leurs commentaires. Effectuez les modifications et répétez.

Answer 12

La conception des choses de tous les jours - Donald Norman

Un canon de la tradition du design et la base de nombreux cours HCI dans des universités du monde entier. Vous ne créerez pas une excellente interface graphique en cinq minutes avec quelques commentaires d’un forum Web, mais certains principes feront bien réfléchir votre pensée.

-

MC

Answer 13

Lors de la construction des messages d'erreur, créez le message d'erreur les réponses à ces 3 questions (dans cet ordre):

1. Que s'est-il passé?

2. Pourquoi est-ce arrivé?

3. Que peut-on faire à ce sujet?

Ceci est tiré de & Human; Human Interface Guidelines: le bureau Apple Interface " (1987, ISBN 0-201-17753-6), mais il peut être utilisé pour n'importe quel message d'erreur n'importe où. Il existe une version mise à jour pour Mac OS X. La page Microsoft Messages de l'interface utilisateur dit la même chose: " ... dans le cas d'un message d'erreur, vous devez inclure le problème, la cause et l'action de l'utilisateur pour corriger le problème. "

Incluez également toutes les informations connues du programme, pas seulement une chaîne fixe. Par exemple. pour le " pourquoi est-ce arrivé " utiliser une partie du message d'erreur " fichier de spectre brut L: \ refDataForMascotParser \ TripleEncoding \ Q1LCMS190203_01Doub leArg.wiff n'existe pas " au lieu de " fichier ne n'existe pas ".

Contrastez ceci avec le fameux message d'erreur: "Une erreur happend. ".

Answer 14

(volé à Joel: o))

Ne pas désactiver / supprimer les options - donnez plutôt un message utile lorsque l'utilisateur clique / sélectionne-le.

Answer 15

Comme l'a souligné aujourd'hui mon professeur de structure de données: Donnez des instructions sur le fonctionnement de votre programme à l'utilisateur moyen. Nous, programmeurs, pensons souvent que nous sommes assez logiques avec nos programmes, mais l’utilisateur moyen ne saura probablement pas quoi faire.

Answer 16

1. Utilisez des fonctionnalités animées discrètes / simples pour créer des transitions transparentes d’une section à l’autre. Cela aide l’utilisateur à créer une carte mentale de navigation / structure.

2. Utilisez des titres courts (un mot si possible) décrivant clairement l’essence de l’action.

3. Utilisez le zoom sémantique dans la mesure du possible (le bon fonctionnement du zoom sur les cartes Google / Bing est un bon exemple. Plus d'informations sont visibles lorsque vous vous concentrez sur une zone).

4. Créez au moins deux méthodes de navigation: verticale et horizontale. Vertical lorsque vous naviguez entre différentes sections et horizontal lorsque vous naviguez dans le contenu de la section ou de la sous-section.

5. Laissez toujours visibles les principaux nœuds d'options de votre structure (là où la taille de l'écran et le type de périphérique le permettent).

6. Lorsque vous allez au fond de la structure, conservez toujours un indice visible (par exemple sous la forme d'un chemin) indiquant l'endroit où vous vous trouvez.

7. Cacher les éléments lorsque vous souhaitez que l'utilisateur se concentre sur les données (telles que la lecture d'un article ou la visualisation d'un projet). - méfiez-vous des points 5 et 4.

Answer 17

Soyez puissant et simple

Oh, et engagez un designer / apprenez des compétences en design. :)

Answer 18

Avec les interfaces graphiques, les normes sont spécifiques à la plate-forme. Par exemple. Lors du développement de l'interface graphique dans Eclipse, ce lien fournit des indications utiles.

Answer 19

J'ai lu la plupart de ce qui précède et une chose que je ne vois pas mentionnée est:

Si les utilisateurs sont censés utiliser l’interface ONCE une seule fois, il est bon de ne montrer que ce dont ils ont besoin, si possible.

Si l'interface utilisateur doit être utilisée de manière répétée par le même utilisateur, mais peut-être pas très souvent, il est préférable de désactiver les contrôles que de les masquer: l'interface utilisateur change et les fonctionnalités cachées ne sont pas évidentes (ou mémorisées) par un utilisateur occasionnel. est frustrant pour l'utilisateur.

Si l'interface utilisateur doit être utilisée TRES RÉGULIÈREMENT par le même utilisateur (et qu'il n'y a pas beaucoup de roulement dans le travail, c'est-à-dire que peu de nouveaux utilisateurs se connectent tout le temps), il est absolument utile de désactiver les contrôles. L'utilisateur s'habituera aux raisons pour lesquelles les choses se passent, mais l'empêchera d'utiliser des contrôles par inadvertance dans des contextes inappropriés, appréciés et évitant les erreurs.

Juste mon avis, mais tout revient à comprendre votre profil d'utilisateur, et pas seulement à ce qu'une session utilisateur unique peut impliquer.