Improved user guidance through surface quest

[claudiush]

As a first time user of StreetComplete I found the road surface quest to be a bit hard to understand. I think the quest flow can benefit from a few interaction improvements to guide the user through the flow:

1. After having tapped on the first surface option ("Paved (generic)") the screen should switch to the full screen surface selector view to clarify that the next step is to pick the right subcategory (or just confirm the changes via "OK" at the end of the form). Currently user still needs to scroll down to open the full selector screen
2. After a top surface category (Paved / Unpaved / Ground) has been selected the other categories should be visually tuned out. I suggest applying a black and white filter and decreasing the opacity.
3. After the top surface category has been selected a call to action text should be added to clarify that as a next step the user should pick the subcategory. E.g. "...now select the most fitting subcategory:"
4. After the subcategory has been selected there should be some hint that to complete the quest the user needs to scroll down and hit "OK". I would suggest that the form should scroll all the way down to show the "OK" button.

The following is a mock of suggestions 2 and 3:

[westnordost]

Currently user still needs to scroll down to open the full selector screen

Actually, I tried to implement scrolling down to make the expanded elements visible but failed. Don't know how to. :-(

2. & 3.

Hm I don't know, this is a matter of taste in my opinion.

This will be a generic problem for any such quests whose answer selection takes up the whole screen space and more. So I think this should be solved generically for any quest. I thought about perhaps making the buttons at the bottom floating the scrolling area, OK invisible as long as nothing has been input yet. However, this is something for later versions.

[waldyrious]

How about using a paging feature, like a sideshow, or one of those installers with next/previous buttons?

In fact, using this approach we don't even need to have all the options visible at once, and thus avoid scrolling altogether :)

Here's how it could work: We could have the three main options as small squares side by side, which would fit in the bottom part of the screen, without scrolling; then, when one main option is selected, the page would slide left to give way to the sub-options page, and throughout this process there could be either prev/next links below the images (with the "next" link turning into "finish" or "ok" at the end) or alternatively, small arrows at the left and right borders of the pages (with the right arrow turning into a checkmark at the end).

What do you guys think?

[westnordost]

Ah, iOS style. Well, it is also a valid choice to select one of the "categories". If the view slides into the subpage right away, how can I then just "unpaved"?

[waldyrious]

Maybe one of the sub-options could be "Other" or "Generic"?

[HolgerJeromin]

You could try to put the OK button to the top...

[westnordost]

Oh yeah, that would work@waldyrious