how i can display this paper on mobile interface

Question

I work on a mobile application. I want to display the document used by the client on his daily work.

I'm looking for a strategy that allows the client to use the interface as the same as it uses paper.

This is my solution:

The solution is to display the first row of the table as a form. When the user clicks the button at the top, another form will be displayed. The problem is that the user is not familiar with the document, and this strategy is far from that solution.

I am looking for another suggessions.

Answer 1

You will not be able to directly translate your current form to mobile since you're dealing with a smaller screen estate. You'll need to condense the form to maximise usability and experience. One way to do that is to mimic the reading order your user would normally follow and represent it in a vertical manner.

Unfortunately I cannot read the form and I don't know what it's for, so I am not sure if I'm understanding the form properly... but this is what I'd do:

You can place a button underneath the last panel to add more panels with the same fields. Make sure to add an option to remove them as well if you do.

Essentially, translate anything that needs a short input or string (like names, dates) to an input field. Choice with multiple selected options to a checkbox, choice with only one option selected to a radio button. Cluster fields that belong together in panels. If your user needs to leave a longer remark, give them a bigger input box.