Guiding User Eye in your Designs Part 2
An important part of effective design, and part of a site’s ability to retain users, is being able to guide the audience’s eye.
Part 2 dives in to more complicated specifics on other ways to guide the user’s eyes while examining some existing designs. Being able to guide our audience and users makes our designs more effective and less stressful to navigate. While this idea and technique is certainly a pivotal aspect in traditional artwork (drawing, painting, etc) we can apply, and you should, to our designs.
In this part we are going to go over space, symmetry and asymmetry, and size as tools that you can use to assist in guiding your user’s eye. If you missed Part 1, give it a read so you can understand some of the guiding principles we will be talking about as well as seeing the first, and perhaps most important, techniques to achieve great user control.
Unlike in the first look; this article will break down some great uses of these techniques. Recognizing why a particular design is effective is an important part about creating one yourself. By looking at clever and effective uses you will see how some designers subtly and naturally control your visual navigation.
Understanding Focal Points
These techniques are a bit more complicated in that they require the use of focal points. Focal points are the driving force to where your eye will move to, land, and then move to again. Part 2’s techniques are more subtle and often times, harder to master, and so therefore don’t have blatant color or value changes to control user eye. A focal point is a central point of attention or interest (according to dictionary.com); this does not mean the central point of your design, but a specific point of attention. All of these techniques and their subsequent designs utilize focal points. So if you are trying to create emphasis on a graphic element, you may make it rather large to create attention and focus: voila, a focal point.
Using Size to Create emphasis
This is perhaps the most obvious, most used, and easiest form of eye guiding. Everyone knows that the larger an object is, typically generates more interest. In fact, you may generate a visual conflict if something is too big. But consider the opposite: When do you see small sizes to create focus? When does something have to be large to generate focus?
This is a showing of guiding user eye using only size. Small to large, the naturally rolls from the small box to the biggest. Great rhythm generated by these boxes. Easy to do and it works; albeit the most basic.
How Symmetry and Asymmetry generate focus and style
We all know what symmetry is and how it can generate harmony. Often times design dictates symmetry, it is a lot about keeping a brand unified. One thing I find most people are unaware of, as well as its uses, is asymmetry: the lack of symmetry.
Yes it is possible to create great weight symmetry through asymmetry. Remember it is about guiding the eye and having a cohesive visual experience that is not stressful.
This is a symmetrical design. Easy, equal weight shape, color, etc. It is a non-threatening design approach, but as you may know by now, I like to push design when possible. We find our eye, more or less, just sits in between these two black squares (focal point in the center of the design). Not dynamic, not engaging, boring. How we use symmetry to create greater flow is with asymmetry.
Asymmetry might seem like a counter-intuitive tactic for creating harmony or rhythm; in fact it works great. Coupled with effective use of negative space and you can have some very engaging pieces of work. Often times correctly using asymmetry can be complicated because you have to balance an artwork that is has some disjointed visual qualities. You can also use asymmetry to keep a design unbalanced that generates a single focus.
This is an effective use of asymmetry; how so? We are using size to create significant interest in the right bottom corner, and without anything else on this plane we would be fixated on this spot. However; notice how your eye bounces to the top left corner and then back to the right corner? This is done by having two focal points that are equally balanced and therefore your eye will move in between these two points. Naturally our eye falls on the largest sphere first, but eventually it begins to share equal weight with the rest of the image. But why are there little circles in the right corner? Why not just one? Well, to be frank, it wouldn’t have been enough. One small circle wouldn’t have the power to over come this big circle so I added a few others with varying sizes. These things take some tinkering with to find the right balance, but now we have a balance piece that is not symmetrical.
Here is another example of asymmetric balancing. The lines on the left are obviously different in shape than the rectangle on the right, but we find our eyes bounce in between both. The way the lines are organized signifies movement from left to right (could be text) and we easily flow to the right. There is a little bit more conflict in the eye coming back to the left, but still remains a solid asymmetric balance.
We can use asymmetry to create some sleek style. Minimalist design weighs heavily on the use of negative space and asymmetry. Using symmetry, and mostly asymmetry, we create a bit more personality in the art by leaving intrigue and engaging the user.
Negative space is all about space and less about Negativity
One of the biggest things I notice in today’s design is the lack of negative space. Artists seem incredibly timid about leaving space in design, let alone dynamic space. Negative space is defined as empty space, space around an object or form. What is often overlooked in using negative space is that empty space is not empty. It is full of shape; hence why I said earlier that it is dynamic space. What we find is that negative space accentuates design and often times boring negative space lends to a boring design. The empty space can be dynamic and a shape or form in it of itself.
This is a basic look at using negative space and perhaps the most obvious. Clearly emphasis is on the black circle, your eyes can’t run from it and surely you’re curious about this spot by now. Simple intrigue is created from having so much negative space. I always say, if you can engage the user then you’re on the right path. How about something a bit more complicated.
One of my more favorite ways to control negative space is to play with corners. Surely we are only using circles or squares for our examples, add in some more creative shapes and the effectiveness increases.
What is often overlooked in using negative space is that empty space is not empty.
What’s important to note here is that we have the same intrigue as the last image but now your eye can move. See how your eye rolls along the edge of the circle, naturally and without stress. You loop around the edge starting in the right top tip back to the top left corner. Its a beautiful line that, without negative space, wouldn’t exist. Sure size helps and this is also a combination of asymmetry if you consider the negative space to be a form (which I do and you should too ;)). Its an advanced technique but with the right time and patience, can be fine tweaked to get some great and engaging results.
Great examples of Guiding User Eye
Basic example of using size to guide user eye. Most of us have seen a gallery like this, but again, like I said in Part 1, lots of what we do sometimes goes unaware. What makes this gallery effective and easy to use? The large image on the top is the focus point. Your eye drops down briefly to see the smaller images, but eventually comes back up so its a good design for generating focus on a particular point. (pahl.co.uk/store)
Oh yes. You have seen this page. Most of us fantasize about sitting in one of these babies for hours a day. I have sat in quite a few, and these puppies are awesome. But enough of that. Ok, so, what makes this page so great? Careful utilization of space and asymmetry. We have disjointed visual objects that with the careful use of negative space give us a great design. One chair is not enough, and believe it or not, the text would lack balance without those 2 very thin grey lines encompassing the nav. Controlling negative space is so fickle that small adjustments can have resounding impacts. Among the many reasons why these chairs were chosen, the orange is a necessity; without it, disjointed colors would plague the rhythm and take away from the balance and dual focal points. (hermanmiller.com)
Great style, great control of symmetry and size. From left to right, this is a pyramid of descaling size. The girl peaks our initial visual interest by being the main focal point. This is where the eyes land. The eyes then move left to right as the areas of focus are divided, relatively evenly, to different categories of interest (info, products, accessories, etc). This rhythm of size is complimented by maintaining symmetry of the width of the columns where the information is placed in; all 3 columns appear to share about the same visual width and weight.
It should be noted: Great products never hurt a design. This AMG is stunning, but so is the photography and the composition. What is this using? Asymmetry and negative space are carefully used to give this design a dramatic and powerful feeling. Careful positioning of the elements make this design balance and float the eye from car to the left text and so on and so forth. A big part of keeping this balance is through unity by repeating the AMG’s color in the “BEHIND THE SPEED” text. This is important in keeping each object from over powering one another. Lastly, the Mercedes-Benz logo. Didn’t think so? Of course. This logo is incredibly crucial just the way it is; any bigger, smaller, brighter, or darker and the balance swings. The balance is so fine and intricate that this is the only way the design can stand. Mountains in the background of the photo—if this pointed on the diagonal to the top right (mirrored) the side of the car would be too powerful. It is used as a guide to bring the eye back to the “BEHIND THE SPEED”. Very clever, beautiful, and effective design.
If this is familiar it is because this is an example of one of the designs discussed about negative space. The positive space, that which is filled with the objects and type, are well designed but the negative (white) space that embodies the navigation and shape enhance the design. Our eyes navigate much in like the example we had earlier. (GFsmith.com)
What you can gain from all this
Design isn’t just pen and ink—well maybe it is, but great design isn’t. Understanding how people interact, want to interact, and controlling that is what helps designers capitalize on their “pen and ink”. This is not a task of being evil mind you, essentially we are enhancing user experience. Like I mentioned in part 1, and earlier in this thread, understanding why we do things is important in advancing our designs as well as keeping them consistent in terms of quality and user experience. Some designers have an eye for this and may rough it when it comes to explaining their design while more technical artists view it as a science—either way you need to be able to explain and understand. This type of language is great for handling clients and helping them understand as well so don’t be afraid to educate them a little on effective design. Its about taking a beautiful design and allowing it to be universally enjoyed without conflict—the finest artists of the traditional mediums have been doing it for years, its a super secret success and we are really excited, super excited, to be sharing it with you #stevejobskeynote.
If you missed out on the first part of more the foundational techniques in guiding user eye, see the first part posted here on Inspiredology. If you have other techniques that you use, we’d love to see what other ideas are out there (and surely there are). If you look back to your designs now, has your perception changed? Hopefully this will push you to create better designs with a better user experience.
Note: User experience and the techniques gone over are not solely for web design. Traditional artists use these same techniques to enhance the effectiveness of their art. So whether you’re in print or web or street art, the same principles apply.