By today, all good designers and programmers see the importance of usability for their work. Usable sites offer you great user experiences, and wonderful user experiences lead to happy customers. Delight and satisfy your customers, as opposed to frustrate and annoy them, using smart design decisions. Here are 9 usability problems that sites generally face, plus a few recommended solutions for every one of these. [Last updated: Nov/30/2016]
You may also be interested in these related posts:
1. Tiny clickable areas
Hyperlinks are all made to be clicked, to make them usable, it is sensible to ensure that they’re simple to click on. Here’s a good example of links that are far too small; clicking them is more difficult than it needs to be. These are the comments connections on Hacker News, a social news site. (Clickable regions are highlighted in red):
Here’s a good example of exactly the same interface element, the comments link, but this time with a much larger clickable area:
Newspond comments link.
Why would we need a larger clickable area? Simple. Because our hand movement with the mouse is not very exact. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure that we receive a sizable clickable area, we can either make the whole link larger or increase the cushioning around the link using the CSS “cushioning” property. Here’s the code:
37signals article on cushioned link aims. According to the guide, padding provides users with "a feeling of comfort. It's just really simple to click the links. It seems like the links are working together with you instead of against you."
2. Pagination used for the wrong intent
Pagination means dividing content on many pages. This can be found on sites that have long lists of things; for example, goods in a shop or pictures in a gallery. Using pagination for this function makes sense because displaying too many things on a single page would produce the webpage slower to obtain and process.
FeedMyApp utilizes pagination in the ideal way: to display its vast collection of apps in digestible chunks.
But there's yet another manner that pagination is used online today. Content pages, like blog posts, are occasionally divided into many pages. Why is this done? What's the gain? It's improbable that the guide is so long that it requires pagination; in the majority of instances, it's used to improve page views. Because a lot of magazines and blogs get their revenue through advertisements, getting more page views (i.e. person page loads) fosters their viewing statistics and allows them to control more for each advertisement.
_The Wired article about Google's logo is divided to eight pages, which makes it very difficult to read. _
While this can appear to be a simple way to squeeze money from the own ads, it presents two major problems. The first is the fact that it is just really, really annoying. Needing to load a few pages simply to read one article is not fun. You are making a barrier for your customers that does not have to be there.
The second reason has to do with SEO (search engine optimization). Search engines use the information on your webpage to generate sense of what it's about and index it accordingly. In case the content is split into several pages, it's diluted, and so each page makes much less sense on its own and holds less keywords about its topic. This may negatively impact the ranking of this content in search engine success.
3. Copy page titles
The name of each Web page is important. Page titles will be the parts of text we write involving thetitle> tags in thehead> section of our HTML code. Sometimes people make a generic name whilst working on their site's template -- their site's title, for example -- and then re-use exactly the identical name across the whole site. This is wrong as it robs each page of a few important benefits.
The first advantage is that a great name communicates to your customers a lot of information about just what the webpage is about. Individuals may quickly figure out if they're in the ideal spot or not. Keep in mind that this name does not just show on top of the browser window; it is also displayed around the search engine results pages. If people see a listing of outcomes on a search engine such as Google, they read the page name to determine what each page is about. This alone is a fantastic enough reason to devote a while optimizing your page titles.
The second reason has to do with SEO. Search engines need different information to position the outcomes of a particular query. Page name is just one of the more important parts of information that they use to judge how relevant your page will be to a particular search phrase. This does not mean you should load as many keywords as possible into the name -- that defeats the first advantage -- but you ought to make certain that each name succinctly describes the content of the webpage, such as a few words you think people will hunt for.
Here's a good example of a good page name. This can be a Smashing Magazine page name as found in Safari:
Here we have the name of this guide, the category of this guide and the title of the site. Placing the title of this site last puts more focus on just what the webpage itself is about, instead of on website optimization, which is still there. Here's what the HTML code looks like in the markup:
Classic and Blues WordPress Themes | Freebies | Smashing Magazine
And here is how the page is displayed in a Google search result:
4. Content That's difficult to scan
To ensure that your site is usable, you can't only have a good design; you need good copy. Duplicate is a phrase used to refer to all the text content on a website. Yes, very good design will direct your visitors around the site, focus their attention on the things that matter and help them make sense of data chunks; however, people will still need to browse text to process information. This makes copy an essential part of your total site design.
Before you're able to write good copy, however, you need to know how individuals will really see your site. Do not assume that your customers will read every thing from top to bottom. That would surely be excellent, but unfortunately that is not how it functions. The Internet bombards people with information, and most of us try to consume as much of it as possible. This leads to very frantic browsing behavior: we jump from one part of content to another, from one site to the next. Folks tend not to read sites top to bottom; they start reading whatever pops out in them, and proceed to the next thing that captures their interest. The pattern looks somewhat like this:
The Basecamp landing page.
The red circles indicate the regions where people have a tendency to focus their disposition, and the numbers indicate the order in which they appear at these elements. Users dash from a single intriguing part of the webpage to another. To take advantage of this hectic browsing pattern, you have to structure your copy a specific way. Here are a Couple of pointers:
- Have a couple points of focus. These are the pieces of your webpage that attract the interest of people. This can be achieved by stronger, higher-contrast colors and bigger fonts. You can even utilize images, such as icons, alongside text to provide these areas even more visual pull.
- 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 piece of content is about. Do not make headings vague or mysterious to draw individuals in. Maintain them insightful yet concise. Folks want information quickly, and withholding it only disturbs them.
- Any other text should be short and simple to digest. Provide just the fundamentals, and strip the rest. Typically, additional text that copy writers put in to earn a point less ambiguous simply adds dead weight. Individuals will read bite-sized parts of text but have been set off by long paragraphs. Cut your copy down till no fat is made to cut.
The "Why you should use OpenOffice" page can definitely use improvement. No clear points of focus are provided, aside from the large banner in the very top; along with the copy is grouped together in large chunks, which makes it daunting to browse.
Items program's features page divides each feature into small bite-sized sections, each with its own icon and going. This produces the record simple to scan. To earn copy much more effective, list actual benefits instead of feature names.
Smashing Membership. Just sayin'.
5. How you can get connected
User engagement is important if you would like to establish a thriving community, and communities are important if you would like to build successful sites and social networking apps. User engagement is also important when you would like to build loyal customers. Quickly answering people's questions and repairing their problems does not just signify that you have great customer service --it means you care, along with your customers and customers will appreciate it.
But a lot of sites still do not give people a simple channel for getting in touch with the company. Some sites do not even have an email address or contact form on these.
After you click the contact link on your official Coca-Cola site. You are presented with this site. No email, no telephone number. The majority of the links lead to automated FAQs; the comments form requires your age and address and has a 500-character limitation; the "Submit a concept" type is two pages long, depending on terms and conditions attached. It does not seem like Coca-Cola really wants you to contact them.
Sure, setting your email on the Web will likely attract a whole lot of spam, but there are two or three solutions.
You can also use contact types to circumvent the issue of displaying your email address onto a webpagenevertheless, you're still likely to get spam unless you put some great Captchas or other junk protection mechanism in place. Keep in mind that things such as Captchas are barriers to user interaction and will likely degrade the user experience.
Forums to the rescue. Online forums are a terrific communication channel that could be a different way for consumers to get in touch. A public forum is better than a very simple contact form or email simply because your customers can help each other onto a forum. Even in the event that you don't personally respond to a customer, another useful customer may help that person out, solving their problem.
GetSatisfaction is an Internet app that functions just like a forum. Users may post their problems and feedback regarding topics on the board, and customers and staff can react to them. Users may add comments to elaborate on their difficulty. If you go for a hosted solution such as GetSatisfaction or roll your own message board, a two-way communication channel like this is a good way to stay in contact with your customers.
The Prior GetSatisfaction forum for Apple.
6. No way to search
A great deal of individuals start looking for a search box after they arrive a webpage. Maybe they know exactly what they're looking for and do not wish to invest time learning the site's navigation structure. Jakob Nielsen calls these individuals search-dominant consumers:
Our efficacy studies demonstrate that more than half of all users are search-dominant, about a fifth of their users are link-dominant, along with the rest exhibit mixed behavior. The search-dominant consumers will usually go right for the search when they enter a site: they aren't interested in looking round the website; they are task-focused and want to locate specific information as fast as possible.
Whether you operate an online store or website, you need search. Individuals can come looking for a particular product or to get a post they recall reading some time back, and odds are they'll want to locate it with a quick search. The good news, if you have not already implemented search on your site, is the fact that it is very simple to accomplish.
You do not need to code your own search feature; search engines such as Google and Yahoo have probably already indexed most, or even all, your site's pages, therefore all you need to do is select the one you want to utilize and plug in a search box. Here's the type code for using Google as the search engine:
And here is the one for Yahoo:
To make it work, all you need to do is alter the worth of this "hidden" field to your site's domain name. This will limit the scope of this Google or Yahoo search query to just your site. You might also wish to change the value of this "Submit" text to state whatever you desire.
7. Too much performance That Needs enrollment
Your site might have some content or features that require visitors to register prior to using. That's excellent, but you should be careful how much content is set behind this registration defense. Very interactive Internet applications, like email, document editing and job management, restrict 100% of the performance for registered users. Other sites, such as social news sites, do not. I can browse all of the stories on Digg and Reddit without having to log in; users do not have to differentiate themselves to delight in any performance.
When you implement a log-in barrier, then be careful that you don't lock away features that do not really need user identification. Some blogs require individuals to register prior to posting. Sure, that will significantly decrease spam, but it is going to also significantly decrease the number of comments you visit, also.
User involvement on your site is affected by the amount of barriers there are. Eliminating barriers such as enrollment will almost surely increase user involvement. Really, once users start using your site, they will more likely sign up, because they're currently involved.
The GetSatisfaction interface allows you to fill in your comment about a company or product and click the "Post" button again. Rather than seeing your comments posted, you're greeted with an unexpected "Log in or register" message. Not great, taking into consideration the customer may already be frustrated.
The landing page for Pixlr, an online picture editing app, has a link titled "Jump in' get started!" Clicking it opens the app. No trials, no enrollment; you test drive the app straight away.
8. Aged permalinks pointing
A permalink is a link to a page that is not meant to alter; for example, a link to a site article such as the one that you're reading today. Issues occur, however, when a site moves to another domain name or has its structure reorganized. Old permalinks pointing to existing pages on the site become dead unless something is done on them. That something is called a 301 redirect.
301 redirects are small directions stored on your own server that divert visitors to pages that are correct. Consequently, if a person arrives on your site using an old link, they will not observe a 404 error page ("Page not found"): that the 301 redirect forwards them to the ideal location, provided that you have set this up properly. The quantity "301" designates the type of redirect that it's: permanent.
Frye / Wiles 404 mistake.
There are numerous techniques 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 Internet server right now, Apache.
The following code should go in a file known as ".htaccess" in your main site folder. Yes, the file name begins with a full stop. This means it is a system file, which conventional file browsers have a tendency to conceal by default. Consequently, if you can't see it using your file browser or FTP client, turn your "Screen invisible files" option on. Just make or (if it is there) edit this file using a editor of choice. This file is retrieved whenever a visitor arrives on your site, and some other redirect rules which you put in there'll be implemented.
Here's a straightforward 301 redirect code:
RewriteEngine on Redirect 301 / /oldpage.html /newpage.html
The code is quite self-explanatory. When someone tries to access “yoursite.com/oldpage.html,” they will immediately be redirected to “yoursite.com/newpage.html.” The "RewriteEngine on" piece on top ensures that the mod_rewrite engine is turned on (the default is off). Here is the engine that manages the redirects.
9. Long registration kinds
Registration forms are all barriers. They are barriers as it requires effort to meet with them, along with the task itself is no pleasure. People have to invest effort and time to register, and then they have to invest even more time and effort in future to recall what user name and password that they used.
We could shrink this obstacle by making the sign-up form as short as possible. In the end of the afternoon, the intention of a registration system would be simply to be able to recognize each user; therefore, the only prerequisites are a exceptional identifier, such as a user name or email address, and a password. In case you don't need more details, do not request it. Maintain the form short.
The ReadOz sign-up form is very long. On closer inspection, we discover that half of the fields are all optional. If they're optional, they do not really need to be that there. This type of form would likely scare off a consumer seeing it for the first time. Show only what the individual must register; the rest could be filled in afterwards.
Tumblr has one of the shortest sign-up forms around. Only three areas: password, email and the URL of your new blog.
The Basecamp signup page features a intelligent trick. It does not have any site navigation besides a home-page link. That keeps the user focused on the sign-up process, without any distractions or means of leaving the webpage.
Usability is all about making things easier to use. Less thinking, less frustration. A site should do all of the work and present visitors only with what they're looking for. Usability is concerning the experience individuals have using your site, thus attention to detail matters, as do the demonstration and feel of the webpage.
Reduce your thoughts on these and some other usability problems you run into in the comments section below! (al)