For starters, here is a quick summary of the simplified HIP model used in this showdown:

• Touch interactions are assigned a value based on the precision and time required to execute them. Single taps take in average 165 milliseconds, while double taps and swipes take 350ms and 400ms respectively. The single tap is given a nominal value of 1 and will serve as the base unit of other interactions. For instance, assigning the value of 2 to a swipe means that it’s twice harder to execute than a single tap.
• A task is a chain of user interactions with an end goal. The effort required to achieve a certain task equals the sum of the individual values of each interaction involved. The lower the sum, the more efficient the interface.
• Typing time is zeroed out.
• Only the shortest routes were used (lowest scores).

For long-time readers, here is what new:

• User flow is taken into account this time by adding the interactions required to take the user back to the main timeline in each task.
• The interaction scores have been revised since. Swipes and double taps call for twice the effort required by single taps. Triple taps are the most taxing in terms of precision, long presses in term of execution time.
• The tasks have been divided into two main groups: basic and advanced.

The new scores used in the test are as follows:

• Tap: 1
• Double tap: 2
• Swipe: 2
• Triple tap: 3
• Long press: 2.5
• Multi-option prompt: 0.5

Jump to the final results if you are short on time, or grab the PDF if you want to sweat the details.

Basic tasks

Tweetbot has clearly the upper-hand even though little has changed since 1.0 as far as these basic tasks go; the redesigned interface of Twitter 4 forces the user to navigate constantly back and forth between the main timeline and individual tweets, resulting in a clunkier experience. For instance, opening a link in the official client and coming back to the timeline takes twice as many taps as the other third part clients. Twitterrific lands very close to Tweetbot but does a better job in terms of consistency and ease of use: all primary tasks can be carried out using only single taps.

Advanced tasks

Tweetbot comes out again a winner, only slightly ahead of Twitterrific. Tapbots’ popover implementation of account switching contrasts heavily with the 2 layer deep navigation required to do the same task in the official client. Twitterrific does direct messages best, despite the 2 penalty points tied to the impossibility of sending a new DM without resorting to the obscure trick of adding a lowercase ‘d’ to the beginning of the tweet.

Verdict

Tweetbot wins. Twitterrific closes in second and Twitter 4 lands third with a significant margin. For comparison purposes, I recalculated the score using the same uncalibrated values of the previous showdown (including Twitterrific this time). Of the three, only the official client regressed. A better user experience for first-time users you say?

Following a series of leaks, Microsoft finally unveiled the new hybrid UI of Windows 8, pitching it as a “no compromise” design approach that would bring the best of their desktop and mobile offerings into one unified touch-enabled OS. The typography-centric design language that they perfected in recent years, Metro, will in all likelihood become their bread and butter in the consumer market and will remain a hot topic for years to come.

Meanwhile, Apple was busy shipping Lion, a milestone update that brought multi-touch gestures, native fullscreen support and other iOS-inspired UI elements to the desktop OS. They also made sure to upset legions of users by changing the scroll paradigm to match their mobile implementation and the rest is history. Mac third-party apps are coming in all sorts of flavors, and the somewhat unified look and feel of yore gave place to a hodgepodge of visual styles and design patterns: popovers, pull-to-refresh, icon-based tab navigation, monochrome icons, you name it.

Social Innovation

After several attempts to make a dent in the social space, Google finally decided to get its act together and design a social product that mere mortals can figure out how to use. Led by Andy Hertzfeld, a prominent member of the original Macintosh team, Google+ has indisputably packed a punch in social design, introducing some clever UI novelties such as Circles and a refreshed visual style that soon made it to other flagship Google products.

Facebook retaliated by introducing one of the most radical UI changes in its recent history, the profile timeline. On the mobile front, they managed to ship the eagerly awaited iPad app as a universal package that uses and abuses vertical tab navigation. Overall, the mobile apps look significantly better thanks to the recent design talent acquisitions; whether they work and feel as good is a whole other story.

Twitter overhauled their interface by changing the information architecture and rebranding some core elements of their service in an attempt to make it less intimidating to new users and more accommodating to advertisers. They also ended up ditching swipe gestures from their iPhone app as the last UI vestiges of the original Tweetie app acquired a year earlier.

Speaking of mobile apps, Path has managed to steal the spotlight from major social players by releasing a completely revamped interface that showcases some playful interactions and experimental design patterns.

Honorable Mentions

• Web, Native… or Hybrid?

  The bi-polar tone of this pointless debate has given place to another discussion about the UX implications of webviews, a new hybrid technique that involves displaying web pages within native containers. Even though this approach garnered widespread adoption by large companies such as Google, Facebook and even Apple, it has yet to prove itself by curbing the user experience inconsistencies it entails.

