Scotch and Code

Since the launch of the iPad 2, the use of the now officially coined term “Post-PC Era” has taken hold as the definition of that iPad experience that we love but can’t quite discern. You would be forgiven for thinking, as I did, that the dawn of the Post-PC Era is continuation of the Apple vs. Windows battle, leveraging the iPad as the latest shell fired at Windows. But the Post-PC Era defined by the iPad is much less about Windows and more about leaving behind user interface abstraction and interpretation in favor of direct, tactile interaction and an increasingly seamless experience between physical and electronic worlds. To me, it’s not Post Personal Computer, it’s Post Peripheral Control. This realization has caused me to rethink how I approach iOS app development.

Remember that iPad app that said “… And you already know how to use it”? Compare the key elements of a PC (Windows, Mac or other) and an iPad. Powered off, the PC has a monitor, a keyboard with some 100 keys on it, a mouse with at least two buttons and probably a stand alone box with a few more buttons on it. The iPad, on the other hand has, when viewed from the front and powered off, a single button. Just one. Mechanical intervention, like pushing a button, to make something go is instinctive. It’s the first indication that this device is a departure from the PC and it’s the first time you instinctively know how to work it. This is the pointy end of the Post-PC Era wedge.

My nearly-two year old knows that to make the elevator come, he presses the button next to the door. Now, when he gets into the lift where there are 7 buttons. Buttons with letters, numbers that the user must interpret instead of the action being instinctive. Though he is 20 months old and soon will understand the meaning of the letters and numbers, the example shows the disruptive effect of going from a simple, instinctive interface to an abstract peripheral control mechanism. This is why we already know how to use an iPad. You grab hold of it, you press the button to make it go. There’s no need to look at a label or a character on the button to intimate it’s function. It’s function is clear and known. The use of this already-known, tacit knowledge continues as you navigate through the home screen and use what I presume is the first app people experience on the iPad; Safari, with it’s swipe scrolling and pinch to zoom in and out.

Before the user uses any third party apps, they are almost certainly going to experience the two most common non-tap gestures on the iPad: scrolling and zooming. The mental model for scrolling is simple: There is something in front of me that I want to see, but it is obscured (off the screen), therefore i want to move it to where i can see it. On the iPad this mental model translates directly into the physical interaction with the device. The user touches and moves the article such that they can see what they want to read. The poor PC user has to decide whether they want to use the mouse or keyboard to scroll, click on a button or bar — not the article itself! — to cause the article to move or press a labeled button that moves the article an unknown and possibly inconvenient amount, etc. This peripheral based, indirect interaction is what we are leaving behind in the Post-PC Era.

Now we have a very happy iPad user, who after browsing around using Safari and perhaps dabbling in some of the other built-in apps is ready to dip into the app store to find some more apps for their new love affair. This is the crucial moment that we as developers must keep in mind. It’s the best case scenario on the App Store: we are selling to an iPad user that is smitten with that can’t-quite-explain-it love we have for the iPad. What will make our app a success is how well we can build on this buzz by creating an app that allows the user to achieve more than the built in apps could but indulges them with the same flow and interaction that they have experienced since picking up the iPad and tapping, swiping and pinching around the built-in apps. Failure to do this will make our app mediocre at best.

The engaging experience of scrolling and zooming a web page on the iPad should be top of mind for a developer when designing user interactions. That simple, subtle and implicit interaction that the user just knows should be the prototype for how we structure the interactions in our apps. The PC-era developer in us is all too quick to use tableviews, buttons and labels. Though readily available to iOS developers, and largely the staple of Windows and Mac development, the use of these UI elements where a seamless and natural gesture, or a visual representation that doesn’t rely on words or numbers would be better used relegates your app back to the PC Era.

Incredible iPad apps have a flow to them. The users ability to keep doing things, meaningful or vane, is never disrupted or impaired by the logic that’s going on behind the scenes with API interaction, data management or whatever else the app is really doing. When this flow is disrupted it’s frustrating. You feel it as that twinge of annoyance, the moment your brain stops rewarding itself for being awesome at knowing what to do without much hard work. It happens when you cant immediately, before engaging your higher logic functions, work out how to do what you want. Its like going from the highway, going where you want and moving at speed to stopping at an unfamiliar intersection.

Although we are intelligent beings and capable of the translation, deduction and interpretation needed to navigate these intersections, it’s the abstraction and required mental interpretation that takes away from the experience. Far more so that dazzling graphics and feats of coding, this breaking down of the interpretive barrier is what defines the post PC era and no doubt separates good apps from great apps. Think back to the first time you scrolled and pinched your way around a web page on your first iOS device. Such a simple gesture bit such a rewarding experience visually and functionally. To fully embrace and be successful in the Post-PC Era, developers need to constantly keep in mind how magical that moment was and find a way to extend that magic into their apps.

[box]
My shortlist, thus far, for the ingredients needed to bake this magic into your app is:

• 1. Maintain flow and user interaction at all times. Don’t be modal, don’t break the users stride and don’t make the user wait.
• 2. Rationalize and question every on-screen element: reduce decision making and interpretation.
• 3. Build on real world actions for the user to convey their intent: leverage the built in swipe, pinch, drag, etc gestures.
• 4. Build on real world forms and visuals to organize and commicate with the user: try to make the user interface familiar to the user although they’ve never seen it before.
• 5. Don’t take the user too far from home: Good apps seem to only have, at the most, two or three main views through which the user interacts. Taking the user down a rabbit warren of Navigation Items makes the app feel complex and inaccessible. Remember that the user has a very, very limited amount of short-term memory. Taking them far from home will confuse them and cause them to stop and think too much.

[/box]

