With the widespread adoption of technologies like AJAX, consumers are getting accustomed to more powerful and responsive websites where content fades, updates dynamically and responds to their input instead of the old pattern of click-refresh, click-refresh.
To remain competitive, marketers must be prepared to use advanced technology to deliver enhanced interfaces and experiences to their customers. Presenting customers with more immersive and interactive web interfaces can elicit excitement, loyalty and plenty of referred traffic. Conversely, sites that are frustrating to use and slow to render lead to customer dissatisfaction, site abandonment and significant loss in overall sales.
In this article, we'll explore new interaction techniques that can take your online marketing efforts to the next level. Keep in mind that just because you implement these doesn't necessarily mean that people will flock to your site in admiration. Many of these techniques can be used in subtle ways to iteratively improve an existing design, and it's important to target specific areas of the site that will benefit the most from increased interaction and experiment with the solutions below. As always, usability testing is the only way to verify the design is successful.
Autocomplete involves a website predicting a word or phrase that the customer wants to type in without actually typing it in completely. This feature works best when the website can predict how the customer may finish a word. Email addresses, city names, airports, tags and salutations are all good targets.
To implement successfully, the autocomplete results should come up after typing a minimum of three characters, be keyboard-navigable and mouse-hover enabled. Most of the time, autocomplete is used to aid in completing a single form field, but on Bestwestern.com, when customers select an option, it completes not only the city field, but also the state and country. This is particularly convenient for customers, given that addresses are often long and difficult to type correctly.
Autocomplete can be easily added to your site if you haven't already.
Consider for a moment: How else can you make data entry on your site quicker?
The only complex part is determining what data to return to the customer as he or she is typing. If you have a search feature on your website, compile a list of most used searched terms and start from there.
While it's common to go into an "edit mode" to adjust data, edit-in-place allows customers to perform quick, simple edits simply by clicking the text to be edited. By keeping the customer in the same context and letting their mouse clicks switch between "view mode" and "edit mode" at will, they'll get things done quickly and get less frustrated about wasted time. Flickr.com is well-known for its edit-in-place titles and descriptions for any photo you've uploaded. A good best practice to follow is a hover state affordance: the editable area highlights in pale yellow and a "click to edit" tooltip appears.
If you run an e-commerce business, think about using this technique in a shopping cart -- the prices instantly update when you change a quantity or the shipping ZIP code.
A carousel enables you to feature plenty of content in a small space. Pictures are often used in a carousel, but recipes, new blurbs, or categories of links are all appropriate. Amazon.com uses a carousel to feature personalized product recommendations. By using the paddles on the side, customers can browse from side-to-side to what they want to focus on.
Keep in mind that many visitors may not ever see the items that are out of view, so don't use this space for critical information. A subtle sliding animation can help customers understand the widget, as well as give them a peek at the items to the side of the current view.
Does your site have a large set of content to show but not enough space to show all items at once? If so, this is a natural place where a carousel can be used to create a unique experience.
A modal pop-up is a window created within the page that instantly displays and centers content and establishes focus. Modal pop-ups can be useful for image zooming, watching video or asking for login credentials, like in the example below from TextLinkAds.com.
Other sites like NikonUSA.com are using a modal pop-up in the form of a "lightbox" to show the full-size image when a thumbnail is clicked.
This technique makes interaction speedy but may confuse your customers if they don't know how to get out of it. Always create a very clear (and large) close button in the top right of the pop-up.
Modal pop-ups are particularly useful to ensure visibility of an important message, or to prompt the customer for input before continuing. If your site includes circumstances where decisions need to be made, it will probably benefit from these enhancements.
Typically, when you reach the bottom of a search results page in a search engine like Google, you click "Next," wait five seconds and start from the top again.
With infinite scroll, the next results are retrieved automatically for you as you approach the bottom of the page. By the time you're there, the search results have already been appended to your current view. This technique utilizes AJAX and isn't trivial to implement, but it creates a customer experience that surprises people with its intuitiveness.
Placing results on separate pages isn't limited to search sites. Any content that is currently paged is a great target for infinite scroll: news articles, search results, forum posts and blog posts. Does your site require customers to click from page to page? If so, you may be giving them the opportunity to leave your site. Don't force your customers to ask for more content. Consider areas on your site where you can just give it to them.
There is a now wealth of technology that affords your web presence a more dynamic and rich interface. Providing this interface to your customers will deliver conversion, loyalty and engagement. While you can implement everything here, you have to judge if it's appropriate for your business and your customer's goals. But with a successful design and execution, you'll see a positive growth in your online presence.
An accordion enables sections of content to expand or collapse so only one displays at a time. When you click on a header, the visible content collapses and the desired content expands into view. Just like the carousel, the accordion gives you a chance to showcase extra content in a confined area.
The Reebok Run Easy site uses an accordion to guide visitors through a multi-step process. When implementing, all headers should look clickable and have a hover treatment. If the accordion is part of a process, provide a "continue" button to proceed to the next step.
What are the most common processes that customers are doing on your website? Registration? Checkout? Understanding which of these tasks can be optimized for your customers will help to improve the overall conversion rates on your site.