web-dev-qa-db-fra.com

Logique d'interface CMS. - Est-ce la meilleure approche?

Je développe un système cms. Actuellement, je travaille sur l'interface pour ajouter de nouveaux éléments de menu à un menu. (En raison de la logique cms, les menus sont fixes, l'utilisateur ne peut pas ajouter ou supprimer des menus, supprimer uniquement tous les éléments de menu et attribuer des éléments de menu aux menus ou aux éléments de menu).

Pour ajouter un nouvel élément de menu, l'utilisateur doit cliquer sur la grande zone au-dessus des menus (voir img 2). Cela fera apparaître les champs de saisie. L'enregistrement de vos entrées entraînera l'apparition d'un nouvel élément de menu dans la case "Non attribué". Pour positionner l'élément de menu, il vous suffit de le faire glisser dans l'un des menus à la position souhaitée.

Si vous souhaitez supprimer un élément de menu, faites-le simplement glisser vers la corbeille. Si vous souhaitez modifier un élément, il vous suffit de cliquer dessus, l'élément sera mis en surbrillance et les champs de saisie (comme ceux pour ajouter un nouvel élément) apparaîtront remplis des informations de l'élément de menu que vous avez sélectionné. Modifiez-le et cliquez sur Enregistrer. Pour modifier la position d'un élément, faites-le simplement glisser vers la position souhaitée.

J'espère que tout est facile à comprendre.

Mes questions sont:

Cette idée est-elle facile à utiliser et logique? Est-ce la meilleure façon de le faire ou avez-vous une meilleure idée? Avez-vous des commentaires/idées à améliorer?

cms ui img 1 img 1

cms ui img 2 img 2

// Mise à jour.

D'accord, j'ai donc fait une maquette. J'ai incorporé tous les commentaires d'ArchieVersace tels que je les ai compris. Quant à la boîte d'édition modale: c'est juste un croquis rapide, donc pas de vraies entrées, taille, ....

Navigation TreeAdd/Edit BoxTrash Bin

// Mise à jour 29/10/2010

Donc mes changements actuels:

  • pas de poubelle
  • structure arborescente verticale
  • bouton d'ajout (à côté du nom du menu, mais peut être repositionné)
  • élément de menu non affecté au-dessus des menus s'il est créé sans choisir la position avant de placer 3 menus (montant moyen de mes projets) côte à côte, chacun a une largeur d'environ 300 pixels. Cela devrait suffire, car je n'ai presque jamais de menu avec plus de largeur. J'ajouterai des boutons pour réduire le menu, mais j'aurais tous les éléments non réduits au démarrage (mais peut-être enregistrer la dernière préférence via un cookie).

J'ai besoin de javascript pour mes cms de toute façon, il ne sera pas distribué comme wordpress, mais vendu par projet, donc je peux avoir besoin de js. Cela signifie qu'il n'y a pas besoin de repli (sauvegarde/annulation) pour le positionnement du menu.

Mon utilisateur utilise peut-être le système presque quotidiennement, mais certains peuvent également mettre à jour le contenu de leur page Web uniquement tous les deux mois. Je pense donc que cela devrait être aussi simple que possible. Pour cette raison, je pense qu'il est essentiel d'inclure un autre bouton d'ajout qui est toujours visible. L'ajout d'un élément de menu avec ce bouton entraîne un élément de menu qui n'est affecté à aucun menu. Dans ce cas, la partie au-dessus des menus pourrait apparaître contenant l'élément nouvellement créé.

Pensez-vous que ce soit une bonne idée? Il ne sera pas visible/occupera un espace si aucun élément de menu n'est créé.

alt text

8
Lukas Oppermann

Je pense que la disposition horizontale du menu pourrait prêter à confusion. Premièrement, cela n'a pas de sens hiérarchique - Pourquoi le premier niveau est-il disposé horizontalement et les autres niveaux sont-ils verticaux? Un autre problème est ce qui se passe quand il y a plus d'articles de premier niveau? Le défilement horizontal n'est pas une excellente solution dans la plupart des cas. Je voudrais que tout soit vertical puis en retrait des sous-éléments comme vous l'avez déjà fait.

Les sections de corbeille et de méta-menu sont inutiles, à mon avis. Si vous n'avez que 3 entrées à remplir pour chaque élément de menu, la récupération à partir de la corbeille n'est pas si grave. De plus, la fonctionnalité de la section du méta-menu peut être remplacée par une copie du menu existant lorsque vous créez un nouveau menu. (S'il est automatiquement rempli par toutes les pages du site, encore une fois, vous devez penser à l'échelle). Les deux sections pourraient être remplacées par une section d'élément de menu d'édition.

