Having been on the development side of things for almost 10 years now, there’s a conversation I’ve heard several times and it goes like this:
“We have a request for feature X”
“Sounds reasonable. Standard X?”
“Yep, should do”
(where X is a shopping cart, search form, login page, etc.)
Alternatively, it’s assumed that because these components are so commonplace that we engineers can pick and choose best practices and build something respectable with little to no guidance.
Seeing software as context-free components leaves so much on the table and it absolutely destroys usability. After all, nearly every interaction is an opportunity for competitive advantage (in the reasonable assumption that your competitors have not done design work) so why throw away a potential differentiator?
Unfortunately this is often the driving force behind many (most?) engineering efforts. In the implementation world it’s terrific and makes business sense, but when it influences the interactions (which it often does) it’s disastrous.
Given the ubiquity of the searching and browsing interfaces for online merchants, let’s take the Altrec product browser as an example, for no particular reason other than I happened to be shopping there today.
First, the positives:
- Generally appealing, especially on the individual product pages. I happen to be a fan of the colour scheme; one shared by Adobe and CNN. I like using the site because of the way it looks and its responsiveness (and its prices :-)
- Obvious links to more information for products with no guessing “Where do I go from here?”
- Ability to choose between grid and list view. Helpful when I care less about extended information and can more easily decide based on appearance. I used this twice today.
- Terrific summaries so I don’t have to dive in to each product for more information. From this page I can see right away that the Zephyr and the Nomad are my likely choices.
What could use improvement from left-to-right, top-to-bottom:
- The category name “Ropes” is repeated. What does “Ropes: Ropes” mean? I’m guessing this is a by-product of their information architecture approach. It’s not going to stop me in my tracks but I did say, “huh?”
- Page browser is shown when there is only one page.
- Inadequate spacing among browse controls. What is the reason for being so miserly with horizontal spacing? Let these components ‘breathe’ a bit, reducing spatial tension. Let’s add 5-7 pixels of padding at least between each, with 13-15 pixels between logical groups.
- Sorting is context-free. I’m browsing ropes, not a group of unrelated widgets. I would like to see “diameter”, “length” and “stretch” for starters.
- “Compare: CHECKED ITEMS” placement: Should be left-aligned over the comparison checkboxes. It’s currently too far away from its playmates and there are no visual cues to relating them apart from having to read and process “Compare: CHECKED ITEMS”.
- The “Compare” label for the “CHECKED ITEMS” button seems to have been done for consistency’s sake (i.e. all components are labeled). This should be a button with no label. I suspect this was attempted but with such crowding it would have suffered from common fate, appearing to be related to the “View” option. Make it a button, move it to the left.
- “Our Price” – whose price would I think Altrec is showing me? Its competitor’s? Remove “Our”.
- “BUY NOW / INFO” is misleading, unnecessary and too much of a visual draw; screaming at you with its fiery red and CAPITALIZATION while you’re trying to read product summaries. It should be removed entirely. You can click on the image and on the product name so no worries on getting product info. It doesn’t add the product to your cart so “BUY NOW” is inaccurate.
- EXCESSIVE CAPITALIZATION – please, stop screaming at me when I’m trying to find something.
“Standard” components need love too! Here’s a quick mockup:
- More breathing room for each individual listing. Same amount of information with less visual crowding through increased spacing and colour combinations.
- Less attention drawn to the brand, more attention drawn to the product. Brand is now placed to the right of the product so that you can more easily scan product names without brands getting in the way.
- More callout of the price, mitigating the need for a label such as “Our Price” or “Price”.
- “Compare Selected” functionality now in close proximity to its playmates (the checkboxes). Relatedness further increased by the use of a consistent background.
C’est tout! There’s still room for improvement (e.g. including prominent product characteristics like diameter and length in the listing), but it’s a Saturday afternoon :-)