<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>arnorhs</title>
	
	<link>http://arnorhs.com</link>
	<description>Web Development Blog</description>
	<lastBuildDate>Sun, 19 Feb 2012 00:04:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/arnorhs" /><feedburner:info uri="arnorhs" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>arnorhs</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Sensei DB</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/W22JSGoD3cU/</link>
		<comments>http://arnorhs.com/2012/02/18/sensei-db/#comments</comments>
		<pubDate>Sun, 19 Feb 2012 00:04:33 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1303</guid>
		<description><![CDATA[LinkedIn is perhaps not known for their development efforts in the open source community. But to my surprise, they have released an open source data store, dubbed &#8220;Sensei DB&#8221; which I find really interesting. (They may in fact have released it a while ago, but I just recently have discovered it) It&#8217;s built for high [...]]]></description>
			<content:encoded><![CDATA[<p>LinkedIn is perhaps not known for their development efforts in the open source community.</p>
<p>But to my surprise, they have released an open source data store, dubbed &#8220;Sensei DB&#8221; which I find really interesting. (They may in fact have released it a while ago, but I just recently have discovered it)</p>
<ul>
<li>It&#8217;s built for high reliability, fault tolerance and scalability</li>
<li>The main uses are for full text search, key value store and realtime updates</li>
<li>It includes a new query language, very similar to SQL, which they call BQL, or &#8220;Browse Query Language&#8221;</li>
</ul>
<p>All in all it looks pretty interesting.</p>
<p>More information about SenseiDB on its website: <a href="http://linkedin.github.com/sensei/">http://linkedin.github.com/sensei/</a>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2012%2F02%2F18%2Fsensei-db%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2012%2F02%2F18%2Fsensei-db%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/W22JSGoD3cU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2012/02/18/sensei-db/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2012/02/18/sensei-db/</feedburner:origLink></item>
		<item>
		<title>My new Kindle Fire</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/QnFNV0IBdw8/</link>
		<comments>http://arnorhs.com/2012/02/10/my-new-kindle-fire/#comments</comments>
		<pubDate>Fri, 10 Feb 2012 08:08:51 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Meta]]></category>
		<category><![CDATA[amazon]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[hacker buddy]]></category>
		<category><![CDATA[kindle]]></category>
		<category><![CDATA[kindle fire]]></category>
		<category><![CDATA[off topic]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1313</guid>
		<description><![CDATA[Recently I won a Kindle Fire in a Hacker Buddy give away, sponsored by Tokbox. (Hacker Buddy is a site that connects hackers to other hackers with the goal of helping each other out, you should check it out)

I wanted to write up a summary of my experience using the device.

I'm not going to bore anybody with specs, information or detail. Enough information can be found online, eg. on the Amazon Kindle store.]]></description>
			<content:encoded><![CDATA[<p>Recently <a href="http://hackerbuddy.com/posts/6">I won a Kindle Fire</a> in a <a href="http://hackerbuddy.com/">Hacker Buddy</a> give away, sponsored by <a href="http://www.tokbox.com/">Tokbox</a>. (Hacker Buddy is a site that connects hackers to other hackers with the goal of helping each other out, you should check it out)</p>
<p>I wanted to write up a summary of my experience using the device.</p>
<p>I&#8217;m not going to bore anybody with specs, information or detail. Enough information can be found online, eg. on the <a href="http://www.amazon.com/gp/product/B0051VVOB2/ref=as_li_ss_tl?ie=UTF8&amp;tag=httpscrolcom-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=B0051VVOB2">Amazon Kindle store</a>.</p>
<h3>First impressions</h3>
<p>My first impression and experience of using the Kindle Fire was actually pretty good. I had read some reviews and was prepared for the worst, but actually the whole experience was quite pleasant.</p>
<p>I turned it on, logged in with my Amazon account (I am an Amazon Prime member) and immediately I saw my Kindle books there, which was nice.</p>
<h3>Playing movies</h3>
<p>The first thing I tried doing was playing movies and TV shows. The search is great and navigation is very understandable. Streaming a movie is super fast and nice and there were no hickups. I watched a Star Trek episode and started playing some movies and it was just great. The image quality is very adequate for watching a movie or a show, the volume is nice, so for watching movies or TV shows there&#8217;s not much negative to say about that.</p>
<p>If you&#8217;re not an Amazon Prime member, I can imagine that buying a TV show for a few bucks can be a bit annoying, but Prime is totally worth it, so you should just get a Prime membership if you&#8217;re going to get one of these devices.</p>
<h3>Reading books, pdfs</h3>
<p>Reading books works just as well as on the normal Kindle. It&#8217;s not as nice to actually read for a long period of time, but I don&#8217;t really want to use this device to read anyways.</p>
<p>However I hoped that reading PDFs would be nice, but it actually isn&#8217;t. It could be but the only problem is that navigating a document is kind of a pain, especially since when you start dragging, the anti-aliasing of the text goes off. So the text flickers while you do that, and that&#8217;s highly distracting.</p>
<p>That was probably my biggest disappointment.</p>
<h3>Playing games</h3>
<p>I&#8217;ve been playing angry birds (of course) and Cut the rope and both those games are super smooth. The touch screen works well and the graphics are very smooth. This is a great device for playing android games.</p>
<h3>Apps and the Android market</h3>
<p>The app store on the Kindle is a bit of a let down. I think it would be nice to have access to the real Google market, since there aren&#8217;t that many apps available. For instance the Twitter app you can get is just a shortcut for opening the Twitter mobile site. That sucks.</p>
<p>But there is some selection of apps, but it could be much better.</p>
<h3>The UI</h3>
<p>The user interface seems a bit lame. It probably looks good to a lot of people, but I just feel that there&#8217;s too much chrome and fancy animations all over the place. And not the kind that makes the usability better.</p>
<p>Searching is really strange thing on the device. Mostly because there&#8217;s a lot of search bars all over the place and they don&#8217;t search the same thing. It&#8217;s easy to get confused and not realizing where exactly you are searching, so that can definitely be improved.</p>
<p>Your personalized app list is kind of lame as well. You get this cover flow-type of UI for browsing the apps and your books (all intermingled, which I don&#8217;t know what I feel about yet) and there&#8217;s a secondary view that views them all in a row. It&#8217;s just a bit strange and arbitrary and I wish they had gone with a more traditional UI for that stuff.</p>
<p>Those are definitely obsessions and I bet most people won&#8217;t care at all about that and the UI will work just fine.</p>
<h3>The hardware</h3>
<p>The Kindle Fire is a bit heavy compared to an ipad, but you get used to it pretty quickly. The battery life is fine, and actually exceeded my expectations. You can watch a couple of movies and play a game on the device before you deplete the battery.</p>
<p>Other than that there&#8217;s not much to say about the hardware. The only issue I found is that it&#8217;s a bit finniky to plug the USB cable charger into the device, but you get used to it.</p>
<h3>Conclusion</h3>
<p>I can&#8217;t help but recommend this device to people. Especially if you just want to try having some secondary device to lounge around in your sofa for a few hours a week. It works well for what it does, and that&#8217;s about it.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2012%2F02%2F10%2Fmy-new-kindle-fire%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2012%2F02%2F10%2Fmy-new-kindle-fire%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/QnFNV0IBdw8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2012/02/10/my-new-kindle-fire/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2012/02/10/my-new-kindle-fire/</feedburner:origLink></item>
		<item>
		<title>Is Node.js the next Ruby on Rails?</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/HIXHkIziEbs/</link>
		<comments>http://arnorhs.com/2012/01/31/is-node-js-the-next-ruby-on-rails/#comments</comments>
		<pubDate>Tue, 31 Jan 2012 07:33:00 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[frameworks]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[languages]]></category>
		<category><![CDATA[node]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1306</guid>
		<description><![CDATA[I got into a conversation at work today about whether or not Node.js might become as popular and as ubiquitous as Ruby on Rails has become, or if it's just a fad.

At first I was like "It's going to become the most used framework evar!" But then I thought about it a bit more and realized that this might not be the case.]]></description>
			<content:encoded><![CDATA[<p>I got into a conversation at work today about whether or not Node.js might become as popular and as ubiquitous as Ruby on Rails has become, or if it&#8217;s just a fad.</p>
<p>At first I was like &#8220;It&#8217;s going to become the most used framework evar!&#8221; But then I thought about it a bit more and realized that this might not be the case.</p>
<h3>How does a framework or a language become popular?</h3>
<p>One way to think about how a new programming language or a framework becomes popular is examine what needs to be in place.</p>
<ul>
<li>A vibrant active community.</li>
<li>Good libraries and/or a healthy amount of contributors of libraries</li>
<li>The use case for the language / framework must be clear</li>
<li>It must be easy to get into, to learn.</li>
<li>Easy to set up and get up and running</li>
</ul>
<p>To me Node.js checks all the boxes on those, and it seems to have a lot of tailwind blowing its way.</p>
<h3>The usability and barrier to entry</h3>
<p>Another way to think about languages and frameworks is what the user experience for a beginner to intermediate developer is when starting their first steps trying out the language. How hard is it to get up and running with something simple? How useful is the default stack? On how many platforms is the framework/language available on?</p>
<p>To me, getting up and running with Node was super super easy. There&#8217;s plenty of examples out there and there are interesting frameworks like Express that do all the heavy lifting for you.</p>
<p>There&#8217;s also a plethora of Javascript developers already out there who are already building stuff in Javascript (although sometimes they might be referred to as &#8220;jQuery developers&#8221;), so they already are familiar with the language and the evented paradigm.</p>
<h3>Will Node become ubiquitous?</h3>
<p>In my mind I think it will. I&#8217;m also a bit afraid that Node.js will become the next PHP. Is that bad? I don&#8217;t know. PHP gets a lot of crap usually, but when you think about it, it does one thing really well: It&#8217;s super easy to get up and running in PHP so the barrier to entry is low. It really is perfect for beginner developers.</p>
<p>Node.js doesn&#8217;t have the same ease of use, but imo it&#8217;s better than Ruby on Rails (although people are free to argue about that)</p>
<h3>Conclusion</h3>
<p>It&#8217;s code year. Get on the horse and start coding. I don&#8217;t care what language or what &#8220;stack&#8221; you choose and ultimately it doesn&#8217;t matter. But if you want to choose Javascript, I can&#8217;t blame you.</p>
<p>Node is the future.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2012%2F01%2F31%2Fis-node-js-the-next-ruby-on-rails%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2012%2F01%2F31%2Fis-node-js-the-next-ruby-on-rails%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/HIXHkIziEbs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2012/01/31/is-node-js-the-next-ruby-on-rails/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2012/01/31/is-node-js-the-next-ruby-on-rails/</feedburner:origLink></item>
		<item>
		<title>A bad habit: Getting all the domains!</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/lH0DWG2JGTM/</link>
		<comments>http://arnorhs.com/2011/12/31/a-bad-habit-getting-all-the-domains/#comments</comments>
		<pubDate>Sat, 31 Dec 2011 18:07:29 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[domains]]></category>
		<category><![CDATA[ideas]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1247</guid>
		<description><![CDATA[I have this horrible habit, where when I have an idea, I usually start by ordering a domain.

And when I'm brainstorming, I might come up with around 30 ideas for domain names of a particular idea, which I narrow down to about 3-5. But horribly, I can't decide which one is the best (some people tell me it's because I'm a "libra"), so I end up buying all of them.]]></description>
			<content:encoded><![CDATA[<p>I have this horrible habit, where when I have an idea, I usually start by ordering a domain.</p>
<p>And when I&#8217;m brainstorming, I might come up with around 30 ideas for domain names of a particular idea, which I narrow down to about 3-5. But horribly, I can&#8217;t decide which one is the best (some people tell me it&#8217;s because I&#8217;m a &#8220;libra&#8221;), so I end up buying all of them.</p>
<p><img class="alignnone" title="Get all the domains" src="http://memegenerator.net/cache/instances/400x/12/12438/12736814.jpg" alt="Get all the domains" width="400" height="300" /></p>
<p>And of course, I never end up executing on more than 10% of the ideas, and those that I execute, I usually don&#8217;t follow through with very well.</p>
<p>Which results in me sitting there with a pile of domains that I&#8217;ll never use, but will probably also not execute on. And as you could imagine, the names I end up getting are usually not the best ones.</p>
<h3>How many do I have?</h3>
<p>There are probably a lot of people out there that are much worse than me. But as the end of 2011 approaches, I decided to count them.</p>
<p><strong>I have 49 domains.</strong></p>
<p>Around 90% of them are .com domains. I have a few .co domains and some old .info domains, but mostly .com</p>
<p>If we say that it costs $10 a year on average to renew all these domains, it comes down to around $490 a year. That&#8217;s actually not too bad. Sure is a lot less than I&#8217;ve spent on car insurance, and so far I haven&#8217;t had an accident.</p>
<p>I have sold domains through the years, usually not that good ones and probably for way to little money to account for anything. But it happens.</p>
<h3>The urge to collect: Domainbuyinitis</h3>
<p>We humans collect stuff and I&#8217;m sure there are a lot of people out there who have a lot more. I wonder, to anybody who&#8217;s reading this, if there&#8217;s somebody who&#8217;s got a worse case of domainbuyinitis.</p>
<p>If you collect domains, please let me know in the comments.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F31%2Fa-bad-habit-getting-all-the-domains%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F31%2Fa-bad-habit-getting-all-the-domains%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/lH0DWG2JGTM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/31/a-bad-habit-getting-all-the-domains/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/31/a-bad-habit-getting-all-the-domains/</feedburner:origLink></item>
		<item>
		<title>Responsive Grid Framework written in Stylus for Node.js</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/_InOAm2RLjY/</link>
		<comments>http://arnorhs.com/2011/12/30/responsive-grid-framework-written-in-stylus-for-node-js/#comments</comments>
		<pubDate>Fri, 30 Dec 2011 08:55:48 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[grid]]></category>
		<category><![CDATA[node]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[responsive]]></category>
		<category><![CDATA[stylus]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1242</guid>
		<description><![CDATA[I've been hooked on Node.js for the last 2-3 months. I've been doing some small projects for fun in Express, and at first I used the SASS complier that ships with Express by default.

That framework is pretty limited and TJ Holowaychuk pointed me towards Stylus, a much better sass complier for Node.js.

I tweeted something about Stylus a couple of days ago which resulted in a fellow countryman, named Jokull Solberg (www.solberg.is), showing me a responsive grid framework he made in Stylus.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been hooked on Node.js for the last 2-3 months. I&#8217;ve been doing some small projects for fun in Express, and at first I used the SASS complier that ships with Express by default.</p>
<p>That framework is pretty limited and <a href="https://twitter.com/#!/tjholowaychuk">TJ Holowaychuk</a> pointed me towards <a href="http://learnboost.github.com/stylus/">Stylus</a>, a much better sass complier for Node.js.</p>
<p>I tweeted something about Stylus a couple of days ago which resulted in a fellow countryman, named <a href="https://twitter.com/#!/jokull">Jokull Solberg</a> (<a href="http://www.solberg.is/">www.solberg.is</a>), showing me a responsive grid framework he made in Stylus.</p>
<p>So far it&#8217;s only a gist on github, but feel free to check it out:</p>
<p><a href="https://gist.github.com/1501983">https://gist.github.com/1501983</a></p>
<p>So far it supports four screen sizes, but it&#8217;s easy to extend.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F30%2Fresponsive-grid-framework-written-in-stylus-for-node-js%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F30%2Fresponsive-grid-framework-written-in-stylus-for-node-js%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/_InOAm2RLjY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/30/responsive-grid-framework-written-in-stylus-for-node-js/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/30/responsive-grid-framework-written-in-stylus-for-node-js/</feedburner:origLink></item>
		<item>
		<title>Nobody Likes Annoying Interfaces</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/t_u_mJfWmyM/</link>
		<comments>http://arnorhs.com/2011/12/26/nobody-likes-annoying-interfaces/#comments</comments>
		<pubDate>Tue, 27 Dec 2011 04:43:48 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[buttons]]></category>
		<category><![CDATA[hover]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1235</guid>
		<description><![CDATA[I came upon this blog post by Seth Hoenig titled "Open letter to sites with annoying interfaces" yesterday. In the article he talkes about how some web sites and/or apps hide user interface actions until a later state. The post is a little bit funny and there might be a little bit of truth to it, but mostly it's inaccurate.

The examples he covers are gmail's edit-contact page and the button used to edit a project's description on github. I'd like to talk a little bit about those and then give another perspective on hiding UI elements.]]></description>
			<content:encoded><![CDATA[<p>I came upon <a href="http://bitonic.org/blog/?p=176">this blog post</a> by Seth Hoenig titled &#8220;Open letter to sites with annoying interfaces&#8221; yesterday. In the article he talkes about how some web sites and/or apps hide user interface actions until a later state. The post is a little bit funny and there might be a little bit of truth to it, but mostly it&#8217;s inaccurate.</p>
<p>The examples he covers are gmail&#8217;s edit-contact page and the button used to edit a project&#8217;s description on github. I&#8217;d like to talk a little bit about those and then give another perspective on hiding UI elements.</p>
<h3>The Gmail example</h3>
<p>Gmail&#8217;s contact editing is not stellar. But the fact that mr. Hoenig completely misunderstands how it works, really is an excellent indicator of how the whole contact editing page could be better.</p>
<p>Mr. Hoenig believes the delete contact button is only shown when you edit a contact&#8217;s name, but really the button he&#8217;s referring to is the &#8220;clear title&#8221; button. What&#8217;s wrong about that is a) it shows a trashcan icon b) the tooltip for the icon is &#8220;delete&#8221; which is really ambiguous c) there&#8217;s no other delete button visible.</p>
<p>In order to simplify it&#8217;s interface and reduce clutter, the gmail team chose to put the delete button in the &#8220;more&#8221; drop down menu:</p>
<p><img title="more drop down menu" src="http://f.cl.ly/items/1T1L1d2O0w162d280X3G/Screen%20shot%202011-12-26%20at%208.08.19%20PM.png" alt="more drop down menu" width="344" height="179" /></p>
<p>I&#8217;ll admit that it&#8217;s very low affordance for that button, but then again, how often do you actually delete contacts? The action is also available from the same drop down when you&#8217;re in the contacts list view, in which case you would have a pretty easy time finding the action behind the drop down. So personally, it&#8217;s not that big of a problem, in my opinion.</p>
<p>But the problem with the &#8220;clear contact name&#8221; button is still there, and personally I don&#8217;t understand why you would even need a button to clear the name, since it&#8217;s hard for me to think of a use case where you would want to clear somebody&#8217;s name, especially where it&#8217;s not enough to just manually select the text and delete it.</p>
<p>The tooltip is totally misleading as well and the icon doesn&#8217;t help. Gmail team: You really should just get rid of that button.</p>
<h3>The github example</h3>
<p>Now, in the case of the github example, it feels to me like editing a project&#8217;s description is an uncommon task. I remember having done that possibly once or twice, and yet don&#8217;t remember having any problem finding the button.</p>
<p>Of course you could make the argument that it might be better to show the edit button closer to the description when you hover, but then again, some descriptions might be a bit longer than others, and the position of the button would be different between projects. So this solution is probably fine for the task at hand, in my opinion.</p>
<h3>Hiding actions &#8212; good or bad?</h3>
<p>Hiding user interface elements / actions is a totally valid user interface pattern in my opinion. If you have a lot of actions and tasks you need a user to be able to do, you really have 3 options:</p>
<ol>
<li>Cluttering everything up with a lot of buttons</li>
<li>Putting the buttons on different pages/dialogs</li>
<li>Hiding them until they are in context</li>
</ol>
<p>If you clutter everything up with visible buttons everywhere, it becomes much harder to find the buttons you are looking for. It also makes the design more busy and confusing and hurts readability of the content you are viewing.</p>
<p>Having to search for the buttons in different dialogs and contexts is not great either, so personally I feel that 3) is a great solution that both highlights the content you are viewing, doesn&#8217;t clutter things up and makes the appropriate actions available when you are searching for them.</p>
<p>There are some other examples of how web sites and apps hide actions until in context, which I would love to talk about in more detail, but I&#8217;ll probably leave that for a separate post.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F26%2Fnobody-likes-annoying-interfaces%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F26%2Fnobody-likes-annoying-interfaces%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/t_u_mJfWmyM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/26/nobody-likes-annoying-interfaces/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/26/nobody-likes-annoying-interfaces/</feedburner:origLink></item>
		<item>
		<title>Open all files from a git diff or git show with this handy command utility</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/UcX3eHA9n9w/</link>
		<comments>http://arnorhs.com/2011/12/25/open-all-files-from-a-git-diff-or-git-show-with-this-handy-command-utility/#comments</comments>
		<pubDate>Sun, 25 Dec 2011 12:35:16 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[bash]]></category>
		<category><![CDATA[git]]></category>
		<category><![CDATA[shell]]></category>
		<category><![CDATA[textmate]]></category>
		<category><![CDATA[vim]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1203</guid>
		<description><![CDATA[We use git as our versioning tool at work and I've gradually been learning a few tricks on how to speed up my development time and time spent managing my repo.

When jumping between branches, continuing your work from where you stopped last time, etc., you very often open the same files as you were editing in a previous commit. This may not be a problem if you use something like Command-T for vim or rely on the file browsing in TextMate, but often it might just be quicker to open all the files from a particular ref in git or opening all files from your branch's diff from master/dev or something.]]></description>
			<content:encoded><![CDATA[<p>We use <em>git</em> as our versioning tool at work and I&#8217;ve gradually been learning a few tricks on how to speed up my development time and time spent managing my repo.</p>
<p>When jumping between branches, continuing your work from where you stopped last time, etc., you very often open the same files as you were editing in a previous commit. This may not be a problem if you use something like <a href="http://www.vim.org/scripts/script.php?script_id=3025">Command-T</a> for vim or rely on the file browsing in <em>TextMate</em>, but often it might just be quicker to open all the files from a particular ref in git or opening all files from your branch&#8217;s diff from master/dev or something.</p>
<p>I made this little snippet of a shell script that allows you to <a href="https://gist.github.com/1517095">open all files from a git diff or show</a> command in one fell swoop. Usage goes something like:</p>
<blockquote>
<pre>gitopen diff master</pre>
</blockquote>
<p>or</p>
<blockquote>
<pre>gitopen show 3663c033</pre>
</blockquote>
<p>or simply</p>
<blockquote>
<pre>gitopen</pre>
</blockquote>
<p>The command takes two arguments:</p>
<blockquote>
<pre>gitopen [diff &lt;ref&gt;] [show &lt;ref&gt;]</pre>
</blockquote>
<p>Where ref could be a hash or a branch name etc.</p>
<p>If you want to try it, you can download it here: <a href="https://gist.github.com/gists/1517095/download">https://gist.github.com/gists/1517095/download</a></p>
<p><a href="http://paul.rosania.org/">Paul Rosnia</a> also made a change which makes the script try to use the $EDITOR environment variable if it exists. You can override that if you like to use a different editor than is set by your environment.</p>
<p>If you find this utility useful, please let me know in the comments.</p>
<p><strong>Update: </strong><a href="http://jarinudom.com/">Jarin Udom</a> pointed out to me <a href="http://news.ycombinator.com/item?id=3394343">on Hacker News</a> the following:</p>
<p>If you add a git alias, like so:</p>
<blockquote>
<pre>git config --global alias.open '!sh ~/gitopen.sh'</pre>
</blockquote>
<p>It will allow you to use the command like other git commands:</p>
<blockquote>
<pre>git open diff master</pre>
</blockquote>
<p>Apparently you should also be able to name the file git-open somewhere in your path, and that should have the same effect. However, it did not work for me and I have no idea why, but the git global config variable worked great.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F25%2Fopen-all-files-from-a-git-diff-or-git-show-with-this-handy-command-utility%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F25%2Fopen-all-files-from-a-git-diff-or-git-show-with-this-handy-command-utility%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/UcX3eHA9n9w" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/25/open-all-files-from-a-git-diff-or-git-show-with-this-handy-command-utility/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/25/open-all-files-from-a-git-diff-or-git-show-with-this-handy-command-utility/</feedburner:origLink></item>
		<item>
		<title>Arnor’s Handy Bookmarklet for Measuring Page Scroll Performance</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/EmuJEQ7iEbI/</link>
		<comments>http://arnorhs.com/2011/12/11/handy-bookmarklet-for-measuring-page-scroll-performance/#comments</comments>
		<pubDate>Sun, 11 Dec 2011 09:15:09 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[speed]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1169</guid>
		<description><![CDATA[I've been dealing with some unfortunate scroll performance issues at work lately, and to aid me in that task I've been using a handy CSS stress test bookmarklet made by Andy Edinborough. It works by iterating through all your classes and measuring the performance improvement you get from dropping them - thus helping you find out which classes are making your page scroll speed slow. It's handy but the use case too constrained for my needs.

I wanted to be able to simply run a test anywhere on the page just for a single run, and I didn't really care about the classes, since I was manually disabling styles and moving things around, unbinding event etc to find out where the biggest performance improvements could be had.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been dealing with some unfortunate scroll performance issues at work lately, and to aid me in that task I started using a handy <a href="http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling">CSS stress test bookmarklet</a> made by <a href="https://twitter.com/#!/andyedinborough/">Andy Edinborough</a>. It works by iterating through all your classes and measuring the performance improvement you get from dropping them &#8211; thus helping you find out which classes are making your page scroll speed slow. It&#8217;s handy but the use case too constrained for my needs.</p>
<h3>Another approach for measuring page scroll performance</h3>
<p>I wanted to be able to simply run a test anywhere on the page just for a single run, and I didn&#8217;t really care about the classes, since I was manually disabling styles and moving things around, unbinding event etc to find out where the biggest performance improvements could be had.</p>
<p>So I ended up writing this snippet of Javascript to aid me in my work. Drag this link to your bookmark bar / toolbar to try it out:</p>
<p><a href="javascript:(function (window,$,runs) { var t = new Date(), i = 1, timetaken,offset = $(window).scrollTop(); $(window).bind('scroll.scrolltest',function () { if (i &gt;= runs) { timetaken = (new Date) - t; console.log('Time taken for '+runs+' scrolls: ',timetaken,' - time per scroll: ', timetaken/runs); $(window).unbind('scroll.scrolltest'); return; } i++; doScroll(); }); function mod (x,y) { return Math.round((x/y - Math.floor(x/y)) *2); } function doScroll () { setTimeout(function(){ $(window).scrollTop(offset + mod(i,2)*100); },0); } doScroll(); })(window,jQuery,500); ">Arnor&#8217;s scroll performance test</a></p>
<p>You can find the bookmarklet-ready gist here: <a href="https://gist.github.com/1459352">https://gist.github.com/1459352</a></p>
<h3>Requirements</h3>
<ul>
<li>The jQuery object ($) must be present on the page (I could make it non-jquery dependent, if anybody is interested enough)</li>
<li>A browser that has a javascript console</li>
</ul>
<h3>How to use it</h3>
<p>Visit any webpage that has the jquery object available and click your new bookmarklet. When it finishes running, it will display the stats in the javascript console of your browser, in ms. You can modify the code and add more runs if you want more consistent results.</p>
<h3>The hacked up code</h3>
<p>This is what the code looks like, if you&#8217;re interested:</p>
<script type="text/javascript" src="http://gist.github.com/1459352.js?file=scrolltest.js"></script>
<h3>How does it work</h3>
<p>It basically scrolls a few hundred down and up 100 pixels, measuring the total time it takes to do that.</p>
<p>I had to make a hack to get the thing to get triggered more often &#8211; I believe that it&#8217;s because the browser is optimizing scroll events somehow &#8211; making sure the scroll event isn&#8217;t triggered way too often. So I wrapped the thing that triggers the page to scroll in a timeout thing. It&#8217;s probably not super super reliable, but at least I had pretty much consistent results.</p>
<h3>Finally</h3>
<p>If you have any questions, suggestions, bug reports or whatever, feel free to let me know by commenting or pinging me on Twitter.</p>
<p>I don&#8217;t expect to be maintaining this much or putting any more effort in it, unless there&#8217;s somebody else out there that will find this useful.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F11%2Fhandy-bookmarklet-for-measuring-page-scroll-performance%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F11%2Fhandy-bookmarklet-for-measuring-page-scroll-performance%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/EmuJEQ7iEbI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/11/handy-bookmarklet-for-measuring-page-scroll-performance/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/11/handy-bookmarklet-for-measuring-page-scroll-performance/</feedburner:origLink></item>
		<item>
		<title>Possibly the nicest Node.js beginner’s guide (and style guide)</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/2LJ74CxTImQ/</link>
		<comments>http://arnorhs.com/2011/12/10/possibly-the-nicest-node-js-beginners-guide-and-style-guide/#comments</comments>
		<pubDate>Sat, 10 Dec 2011 10:18:23 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[node]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[programming]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=771</guid>
		<description><![CDATA[Felix Geisendörfer, one of the node.js contributers has released what can only be dubbed as the ultimate guide to writing node.js applications. He's launched a site called nodeguide.com which has a beginner's guide, a guide for how to convince your boss you should be using node (kind of funny, but sadly there are people who need this) and a style guide for standardization of indentation, naming, etc which should be taken with a grain of salt.]]></description>
			<content:encoded><![CDATA[<p>Felix Geisendörfer, one of the node.js contributers released a clean cut, simple guide a while ago to writing node.js applications. He launched a site called <a href="http://nodeguide.com/">nodeguide.com</a> which mostly has a beginner&#8217;s guide, a guide for how to convince your boss you should be using node (kind of funny) and a style guide for standardization of indentation, naming, etc.</p>
<p>The guides are not very comprehensive at the moment, but they are written very clearly using a simple language. If you have some experience with Javascript, the guides should be perfect for you.</p>
<p>He also has a few other guides in the works and people are encouraged to contribute. So if you&#8217;re starting out doing server side javascript using node, this is probably the very best place to start.</p>
<h3>A short summary of the guides</h3>
<p><strong>The beginners guide</strong> is pretty short. It teaches you how to install node, run your first hello world, a little about the packaging system and recommends a few web frameworks.</p>
<p><strong>The style guide</strong> should be taken with a grain of salt. It&#8217;s good to have some standard but style guides have historically never been popular because most people like writing code however they see fit.</p>
<p><strong>The convincing the boss guide</strong> is probably the most impressive, in my opinion. It&#8217;s very pragmatic and doesn&#8217;t try to sell you Node.js as the ultimate solution to every existing problem out there. He quite honestly points out that if you&#8217;re just trying to put together a simple web application there really isn&#8217;t much that Node can do that other languages/frameworks can&#8217;t do just as well. I think he even sells it a bit short, since in my opinion the upsides are more than he mentions.</p>
<p>That&#8217;s it.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F10%2Fpossibly-the-nicest-node-js-beginners-guide-and-style-guide%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F10%2Fpossibly-the-nicest-node-js-beginners-guide-and-style-guide%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/2LJ74CxTImQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/10/possibly-the-nicest-node-js-beginners-guide-and-style-guide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/10/possibly-the-nicest-node-js-beginners-guide-and-style-guide/</feedburner:origLink></item>
		<item>
		<title>Diving into Facebook’s Timeline UI</title>
		<link>http://feedproxy.google.com/~r/arnorhs/~3/wiCjQlcumrM/</link>
		<comments>http://arnorhs.com/2011/12/03/diving-into-facebooks-timeline-ui/#comments</comments>
		<pubDate>Sat, 03 Dec 2011 09:38:49 +0000</pubDate>
		<dc:creator>arnorhs</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[consistency]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[timeline]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[user interfaces]]></category>

		<guid isPermaLink="false">http://arnorhs.com/?p=1142</guid>
		<description><![CDATA[A couple of months ago, Facebook started rolling out it's Timeline feature. For those who don't know, it's a new form of a Facebook profile, which displays a user's profile in a very different way, based on their entire life's history. It's a very dramatic thing and is a very impressive endeavor.

I signed up the very minute it was announced and have had it as my default profile, though it hasn't been viewable by anybody but me for some time, it's dust has now settled a bit and I've been trying to digest it and form an opinion.

The Timeline is so interesting in so many ways. In one regard it's got a very inconsistent UI compared to the rest of Facebook and it introduces a lot of UI concepts and ideas that have not been known to websites in general before but on the other hand it's also a very pretty beast.

Read on if you're interested in diving (probably way too) deep into the Timeline]]></description>
			<content:encoded><![CDATA[<p>A couple of months ago, Facebook started rolling out its <a href="https://www.facebook.com/about/timeline">Timeline</a> feature. For those who don&#8217;t know, it&#8217;s a new form of a Facebook profile, which displays a user&#8217;s profile in a very different way, based on their <em>entire life&#8217;s history</em>. It&#8217;s a very dramatic thing and is a very impressive endeavor.</p>
<p>I signed up the very minute it was announced and have had it as my default profile, though it hasn&#8217;t been viewable by anybody but me for some time, it&#8217;s dust has now settled a bit and I&#8217;ve been trying to digest it and form an opinion.</p>
<p><img class="alignnone" title="timeline headline" src="http://f.cl.ly/items/1i0Z2T1I162r2L2m2N1j/Screen%20shot%202011-12-03%20at%2012.53.11%20AM.png" alt="" width="633" height="120" /></p>
<p>The Timeline is so interesting in so many ways. In one regard it&#8217;s got a very inconsistent UI compared to the rest of Facebook and it introduces a lot of UI concepts and ideas that have not been known to websites in general before but on the other hand it&#8217;s also a very pretty beast.</p>
<p>So I find it very interesting to think about and digest and both imagine what the developers were thinking and also think about if this is something that will be important in the future.</p>
<h3>Evaluating the Facbeook Timeline UI</h3>
<p>I just read <a href="http://baymard.com/blog/facebook-timeline-design">this review / fan post</a> about Facebook&#8217;s timeline. I usually like the author&#8217;s blog, but the article provides a pretty shallow view point on what the nice things are about the UI but doesn&#8217;t dive very deep into it or ask some important questions.</p>
<p>First off, I agree that the UI looks nice, and it&#8217;s definitely one of the more pretty parts of Facebook. It&#8217;s also very &#8220;Ballsy&#8221;. It&#8217;s a great example of the big risks Facebook is willing to take with its UI and compared to many other products out there, they&#8217;ve been very willing to do big changes, despite a large user base.</p>
<p>However, in my opinion, the UI also has its shortcomings. (Which I might very well be wrong about)</p>
<p>When you want to break something like the Timeline down and try to assess whether its good or bad, you have to first ask yourself the fundamental question: what makes this UI good or bad? And to find that out, you first have to ask yourself: what is the purpose of the Timeline? And what the user&#8217;s intent is when visiting somebody&#8217;s Timeline.</p>
<h3>The <em>intent</em> of the user</h3>
<p>The intents / incentives I can think of a user has when he visits someone&#8217;s Timeline (in no particular order), could be something like:</p>
<p><strong>The user wants to&#8230;</strong></p>
<ul>
<li>See what their friend has been up to  lately.</li>
<li>Find a post again that they recently posted, but the user doesn&#8217;t have in their feed anymore.</li>
<li>Interact with the user &#8211; either send them a message or write on their wall.</li>
<li>View their photos. Either see photos of them or recent photos to see what they&#8217;ve been up to (or more likely: find a picture of yourself that they posted)</li>
<li>Find a friend that they&#8217;ve added that you also want to add.</li>
<li>A user visits his own timeline to find something that they posted, either to delete it, view comments (if out of notifications etc).</li>
<li>The user doesn&#8217;t know the person, but wants to view their profile and maybe see what they&#8217;re like, what they&#8217;ve been up to, even though he doesn&#8217;t want to become friends with him/her.</li>
<li>Find their phone number / email etc.</li>
</ul>
<p>There are probably more intents that I haven&#8217;t listed or couldn&#8217;t remember, but those might cover 90% of the use cases.</p>
<h3>Does the timeline solve those scenarios?</h3>
<p>I think for the most part it does. It&#8217;s very easy to see what the user has been doing and posting lately. It&#8217;s easy to write on their wall, there&#8217;s a familiar textarea at the top-left of the timeline. Also, finding their friends is pretty easy: There&#8217;s a large box for that on the right side, and another similar photo-button on the timeline header.</p>
<p>The timeline uses these photo-style buttons to navigate to friends, photos, likes etc. (its probably a bit different depending on the user) &#8211; however I&#8217;m not so sure that they solve the navigation so easily.</p>
<h3>Photo based navigation elements in the header</h3>
<p>Finding a user&#8217;s photos is not as simple as you might think. Take my timeline header-buttons as an example:</p>
<p><img class="alignnone" title="screenshot of my timeline header navigation elements" src="http://f.cl.ly/items/3b261o2G0B092b0s1k3v/Screen%20shot%202011-12-03%20at%2012.06.00%20AM.png" alt="" width="590" height="282" /></p>
<p>The photos are much larger than the captions and when you skim over, they don&#8217;t exactly represent what you might be looking for. I think the main problem lies in the inconsistency in navigation from regular Facebook profiles, where photos, friends etc are usually placed as text links on the left side of the page:</p>
<p><img class="alignnone" title="normal facebook profile navigation elements" src="http://f.cl.ly/items/3n0C010W0z0i320Z2a0r/Screen%20shot%202011-12-03%20at%2012.07.38%20AM.png" alt="" width="243" height="201" /></p>
<p>Those links also have icons that we&#8217;ve come to get used to and associate with the given task. But in the timeline, those icons are not there.</p>
<p>There is no visual difference between photo, friends etc. So you actually have to read the labels. Especially since the thumbnail that&#8217;s shown is always different depending on what you last did etc. So the mental model breaks down a bit for plain navigation.</p>
<p>That&#8217;s not to say that a user gets completely lost, it&#8217;s just that it&#8217;s a bit less intuitive than you might imagine. It makes Facebook&#8217;s user interface a bit inconsistent and requires the user to learn two different methods of accessing the same information.</p>
<h3>Finding a user&#8217;s phone number, email, etc.</h3>
<p>We have a similar problem for finding user information, such as email or a mobile phone (if somebody lists those)</p>
<p>We are used to seeing the &#8220;info&#8221; link on the left side navigation on people&#8217;s profiles. But on the timeline, it shows up on the bottom left of the header, and it has also been renamed into &#8220;about&#8221; and when clicked, it now displays an alternative view of the about page you&#8217;ll usually see on Facebook.</p>
<p><img class="alignnone" title="facebook timeline about button" src="http://f.cl.ly/items/3M3F0E2H2Q0N422f2V2X/Screen%20shot%202011-12-03%20at%2012.13.37%20AM.png" alt="" width="354" height="190" /></p>
<p>That&#8217;s another example of an inconsistant UI where the user actually has to learn two methods of finding the same information.</p>
<h3>Friends</h3>
<p>Almost every single thing on the Timeline works and looks differently than it does normally on Facebook.</p>
<p>If you view somebody&#8217;s friends list, you don&#8217;t get the usual plain list, but you get a multi-columned view of them. It sure looks nice and you see large photos of them and visually it is more fun to browse. However, I&#8217;m not so sure a multi-column layout is good when viewing somebody&#8217;s friends, because when you&#8217;re skimming through them (they are in alphabetical order) and you want to find  a specific one, you need to move your eyes constantly in a z pattern to go through them.</p>
<p>It&#8217;s not immensely hard, especially since you have the search box, but for an ordered list like that, it makes less sense than a flat list.</p>
<h3>Why the inconsistent UI?</h3>
<p>I&#8217;m beginning to have the hunch that Facebook is changing its entire UI to something more akin to the Timeline UI elements.</p>
<p>The news feed itself probably won&#8217;t have a timeline view, but the way you browse friends, view a user&#8217;s photos etc. is probably all going to change soon.</p>
<p>I doubt that all the brilliant people working at Facebook aren&#8217;t aware of the inconsistent UI problems, so It&#8217;s probably a part of a unified move to a larger nicer UI.</p>
<h3>Photos in the Timeline</h3>
<p>The photos get arranged in the Timeline in a very visual and interesting way. Here&#8217;s a summary of an album I recently updated, as an example:</p>
<p><img class="alignnone" title="some photos i uploaded displayed on the timeline" src="http://f.cl.ly/items/1W1v202j3Y1O0k3Q3U2m/Screen%20shot%202011-12-03%20at%2012.50.40%20AM.png" alt="" width="425" height="569" /></p>
<h3>The really puzzling bit</h3>
<p>Now what I find the most puzzling about the UI (and I might very well be the only one) is that the use case that the Timeline is mostly optimized for, is seeing somebody&#8217;s life summarized on a single page.</p>
<p>I think from an artistic, philosophical perspective it&#8217;s very interesting. It&#8217;s also enjoyable to scroll through people&#8217;s Timelines, and I&#8217;m sure if we had 20 year old profiles, it would be even more fun.</p>
<p>But its strange to optimize the most important representation of a person on Facebook for that use case. But that also means you are creating that use case. With that I mean, it is something people didn&#8217;t use Facebook for before, but could now be something you might actually go and seek out.</p>
<p>Personally I think the Timeline would serve its purpose much better as not a user&#8217;s main profile, but a user&#8217;s &#8220;life&#8221;. It&#8217;s something you don&#8217;t go and do very often so I feel that it&#8217;s strange to just push the user into that scenario.</p>
<p>I&#8217;ve rarely found myself scrolling very far down.</p>
<h3>The societal hurdle of scrolling down in somebody&#8217;s Timeline.</h3>
<p>There&#8217;s another thing that keeps me thinking.</p>
<p>When I make friends on Facebook with users that have the Timeline enabled, the first thing I find myself doing is scrolling a bit down and checking their Timeline out.</p>
<p>But it also awakes a strange feeling within me, which is that I almost feel like I&#8217;m nosing in people&#8217;s personal stuff. Almost like looking in somebody&#8217;s bag or looking through their personal photo album without consent.</p>
<p>When it&#8217;s somebody I know very well, I don&#8217;t mind at all. And personally I don&#8217;t mind the thought that my friends might be scrolling through my Timeline a few years back.</p>
<p>But I feel guilty about doing that in Timelines of people that I don&#8217;t know. That is a really surprising facade of a website which I&#8217;m not very used to.</p>
<h3>Conclusion (if there is one)</h3>
<p>Like I mentioned before, I am very impressed with the Timeline. It does a lot of interesting things and it will be interesting to watch what Facebook does with it in the coming months / years.</p>
<p>There are some UI issues in terms of consistency which I suspect they&#8217;ll address as well very soon and there are some puzzling things, especially the fact that they&#8217;ve optimized the Timeline for a totally different use case than the one that you might expect a new profile to be optimized for.</p>
<p>This has been a bit of a long post, and I&#8217;m probably diving way too deep into this, but I hope it has been somewhat interesting.
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F03%2Fdiving-into-facebooks-timeline-ui%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Farnorhs.com%2F2011%2F12%2F03%2Fdiving-into-facebooks-timeline-ui%2F&amp;source=arnorhs&amp;style=normal&amp;service=bit.ly&amp;service_api=R_ebacc772d5e3c0910d27e631f5e64487&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/arnorhs/~4/wiCjQlcumrM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://arnorhs.com/2011/12/03/diving-into-facebooks-timeline-ui/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<feedburner:origLink>http://arnorhs.com/2011/12/03/diving-into-facebooks-timeline-ui/</feedburner:origLink></item>
	</channel>
</rss><!-- Served from: arnorhs.com @ 2012-05-18 16:08:49 by W3 Total Cache -->

