3

My client wants users to reach single product pages with one click from the home page. They also want to display products' images already in home page.

The problem is that the product list is huge and single product might be at second or third level of navigation.

This is the products'hierachy:

-> Category
  -> Series
    -> Model

Do you have effective solution to solve this problem? Can you suggest any interaction patterns such as mega drop down menu (I would avoid this pattern if possible) that could help users to easily navigate products' hierarchy in home page?

Non conventional solutions are welcome, just keep in mind that this is a corporate website.

8
  • 4
    Just have the homepage as a large search box with some autocomplete functionality that'll find the product the users are after. Possibly even add some thumbnails into the autocomplete too for good measure. Sorted!
    – JonW
    May 23, 2013 at 8:34
  • What JonW said. Also, typing "Fridge" could suggest "See all our fridge models", as it is often hard to know the exact product name to search for.
    – JOG
    May 23, 2013 at 9:09
  • This is a good hint, but I am afraid that they want to show names and cateogry directly without asking users such an effort. Names are difficult to remember (they produce agricultural vehicles)
    – Giults
    May 23, 2013 at 9:34
  • 5
    Well sometimes what the client wants isn't really going to be possible in a friendly way. You'll have to resort to the mail online approach by shoving everything on the homepage in a big visual mess. You could do that, & then structure the whole rest of the site correctly & easily navigable. Don't forget that the homepage of a site isn't what it used to be - people enter websites from links, search engines etc, not always starting from the homepage. Make the rest of the site work properly & let the client do whatever they want with the homepage.
    – JonW
    May 23, 2013 at 9:38
  • 2
    "My client wants users to reach single product pages with one click from the home page" = clients sometimes ask for things that don't make any sense. Your job as a UX professional is to explain to them why that doesn't make any sense.
    – DA01
    May 23, 2013 at 12:51

2 Answers 2

3

How about proposing a compromise like a featured or popular product feed? You could offer users visually striking deep links to a few products instead of every product. Those featured items could also include labelling that hints at the category structure and educates the first time visitors.

1
  • Exactly what I was going to suggest! I think this is the best idea. Also, try to avoid dropdowns that go beyond one level, it quickly becomes confusing and physically difficult to navigate.
    – ekinnear
    May 23, 2013 at 17:44
2

As per your comment: ~100 items seems almost managable if you accept scrolling, depending on how much text is necessary (image only, image + title, description).

You could combine a preview (large image, text, description) with a thumbnail gallery, and cheat a bit with mouseovers, like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You have one of these blocks per main cat ("Kitchen"), the thumbnail gallery is grouped by sub category ("fridges", "stoves"). Mouse over an image to show large image + title + description, click for details.

Without mouse over, the large image could cycle through available products (you may want to sync that between the blocks), so they all change at the same time. Order of the big blocks could be randomized per visit or day, determined by promotions or depend on incoming source.


I am still not sure if this is a great idea. A touch interface would require tap to select, and e.g. tap again or double tap for details. It's a lot of information, clutter is hard to avoid. It would desperately lack some empty space. You are fighting scroll vs. image size.

(You could get more cues from image searches. this is probably the easiest way to demonstrate your clients the image size vs. number of items tradeoff. )

It could work for visually appealing products where the images at lease have the same photographic style.

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.