I wonder if using frames with vertical scrolling for product display and selection is a no-no from the usability standpoint or is it OK? Here is a wireframe where our designer suggests this solution http://wordofbuzz.com/wyf/SunTouch_Mats.html

example wireframe

Although in the above example the frames seem to make sense - I personally get a bit nervous when I work with sites that have product descriptions or other info implemented like that - you want to scroll the page and it scrolls inside the frame or vice versa you want to scroll the frame and it scrolls the entire page.

  • It seems all-in-one-page site pushes you to frames. Actually it could be better to re-design the site. Nov 3, 2013 at 20:45
  • Thanks Alex! - it's not a site but a landing page for PPC - so everything needs to happen on one page ideally. There is a traditional ecommerce site behind that landing page with a conventional display for products/categories but it doesn't make it clear how to select/buy the right product (the nature of the product requires that you know a few specific things about your project before you can buy the right one that would fit - right now people are just calling for help or bailing)
    – Mark
    Nov 3, 2013 at 21:28
  • What is the maximum number of items that'll appear in the scrollable table?
    – JonW
    Nov 3, 2013 at 21:47
  • Jon, the total number of items for the 1st tab is 30 - i think those tabs in the wireframe have the exact products that will be showing live. There won't be any more
    – Mark
    Nov 3, 2013 at 22:27
  • 1
    Are you talking about literal frames (HTML elements)? Or just scrollable areas of content? The former is typically never a great idea. The latter can work, but your big hurdle there is usability on touch screens.
    – DA01
    Nov 4, 2013 at 5:51

1 Answer 1


Users spend 80% of their time looking at information above a page fold (see "Scrolling and Attention"). But somehow they need to pick the right product. So instead of thinking of this pattern as generally "good" or "bad" ask instead, "How can I get the customer to pick the right product the fastest?"

A pattern based on questions

If you were in a brick and mortar store and they wanted to purchase a mat, you could start out by asking "what size area do you need to heat?" In the UI this could translate to a dropdown list with the different sizes. After that they would need to pick the wattage. And so on. This pattern is called "Cascading Lists". This helps eliminate the noise of products for which they're not interested.

A pattern based on browsing

However, customers might want to browse and see what they can get based on the price instead of specifying a heating area. Another pattern is "Active Filtering". This pattern supplements the list you provide while minimizing how often users should spend scrolling.

To summarize

To answer your question, this could be confusing but not a deal breaker. I think the more important issue is figuring out a pattern to get them to the right item without relying on them to scroll and find it in a list.

  • Thank you so much Jonathan - this is awesome info! Very educational and makes absolute sense.
    – Mark
    Nov 8, 2013 at 3:12
  • Our earlier wireframe for a similar product included some of the items you re talking about but we had limitations in the way we could implement it and had to go that other route. wordofbuzz.com/wyf/Kits_4.html Thanks a lot again for the great info!
    – Mark
    Nov 8, 2013 at 3:14
  • @Mark Glad to hear - your new wireframe looks much improved. Nov 8, 2013 at 12:21

Your Answer

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

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