1

I have doubt on my design related to thumbnail gallery wizard. Wizard has few pages consist of thumbnail images (10 images per page), where each gallery page has a question, and the answer would be to select one of the gallery image to proceed to the next question.On selection, the selected image marked as a circle as in below sketch.

enter image description here I found out my navigation on each page have lacking usability since most of the users had a confusion where to click after selecting the thumbnail image. My navigation buttons are underneath the gallery.I appreciate your expertise comments/feedback/opinion on how to improve this.

Current gallery wizard,

enter image description here

Some suggestions as in below,

  1. Do an auto navigation whenever user selection happened
  2. Make the Navigation buttons on side by side (As in image carousal)

Also, I have doubt on the images,does it need zoom functionality on each image?

  • What is the user trying to achieve by using this wizard? Are they trying to assemble a collection for purchase? – Mike M Oct 12 '17 at 22:38
  • This is online survey to identify users' style (this is basically design to help user to identify what style they are, ex: Modern, Classic, Contemporary, Urban, etc..) This will also a part of online marketing campaign which will provide the better understanding about the users choice based on their style. – NPN Oct 12 '17 at 23:50
3

Be explicit with the selection, so users can focus on what they just selected, and what to do next.

In your current site, there's a lot of graphic elements competing with each other. Right now, the background is the dominant element, with diagonal lines leading off the pages.

The header can also be lost as well.

If you have a say in the visual design, you could desaturate the background when a user selects their choice. (you can do this with css filters)

You can also make the question text stand out a bit more. Right now it's lost in the background.

Make it clear what they just selected by visual focus.

At the same time, you can use labels on the buttons to indicate steps. Currently they look more like a carousel swipe button, which is usually reserved for passively viewing content, not selection like you need for your use case.

enter image description here

By reducing the visual elements upon selection:

  • the user can clearly see their choice
  • the 'Next' button could 'light up', drawing their attention once they select
  • the button label explicitly tells them what to do
  • you could also have an 'unselect' link if you hover over the item to discard the selected chair choice

If you're concerned about visible navigation: an option. This is a just a sketch, but you could also put both the question and navigation in the same header area. You'll just have to try a couple approaches to see if it might help with visibility.

enter image description here

  • Hi Mike, thanks for your detailed explanation. Yes I agreed the background is busy and dominating. Our marketing team push me to use this backgrounds based on their campaign the colours they have used in the magazines should vividly reflect on the backgrounds. De-saturate is good thing I can consider as well as the other points highlighted. Thanks for your answers Mike. – NPN Oct 13 '17 at 2:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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