I am in the process of updating an app I have, at the moment if the device is not a tablet it will force the orientation to horizontal mode because the information displayed wouldn't fit on phones (something never really sat too well with me).

I did try and come up with a better layout, but it's not my strong point and I couldn't. Below is an example of the data shown in the app.

enter image description here

UX wise is it better to force orientation change or show all the information on a phone and add a left/right scroll?

  • You've already figured out that a new layout is the correct answer. If you are unable to find it yourself you should seek help from a design consultant. Work for what is best for the user. – Evil Closet Monkey Sep 6 '16 at 1:29

Why not try different layout for portrait and landscape mode.

In landscape mode, keep the current layout as shown in your example.

In portrait mode, change the layout to some kind of multi-row info card. This makes it easier to scroll and still keep the information overview.

Colors and fonts are just an example.

enter image description here

  • Looking more into the max length of the different fields this would (currently) be what the most extreme case would look like. I definitely do need to look more into this before deciding anything. – Howli Sep 6 '16 at 23:07
  • Just remember to not clutter up things to much. My example was built with the aim to make it easy to find the information I need to know at this moment. (Please mark my answer as the correct one if you were satisfied with my answer). – Ilias Bennani Sep 7 '16 at 6:43

Try not to change the orientation as much as possible. Most users will use their phones in one orientation, one-handed portrait mostly. So, changing orientation is a bad choice.

Anyways, I think these articles sum up of the better practices in detail.

  1. https://www.digitalgov.gov/2014/10/28/trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design/
  2. https://css-tricks.com/responsive-data-table-roundup/
  3. http://exisweb.net/responsive-table-plugins-and-patterns

I prefer the scrollable frame. Put the table in a container that has 100% width, then the table inside with defined width. Then use overflow-x: scroll on the container.

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.