Ipad

Designing for iPad: Reality Check


April 12, 2010 by Oliver Reichenstein. Average Reading Time: almost 13 minutes.

« Previous
Next »Over the last two months we have been working on several iPad projects: Two news applications, a social network and a word processor. We worked on iPad projects without ever having touched an iPad. One client asked us to “start working on that tablet thing” even before we knew whether the iPad was real. The question Are we designing desktop programs, web sites or something entirely new? has been torturing us until that express package from New York finally crossed our door sill. A quick write up of design insights before and after the appearance of the iPad at our office. Even though we developed everything inside the Photoshop black box, it became quite clear that iPad application design is substantially different from web design in many ways. The most obvious challenge was being forced to design iPad pixels with iMac pixels. The resolution gap between a 24 inch iMac and an iPad added a massive uncertainty factor:





1. Typography: Is it nice to read?

The obvious issue with the resolution gap is typography. Type that looks fine on an iMac screen might break on iPad. In order to answer the questions…



•Is the font big enough?

•Is it too big?

•Does it render well?

•Is the Schriftbild (text impression) inviting or rejecting?

•How does it feel to read?

…we had no other choice than printing out your screens on a 1:1 scale. We had to print out hundreds of pixel designs to get a feeling for the new canvas and the dense resolution. Of course, we were still unsure about the usefulness of our work, since printed pixels are not 1:1 comparable to shining pixels.





Reality check: Wow, this thing is sharp!

After two months of printing, we did get the typography quite right, but there was another surprise waiting for us: The sharpness. With its high pitched light contrast, iPad is a miracle picture book or photo frame—but designing long text passages for good readability is still a tough matter. If, executed carefully, text on an iPad comes quite close to printed matters, but it needs much care and specific screen typographic know-how.



Web body text sizes (14–16px) feel too small on iPad while bigger sizes clash with the canvas dimensions. This leads to all sorts of grid restrictions.



iPad’s resolution is higher than a regular LCD but still lower than an iPhone which gives the pixel type an unusual “in between” feel. Paradoxically this can make type feel more pixelated than on a regular computer screen that is usually farther away from the eye and less contrast-intense. [At first I thought it's the sub-pixel anti-aliasing that becomes more apparent—there is a blue and orange glow around black-on-white type contrast—yet iPhone and iPad don't have sub pixel anti-aliasing. So contrary to my initial assumption, the lack of sub-pixel anti-aliasing might be another reason why text doesn’t look as smooth as expected.]



But make no mistake: It’s generally much more pleasant to read on an iPad than on a regular screen. And, yes, that thing is fast. So while it still doesn’t replace printed matters, it is a hell of a competitor to the laptop when it comes to passive digital text consumption.



Backgrounds and the delicate sound of noise

Our first measure with our designs was to reexamine the text-background relation. While black text on white background is more difficult than on a regular screen, decently colored text-to-background combinations (like a sepia background with a dark umbra font, or a light blue grey on dark blue) worked quite well. Another way to get around hard contrast noise is using delicate patterns for backgrounds. Once a big no-no among graphic designers, noise backgrounds started to establish themselves as a new design trend even before the iPad since screens became more dense and high contrasted (f.ex. Dribbble).





2. SFX & UX: What about that phony 3D stuff?

Studying Apple’s HI Guidelines in February, we understood this much: If web design is Lego, iPad design must be Duplo. And testing the guidelines on the iPad, most of the guidelines proved to be correct. For instance:



1.Make it work seamlessly in landscape and portrait mode

2.Minimize full frame swipes, stay within the same frame as much as possible

3.Try to reduce navigation to a left side bar in landscape mode and a pop over in portrait mode

Dubious UI guideline principles

Now one thing just didn’t click: The guideline to make apps look like physical objects. It’s quite clear why Apple would try to push designs to imitate tangible things:



1.It’s a touch interface: 3D objects look more tangible and inviting

