map navigation
Widget gallery Zooming
Horizontal or vertical steps
Size matters for the French, but at what scale?
Joking aside, this widget quickly informs how many levels of detail are available, enabling users to dive in at any scale. The zoom buttons at both ends of this widget are highly stylised magnifying glasses. The functionality of that basic widget has been enhanced by the addition of the intermediate steps. Users do not have to step through consecutive levels of detail, but they can jump immediately to view an area of the map at a specific scale.
The current scale is highlighted and the position of the highlighted step informs users of the relative scale. The metaphor of scale is further enhanced by the size of the icon for each step. However, there is no explicit mention of a map scale. This makes it difficult for novice users to jump to a specific scale. The zoom buttons at both ends help this group of users to zoom in sequentially, step by step.
Vertically aligned steps enable users to zoom in on map.
The overall functionality and design of the zooming widget on the Expedia website closely resembles the zoom widget on the Maporama website, except for the vertical alignment. Also, the tools for sequential zooming are located to the side of the steps, not at the extremes. This zoom widget quickly informs users about the number of zoom levels. Users can zoom in at any scale.
The current scale is highlighted and the position of the highlighted step informs users of the relative scale. The step icon for the smallest map scale is at the top of the widget, the step icon for the largest map scale at the bottom. This order may assist users to understand map scale. Small scale maps show the geography at a low level of detail: the viewpoint is far from the Earth surface (top). Large scale maps show the geography at a high level of detail: the viewpoint is close to the Earth surface (bottom).
The metaphor of scale is further enhanced by the size of the icon for each step. There is no explicit mention of a map scale. The step icons are positioned very closely together: users find it difficult to select the proper step. This is further frustrated by the size of the step icons.
Scale notation makes up for lack of visual cues.
The mention of the map scale below the zoom widget informs users of the exact map scale, while the highlighted step icon informs users of the relative map scale. Note that the steps go from large scale to small scale, while the horizontal steps on the Maporama website go from small scale to large scale.
The design of both the zoom buttons for sequential zooming and the step icons for non-sequential zooming fits Yell's corporate identity. However, all step icons have the same size, whereas Maporama and Expedia increase the size of the step icon with increasing map scale. Fortunately, users can tell the order of the step icons from the strong design of the zoom buttons and the labels ZOOM IN/OUT
.
Labelled step icons inform users of zoom levels.
When users move the mouse pointer over a step icon, its colour changes and the tooltip displays the zoom level of the new map view when the step icon is clicked. Instead of a single image for the whole widget and an image map, MapQuest uses one image for each step icon. A JavaScript function changes the image of the step icon when the onmouseover event is triggered.
Confusingly, the highlight colour when the mouse pointer is over a step icon is the same as the colour of the step icon that indicates the current zoom level. The target areas of the zoom buttons at either end of the steps are fairly large to make sequential zooming easier: not only the buttons themselves but also the labels ZOOM IN/OUT
are clickable. Note that the order of the zoom levels is from large scale (at the top) to small scale (at the bottom of the widget), whereas this widget on the Expedia is ordered the other way around.
Coloured step icons and tooltips help users to select desired zoom level.
When users move the mouse pointer over a step icon, its colour changes to a brighter blue while the step icon indicating the current zoom level is highlighted in yellow. The tooltip reads Zoom in
or Zoom out
when the step icon is respectively below or above the current zoom level.
The abstract zoom buttons at either end of the widget are concisely labelled IN
and OUT
. The target area is made up of both the zoom button and its label for easy operation. Users click on the zoom buttons for sequential zooming or they click on the step icons for non-sequential zooming, quickly changing the map scale without having to step through consecutive map scales. The widget consists of vertically aligned images that are replaced when the mouse pointer moves over a step icon or zoom button using a JavaScript function triggered by the onmouseover event.
Change map scale instantly to cover the whole street, city, state, or country.
Descriptive labels on the zoom steps link the map scale with the geographic area covered in the map view. While the AA establishes the link between the map and the geography through real-world distances, Yahoo! Maps achieves this through labelling the zoom levels.
Moving the mouse pointer over a step, its background colour is changed by a JavaScript function triggered by the onmouseover event and the label turns bold. The background colour for the step indicating the current zoom levels is the same as for the steps that the mouse pointer hovers over. The number of the current zoom levels black instead of the blue that indicates a hyperlink.
The order of the steps follows MapQuest: the largest map scale at the top. Maybe a relict of the time when MapQuest powered the maps on the Yahoo! website? Note the arbitrary numbers associated with each zoom level: the smallest number for the largest scale on Yahoo! Maps, the largest number for the smallest scale on MapQuest. On his website Noise Between Stations, Victor Lombardi presents a different take on the step icons for Yahoo! Maps, overcoming the disadvantages of the arbitrarily numbered steps.