• Gestures vs. Buttons

  As touch screens are in the process of becoming the de facto standard, the transition to gestural interfaces is dividing the design community. As users, our interaction mental model is currently in a limbo state; we can hardly keep up with the overwhelming number of new interactions that we have to deal with on a daily basis. As designers, striking the balance between ease of use, memorability and discoverability is becoming increasingly hard in the lack of industry-wide standards.

• Skype Mac Redesign

  A textbook case of how to screw an app UI and trick the design community into fixing it for free.

• Linen

  Now available in red.

Wrapping up

The question is no longer whether a radical shift in our field is underway, but rather where it will be taking us in the years to come.

Goodbye 2011, welcome 2012.

On the other hand, iOS’s UI scaling gets a perfect score, because Apple only ever use 100% and 200% scaling. Apple’s tight control over the hardware and software for their mobile devices gives a distinct advantage for UI design accuracy at their chosen screen pixel densities.

Hopefully this will hold true with the iPad 3.

Removing dark patterns from any site involves a leap of faith. A company has to shift from a short-term quantitative measurement mindset to one that values relatively slow, steady growth of “warm fuzzy” qualitative things like brand image, credibility, and trust. This kind of cultural shift is hard to do, which partially explains the reason why dark patterns tend to stick around once deployed.

Businesses that are relying on deceptive interfaces to achieve higher short-term conversion rates have their days numbered; good design serves users first and foremost, conversion rates take care of themselves.

Notwithstanding, the iOS client of Google+ is blatantly falling short of the standards set by the web interface. Given the fact that Facebook have just rolled out a decent update to their iOS app, Google is clearly losing the edge on the mobile front. They may have the best talent in the industry, but for some reason they don’t seem to be giving the iPhone app the attention it deserves. It’s a mishmash of web views, experimental touch interactions and unpolished graphics, resulting in a subpar user experience and jeopardizing the Google+ brand image along the way.

Signing In

As of this writing, users have to go through two completely useless screens (2 taps) to get to the sign in form. In order to create an account, you have to hunt down a blue underlined link in the second screen, hello 1990. Worse still, the form is an ugly web view that screams laziness and utter disregard to interface design principles.

The obvious solution would be greeting users with the actual sign-in form as shown in the interface mockup below.

I attempted to stay as close as possible to the colorful visual style that Google has been pushing as of late, which is if you ask me, a step in the right direction.

The Stream

I always thought that dashboard navigation on mobile apps is as hacky a design pattern as it can get. If you have more than five main sections in your app, you are doing it wrong. If you have five or less but you insist on using a dashboard, you are doing it twice as wrong.

It would safe to assume that users will be spending most of their time on the stream, so why not make it the default tab as in the web interface? Ironically, designers (or someone else at Google) decided to keep the Homeish icon even though it was no longer the default view in the iOS app. Attention to details anyone?

The mockup below shows how a native tab navigation could save users a few taps and leverage their previous experience with the platform.

Notifications would appear next to the logo in the top navigation bar, making them hard to miss throughout the different sections of the app. Content should be given more prominence by using the full-width of the screen. Ideally, raw URLs should be hidden as long as the actual content of the link is displayed inline.

Touch Interactions

I know, buttons are a hack yada yada, but I’d argue that users won’t be switching streams often enough to warrant a full-fledged gesture navigation system. Touch gestures should be primarily used to perform frequent single-post actions, something along the lines of swipe to +1 as shown in the concept (left) below. A popover would come to the rescue as a perfectly scalable design pattern to handle context switching (see mockup below). Other single post actions such as commenting and sharing would be revealed with a single tap in order to reduce visual clutter (a pattern used brilliantly by Tweetbot).

While these experimental concepts are in no way a panacea for the current interface shortcomings, they could be a very good start if Google decides to get more serious about its fledgling social network.

Amidst all the excitement around Siri, I came across an interesting article ^[1] from the 90s, where Mark Weiser, ex-principal scientist at Xerox PARC, voices his skepticism about voice input and intelligent agents. The central premise of his argument is that interfaces are first and foremost tools, and as such, should be invisible.

Eyeglasses are a good tool — you look at the world, not the eyeglasses. […] Unfortunately, our common metaphors for computer interactions lead us away from the invisible tool, and towards making the tool the center of attention.

He goes on to explain that voice-based digital assistants, as portrayed in science fiction back then, are prominent and attention-grabbing, which makes them inherently bad tools:

A computer that I must talk to, give commands to, or have a relationship with, is a computer that is too much the center of attention.

