Multi-page data entry on mobile device (Android and iOS)

Question

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?

Answer 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.

Answer 2

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!!