Category Archives: User Experience Design

The three eras of iPad apps

Lately I’ve been giving a lot of thought to the design of iPad apps. It’s particularly striking to see the nuance and expressiveness in the design language chosen to represent an app.

In a moment I’m going to share my thoughts on the three eras of iPad apps, but I’d like to dwell on the notion that there can be dramatically different expressions of apps on a platform with such comprehensive design guidelines.

The dawn of computing

At the dawn of computing every app was relegated to displaying text in interesting ways. Some chose menus, some chose modes, but on the whole the experience was clunky and daunting for novice users. As the capabilities of computers evolved, so did the richness of the UI language that apps could provide. On the extreme end, games created compelling interfaces tailor made for their audience. Some, like my much loved Sierra quest games, standardized an interaction interface across a suite of games.

Yet it wasn’t until the advent of GUI systems that the platform itself began to assert a particular design style. Windows, Mac and many other long forgotten platforms provided a set of prebuilt controls – menus, buttons, dialogs – along with guidelines for combining them into usable applications. From that point on, the immense variation we had seen before in UI language was narrowed. The few hold outs who tried to bring the old text style applications onto the new platform stumbled as their UX began to look increasingly old and out of place.

I believe platform design guidelines were (and are) largely a good thing. Application designers could spend less time thinking about control types and layout, and more time creating unique functionality within their apps. As the GUI market matured, and Windows 3 became Windows 95 and then Windows XP, the desktop saw a boon in applications built for the platform.

Many of the best applications deviated from the explicit platform design language to craft a more compelling experience. Even Microsoft’s own Windows Media Player did away with the standard title bar and other accouterments. Unfortunately, many of the worst applications followed suite. I shake my head thinking about how many driver software dialogs thought their settings deserved custom menu bars and buttons. It only served to make them look awkwardly out of place.

The three eras of iPad app

Fast forward a decade, and iPad apps are at a similar juncture with one key and exciting difference.

Prehistoric iPad apps

The prehistoric iPad apps are those that harken back to an earlier time. A time when desktop and keyboard ruled the human computer interaction. A time where the interface was densely packed with features and functionality in an attempt to make the application efficient and every feature discoverable. Or, as so often was the case, every feature equally undiscoverable.

Safari - a good example of a prehistoric iPad app

Safari – a good example of a prehistoric iPad app

A prominent example of a prehistoric iPad app is Safari, and to a somewhat lesser extent Chrome. You’ll notice the small and fiddley controls, the tiny untappable tabs, and the 1990’s inspired design metaphors.

If your app looks like this – you’re doing it wrong. You’re doing the equivalent of building a text based application as the era of GUIs was dawning. And it’s only a matter of time before your app is left a fossil on the wayside of progress.

Lest you think that a browser was destined to be a prehistoric app, I urge you to watch the demonstration of Firefox Junior – they’re doing it right.

Modern era iPad apps

Then there are those apps which fully embrace the design guidelines bestowed by Apple. Apps which use the appropriate controls and metaphors. Apps that look and feel like iPad apps. In fact they look so similar it would be difficult to tell them apart from afar.

These apps do nothing wrong, and in fact do many things right. They’re easy to learn, and immediately approachable. They extend the design metaphor held sacred by the iOS platform.

The phrase I would use to describe them is “perfectly adequate”. They’re safe, predictable and in a sense, boring. The magic is lost within a sea of similarity. And examples are all around, but you only need to look to the Mail app for a prototypical example.

The evolved iPad apps

Then there are those apps which have taken the established design metaphors and stretched them to the point of delight. These are the evolved iPad apps. Apps which look impart wonderment with their unique style. Apps which confront you with their character, and force you to engage at an emotion level.

These apps embrace the exciting difference between iPad apps and desktop apps of yesteryear – The delightfully visceral enjoyment that touch interfaces bring. They revel in the naturally playful discovery and almost interpersonal interaction that has come to define touch computing.

When you look beyond games, the examples here are disappointingly few. The obvious example here is Flipboard, but I feel that I would be depriving you of insight if I stopped there. My favorite example of an evolved iPad app is Spotify.

Spotify - an evolved iPad app

Spotify – an evolved iPad app

