Home > Features > jQuery: Cutting-Edge User Interface Techniques • Bookmark   • Newsletters   • Register Search Options

FEATURE

jQuery: Cutting-Edge User Interface Techniques

jQuery: Cutting-Edge User Interface Techniques

January 7, 2011
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  39.66%
Yes, but in a few years
  36.87%
No
  23.46%
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" The ‘F’ pattern style of viewing does not seem to hold true while browsing or searching a picture-based web page. "

As jQuery becomes more widespread across a growing range of applications, adult webmasters are increasingly using it to power their websites in new and innovative ways. Although fully customized websites still require the assistance of professional coders to get the most out of what jQuery has to offer, an enormous variety of code snippets and online tutorials make it easy for webmasters to spice up their sites — even without fully grasping the intricacies of the technology.

One area where many adult webmasters focus on is the use of jQuery to enable and enhance cutting-edge user interface (UI) designs, such as a website’s navigation, tour and join pages. Let’s take a closer look:

For this exercise, I did not want to simply give you a list of “gee whiz” effects that might look spiffy on your website. Instead I want to take an existing adult website design and examine some of the UI components that could benefit from a quick dose of jQuery — as well as provide a link to the code or tutorial you will need to make it happen.

To make the example as generic as possible, we’ll consider a common site structure, which in this case is based on the default WordPress “2010” theme.

THE HEADER

The immediate visual impact of this theme surrounds a single, main header image — not unlike the design of many adult sites. But why is it a single image? Rather than a painting, what you need is a billboard — or better yet, a slideshow of billboards, all linked to your URL of choice: which could be a join page, content page (as part of your overall navigation scheme), or other destination.

One way of dealing with this is to simply assign a unique header image to each page; but through the use of jQuery, we can show all of the images on a single page — without the need for reloading, and provide the ability for viewers to interact with those images. Clever webmasters can extend this with custom JavaScript to specify the initial header image in response to unique search terms or referring URLs, enabling tighter marketing.

jCarousel Lite (www.gmarwaha.com/jquery/jcarousellite/index.php) is a simple tool for scrolling images and HTML content. It is both lightweight (around 2k) and feature-rich enough for many applications. jCarousel (www.sorgalla.com/projects/jcarousel) has a variety of enhanced features for more demanding applications.

THE FOOTER

Typically used to display a site’s “housekeeping” information, such as links to ‘2257 notices, privacy policies and terms of conditions, as well as text versions of navigational links and affiliation buttons, a website’s footer is often a cluttered mass of confusion that detracts from the overall visual cohesion that the designer strived for. This information is all required, however; and there is even more info that is useful to have such as a site map — which might be included if it didn’t look so damn bad taking up all that screen space.

But what if you could hide this extra information in a way it remained accessible?

The use of jQuery lets us do just that, offering animated, expandable DIVs displaying HTML content, inline or sometimes pulled from external files, in an attractive manner. This technique is also valuable elsewhere on your site, such adding a login link that pops a screen for entering your username and password; a ‘2257 link that pops your statement; or model bios attached to an image — the possibilities are endless.

jQuery Collapser (www.aakashweb.com/resources/pages/demos/jquery-collapser) is a robust toolset featuring a variety of accordion effects for hiding and displaying content.

Another interesting approach for adding extra content is via the use of Smart Tooltips (www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips) or Contextual Tips (www.tutorialzine.com/2010/04/slideout-contexttips-jquery-css3).

THE SIDEBAR

This content area is frequently underutilized on adult websites, which often treat it as an afterthought or just as a place to toss advertising, but it can be used for so much more — and as you might expect, jQuery is the key to unlocking its power.

For example, a thumbnail-based navigation pane could be included in your sidebar, allowing users to make category and picture-based sites, among other factors.

“The ‘F’ pattern style of viewing does not seem to hold true while browsing or searching a picture-based web page,” the report states. “Much of the participant’s gaze was on the categories of pictures that were above the fold.”

There are a number of companies, services and tools that can provide a variety of user interaction data for your specific site, allowing operators to maximize the effectiveness of their basic “F” layouts — or any other type of website design.

Eyetools

(www.eyetools.com), for example, the inventors of eyetracking heatmaps and experts in eyetracking analysis, offers optimization consulting services for some of the biggest brands, including Microsoft and American Express. The company boasts of guaranteed, dramatic increases in conversions and sales, based upon its experience in analyzing thousands of websites and utilizing advanced eyetracking studies of client sites.

Holding seven relevant patents, the Eyetools technology was developed more than a decade ago at Stanford University and has since proven its worth by increasing IBM’s email conversions by 60 percent and a content website’s paid sales by 64 percent, among other successes that illustrate the efficacy of tying content and presentation to human’s natural eye scanning movements.

While many adult operators lack the budget or (accept) ability to hire such a firm, a free solution that can provide some of the benefits of this advanced user behavior analysis is Google Analytics and its Site Overlay tool, which provides a clickmap detailing where users “hovered” and where they clicked. Sure, it’s “handtracking” not eyetracking, but it is much better than not analyzing and capitalizing on this valuable data at all.


BUSINESS ANALYSIS

Sex Toy Manufacturers Talk Retailer, Distributor Support

The pleasure products industry, at its best, is a well-oiled machine consisting of manufacturers, distributors and retailers. Distributors make sure that products get from Point A to Point B, while retailers... More »

Pleasure Product E-commerce Experts Discuss Latest Trends

Adult mail order is a concept that has existed for many years. Phil Harvey famously operated a groundbreaking mail order business for adult products during the 1970s. But e-commerce has expanded the concept... More »

Adult Retailers Predict Consumer Trends for 2017

When adult e-commerce was exploding in popularity in the 2000s, some tech writers predicted that brick-and-mortar adult stores would be meeting their demise. But those obituaries were premature. E-commerce,... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.

UPCOMING EVENTS

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona

EXXXOTICA Denver

Mar 31 - Apr 02
Denver, CO.
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!