2.Everyday interfaces are easy to understand and familiar in their use

3.Glitzy interfaces are easier to market

But… Let’s put it this way: You might remember the ultimate prototype of such “easy to market” interface design: Kai’s PhotoSoap. It was as tacky as it was popular. A huge hit on main street, a night mare on designer’s lane—and to an evil eye: A one way street leading through OSX Aqua to that tacky iPad Calendar.





Everybody in the iA team strongly doubted the validity of that particular guideline, but we had no way to verify or falsify our doubts. So we went full steam ahead: Everything 3D! Make a newspaper look like a newspaper! Make that word processor look like a type writer! Use wooden backgrounds! And why? Because Apple said so.



Like I mentioned above: We had no other choice to check our designs than by printing them out in a 1:1 scale. Now, as you can imagine, digital products imitating physical objects printed on paper… It just didn’t look right. Well, maybe we need to see it all on the device, we thought.



We couldn’t help it: the longer we worked on our designs, the more we moved away from the fake 3D effects. However, moving along we found that 3D SFX and material surfaces do work if used sparingly. As an invitation to touch, not as a basic metaphor. In other words: Don’t use fake wooden backgrounds, don’t make your interface look like a living room, with clickable TVs, magazines, DVD cases. Be reasonable. Be delicate. Yes, I’m looking at you Yahoo!





Reality check: Does kitsch work?

The amount of special effects an Interface can hold is, of course, also a matter of taste. Old screen designers like me have their bias of how interfaces are supposed to look.



So what happened to our elitist 3D resistance after the iPad reality check? Looking at different iPad apps that strongly push the material surfaces and special effects such as Calendar, Notes and Pages, only confirmed that we were right to be hesitant with special effects.





Pushing the leather buttons on the Calendar app feels very much like real leather buttons would feel: Tacky.





The ruler in the Pages app—in Apple’s January presentation praised as “the most beautiful ruler you’ve ever seen in an application”—looked like my good old aunt Rose decorated it.



Having the same static thick paper stacks left and right in your e-reader application on the first as well as on the last page, is not just visually wrong, it is also confusing; it feels wrong and it is wrong. It’s kitsch.





Using unhyphenated justified text in narrow columns inviting text holes and rivers is kitsch.



Using three column layouts on horizontally scrolling nine page articles for no other reason than imitating a newspaper… is kitsch. It reads less easily and it’s harder to handle than a vertical column. That The New York Times goes down that path, doesn’t make it right.



Using or ragged text in super narrow columns like the evenly over-designed and overpriced Wall Street Journal app is typographic kitsch.





If you use favor style over function to make something look like something it is not, you are not a product designer, you are an illusion artist.



Leather buttons, stitches and torn paper edges, multi-screen-multi-column-pseudo-newspaper-layouts… on the screen it is just kitsch. Kitsch, as in: it tries to be something that it is not—and miserably fails at the attempt: Paper doesn’t wear down in the digital dimension. There are no leather buttons in the real world. Meaningless stitches in the UI distract the eye from the information.



So what about special effects and metaphors in user interface design? Use special effects, but use them sparingly.



Using metaphors

The same rule applies to visual metaphors: Just as with any literary metaphor, a visual metaphor hurts if it doesn’t clarify; it breaks if you stretch it; it becomes ludicrous if you combine it with a second or third metaphor.



Avoid metaphors that do not clarify; if a metaphor darkens the meaning of what you are trying to express, don’t use it.



If you operate with paper sheet stacks in your e-reader, engineer the stacks to show where in the book you are. Give them a function. If you adapt the page metaphor for your notebook application, don’t use scrolling features inside the page since they clash with the basic paper sheet model.





Metaphors often feel good to their authors; and, since we know that few things are harder than coining a strong consistent metaphor, we are generally forgiving our weak metaphors. With weak UI metaphors on the other hand we are less tolerant.



