2

I have a visual problem that breaks usability in my opinion.

I'm using Twitter's Bootstrap V.3 and I have a web form.

I must show a table with this information:

City, Address, Latitude, Longitude, TextField, Tels

Tels can be more than a value (my JavaScript manages that) and the TextField commonly has a number of characters that is approximately 85 (can be more, can be less)...

It is visually acceptable to append rows one below another (in desktop view), but on smartphones or tablets is really bad.

What is the best way to achieve this?

Improve this question
3
  • 2
    There is no more cowardly attitude than one who votes negatively on a question and does not leave a constructive comment. It is a despot action.
    – alessadro
    Jul 8 '17 at 15:11
  • compensated the downvote with an upvote :P You can nest the rows and can make it collapsable-expandable on tapping the relevant icon. If you are making a data driven design and contains charts and/or complex tables on the whole platform then you can launch the desktop view on the mobile. It will not provide the pleasant experience but will not provide bad UX for sure. Pinch in - pinch out will work fine but consider it as a last option. @alessadro
    – Sanshizm
    Jul 9 '17 at 5:27
  • Thanks, my design is not complex, is a simple form, the only bad is that have that table. Please, could you show me an example of what are you saying? Thanks!
    – alessadro
    Jul 9 '17 at 14:55
2

See this few examples below. Different approaches to table presentation in mobile context.

  1. First on top represents swipeable columns in mobile view.
  2. Second screen refers to few-columns-in-one-column approach :)
  3. Third one in an example of collapsable / expandable menu which can be helpful in combination with example nr 2.

Inspired by Wikipedia, Atlassian Confluance and others.

Atlassian Confluance - Swipeable columns

Nested columns

Wikipedia - Collapsable / Expandable

Improve this answer

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.