How to manage long horizontal form

Question

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 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?

Answer 1

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 and the rest are standard UI elements which i guess you can easily find out.

Answer 2

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.