0

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: Homepage

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

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

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.

Possible solution

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.

2 Answers 2

2

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"
4
  • 1
    Thanks for the quick response. I like some of your suggestions but others are not possible. When users click an image it brings up a light box gallery and I don't want to remove that functionality. I think the 'You have X "Starred" items' idea could work. I might make that part of the message at the top. If I do implement the solution in my post I'll be sure to give it more contrast so users can't miss it. Aug 18, 2016 at 21:07
  • 2
    Without prior explanation, I also think the star has the wrong connotations... it says "I like" or "favourite" and doesn't come across as an alternative to a checkbox. While a "real" checkbox to one side may spoil the layout, chaining the star image to one of a checkbox may help.
    – TripeHound
    Aug 19, 2016 at 12:49
  • @FrankVisaggio I'm marking this answer as accepted but I'm still looking for more suggestions if anyone has any. Aug 19, 2016 at 20:28
  • Around 8 I'll throw a mockup In here Aug 19, 2016 at 20:29
1

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.

1
  • Ah, the tour idea is great! I'll see how adding the stars to the upper left corner works. Aug 19, 2016 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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