Mobile Form + Master/Detail list

Question

I'm currently working on an automotive review app which I have to display all the information related to the review in only one context. The review structure is based on a form of 4 fields and a list of sections in which each section item can be detailed (please see the image below). In terms of a mobile app, what is the recommended structure? I've been thinking on split up the automotive review into 3 tabs, but since the 2 lists are not in the same "information level", this does not sound the best approach for me.

Answer 1

For a very small amount of detail information, the standard way to display details would be to have a + beside "Interior", which when clicked slides down to display the extra details.

For larger amounts of information you will probably want to have an arrow (pointing off screen to indicate another screen is available) beside "interior", which takes you to a seperate details screen when clicked.

EDIT:

For linking "General" to "Categories", you need some kind of affordance indicating that the user is leaving the overview and looking at more advanced / detailed options. A common way to represent this is with ellipsis.

An ellipsis works well because it’s a common mark used in the english language for omissions and unfinished thoughts. At a cognitive level, users will understand an ellipsis affordance to mean that there are more options available to complete the task that aren’t yet displayed. The ellipsis tells users that the action is not immediate. This allows users to click a button or menu selection to explore the different options behind it. Without ellipsis affordances, users will assume that every action and selection is immediate when every one is not.

Full article here.

You could have a button at the bottom of the general screen that says "Advanced...", or "Details...", or "Categories..."

Answer 2

Wheat ever you are doing is a right approach. This will be a guided approach. With some small improvements you can enhance the user interaction.

1. A back button with previous page label
2. I see a save button on every page and in the header, doesn't your use case require a save button? if required it should be placed in the page where user has taken a decision and changed the properties. Look at the my proposal in the attached image.