{"id":1170,"date":"2011-03-06T23:50:44","date_gmt":"2011-03-07T04:50:44","guid":{"rendered":"http:\/\/www.bohyunkim.net\/blog\/?p=1170"},"modified":"2011-03-07T09:08:26","modified_gmt":"2011-03-07T14:08:26","slug":"no-brainer-usability-the-new-twitter-iphone-app","status":"publish","type":"post","link":"https:\/\/www.bohyunkim.net\/blog\/archives\/1170","title":{"rendered":"No-brainer Usability: the new Twitter iPhone app"},"content":{"rendered":"

I am presenting about usability issues in library websites in Computers in Librareis 2011<\/a> in a few weeks. So needless to say, I have been thinking a lot recently about usability. Today, having updated all apps on my iPhone, I noticed that the Twitter iPhone app finally made some changes in its new message user interface (UI) which makes it more usable.<\/p>\n

However, the new UI fails in some respects, and the new app introduces a different usability problem, which is often the case with website redesign. <\/span>So let’s pretend the new Twitter app is a re-designed library website and see what its pluses and minuses are in terms of usability.<\/p>\n

\"\"<\/a>

Old Twitter App<\/p><\/div>\n

\"\"<\/a>

When the arrow is pressed down<\/p><\/div>\n

This is how the old Twitter iPhone app’s new message screen looked like. (Screenshots thanks to @bmljenny<\/a>.)\u00c2\u00a0 It is very basic until you press the “140 \u00e2\u2013\u00bc” button on the top right corner over the keyboard.<\/p>\n

Once you press that button, however, the whole new world of functionalities unfolds. Taking a photo, inserting an already-taken photo, geo-tagging, adding Twitter user by his\/her Twitter username, adding a hashtag, and shrinking a URL is all just one touch away.<\/p>\n

Unfortunately, not many people noticed this button; many users weren’t able to take advantage of these useful functionalities.<\/p>\n

I must say, the design of hiding these functionalities behind the “140 \u00e2\u2013\u00bc” button is both clever and stupid. Clever in the sense that it made the new message UI clean and simple. <\/span>But quite stupid in the sense that the button that holds these functionalities don’t stand out at all that it resulted in those functionalites being often completely unknown and undiscovered to users.<\/span><\/p>\n

One of the great usability principle is, in my opinion, is this :
\nStop being clever and make things super-obvious.<\/strong><\/p>\n

\"\"<\/a>

New Tweet screen in the Twitter iPhone app<\/p><\/div>\n

<\/a>The new Twitter iPhone app followed this principle and corrected the issue by removing the “140 \u00e2\u2013\u00bc” button. Instead it added a gray bar with four icons that stand for usernames, hashtags, camera, and geotag. I would say this is an improvement since users can now clearly see the icons when they are in the new tweet screen.<\/span><\/p>\n

However, these icons are not the same as the previous icons used in the old Twitter app. Geotag icon has changed the appearance and the camera icon now functions for two previous features of taking a photo and adding a photo from the photo library.<\/span><\/p>\n

One of the pitfalls of re-design is that even when improvements are made, often the web team (designers in particular) are not satisfied with just fixing the existing issue. They are tempted to make changes ‘for uniqueness’, which tends to raise rather than solves a usability problem.<\/strong> <\/span><\/p>\n

So now Twitter seems to have gotten rid of perfectly useful two icons — photo library and shrink URLs.<\/span><\/p>\n

If I were to redo the screen, I would keep the same icons in the previous app.\u00c2\u00a0 After all, some users have discovered and used these hidden functionalities. Why now force them to change their pattern of use?<\/span><\/p>\n

\"\"<\/a>

My version of New Twitter screen<\/p><\/div>\n

While I was evaluating the new Tweet screen, I realized that the new Twitter app has also introduced a new usability issue to it. The new trending hashtag notification. It appears on top of the tweet timeline.<\/p>\n

As quite likely to be intended, since it appears on top and written on a black bar, it stands out.\u00c2\u00a0 The problem is that it actually stands out more than what users need. It is downright annoying.<\/span><\/p>\n

This can be easily corrected if the bar appears at the bottom rather than the top.<\/span> It would be still noticeable enough for those who take interests in the trending hashtag but would not annoy the majority of users who want to quickly scan the timeline from the top to the bottom.<\/span><\/p>\n

 <\/p>\n

\"\"<\/a>

New Twitter Timeline<\/p><\/div>\n

\"\"<\/a>

My version of Timeline<\/p><\/div>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Because of this this new and\u00c2\u00a0 un-user-friendly trending notification, the overall reaction to the new Twitter app would be more negative than positive.<\/p>\n

Furthermore, what was really interesting to me is that even after the re-design, the new Tweet screen of the new Twitter app does still slightly fall short of the new Tweet screen of the Tweetdeck app. Compare my revised version of the new Twitter app above with the following Tweetdeck’s new tweet screen below. Pretty much what I have done ended up making the Twitter app look almost the same as the Tweetdeck’s existing new tweet screen.<\/p>\n

Sometimes, a good design comes from benchmarking a competitor’s product and from following conventions that users are already familiar with. <\/span><\/strong><\/p>\n

Can you think of an example of a library website that failed to be user-friendly while trying to be clever and\/or from poorly benchmarking another library website?\u00c2\u00a0 If you work with a library website, this is a good thing to think about.<\/p>\n

\"\"<\/a>

Tweetdeck<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

I am presenting about usability issues in library websites in Computers in Librareis 2011 in a few weeks. So needless to say, I have been thinking a lot recently about usability. Today, having updated all apps on my iPhone, I … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[8,10,130,7],"tags":[135,134,133,42,131,132],"class_list":["post-1170","post","type-post","status-publish","format-standard","hentry","category-social-media","category-technology","category-usability","category-web","tag-app","tag-iphone","tag-no-brainer-usability","tag-twitter","tag-usability-2","tag-ux"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2AlrP-iS","_links":{"self":[{"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/posts\/1170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/comments?post=1170"}],"version-history":[{"count":89,"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/posts\/1170\/revisions"}],"predecessor-version":[{"id":1257,"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/posts\/1170\/revisions\/1257"}],"wp:attachment":[{"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/media?parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/categories?post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bohyunkim.net\/blog\/wp-json\/wp\/v2\/tags?post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}