3

I am redesigning a bad design (IMO) dashboard which shows a list of form fields related to each "Team", such as

Title, First Name, Last Name

and list goes on. It has total of 18 fields which include a remove button at the end of each row, which can take off each row, if clicked.

On larger desktop, it may seem fine, but on mobile or tablet, it would look really bad. Below is a screen shot of the fields.

How can i make it easy for user to navigate and still feel that each row in connected on mobile devices or any other then desktop?

4

Generally, in mobile applications single element per row i.e., single column is preferred and 2 column can also be used in some cases.


  • Group fields which are related to each other if needed use accordions or tabs or dropdowns or navbar according to the feasibility to navigate among each of them and try to some of the UI elements as mentioned above so that the user needs not to scroll a lot.

  • accordion sample of accordion and the rest are standard UI elements which i guess you can easily find out.
  • What about on desktop as I need a different way to show the screenshot layout. – Nofel Feb 8 '17 at 21:43
  • If you are okay with this layout you can implement the same in web but the results i.e., children of them will come on right side of the screen something similar to left nav bar. By this approach you create a similarity in interactionin web and mobile – uttham Feb 9 '17 at 4:01
1

You might want to take a look at this example for inspiration… https://material.io/devices/

It allows mobile user to swipe horizontally. Just resize you browser window to see the mobile responsive version.

  • I am also looking to make the desktop version more user friendly rather than boring screenshot. – Nofel Feb 8 '17 at 21:42

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.