A part ça, ça a l'air super. J'adore la simplicité de votre maquette.

0
Virtuosi Media

Si je regarde ces écrans sans votre longue explication, il est difficile de savoir quoi faire, sur quoi cliquer et quel est l'ordre d'interaction. Cela en soi est assez révélateur: une excellente interface utilisateur nécessite généralement peu d'explications (pensez à quelque chose comme l'iPhone ou la Wii, où il est très rapidement très évident de savoir ce que vous devez faire sans avoir besoin d'un paragraphe de texte pour vous lancer) .

Donc la première chose que je ferais serait de montrer ces écrans à quelques personnes supplémentaires (IRL) et de voir comment ils réagissent sans votre explication. Comprennent-ils? Savent-ils ce qu'ils regardent et ce qu'on attend d'eux ici? Sinon - si vous avez besoin d'expliquer les choses - alors vous devriez envisager de réorganiser les écrans. Vous pouvez le faire en recueillant les commentaires des gens ou en créant un prototype de l'application et en les faisant utiliser (soyez prudent en leur suggérant ce qu'ils devraient faire - laissez-les trébucher par eux-mêmes).

Les commentaires que vous recevrez à ce stade seront beaucoup plus utiles que toutes les opinions que les gens ici peuvent vous donner.

En outre, sachez que comme vos images sont actuellement des images filaires en noir et blanc, il sera plus difficile de déterminer le poids visuel pour les personnes qui regardent le design que si vous augmentiez un peu la fidélité, ajoutiez de la couleur et utilisiez la typographie à divers degrés pour vous aider avec la façon dont mes yeux doivent se déplacer sur l'écran.

2
Rahul

Je peux vous offrir de l'aide pour certaines interactions (comme je l'ai ci-dessous) mais cela ne sera que d'une utilité limitée car je ne sais pas ce que vous essayez de réaliser. Ce que vous devez vraiment faire, c'est énoncer les exigences du système. Qu'est-ce que vos utilisateurs essaient de réaliser? À quelle fréquence utiliseront-ils le système? Quels sont leurs niveaux de compétence? etc.

Par exemple, un utilisateur peu fréquent du système peut oublier comment l'utiliser entre les utilisations, dans ce cas, vous devrez rendre l'interface très simple à utiliser et à récupérer. Cependant, si vos utilisateurs visitent fréquemment une approche trop simplifiée, cela peut être frustrant car les utilisateurs ne restent pas longtemps débutants; ils deviendront très rapidement des utilisateurs intermédiaires qui demandent plus de puissance. Je ne dis pas que vous faites quelque chose de difficile à utiliser, mais pour les utilisateurs intermédiaires, vous ne devriez pas avoir peur d'ajouter de la puissance et de la complexité.

En ce qui concerne la maquette que vous avez fournie, voici quelques suggestions spécifiques:

  • Supprimez les panneaux non attribués, ajoutez et poubelle car ils n'offrent pas à l'utilisateur suffisamment de fonctionnalités utiles pour la quantité d'espace qu'ils occupent.
  • Placez le bouton Ajouter dans le contexte de l'endroit où il est ajouté, afin que l'utilisateur puisse ajouter où il le souhaite plutôt que de l'ajouter et de le positionner.
  • Lorsqu'un utilisateur souhaite configurer un élément de menu, affichez une case grise avec les champs pour collecter les informations
  • Ajouter un bouton d'édition et de suppression à chaque élément de menu
  • Ajoutez un contrat et développez des boutons à chaque niveau du menu, par défaut, tous les niveaux sont contractés.
  • Prévoyez une bonne quantité d'espace pour les éléments de menu plus longs
  • Vous devriez envisager d'ajouter des options de restauration telles que les boutons d'enregistrement et d'annulation

Ci-dessous est une maquette: alt text

1
ArchieVersace

Une autre mise à jour. alt tree

Je ne suis pas sûr de perdre le bouton d'ajout. Les gens sauraient-ils comment ajouter facilement des éléments de menu?

De plus, comment feriez-vous pour ajouter des éléments de menu au même niveau ou sous-niveau? Celui en ce moment me serait probablement sous-niveau (en fait pour cela le bouton devrait être déplacé un peu vers la droite). Mais comment ajouteriez-vous un nouvel élément du même niveau à l'endroit souhaité?

Dans le menu de pied de page, j'ai essayé de montrer à quoi cela ressemblerait en faisant glisser un élément de menu vers une position différente.

0
Lukas Oppermann