I’ve been using my iPad a lot of late. I find myself in Safari probably 70% of the time. As my habits have settled in, I’m suffering from a mildly acute level of frustration with a lot of little things. Mind you, I’m ecstatic that I can lounge around and surf the Web on it, but various aspects of the browsing experience just don’t feel right.
“He’s got too much baggage.”
When we design within a new arena that represents a dramatic shift in interaction, we can’t help but carry forward our own biases and prejudices about how things can or should work. For the past twenty years, we’ve been staring at…windows. Windows that open, close, expand and minimize. It’s probably the single most dominant metaphor in OS interface design today.
When you open Safari on the ipad, its lineage is fairly obvious:
Safari inherits a classic window trait: controls and a healthy slab of chrome along the top. For Safari’s ancestry, this made a lot of sense. We “grab” windows with a mouse pointer to drag them around. Also, from a visual perspective, we tend to title and provide “top level” controls along the top-most pane.
On the iPad, you can’t do any of those things. No resizing or minimizing. Even closing a window amounts to closing the entire application.
Another challenge the iPad has to overcome is mimicking input devices like a keyboard right on the screen. When we focus in on a search or URL box, the iPad pulls up a keyboard along the bottom portion of the screen. Unlike a physical keyboard (which requires zero visual focus for me) the iPad keyboard is a bit more challenging. I find myself splitting my focus between typing on the keyboard and checking what I’m typing up top. It isn’t helpful to have your text so far away from the virtual keyboard:
Is there better way? Interestingly, once we shed the characteristics of typical OS interfaces, we find new opportunities. To reboot the design of the iPad’s browser interface, we should focus first on how we physically handle the device. I want an experience that takes advantage of where my hands are 90% of the time and provides feedback to what I’m doing that is within my line of sight. While having controls at the top of the browser “window” (it’s hardly a window anymore on the iPad) feels familiar, the main reason it doesn’t work so well is that the key controls are far away. Bookmarks, tabs and the URL bar are nowhere near what I would call the “hot zones”: where our hands grip an iPad:
I most often grip my iPad on the sides – whether portrait or landscape. When I’m ready to change pages or type a new URL, I anchor it on one of my hands for a better grip (usually my left, since I’m right-handed) and press a button with my right. It’s not awful but it’s also not ideal.
Bring on the Edge SwipeTM
One possible approach is to do the following:
- Get rid of the chrome up top altogether (the actual Web page reclaims that real estate – a good thing).
- Recognize an edge swipe: it’s essentially a swipe off the edge of the iPad window (either left or right) and reveal controls in a gutter off the Web page.
- Put the bookmarks pane near my thumbs so I can scroll and make selections with either hand.
- Adhere the URL and search windows atop the screen keyboard.
Here’s a concept video that illustrates how such an experience would work on an iPad (users on the iPad can view the video here):
There are some issues with this approach. One of the biggest is discoverability. Unless there’s some sort of illustrative first visit walk-thru, people won’t know to swipe off the edge to get at the controls. Another potential problem is that additional steps are being added to some of these tasks. For example, visiting a new URL is a swipe + pull up bookmark pane + select bookmark. One extra step is added here, though you could make an argument that the swipe is so trivial (and arguably natural) that the net benefit outweighs the extra step.
Generally speaking, this case should serve more as an illustration of how we instinctively revert to familiar patterns and traits, even when the outcome is less than ideal. We rarely see examples of bold new approaches to interaction. It’s a tricky line to walk. Most often we seek user feedback to show the way. Devices like the iPad challenge the typical user-driven approaches by presenting new rules of interaction. And with new rules come new opportunities to break new ground.
Matt Terenzio said:
Some great points. But yeah, discovery of the features was probably another reason why they went with the traditional layout.
If you had a choice to turn “Optimal UI Mode” on, I bet it wouldn’t be long before it caught on, without inconveniencing those that weren’t in the know.
Ruben said:
Great post, the egde swipe seems so obvious after seeing it.
Steve said:
Love the fact that you are already looking at rebooting the iPad experience! If only Apple had been brave enough to do that first time out with a tablet. I feel it will come in future revisions (as you say once they have feedback) but they did miss an opportunity to really come up with an ideal lap/crotch top sofa browsing experience.
Particularly like your moving of the address and search bar to the keyboard area, it’s definitely a distraction to have them so far apart. Nice work!
Charles said:
There’s precedent for “edge swipes” for Android notifications — you swipe in instead of out, as if pulling out a drawer or pulling down a window — and small icons help with the discoverability.
One can imagine a small amount of chrome that advanced users could simply swipe out of the way once they understood the concept.
Annie said:
Key reason for the chrome to exist: Security.
Mike Manzano said:
Well, you wouldn’t necessarily have to hide the controls. You could have a tab that sticks out of the border, and is slightly translucent.
Briggs said:
I have also had some minor usability issues with my iPad. I love the device though. It has replaced my “development Mac” for browsing. I had been thinking of a newer keyboard that would be split into the bottom corners (triangular) to allow thumbs to reach all keys. Perhaps Ergo-thumb-nomic TM.
But, did you really put up a video that can’t be viewed on my iPad?
Rich Ziade said:
@Briggs – Doh! I thought Vimeo is supported on iPad?
Thomas Davies said:
Vimeo supports iPad from their site but not as embeds. Just link to the Vimeo page.
Remy said:
Besides the address text field at the bottom, the edge swipe already exists in Fennec/Firefox Mobile. So yes it is a nice idea, but Mozilla’s designers probably deserve some credit here too. IIRC it was one of Aza Raskin’s idea to be precise. He also goes further by combining a spatial view to show the tabs in a ZUI.
http://www.azarask.in/blog/post/firefox-mobile-concept-video/
Michael Critz said:
Rich,
I love your solution and would use it for my personal browsing. But what about novice users? How do you inform them where their controls have gone?
It’s interesting that Apple encourages top bar editing controls that are “50 miles away” from my fingers. I’ve been frustrated by this many times. Yet the iPad HIG spells it out “Migrate Toolbar Content to the Top”: http://developer.apple.com/iphone/library/iPad/index.html#documentation/general/conceptual/ipadhig/DesignGuidelines/DesignGuidelines.html%23//apple_ref/doc/uid/TP40009446-CH3-SW3
Their reasoning is to consolidate top and bottom bars to one toolbar.
Apologies for the long response,
Michael
David said:
I’m surprised you didn’t cite your obvious inspiration: Firefox Mobile (a.k.a. Fennec): http://www.mozilla.com/en-US/firefox/video/?video=about-mobile .
Carlos said:
I completely agree. The browser leaves a lot to be desired. As for novice users, they should read one of those pamphlets like on planes.
foo said:
yeah, maybe give Firefox Mobile some credit here since they’ve had this for more than 2 years now.
Dbug said:
It’s always fun to hear some good interface ideas. It does seem like some changes that work well with a browser might not go as well in other apps though.
(I’m not on a pad/pod and don’t see the video either, link shows it is Flash. That stays blocked. If the Firefox plugin Download Helper listed h.264 I’d download and watch. Flash free for good…)
Eelco said:
You can watch the video on your iOS device here: http://vimeo.com/13682463
Mike Mayo said:
I like this idea and agree with you on discoverability, but one concern I have is the placement of the URL and search bar. A Twitter app I had did this, and one of the problems with the design is that you sometimes mistakenly hit the text input when you mean to press a key, and then your cursor is moved to some arbitrary spot. Then you keep typing and don’t notice that what you’re typing is complete gibberish.
Aubrey Goodman said:
I’ve designed and built several apps for both the iPhone and iPad, and what I find is there is a delicate balance between efficiency and discoverability. With limited screen real estate on an iPhone or iPod Touch, it’s difficult to introduce discoverable features without distracting the user away from their workflow. Force them to tap a button to expose more controls, and you’re likely to elicit a “how do I get back?” response. Show them a modal view instead, where it’s obvious that they have a limited set of actions, and it’s easier for them to do what they need to do without feeling lost or afraid.
We have a long way to go before the average user can pick up a mobile device and intuitively use complex gestures (two or more fingers combined with motion, like a pinch, swipe, or rotate). First, we need to train them to be comfortable without a mouse. Then, we can try to standardize things like three-finger pinch and off-screen components with gesture-triggered visibility. Until then, I imagine we’ll see a lot of button-heavy, unimaginative, but functional interfaces.
anthropocentric said:
Great ideas.
When you reveal the controls in “the gutter”, why completely shift the web page left? Very disorienting. Why not just overlay the controls “above” the web page – maybe even with some transparency.
AND, why a giant strip? Why not just a short strip – only the height required.
For discoverability, add a super-transparent-almost-not-noticable icon in the lower-right hand corner of the screen, at all times. When tapped, reveal the controls. The very first times someone runs the web browser (until they say “STOP DOING THIS”), “pulsate” this icon by changing its color or increasing its opacity. When the user taps it, explain what it is.
Sachin said:
Good insight in to the negatives….but I must say that the positives outweigh the negatives.
Tom said:
Just curious how you made this video. It’s a great hi-fi prototype demo.
Thanks.
Rich Ziade said:
@anthropocentric – All very good suggestions.
Rich Ziade said:
@Tom – It was far more painful than it looks. It’s a bunch of trickery with Photoshop, Illustrator and Camtasia Studio 7. The secret is to do a lot of slight-of-hand editing and transitions.
Diego A. Peralta said:
Its a really good idea!
Usability: +1!
Dan said:
I’m surprised that I haven’t seen Reeder for iPad mentioned in the post or the comments.
Reeder uses an edge based UI with all controls running along the left hand edge of the window, instead of the top or bottom. it is not hidden away so it is discoverable. The controls are placed such that they are easy for your thumb to reach when holding the device naturally.
This thin side ribbon uses very little screen space and is one of the best iPad interaction models I have seen. I would love for more apps to move to edge controls. An advanced option to hide them would be welcome.
Taylor Gautier said:
In your video, the controls are so *small*. I don’t understand this about iPad user interfaces. We are interacting with it using our fingers and our hands, yet the controls are often 1/2 the size of a fingertip.
If you bring up the history, what’s the problem with having it take the entire window while you are looking at it? It can then just seamlessly slide out of the way – similar to how the iPhone does it.
What the iPad gets right is that we are only ever doing one thing at a time. But it only gets this right at the application level. Applications need to understand this too. What I mean is – there is no reason to have chrome (exactly as you suggest) with lots of little buttons. What we need is user interface that is exactly geared to the task we are doing at the moment. Everything else is just taking up valuable real estate from the task I am currently doing.
What I mean to say is – you are on the right path – great post! But it doesn’t go far enough. I think Reeder for iPad is a very good step in the right direction – look at how minimal the chrome is – and yet totally functional. It still has little icons to tap and I find that annoying. Hopefully the next generation will get rid of this. FlipBook is probably a better example – consider how very little user interface exists in FlipBook. Everything in it’s interface is geared to help you do whatever it is you are doing at the moment, and there is no extraneous stuff left over. And the result is astounding. This is I think the first example of an entirely new computing experience we are about to experience due to the iPad.
Thanks for listening! :)
Leddo said:
In terms of discoverability, I use an app on my mac called Jing. When running, it sits as a little transparent sun in the top right corner, and its not until you hover over it does it do something. It is never obtrusive, just very subtle. This sort of concept would be great for the side bar you talk of.
Really on an ipad, it only needs to be the size of a finger and it could be a touch, hold and drag action to open the sidebar, and a small touch & flick to send it back.
Chris
Joel said:
Interesting article, and some good points. Too bad I can’t watch the video when I am ON an actuals iPad.
George Glass said:
This seems so simple and clean. The Edge Swipe is magnificent!
Jaksen said:
There are millions of great ideas to UI designs, but the problem is not the ideas, it’s the people using them. And with a product like the iPad, you need to design to the middle ground. Maybe the solution is to let the UI learn from your experience and create a dynamic AI interface…
Denny Henke said:
I guess you have not seen icab mobile in fullscreen mode? No chrome and most if the controls moved to the bottom of the screen… Based on what you have written here I think you will really appreciate it.
Chris said:
Yes yes yes. I really get frustrated at my iPad because all the things like this that seem to be so perfectly worked out on the iPhone, are so not thought out on the iPad.
What I ended up doing is paying 99 cents for the Atomic Web Browser – full screen, tabs, and transparent controls. Also 3 finger tap and 2 finger swipe. What a disgrace that i had to go 3rd party for the iPad’s main feature.
By the way, until os 4 comes out, you will need to jailbreak and set the atomic to run always in the background so that it doesn’t reload your pages everytime (like stupid safari does anyway).
Callie said:
Edge swipe doesn’t really work for me – I have a thick case (incase) that stops my finger swiping off the edge of the iPad.
I like the idea of an icon that you can press to make the bar show (as in the Jing post above).