In landscape mode on a smartphone, should the positioning of control elements be based on whether the phone points to the right or left?

Question

Imagine a smartphone application, which has a number of control elements in its top row:

Now, if the user rotates the phone to landscape view, it makes sense to rotate the control elements to make them readable.

However, on which end should the elements be placed?

---

A. The users sees the same thing, regardless whether the phone was rotated clockwise or counterclockwise:

Advantages:

• easier to implement.
• the user always sees the same thing

---

B. The elements are positioned close to the same end of the phone:

Advantages:

• it respects handedness, some users might prefer the elements on the right, others on the left, and they can choose by rotating the phone in the direction they want.
• it has the same distance from the return / home etc., buttons. No matter in which direction did I rotate the phone, I know where the return button is in relation to the on-screen elements.

---

I didn't see this question discussed in the design guides I've read.

Answer 1

Go for consistency, generally, so the user doesn't wonder why the app is showing differently depending on the landscape position (the general expectation is it will not, I presume).

That said, there might be cases when you want to break consistency because keeping it would make the app unusable. Always consider the context, which in this scenario is the device itself. It might be the case that keeping certain elements on the same side of the layout makes the user hold the device in such a way that he presses the volume or lock device buttons accidentally. This will depend on the app, the way it is used, etc. but I think it is something to consider.

Also, you might want to use a different layout if the UI has some kind of relation with the device. For example: if the app indicates the user to look at the camera you could use this to your advantage; or if you want to indicate the user to click a certain button from the device (you would need to deal with different devices though, but this is just a general idea).

Answer 2

What about keeping then in the top row?

^{download bmml source – Wireframes created with Balsamiq Mockups}