5

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

enter image description here

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:

enter image description here

Advantages:

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

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

enter image description here

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.

  • Probably A to keep consistency, but it might depend on the kind of elements and their relation to the actual device. Could you give more context? – Alvaro May 9 '17 at 12:10
  • @Alvaro : I lack experience in this area, and I wondered maybe there are well-used guidelines. What context do you need? About what is on the rest of the screen? I would like to keep the question general, but you can assume that the rest of the screen has lots of interactive elements, not too much unlike a strategy game. – vsz May 9 '17 at 12:26
  • 1
    Like Alvaro, my gut says go with A for consistency (it look the same whichever way you turn it) but consider offering a configuration choice between the two layouts in B for different handedness (or just personal preference). – TripeHound May 9 '17 at 12:55
  • 2
    This type of question is exactly why I love stack exchange. This is not my problem (today), but I'm fascinated to know the responses. – Jeromy French May 9 '17 at 18:22
  • Even though I would like this to be a standard, looking at other apps makes this seem like a poor idea. Would help left handed people to know they can change the positioning of menu's just by rotating a device 180. – Ryan The Leach May 10 '17 at 1:06
2

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).

1

What about keeping then in the top row?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 4
    It would be the most similar to the portrait layout -- and is often used -- but can eat into to much of the reduced vertical space in some applications. – TripeHound May 9 '17 at 12:56
  • 2
    Too limited vertical space was my main concern why I didn't take this approach. – vsz May 9 '17 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.