Tech:Fixing the Accordion

From Cyclopath

The accordion has a couple of key problems that lead to significant usability problems. This page is about how to fix it. See also the relevant grpbug:1484.

The accordion is the side panel with Discussions, Control Panel, Item Details, etc.

Contents 1 Why it's broken 2 Advantages of the current situation 3 Requirements 4 Dependencies 5 Possible solutions 5.1 Put everything in draggable palettes 5.2 Replace accordion with Tabs (or buttons), add permanent strip along bottom 5.3 Replace accordion with tabs, do nothing else 5.4 Two accordions/tab panels 5.5 Two rows of expandable panels, one on top of screen and one on bottom 5.6 Buttons instead of accordion tabs 5.7 Smaller headers and support for multiple panels open at the same time 5.8 Super Tab Bar! 5.9 Half-assery 5.10 Two accordions, one on each side 5.11 Ribbon and details at the bottom 5.12 Icons/Tabs and Item Details Lite Floating Panel 5.13 Pop up windows on hover for details (&c) 5.14 Hide-able tabbed "workspace" on left, permanent toolbar on top, pop up info on hover 6 Misc ideas

[edit] Why it's broken

There are two reasons why the Accordion is breaking down. Since this change will be fairly disruptive, we should solve both.

1. There is no space for the accordion. Each new panel takes away more screen space, and we need to support 1024x768 screens, perhaps with several toolbars in the browser (FF comes with 4 rows of toolbars by default). We already have 6 accordion panels and there is at least one more in the works (search).
2. Accordion panels have arbitrary interdependencies. Some examples:
   • We usually pop open the Item Details panel when a map feature is selected, but we can't if Discussions are open because item selection is also relevant to attaching map items to threads. For now we've resorted to coloring the header green, which is kind of lame.
   • It would be nice to see Routes and Route Details at the same time.
   • Similarly for Control Panel and Item Details.

[edit] Advantages of the current situation

• It resembles Google Maps.

[edit] Requirements

• Any proposals (and mockups) should assume a 1024x768 screen, since we have to support that screen size and the problem is much easier to solve on larger screens.

[edit] Dependencies

It seems useful to enumerate the dependencies between the different panels. Maybe they're not as complicated as we think.

Put a number in the box if two panels sometimes want to be open at the same time, and then explain below.

FIXME: Needs attention - especially from Fernando.

	Disc's	CPanel	Routes	Item Det	RecChang	WatchReg	Search
Disc's				1	2		?
CPanel				3			?
Routes				4			?
Item Det	1	3	4			5	?
RecChang	2						?
WatchReg				5			?
Search	?	?	?	?	?	?

1. Need to select/examine objects while attaching them to a thread.
2. Useful for upcoming conversion of Feedback to Discussions
3. Nice to be able to change options around while editing. Lower priority though, I think.
4. See list of routes and route details at the same time.
5. See info about specific watch regions.

• Item Details: Block, Point, Region Details could be short and wide, but Route Details is inherently tall and narrow.

[edit] Possible solutions

[edit] Put everything in draggable palettes

Proposer: Reid

Description 

• Remove accordion entirely.
• Shrink logo and put the controls surrounding it along the top border.
• Everything that's now an accordion panel becomes a draggable, hideable palette (like Editing Tools).

Advantages 

• Addresses both problems.
• Can hide palettes which aren't yet needed.

Disadvantages 

