Mobile Form Design Pattern

Question

I am trying to determine which of the following design patterns for user input is most effective and/or recommended when it comes to mobile experience. In our application we have examples of both but no clear guide around which one to use and under which circumstances.

Pattern 1: Includes a list view of properties and their values. The end-user in this case clicks on each list item and the application navigates the user to the relevant page which has a dedicated area for input. This provides the end-user with custom, standard and somewhat generous space for input but obviously breaks the pattern of typical form design.

Example of custom picker

Example of custom text input

Notice that in this pattern the form, for lack of better term, is updated with each input.

Pattern 2: In contrast to the above example, a typical page asking the user for input would include a form. It provides the user with standard controls, that render somewhat inconsistently between Android and iOS, and in some cases (e.g. text area input), somewhat limiting. On the up side, this pattern is familiar to dev. team and is easy to execute.

Notice that in this pattern the form is updated only after the user submits the input all at once.

Answer 1

Both are perfectly valid. It depends more on what data you are collecting and how each piece relates to the other data.

I'd say the first is more useful when the items you are defining only have a loose relation and don't rely on each other. It makes the most sense for a UI where you want to display existing data to the user and allow them to edit it like on myaccount.google.com. I tend to use this pattern for user profile pages for example where allowing all of the data to be modified in place would lead to a cluttered UI.

The second pattern is better for editing related values where most or all of the fields are required to generate a more singular data entity. I'd tend to use this for things like a comment/post where you would want the title, body, and author information to all be linked as one entity.

If all of the data on the page is linked with one entity such as a user profile I would go with the first pattern. If the data is adding another entity to a list of entities such as adding a comment to the comments list an article then I'd go with the second pattern.