The Usability report twice mentioned adding an expand/reduce button to the blue left frame title bars instead of having the vertical tab strip:

#38 Add Site Map Heading Bar with reduce button
http://www.elijahlofgren.com/silverstripe/add-site-map-heading-bar-with-reduce-button/

#22 Allow clicking on blue heading bar of Left Site Tree to reduce it:
http://www.elijahlofgren.com/silverstripe/allow-clicking-on-blue-heading-bar-of-left-site-tree-to-reduce-it/

Do you guys agree with this change?

The one downside I can think of is that there will be less vertical space in the left frame because the 3 title bars of Site Map, History, & Reports will need to be shown at all times in order to show each of their expand/reduce arrow buttons.

Two additional benefit is we will no longer need to use any of the images in cms/images/sidetabs and I think that it will be easier to read the section titles.

However, this change would be quite different from the old way of doing things so we will need to make the show/hide arrow very obvious so that users who are used to the side tabs don't get confused.

Should I work on removing the sidways tabs and adding expand/reduce buttons as suggested in the usability report?

Thanks for your feedback,

Elijah

Do it - the usability issues with the current system outweigh any disadvantages. With regards "making it obvious", try and find some examples of this in other popular applications and use a similar styling to them. Familiar = intuitive! :-)

Agree Sam,

Elijah, this is something we need to do. Those side tabs were an interesting idea, but it's very confusing.

:-)

Sean

Cool, I think I'll use + and - images similar to how WordPress does it: http://www.elijahlofgren.com/silverstripe/images/usability/22-proposed-expand-reduce-image.png

For now, I must post on my SoC blog and go to bed.

Until tomorrow,

Elijah

Sounds good - that seems a logical way to do it.

Cheers,
Sean

Looks good. The one comment I would make is try to minimise the space around the minimised items - don't do lots of margin like the wordpress thing.

>> Looks good. The one comment I would make is try to minimise the space around the minimised items - don't do lots of margin like the wordpress thing.

I agree. I'll plan on trying to conserve space.

One thing that I need to think about is the fact that if you click on the "Site Map" tab right now, the whole left frame is hidden. If the left tabs are removed, that will need to be done in some other way.

Or is minimizing the entire left frame not a required feature?

I've removed the Side Tabs and made the headings clickable to show/hide the sidebar sections in r36930 of the cms gsoc branch. :)

I did end up using http://trac.wordpress.org/attachment/ticket/1904/toggle.gif
on the right of the sections. I got permission from Andy Skelton to use it (he just wanted me to mention him and WordPress in the commit message). :)

I'll add some screenshots of how the changes look to: http://www.elijahlofgren.com/silverstripe/add-site-map-heading-bar-with-reduce-button/ once my server comes back up.

One issue is that when all sections are collapsed, the icons are partially covered by text in browsers other than IE7. However, the 1st icon for the Site Tree is not covered, so I don't think this is a big issue.

Let me know if there is anything I should change, otherwise I'll move on to other issues,

Elijah

Update: I've posted screenshots and marked these two usability items as complete. Let me know if there is anything I should change.