Comment puis-je améliorer cette interface graphique?
Je crée une interface graphique Mac pour mon application Mac Linux USB Loader et je ne sais pas comment concevoir la fenêtre de document de mon application pour se conformer aux bons principes UX. Voici une capture d'écran de la fenêtre:
La fenêtre est très encombrée et a l'air horrible par rapport aux autres fenêtres de mon application. Fondamentalement, l'intention de l'application est de configurer un lecteur USB amorçable d'une distribution Linux.
Les deux champs manuels, obligatoires sont Installation Drive et Enterprise Source. Ce sont deux menus déroulants; le premier contient une liste de lecteurs USB sur lesquels vous pouvez installer (en gros, une liste de lecteurs qui sont branchés) tandis que la liste déroulante des sources d'entreprise contient une liste de sources définies et ajoutées manuellement par l'utilisateur ici:
Les autres panneaux (le nom et la version de la distribution) sont auxiliaires et facultatifs. En fonction du nom de fichier de la distribution, ces panneaux sont automatiquement remplis avec les valeurs correctes. Si vous décochez le bouton de configuration automatique, les champs de texte permettent à l'utilisateur de modifier ces valeurs manuellement.
Je pensais peut-être le diviser en une disposition à plusieurs volets ou similaire, avec le lecteur d'installation de base et la source d'entreprise se trouvant dans le volet général par défaut et les autres options dans un volet secondaire.
Que dois-je faire pour améliorer la fenêtre?
- Les listes déroulantes sont bonnes s'il y a beaucoup d'articles (il semble que ce ne soit pas votre cas). Les boutons radio sont un bon choix s'il n'y a que quelques options (ou tout type de contrôle visuel similaire).
- Il n'est pas nécessaire de montrer un contrôle du tout si un seul élément est disponible (comme si une seule clé USB est branchée: la majorité des cas, je crois)
- Essayez d'éviter quoi que ce soit sans une suggestion de variantes (comme deux derniers champs dans votre cas) car cela peut dérouter vos utilisateurs.
- Placez tout ce qui est facultatif dans la section Options avancées.
Compte tenu de toutes ces recommandations, je peux suggérer quelque chose comme ceci:
Quelques petits problèmes concernant l'interface utilisateur actuelle :
- La destination est avant la source.
- La première liste déroulante contient "---" pré-remplie, mais pas l'autre.
- La case à cocher "Configurer automatiquement l'entreprise" n'est pas désactivée. Vous l'expliquez ci-dessous mais en tant qu'utilisateur, je m'attendrais à ce que la configuration entière se fasse automatiquement. J'utiliserais une telle phrase sur un bouton, pas une case à cocher.
- Les deux champs de distribution ne sont pas alignés avec les listes déroulantes (petit problème cependant).
- Ces deux champs sont visibles avant ayant choisi la source Enterprise. Que se passe-t-il si un utilisateur remplit ces champs et alors choisit une source d'entreprise?
Ok, voici donc une interface utilisateur rapide qui pourrait améliorer le flux d'utilisateurs:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Sur à gauche , l'état initial :
- Commencez par la source et invitez l'utilisateur à choisir une option dans la liste déroulante avec un texte d'espace réservé .
- Si vous le pouvez, essayez de détecter une clé USB déjà branchée. Certains programmes que j'ai utilisés le font, et c'est assez pratique (il y a généralement seulement 1 lecteur USB branché, et il est branché exactement à cette fin). Si vous ne pouvez pas ou ne voulez pas détecter, utilisez également un espace réservé.
- Le nom et la version de la distribution sont désactivés car l'utilisateur n'a pas encore choisi de source d'entreprise.
- Le bouton Installer est désactivé car les 2 listes déroulantes ne sont pas encore remplies.
Sur à droite , l'état suivant :
- Les 2 listes déroulantes ont une option choisie. Étant donné que ce sont les 2 champs obligatoires, le reste du formulaire est complètement activé .
- Les champs de distribution sont remplis automatiquement . Ici, c'est un choix de conception pour moi: je pense que la plupart des utilisateurs apprécieront vraiment le fait que ces champs peuvent être remplis automatiquement ("Magic!"). Et ce n'est pas un problème car ces champs sont toujours modifiables par la suite . Simplifiez et accélérez le flux de travail pour vos utilisateurs, tout en offrant suffisamment de contrôle à ceux qui le souhaitent.
- Le bouton Installer est disponible maintenant car tout est défini.
Essayez également d'aligner tout verticalement. Le flux visuel sera limpide: de quelle source, à quel lecteur, avec quoi nom et version, et terminé.
Débarrassez-vous des éléments vieux de plusieurs décennies comme des listes déroulantes et des cases à cocher. Imaginez une interface comme si vous conceviez l'application pour une tablette, quel type d'interface aimeriez-vous voir s'il s'agissait d'une application pour iPad? La même interface aurait fière allure sur un ordinateur portable aussi. (sauf si votre application est comme Photoshop et ne peut se passer de montrer beaucoup de boutons).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Demandez d'autres options avancées sur l'écran suivant. Voici 2 règles qui devraient vous aider à l'avenir:
- Au plus 7 éléments à l'écran à la fois.
- Au plus 3 étapes "suivantes".