UI metaphors have more impact in the overall texture: While a weak text metaphor can be over-read, we have to deal with weak UI metaphors again and again—and weak UI-elements get on our nerves quickly. They are bad jokes.



For example: Using a book shelf for choosing a book is a consistent metaphor, but does it help you understanding the interface? Does it help in any way? Do you still like the hard to scan bookshelf with after looking at it for the 200th time? What if you have 200 books?





Note: I’m not saying that using quirky metaphors and plastering your app with special effects will kill the perspective to sell your app. Unfortunately the audience for kitsch is a bigger audience than the elitist UID guild. Just be aware that you design for the moment: phony products don’t have a long life span.



3. Interaction design: So what works?

iPad is a stunning device to consume photos, comics, children’s books, games, videos, and (proportioned amounts of) text, and it also seems to work surprisingly well as a writing device—if you’re not a touch typer. And while it looks like Duplo, it also feels a lot like a kid’s toy—which is the perfect condition for good user interface design:



1.The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.

2.Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.

3.We found that the iPad applications we designed, made it relatively easy to be translated back into websites. iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

I spy with my little eye… something that is black

iPad looks and feels like a massive photo frame with a much more defined canvas than a website—and to a certain degree, that’s how you should design for it. But don’t get too high on the fixed screen size: Don’t paint for the canvas. The iPad scrolls smoother than any computer out there: There is no need to replace scrolling with an monotonous swiping marathon. Even on the iPad it’s still easier to scroll than to swipe. So go for the easier option if you can. Don’t copy column design or swiping galore of the New York Times article page:





On a computer we have to take in account that the user physically operates between keyboard and mouse, while visually he moves between monitor, OS, app window and the inner visual order of the window. On the iPad, eye and hand movement are brought together and held captive within a massive black frame.



Overall orientation

Websites are volatile objects. They’re (hyper)linked with billions of other sites. They work deep within a complex functional frame set of computer>monitor>OS>browser. Websites seem to have infinite depth and complexity. iPad apps on the other side have a much simpler functional frame set that suggest a more finite, closed information architecture. Still most iPad application so far seems to fail at providing a clear overall orientation and mental model.



The passive (or as Apple calls it: “lean back”) tablet format suggests creating limited information architecture with linear use modes. In comparison to a website, an iPad app is like a closed egg.



And this is one of the main challenges iPad app design poses to interaction designers. How do you make navigating on iPad as easy as breaking an egg? And in particular, how do you measure information on a device without static scrollbar?



In order to make the user feel in control of an iPad app you either need a strong and simple structured overall content model that is consistent with the mental model of most users (like the brilliant Marvel application)—or you need to re-invent the way information is measured and orientation is given.



ART: Average Reading Time

Working on our word processor we have been experimenting with zooming, using the page stack metaphor and scrolling to give the user orientation where in the text he currently is. We also tried to combine both. Of course, we experimented with progression bars and… In short: I think we have a better solution than scroll bars, stacs or zooming maps. Using time as a measure. We call it the Average Reading Time or ART system.



Imagine, when you read a book, it doesn’t show you how many pages are left or how many words you have read, but how far into the text you are time wise and how much reading time is still ahead of you. Imagine that, when you write a text it doesn’t count words but the right column tells you:



1.how much time you spent to read your text until the cursor position (top number)

2.the total reading time (bottom number)





If, instead of trying to figure out what that scrollbar, that page number or that Street Fighter power bar could mean, you just look at the time read and time remaining and you know where you are.



To find your average reading time all you need is calibration. Take a two minute reading test and you’re set. Want to see more? You’ll have to wait a little. We will present our Writing Machine at Typo Berlin 2010 next May. So:



Stay tuned

I cannot emphasize enough how radically different the frame set is, that iPad interfaces are embedded in. The iPad brings hands and eyes back together. There is more to say, but for a first impression that was long enough.



Follow us on Twitter under twitter.com/iA

.

--------------------------------------------------------------------------------