eBusinessBlog.org Leveraging marketing & technology to solve business problems.

Online designers and agencies not quite shaking “print” mentality with web interfaces

A trend I've been seeing more of lately on websites is taking usability a step backwards by reverting to old tactics that sacrifice usability in order to retain the "design aesthetic."

Above (via the Ford website): How is reading this much copy in a small, scrollable area convenient or easy for online shoppers?

This mentality reminds me of the early days of web development where print designers tried to make the transition to designing for the web without understanding the constraints and ways to leverage the web medium for interface design. A design would be done, printed and viewed for approval, and then the content would be crammed in to fit with the design aesthetic. This is not how the web works! Users scroll, websites offer interactive features, and there are ways to expand design templates elegantly.

Concern over "below the fold" syndrome

There's a valid concern that content appearing "below the fold" (below the initially viewable area in the browser without scrolling) on a website is not seen and not clicked on as often. Usability and eye-tracking studies have proven this. However, in the below full-screen example, we've done a disservice to the end-user by putting copy into such a small, scrollable area that it renders it rather useless:

This is a case where the template design fails to accommodate the content on the site. When the template doesn't work for the content, it results in usability issues. When you have supplemental content to display in an interface on a website, it's best to leverage the benefits of the interactive medium. See the below example in our product configurator:

Above: Here we have more information available to further explain these options. So as to not overwhelm the end-user, we don't want to always display all content on screen so we give them the option to "learn more."

Above: After clicking "learn more," we use an animation to give the effect that the "learn more" text is extending the length of the "inside mount" option. This is a much more elegant and user-friendly way of retaining the design aesthetic while maintaining the usability of the site. See it in action anywhere you see the "learn more" link.

Voice of the consumer should prevail

These design deficiencies really should get flushed out with "best practices" documentation and usability testing and the voice of the consumer or end-user should prevail. While its tempting for online product managers to create aesthetically-pleasing sites, this can't get in the way of the usability and the reason why the consumer is visiting your site in the first place - for information to purchase. Impede their research and they'll quickly be on another website looking at competitive products.