Home arrow Design Usability arrow Add New Website Features to Please Users
DESIGN USABILITY

Add New Website Features to Please Users


You may be surprised by the number of features you can add to your website that improve its usability. Some greatly affect a site's look and feel, while others add small but friendly “touches” that make it seem more personal. With CSS3, HTML5, JavaScript and jQuery, you can easily experiment with some of the ideas I'll be discussing in this article.

Author Info:
By: Terri Wells
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
November 01, 2012

print this article
SEARCH DEVARTICLES

You may be surprised by the number of features you can add to your website that improve its usability. Some greatly affect a site's look and feel, while others add small but friendly “touches” that make it seem more personal. With CSS3, HTML5, JavaScript and jQuery, you can easily experiment with some of the ideas I'll be discussing in this article.

Chris Lake writing for Econsultancy describes these as “experiential web design trends” because they directly affect a user's website experience. The idea behind these features is to encourage user interaction and certain behaviors. Not all of them will be appropriate for all websites, of course.

One useful feature is sticky navigation or sticky content. This is an item that stays in the same fixed position when the user scrolls down the page. It's mainstream enough that I hardly notice when websites do this; when I do notice it, my first thought is “of course that navigation is right there where I left it!” If you want to encourage users to share your content, you can put social sharing buttons (for Twitter, Facebook, etc) in fixed positions, not just navigation. Or you could make sure your “related articles” box is sticky to encourage visitors to read more content.

Some websites have become so popular that their style has escaped out into the wider web, to be copied in many different places. Or maybe the style itself is so versatile that it shows up everywhere. Take grid layouts for images, for example. You'll find them on Pinterest, Etsy, eBay, and even Lady Gaga's website. Such layouts let users take a lot in at a glance, without forcing them to give more weight to any one thing. They're worth considering for your e-commerce website.

You should also consider inline form validation and auto-saving of forms for your website. Lake notes that this feature will boost form completion rates, and expects to see more of it in the future. And it doesn't have to be fancy or complicated. “Show a little green tick icon (or similar) when all is okay. Or a red cross if things go awry.” Twitter's form not only offers both of these when you fill out your form, but explains the problem on lines that received a red X. Knowing WHY a particular line threw back an error will do a lot to decrease user frustration!

Lake characterizes another little feature that you can add to your website as “persuasive content.” I think of it as providing a sense of urgency. For example, Expedia does this when you're checking out a hotel by telling you how many other people are looking at that hotel. Amazon does it by telling you that you can get a particular item tomorrow morning if you order by a certain time – and includes a ticking clock countdown to emphasize the point. I'm sure you can come up with other ways to create a sense of urgency around converting that are more specific to your business.

Of course, creating a sense of urgency isn't the only way you can gently tweak your visitor's feelings. Better still, you can do it in ways that make them smile and don't leave them feeling manipulated – because it's small, but obvious. Lake uses the example of White Stuff's checkout basket cartoon on its shopping cart page. It sits there with a little frown, until you put something in it; then it smiles. Or take Google Maps' StreetView icon; when he's exploring Hawaii for you, he carries a surfboard!

You can even play with your visitors' emotions AND build in useful functionality. Photojojo features a little “do not pull” lever on its pages; when you click on it, the lever turns red, and a hand with a long arm comes down and pulls the page up. What a cool way to scroll! And what a sneaky way to encourage a particular behavior.

Lake lists many more features you can use to enhance your visitors' experience of your website. Consider them carefully, and be sure to test them. A touch of whimsy might not be appropriate for the website of a professional accounting firm, for example, but it might be just the thing for a hydroponics farm trying to foster a down-home feeling. You might find that features you initially reject can be adapted to suit your needs perfectly, when you apply a little thought, some creativity, and the right approach. Good luck!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Design Usability Tutorials
More By Terri Wells


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials