Tourist guides: How to organize a table of content on smartphones

In any tourism guide and other content-centric apps one of the most important tools is the table of contents, yes the old stubborn table of contents you usually find on old tech paper books....

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.

Figure 1

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.

Figure 2

Figure 3

But wait there is more. In the case of tourism guides we can radically transform the table of content in a map-based itinerary. So the reader can have two ways of looking at the content: the traditional table (with its special features) and the itinerary view, which will be very practical when planning or starting your journey.

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.

Figure 5

Figure 4

A graphically more elaborate version of the table of content is presented by Audioguidia. The Guide is structured and each station of the itinerary has complete info including user ratings, directions, and, in the case of the museum, the name of artists. All with a large photo on display. Photos of course will allow the user to quickly find the painting or sculpture. The index has no numbers as it does not have a drawn itinerary, but a simple map which shows, when requested by the user, the location of the artwork.



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).

Figure 8

Figure 6

Figure 7

But not all screen are as smooth. We find that using only maps (like, for example, in figure 7) to illustrate an itinerary is not particularly user-friendly. The comfort of a table of content would allow the user to better grasp the content of the guide and navigate through it. The map can be in certain occasions more confusing than useful. For instance if you need to review the names of the different spots on your tour at once the map view doesn't (and cannot) show all the labels at once, so that you need to click on each of them to have a box open with the name of the attraction.

Figure 9

Figure 10

Tripwolf, follows a slightly different approach. Since it doesn't really organize your tour (just like AudioGuidia) the app will only show you a list of attractions (with different categories) which are close to a certain area (could be the one you are in) or that correspond to certain criteria. You then  can move from the list view to the map view. This is technically not a table of content, but more like an index with separate criteria to sort the attractions. As you can see from the images the list and map view are quite polished.

Figure 11

Figure 12

Finally a word about mTrip, which I would definitely name the reference app in the market for the technology features. mTrip does organize your tours with an automatic tool that follows your criteria (time, interests, location, speed of visit, etc.) or you can also edit the tours and even set your own manually. The app makes full use of the features of the table of content and, of course, includes a map view. Here we find again, in the table of contents, the numbers and the images as well as some info about the attraction (including rating by other users). The map view is pretty well done too.


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.
 

Figure 13

Index of POI and map view of a guide to Rome realized with the Woices app.

Figure 14

Figure 15

 Table of contents and Map view of the Galleria degli Uffizi.

Figure 16

Figure 17

Conclusion
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.