I think apart from just being generally a great service, Spotify nails a few design points:

  • Smart use of progressive discovery in the music exploration experience. It walks a beautiful balance between density of information and depth of UI.
  • It makes the most important things easy, with big play buttons just about everywhere to start the music playing. I’m always shocked at how many music apps still make the act of starting the music so difficult.
  • Appropriate and delightful use of asymmetry to focus on the most important content while providing a flow and hinting at user interaction.
  • It’s subtly aware of the screen dimensions, and puts the nav bar on the left. Most apps put the bar on the bottom, and even more severely constraint the vertical room when viewing in landscape.
  • UI variation keeps it interesting. The radio place mixes up large tiles with small tiles. Contrast this with an application like Netflix, that just looks like rows upon rows of little boxes.

Delightful is possible

If you’re designing an iPad app, don’t stop at the guidelines that Apple provides you. Delightful is possible, and magical within reach. Stretch the touch metaphors. Create an engaging experience that is only possible on a touch device.

7 Deadly Design Sins of the Bit.ly UX refresh

Bit.ly recently thrust a new design upon the world to the loud and thunderous applause of just about no-one. Rather than run in horror, I thought it would be instructive to point out a few of the more apparent flaws in their design. As they say, in life you’re either an example to follow or a warning to be avoided. I think the new Bit.ly redesign falls into the latter camp.

UX Sins 1&2: Hide the most important commands

Admittedly I’m not a power user of bit.ly, but I would think that for any shortlinks service creating the shortlink and accessing the shortlink would be among the most used tasks. So I find bit.ly’s choice of where to place these commands at best curious. Adding a shortlink is located all the way to the top right. Eye tracking study after eye tracking study has shown that – for users in left to right languages – the top right is mostly ignored. A few commands can get away with it because of general design precedent across the industry – search and login being two such examples. In general though, the top right should be avoided.

Even more troubling, access to the shortlink is hidden behind a curious i icon. At first I thought erroneously, “This control must be here somewhere and really easy to find.” So I looked in vain before eventually reading the help. Yikes. It’s another click away.

UX Sin 3: Promote the least important control

Again I’ll admit to not being a power user – but ‘Your network’ is right in the hot zone of controls I look at first, and is completely useless to me. Why would I ever go there? Why is it so prominent?

The navigation between Bitmarks, Bundles and Stats seems reasonable, but they’ve made an odd choice promoting ‘Profile’ to the same level. I only use that once in a blue moon, right? There’s a reason the entire rest of the Internet world puts profile controls in the top right.

UX Sin 4: Help is needed to use the app

If you find yourself wishing that users had more training, or that help were easier to find then you have failed to create a usable design. Devoting a large portion of your first page to help should be like a flashing siren that something is wrong.

Unfortunately, in this case help is actually necessary because of UX sins 1 and 2.

UX Sin 5: Tooltips everywhere, all at once

As you hover over elements on the page tooltips flash on and off, helpfully informing you of anything from the obvious ‘you can select multiple bookmarks’ to the esoteric ‘click here for the short link’. I’m not against tooltips in general, but their use should be judicious. They should clarify only the most confusing concepts. The best designs will make those concepts self evident.

UX Sin 6: The whole page is full of ads

From the huge help banner at the top, to the ads down the right hand side. The actual content of the experience is squashed into the middle, barely appearing before the scroll bar on my 24″ inch monitor. As a guide, if most of the elements of your page has close buttons, you’re doing it wrong. The one exception is a customizable dashboard, but the UI below doesn’t qualify as a dashboard.

UX Sin 7: Unreadable text

Typography is something you never notice unless it is beautiful, like Microsoft’s Metro, or awful like our example today. The weight, kerning and spacing of the text is sloppy, and makes it difficult to read.

This is actually quite difficult to get wrong in HTML because generally your standard Verdana or Arial work just fine.

It’s easier to criticize

Bit.ly’s new design does a lot wrong – if I had the time and a few more thousand words I could dissect each nuance of the design, but I think by now you get the point. Yet it is easier for me to sit in judgement than create the design. I look at the finished product and see everything that is wrong with it. I didn’t create it. I didn’t balance the conflicting design, business and engineering goals to produce what you see below.

The hard thing about a design is not only making it beautiful and functional, but bringing it to market. The most perfect design is useless if it never sees the light of day.

I hope that the bit.ly team can learn from some of their mistakes, and improve in the next release. I do love their service, just not the redesign.

7 UX Sins of the Bit.ly redesign

7 UX Sins of the Bit.ly redesign