2

My current sidebar setup looks like this:

The sidebar is present on multiple pages and can include:

  • section ('employees' is a section) specific information (lists that section pages have in common)
  • page ('doctors' is a page) specific information
  • page specific settings (such as filters for the content under the tabs)

Now I came up with an alternative layout that brings the sidebar next to the page header and not under it:

A possible advantage would be that the buttons in the page header would be easier to spot. But at the same time, the sidebar seems more disconnected from rest of the page, making page specific settings (like filtering) not fit too well.

What do you guys think?

| improve this question | |
2

For me the layouts of both the pages are slightly confusing.

Employees>Doctors is a bad header as it contains a bit distractive extra data: Employees. Also it seems like the page Doctors encloses Doctors, Physicians, Nurses and Technicians sections. Because header describes the page content and all the sections are below the header.

Also the header looks like breadcrumbs. But for the breadcrumbs it is too large and the header is dissapeared then.
enter image description here

First layout contains islands, as section level blocks injected into page level elements. The islands distract user and could break flow of page-level tasks. I've outlined the islands on the picture.
enter image description here

Second layout has disconnected page-level blocks, too.

Both layouts have diplicated section level elements: Doctors, Physicians, Nurses and Technicians.

I propose some improvements which could lead to less confusing layout. Hope it helps. enter image description here

| improve this answer | |
  • The reason I used "Employees > Doctors" in the header, instead of just "Employees" was to make it more obvious to the user that there's a change in the header every time he switches tabs and to make him expect that change. I did that mainly to attract attention to the buttons on the right of the header. I realize that this solution has made it seem that the current section is enclosing on itself. – Norbert Aug 18 '13 at 22:32
  • I did a little clean-up – i.imgur.com/ODq0YWA.png – I filled in the empty space on the right of the header, and it seems easier to get from the start, but I can't seem to find a good place for the "Add" and "Page Options" buttons. They seem disconnected from the selected tab if I place them in the sidebar, but placing them right under the tab would just be a waste of vertical space. The buttons are important only when you start filling in the database, which happens once at the beginning, and then you rarely touch them. Any ideas? – Norbert Aug 18 '13 at 22:33
  • @Norbert Now it's more clear interface. I think "Page Options" could be moved up to the header level, if the option doesn't linked to Doctors operations (Add Doctor touches Model, Page Options touches View?). Concerning "Add doctor", I think there should be implemented full featured CRUD functionality. And all the operations should be concentrated around Doctors list. If CrUD operations are rare, you could create "Manage Doctors" page. – Alexey Kolchenko Aug 19 '13 at 3:59
1

Making the header full width (putting it over the sidebar) makes the controls on the right of the header more visually significant.

Making the sidebar go all the way to the top makes it more visually significant and reduces the significance of the header controls.

From the little I can discern about the UI, it seems that the gear control (global settings access?) at the right of the header is best served being in the top right (more significant location) of the page, with the header being full width.

| improve this answer | |
0

If the sidebar is logically subordinated to the header then it's better to display it under said header.
The key is what Norbert said, that "the sidebar seems more disconnected from rest of the page" when it's not under the header.
And that the actions in the sidebar don't seem to fit well.

The sidebar as shown seems to have two purposes, a global navigation (Doctors, ...) and a more local part.
The global part seems to replicate a horizontal menu that doubles as tabs.
If it was my page I'd replace the horizontal menu by a header, "Doctors" in this example.
And I'd style differently the two parts of the sidebar, with the purpose of communicating the scope difference.

| improve this answer | |
  • The tabs represent the sub menu for the Employees page. Did you mean switching the page header and menu positions or removing the menu completely? – Norbert Aug 18 '13 at 13:40
  • I mean removing the horizontal menu, using the same vertical space for the section title. I don't like pages with assorted navigation artifacts (but this ne me, everybody else can do things as the want, of course). My issue is that the categories in the horizontal bar are replicated in the vertical one. This makes the user check that they are the same, which is a bit of unneeded cognitive load. – Juan Lanus Aug 19 '13 at 19:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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