• More palettes could look cluttered.
• Need some automatic palette cleanup.
• Needs to work OK without any palette dragging (because this is tedious and many users won't know how).
• Need to redefine the notion of what's visible on the map, since a lot of stuff can now be obscured.

[edit] Replace accordion with Tabs (or buttons), add permanent strip along bottom

Proposer: Jim

Description 

• Replace the accordion with the traditional tab system, or simple buttons that switch panels (like for Basic & Advanced in Block Details). Have only three tabs; Discussions, Routes, & Revisions (maybe a 4th; Searches). Similar controls & list displays would match up between these three panels to help familiarity.
• Discussions Tab. Two parts; the threads list, and below this, the thread details (currently they are switched), they would both be visible at the same time. See below for things to make room for combined panels.
• Routes Tab. Again, both parts (now as separate Routes & Route Details) would be combined into one, two-part panel.
• Recent Changes/Revisions Tab. Organized to match the Discussions Panel better. Possible new feature: When a revision is clicked-on, the lower part of Revisions Panel displays a list of items that got changed in the revision (currently the user needs to push multiple buttons/selections/panel-changes to see this info).
• Item Details. No panel. Item details will always be visible in a strip along the bottom of the map. See the attachment in grpbug:1485 for a visualization of this.
• Control Panel. No panel; as in grpbug:1686; move switches to map. Perhaps put tag filters with the new Searches Panel.
• My Watch Regions (also no panel) is little used, and only by experienced users, perhaps, make a small button out of the way, which pops up a box.
• Searches. I'm at a disadvantage here, as I haven't been privy to what it will look like, or function, maybe a button to pop up dialog, like Find Route?
• Tab names/button names would be fixed length: Item details are moved to the strip, Discussions/Thread Details would be integrated (see above).
• Things to make enough room for the combined panels described above:

1. Removing accordion will save space.
2. The top lists of Discussions and Routes can be made shorter; only a few items visible at a time (with a scroll bar).
3. Shrink logo, and put surrounding controls along the top edge (as in Reid's proposal, above).
4. Change the radio buttons for display options (All, Visible areas of map, etc.) into a more space efficient control; a pulldown menu, or a horizontal row of pushbuttons.
5. Put some button controls, and informational text inside the list controls (so they scroll as necessary), either at the bottom or top, or as part of each line item.

• FIXME: Where should item notes go; with Discussions or Item Details?

Advantages 

• Item details will be visible when Discussions are open, in fact they will always be visible, along the bottom.
• Discussion threads, and thread details visible at the same time, same for Routes and Route Details.
• More space available, with the accordion gone, tabs or buttons will occupy one, or maybe two lines
• Tabs are more universal--familiar to most people.

Disadvantages 

• Does the permanent Item Details along the bottom take up too much space for a 1024x768 screen? --Look at my mockup, I made it as small as possible for the minimum size, but I don't know the actual dimensions. I put the strip along the entire bottom window (including the panel space).
• Potentially less room for displaying discussion threads, route details, revisions, etc, before having to scroll.
• Less flexibility in adding new things that don't match the format; tabs that aren't like the Discussions, Routes, and Revisions tabs.
• Item details strip (along bottom) takes away some space from the map.

[edit] Replace accordion with tabs, do nothing else

Proposer: FIXME

Description 

• FIXME

Advantages 

• Easy

Disadvantages 

• Does not solve interdependency problems
• Item Details panel already has tabs

[edit] Two accordions/tab panels

Proposer: Reid

Description 

• We introduce a second accordion or tab panel (perhaps where Map Key is?)
• Then make sure panels which should be visible at the same time are in different "accordions"
• This is similar to Jim's proposal

Advantages 

Disadvantages 

• Works best if the controls that move to a second accordion can be short and wide.

[edit] Two rows of expandable panels, one on top of screen and one on bottom

Proposer: Reid

Description 

Advantages 

Disadvantages 

[edit] Buttons instead of accordion tabs

Proposer: Katie

Description 

We could move all the accordion tabs up to the top and turn them into buttons. This would reduce the space required as they wouldn't each need their own line.

Advantages 

Disadvantages 

Currently the names of the accordion tabs change length, which would create problems.

[edit] Smaller headers and support for multiple panels open at the same time

Proposer: Fernando

Description

• We can save some vertical space by making headers smaller (perhaps like the editing tools header). We can then add a minimize/maximize button to allow opening as many panels at the same time as the user wants.

Advantages

• Does not change the current structure too much.
• Supports having panels like details and discussions open at the same time.

Disadvantages

• Users have to manually close panels they don't want to use anymore.
• Does not handle the possibility of future additional panels.
• There might not be enough space to show all important information when two or more panels are open at the same time.

[edit] Super Tab Bar!

Proposer: Michael

Description

• Shrink logo and corner button area to fit along one long row at the top of the application. Beneath this is a tab bar filled with icons representing available panels to display. Icons are used to keep each tab the same size. The map fills the remainder of the browser window. Each tab in the tab bar is a toggle button and when toggled its panel is displayed over the map. Up to 2 (or 3) panels may be up at a time. When a panel is opened, it replaces the most right panel that is unlocked. If every open panel is locked and space is open, the panel is opened to the right of the other panels (so multiple can be up at a time). The tools, etc. move to the right edge so they are not obscured/moved by opening panels. A panel is closed by re-clicking its tab bar.
• See mock-up (click through to actual image, mediawiki is rendering colors weirdly):
  

Advantages

• Similar to other tab proposals, but comes with picutres
• Supports multiple open panels
• They are not draggable, can easily hide and has much more available space for the map
• Many tabs can be created because the horizontal tab bar is so large, without impacting real estate.
• Can easily have 1 or 2 panels open by locking panels that should remain visible (e.g. control panel, discussions or routes)

Disadvantages

• Many panels will obscure large portions of the map
• Opening/closing a panel when features selected could be distracting (here I'm assuming that a selection auto-opens the panel if needed)
• Icons would have to be learned, might hurt discoverability

[edit] Half-assery

Proposer: Reid

Description 

• Make tab titles a bit smaller
• Make logo smaller, move buttons and controls to row along the top.

Advantages 

• Easy

Disadvantages 

• Does not solve interdependency problems

[edit] Two accordions, one on each side

Proposer: Reid

Description 

• Shrink logo, put controls along top.
• Add a second accordion on the right side.
  • Contains just Item Details. Rest stays on the left.
• Each accordion can be closed entirely.
  • If closed, opens automatically when needed.
  • Each gets checkbox saying whether it can be auto-opened.

Advantages 

• Solves nearly everything

Disadvantages 

• Not much screen real estate left for map with two accordions open.
• Where does the accordion go?

[edit] Ribbon and details at the bottom

Proposer: Mikhil

Description 

• Shrink logo, put controls along top.
• Use the MS Office 2007/2010 Ribbon control as a guideline for tools.
• Panels that need expansion at certain times do so in the Mac-style.

[edit] Icons/Tabs and Item Details Lite Floating Panel

Proposer: Landon

Description 

• Replace accordion with Icon row or tabs. If icons, the row of icons can be placed above or below the dialog.
• Redesign Item Details. The 'dependencies' described above indicate that users like to access Item Details when doing other things, but we haven't discussed what specifically in Item Details is useful. I.e., on the Basic tab, there's Name, Type, Tags, Threads, Bikeability, and Notes; on the Advanced tab there are a bunch of standard/common attributes and in the future there will be arbitrary attributes. Are all of these details necessary to show, or can we get away with a subset?
• Design a simple Item Details floating panel. Depending on what to include, use tabs or buttons within the panel so we don't have to fit everything together in the dialog at once.
• This is similar to Reid's proposal of making a second accordion for Item Details or making it like Map Key. I like the idea of doing something like Map Key, where we show it as necessary and let the user select "Auto-hide" or not. With a floating palette, it'd be nice to use window shading or something similar to let the user hide the dialog and see more of the map.

Advantages 

• Replacing accordion with icons will save some vertical space. At 1024x768, if my Gnome menu bar is too big, I can't see Notes on the Item Details panel.
  

Disadvantages 

• I'm not the biggest fan of floating palettes. But if it is just the one palette, and we're not making floating palettes for all of the accordion panels, I'm more of a fan.
• Redefines the meaning of "visible", since features might be hidden by the floating palette.
• We have to design icons.
  • Pixel-pushing is tedious.
  • Hard to design meaningful icons.
• This doesn't solve how to accommodate Recent Changes and Discussions.

[edit] Pop up windows on hover for details (&c)

Proposer: Tom

Description

• (Thinking along lines similar to Landon)
• 1. Do the accordion functionality via pallets and floating windows,
• 2. EXCEPT I think it would be nice if item details simply appear whenever you hover over a point or block (whenever you’re zoomed in enough), and if you want to do something more you'd click to “pin” it.
• 3. While we're at it I'd add a “my settings” link.
• 4. And, to address a pet peeve, wouldn’t it be nice if the rollup “map key” rolled up another .25 inch and had something at the bottom to close it -- so I can click to open it, look at it, and then click again without moving my mouse. ; -)
• See mock-up (click through to actual image):
  

Advantages

• If item details are more visible, they are more useful, and if they're more visible and more useful, people may be more inclined to edit them
• Settings. It seems to me it’s going to be increasingly desirable to customize one’s settings (e.g. pallet location/visibility defaults). This would also be where people could go if they wanted to be guided through rating various roads per Katie’s “new user” experiment.

Disadvantages

• Popups on hover could be annoying; perhaps the click to pin is too awkward

[edit] Hide-able tabbed "workspace" on left, permanent toolbar on top, pop up info on hover

Proposer: Andrew

Description

• (Also thinking along the lines of Tom and Landon)
• The top toolbar sets the "mode"; the left workspace contains item details or whatever is appropriate for the current mode
• Like Tom's proposal, but the floatable item details is only for viewing; instead of click to pin, click to edit in the panel on the left.

Advantages

• Even more similar to Google maps than the current design

[edit] Misc ideas

• Discussions have duplicated the block notes feature, but they're in separate places with no integration.
  • I'm not sure this is true, actually, since notes are a collectively edited (and hopefully complete & concise) thing, while discussion posts are individually owned and there's no summary of a thread.