Rationalization is king, flow is the reward. When working on user interface elements, first rationalize the interaction. Does the user really need to decide something here or is there an obvious flow that can be continued thus avoiding the intersection amongst the highway. Then look for a physical-world parallel, something familiar, that is going to give the user an immediate, silent and instinctive knowledge of how to achieve the outcome. When working on the visual elements of an application, first rationalize the use of each on screen element. Does the user really need to read a number or word to understand what you are conveying? For example, does something need timestamp or is there an unmistakable way you can represent the age without the user having to do mental arithmetic. Then find a way to make the visual elements of the interface represent either the actual physical equivalent of the interface if possible or an unmistakable analogy. Again, we’re looking for a way to make this new user interface so familiar to the user that they already know how to use it.

Take two twitter clients for example, Twitterific and Twitter’s own app (formerly Tweetie). For what it’s worth, I use twitterific on my iPhone and Mac. However, Twitter on the iPad has a neat UI layout that to me is more Post-PC than the single list view that Twitterific uses and hence keeps me using their app on the iPad. The way in which the timeline or list of tweets, tweets themselves and related content fan out left-to-right, partially stacked on top of each other with the ability to push and shove the panes around is like papers on a desk. For me, reviewing tweets is an exercise in parsing and filtering. I want to spend as little time as possible looking at as much content as I can while consuming small one-off bits of information and building a set of articles and links that I will take a look at later. There’s three elements to that mental model: the content (list of tweets), a way to see if they interest me (the tweet and web views), and an interaction where by I can decide to save the article for later viewing.

Twitterific presents me with a list of tweets, which I can scroll through smoothly, but when I want to view an article or a link, a modal view obstructs that list of content and then loads the page. From that modal page, or from the list of tweets itself I can choose to read the link later using instapaper. But when I do so, the experience is again modal. Up pops a lovely paper airplane to show me the article is going to instapaper — but I can’t do anything until it’s done. Conversely in Twitter I can manicly touch a link, push the page aside when it loads, scroll through a few more tweets, flick back to the article, dismiss or ear mark it, push it aside again and keep on scrolling through my time lines. That’s Post-PC. No where in that workflow have I been disrupted by the UIs mechanics. I had the ability to see and do what I wanted and all using familiar physical gestures that I would use with bits of paper on a desk.

Don’t take this as a critique of Twitterific’s user interface; it’s gorgeous by any standard and I am huge fan, but it highlights what Post-PC era is all about. Similarly, Apple didn’t put that dual core processor in to the iPad just to make it faster or to beat RIM to it — they did it because now you have one whole core that you can use to do things for the user in the background whilst the other core is at the users beckon call for what they want to do. That’s the best thing about the iPad 2 being multicore. One core for the user to consume or create and a separate core for you and your app to prepare, analyze, crunch and process. Of course in reality the sharing of the cores will be much more granular and invisible to the user and, to a varying degree, you as the developer.

A modal UI element, one that prevents the user from doing something or anything while active is convenient for he developer. It means we don’t need to worry about the user doing something else while the app completes a tasks and it is, for developers, a logical fit with the apps workflow: The app is completing a task the user asked it to do, tell the user this while it is doing the tasks. But that’s not what the user wants. The user has already to you what they want done… that you are doing it is taken for granted.

Gesture selection is also important to creating a Post-PC Era experience that sets you apart from other apps. Back to the Twitter example before of sorting out a mass of content into a relatively small number of things I actually want o read about. Once I have decided I want to read an article later, to perform that action I tap a button that represents my intention to read it later, sometimes after swiping on the tweet which loosely represents the physical act of sliding the cover off something to reveal a button inside it. But the tap is the least satisfying gesture in a tactile environment. The tap has two problems with it; it’s not graceful and it feels nervous and skittish. Tap you finger on your leg now as if you are rapidly clicking on a button. It feels nervous or uncomfortable, physically and mentally.

Swiping, dragging, using multiple touch gestures feels much, much nicer and has a more more relaxed and controlled feeling to it. So, for example, if I had a little tray in my Twitter side bar where I could flick tweets and article over to to read them later, I would find that a much better experience — even more so if that tweet is then gone from my timeline to indicate I’ve made my decision to read it later and don’t want to see it again right now. That’s gone from an interaction where I tap a button that represents my intent in a abstract way, to a direct point-to-point gesture that reflects exactly what I want to do without any need to interpret the user interface. I want to read this later: flick it like a bit of paper into the pile of things I want to read later. Best of all I feel far more in control of the action. Tapping a button required interpretation and faith — interpret what the button does and faith that you tapping it is enough to convey your intent. Grabbing hold of the article and dropping it onto the pile of things I want to read gives much more confidence that my intention has been conveyed, especially when I see that article moved to my read later stack, and it allows the user to use those sweeping gestures that we love. Best of all, for a developer it opens up a world of possibilities. You now have a precious second or so between the user grabbing the article and dropping it in which you can do any sort of processing or parsing or the article that you may want to do. And your ability to convey the action in a visual way is limitless — much better than the on-pressed-off states of a button.

Post-PC is not just about the touch screen or tablet format either. That’s certainly one of the most obvious and tangible elements of the revolution, but it’s not the at the core of the movement. In fact, the touch screen is really just the best compromise at the moment. It’s vastly better than the PC form factor of a keyboard and mouse because it allow the user to directly interact with their workspace with touches and gestures. Seeing and doing become one with a touch screen. Bit it’s still an abstraction. Although it transform itself into everything from a solar system to a guitar, it’s still a representation of those things in a 2D form — but it’s the best experience widely available today that let’s he user directly interact with that representation.

With these realizations in hand, I’m off to go and change my apps.