The Labyrinth Effect In Good Looking Designs

Posted in Tips, Web Design2 years ago • Written by 2 Comments

Great designers are always trying to push boundaries, creating and experimenting with new ideas, some of them resulting in revolutionary trendy design types that keep appearing in the constant shifting web design industry. I really like to see those new ideas coming to life considering that most of them are amazingly well designed, however alongside with such positive feedback, like everything in life, there is a great probability of existing a negative and critical side that acts like a turn point limiting great designs to just that… design.

One thing I do every day is save 30 to 45 minutes to check my favourite design galleries. After a long time analyzing and creating designs, I came to the conclusion that when you push too hard trying to revolutionize your layout, you eventually forget about the end-user. But believe me…”that guy” must be your number one concern. If you’re going to invest your time building a completely innovative design, please do yourself a favour and do not forget about structure and usability.

Below I’ll give a list with tips and examples of pages which I consider suffering from the labyrinth effect… meaning all of them are greatly designed but usability was not considered as it should. The point of this article is to transmit the idea that design must be just part of the equation.

Labyrinth Effect

It’s tempting to think that a website with a cutting edge look will be enough to reign in the business and call the attention of users and possible clients, however, reality reveals itself to be far more complicated. You need to balance an attractive design with an easy-to-follow user experience.

Every designer should strive to create order and balance within a page which is achieved through a moderated use of the content’s weight. Colors, shape and size gives that weight to an element and when it’s not correctly measured and in a suitable position the web page will look messy and confusing to the end-user. It’s important to say that you can have the most efficient use of white-space and still make the user feel overwhelmed if you don’t prioritize balance and order.

When design is a sky-rocket but you don’t know where to look first, it’s a clear indicator that it suffers from a labyrinth of information that makes the user feel lost and overwhelmed, it suffers from what I call the labyrinth effect.

Examples

Hellow

The Labyrinth Effect

Space o Technologies

Zizzi Ristorante

Zizzi Ristorante

Aussiebbqlegends

Labyrinth Effect

How to avoid

The labyrinth effect is directly related to balance, not only balance associated to each element’s position but also balance associated to quantity and repetition. Like I’ve said above, the overall weight must be correctly measured.

The one rule I consider to be important in order to avoid having an overwhelming design type is to always make use of wireframes. Wireframes are the representation of the website’s content and type of elements (not the design) which can provide you the possibility of testing the overall weight and balance of your page. Although very simple, I’ve gathered a few points that I consider to be of extreme importance.

White-space

It’s not really a surprise is it? As said above, white-space is not bullet proof, but it’s definitely a good start if you plan to have usability as the first concern. Space between elements isa step forward towards better readability, usage and aesthetics. Even if you have too much content, never forget to consider and test several spaces between the different elements in your page.

Balance

There are two important concepts in balance – symmetrical and asymmetrical balance. In symmetrical balance elements have equal weight which leads to the traditional design type, meaning that in asymmetrical balance elements have a different weight. The labyrinth effect tends to appear more often when using symmetrical balance, since elements have equal weight you won’t see a more prominent element to which you will look first.

With the above being said one thing that can clearly help avoid the labyrinth effect is to make good use of order while using symmetrical balance. Since the elements have equal weight, you need to build a hierarchy (most important elements starting from the top) while displaying a low number of elements.

The problem with asymmetrical balance happens when the heavier elements are used in the wrong places. Be sure to place the heavier elements where you would like the user to look first.

Imagery

Although I’m not a big fan of using stock images with people in it, I feel obligated to admit that using that kind of imagery or photography is very efficient when you need to tell the user where to look. Using a person or an animal pointing to a spot on the page will somehow “force” the user to look at it.

Minimalism

There is one style type that will never be a victim in this matter. Minimalism as the word implies makes use of the simplest and fewest elements in order to achieve a greater effect. Less is more and in this case that is an absolute truth.

Minimalism is efficient because it only make use of the most important elements which in most cases represents what the visitor wants to know.

Conclusion

Functionalities only have a purpose if someone uses them and in order to achieve that you must get the attention of your target audience. In most cases that turns out to be an easy task if you have an amazing looking design which captivates the user attention. But don’t fool yourself… If the design compromises usability and user experience you won’t succeed. Always remember to test your layouts as much as possible and with a variety number of different people.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

18 Written ArticlesWebsite

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

2 Comments
  • Wayne

    Friday, November 25th, 2011 13:03

    1

    A really enjoyable read, thank you for sharing with us.

    0
  • Tony

    Saturday, November 26th, 2011 18:37

    2

    The labryinth effect works for some websites but I don’t know…I think it’s a little too busy for my liking

    0
  • Tony

    Saturday, November 26th, 2011 18:37

    2

    The labryinth effect works for some websites but I don’t know…I think it’s a little too busy for my liking

    0
  • Wayne

    Friday, November 25th, 2011 13:03

    1

    A really enjoyable read, thank you for sharing with us.

    0

Comments are closed.

54.196.206.80 - unknown - unknown - US