Balancing Creativity & Convention In Web Design

By OrlaMcGrath

19.04.2016

  • You can’t afford to ignore established conventions in the process of creating amazing online experiences
  • First establish a functional layout that facilitates a frictionless user journey
  • And when you still feel like pushing the boundaries test your ideas first!

Designing for ease of use (user interface design or UI) and for customer engagement (customer experience design or CX) are both essential to creating a highly converting website.

For consumer engagement it is important to create an emotional connection with your customers through your unique brand personality.

Key to understanding this is in unlocking your value proposition for your customers because they will ask:

  • Who are you?
  • How will you improve my life?
  • Why should I buy from you as opposed to your competitors?

Design can be used in clever ways to communicate and enhance these key points. As an example, let’s look at Amazon. Despite the fact it’s operating in an increasingly competitive and sophisticated marketplace, Amazon has resisted a dramatic redesign. The site is supremely functional and familiar. Why is that?

Amazon is aware that revolutionising any area of its website risks making shopping more difficult for their loyal customer base. Amazon also doesn’t want its customers to make the mental connection between an “all singing all dancing” site design and the added cost that would inevitably pass on to them. Amazon’s value proposition is low cost and convenience. It is a one stop shop that avoids the bells and whistles and we shop there in full awareness of this trade off. That is part of its brand personality.

By contrast, Finery, an inspiring new fashion brand for women, works hard to establish its personality in a crowded market. From a bold, minimalist graphic style, to the use of unconventional models to display the clothes, Finery is engaging the user with every pixel.

But what Finery also understands is that, while a strong personality is beneficial, a unique user experience is dangerous. It will frustrate users and distract from the website’s core objective, leaving people confused about how to get the basic information they need.

Therefore, the challenge is communicating your unique brand personality within the boundaries of established conventions.

So, how do we go about this?
First and foremost, the basic layout of your website should be familiar to users. We can’t afford to ignore established conventions in the process of creating amazing experiences. You don’t want anyone to have to think too hard about where to find common elements because it increases the cognitive load of the site and distracts the user from the task you would like them to complete.

Useful website conventions:

  • Logos and company name are typically placed top left
  • Log in and the shopping cart are located top right
  • Navigation is at the top of the page
  • There is a footer at the bottom of the page
  • Links should look like links, buttons should look like buttons, and hyperlinks should be underlined to avoid minesweeping
  • There is a clearly visible search facility at the top of the page

Basic elements like navigation, search and the placement of your call to action (CTA) should focus first on usability before design aesthetic. This is why design best practice begins with a wireframe to make room for focusing on layout. Once a functional layout that facilitates a frictionless user journey is established, the designers can begin to flex their creative muscles.

Using icons
Icons are a simple, effective way to draw users into the content of your website.

  • They create a visual shorthand that can be interpreted at a glance
  • They do not need to be translated for international users
  • They are easy to tap on touch screen devices

However, universally recognised icons (such as the magnifying glass symbolising search and the hamburger icon that represents a hidden menu) are very rare.

To overcome any possibility of misinterpretation, your icons need to be tangible and familiar, and relate closely to the content that they are accenting. If they are not an established convention, you should consider using a supplemental text link to clarify their meaning in context.

I would go as far as to advise that even if you are using a standard icon it would be safer to use a text label as well, and these labels should be visible at all times (don’t rely on hover or tool tips as this won’t work on touch devices).

Pushing the boundaries
New conventions are being established every day. For example, as mobile has overtaken desktop as the top converting device for ecommerce sites1, it’s becoming more commonplace for sites to opt for scrolling instead of linking as a means to display content, especially on the home page.

At some point, all of today’s recognised design conventions were new. But establishing a convention takes time; so design innovation must demonstrate a significant improvement over established convention to become a paradigm shift. And before you implement something based solely on opinion, it should be rigorously tested.

And while new conventions are taking hold, established ideas are being debunked by research. A rotating carousel at the top of a homepage has been a common feature for many years, but recent conversion optimization research2 shows that carousels are a distraction, preventing the user’s eye from settling and stopping them achieving their goal. I’d like to be proven wrong, but I’m yet to see a carousel that works.

My best advice is to never assume that established conventions are the best user experience. Be prepared to test them within the unique context of your site and your visitors.

The delicate balancing act of creating websites that are at the same time functional and have a distinct personality is at the heart of UI and UX design. At Endless Gain, our goal is to make websites that are efficient at both converting your visitors into customers and engaging them at an emotional level so they become loyal customers and advocates, without one compromising the other. And if you still feel like pushing the boundaries we will help you test your ideas first! 

References

1 “Online shopping on mobiles overtakes desktop for first time”, The Guardian.

2 “Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility”, Nielsen Norman Group.

OrlaMcGrath


Our Clients