Flow
1st edition — by Patrick McNeil — Dec. 6, 2007
The Design Principle
Well we made it to the final topic for this 6 part series and find ourselves on the principle of flow. Again, this rather obvious principle is an often overlooked or forgotten one. After all, it is hard to keep all the principles in mind at the same time. For me this is one that tends to fall out my thought process. So what exactly is flow? Well, flow is simply the path a users eyes take through a design. This is primarily a result of how elements like emphasis and contrast are used. In fact, flow is entirely the result of how other elements are put together.
One thing to always remember when considering flow is the natural order of things. There have been studies to determine where eyeballs go (eye tracking study) and it is pretty clear that people tend to work in a rather predictable fashion. Typically things go from left to right and top to bottom; with some variation in there of course. This is why a web site that is right justified feels so funky to us left to right readers. Nothing wrong with doing so of course, we simply must understand the implications of such decisions.
So selecting sites based on flow is a really tough challenge. Every site has flow, good or bad. So ultimately you have to determine what defines good flow? I have settled in on this: I look for demonstrations of flow that feel stable, comfortable and as natural as possible. It can be complex, but it must feel natural and comfortable so that I don't feel like I am bouncing around the page like a pinball. Now of course the eyes naturally do bounce around, but a site with what I consider good flow will encourage me to take a nice stable path.
Sample 1 - Rikcat Industries
I have superimposed over this first sample site what I believe to be the visual flow of the site. Certainly this is a matter of opinion, but I believe I have fairly accurately assessed it. This site is super clean and has a pretty much minimal approach to it. As such it is pleasing to see that the flow of the site has been setup so as to resonate with this style of design. The focus starts just where we expect, the top left, and flows down from there, making its way to the right column, and finally the footer of the page. This natural progression follows a patter found all over the web and merges our expectations with our natural tendencies. Nice and easy on the eyes making the site rather easy to consume.
Sample 2 -
The Mark Boulton site presents a bit more complex solution to a similar situation, and yet it retains an easy to use model. The extreme emphasis placed on the main tag line forces the user to start their visual exploration there. The natural tendency is to flow down from there and the next most emphasized text is directly below the tag line. This flows to the right side and finally to the bottom where the sheer quantity of content draws the viewer downward.
This sites flow is not quite the "standard" approach, but it is still very effective. Clearly the focus is on making sure you get the main theme of "beautiful, simple design." In fact, the overall feel of the design reflects the mantra, even more supported by a nice and comfortable flow.
Sample 3 - Kineda
The Kineda site presents a slightly more complex flow then the first two. First the bold red open sign grabs the users attention. Intentional or not, this is the boldest element on the page, and it is prominently placed at the top. So it simply grabs your attention. From there the mass of images and copy in the top block draws your attention as you filter through the mass of 8 topics. This section is easy to get lost in. This is not a bad thing, it is actually a bit of feat to have a block of 8 articles like that and to actually capture your attention in such a way that you can't help but look through them. I find myself not skimming them as much as I typically would. From there the large ad in the lower right quickly draws my attention. Ads are the sort of thing you want to give enough priority to so as to make them valuable, yet not so high a priority that the content takes second stage. Then again, I guess it depends on the style of site your running. Finally the users eyes scan the bottom section and swoop back up to the headline.
Sample 4 - Golden Apple
This final example has a much richer complex looking design then the first two examples, and yet it retains a very simple and clear flow. This is again mostly related to a through analysis of emphasis and an effort to carry out such goals. The reason I find this sample encouraging is that it is more typical of how sites tend to look. Not in a particular style so much, but just that their is lots of container stuff, tabs, links, lists etc. And yet, it is so simple to scan and consume and the eyes find a pleasant path through the content.
Conclusion
Certainly this is one of the more subjective topics, and only actually testing would show where users eyes go in these designs. All the same as designers we can still try to keep in mind the natural tendencies of viewers and how they might consume the designs we create.
Thanks for joining me on this tour through the basic principles of design. I know that I have learned and grown from it and I really hope you have enjoyed the trip. I have some other ideas in regards to sets of articles such as this. Look for those in the near future.
Side Note
Interestingly A List Apart posted an article on Flow just the other day. It is an excellent read and goes further into the theory behind this idea. I could have just inserted it as my article, but that wouldn't have been very creative would it.
Sample Usage
