16

I am developing a site which has a component which is optimized for desktop or big view-ports, and tells users to use the "Tablet in landscape mode". When not on mobile, a message saying "Use tablet or phone" is shown. The text is fine but I am unable to put something that can visually tell a person to rotate the tablet.

What is the most efficient way to tell the user to use the tablet in landscape orientation?

Improve this question
7
  • 6
    Why not just display the screen in landscape mode? People will turn the device to see it correctly.
    – Ken Mohnkern
    Oct 5, 2017 at 13:48
  • 1
    @KenMohnkern I must be misunderstanding something, the orientation of a web browser app is controllable via website code such as Javascript?
    – MonkeyZeus
    Oct 5, 2017 at 16:43
  • 4
    Wait, I'm confused. You said the site is optimized for big viewports but if the user isn't on mobile, you display a message forcing them to switch? What's the point of that?
    – Chase Sandmann
    Oct 5, 2017 at 22:28
  • 1
    cardsagainsthumanity.com has a very clear way to let people know. Just vistit the site, bring up Firebug with F12, turn on Device emulation with Shift+Ctrl+M, choose any phone from the list and click the Rotate-icon.
    – iHaveacomputer
    Oct 6, 2017 at 0:27
  • 1
    @MonkeyZeus: You don't need to control the orientation of the web browser app. Just use CSS to flow the page 90 degrees rotated if JS detects that the screen is taller than it is wide.
    – R.. GitHub STOP HELPING ICE
    Oct 6, 2017 at 2:22

4 Answers 4

Reset to default
21

In many sports apps when you check the standings table you only get limited data (such as no. of games, points) and when you want to see all columns (no. of goals, wins, etc.) you need to rotate the screen to landscape mode. Multiple times I've seen a solution like in the UEFA European qualifiers app - a logo with an explanatory text above or below the table.

UEFA European Qualifiers app

If the rotation is a must, i.e. you can't show some subset of data in the portrait mode, try to implement the solution as mentioned in this question. I've also seen this solution a couple of times and I liked it.

Regarding the icon - here are many examples for inspiration.

Improve this answer
36

By using text + image. You can use something like this: enter image description here

Bonus points for adding a subtle animation that catches even more attention.

Improve this answer
4
  • 1
    I like the image, where can I get like these as mine are opposite, from portrait to landscape.
    – localhost
    Oct 5, 2017 at 9:18
  • The camera software on my OP3 shows something similar when I hold it in portrait mode.
    – Pieter De Bie
    Oct 5, 2017 at 12:31
  • 4
    @Nofel Draw it yourself in Illustrator and/or check google for free icon resources.
    – Pectoralis Major
    Oct 5, 2017 at 12:51
  • 7
    The text should have better color contrast.
    – bjb568
    Oct 6, 2017 at 15:50
-1

On facebook there is small camera icon with rotation symbols around it that animates slightly in the top left of a video. It is an affordance that suggests the user change orientation. This is a good method as it doesn't interrupt the user

enter image description here

Improve this answer
6
  • 31
    A very similar looking icon is already used by many camera apps for a different purpose though: It's the button that switches between front and back camera.
    – kapex
    Oct 5, 2017 at 12:32
  • I know and its not this exact icon, which doesnt help you much. Its two up down arrows either side of the camera icon. Will change ASAP
    – colmcq
    Oct 5, 2017 at 13:02
  • something like that
    – colmcq
    Oct 5, 2017 at 13:04
  • Based on particular arrows symbol used (sync) after you edited your answer, I would read the symbol as "synchronize photos". Also, camera symbol means photos and not mobile device.
    – miroxlav
    Oct 5, 2017 at 22:39
  • its not the right icon, its only my approximation. The real icon doesn't convey what you said. I'll try and re-do it
    – colmcq
    Oct 6, 2017 at 8:09
-2

Never do this, all it's going to get someone to do is uninstall your app. Relayout your data to show it in portrait mode.

Improve this answer
7
  • 5
    How does a prompt to flip the device into landscape mode make people uninstall? If it's completely useless on the device I would understand that.
    – Wendy Wojenka
    Oct 5, 2017 at 12:42
  • 3
    This doesn't mention uninstalling though. There are cases where demanding users to use landscape mode is easier to accept, like games. The best would of course be to support both modes.
    – Wendy Wojenka
    Oct 5, 2017 at 13:00
  • 3
    @adfasdfasdf Additionally, that source is incredibly presumptuous--it's using only data collected by "minimaxir.com" and generalizing it under the header of "Almost every smartphone and tablet browses the web in portrait mode". I would imagine that, for example, people browsing photography websites (where images are more often wider than they are tall), or video services might behave differently. JaroslavM's example is a great one--landscape is the best experience in that case. Showing all that data in portrait would reduce scannability.
    – maxathousand
    Oct 5, 2017 at 13:18
  • 3
    While the claim of users uninstalling is disputable (most users are pretty indifferent) I agree it's generally a bad thing to force the user or even tell him to do this or that when it's clearly not the user's preference. This is akin to the millions of piss-poor fixed width website designs, including, as it happens, this site's design, which uses an entire 640 pixels width on a 3840 pixel screen for the actual content. Just... don't... do... that.
    – Damon
    Oct 6, 2017 at 7:49
  • 3
    @Damon there's no sensible reason to stretch the width of a website like SO to more than 1000 px, it would just make the layout ridiculous. If you have such a big monitor, good for you, get yourself a nice tiling window manager to fill it with other stuff. That said, I agree that fixed width designs are poor; a website should expand and particularly shrink to any reasonable size requested.
    – leftaroundabout
    Oct 6, 2017 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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