Why is it so important? In the case of touring guides like the ones we are preparing and hopefully bring to you soon, tables of content are the actual way for the user to find his path on an itinerary. And the better the table the better the experience of his visit.
So, how does a table of contents look like? Let us start with the traditional book-style table. The table will have different levels of content and can be quite structured like in the example shown in figure 1.
The table allows the reader to quickly find his/her way through the content of your book or guide and, thanks to the page number, to find the content she wants to read.
The approach on an app will be different, especially if the app needs to work on smaller screen estates, like an iPhone or an Android webphone. The limited space available will force the designer to draw his table of contents in such a way that it is ergonomically acceptable. And believe me, this is not an easy feast.
While screen estate is limited, there are some clear advantages of the smartphone system over the traditional paper content.
They are linked to the flexibility of the platform which improves the functionality of an otherwise stripped-down tool. Some of the features are presented here:
- the content is scrollable: the physical limit of the paper is somehow overcome. This implies that the user can go through the table of content by simply swiping the screen vertically. The table will move up or down revealing the content that is not shown on a particular view.
- menus can be opened and closed. This feature will allow the designer to add at least two levels of content in the app. More would be troublesome.
- the tables are clickable. While the page numbers disappear, the user has a quick way to access the content by clicking on the item she wants to read. And to go back there will be a button which will bring the reader back where he/she was in the table.
What are the most significant examples around? Let us review a few of them. The first one is the the most basic one and corresponds to the GPSMyCity app. The tour index is numbered with the different stations on the itinerary and a photo of the location. As we will see later, these features are common to all guides. Content description is limited to a short title of the locations on the tour. On the front page a button leads the reader to the map version of the tour.
A different approach is followed by PocketCity, which cancels altogether the table of contents to just use the maps. The example on the right shows a user generated itinerary (one of the features of PocketCity is that users can generate automatically an itinerary by just walking around in the city with their smartphone and GPS turned on).
A couple of other examples just to view different approaches to tables of content and/or mapped indexes.
The Asian Museum in San Francisco by Espro - Acoustiguide.
Index of POI and map view of a guide to Rome realized with the Woices app.
Table of contents and Map view of the Galleria degli Uffizi.
If you are building an app which intends to propose tours (thematic or not) to the visitors, please include both, a table of content and a map view. This way you will let the reader be comfortable with one presentation they know well (the traditional table of content revisited) and follow the path on a map. Always number the single stations of the walking tour, so nobody gets lost. Add images of the individual attractions you are showing on the tour, as they are important for the user to find his/her way. Make sure that the ergonomics work, that the links are easily clickable without touching other elements, that the pictographs are clear and do not add too much stuff on the single screen. More doesn't always mean better. We would even argue that, in this case, less is the way to go. More features make the app less content centric and more geared towards the geeks.