While this may not be much of a concern for folks publishing a personal home page, for commercial website operators, it should be the most important factor. Fortunately, there is a bit of science that can be relied upon to help facilitate the process of giving the customer what he or she wants. Best of all, we can use this design method to reach our audience on a subconscious level, using a direct visual pipeline into the prospect’s brain.
And all it takes is one big “F.”
Jakob nielsen wrote about this (www.useit.com/ alertbox/reading_pattern. html), describing in detail how eyetracking studies revealed that typical users read web pages in a roughly F-shaped pattern that is made up of two horizontal stripes and a vertical stripe.
“F for fast. that’s how users read your precious content,” nielsen stated. “in a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.”
Nielsen studied 232 users as they browsed thousands of web pages and discovered that this “F” pattern of reading behavior is usually consistent, regardless of the type of website being visited or the task being performed.
“Users first read in a horizontal movement, usually across the upper part of the content area. this initial element forms the F’s top bar,” Nielsen offered. “next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. this additional element forms the F’s lower bar.”
“Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. other times users move faster, creating a spottier heatmap,” nielsen concluded. “this last element forms the F’s stem.”
SEO firm Video Dimension has published the results of a follow-up study conducted at wichita State University (www.videodim.com/eye%20gaze%20patterns.html), which has validated nielsen’s findings on text-based pages; further refining the research with a look at whether the “F” pattern held true across both text-based and content choices on-the-fly, with reordered listings based upon a user’s continuing preference expressions.
Consider multi-niche thumbnail gallery post sites (TGPs), which often feature a home page of thumbnail images linked not to specific galleries but to their general category, i.e. “Blondes,” “Brunettes” and “Redheads.” Now imagine running your cursor over one of those thumbnails and seeing the underlying thumb table change to now show “Blondes with Big Boobs,” “Blondes with Small Boobs,” “Blondes with…” — you get the idea — and see a visual representation of your category structure that refines itself as you watch.
Download the source code and check out the tutorial “Creating a ‘Filterable’ Portfolio with jQuery” (net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterableportfolio-with-jquery) for some ideas on ways in which this can be implemented on your website.
Search boxes are often implemented on sidebars as a means of helping users to focus their queries; and here jQuery can further enhance the user experience while providing a lift to your marketing opportunities.
For example, Autocomplete (docs.jquery.com/Plugins/autocomplete) allows for the use of predefined search phrases, similar to Google’s Instant Search feature; while some advanced styling (www.yensdesign.com/2009/01/improvingsearch-boxes-with-jquery) can help set your site search apart, in both form and function.
Speaking of “forms,” one excellent task for jQuery is form field validation, such as on an adult paysite’s join page or other type of online direct-feedback mechanism.
“Form Validation with Hints” (plugins.jquery.com/project/form-validationand-hints) takes simple error-checking a step further by offering suggestions as to the required data, while the validation plugin (docs.jquery.com/Plugins/validation) eases custom validating.
Although jQuery can bring an awesome level of ease-ofuse, flexibility and power to your website designs, in the end, “graceful degradation” must be your watch phrase, as JavaScript is not always the best solution to a coding problem.
The technology’s value in replacing Flash, page refreshes, or other elements otherwise required to achieve a similar effect at a higher resource “cost” (if a similar effect is even possible) ensure its future and provides an incentive for adult webmasters to explore what jQuery has to offer.
