Accéder au contenu principal

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

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.


Posts les plus consultés de ce blog

Le Champ de Mars - Les travaux préparatoires à la Fête de la Fédération

Notre guide sur la Tour Eiffel et le Champ de Mars sera gratuite le 25 octobre. Voici un extrait signé par Alain Rustenholz. Le guide peut être téléchargé pour iPhone et iPad ici . Démolissez mentalement les immeubles des numéros impairs de l’avenue de Suffren, à votre gauche, pour retrouver la configuration du Champ de Mars originel : plus de 400 mètres de large sur près d’un kilomètre de long. Livrés à ce travail de colosses (la destruction de toute une rangée de bâtiments, et même deux : il vous faut abattre aussi le second rang, parallèle au premier, qui se découvre comme vous arrivez rue Octave Gréard), vous voilà, terrassiers, niveleurs, exactement dans la pose, dans la peau de la foule parisienne en cette fin de juin 1790. La Commune de Paris, suivie par l’Assemblée constituante, a proposé que les divers terroirs de la France se rassemblent en une Fédération générale ; le Champ de Mars doit être le creuset de cette fusion. Ce n’est alors qu’un terrain de manœuvre ; on compte

Piranesi studioso del Mausoleo di Adriano

In occasione della pubblicazione della guida su Castel Sant'Angelo ci siamo interessati un momento alla bellissima serie di disegni del mausoleo di Adriano realizzati da Giovanni Battista Piranesi. Giovanni Battista Piranesi fu un grande studioso dell'arte romana e si fra gli altri monumenti dell'antichità si interessò anche molto a Castel Sant'Angelo. Nato nel 1720 a Mogliano Veneto, all'epoca sotto dominio della Serenissima, Piranesi si avvicina all'antichità classica e all'arte grazie alla sua famiglia. Suo fratello Andrea lo introduce alla cultura latina mentre lo zio, magistrato delle acque a Venezia, lo inizia all'architettura e al patrimonio monumentale. A Roma dal 1740, al seguito dell'ambasciatore di Venezia presso la Santa Sede Marco Foscarini, risiede a Palazzo Venezia e entra in contatto con cerchie artistiche, prime fra tutte quelle francesi della Accademia di Francia. Dalla collaborazione con alcuni artisti francesi nascono le pr

Le Louvre médiéval: la salle Saint-Louis (3)

Troisième et dernière étape de notre parcours du Louvre médiéval qui nous mène dans les structures de la forteresse érigée par Philippe Auguste et dans les réaménagements suivants jusqu'à l'époque de Louis IX. Le texte complet de Daniel Soulié, avec un audioguide, peut être téléchargé pour des iPhone/iPad ou Android . On ne sait que peu de choses des aménagements intérieurs de l’ancien Louvre: aucune image n’en est conservée et les rares textes qui y font allusion sont souvent vagues et toujours peu fiables. Le premier Louvre de Philippe Auguste est une simple forteresse qui n’a jamais été dotée des espaces de représentation nécessaires au bon fonctionnement d’une résidence royale. Le roi disposait peut-être de quelques pièces habitables pouvant servir derefuge en cas de danger, mais rien ne permet d’en cerner les caractéristiques.