iPad full screen in landscape mode - which side to put on my controls panel?

Question

I have an app which helps the user to design a full screen sized postcard. The result is exactly what the user sees on the screen.

Because a lot of users scan things in an F pattern, I assume that the top and left side of full screen represents the most valuable "real estate". in this case, the postcard title.

This makes me pose the following design question - do I design so that the controls panel is the most obvious part, on the left side screen (easier to find tools the user needs, traditional). OR do I design so that the product's (postcard) top and left side are most easily accessible ( tools panel on the right, as in the screenshot)?

An example of the controls panel on the bottom and right:

Answer 1

As most users are right-handed, placing he panel on the right side seems to be a good choice, because they will not need to move their hand to the far side of the screen (covering the canvas, by the way). Instead, they will have the controls just below their right thumb.

By the way, the F pattern is more valid for scanning content rather than the interface. In case of content scanning, users tend to quickly read headlines and first paragraph(s?), and then just even more quickly they go from top to bottom.

Answer 2

Unlike when designing for a pc, you have to also take a person's hand into account when designing for a touch device.

If you have to choose a single position, given that most people are right handed, and are more than likely going to be using their right hand more than their left, you should place panels on the right. This means that the persons hand will spend the least amount of time obscuring the screen, and will also mean lower hand distance travelled when using the app.

If you have the resources, I would suggest that you make the position selectable (either through an options menu or by having a floating panel) so that left handed people can have the same benefits detailed above.

Answer 3

Consider the following usage styles of the iPad:

• One hand interaction (holding in left/right hand and using other to perform actions)
• Two hand interactions (placing the ipad down on a surface and using both hands to work).
• You can also have something like, holding with both hands and using thumbs to flick, etc.

The main reason is, you want to find a best fit across all the interactions. Ask yourself this question: 'Is my app something which the user will be using while on the move, or will the user be sitting down and focusing on the app?' If you have a clear answer then good, you can go with whatever menu placement you want depending on the answer. If you do not have an answer then look at the pros and cons on a particular position of the menu:

For one handed interactions:

• On the right edge: It is good for right handed users but can be irritating to a left handed user (10-30% of the population).
• On the left edge: Similarly, good for lefties but irritating for righties. (70-90% of the population).
• Bottom edge: equidistant for righties/lefties and closer than the top edge (depending on position of tablet, if upright then same distance)
• Top edge: equidistant for righties/lefties and a bit farther than bottom edge (depending on position of tablet, if upright then same distance)

For two handed interactions:

• Same arguments for all four cases, just the user is not that irritated as both hands are free. Also, flicking the bottom menu panel is easier even when using thumbs alone.

Conclusion: In my view, Bottom edge is the best fit location for a menu.

Also, like JohnGB pointed out, if you can make the menu repositionable, the user can find the most comfortable position for themselves :)

Answer 4

On a desktop, a user can reach anywhere on the screen with his or her mouse pretty easily. This means the value of real estate is almost entirely based on where the user's eyes are most likely to want to go.

However, on mobile devices, the physical aspect of navigating the page, or interacting with the device in any way is huge.

Basically, pick up an ipad or a tablet and really think about where best to place the navigation based on how you would hold the device and interact with it physically. If you don't have a large complex navigation, you'll probably want to keep things pretty simple, and close to whereever their hands will be. It gets pretty tiring to hold an ipad and have to move your arms around a lot.

Not to mention tablets, unlike modern desktop browsers, have relatively small (physically speaking) screens. Almost everything is reasonably in focus at once, unlike a modern desktop where users even slightly have to turn their head to comfortably view one side of the screen vs the other. Hence why it may be less important to place your navigation based on visual hierarchy.