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?

  • 6
    Why not just display the screen in landscape mode? People will turn the device to see it correctly. – Ken Mohnkern Oct 5 '17 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 '17 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 '17 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 '17 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.. Oct 6 '17 at 2:22
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.

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.

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

  • 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 '17 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 '17 at 13:02
  • something like that – colmcq Oct 5 '17 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 '17 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 '17 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.

  • 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. – Wanda Oct 5 '17 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. – Wanda Oct 5 '17 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 '17 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 '17 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 '17 at 13:15

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.