Comment guider l'utilisateur à travers une interface utilisateur compliquée sur un petit écran d'iPhone?
J'ai construit et construit et je me suis retrouvé avec une application dont j'ai maintenant besoin pour éduquer l'utilisateur lors de sa première utilisation. C'est un générateur d'icônes très "sophistiqué" et rapide pour les programmeurs. Mon application a jusqu'à 16 boutons visibles à tout moment. Les principaux boutons (fermer, enregistrer sont codés par couleur.) Le reste est gris et utilise des étiquettes.
J'ai fait des tests avec de vrais utilisateurs (pas le public cible) et j'ai compris que le principal problème est qu'ils ne savent pas comment utiliser le widget à droite (la pile de boutons ). Ces boutons peuvent être déplacés pour modifier l'ordre des calques.
Pour illustrer comment utiliser l'application, je pensais que 2 notes autocollantes avec des flèches à l'écran pourrait être une bonne façon de procéder, mais je voudrais demander aux experts UX s'il y a une meilleure façon de faire l'utilisateur à l'aise avec l'interface utilisateur.
J'ai fini par avoir 7 écrans de petites notes collantes avec une flèche de base pointant vers les boutons. Mon intention est de faire passer l'utilisateur à travers les 7 écrans avant d'utiliser l'application.
Comment éduquer un utilisateur sur une interface utilisateur complexe à 14 boutons en morceaux gérables?
Comme il a été dit, reculez et repensez l'interface utilisateur.
La première chose qui me vient à l'esprit est de créer une zone à onglets en bas de l'écran (la partie supérieure de l'écran doit être dédiée à la grande image de l'icône uniquement) où chaque onglet est lié à un certain calque et contient des contrôles correspondants pour manipulation. Ou vous pouvez aller plus loin avec cette idée et créer une barre d'outils horizontale avec des icônes au lieu d'onglets.
N'oubliez pas non plus l'animation, dont la bonne utilisation vous aidera à guider l'utilisateur. Par exemple, lorsque l'utilisateur passe à un autre niveau, vous pouvez masquer les autres calques pour le moment ou mettre temporairement en surbrillance l'élément de calque actuel avec une couleur différente. L'animation peut résoudre de nombreux problèmes sans beaucoup d'implémentation - animez simplement la transparence/couleur de certains éléments de l'interface graphique.