0

Imagine a mobile app where the main screen shows a cartoon of a person. If you click on the cartoon shirt, it takes you to a screen with shirt options; you pick one, hit the back button, and find yourself back at the main screen with the cartoon updated with the selected shirt. Similar screens exist for pants, shoes, etc. - each one brings up a single data entry page and the back button takes you back to the main page. Easy enough, and fits the "recommended" UI paradigm.

But now imagine that when you click on hair, there are so many options that they don't all fit on one page. So you click on hair and it shows hair page 1 (decade). Once you've picked the decade, you ... click Next? and it takes you to hair page 2 (styles popular in that decade). Once you've filled in those options, you ... click Save? Hit the back button twice?

Hitting the back button twice seems exceedingly non-intuitive, but if I add a Save button to hair page 2, that means that hair works in a completely different paradigm from pants and shirt, and my users will now be looking for the Save button there too. I could add a Save button everywhere, but that doesn't seem to be the "mobile way".

Is there a good example of a way to implement multi-page data entry on a mobile device?

  • The flaw in this entire idea is that you let people select a shirt when pressing "back". You should have 2 buttons, one saying back, letting them go back without picking a new shirt, and one saying save, or select or what ever term, to let them pick the item they have selected. I've never seen a UI where you can select an option and have it saved when you press a back-button, back always means "go back without making changes". – MJB Sep 28 '16 at 8:27
  • If you want just the single back-button, you should make it so that when one selects an item, it is chosen and navigates you back to the main screen, including the new shirt. Just don't use the back-button to make someone save their chosen item. – MJB Sep 28 '16 at 8:28
1

Provide a save button for the user to confirm their selection on all the 'final' selection screens. Upon clicking the save button automatically take the user back to the main screen.

1

Instead of making a selection and then having to go back, just automatically take the user back to the screen you want. In most cases, once a user has made a selection they want to see it in action...

Here's an idea. Make it such that they go to the menu of options, in this case: "hair", and have them tap on it. Once they tap on a hair choice, bring up an avatar of the character wearing the style the user picked in a popup box. (This helps them decide they want it or not before they commit to anything) Maybe make them spin/move/animate and provide them with a choice, "select" or "cancel".

If they hit select, it takes them to the main screen where they began creation, if cancel, it takes them back to the menu.

This way no matter how many levels deep they must traverse in your menu hierarchy, the flow stays the same and you don't have to worry about special circumstances such as the issue your faced with now.

Best of luck!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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