4

Im developing web application with quite complex configuration UI. It contains multiple configuration scopes, for example in global scope you can configure host setting, logging and also create sub-areas etc. Each sub-area has its own set of settings, like services, users etc.

Currently, when admin logs in, he sees global scope with global navigation.
When he wants to perform some admin tasks on sub-areas, he opens sub-areas list, clicks on it and he is redirected to sub-area main page.

Sub-area navigation replaces global navigation bar, so all actions regarding this sub-area are scoped. If he wants to go back, he can click 'back to global' in navigation and scope will be changed to global.

Also, some areas, can have sub-ares. The configuration model resembles directory structure.

This way of things confuses users, and also adds some technical complexity to manage scopes for each request.

Are there any guidelines for complex admin interfaces, or maybe someone can suggest how to improve it or show some examples?

PS. Im aware of this question about two different admin sections inside the same site?. This is a bit different stuff.

PS2. The configuration model resembles a Team Foundation Server with multiple projects. Where TFS intance is global scope and project - sub-area. But their UI is confusing me too.

Edit: Here are Global and Sub-Area mockups(sorry got trial version) Global:

Global

Sub-Area: Sub-Area

Improve this question
5
  • 2
    Can you post wire frames of the navigation are ass that change with scope? It could be that microscopy doesn't manage expectations well.
    – dnbrv
    Jan 27, 2013 at 20:52
  • Updated post with mockups.
    – Alexey Anufriyev
    Jan 27, 2013 at 21:28
  • 1
    A quick thought: if the admin(s) are really key-users and might not just be "the one guy who already knows the system in and out" consider to add a search function just for the admin area (think windows search in system configuration)
    – patrics
    Jan 27, 2013 at 22:18
  • Generally speaking, your mockups are "correct". However, it's unclear what exactly confuses users. Have you asked them?
    – dnbrv
    Jan 28, 2013 at 3:22
  • They get confused when their navigation completly changes for example and they have hard time to identify in wich scope they are now. Some cannot understand that they are operating in sub scope.
    – Alexey Anufriyev
    Jan 28, 2013 at 8:40

1 Answer 1

Reset to default
3

Some possibilities that come to mind to reduce user confusion would be:

  • Breadcrumbs (eg Global settings > Sub-area settings > Where-you-are-now) at the top of the screen, which I think you're already illustrating in the Sub-Area mockup, but make it very visible

  • Use an Accordion menu on the left-hand side, showing all the top-level areas collapsed, but with the navigation for the current area expanded and highlighted.

  • Colour-code different sections - though bear in mind that not all users will distinguish colours easily so take care that the colours are very different and still legible (eg: a light red, dark green, pale blue, dark yellow etc). Probably only works if you have a maximum of 4-5 sections.

Hope that gives you some ideas anyway.

ETA: Just found an even better description of an Accordion which explains more of the rationale behind that layout.

Improve this answer
2
  • Thanks a lot. Accordion similar to desktop Outlook left bar?
    – Alexey Anufriyev
    Jan 28, 2013 at 11:57
  • Sorry, I wanted to link to an example of what I had in mind earlier but didn't find anything. I've now added an example I've found since. The idea is that the left menu will show them what section they're in and where that section fits in the global structure. If you use colour-coding as well, each section can be the area's colour, with the sub-items on a white background to make the sub-area more easy to navigate. Something to experiment with at least!
    – Emma Burrows
    Jan 28, 2013 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.