Meilleure mise en page pour une page de paramètres
J'ai une page de paramètres avec un bon nombre d'options. Voir capture d'écran
Chacun des liens amènera directement l'utilisateur à un formulaire où il pourra modifier les détails (par exemple, les paramètres commerciaux) ou à une recherche/liste où il pourra rechercher, puis modifier les détails (par exemple, les produits)
C'est une mise en page très efficace et conviviale?
J'envisage de changer pour que chaque section soit une option dans une navigation verticale à gauche, puis chaque lien deviendra un onglet sur un jeu de tabulations lorsque l'option est cliquée sur la navigation.
Je vois deux solutions alternatives à votre question:
1) Gardez la conception actuelle.
C'est bon puisque vous exposez tous les paramètres à la fois. Étant donné que vous avez autant de groupes de liens, l'utilisateur peut prendre plus de temps pour découvrir la différence entre, par exemple, la gestion des services et la gestion des produits. Amazon utilise actuellement cette approche et comme ils sont assez obsédés par la convivialité, je considérerais cette solution comme une bonne solution.
Si vous choisissez cette solution, je travaillerais davantage sur la conception visuelle. Faites-en un peu plus structuré et compact. Les différents retraits et l'utilisation des icônes noires semblent désordonnés. Peut-être qu'une mise en page inspirée du répertoire Yahoo pourrait le rendre plus facile à utiliser?
2) Divisez-le en sous-pages
et peut-être fusionner quelques groupes en groupes plus larges. Il s'agit de l'approche la plus populaire utilisée par les grands sites tels que Facebook, Twitter et les systèmes d'exploitation tels que Windows et MacOs. Ils décomposent généralement les sections Paramètres comme suit:
- Profile (choses visibles pour les autres membres),
- Design (A quoi ressemble votre page comme les couleurs d'arrière-plan, Détails du compte (éléments utilisés par le système tels que l'e-mail, l'adresse, les numéros de téléphone, le pays)
- Paramètres spécifiques au site (cela pourrait être par exemple votre gestion des services)
- Changer le mot de passe
- Supprimez votre compte
Je pense que le design de la capture d'écran est presque idéal. Une grande partie de l'évaluation de ceci concerne les avantages/inconvénients du modèle de méga-menu. Permettez-moi d'élaborer:
Le Mega Design
Le bon:
Toutes les options sont visibles par l'utilisateur. Cela favorise:
- Findibility - il est plus facile pour les utilisateurs de trouver l'option appropriée.
- Learnability - les utilisateurs peuvent apprendre plus rapidement les options disponibles.
- Serendipity - les utilisateurs peuvent trouver une option d'intérêt par hasard.
- Bien qu'il existe une multitude d'options, elles sont joliment regroupées et la conception est attrayante.
Le mauvais:
- La multitude d'options augmente charge visuelle et cognitive.
Choses à considérer:
- Les sous-titres sont-ils obligatoires? Les explications ne sont-elles pas impliquées par le contenu? Avez-vous vraiment besoin de dire aux gens ce qu'ils peuvent faire sur une page de paramètres? Idéalement, les légendes sont explicites afin que les sous-titres puissent être supprimés. Cela réduira la charge visuelle. S'ils devaient rester, je réduirais leur contraste (utilisez la couleur gris clair).
- tilisation d'icônes. Les icônes augmentent la charge visuelle. La plupart des utilisateurs liront les titres plutôt que d'essayer de donner un sens aux icônes. Seuls les utilisateurs expérimentés peuvent localiser l'élément concerné à l'aide d'icônes. Tout en contribuant peu à la convivialité, ils peuvent augmenter l'esthétique. Pensez peut-être aussi à réduire le contraste ici.
- Soulignés les soulignés sont tellement 70s. Envisagez de réduire le bruit visuel en les supprimant. De nombreux systèmes utilisent aujourd'hui des couleurs pour signifier un élément cliquable.
La proposition Nav
L'avantage de la proposition Nav est qu'elle réduit la charge visuelle, mais en même temps, elle réduit la visibilité. Lorsque les sous-éléments ne sont pas immédiatement visibles, les utilisateurs devinent parfois (à tort) où se trouve un sous-élément. L'apprentissage et la sérendipité sont également réduits.
Un autre écueil de la proposition Nav est qu'elle augmente charge d'interaction - sur un utilisateur de bureau sont à 2 clics de leur option recherchée. Avec le méga design - seulement 1.
Vous voudrez peut-être effectuer une recherche rapide sur la pagination - il y a une indication croissante que les utilisateurs sont capables de gérer de grands ensembles de données (alors considérés auparavant comme utilisables) et que la pagination réduit la convivialité. Bien qu'il soit principalement applicable aux résultats de recherche, je pense qu'il peut être utilisé pour soutenir ce qui précède.
Il y a de très bonnes réponses ici. J'ai tendance à préférer le "méga design" pour les raisons décrites ci-dessus. Pinterest a un très bon hybride entre les conceptions "méga" et "sous-page". Lorsque vous faites défiler, il se déplace entre les sous-pages. Cela a l'avantage de limiter la charge visuelle aux sous-pages, mais aide également les utilisateurs à trouver facilement toutes les options disponibles . 
Ce n'est pas "sympa" dans la façon dont le design m'apporte du café le matin, non. Mais c'est utile, car c'est une page "donnez-moi toutes mes options". Maintenant, cela peut briser la convention générale de ne donner aux utilisateurs que les options que nous savons qu'ils utiliseront le plus. Mais, c'est une page de paramètres, et en tant que telle, vous pouvez avoir une interface utilisateur plus encombrée, car elle est plus rapide à utiliser une fois que vous l'avez apprise.
Oui, la courbe d'apprentissage est plus abrupte, mais vous avez une page tout en un qui est joliment regroupée en blocs d'informations compréhensibles.
Ce n'est pas nécessairement une disposition inefficace telle quelle. Pour aider à comprendre s'il est efficace pour vos utilisateurs, vous pouvez l'exécuter à travers une série de tests utilisateur. Par exemple - un tri de carte , si vous vouliez voir ce qu'ils pensaient être les noms de catégorie, ou un tri de carte inversé si vous vouliez vérifier votre structure existante.
Si vous le divisez en une navigation verticale sur la gauche, vous pouvez fournir une plus petite quantité d'options à l'utilisateur pour digérer par écran, mais ils doivent d'abord trouver la bonne catégorie! Un utilisateur peut visiter 2-3 catégories différentes avant de trouver la bonne. C'est juste frustrant. (Je le fais tout le temps, à chaque fois, dans le Panneau de configuration de Windows)
La manière dont les informations sont présentées dans ces catégories est également importante. Si vous deviez présenter chacune des sous-catégories dans l'onglet, l'utilisateur pourrait de nouveau devoir chasser et picorer pour trouver la bonne. Vous devez éviter les "onglets dans les onglets" - une navigation verticale étant simplement un type d'onglet différent.
Dans une disposition "à onglets" (par rapport à votre disposition "plate" existante), vous augmentez également le nombre d'actions nécessaires pour atteindre le paramètre approprié. Bien que l'augmentation du nombre d'actions ne soit pas nécessairement mauvaise, elle n'est pas carrément bonne au nom de l'organisation.
En l'état, un utilisateur reçoit beaucoup d'informations mais il peut être analysé facilement (du moins comme je l'interprète à partir de l'image). Les informations sont visuellement bien fragmentées (voir Tri des cartes pour répondre "bien organisé mentalement") et après quelques utilisations, un utilisateur sera probablement assez familier (sinon immédiatement) pour trouver rapidement ce qu'il recherche.
Réponse courte: je suggérerais la conception "plate" existante.
Je pense que votre page va bien parce que: 1) il est clair pour moi quelles sont mes options 2) les légendes sous le titre me disent ce que je suis capable de faire 3) les icônes, d'après ce que je peux voir, semblent appropriées.
Si vous vous sentez trop encombré, vous pouvez également suggérer le titre et la légende habituels, et l'utilisateur peut cliquer dessus pour développer les options.
Je pense que la page a l'air bien, mais peut-être que la seule chose que je ferais serait d'essayer de "grouper" vos options dans une disposition de grille carrée comme ceci: http://mathforum.org/alejandre/magic.square/ adler/adler.3x3grid.gif (N'oubliez pas de remplir également chaque case)
De cette façon, le texte de vos sous-titres s'enroulera au lieu de s'étendre à deux fois la longueur de vos options, et la page elle-même aura l'air beaucoup plus propre. J'espère que cela aide certains!