Week 9 Page 6: Eyeflow
Create Eyeflow using Line, Shape and Graphics
Using Eyeflow to Guide the Viewer
|
|
Eyeflow is your way of visually guiding the viewer through the hierarchy on your web page. Start with the focal point and then direct them where to go and what to read.Graphic and animated elements demand attention. The size and placement of elements can create eyeflow. Remember that many elements have an inbuilt direction (particularly photos) -- you can use this direction to guide the viewer's eyes. You can also make use of lines (rules), bullets, dingbats, fonts, type sizes, paragraph space, color to help direct the viewer's eyes. |
How to Use Eyeflow
What elements encourage eyeflow?
Strong focal point, simplicity, graphic elements that move your eye along, size relationships, visually interesting white space…
What design elements impair eyeflow?
Clutter (lack of white space), too many focal points, too much text/too many graphics the same size, similar spacing between all elements, over-animated pages…
Eyeflow Examples
Let's look at two screen shots of web pages. We'll start with a "good" example!!
The example below demonstrates how graphics can be used to direct the viewer's eyes around the page. Notice how the circles lead to the bird and the bird then points back into the content. I've drawn in a red line to demonstrate the direction. Unfortunately, the link to this site example no longer works.
How about the following example? Do you think it demonstrates good eyeflow? Where do your eyes go when you look at this layout?
None of the elements on the page create a direction or help guide the site visitor. The boxes and blocks actually impede movement through the content.
And lastly...
Successful Eyeflow or Not?!!Look at the following sites and decide: Successful or Not Successful? • Albion: http://www.albionwestcoast.com/ Links to an external site. • Segpub: http://segpub.net/ Links to an external site. (Archived version) • Third Coast Surf Shop (this is an archived version): http://www.thirdcoastsurfshop.com/ You can post your comments to our class Weekly Class Discussion, Discoveries and Questions Forum if you want to discuss these sites with other students. |