UI – Craig Woollard

Accordions suffer from a phenomenon I have coined as 'Sinkhole', which in its worst cases can cause both confusion and disorientation to the user. Sinkhole is however avoidable by using Closable Panels, a pattern that is very similar looking, but behaves differently to Accordions.

What is an Accordion?

The Accordion component is made up of two distinct elements; the panel title and panel content. This pair of elements are repeated as needed to house different sets of information.

Only one instance of the panel content is viewable at a time, and a user switches between content views by invoking the panel title. It is this event of changing content views that brings about the Sinkhole phenomenon.

Sinkhole

When an Accordion grows in height, the content below it is pushed downwards. Should an Accordion's height shrink, then elements below shift upwards to occupy the newly vacated space. An Accordion can grow or shrink each time the user invokes the Accordion's Panel Titles. This interaction brings about the phenomenon I have coined as a Sinkhole.

Microsoft's website uses a Mega Menu on large screen devices for its global navigation, and changes it into an Accordion for smaller screens. The small screen version of their navigation suffers from Sinkhole, exhibiting the undesirable traits I described, which is demonstrated below:

In the video the user first opened 'Products', and after scrolling down the product list, they then chose to look at 'Downloads'. When 'Downloads' was tapped it caused 'Products' to collapse, which shrank the height of the Accordion substantially. At that moment in time (8 seconds passed) the user can no longer see the navigation menu. It has disappeared from view, as it is now above their viewport, and this can cause confusion and disorientation to the user.

Remedying Sinkhole

Sinkhole, what the video above just demonstrated, is quickly remedied by switching from an Accordion to Closable Panels. Then panels are independent from each other; they only close when a user clicks/taps it again (a toggle), and opened panels remain open should the user choose to open another panel. The opposite of what an Accordion does.

In order to close a panel, the user must first scroll up to see the panel title, so that they are able to click/tap it. The page content then flows upwards towards the user's viewport, which means the user's viewport is not changed by the page reflow, keeping them where they where before invoking the panel title.

Inline Scroll

An Accordion's height can be fixed using CSS. When the Accordion's content becomes too much for it to display, a scrollbar is provided so that all of the content can be viewed. The trouble then is how big to make it? Too small when displaying lots of content and it becomes troublesome to consume that content. Too large, and it starts taking up more page space than necessary, which contradicts its very purpose of existence.

Inline scroll has its very own phenomenon too, which I have called 'Treadmilling'. This happens when you scroll down a page using a mouse-wheel or trackpad gesture and your cursor passes over the area where the inline scroll is. Then your scroll begins to scroll through that content instead of the page, with you moving but the main page remaining still. This is a topic I plan to cover shortly, so I won't go into this any further here.

Considering this, I personally cannot find an argument against using Closable Panels instead of an Accordion, with or without inline scroll. Please let me know your thoughts using the comment section below!

Published by Craig Woollard in IxD, UI, UX

Speed is an important factor, and if it is not accounted for properly, can make or break an application or service. Often the focus is on measuring system performance; identifying where the most time is being spent, and then optimising the offending area.

Complementary to this, there are several strategies you can employ to make an application feel faster than it actually is. What the user sees on their screen shapes their perception on how fast they think your application/service is.

Why Faster?

It is well documented that users do not like slow websites, or software for that matter. In business terms that means:

Amazon: 100ms delay results in 1% sales loss
(potential $191m lost in revenue in 2008)

Google: 500ms delay drops search traffic by 20%
The cost of slower performance increases over time

Yahoo: 400ms delay results in 5-9% drop in full-page traffic

Bing: 1s delay results in 4% drop in revenue

AOL: Fastest 10% of users stay 50% longer than slowest 10%

- Stats taken from How to Make Apps Feel Faster by Luke Wroblewski

Next we will cover different techniques to make applications feel faster to the end user.

1. Progress Indicators

Users need reassurance that the system is dealing with their request, and that it has not frozen or is waiting for information from them. Progress indicators are used for this very purpose, to signify it is working, and to set expectations as to when it will be complete and ready for use again.

The style of a progress indicator can influence the perception of speed, so much so that it can appear to be 11% faster. These results are achieved by applying ‘a backwards moving and decelerating ribbed’ treatment.

You can view a video of this research from New Scientist below [requires Flash player]:

You can also read the paper about this research

2. Optimistically Perform Actions

You can allow a user to be more effective with their time, and get the impression that an application or service is fast by not requiring them to wait for actions to take place. Thereby freeing them, allowing them to move onto the next action they need to take.

Instagram for example, begins the upload of an image early; once the user has passed the filter stage. Even though they have not yet added a caption, location, or even committed to the posting the image.

Instagram performing actions optimistically.
Taken from Secrets to Lightning Fast Mobile Design by Mike Krieger

Once the user has finished the upload flow, the image appears in the user’s feed, even if the upload is still in progress. It just happens to be a local copy of the image. But to them it appears as though it's already on Instagram's service.

Instagram reaps three benefits by making the image upload flow optimistic:

Starting the image upload early in the flow gives them a head start, meaning it will be available to other users, sooner.
Showing the uploaded image in their feed, even though it may not be uploaded yet, gives the user task closure by appearing finished.
Users think their service is quick, even though typically uploading images, especially from a mobile, can be a slow process.

For the second point, the same applies to commenting on Instagram. Once you submit your comment, it appears beneath the picture immediately. Yet, that update is not actually instantaneous, it just appears as though it is.

Mike Krieger, co-founder of Instagram, goes into more detail about how Instagram makes their app feel ‘lightning fast’ in his presentation.

3. Distract

"A watched pot never boils"

Sometimes it is unavoidable, and an application has to become temporarily unavailable for a user, whilst it works on their request.

One of Bruce Tognazzini’s principals for interaction design states:

Offer engaging text messages to [keep] users informed and entertained while they are waiting for long processes, such as server saves, to be completed.

- Latency Reduction in First Principles of Interaction Design by Bruce “Tog” Tognazzini

A prime example of this is on the simulation game Football Manager, which regularly involves long processes:

Hints and tips are displayed whilst the users wait for results to be generated, or for games to be created. Messages are used to bring attention to new features, or educate the user so that they can become more effective at playing the game.

Another example is the web-based version of Balsamiq, a wireframing software, which shows the user quotes whilst it is loading:

When providing distractions to the user, it is important to bear in mind that they have a limited time to view the content shown to them. Once the process is completed, that information is taken away from their screen.

4. Progressive Rendering

When designing the pages of an application, the components you place onto a page belon

Avoid ‘Sinkholes’ by Using Closable Panels Instead of Accordions