spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dlab / 9903
Developer News
Get Ready for Microsoft's 'Oslo' Modeling Tool
Latest Linux Hits Networking Flaws
Metasploit 3.2 Offers More 'Evil Deeds'
 
  Eye Flows: The Big Picture
 
 

Besides direction, it is interesting to consider other aspects of the "eye flow as water flow" analogy. The stream of perception generated by a contrast relationship is, like contrast itself, defined by both the magnitude of difference between the contrasting objects and by the number of aspects in which they are opposed (let's call the latter parameter the dimensionality of contrast).

For example, if two squares are visually interrelated and linked by a common color and other attributes, then the velocity of the visual flow between them will depend on the difference in their sizes. If the squares are equal (symmetry) or almost equal in sizes, then the rate of perception for this couple of elements is low, and the above discussed directionality is not obvious - the viewer's eyes will move between the linked objects relatively easily in both directions. If, however, the squares are of more contrasting sizes, then the "waterfall" between their levels becomes more noticeable.

So far any motions we discussed lay in the plane of the page. However, the 3D aspect of the graphics you use also has some dynamic implications. If one of two objects is made to look "closer" or "higher" above the page (e.g. by adding a drop shadow behind it), then the eye flows that lead to that object get an additional impulse.

If we continue the analogy by visualizing the "flow" as having certain breadth in addition to velocity, then it is logical to connect this parameter to the dimensionality of the contrast link. Thus, if we make the couple of squares different not only by their size but by their color as well, then the imaginary stream between them becomes wider and, somehow, calmer. By adding more dimensions to the contrast, we're making the flow still wider and deeper, until some moment when the objects lose any visual connection and the flow between them dilutes into nil.

It is also not unreasonable to visualize eye flows as having certain inertia. If the end point of the flow attracts the eye with considerable force, we may easily run out beyond it, thus involving other objects and the surrounding space into the relationships generated by the contrasting pair. If an element belongs to more than one contrast link (which is most often the case with real world compositions), eye inertia will turn the path that we travel from a sequence of linear fragments into a smooth curve.

Now it's time to take a general look at the entire page to see if separate eye flows will combine into any discernible pattern. Such a "perceptual map" of the page, with eye flows visualized by lines, does not represent anyone's actual eye movements, but only shows the popular pathways that the viewers are most likely to use when wandering across the page. Such an overall picture of eye flows on a page may be an instructive aspect of analysis that you're recommended to perform on everything you create.

Try to think of your composition not as a static whole, but a dynamic "movie" that unveils in the viewer's perception. Even if this movie spans a fraction of a second, it has its own plot and heroes, its own inception and closing. Try to analyze various perception scenarios: scan the page in various directions, try to identify areas where eye flows feel uncomfortable due to running into an obstacle or having to turn at too sharp edges.

Indeed there exist professional compositions that look great to a considerate eye, but do not quite work for transient perception simply because of a jarring arrangement of eye flows. Dynamic analysis does require some getting used to, because for the designer who's working long hours on a page, his own creation may look all but dynamic. But the smooth flow of perception that's achieved by a thorough dynamic analysis is well worth the additional trouble.

 

Comments are welcome
Produced by Dmitry Kirsanov and

JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel Article: Using Power & Display Context in the Intel Mobile Platform SDK
Internet.com eBook: Real Life Rails
IBM SCA Center Article: Simplifying Composite Applications with Service Component Architecture
Intel PDF: Quad-Core Impacts More Than the Data Center
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Intel PDF: Analysis of Early Testing of Intel vPro in Large IT Departments
Internet.com eBook: Best Practices for Developing a Web Site
Intel PDF: IT Agility through Automated, Policy-based Virtual Infrastructure
IBM CIO Whitepaper: The New Information Agenda. Do You Have One?
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
IBM Whitepaper: How are other CIOs driving growth?
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Actuate Download: Free Visual Report Development Tool
Red Gate Download: SQL Backup Pro
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
IBM SCA Download: Start Building SCA Applications Today
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Anatomy of an Ajax Application · Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

Created: Mar. 16, 1999
Revised: Mar. 16, 1999

URL: http://www.webreference.com/dlab/9903/bigpicture.html