Highlighing to user the next possible actions available to them

Question

Once a user has carried out a search on my mobile app they are presented with a list of offers.

At this stage (3rd screen), the user can either:

1) accept ONE of the on-screen offers

2) carry out another search using different parameters

I don't think the third picture clearly tells the user what is expected of them next. How would I best:

• Indicate to the user that they need to select only ONE of the offers. Currently they just need to tap on the item and it will take them to a new screen. But I don't think it is clear enough to the novice.

• Indicate to the user that they can carry out another search, if they are not happy with the offers presented.

• I think the positioning of the 4 offers section in the third screen above clashes with the rest of the UI (it looks a bit busy). How would I best declutter the screen and make it easier for the user to select the offer that they want?

Update - 08/08/2-15

This is the full flow:

Answer 1

Guide the workflow better

Observations

• There is too much information on the screen. The SEARCH and DETAILS panels persist and clutter the user's flow at the top. This makes scrolling awkward, and it's easy for the user to feel overwhelmed with choices because of the number of widgets on screen.

• Fundamentally you are using a very linear workflow. The perfect pattern for this is a wizard, which guides the user clearly through the process.

• Wizards can also allow users to go back to change their choices.

Wizard design

Here's a flow which uses progressive disclosure to guide users clearly and simply through the workflow, minimizing the number of onscreen components while providing (optional) breadcrumb navigation in the subheader bar to allow users to go back at any time.

In each screen the next step is clearly indicated with large blue buttons, so the user immediately knows what to do next.

There will be some adjustments needed:

• For the loading screen I'd recommend switching to the results (last) panel and having a loading throbber before the results fade in. This gives users a sense of forward progress and allows them to go back to details while waiting, if they decide to change their search.

• The start-over button on the last page may need to be docked if there are a lot of results typically.

• etc. this is only a sketch.

Answer 2

I'll get this out of the way since it relates to my answer below... From what I can tell, the "GO" button is used to submit a search. Is there any way of consolidating the search submit button into the search area? This would allow you to appropriate that button into a "Select offer" button described below...

Select an offer

If you change the "GO" button to a "Select offer", it gives the user a call to action as well as a confirmation message. The button can appear after the user selects an offer.

Change the right caret icon on each offer into a more info icon. This will free up the rest of the tappable area for the user to select/highlight the offer (whereupon the "Select offer" button would contextually appear).

Also, instead of the offer count (i.e "4 offers"), it may help to use a descriptive heading such as "Select an offer below".

Search again

I think naturally, people will try other search terms if they don't get the results they want. As long as the search bar is static, users will be able to repeat the process they just performed. Also, give the users an easy way to clear out the search field to encourage searching again.

Interface

The interface doesn't look too cluttered to me, but assuming the detail dropdown is related to the search, you may try showing the detail dropdown options only when the search box is active. Therefore, when the user is not in search mode, they only see a search bar. Once the user chooses to search for offers, they are presented with relevant filter options.

Answer 3

At third screen the user expect something Solid rather than giving them more options to search. So you can either display only resulted data and search criteria,so that screen will be cluttered .