Indeed, many businesses and organizations have shifted their focus towards improving the Usability of their website and delivering best possible User Experience. Usability best practices are being sought after and followed by many to stay on top.

Gone is the time when it was enough for websites, just to be ‘useful’. Great efforts and thinking is being applied to be ‘desirable’. Lot goes behind the success and when it comes to Usability and User Experience, there is no cookbook style recipe. However, using quality ‘ingredients’ will only help towards the cause! Here I have tried to compile some of the important and contemporary Usability best practices, which are essentially some of the ingredients to turn website or application, from ordinary to outstanding and to get good conversion rate!

1. Don’t stretch on User’s patience. Make it load faster!

Slow loading websites add to frustration and can be real turn-offs. It is most likely that users would rather go to other similar websites, which meet their goals faster. Modern websites are loaded with high-resolution images, media contents and social network plugins. All these add delays in website loading. Best coding and development practices necessary to make sure that you don’t run into such performance issues. Take a look at this great article on  ‘Yahoo Developer Network’ for Best practices to speed up your website. Additionally, you can also explore YSlow , which is an awesome performance tool. These things, if not given deserved attention from initial phase have tendency of getting really ugly as the website/web-app grows!

2. Research carefully about Browser and Resolution requirements

Make use of breed of advanced research tools (such as NetMarketShare) to find out what browsers you need to support for your business. Be aware that changing your browser metrics in middle of development can prove to be costly. Let someone with in-depth vision participate in decision-making. Same goes for screen-resolution support, although quite often it doesn’t get the same kind of attention as that of browser metrics decision.

3. Honey-moon days of AJAX are over! Use it with caution and only when required.

Ajax is indeed one of the coolest and handy technology when it comes to web-development. However, many would agree that it just got over-used in last few years. While it appears pretty seamless in what it does, It surely has ability to introduce nasty problems to your web-application (such as breaking ‘browser’ back button support, Caching inconsistency, unfriendly with SEO, etc.). If you must use Ajax, then always have an open eye for possible optimizations, especially for cutting down number of requests. It may be wise to test the performance for users who are away from server. Here’s one great article , if you would like to get insight on this.

4. Consider trade-offs between using Simple vs Modal dialog

Modal dialogs take over the whole web-page and won’t go away until you do some action on it. It’s good for warnings or critical functionality but won’t make sense for trivial things such as letting users know that their profile is updated or telling them  about availability of new features. JQuery make is really easy to configure the way we want it to be. Here’s some interesting discussion thread about when to use ‘modal dialog’ on StackOverflow.

5. Tool-tips have revolutionized! Use them wisely to keep users informed

Keeping users well-informed is essential for better user-experience! They need to know what to expect before they do their actions. If you are using some special conventions, they need to have easy way to understand the meaning, rather than going to ‘help’ or ‘faq’ page. Above is the example of ‘Beautytips’ JQuery plugin for tool-tips. It is highly configurable and if used well, can save valuable ‘user-clicks’. Feel free to explore more such plugins as they keep on coming!

6. Remove distractions and get user focus to areas which matter!

So you got users spending more time on your website but is it really helping your conversion rate (or any other goal you may have for the web-page)? Many businesses strategically highlight important components (such as ‘Order now’, ‘Buy now’, ‘Download’, ‘Subscribe’, etc.) on their web-pages. Intelligent use of coloring, images and effects may help you to achieve this. Many of you would remember Google’s ‘Pacman’ game on their Search page. Was it a distraction for folks who wanted to search something? Well… may be, but again, it was Google and they used it to create a positive vibe for themselves. Many websites rather have users be focused on their business/objective than having them flock their pages for game of ‘Pacman’.

7. Images can talk better! Use them strategically

Icons and images can really make a huge difference in terms of the how the web-page is presented to the user. Textual pages are indeed boring to the most of the users. Images not only make it interesting but also convey message that no text can do. Take a look at brilliant 'Cloud upload' icon (find more such icons here). If you could talk to your users through such images, you are sure to receive good attention!

8. Never ignore small items - Make and maintain checklist.

Small things such as having 'favicon', appropriate site title, meaningful URLs, etc. are often slipped through the crack. Note them down as you think through them and use it as your checklist in the end. Well-developed websites are often 'detail' oriented and 'pixel-perfect'. It eventually comes down the project budget and resources available, however, if you have them available on your project, it's worth going extra mile on delivering better quality.

9. Don't make users feel lost on website - Use Breadcrumbs

If you are newbie, 'Breadcrumbs' is a navigation aid for helping users know where they are and quickly navigate through the hierarchy (shown in image). Although seems trivial, many websites lack 'breadcrumbs'. It's actually pretty simple to implement (especially if you are using JQuery or similar framework) and many good resources are available on web. It's simple thing that matters big in delivering good user experience!

10. Keep it consistent!

