Before digging into interaction design, we looked at a number of different zoomable User Interfaces (ZUI). We wanted to gain an understanding of the patterns users expect and how interfaces differentiate themselves. People have been interacting with map interfaces for quite a while now, but zoomable images are a relatively new phenomenon. Most follow a similar interaction to maps with zoom controls and click and drag to move around; however, there were a few outliers. There were also multiple methods for calling out points of interest. Below you will find some of my findings, observations, and opinions about which had the most compelling and useable interfaces.
Navigation
Zoom Controls
Personally, I always feel like zoom controls clutter a visually clean and intuitive interface. However, looking at a number of examples made it clear that users do still expect them. Every example of zoomable interface I looked at included, at minimum, a plus and minus button to zoom in and out. All interfaces also supported zooming with a mouse scroll wheel. I think it is important to continue to include at least minimum zoom controls so users are sure to understand that the interface is zoomable, and to support those users who are using a mouse without a scroll wheel or a trackpad without scrolling capabilities. Example image from Google Maps
Click and Drag
Users can explore most interfaces by clicking and dragging to move the image (like google maps). This seemed the most intuitive to me, likely because I am used to interacting with maps in this way. However, it can get tedious to move through a large image in this way, especially when you are fully zoomed in. Example image from Google Maps
Click and Direct
This is a much faster way to move through an image, but it takes some getting used to. To navigate these images, you click and the image moves in whichever direction your mouse is pointing with speed increasing as you move away from the original click point. For example, when I click and move my mouse towards the right side of the screen, the image scrolls to the right. While this method is fast, it can be unexpected and difficult to regulate your speed so you can fully explore the desired parts of the image. One way to clarify this interaction is to use a directional cursor that indicates to the user which way they are moving when they press the mouse button. Example image from Pittsburgh Revolution.
Thumbnail
Many interfaces use a thumbnail of the whole zoomable image as a navigation device. However, the way you interact with them varies, in some interfaces clicking the thumbnail with return you to the zoomed out view (e.g. Stories in the Rock), while in others it acts as a short cut to a specific part of the image, staying at the same zoom level (e.g. TagOramic).
Compas Indicator
In 360 degree views of large outdoor spaces, a compas indicator is a nice way to orient yourself in the space. It can clutter an interface, but if you are displaying a view of an outdoor, highly recognizable location, it could be a nice way to help users explore. Example images from The Guardian: London Panorama , and Nature Valley Trail View
Map view
A couple interfaces used the zoomable image alongside a map to indicate the direction you were "looking". While this was interesting, it takes up a large portion of the screen, and while novel, doesn't give you that much additional information. The option to open and collapse the map solves the screen real estate problem. Example image from 360 CitiesDigital Annotation Methods
Snapshots
Snapshots allow a user to call out a point of interest by putting a box around the interesting feature. This then appears in a list along the bottom and acts as a shortcut to that part of the image. These can help clarify what the user is supposed to recognize. Many times a dot indicator can not perfectly describe where to look. However, as a navigation device, snapshots are difficult to understand, and the thumbnails along the bottom are often illegible when taken out of the context of the full image. Example image from Nova: Inside a Nuclear Control Room.
Popup in Place
If points of interest only have small pieces of information attached to them a small pop up can appear attached to the point itself. This can function as a link to more information if needed. Example image from Google Maps
Popup in overlay
When substantial information needs to be displayed, a larger pop up overlay is used. In some cases a small line still connects the overlay to an interest point. Some sites or applications allow the user to move the overlay around so the user is able to position it out of the way, other sites take up the whole screen with the overlay and disable moving around the image while the overlay is open. Example image from IdeumStandout Examples
Zygote Body
Zygote Body started out as at Google 20% time project. It is a cool interface that lets you explore the human body through a zoomable, layered interface. The interface makes good use of zoomability, but also added a level of complexity by allowing users to turn different layers (e.g. skeletal and muscular systems) on and off. View site »
Google Art Project
Google Art Project allows users to explore artwork from some of the worlds most famous museums. Being able to zoom in virtually often allows the viewer to see more detail than if they had visited the physical piece of artwork. While this is a noble idea and a visually appealing site, the interface is odd, and sometimes difficult to understand. View site »
Nature Valley Trail View
Ever wanted to go hiking from your living room couch? Nature Valley Trail View allows you to visit some of the United State's most famous national parks and take virtual hikes through the use of street-view-esk imagery and navigation. This site nicely combines different levels of information including an overhead topographic map view as well as the immersive image view. View site »
No comments:
Post a Comment