Correction de UI Antipattern «plusieurs niveaux de menu»
Mon cerveau semble être pré-programmé pour faire ressembler l'interface utilisateur administrative aux maquettes ci-dessous.
Dans les maquettes, j'ai 3 niveaux de navigation, avec sur le formulaire un autre ensemble de boutons pour les actions du formulaire.
J'aimerais savoir si de meilleures approches existent. Puis-je rendre l'interface utilisateur un peu plus simple, avec quelques astuces conviviales, ou devrais-je repenser la structure de mon application?
(Étant donné que votre profil indique que vous êtes développeur, je vais y répondre de la même manière que j'aide les programmeurs de mon entreprise. Faites-moi savoir si vous avez besoin d'un autre angle.)
Je ne pense pas que les menus hiérarchiques dans les interfaces d'administration soient un anti-modèle. Cependant, il s'agit d'un exemple de "pensée de programmeur" en matière de conception d'interface. Ce que vous faites probablement est de mapper votre modèle mental de l'application directement sur l'interface utilisateur. Au lieu de cela, ce que vous devez apprendre à faire est de mapper le modèle mental utilisateur. Cela peut être difficile sans entraînement, mais vous remarquerez qu'au fur et à mesure que vous progressez, vos interfaces utilisateur deviennent beaucoup plus "intuitives" (dans le sens où vos utilisateurs les apprendront plus facilement).
Mais comment passe-t-on de A à B? Voici quelques techniques UX de base que vous pourriez étudier:
Modélisation mentale
La modélisation mentale est une technique que vous pouvez aborder sous différents angles. Une façon consiste à utiliser tri des cartes ou méthode KJ (également connu sous le nom diagrammes d'affinité ). À un niveau élevé, cela implique de saisir un groupe de personnes de votre public cible et de travailler avec elles pour définir l'architecture de l'information et hiérarchiser les activités. Lorsque vous faites cela, vous comprendrez comment vos écrans devraient fonctionner en tant que sous-produit du processus, tout en obtenant beaucoup plus d'adhésion avec vos parties prenantes car elles auront l'impression de faire partie du processus de prise de décision .
Voici un livre que je recommanderais sur la modélisation mentale: Mental Models par Indi Young.
Tests d'utilisation
Une fois que vous avez conçu certains écrans, faites des tests d'utilisabilité du couloir. Les tests d'utilisabilité des couloirs impliquent d'attraper quelqu'un dans un couloir et de lui demander de faire quelque chose avec votre application. Étant donné qu'il s'agit d'une interface utilisateur d'administration, vous pouvez facilement leur demander de faire quelque chose de simple, comme "Imaginez qu'un nouvel employé a rejoint l'entreprise. Votre travail consiste à les ajouter au système. Que feriez-vous?". Prenez des notes sans les aider et vous découvrirez de nombreux problèmes en peu de temps. Continuez à répéter cela tout au long du développement et après le lancement pour suivre la façon dont les gens utilisent votre interface utilisateur.
La Bible des tests d'utilisabilité est Rocket Surgery Made Easy . Ce livre décrit de nombreuses stratégies que vous pouvez utiliser et se concentre en particulier sur les façons de faire des tests sans que les choses deviennent chères. Vérifiez-le.
Prototypage
Avant le développement réel (dans le sens où vous créez l'application réelle, connectée au back-end et à tous), créez un prototype interactif qui parle aux services fictifs. Vous pouvez les pré-programmer pour vous donner simplement les données que vous attendez car vous ne testez pas les erreurs, vous testez la façon dont les gens utilisent l'interface utilisateur. Le prototypage vous permet d'itérer rapidement sans avoir à vous soucier de l'exécution d'une logique métier réelle. Combiné aux tests d'utilisabilité et à la modélisation mentale, vous pouvez aller très loin sans investir trop de temps et d'argent.
Le livre de Todd Zaki Warfel Prototyping décrit diverses méthodes et approches. Je le recommande vivement si vous prévoyez de faire du prototypage. (Plug: si vous faites du développement frontal, mon profil a un lien vers une application que je développe qui vise le prototypage HTML. Vous pouvez la trouver utile.)
Ne me fais pas penser
Enfin, lisez Don't Make Me Think pour vraiment changer votre façon de penser sur la conception de l'interface utilisateur. Vous sortirez de ce livre en reconnaissant de nombreux défauts dans vos conceptions actuelles et en vous sentant inspiré pour les aborder de nouvelles façons. Cela prend 2 heures à lire et vous pouvez vous y référer pour la sagesse pour les 10 prochaines années, c'est garanti.
Rahul fournit d'excellents points "de haut niveau" pour repenser votre approche de la conception de l'interface utilisateur. Cependant, il y a aussi quelques astuces "de bas niveau" qui, je pense, pourraient vous aider au stade "nitty-gritty" de la conception:
Si vous devez utiliser les onglets parent et enfant, assurez-vous que les enfants sont clairement "contenus" par leurs onglets parent
Lorsque vous montrez aux utilisateurs qu'un élément en contient un autre, ils saisissent rapidement leur hiérarchie. Vous pouvez le faire de trois manières:
- Assurez-vous que le contenu de l'onglet et l'en-tête de l'onglet se rejoignent (de sorte qu'il ressemble à un onglet de carte, plutôt qu'à un bouton en haut de la sous-fenêtre)
- S'assurer que le contenu du sous-onglet et son en-tête sont plus étroits que l'onglet parent
- Donner au texte d'en-tête du sous-onglet un poids égal ou inférieur à celui du parent (peut-être en mettant le parent en gras ou en affaiblissant le texte du sous-onglet).
Vous pouvez voir chacune de ces techniques utilisées dans Beetil, un outil de suivi des bogues basé sur le Web:
Remarquez comment -
- L'en-tête "Versions" se fond dans le contenu de l'onglet
- Les onglets "Planifier/Tester/Déployer" sont plus étroits et font partie sans ambiguïté de quelque chose que l'onglet parent contient
- Les onglets enfants utilisent des couleurs plus faibles et des polices plus petites (également, comme autre exemple de l'astuce 1, notez les "flèches" vers le bas, qui relient clairement l'onglet sélectionné au contenu ci-dessous).
Ne pas mélanger les "menus onglets enfants" verticaux et horizontaux
... Parce qu'il n'est pas clair lequel a la plus grande priorité.
Mettez vos actions de formulaire en bas
Cela a plus de sens pour le flux de travail (faites quelque chose -> enregistrez-le ou annulez-le).
Les onglets parent/enfant peuvent déjà prêter à confusion, alors ne rendez pas la vie plus difficile en les mélangeant avec des contrôles qui ne concernent pas la hiérarchie des informations
- Troisièmement, cela empêche votre formulaire de paraître inégal.