Some sort of uniformity in user experience is important. As an example, If your homepage has good looking tool-tip, users are most likely to expect the same on other pages as well. Also it's not good idea to have different page layouts for different pages. If you maintain good consistency, users can get to the speed faster. If you are implementing some cool feature or UI effect for certain page, consider leveraging the same for other pages as well. It is highly unlikely that QA team is going to report something like 'undo' button on certain is slightly different from 'undo' button on other page.  If you are developer for these pages, consider taking accountability for these things!

11. Provide clearly marked exits

Here's an example situation: You are trying to get some insurance quote online. There are multiple steps, each with some 'form' asking for user specific information. You have completed 4 forms already and while on 5'th form, you realize that you don't have answers to some of the mandatory information. May be you need some more time to gather the information or you just have changed your mind about getting the quote. Only options you see are 'next' and 'previous'. This is a tough situation. You really can't use the existing options you have and closing browser may not clear the information you already have entered. If you want to come back again to complete the remaining application, closing browser window may mean that you have to spend the time all over again. Ideally users should have option to 'exit' through process at any time and another option to save the session for later use. Make sure you are considering all such situations and taking care of users by giving them options they need.

12. Error messages should be precise and well-understood 

Objective of error messages is to let user know that some error has occurred, apologize as necessary and suggest him/her best possible actions. It's important to be as precise as possible. Users are most likely not going to be 'happy' while reading these messages. In example image, you can see some error codes (actually twice). It hardly does any good to the users, especially when they know that they have to 're-install' the application anyways. It's also not a good for 'brand' value. A friendly, well-written and precise error message can actually have positive effects on users, despite you causing the error in the first place! Here's how twitter does it quite well

13. Prevent errors! Don't keep any loose ends as much as possible.

Famous Murphy's law covers it all! During development phase, make sure you are not leaving things in 'delicate' state, when possible. Consider alternate ways to fix the problem, rather than just choosing to display error message. Following best coding practices, thorough testing and good judgement while developing often leads to cleaner implementations and fewer errors to handle!

14. Adopt to aesthetic and minimalist design

I think, Google was one of the early pioneer for this trend of minimalist design. More and more businesses and organizations are adopting minimalist design, where they try to keep it very simple with minimum required UI components on the web-page and simple layout. Take a look at this gallery to find out some awesome designs. These pages look very catchy and at the same time take less development and maintenance time, as side-benefit!

15. Long textual articles can be boring and may not get desired attention

Whether it's an article, product features list, product descriptions or any other information, it can get boring after some time, if it's not accompanied by relevant graphics or images. It also helps to a great deal to make sure that the text is written with good spacing and with clear fonts. Break down long text blocks into smaller paragraphs and have some heading for each, if it makes sense.

16. Don't make users debug the code! -  Have pages handing '404' and other errors

How often we come across browser HTTP error page or 'Dot net' error page? It's not good for 'brand' when it happens. 'Dot net' error pages can be even more annoying. Users sure don't want to know which line of code caused the error. There are some pretty good 'error' pages around to take inspiration from. Check them here! Of course, choosing the right design for 404 page, is also important. The page should go along well with overall site theme.

17. Test as much as possible

Testing at every level is essential. Not just the code, but designs as well as Acceptance Criteria should be tested or verified. Automated testing is always a great idea and quite a few reliable frameworks (Such as Cucumber, Jasmine, Qunit, etc.) are available. It's not a wise idea to compromise on testing because of stringent deadlines. If you are a growing 'brand' trying to establish firmly in the market, you may have higher stakes for not doing 'complete' testing.

18. Be upfront and honest to the users

Most of the project development gets rolled out in phases. You may not have complete functionality and all the features during initial releases. Don't let users break their head trying to get something done that is not released yet. A polite message like "Sorry this feature is not available yet. We are working on it and it will be released soon" often soothes user and helps them to set right expectations. Also as an examples, if you are accepting money on your website, keep user aware of the exact price that they will be charged (including shipping and any taxes) at early stages rather than just during 'checkout'. Of course, never ever promise something that is not available. Honesty is always appreciated!

19. Set priorities in case of conflicts in interests!

With tight deadlines and budgeting constraints it can be really challenging to get all things done at times. Make intelligent decisions, if you come to a point where you have to select few features from pool of features for your current release. It often needs good judgement at 'product management' level. Point is, for example, if you prefer adding a cool logo or sideshow over core functionality such as ability to 'cancel order' or 'unsubscribe' online, you might want to give it another thought!

20. All designs have life span and it's shorter than what you think!

Designs which looked great and received well by users in past may not have same impact in present times. Continuous improvement is one of the key thing to make sure that you are giving your users contemporary User experience. Consider exploiting latest awesome features offered by HTMl5, CSS3 and JQuery plugins. Have some market research regarding your website design and usability and use the feedback to improve. Good usability and design inspirations can come from anywhere. It could be latest sports car model, well-arranged grocery section or restaurant menu card!