<?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>Rune&#039;s Blog &#187; user interface design</title>
	<atom:link href="http://runmad.com/blog/tag/user-interface-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://runmad.com/blog</link>
	<description>A blog about code, graphics, UI, marketing and whatever else interests me. Follow me on Twitter: @runmad</description>
	<lastBuildDate>Sat, 28 Jan 2012 14:08:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Some notes on UIView animation</title>
		<link>http://runmad.com/blog/2010/05/som-notes-on-uiview-animation/</link>
		<comments>http://runmad.com/blog/2010/05/som-notes-on-uiview-animation/#comments</comments>
		<pubDate>Mon, 17 May 2010 14:00:26 +0000</pubDate>
		<dc:creator>Rune Madsen</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[Xcode]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[uibarbutton]]></category>
		<category><![CDATA[uiview]]></category>
		<category><![CDATA[user experience]]></category>
		<category><![CDATA[user interface design]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://runmad.com/blog/?p=175</guid>
		<description><![CDATA[UIView animation is a simple and nice way to add to your user experience. I just wanted to point out a few suggestions when using UIView animations. Duration (speed): If you choose to use animation to compliment some of the stuff already happening in UIKit, either at the same time or before/after, it makes a [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://runmad.com/blog/wp-content/uploads/2010/05/Screen-shot-2010-05-16-at-11.02.16-PM.png"><img class="aligncenter size-full wp-image-176" title="UIView Animation Block" src="http://runmad.com/blog/wp-content/uploads/2010/05/Screen-shot-2010-05-16-at-11.02.16-PM.png" alt="" width="296" height="64" /></a></p>
<p>UIView animation is a simple and nice way to add to your user experience. I just wanted to point out a few suggestions when using UIView animations.</p>
<p><strong>Duration (speed):</strong><br />
If you choose to use animation to compliment some of the stuff already happening in UIKit, either at the same time or before/after, it makes a big difference how fast your animations are. Pretty much all the UIKit animations I have come across have a duration of 0.3f and so should yours. Of course, it&#8217;s doesn&#8217;t always work 100% but for the most part, 0.3f is what you should aim for. It&#8217;s quick so your user don&#8217;t wait for something to finish animating before continuing with the next input action, and it&#8217;s not too fast so that the user doesn&#8217;t have a chance to see where the object came from or what happened.</p>
<p>If you have an animation happening while the keyboard animates up or down, use an animationDuration of 0.3f. Same with pushing and popping the navigationController. Annotations in MKMapView also drop at a duration of 0.3f.</p>
<p>0.3f is the way to go.</p>
<p>A simple UIView animation can be added with the following code:</p>
<div style="margin: 0px 0px 20px; text-align: left; color: #000000; background-color: #f1efe6; border: 1px solid #d3d1c7; padding: 0.5em 1em 0.5em 1em; overflow: auto; font-size: small; font-family: monospace;"><span style="color: #dd0000;">[</span>UIView <span style="color: #003369;">beginAnimations</span>:nil <span style="color: #003369;">context</span>:<span style="color: #003369;">nil</span><span style="color: #dd0000;">]</span>;<br />
<span style="color: #dd0000;">[</span>UIView <span style="color: #003369;">setAnimationDuration</span>:<span style="color: #0000ff;">0.3f</span><span style="color: #dd0000;">]</span>;<br />
self.segmentControl.alpha = 1.0f;<br />
<span style="color: #dd0000;">[</span>UIView <span style="color: #003369;">commitAnimations</span><span style="color: #dd0000;">]</span>;</div>
<p>The above example is from an app I&#8217;m doing, where the segmentControl is enabled and I increase its visibility in the toolBar at the same rate as a pin drops in the map within the same screen.</p>
<p><strong>When to use animation:</strong><br />
A few objects come with free animation (also at a duration of 0.3f, of course). For example, when adding a UIBarButton to your UINavigationBar, consider setting these with animation. If you replace a UIBarButton with another, they&#8217;ll even animate in and out nicely during the change. When adding a pin to a map, why not drop it onto the map with an animation, instead of it suddenly appearing on a map from nowhere?</p>
<p>Another good advice is to do animation (whether your own or with objects that include animations) to bring attention to an object. For example, if you have a pushed view, consider what you can &#8220;add&#8221; after the view has appeared through animating your objects in viewDidAppear.</p>
<p><strong>Create a better UX with animation</strong><br />
Consider all the ways you can use UIView animation blocks in your app to enhance the user experience. It&#8217;s a great way to create a more fluid and pleasant experience for your users. A user&#8217;s inputs and actions will feel less rough and more smooth and soft to the touch. Don&#8217;t go overboard with animations. Too many will become annoying and it&#8217;s important to use animations only where appropriate.</p>
<p>The best advice is probably to have a look at many of the built in apps designed by Apple as well as the many free animations that a part of UIKit objects (how UIBarButtons animate in and out when you push a UIViewController stack, how a modal view appears from the bottom, etc.).</p>
<p><!--[if IE]><iframe frameborder="0" allowTransparency="true" class="addtoany_special_service twitter_tweet" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;counturl=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;count=none&amp;text=Some%20notes%20on%20UIView%20animation" scrolling="no" style="border:none;overflow:hidden;width:55px;height:20px"></iframe><![endif]--><!--[if !IE]><!--><iframe class="addtoany_special_service twitter_tweet" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;counturl=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;count=none&amp;text=Some%20notes%20on%20UIView%20animation" scrolling="no" style="border:none;overflow:hidden;width:55px;height:20px"></iframe><!--<![endif]--><!--[if IE]><iframe frameborder="0" allowTransparency="true" class="addtoany_special_service facebook_like" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;layout=button_count&amp;show_faces=false&amp;width=75&amp;action=like&amp;colorscheme=light&amp;height=20&amp;ref=addtoany" scrolling="no" style="border:none;overflow:hidden;width:90px;height:21px"></iframe><![endif]--><!--[if !IE]><!--><iframe class="addtoany_special_service facebook_like" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;layout=button_count&amp;show_faces=false&amp;width=75&amp;action=like&amp;colorscheme=light&amp;height=20&amp;ref=addtoany" scrolling="no" style="border:none;overflow:hidden;width:90px;height:21px"></iframe><!--<![endif]--><a class="a2a_button_instapaper" href="http://www.addtoany.com/add_to/instapaper?linkurl=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;linkname=Some%20notes%20on%20UIView%20animation" title="Instapaper" rel="nofollow" target="_blank"><img src="http://runmad.com/blog/wp-content/plugins/add-to-any/icons/instapaper.png" width="16" height="16" alt="Instapaper"/></a><a class="a2a_button_email" href="http://www.addtoany.com/add_to/email?linkurl=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;linkname=Some%20notes%20on%20UIView%20animation" title="Email" rel="nofollow" target="_blank"><img src="http://runmad.com/blog/wp-content/plugins/add-to-any/icons/email.png" width="16" height="16" alt="Email"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Frunmad.com%2Fblog%2F2010%2F05%2Fsom-notes-on-uiview-animation%2F&amp;title=Some%20notes%20on%20UIView%20animation" id="wpa2a_4">Share/Bookmark</a></p>]]></content:encoded>
			<wfw:commentRss>http://runmad.com/blog/2010/05/som-notes-on-uiview-animation/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

