Here’s an example of how complexity beneath the surface of a web page looks as natural and intuitive as you can get. It concerns maps, menus and information. You can see the interface I’m describing on this website on the page with a map of Places and their associated articles (new tab/window). Check it out then return here for the rest of this article.
A map menu and a text menu
We begin with the basic idea that we have a set of data. In this instance, the data is a small collection of pages about geographical places. We can plot these on a map with each place being represented with its own marker on that map.
We can also design this so that a click on each of these map markers takes us to that place’s own page in the website. Equally, we can make a familiar text menu of these pages, showing a list of the places by name with their pages’ publication dates, nothing special here:
Both of these menus are standard stuff. They are menus that link to pages. One uses a map, the other uses a list of textual items. We can arrive at the same target page via either the map or by the text menu. Again, nothing special here.
Joining these menus together
This gets interesting when we put the two menus side by side and link them together interactively. In the example we have, the map occupies the main content block of the page and the narrower text menu occupies the right-hand column. Seeing them side-by-side is in itself nothing new, but it does offer an opportunity to link them and exploit their being adjacent to each other. There’s a lot of wiring and configuration to get them side-by-side, even in Drupal. Adding just a bit more wiring so that user-interaction with one fires up a visual change in the other, moves this on really nicely. And — this linkage can operate in both directions.
In one direction, when you hover over the right-hand text menu, the popups inside the accompanying map spring to life. There are some variations in the way this functions on a desktop with a mouse, on an iPad or on an Android tablet. (And maybe the menu list is below the map if your tablet is in portrait mode.) In the other direction, as you hover over the place markers on the map, the relevant menu item in the list is highlighted. I find this electrifying. I have Rik de Boer over at the Drupal IP Geolocation Views & Maps module to thank for this.
Why do it anyway?
There are several reasons for doing this. Firstly, the map can only display info about one place marker at a time. Similarly, the text menu place names tell us nothing about where they belong on the map. Running the cursor up or down the list gives an instant display of this relationship. We can then click (map link or menu link) with less uncertainty as to where the click will take us. This tiny bit of interactivity helps support the content and helps us access it with just that bit more ease. In a nutshell, it speeds things up and reduces wasted clicks.
What needs improving?
Several things need improving or, at the least, need recognising as having potential limitations:
- The way this works on tablets and smartphones when cursors are replaced by fingers means that two taps with a long interval between them works fine on some Android tablets. On others, the hyperlink action fires and the users will get annoyed.
- When there are too many items to link , the crowded map becomes difficult to work with, but the list helps get round that. Hovering across the list reveals map markers that might otherwise have been obscured.
- Make that list too long and you will need to scroll to see the items you want. This will probably scroll the map out of view.
- On smartphones or on tablets in portrait mode the list is probably going to show up under the map so users might see no relationship operating between these two menus.
Far from being a technical solution in search of suitable content, this is already workable. It’s use on your website just needs careful thought.