html5rocks/www.html5rocks.com — pull request #614 by WillsB3 (2013-09-23 19:31:54+00:00)
Title: Improve Table of Contents UX on mobile

While browsing one of the recent articles on a mobile device I found the Table of Contents menu really frustrating. I had a really hard time trying to figure out how to close it without selecting any of the links, and it seemed like sometimes clicking a link would load the right section but other times it would not, and instead the menu would simply disappear.

I've taken a look at the code and worked on trying to make some simple usability improvements in the areas I felt it were problematic.

Here's a summary of the changes I've made:

1. Added an explicit "Close Menu" button to the bottom of the TOC.

This gives the user a clear way to "get back" to what they were doing before, without loosing their current location in the document. The "Close Menu" button is now the only way to close the menu. Previously the menu could be closed by tapping anywhere on the background of the menu that wasn't a deep link, however there was no indication to the user that this was possible. It also meant that mis-tapping a deep link would close the menu (and not navigate to the section they tried to tap) thus causing greater confusion.

2. Made parts of the menu use touch events instead of the delayed synthesised click event.

This was done to try and improve the responsiveness of the menu by avoiding the ~300ms delay of synthesised click events. I still feel there's some work to do in this area to make it feel perfect. (TODO: Need to profile).

3. Prevented the main document scrolling when scrolling past the bounds of the TOC where possible.

When scrolling to the top or bottom of the TOC the scroll behaviour propagates up to the html/body element when it reaches the bounds of the overflow: auto; container. this means that it was previous possible to be scrolling the main document behind the TOC while the TOC appeared stationary. I've mitigated this where possible by setting overflow: hidden; on the html/body element when the menu is shown and removing this rule when the menu is dismissed. This works well in most situations but there is still one issue I discovered in iOS7 caused by the disappearing tab bar. Not sure if this is a Mobile Safari specific problem but I couldn't replicate it on Android.

4. Made the hit areas for the section links in the TOC larger, and removed the dead spacing between them.

There is now no tappable gap between items. This means section titles are much easier to hit reliably.

5. Gave the section title links an "active" state.

This was done to provide at least some instant feedback to the user that the device has registered their action. There still feels like an unnecessary delay between tapping a title and the menu closing and showing that section but I've yet to profile it to find the exact cause. The active state slightly highlights the tapped item with a slightly lighter background colour.

6. Made it easier to differentiate between TOC entries by adding dividers.

I found it hard to distinguish between one item and the next in the table of contents when some of the section headings span onto multiple lines. I experimented with zebra-striped backgrounds for the list items but it didn't look great when the TOC was long enough to trigger the scrollbar. Open to other suggestions but using dividers seems like a pretty good improvement for now.

**Notes:**

I'd like to get your thoughts on the changes implemented so far. I feel like the TOC still isn't perfect but I believe the adjustments I've made above improve the usability of this menu considerably.

I'm new to the codebase and while I've checked as much as I can I may have missed something I've inadvertently broken during development of these enhancements. I'd welcome any pointers or advice that others may be able to provide regarding what else may need to be done or checked before others are happy with the suggestions.

Preview Screenshot:

![screen shot 2013-09-23 at 20 07 18](https://f.cloud.github.com/assets/868834/1194356/b639c0fe-2483-11e3-81a4-cc194af1fd8d.png)

Preview Video on an actual device:

[http://cl.ly/0o3J0q2A230o](http://cl.ly/0o3J0q2A230o)

Looking forward to hearing thoughts and feedback.