1

We have a screen which was given to us by a client. As per their module, when the user selects a tab, the page should show options to do certain tasks like create/edit/delete.

One approach we went for is to show Label & buttons of the Action in the tabular format. While implementing it we faced some User Experience issues in the mobile screen as a table is not feasible for every screen for just a two-column layout. Also, a few labels leave a lot of white space on the page. What approach should we go for with this kind of layout?

Image for the current layout wireframe:

enter image description here

Improve this question
2
  • I suggest making the resulting question more concrete. Like "our goal is to show user many options per item on a small screen. What patterns exist solving this specific need?"
    – KMSTR
    May 2, 2020 at 8:16
  • I'm wondering if some of the older questions and answers on this site could help you, e.g. search for "large table mobile"?
    – greenforest
    May 13, 2020 at 8:52

1 Answer 1

Reset to default
1

A better way to group the actions would be to have 3 vertical or horizontal dots for all the actions as shown in the screenshot below. I assume you have used dummy text for the actions, BUT despite that I would definitely urge you to consider which actions are specific to a table row.

  • Perhaps it is not a good idea to have a 'View' action as that can definitely be achieved by clicking on the row.
  • If 'Create' is also an action, then it is definitely for the whole table v/s for each row.

A good read on UX StackExchange: What is the difference between the horizontal three dots menu and the vertical one?)

Action column in a table with horizontal dots

Improve this answer
2
  • Good Idea but It only follows in the table type layout. tablink is not table header, it's just tab buttons to switch between different forms.example : link
    – Dave Rajan
    May 8, 2020 at 11:18
  • "View" Considers in action according to client as user group will be 40-60 Age Group were they unable to find click on a row & All Action should be clearly visible.
    – Dave Rajan
    May 8, 2020 at 11:20

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.