Categories ➤ Insights

2011: A Year in Interface Design

Posted in Insights News

Desktop Identity Crisis

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.

Metro

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.

Hiding Lion

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.

Circles

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.

Line

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.

Broken Egg

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.

Photo credits: Jesper Dyhre Nielsen / Joysaphine / Niall Kennedy / Brandon Thomas / Nick Sherman

Posted in Insights

Your mileage may vary, but I think Google+ has what it takes to compete against the blue juggernaut. Smart interactions and streamlined privacy controls drastically improve user experience on a social interface and Google seems to be pouring considerable resources in this direction.

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.

Invisible Interfaces

Posted in Insights

Siri

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)

Thoughts on Scrollbars in Lion

Posted in Insights

Scrollbar in Lion

Is it only me or is everyone whining about the ‘peekaboo’ scrollbars in Lion?

Much like the skeuomorph controversy, there seems to be a sweeping consensus that the iOS-inspired appearance and behavior of scrollbars account for a significant usability handicap that should be addressed in one way or another. They argue that the main culprit is the loss of information stemming from the contextual disappearance of scrollbars.

In the lack of any theoretical or experimental evidence coming to their defense, these claims are speculative at best. Trying so religiously to solve a problem that doesn’t exist in the first place is a complete waste of time and talent.

Scrollbars are first and foremost controls; they receive user input and instruct the view to move content accordingly. They also happen to visually inform users about the position of the visible area and how much of the overall content it stands for. In his lengthy Lion review, Siracusa argues that Apple had to sacrifice the convenience of constantly displaying the foregoing visual cues for the sake of simplifying the interface and saving screen real estate.

Now let me ask you this, how many times do you find yourself gazing at the scrollbar when browsing a page or working on a word processor?

Apple made the right assumption that, unless we are scrolling, scrollbars are very likely to be outside our locus of attention (Raskin 2000). In fact, even when scrolling, the odds that we shift our locus of attention to scrollbars are very weak; our main concern is displaying hidden content, making it ipso facto our locus of attention. Using up screen real-estate to constantly display non-critical data is nothing short of a hindrance. Progressive disclosure anyone?

The ensuing disappearance of any visual cues hinting at the presence of more content below the fold is also a false alarm. Getting an instant feedback from the content view is just one gesture away, and the carefully crafted bounce animations make the interface even more responsive.

I would't argue that those who relied heavily on scrollbars in Snow Leopard would be disoriented at first, but that is little to pay for an improved experience on the long run.

Thoughts on Skeuomorphism in UI Design

Posted in Insights

Skeuomorphs in UI design refer to interface elements that retain obsoleted visual or behavioral aspects of the physical objects they are based on. Take for instance the bumps in the F and J keys on the iPad virtual keyboard: they serve no particular purpose and are nothing more than artifacts of physical keyboards where similar indentations help provide sensory feedback to touch-typists.

iPad Keyboard Skueuomorph

Apple has been riding the skeuomorphism wave for more than a decade, alienating pundits and users alike in every episode, the most recent of which involves the redesigned iCal and Address Book in Lion, sporting a new skeuomorphic look heavily borrowed from their iPad sister apps, Calendar and Contacts.

iCal interface in OSX Lion

The iOS-inspired interface came under harsh criticism, dismissed as an unnecessary gimmick and mocked for being hideous, even infantile. While the reaction seems quite disproportional to me, I admit that there are major arguments standing against skeuomorphism in UI design:

  • Potential false affordance; users may expect the skeuomorph to mimic the behavior of the original object in a particular situation. Failure to meet those expectations will result in frustration and discomfort. Try as you might, there is no way of browsing contacts by manually turning pages in the new Address Book, even though the interface strongly hints at this interaction. For more on affordance in general and false affordance in particular, check this out.
  • Visual noise that distracts users and negatively affect their productivity. Skeuomorphs are greedy for both screen real-estate and users' attention, obviously on the expense of efficiency and usability. The stitches in the iCal navigation bar illustrate this point like no other.
  • Functional limitations dictated by the original object may severely harm the user experience. The lack of a convenient three-pane view in the new Address Book is a perfect example.
  • Disorienting users as a result of using alien interactions that do not take advantage of the experience acquired through prior interactions with standard interfaces.
  • Alienating users with an excessive emphasis on aesthetics.

Out of all the factors above, the last one holds the lion share in this controversy; it's whether you love it or hate it. Obviously, when it comes down to pure aesthetics, subjectivity kicks in and renders the whole debate pointless.

Address Book in OSX Lion

When all is said and done, it is worth noting there is more to skeuomorphic interfaces than distraction and visual noise; they tend to have a powerful emotional impact on users, or more precisely consumers in the marketing speak. A contact management app that looks like an actual address book has more chances of establishing an emotional bond with its users and engaging them on the long run. Its distinctive personality might not always favor productivity, but that would be perfectly okay for an average user. In fact, the very tone of Apple's marketing is primarily emotional, and the skeuomorphic interfaces on both on iOS and on OSX perfectly serve Cupertino's agenda.

On my part, I can say that since Apple didn't tamper too much with standard controls, I can put up with, even slightly enjoy, using the new iCal and Address Book. In fact, the more I use them, the less I notice the interface, and that's quite a good sign if you ask me.

12Older