Best way to indicate for user to make selections

Question

I need to make it clear as day in as little space as possible that users should make selections then press 'Get a Quote'. Here's my design-

Users open to this screen:

They click the stars to mark the pieces they're interested in. The star gets filled in for pieces they select and the number on the 'Get a Quote' button goes up.

Users can see how many pieces they have selected and choose to send that information at any time.

I want users to know intuitively how to do this without explaining it in too much detail. I think it's pretty straight forward but unless someone scrolls over the tooltip or tries to go to 'Get a Quote' they may not know that you can make selections at all.

Here's a possible solution I came up with but I don't think it explains the idea well enough. A text block on the carousel at the top of the page could tell users to make selections. The image of the star may be enough for them to realize that that's how they make selections.

I'm looking for ideas to refine my solution and make it as clear as possible or any other ways to make this all work.

Apologies for the wall of images but I think it's the best way to describe my problem.

Answer 1

I think the verbiage "Select one or more of the following" and then at the bottom of the set of selects a button that says Get a Quote. I would modify your example to allow them to click anywhere in the image to toggle the selection state. Also you may want to put a hover state over the star that incades selected. And dont put anything else around it so the flow naturally progresses to the bottom right or to that button.

if you have multiple buttons make the other ones that dont complete the action a light shade and the completion one a darker shade of the same color to show completion. I will throw up some mockups once I get a chance later.

One issue I can see is your instructions seem to blend in with the background I would put a lighter background or shadow around them to bring them to the users field of vision first.

One problem I see is that the Star icon doesnt 100% mean your selecting these for a quote. Ways to mitigate this may involve the following (still trying to think of a better example)

• At the bottom say you have 5 "starred" items, and then put get a quote to the right. Use the star icon instead of the word "starred"
  • You could add a radio button and to the right put a Selected for a quote, but that takes up too much space
  • adding a hover state to the star allows one be informed that "This item is starred for your current quote"

Answer 2

I agree with Frank's feedback (but can't comment yet...) in addition I you could create a 'Walkthrough' set of tooltips for when you perceive it's the users first visit, so highlighting the steps needed as they make them. This is one of the onboarding techniques designed to introduce someone to your solution.

Also I would connect the 'added' message to the quote indicator so the two are more visually linked as they are in the actual process.

I would also make the star's clearer so the user can make a quicker visual glance to check what is selected on the page. They currently lack visual weight against the images. Maybe add them to an image corner or separate them from the art piece copy, similar to a gallery red dot.