4

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.

enter image description here Example of custom picker

enter image description here 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.

enter image description here

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

1 Answer 1

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.

1
  • Thank you James, It makes a lot of sense. Perhaps the distinction also comes when users are allowed to edit only one bit of the object. As in the case of user profile, users can update the password or avatar only, without updating the entire profile.
    – user41234
    Jan 14, 2020 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.