Common Usability Mistakes In Web Design : Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Saturday, November 19, 2011

Common Usability Mistakes In Web Design

By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them.

1. Tiny clickable areas

Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of links that are far too small; clicking them is harder than it should be. These are the comments links on Hacker News, a social news website. (Clickable areas are highlighted in red):

Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area:

Newspond comments link.

Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isn’t very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property. Here’s the code:

`1`	`<a` `href="http://www.examplesite.com"` `style="padding: 5px;">Example Site<a>`

The CSS has been placed inline together with the markup to make the example simpler, but in real life you’ll likely want to add this styling to your CSS file by giving the link a class or id and targeting it with that.
You can read more about padded link targets for better mousing in a 37signals article on padded link targets. According to the article, padding provides users with “a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.”

2. Pagination used for the wrong purpose

Pagination refers to splitting up content onto several pages. This is often found on websites that have long lists of items; for example, products in a store or pictures in a gallery. Using pagination for this purpose makes sense because displaying too many items on one page would make the page slower to download and process.

FeedMyApp uses pagination in the right way: to display its vast list of apps in digestible chunks.

But there is another way that pagination is used on the Web today. Content pages, like blog articles, are sometimes split into several pages. Why is this done? What’s the gain? It’s unlikely that the article is so long that it requires pagination; in most cases, it is used to increase page views. Because a lot of blogs and magazines get their revenue through advertising, getting more page views (i.e. individual page loads) boosts their viewing statistics and allows them to charge more for each ad.

The Wired article about Google’s logo is split into eight pages, making it very difficult to read.

While this may seem like an easy way to squeeze more money from your ads, it poses two main problems. The first is that it’s just really, really annoying. Having to load several pages just to read one article isn’t fun. You’re creating a barrier for your visitors that doesn’t have to be there.
The second reason has to do with SEO (search engine optimization). Search engines use the content on your page to make sense of what it is about and then index it accordingly. If the content is split into several pages, it is diluted, and so each page makes less sense on its own and holds less keywords about its topic. This may negatively affect the ranking of the article in search engine results.

3. Duplicate page titles

