11

We have a Content Management System (near enough). The picture below is the Administration page, which is a flex based front end, viewed in a browser.

enter image description here

Thanks to Roger-A on another Q, he gave me the great idea of rolling the link to the main site to a header bar.

After talking to the Flex developer, we had a re-think about some of the buttons that were on the main page, and realised that the Help, Diagnostics, Licenses and logout buttons really belonged on the header bar.

This then leaves the main buttons that actually deal with the content mgmt aspect.
However, my quick mock up in paint leaves it looking a bit crap.
In particular - #tools in each column does not match; The logo looks out of place and too big.

enter image description here

My question can be split into 2 components:

  1. What would be the best way to layout the order of the items.

    • There is relationships between a lot of them, but you can assume they are all distinct functionalities.
  2. Where should that logo go and what size should it be? We actually have another company logo that should also be squeezed in somewhere.

3 Answers 3

18

11 items is a difficult number of things to arrange in more than one line, but it's very easy around a circle.

How about something like the following which might still be inkeeping with your needs

I also decreased the size of the icons in relation to the labels in my version, but this is just a mock up anyway - you can obviously take the idea and adapt accordingly.

Note the globe (which is about 17% opaque) deliberately centers on Australia.

enter image description here

13
  • 2
    i like this a lot
    – jakc
    Commented Aug 16, 2011 at 8:30
  • @Simon Thanks - it also gives you flexibility of arrangement if you decide you actually need more or less items, now or in the future. Commented Aug 16, 2011 at 9:27
  • 2
    I like this too. Are there tasks that are more commonly used here? If there are you could change position to top left eg move tools to beside settings etc...
    – colmcq
    Commented Aug 16, 2011 at 10:18
  • 1
    im actually thinking a bit more radically now. In short, theres a one to many relationship between maps and queries, reports, layouts, tools. Im thinking about how I could utilse the Earth as a container for seeing some of this information.
    – jakc
    Commented Aug 16, 2011 at 10:20
  • 1
    @Chris ProgrammersHabit - CamelCasingWordsTogether :-) Commented Aug 16, 2011 at 22:31
11

Just tried to improve the concept taken from above designs.

I tried to group functionality that works together.

Data sources | Arcgis server | coordinate systems describe connections to external systems.

Queries and Maps (i guess the mostly used functions) have moved to right hand corner where users will find it more easy to locate.

Product logo is prominent at the top right corner against the company logo.

enter image description here

1
  • that's nice! queries and reports are probably more logically connected as are layouts and maps maybe, but that's not the point - this looks cool. Commented Aug 18, 2011 at 18:24
10

1. You could split it into logical sections, where you have first 3 colums with these:

  • "Datasources", "ArcGis servers"
  • "Users", "Roles"
  • "Tools", "Settings"

And then the rest on a single line below:

  • "Coordinate Systems", "Maps", "Queries", "Layouts", "Reports"

2. Have the Esri logo at top left, and the Dekho logo at top right. This way, the symetry is best having the logo text part towards center screen, and framed by the logo images of each logo.

Quick mock-up: Quick mock-up

Advantages of this design:

  • Easy for user to locate the desired functionality.
  • Looks tidy and symetric.
  • Easy for web designer to code the layout.
2
  • Damm you for giving me choice! Really like it. I like this idea if we plan to have more stuff on the Admin page. Im going to whiteboard it with Flex guy tomorrow.
    – jakc
    Commented Aug 16, 2011 at 11:22
  • 2
    Yes, as a rule of thumb for finding menu items quickly and accurately, if you have more than eight menu options, then you need to group them semantically. Commented Aug 16, 2011 at 12:23

Your Answer

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

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