<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jan Kłosiński - Flash Platform Consultant &#187; Usability &amp; UX</title>
	<atom:link href="http://www.janklosinski.com/category/usability-ux/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.janklosinski.com</link>
	<description>Exploring Flash, Flex, AIR, and mobile and devices</description>
	<lastBuildDate>Sun, 23 May 2010 16:14:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Interactive Map Usability: Panning and Zooming</title>
		<link>http://www.janklosinski.com/2009/11/19/interactive-map-usability-panning-and-zooming/</link>
		<comments>http://www.janklosinski.com/2009/11/19/interactive-map-usability-panning-and-zooming/#comments</comments>
		<pubDate>Thu, 19 Nov 2009 16:44:04 +0000</pubDate>
		<dc:creator>Jan</dc:creator>
				<category><![CDATA[Usability & UX]]></category>

		<guid isPermaLink="false">http://www.janklosinski.com/?p=49</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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 &#8220;Designing Better Map Interfaces: A Framework for Panning and Zooming&#8221; by Mark Harrower and Benjamin Sheesley.</p>
<p><!-- 		@page { margin: 2cm } 		P { margin-bottom: 0.21cm } -->Browsing a map involves two fundamental tasks: panning and zooming. <em>Panning</em><span style="font-style: normal;"> is an activity of moving the map in order to discover (display on the screen) a portion of it which is not currently visible. </span><em>Zooming</em><span style="font-style: normal;"> is an activity of changing the map&#8217;s scale, effectively making it appear bigger or smaller on the screen.</span></p>
<p><span style="font-style: normal;">Harrower and She</span>esley (2005) use six evaluation criteria to compare nine best practices for zooming and panning. Criteria fall into two main characteristics of a map interface: “<em>functionality</em> (what the tool is capable of) and <em>efficiency</em> (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.</p>
<p>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.</p>
<ol>
<li>Directly Re-position the Map (aka “Grab and Drag”)<br />
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”.</li>
<li>Smart Scroll Bars<br />
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&#8217;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.</li>
<li>Rate-Based Scrolling<br />
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 <em>dead area</em><span style="font-style: normal;"> should be user, i.e. an area of the screen where mouse movements do 	not cause the scene to move.</span></li>
<li><span style="font-style: normal;">Keyboard Controls<br />
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.</span></li>
<li><span style="font-style: normal;">Zoom and Re-centre Under 	Mouse Click<br />
It is a hybrid between zooming and panning. It gives 	the user precise control over panning, zooming is usually done by 	p</span>redefined amount, and the change between scenes should be 	animated to “improve the visual continuity”.</li>
<li>Navigator Tabs / Interactive Compass<br />
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&#8217;s ubiquity among the first interactive maps.</li>
<li>Navigator Window<br />
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.</li>
<li>Specify Explicit Coordinates or Scale<br />
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.</li>
<li>Zoom Box (simultaneous pan and zoom)<br />
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.</li>
</ol>
<p>I encourage you to read the full article for detailed discussion of the problem if it concerns you.</p>
<p>References</p>
<p>Harrower, Mark, and Benjamin Sheesley. 2005. Designing better map interfaces: a framework for panning and zooming. <em>Transactions in GIS 9(2)</em>: 77-89. Also available on-line from &lt;<a title="Designing better map interfaces: a framework for panning and zooming" href="http://www.geography.wisc.edu/~harrower/pdf/Zanning.pdf">http://www.geography.wisc.edu/~harrower/pdf/Zanning.pdf</a>&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.janklosinski.com/2009/11/19/interactive-map-usability-panning-and-zooming/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
