Amélioration de l'interface utilisateur d'un éditeur de «mise en page»
Ci-dessous, vous pouvez voir une capture d'écran d'un éditeur de mise en page Web.
Il s'agit essentiellement d'un éditeur WYSIWYG par glisser-déposer pour les applications interactives, et permet à l'utilisateur d'utiliser un fond de page et d'y ajouter une "couche" d'éléments interactifs, tels que des galeries d'images, des vidéos, etc.
De nouveaux objets peuvent être créés en faisant glisser l'un des petits "objets" en haut à droite dans la mise en page. Après la suppression, le nouvel objet apparaît et peut être modifié.
L'interface utilisateur ci-dessous comprend 3 parties:
- La barre de menu/barre d'outils qui permet à l'utilisateur de naviguer dans toute l'interface.
- La zone de l'éditeur de page sur la gauche, qui affiche l'aperçu de la page et permet le placement des objets (cases bleues).
- La barre latérale/palette des propriétés.
Cette disposition fonctionne essentiellement, mais je suis sûr qu'il existe des moyens d'améliorer l'expérience utilisateur globale.
Questions
Avec la création de nouveaux objets: existe-t-il un moyen meilleur/plus intuitif que d'avoir la liste statique des types d'objets en haut à droite? Serait-il judicieux de déplacer cela vers le côté gauche, éventuellement sous la forme d'une mince colonne?
La plupart des objets n'ont pas beaucoup de propriétés, donc beaucoup d'espace est généralement gaspillé; bien que je ne sais pas si cela peut être corrigé sans l'utilisation de boîtes de dialogue modales (que je veux éviter, en raison d'un clic supplémentaire). Comment pourrais-je éviter de gaspiller de l'espace?
J'aimerais entendre des concepteurs d'interface utilisateur expérimentés s'il existe des meilleures pratiques pour ce type d'interface utilisateur? Je suis assez biaisé par les logiciels Adobe.
Je prendrais cette approche:
Déplacez la liste statique vers la gauche sous forme de colonne - comme vous le suggérez. Donnez-lui un titre court. Gardez-le mince, faites-le glisser et déposez-le et choisissez des noms clairs et courts pour les types d'articles. Si les éléments ne peuvent pas être utilisés plusieurs fois, grisez-les dans la colonne de gauche. Assurez-vous que l'utilisateur comprend où il peut déposer les articles!
Les propriétés des éléments ne doivent pas être définies dans la colonne de gauche. cela gonflerait la colonne et rendrait la tâche très compliquée juste pour commencer. Je voudrais "ouvrir" ou "développer" l'élément juste après l'avoir déposé sur le canevas principal, laisser l'utilisateur faire les réglages là-bas. Cela présente des avantages supplémentaires: si vous laissez les paramètres/propriétés être définis dans la colonne de gauche, l'utilisateur peut penser qu'il s'agit d'un paramètre général, car il le définit dans la colonne de gauche sans lien direct vers le canevas lui-même.
L'un des meilleurs exemples d'une telle interface est la création d'application dans Podio. Vous pouvez l'essayer gratuitement, créer une nouvelle application et avoir un type d'application similaire, sauf que vous ne construisez pas une page mais plus un formulaire et un visualiseur pour les entrées. (Je ne suis en aucun cas affilié à Podio, j'aime juste leur approche de ce détail spécifique.)
Des exemples moins positifs pour des applications similaires peuvent être trouvés dans l'éditeur de mise en page de Salesforce. Il utilise un bloc horizontal flottant avec la liste statique des éléments. Cela colle en haut de l'écran, les éléments utilisés sont grisés. C'est terrible.
Le panneau que les utilisateurs utilisent pour éditer l'objet s'appelle un panneau de contrôle (j'ai pris le nom d'Adobe Illustrator), et c'est un panneau horizontal situé en haut.
Et en ce qui concerne la boîte à outils, vous avez raison, une colonne mince est meilleure et devrait être à gauche.
Ainsi, le panneau de contrôle en haut serait dynamique, il changera de contenu lorsque l'utilisateur se concentrera entre différents objets. Le focus par défaut doit être la page Web elle-même, rien n'est AKA concentré, dans ce cas, vous devez laisser les utilisateurs modifier les propriétés de la page Web dans son ensemble, telles que la taille et l'alignement. Si ce n'est pas une fonctionnalité, il suffit de la laisser vide.