To an extent, he makes a valid point; good interfaces should not vie for user attention. But then, the computer he imagined talking to is certainly not one you can fit in your pocket. In that sense, we are by all means moving one step closer towards invisibility.

1. The article appeared in the first issue of Interactions Magazine (January 1994)]]> http://kaishinlab.com/2011/10/invisible-interfaces/feed/ 0 http://kaishinlab.com/2011/10/invisible-interfaces/?utm_source=rss&utm_medium=rss&utm_campaign=invisible-interfaces http://feedproxy.google.com/~r/kaishinlab/~3/otpTtRvsy7Y/ http://kaishinlab.com/2011/10/youll-be-missed/#comments Thu, 06 Oct 2011 04:36:56 +0000 Kaishin http://kaishinlab.com/?p=1861 ]]> http://kaishinlab.com/2011/10/youll-be-missed/feed/ 0 http://kaishinlab.com/2011/10/youll-be-missed/?utm_source=rss&utm_medium=rss&utm_campaign=youll-be-missed http://feedproxy.google.com/~r/kaishinlab/~3/rLPBvilAk3I/ http://kaishinlab.com/2011/09/text-editors-a-rant/#comments Thu, 29 Sep 2011 19:55:40 +0000 Kaishin http://kaishinlab.com/?p=1860 Back in the early 2000’s, I designed crappy websites using clunky tools from Macromedia and Adobe. As I switched to Mac in 2006, I had the chance to give Textmate a try and was thrilled with its chromeless interface and advanced syntax highlighting. I gradually moved away from WYSIWYG tools, and before too long, I was already enjoying every line of code I write in Textmate.

   Now don’t get me wrong, I am a designer, not a programmer. While I do happen to tinker occasionally with PHP, Python or Ruby, most of the code I write is HTML markup or pre-processed CSS. This leads me to another point: interface is a deciding factor when choosing my tools of the trade.

   Ignorance is bliss. –Thomas Gray

   Textmate was my ideal GUI text editor, until I had a closer look at the competition, that is. I have become to realize that there has been little to no improvement made to Textmate in the recent years. No auto-save, dumb undo, no dropdown autocomplete, not even a fullscreen mode. Sure, some of these features can be enabled via bundles and hacks, but I have a preference for native, officially-supported solutions.

   And thus began my hunt for an alternative.

   At first, I tried Coda and Espresso for a reasonable amount of time. Unsurprisingly, I was quite impressed with their endeavor to make web design and development as seamless an experience as possible. Notwithstanding, their main selling point is also their biggest snag: they suck as standalone text editors, and come to think of it, they never pretended to be one.

   Subsequently, I turned to Google for enlightenment. The first results hinted at BBedit, Vim and Emacs. Albeit being the darlings of many, Vim and Emacs are simply too keyboard-centric for a mouse-trained brain like mine, not to mention their daunting learning curve and ugly non-native interfaces.

   Eventually, my next stop was the two-decades-old BBedit, which coincided with the release of a major Lion-compliant update. Recommended by many pundits, I was almost confident that BBedit would put an end to my quest. Alas, that didn’t happen as I was offended by the intrusive toolbar, the nebulous syntax highlighting and the poor support for popular CSS preprocessors.

   Although I was initially reluctant to try less popular alternatives, I had little choice but to wade through an unhealthy number of Textmate–2-wannabes. Some are clearly coming out of the lot (Sublime Text), while many are too unstable for doing any serious work. What they all seem to have in common though is the lack of support and third party extensions.

   End of the road? I am concurrently using Sublime Text 2, BBedit and Espresso 2. Am I satisfied with my current workflow? Hell no, and not even the recent Textmate 2 announcement was enough to placate my urgent craving for a decent text editor.

   ]]> http://kaishinlab.com/2011/09/text-editors-a-rant/feed/ 0 http://kaishinlab.com/2011/09/text-editors-a-rant/?utm_source=rss&utm_medium=rss&utm_campaign=text-editors-a-rant http://feedproxy.google.com/~r/kaishinlab/~3/mCpJuMofthY/ http://kaishinlab.com/2011/09/icon-template/#comments Thu, 29 Sep 2011 02:51:28 +0000 Kaishin http://kaishinlab.com/?p=1859 A nice update to Michael Flarup’s icon template. Comes as a PSD with live multi-size previews, export actions and an awesome set of default textures.

   

   ]]> http://kaishinlab.com/2011/09/icon-template/feed/ 0 http://kaishinlab.com/2011/09/icon-template/?utm_source=rss&utm_medium=rss&utm_campaign=icon-template