The title of each Web page is important. Page titles are the pieces of text we write between the tags</strong> in the <head> section of our HTML code. Sometimes people create a generic title while working on their website’s template — their website’s name, for example — and then re-use the same title across the whole website. This is wrong because it robs each page of a couple of key benefits.</p> <p>The first benefit is that a <strong>good title communicates to your visitors a lot of information</strong> about what the page is about. People can quickly figure out if they’re in the right place or not. Remember that this title doesn’t just show at the top of the browser window; it’s also shown on the <strong>search engine results pages</strong>. When people see a list of results on a search engine like Google, they read the page title to figure out what each page is about. This alone is a good enough reason to spend a little time optimizing your page titles.</p> <p>The second reason has to do with SEO. Search engines need different information to rank the results of a particular query. Page title is one of the more important pieces of information they use to gauge <strong>how relevant your page is to a particular search term</strong>. This doesn’t mean you should load as many keywords as possible into the title — that defeats the first benefit — but you should ensure that each title succinctly describes the content of the page, including a couple of words you think people will search for.</p> <p>Here’s an example of a good page title. This is a Smashing Magazine page title as seen in Safari:</p> <p class="showcase"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/smashingmag_title.png" alt="Smashing Magazine page title" height="62" width="480"></p> <p>Here we have the title of the article, the category of the article and the name of the website. Putting the name of the website last puts <strong>more emphasis on what the page itself is about</strong>, rather than on website branding, which is still there. Here’s what the HTML code looks like in the markup:</p> <div class="syntaxhighlighter " id="highlighter_525335"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">title</code><code class="plain">>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</</code><code class="keyword">title</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <p>And here’s how the page is displayed in a Google search result:</p> <p class="showcase"><img style="margin-left: 10px;" src="http://media.smashingmagazine.com/images/usability-problems-solutions/smashingmag_serp.png" alt="Smashing Magazine SERP" height="120" width="470"></p> <h3>4. Content that is difficult to scan</h3> <p>To ensure that your website is usable, you cannot only have a good design; you also need <strong>good copy</strong>. Copy is a term used to describe all of the text content on a website. Yes, good design will guide your visitors around the website, focus their attention on the things that matter and help them make sense of information chunks; but visitors will still need to read text to process information. This makes copy an <strong>essential part</strong> of your overall website design.</p> <p>Before you can write good copy, though, you need to understand how people will actually view your website. Don’t assume that your visitors will read everything from top to bottom. That would certainly be great, but unfortunately that’s not how it works. The Web bombards people with information, and most of us try to consume as much of it as possible. This leads to very frantic browsing behavior: <strong>we jump from one piece of content to another, from one website to the next</strong>. People tend not to read websites top to bottom; they start reading whatever pops out at them first, and then move to the next thing that captures their interest. The pattern looks a little like this:</p> <p class="showcase"><a href="http://www.basecamphq.com/"> <img src="http://media.smashingmagazine.com/images/usability-problems-solutions/basecamp_browse.jpg" alt="Basecamp" height="292" width="480"></a><br> <em>The <a href="http://www.basecamphq.com/">Basecamp</a> landing page.</em></p> <p>The red circles indicate the areas where visitors tend to focus their gaze, and the numbers indicate the order in which they look at these elements. Users dash from one interesting part of the page to another. To take advantage of this chaotic browsing pattern, you need to structure your copy a certain way. Here are a few pointers:</p> <ul><li>Have a few points of focus. These are the parts of your page that attract the attention of visitors. This can be achieved by <strong>stronger, higher-contrast colors and larger fonts</strong>. You can also use <strong>images, such as icons, next to text</strong> to give these areas even more visual pull.</li><li>Each focus point should ideally be accompanied by a descriptive heading. Without reading the copy any further, visitors should be able to understand what this bit of content is about. Don’t make headings mysterious or vague to draw people in. Keep them <strong>informative yet concise</strong>. People want information quickly, and withholding it only annoys them.</li><li>Any other text should be short and easy to digest. Provide just the essentials, and strip out the rest. In most cases, extra text that copy writers put in to make a point less ambiguous only adds dead weight. People will read bite-sized pieces of text but are put off by long paragraphs. <strong>Cut your copy down until no fat is left to cut</strong>.</li></ul> <p class="showcase"><a href="http://www.openoffice.org/"> <img src="http://media.smashingmagazine.com/images/usability-problems-solutions/openoffice.png" alt="OpenOffice page" height="431" width="480"></a><br> <em>The “Why you should use <a href="http://www.openoffice.org/">OpenOffice</a>” page could definitely use improvement. No clear points of focus are provided, aside from the large banner at the top; and the copy is grouped together in huge chunks, making it daunting to read.</em></p> <p class="showcase"><a href="http://culturedcode.com/things/"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/things_features.png" alt="Things features" height="274" width="480"></a><br> <em><a href="http://culturedcode.com/things/">Things</a> app’s features page splits up each feature into little bite-sized segments, each with its own icon and heading. This makes the list easy to scan. To make copy even more effective, list actual benefits rather than feature names.</em></p> <h3>5. No way to get in touch</h3> <p>User engagement is important if you want to build a successful community, and communities are important if you want to build successful websites and social Web apps. <strong>User engagement is also important if you want to build loyal customers</strong>. Quickly answering people’s questions and fixing their problems doesn’t just mean that you have good customer service — <strong>it means you care</strong>, and your customers and visitors will appreciate it.</p> <p>But many websites still don’t give visitors an easy channel for getting in touch with the company. Some websites don’t even have an email address or contact form on them.</p> <p class="showcase"><a href="http://www.cocacola.com/"> <img src="http://media.smashingmagazine.com/images/usability-problems-solutions/cocacola_contact.png" alt="CocaCola contact page" height="369" width="480"></a></p> <p>When you click on the contact link on the official <a href="http://www.cocacola.com/">Coca-Cola</a> website. you’re presented with this page. No email, no phone number. Most of the links lead to automated FAQs; the feedback form requires your address and age and has a 500-character limit; the “Submit an idea” form is two pages long, with terms and conditions attached. It doesn’t look like Coca-Cola really wants you to contact them.</p> <p>Sure, putting your email address on the Web will likely attract a lot of spam, but there are a couple of solutions.</p> <p><a href="http://hivelogic.com/enkoder">Enkoder</a> is my favorite solution for putting email addresses on the Web. Enkoder is an application that comes in two flavors: a free one for Mac OS X, and another free one as a Web app. It <strong>encrypts any email address that you give it</strong> and gives you a bunch of gibberish JavaScript code to put on your page. When the page with the code loads, your email magically appears as a <strong>clickable link</strong>. Bots scouring for email addresses won’t be able to interpret the code — at least that’s the plan.</p> <p>You could also use contact forms to bypass the problem of showing your email address on a page; however, you’re still likely to receive spam unless you put some good Captchas or other spam protection mechanism in place. Keep in mind that things like Captchas are <strong>barriers to user interaction</strong> and will likely degrade the user experience.</p> <p>Forums to the rescue. Online forums are a great communication channel that can be an alternative way for users to get in touch. A public forum is better than a simple contact form or email because <strong>your customers can help each other</strong> on a forum. Even if you don’t personally respond to a customer, another helpful customer may help that person out, solving his or her problem.</p> <p><a href="http://www.getsatisfaction.com/">GetSatisfaction</a> is a Web app that works like a forum. Users can post their problems and feedback as topics on the board, and customers and staff can respond to them. Users can add comments to elaborate on their problem. Whether you go with a hosted solution like GetSatisfaction or roll your own message board, <strong>a two-way communication channel like this is a great way to keep in touch with your customers</strong>.</p> <p class="showcase"><a href="http://getsatisfaction.com/apple"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/apple2.gif" alt="GetSatisfaction Apple" height="590" width="500"></a><br> <em>The <a href="http://getsatisfaction.com/apple">GetSatisfaction forum for Apple</a>.</em></p> <h3>6. No way to search</h3> <p>A lot of people start looking for a search box as soon as they arrive on a page. Perhaps they know exactly what they’re looking for and don’t want to spend time learning the website’s navigation structure. Jakob Nielsen calls these people <strong>search-dominant</strong> users:</p> <blockquote><p>Our usability studies show that more than half of all users are search-dominant, about a fifth of the users are link-dominant, and the rest exhibit mixed behavior. The search-dominant users will usually go straight for the search button when they enter a website: they are not interested in looking around the site; they are task-focused and want to find specific information as fast as possible.</p> <p><a href="http://www.useit.com/alertbox/9707b.html">Jakob Nielsen</a></p></blockquote> <p>Whether you run an online shop or blog, you need search. People may come looking for a particular product or for an article they remember reading a while back, and chances are they’ll want to find it with a quick search. The good news, if you haven’t already implemented search on your website, is that it’s very easy to do.</p> <p>You don’t need to code your own search feature; search engines like <strong>Google and Yahoo have very likely already indexed most, if not all, of your website’s pages</strong>, so all you need to do is pick the one you want to use and plug in a search box. Here’s the form code for using Google as your search engine:</p> <div class="syntaxhighlighter " id="highlighter_805250"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">form</code> <code class="color1">action</code><code class="plain">=</code><code class="string">"<a href="http://www.google.com/search">http://www.google.com/search</a>"</code> <code class="color1">method</code><code class="plain">=</code><code class="string">"get"</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain"><</code><code class="keyword">fieldset</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"hidden"</code> <code class="color1">name</code><code class="plain">=</code><code class="string">"sitesearch"</code> <code class="color1">value</code><code class="plain">=</code><code class="string">"honeyvig.com"</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"text"</code> <code class="color1">name</code><code class="plain">=</code><code class="string">"q"</code> <code class="color1">size</code><code class="plain">=</code><code class="string">"31"</code> <code class="color1">maxlength</code><code class="plain">=</code><code class="string">"255"</code> <code class="color1">value</code><code class="plain">=</code><code class="string">""</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"submit"</code> <code class="color1">value</code><code class="plain">=</code><code class="string">"Google Search"</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="plain"></</code><code class="keyword">fieldset</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain"></</code><code class="keyword">form</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <p>And here’s the one for Yahoo:</p> <div class="syntaxhighlighter " id="highlighter_413419"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">form</code> <code class="color1">action</code><code class="plain">=</code><code class="string">"<a href="http://search.yahoo.com/search">http://search.yahoo.com/search</a>"</code> <code class="color1">method</code><code class="plain">=</code><code class="string">"get"</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain"><</code><code class="keyword">fieldset</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"hidden"</code> <code class="color1">name</code><code class="plain">=</code><code class="string">"vs"</code> <code class="color1">value</code><code class="plain">=</code><code class="string">"smashingmagazine.com"</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"text"</code> <code class="color1">name</code><code class="plain">=</code><code class="string">"p"</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="plain"><</code><code class="keyword">input</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"submit"</code> <code class="color1">value</code><code class="plain">=</code><code class="string">"Yahoo Search"</code> <code class="plain">/></code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="plain"></</code><code class="keyword">fieldset</code><code class="plain">></code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="plain"></</code><code class="keyword">form</code><code class="plain">></code></td></tr></tbody></table></div></div></div> <p>To make it work, all you need to do is <strong>change the value of the “hidden” field to your website’s domain name</strong>. This will limit the scope of the Google or Yahoo search query to just your website. You may also want to modify the value of the “Submit” text to say whatever you want.</p> <h3>7. Too much functionality that requires registration</h3> <p>Your website may have some content or features that require visitors to register before using. That’s great, but be careful how much content is put behind this registration shield. Very interactive Web applications, such as email, document editing and project management, restrict 100% of their functionality to registered users. Other websites, such as social news websites, do not. I can browse all the stories on <a href="http://www.digg.com/">Digg</a> and <a href="http://www.reddit.com/">Reddit</a> without having to log in; <strong>users do not have to identify themselves to enjoy some functionality</strong>.</p> <p>When you implement a log-in barrier, be careful that you don’t lock away features that don’t really need user identification. Some blogs require people to register before posting. Sure, that will significantly decrease spam, but it will also <strong>significantly decrease the number of comments you see</strong>, too.</p> <p>User participation on your website is affected by how many barriers there are. Removing barriers such as registration will almost certainly increase user participation. Indeed, <strong>once users start using your website, they will more likely sign up</strong>, because they’re already involved.</p> <p class="showcase"><a href="http://www.getsatisfaction.com/"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/getsatisfaction_login.png" alt="GetSatisfaction login" height="488" width="480"></a></p> <p>The <a href="http://www.getsatisfaction.com/">GetSatisfaction</a> interface allows you to fill in your comment about a company or product and then click the “Post” button. Instead of seeing your feedback posted, you’re greeted with an unexpected “Log in or register” message. Not good, considering the customer may already be frustrated.</p> <p class="showcase"><a href="http://www.pixlr.com/"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/pixlr.png" alt="Pixlr" height="257" width="480"></a></p> <p>The landing page for <a href="http://www.pixlr.com/">Pixlr</a>, an online graphic editing app, has a link titled “Jump in n’ get started!” Clicking on it opens the app. No trials, no registration; you test drive the app right away.</p> <p class="showcase"><a href="http://www.posterous.com/"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/posterous.png" alt="Posterous" height="262" width="480"></a></p> <p><a href="http://www.posterous.com/">Posterous</a>, a blog hosting network, doesn’t even require registration to start using it. Just send an email with your post, and a new blog is created for you.</p> <h3>8. Old permalinks pointing nowhere</h3> <p>A permalink is a link to a page that isn’t meant to change; for example, a link to a blog article such as the one you’re reading now. <strong>Problems occur, though, when a website moves to another domain or has its structure reorganized</strong>. Old permalinks pointing to existing pages on the website become dead unless something is done about them. That something is called a 301 redirect.</p> <p>301 redirects are little instructions stored on your server that redirect visitors to appropriate pages. So, if someone arrives on your website using an old link, they won’t see a 404 error page (“Page not found”): <strong>the 301 redirect forwards them to the right location</strong>, provided that you’ve set it up correctly. The number “301″ designates the type of redirect that it is: permanent.</p> <p class="showcase"><a href="http://fryewiles.com/404"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/404.png" alt="Frye Wiles 404 page" height="200" width="480"></a><br> <em><a href="http://fryewiles.com/404">Frye / Wiles</a> 404 error.</em></p> <p>There are various ways to do 301 redirects. How they’re implemented depends partly on the Web server you’re using. Here are the basics of handling 301 redirects on the most popular Web server right now, Apache.</p> <p>The following code should go in a file called <strong>“.htaccess”</strong> in your main website folder. Yes, the file name begins with a full stop. This means it’s a system file, which standard file browsers tend to hide by default. So, if you can’t see it using your file browser or FTP client, turn your “Display invisible files” option on. Just create or (if it’s already there) edit this file using your editor of choice. This file is retrieved whenever a visitor arrives on your website, and any redirect rules you put in there will be applied.</p> <p>Here’s a simple 301 redirect code:</p> <div class="syntaxhighlighter " id="highlighter_68694"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">RewriteEngine on</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">Redirect 301 /oldpage.html /newpage.html</code></td></tr></tbody></table></div></div></div> <p>The code is fairly self-explanatory. When somebody tries to access “yoursite.com/oldpage.html,” they will immediately be redirected to “yoursite.com/newpage.html.” The “RewriteEngine on” bit at the top ensures that the mod_rewrite engine is turned on (the default is off). This is the engine that handles the redirects.</p> <h3>9. Long registration forms</h3> <p>Registration forms are barriers. They are barriers because it takes effort to fill them in, and the task itself is no fun. <strong>People have to invest time and effort to register</strong>, and then they have to invest even more time and effort in future to remember what user name and password they used.</p> <p>We can shrink this barrier by making the sign-up form as short as possible. At the end of the day, the purpose of a registration system is simply to be able to identify each user; so, the only requirements are a unique identifier, such as a user name or email address, and a password. <strong>If you don’t need more information, don’t ask for it. Keep the form short.</strong></p> <p class="showcase"><a href="http://www.readoz.com/"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/readoz_signup.png" alt="ReadOz signup form" height="488" width="480"></a><br> <em>The <a href="http://www.readoz.com/">ReadOz</a> sign-up form is very long. On closer inspection, we find that half of the fields are optional. <strong>If they’re optional, they don’t really need to be there</strong>. Such a form would likely scare off a user seeing it for the first time. Show only what the person needs to register; the rest can be filled in later.</em></p> <p class="showcase"><a href="http://www.tumblr.com/"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/tumblr_signup.png" alt="Tumbler Signup" height="325" width="480"></a><br> <em><a href="http://www.tumblr.com/">Tumblr</a> has one of the shortest sign-up forms around. Just three fields: email, password and the URL of your new blog.</em></p> <p class="showcase"><a href="http://www.basecamphq.com/signup"><img src="http://media.smashingmagazine.com/images/usability-problems-solutions/basecamp_signup.png" alt="Basecamp signup" height="286" width="480"></a><br> <em>The <a href="http://www.basecamphq.com/signup">Basecamp</a> sign-up page has a smart trick. It has no website navigation aside from a home-page link. This keeps the user focused on the sign-up process, without any distractions or means of leaving the page.</em></p> <h3>Less Thinking</h3> <p>Usability is all about making things easier to use. <strong>Less thinking, less frustration</strong>. A website should do all the work and present visitors only with the things they’re looking for. Usability is also about the <strong>experience people have using your website</strong>, so attention to detail matters, as do the presentation and feel of the page.</p> Drop your thoughts on these and any other usability problems you run into in the comments section </DIV>