Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Replacing Site Map, History, & Reports tabs with show/hide arrow button


Reply


8 Posts   2508 Views

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

14 June 2007 at 7:41am

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

Avatar
Sam

Administrator, 685 Posts

14 June 2007 at 9:06am

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! :-)

Avatar
Sean

Forum Moderator, 922 Posts

14 June 2007 at 1:48pm

Edited: 14/06/2007 1:50pm

Agree Sam,

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

:-)

Sean

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

14 June 2007 at 2:50pm

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

Avatar
Sean

Forum Moderator, 922 Posts

14 June 2007 at 4:20pm

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

Cheers,
Sean

Avatar
Sam

Administrator, 685 Posts

14 June 2007 at 9:10pm

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.

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

15 June 2007 at 10:08am

>> 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?

Avatar
elijahlofgren

Google Summer of Code Hacker, 222 Posts

16 June 2007 at 5:42am

Edited: 16/06/2007 3:53pm

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.