2

I've got an issue, with a menu on my website. The menu has 15 items, which are not simply navigation, but contains links to tools, settings aswell as regular navigational links.

The website is a SaaS, helping associations getting in touch with their users. We've got quite a few communication tools, but also some which are unique to the current user.

The menu consist of items:

  • Home
  • Forum
  • News
  • Messages ( Messages related to THIS association only ).
  • Settings ( Settings related to THIS association only ).
  • Members ( Shows members of the association ).
  • Booking ( Booking of items in the association ).
  • Alarm ( A service related to this user only, used as an administrative tool for his alarm )
  • Guard ( A service related to this user only, used as an administrative tool for the guards in his area ( A service we provide ))

The fact that we run these additional services, splits the user group in three- One part that uses the association toosl, one the uses personal tools, and one who uses all three parts.

I would like to logically group up these elements, and show, somehow, which is related, and they're used for a different part ( Could be private tools here ). However I don't know how to show that, in a way that is both good looking and usable.

Improve this question
8
  • 1
    I definitely think that you need to group few things together, but before that. What is the website about its hard to know what is important and what isn't!
    – Igor-G
    Nov 22, 2012 at 9:29
  • 1
    A short description of every menu item will definitely help to answer this question too.
    – alexeypegov
    Nov 22, 2012 at 9:35
  • 1
    @Kao, reading all the answers and comments I feel like, with all respect, you're asking the wrong question. You're not providing any real details nor variants you've dealing with at the moment. The best answer to your question now is: "You may show them anyway you like: with color or titles or whatever". And if you really wish to get an useful answers, be more concrete, give us some examples, describe who and how will use your system.
    – alexeypegov
    Nov 22, 2012 at 10:05
  • 3
    @Kao, simply because Usability is all about Users. Who, how and why will use your system is the fundamental questions you should answer to be able to create a really useful and usable tool.
    – alexeypegov
    Nov 22, 2012 at 10:12
  • 1
    Edited my question to reflect the input I got.
    – Kao
    Nov 22, 2012 at 10:20

4 Answers 4

Reset to default
1

I see two different ways of visual representation of these groups:

  1. Keep all of the items in the same menu, separating them with help of title, describing every group's purpose (like, 'Association tools', etc)

  2. Try to split this menu into several and place them in different locations depending on factors like frequency of usage, importance, etc. For example:

    • you may put Alarm and Guard in the 'User' menu (usually a top right part of the screen, along with 'Sigh out' and 'Application settings' items if any), since they're related to the current user only
    • Actions related to the Association (and it seems like the main purpose of the tool to help members of the associations to keep in touch), i.e. main actions user will want to use often should be left intact in the right menu
    • Forum and News, which seems to be unrelated to the Association, you may visually differentiate from the 'Association' section (with other color) and put under the Association items, or even put them in the footer (I can't tell you more since it's not clear how important these items are)
    • Place home at the top of the menu, or at the top of the page (logo is usually used for Home links, but you may duplicate it if you wish)
Improve this answer
4
  • The only problem I have with this solution ( Putting the user actions in the top right ), is, if the user is not using our page for association stuff, but only for the user tools. Wouldn't that be misleading somehow?
    – Kao
    Nov 22, 2012 at 11:38
  • You should think about main purpose of the app first, then think how often users will need this User tools. And if these tools are used often (or somehow related to Association tools, and usually used together) you may try to group them under a own Titled section in the main menu (so, the order will be: Association tools, User tools, Everything else). Keep in mind, that hiding some items (or moving them to other menus or sections) may improve the overall usability by helping users make a right choice from the smaller number of grouped actions.
    – alexeypegov
    Nov 22, 2012 at 11:55
  • Thanks, our problem seems to be that we don't have a main purpose, unfortunately. Maybe we should rethink that. :)
    – Kao
    Nov 22, 2012 at 11:59
  • 1
    You may also think about splitting functionality into two global views: Association and User (while keeping Forum and News in a separate menu always visible), with their own menus. So, as user will open the app, he or she will be navigated to the default view (you should test or decide which one is used more often), and may switch to the User view by selecting the User tab.
    – alexeypegov
    Nov 22, 2012 at 12:09
1

If this is communication "tool" then you should make it easy for the user to:

  • get to messages
  • find the right person to contact

Could unite jobs and internship into one item: "Opportunities" or "Work with us". Settings should be last Not sure what is "Groups"(users groups?), how important is the "Marketplace"

Improve this answer
8
  • 1
    this is a very difficult question to answer without the background knowledge!
    – Igor-G
    Nov 22, 2012 at 9:44
  • You're taking this way to litteral. Think of it as a basic vertical navigation bar, with 15 items, which some relate to eachother, others don't. How would I group them? How would I display, they're grouped in the most optimal way. I'm not asking WHICH ones to group.
    – Kao
    Nov 22, 2012 at 9:45
  • but we don't even know what the groups are! Why don't you group it as you said: Users Tools, Official tools and other links?
    – Igor-G
    Nov 22, 2012 at 9:48
  • Because there are no groups yet. There is just 15 items. And I would, but HOW do i VISUALLY, show the GROUPS? You're trying to answer all the wrong things. Please read my question again.
    – Kao
    Nov 22, 2012 at 9:50
  • 1
    Yeah, what I meant. :) +1 for the link.
    – Kao
    Nov 22, 2012 at 10:03
0

Well, first of all, I would really think twice about which links are really useful and which one could be removed from the front page (to many links, kills the "fast-link menu").

Beyond this, this is how I would do

a) A visual structure:

Title
-- elem 1
-- elem 2
-- elem 3

Title2
-- elem 4
-- elem 5
..

b) A colorful structure if some javascript

Title1 // color 1
Title2 // color 2
Title3 (here you would have your mouse on "hover" title3) // color 3
      -- elem 7 // color3 but dimmed
      -- elem 8 // color3 but dimmed
      -- elem 9 // color3 but dimmed
Title4 // color 4
Title5 // color 5

With "color 1" I mean a color thema, meaning that the background might be orange and the text dark-orange. the dimmed part would be for the background: light-orange and the text wouldn't change. (this is just an example of how you could do).

That said, we could definitely help you much more if you gave us a little more information. You may not imagine how this approach could change depending on who your visitors/clients are, and what kind of website it is.

Improve this answer
0

I think you should spend some time carefully thinking about who will use your site. What will be important to THEM. I will definitely recommend reading more about information architecture, and navigation design. As it stands, your question is very generic.

Edit: After reading your comment, I would suggest that you consider looking at the Gestalt principles. "Grouping" things visually comes up a lot in information visualisation problems (and UI design in general), and a lot of work is derived from the simple Gestalt principles. You can use proximity (things that are closer are grouped), shape (things that are shaped similarly are grouped), colour (things that have similar colour/luminance may be grouped together). I believe this theory would be helpful in your case.

Improve this answer
2
  • What does my question have to do with what's important? I need to know, if I can, beneficially group the links, eg. using background colors, or headers. If it's important which is more important, please describe that in the answer, as that's a part of the case.
    – Kao
    Nov 22, 2012 at 9:34
  • I updated my answer based on your comment. Hope that helps.
    – CJF
    Nov 22, 2012 at 10:59

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.