I have an iPad and a TouchPad. I also had a Samsung Galaxy Tab for a week but didn’t find Honeycomb good enough to warrant a permanent spot in my collection.
One thing that strikes me is how awkward tablet browser interfaces seem to be.
Stretch Armstrong can go back without moving his hands. You and me, not so much.
What the tablet makers have done is take the exact same browser paradigm popular on desktops (with Honeycomb even going so far as to bring desktop browser tabs) and shoehorn it into a tablet screen. Since all the buttons are not within the range of where the fingers are, the user has to move their hand from where it was naturally and extend it up to hit the buttons. Instinctively, this just doesn’t feel right. I’ve tried to break this down into more definable reasons:
- Economy of movement is good, and the tablet browser as is does not minimize movement well. The less a user has to move to do something, the better. All the more so on a touchscreen, which requires more movement to get from point A to point B (it’s a 1:1 ratio of movement in life to movement on the screen, whereas a mouse/trackpad amplifies the movements you make in a few inches of space to cover a much larger screen). While it may require an inch or so of movement to flick a PC’s cursor 6 inches up to the back button, it requires the full 6 inches of movement for your finger on a tablet. Bad.
- Unlike desktops (or even laptops), the hands are not just used for interacting with a tablet; they’re also used for holding it and supporting its weight. If the user has to move their hand to do something, they have to shift how they are holding the tablet every time they need to use one of the browser’s buttons. Bad.
- Accuracy suffers. Pick a key on your keyboard and try hitting it with your wrists resting on the hand rests. Now lift your entire arm and try zooming into it with your finger. It’s not difficult (unless you’ve been hanging out with Jack Daniels), but it does take somewhat more effort than the former. I think this is because when your wrist is stable, you only have to move your fingers whereas you have to use your entire upper arm for the latter, which involves more “moving parts” and takes more effort to get the same level of accuracy. Bad.
John vs. Internet 
What about moving the browser controls to the lower sides of the tablet? Sort of like having a split keyboard? Some of the controls on the lower left and some on the lower right? Like right next to where your thumbs are in the picture above?
Paul, that was my first thought as well. I brought a similar controls-to-the-bottom ideas to my colleagues in the webOS UI team (btw they’re incredibly smart and talented, as you would expect from webOS people 🙂 ) and they pointed out a problem with it that I had not anticipated: because you are holding the tablet with your wrists at the bottom, occasionally the wrist gets too close to the touchscreen and triggers the screen to do things. when they fundamental functions are down there, that creates a particular problem.
That said I’d love a split keyboard, and think some kind of split-nav chrome solution at the bottom could be possible, especially when put together with cringer63’s suggestion on translucent trigger elements.
side bar(s) or a bottom bar with the controls seems like the logical things to try. Or, something like a slide/pop out from the side/bottom would work with a semi-translucent icon in the bottom corner to activate it. This would have the added benefit of giving you full screen browsing as well, using you whole screen to see the site you are visiting.
yes, a chrome-less UI has the benefit of more space on the screen for browsing. Slide-outs/popouts actually were not part of the solution I was thinking of, but I like the potential of them now that you mention them. Could you make a mockup of one in action perhaps? Your contributions would be welcome, Mr. Cringer 🙂
I could certainly give it a try, just don’t expect it tonight. I have work to do. 😉
Instead of thinking about buttons on the side, consider buttons in the background exposed with multi touch. For example, the TP browser allows you to pull a page to the sides, then when you release it slings back. At least on this page, the background is gray and nothing. As you pull the page to the side with one thumb then the other thumb can push a freshly exposed button.
For a zoomed in page this might have issues, but new gestures could overcome that. Anyway, implement this while maintaining the UI on top, too.
So do you swipe it to the sides and then it stays that way or do you have to hold it with your finger while using another finger to push the side interface buttons? I think it could be cool if you could swipe it to the side and it would stay for a few seconds
Ok John, I lied. I had the Gimp open for something else so I figured I would have a few minutes of fun. It’s quick and rough. I may have them a little high up as well, but it gives the general idea. From the bottom would work as well. I think the bottom takes up a smaller chunk of the screen when open and allows for the address bar to be bigger. On the side it you need to shrink the address bar and since I still space because I don’t want the address bar TOO small, I made larger control icons as well as a scrolling bookmark list. The trick for size on the side, mostly in landscape, would be keeping it in view when the keyboard is open, even if it slides up like the webpage.
nice! Could you also slide to slide instead of tap? Some people might inadvertently tap it (yes, people are klutzes 🙂 )
Isn’t this what Fusion Garage have tried to overcome with the Grid10 browser it does have some sort of overlay at the bottom I think:
Source:
http://thisismynext.com/2011/08/16/fusion-garage-grid-10-pictures-video-preview/
How do you trigger the overlay?
Tablet browser controls are indeed poorly placed, but I think the situation is made more complicated by the varied ways people hold tablets. You can hold a tablet in two hands, as you diagram (also in landscape mode on 10″ tablets you can’t easily hit buttons in the center bottom, which you can in portrait mode). You can hold a tablet in one hand and use the UI with the other. You can prop it on your lap or a table in something like a “drafting table” configuration.
Yes, there is no universal way to hold a tablet, and for some methods (such as having it on a table in front of you) it’s fine to have the controls at the top. But there should be a better way for when you’re holding it as you would a book or magazine, especially as tablets get lighter and it feels more natural to do so.
Aza Raskin talks about this issue a bit and you can see some concepts he has come up with here (http://www.azarask.in/blog/post/firefox-mobile-concept-video/).
Interesting. Not perfect (as if any UX idea is) but pretty cool stuff. It solves some of the problems I was looking at (it even solves problems I hadn’t thought of yet!) but doesn’t solve all of them. I should meet with this guy. Anyone know him? 🙂
Top is bad.
Side is worse. Too easy to accidentally press controls, and takes up precious real estate (especially when not in landscape mode).
Bottom is even worse. It’s easier for fingers to move up than down. If you’re on a table or dock, your wrists might trigger actions.
What I’d like to see is more like what Cringer suggested, except even less. Even on the 9.7″ TouchPad, screen real estate is as a premium, and I often have to zoom in to read the article/page I’m interested in. On a smaller screen (such as the original Pre), it’s even worse.
What about a disappearing UI? We already use multi-touch for functions, you should be able to figure out a way to bring up the UI in such a way that the user can interact with it, without being inconvenient.
Additionally, if I’m interacting with the UI, there’s a 99.9% chance that I’m done with or do not need to interact with the page itself. I’m either typing in a new URL, moving forward/back, going to another favorite, sharing the page, or changing preferences.
Take what Cringer did, but move the box into the center of the screen and enlarge it to take up about 80% of the real estate (so I can simply tap to one of the sides, top, or bottom to get rid of the UI). If the UI is up, default the cursor into the address bar so I can type without having to select the URL. If I want to do something else instead, I’ll just click on it (which would deselect the address bar), so you can leave the address bar at (or near) the top.
One easy way to balance the novice users from the expert users is to have Cringer’s little button disappear when the page isn’t being interacted with. You could pop it up when the page is being touched (moved, zoom, etc). That way users have a way of interacting with it without having to remember some obscure multi-touch command.
I’m having trouble visualizing. Can you do some mockups a la Cringer?
I started addressing this issue with the Mojo version of incredible! some time ago. The half-circle to the right of the screen (or left, if the user prefers) is your navigation “bar” (wheel, in this case).
http://twitpic.com/6h10wm
Place your thumb down on the wheel and it slides out.
http://twitpic.com/6h115c
Now slide your thumb over to the icon of the action you want to perform. A “tooltip” with the name of the action appears near your thumb so you know you’re on the right action.
http://twitpic.com/6h13pe
Left up your thumb and the action happens, and the wheel slides back to the side.
You never have to lift your thumb up, but because of the way it’s designed, it still works for users that tap the wheel, then tap an icon. Still works the same.
Geoff, you actually got very close to what I’m imagining (which of course to me means it’s awesome 🙂 ) I’ll post it soon. Hopefully tomorrow.
…aaannd a week later, I actually did
So, something like the Emblaze ELSE? That UI did seem to have a lot of potential to me: http://www.viddler.com/explore/engadget/videos/812/
I like it, it is a very clever interface. If you haven’t already you might want to look at their website too. It’s very interesting. They have a lot of very nice concepts such as ‘Silent Communications’, ‘Contextual Reminders’, and ‘Quick Recorder’ to name a few. http://www.firstelse.com
Oh and after doing a quick search I read that one of the UX designer from there now works at Palm (FWIW). http://www.engadget.com/2011/01/21/emblaze-first-else-ux-engineer-embraced-by-hp-palm-magic-ensu/
Pingback: Building a Better Tablet Browser Part II: My Solution | John vs. Internet