<?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>Design vs Art Blog &#187; Showing Progress</title>
	<atom:link href="http://www.designvsart.com/blog/category/showing-progress/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designvsart.com/blog</link>
	<description>Interaction Design and User Experience</description>
	<lastBuildDate>Tue, 08 Nov 2011 08:24:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<cloud domain='www.designvsart.com' port='80' path='/blog/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>Process Funnel Bar Design</title>
		<link>http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/</link>
		<comments>http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/#comments</comments>
		<pubDate>Thu, 17 Jan 2008 05:48:12 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Good Design]]></category>
		<category><![CDATA[Interfaces]]></category>
		<category><![CDATA[Showing Progress]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/' addthis:title='Process Funnel Bar Design ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Websites should keep users informed while they are completing a task, like purchasing something. Showing users in which step they are let them decide whether it&#8217;s worth completing the process now or later. You might think, &#34;I don&#8217;t wanna let &#8230; <a href="http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/' addthis:title='Process Funnel Bar Design '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/' addthis:title='Process Funnel Bar Design ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p><b>Websites</b> should keep users informed while they are completing a task, like purchasing something. Showing users in which step they are let them decide whether it&#8217;s worth completing the process now or later. You might think, &quot;I don&#8217;t wanna let them go&quot;. Fine, but this is how <b>customer-center design</b> works, in the long term this is going to be good for the website.</p>
<h3 style="text-align: center;">
<i><br />
&quot;A progress bar should be easy to read, number of steps should be minimized&#8230;&quot;</i></h3>
<p>A <b>well designed progress</b> bar is an excellent way of telling users where they are and what to expect. A <b>progress bar</b> should be easy to read, number of steps should be minimized and it has to be in a prominent and highly visible position.</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><img width="500" height="251" border="1" alt="Lufthansa Website" src="http://www.designvsart.com/blog/wp-content/uploads/Lufthansa Big 20080116.png" /></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p><a href="http://www.lufthansa.com" target="_blank"> Lufthansa</a>, the airline, uses <b>user-friendly design</b> for its <b>progress bar</b>. Right number of steps, clear wording and visibility. Although the Lufthansa website is not perfect, from the <b>usability</b> point of view, this piece of it it&#8217;s well design.</p>
<p>&nbsp;</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><img width="500" height="39" border="1" alt="Lufthansa Progress Bar" src="http://www.designvsart.com/blog/wp-content/uploads/Lufthansa Bar 20080116.png" /></td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p><a target="_self" href="http://www.designvsart.com/blog/?s=lufthansa&amp;sbutt=Go">Click here to see other articles about the Lufthansa website</a></p>
<p>&nbsp;</p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=317&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/' addthis:title='Process Funnel Bar Design '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/01/17/process-funnel-bar-design/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Using Animation To Show Progress</title>
		<link>http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/</link>
		<comments>http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/#comments</comments>
		<pubDate>Tue, 15 Jan 2008 05:31:21 +0000</pubDate>
		<dc:creator>Alexis Brion</dc:creator>
				<category><![CDATA[Good Design]]></category>
		<category><![CDATA[Online Shopping]]></category>
		<category><![CDATA[Showing Progress]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/' addthis:title='Using Animation To Show Progress ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>Keeping users waiting for a process to finish is not an easy task on the web. One usability rule is to keep users informed, to give feedback when the system is doing something. &#34;The best way to display progress is &#8230; <a href="http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/">Continue reading <span class="meta-nav">&#8594;</span></a><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/' addthis:title='Using Animation To Show Progress '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style addthis_" addthis:url='http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/' addthis:title='Using Animation To Show Progress ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div><p>Keeping users waiting for a process to finish is not an easy task on the web. One <b>usability rule</b> is to keep users informed, to <b>give feedback</b> when the system is doing something.</p>
<h3 style="text-align: center;">
<i><br />
&quot;The best way to display progress is with an animation&#8230;&quot;</i></h3>
<p>Users click on some <a title="More on action buttons" target="_self" href="http://www.designvsart.com/blog/2008/01/09/action-buttons-made-visible/">action button</a>, for example to find flights, and the website starts looking for flights. During this process the <b>website</b> should inform users that something is happening behind the scenes. </p>
<p>The best way to <b>display progress</b> is with an animation. Typical examples are the online flight booking websites, they usually connect to airline databases, a process that takes long, so users must wait until they get the offers. Here some examples on how to <b>demonstrate progress</b>, all are animations.</p>
<p>&nbsp;</p>
<table width="550" cellspacing="1" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center;"><img width="476" height="152" border="1" alt="Lufthansa" src="http://www.designvsart.com/blog/wp-content/uploads/Lufthansa 20080115.png" /></td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p style="text-align: center;"><img width="363" height="174" border="1" alt="Lan Chile Website" src="http://www.designvsart.com/blog/wp-content/uploads/LAN 20080115.png" /></p>
</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p style="text-align: center;"><img width="376" height="254" border="1" alt="Digg" src="http://www.designvsart.com/blog/wp-content/uploads/Digg 20080115.png" /></p>
</td>
</tr>
<tr>
<td>
<p>&nbsp;</p>
<p style="text-align: center;"><img width="245" height="87" border="1" alt="Orbitz" src="http://www.designvsart.com/blog/wp-content/uploads/Orbitz 20080115.png" /></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<img src="http://www.designvsart.com/blog/?ak_action=api_record_view&id=316&type=feed" alt="" /><div class="addthis_toolbox addthis_default_style " addthis:url='http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/' addthis:title='Using Animation To Show Progress '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.designvsart.com/blog/2008/01/15/using-animation-to-show-progress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

