Recently I was given a task of evaluating and improving usability of a diagram building tool. Since a challenge of presenting a large graph is similar to the one of presenting a map I started doing some research into best practices of building interactive maps. Turns out that cartographers has been dealing with it for a long time and there are many useful articles. Below is a summary of “Designing Better Map Interfaces: A Framework for Panning and Zooming” by Mark Harrower and Benjamin Sheesley.

Browsing a map involves two fundamental tasks: panning and zooming. Panning is an activity of moving the map in order to discover (display on the screen) a portion of it which is not currently visible. Zooming is an activity of changing the map’s scale, effectively making it appear bigger or smaller on the screen.

Harrower and Sheesley (2005) use six evaluation criteria to compare nine best practices for zooming and panning. Criteria fall into two main characteristics of a map interface: “functionality (what the tool is capable of) and efficiency (how well it supports those tasks, or how much work is required to achieve the same outcome)”. Functionality criteria include (1) sequential versus non-sequential map browsing, (2) precision (user-defined map browsing), (3) local-global orientation cues, (4) live-linked manipulation (immediate feedback). Efficiency criteria are as follows: (1) interface workload, and (2) information-to-interface ratio.

Below is a list of nine common methods evaluated against the criteria outlined above. The methods are presented in no particular order, as the choice of the most appropriate one largely depends on the context. In other words, there is no one-fits-all solution, but the following list presents good approaches.

1. Directly Re-position the Map (aka “Grab and Drag”)
   Can be implemented in two flavours: (1) passive, when the functionality is always on, or (2) active, when the user has to turn it on. The interface should display obvious visual cues such as a hand icon indicating “grab”.
2. Smart Scroll Bars
   Very popular in every modern operating system, scrollbars which only appear when the content is bigger than the available screen space. They also adjust it’s size based on the portion of the picture that is currently displayed in relation to its full size. This gives the user local-global orientation cues.
3. Rate-Based Scrolling
   In this approach the scene is panned in reaction to the mouse position. If the user positions the mouse close to the left side of the scene, it pans to the left. The speed with which panning occurs depends on how far the mouse has been moved: the closer the the edge, the faster the scene moves. To avoid disorientation a large dead area should be user, i.e. an area of the screen where mouse movements do not cause the scene to move.
4. Keyboard Controls
   Using keyboard shortcuts is often much quicker than using GUI and it allows the user to do two things at the same time: pan (using arrow keys) and select with a mouse click. It requires no screen real estate so the user needs to be made aware of it explicitly.
5. Zoom and Re-centre Under Mouse Click
   It is a hybrid between zooming and panning. It gives the user precise control over panning, zooming is usually done by predefined amount, and the change between scenes should be animated to “improve the visual continuity”.
6. Navigator Tabs / Interactive Compass
   Common approach based on 4 or 8 buttons (tabs) positioned close to the sides and corners of the map. Clicking on a tab will pan the scene by a certain amount (usually 25% of currently visible scene). Easily understood due to it’s ubiquity among the first interactive maps.
7. Navigator Window
   Navigator window displays a miniature version of the whole map and a zoom box (#9) indicating which portion of the picture is currently displayed on the screen. Addition of a zoom control makes it even more useful. It allows the user to jump quickly to the exact location while providing global-local cues at the same time.
8. Specify Explicit Coordinates or Scale
   Typically found on every interactive map of the likes of Google or Yahoo. Allows a user to input exact target location, such as street address or geographic coordinates.
9. Zoom Box (simultaneous pan and zoom)
   Another hybrid method which “allows the user to drag and draw a box directly on the map that becomes the new extent of the map”. It takes no screen real estate and provides arguably the quickest way to precisely pan and zoom given the target is already on the screen.

I encourage you to read the full article for detailed discussion of the problem if it concerns you.

References

Harrower, Mark, and Benjamin Sheesley. 2005. Designing better map interfaces: a framework for panning and zooming. Transactions in GIS 9(2): 77-89. Also available on-line from <http://www.geography.wisc.edu/~harrower/pdf/Zanning.pdf>

Spotlight effect

I’ve been doing a lot of Flex / pure ActionScript programming recently, working with default controls a lot. Pretty boring stuff in terms of visuals, so I developed a need to create something flashy.

Like in good old days when I would spend my whole free time experimenting with Flash, I sat down and started playing on a timeline. My goal was to reproduce the Spotlight effect you get when you search your System Preferences. Since it’s hardly arguable that Apple is leading in the field of User Experience I decided I should simply copy the effect in my favourite tool

Below is the result of my messing around with blend modes and alphas. You can download the source FLA file as well. Hope you like it.

Having code conventions is important, especially working in a team. It improves your experience while reading somebody else’s code and vice versa.

Formatting is just one aspect of code conventions, but an important one. Sadly Flash Builder doesn’t give you much control over how the code is formatted. Thankfully, there is a brilliant third-party plug-in that adds this ability.

You can grab Flex Formatter from sourceforge or just add the update site to Eclipse: http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite