9 Common Usability Mistakes In Web Design — Smashing Magazine

By now, all great designers and developers realize the significance of usability due to their work. Sites that are usable offer great user experiences, and also terrific user experiences lead to happy clients. Delight and meet your customers, as opposed to frustrate and annoy them with design decisions that are smart. Listed below are 9 usability issues that websites commonly face, plus a few recommended solutions for each of them. [Last updated: Nov/30/2016]

You may also be interested in the following related posts:

1. Tiny clickable areas

Hyperlinks are intended to be clicked, and to make them usable, so it is sensible to make certain that they’re simple to click on. Here’s a good example of hyperlinks that are much too little. 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 Exact Same interface the comments link, component, but this time with a numerical area:

Newspond comments link.

Why would we need a clickable region? Simple. Because our hands motion with the mouse is exact. A sizable clickable area makes it much easier to hover the mouse cursor over the hyperlink. To ensure we receive a big clickable region, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property. Here’s the code:

37signals article on padded link aims.  According to the guide, padding provides users with "a feeling of relaxation.  It's just quite simple to click on the hyperlinks.  It feels like the hyperlinks are working with you instead of against you."

2. Pagination employed for the wrong intention

Pagination refers to splitting up content . This is often found on websites that have products in a shop long lists of things; for instance or pictures in a pub. Utilizing pagination with this function makes sense because displaying too many things on a single page will produce the page slower to download and procedure.

FeedMyApp employs pagination in the perfect way: to exhibit its vast list of programs in digestible chunks.

However there is yet another manner that pagination is utilized online today. Like website articles webpages, are occasionally split into many pages. Why is this done? What is the benefit? It's improbable that the guide is so long since it needs pagination; in the majority of instances, it is utilized to improve page views. Because a great deal of blogs and magazines receive their revenue through advertising, obtaining more page views (i.e. person page loads) fosters their viewing statistics and permits them to control more to every ad.

_The Wired article about Google's logo is split into eight pages, making it very difficult to read. _

It presents two issues although this may seem to squeeze cash from the ads. The first is the fact that it is just really irritating. Needing to load several pages simply to read one article is not fun. You are making a barrier to your customers 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 generate sense of what it is all about and index it appropriately. If the content is split into many pages, it is diluted, therefore every page makes less sense on its and holds less key words about its topic. This may negatively influence the rank of this article in search engine results.

3. Copy page names

Every Web page's title is crucial. Page titles will be the parts of text we write between thetitle> tags in thehead> part of our HTML code. Sometimes people produce a generic title whilst working on their website's template -- their website's title, such as -- and then recreate precisely exactly the same title across the whole site. This is incorrect as it robs every page of a few important advantages.

The first benefit is that a good title communicates to your customers a great deal of information about what the page is all about. If they're in the perfect spot or not people may quickly figure out. Bear in mind that this title doesn't just show at the peak of the browser window; it is also shown on the search engine results pages. When folks see a list of outcomes on an internet search engine like Google, they see the page title to figure out what each page is all about. This alone is a excellent reason to devote a little time optimizing your page names.

The second reason has to do with SEO. Search engines require different information to position the outcomes of a particular query. Page title is just one of the main parts of information that they use to gauge how relevant your page will be to a particular search phrase. This doesn't mean you ought to load as many key words as you can into the title -- that defeats the very first benefit -- however you need to ensure that every title succinctly describes the content of the page, for example a few words you think people will look for.

Here's a good example of a page title. This really is really a Smashing Magazine page title as found in Safari:

Smashing Magazine page title

Here we've got the title of this guide, the category of this guide and the title of the site. Placing the title of this site last sets more focus on what the page itself is all about, as opposed to onsite branding, which is still there. Here's what the HTML code looks like in the markup:

Vintage and Blues WordPress Topics | Freebies | Smashing Magazine

And here is the way the page is displayed in a Google search results:

Smashing Magazine SERP

4. Content That's difficult to scan

To make certain that your site is usable, you can't only have a good design; you additionally need good copy. Copy is a phrase used to refer to all of the text content. Yes, very good design will direct your customers around the site, focus their attention on the things that thing and help them make sense of data chunks; however, visitors will still must browse text to process info. This makes copy an essential part of your total site design.

Before you can write good copy, however, you will need to comprehend how people will actually see your site. Don't assume that your customers will read everything from top to bottom. That would certainly be excellent, but unfortunately that is not the way it functions. The Web bombards people and most of us try to eat as much of it as you can. This leads to very frantic browsing behaviour: we leap from one piece of content to another, from one site to the next. People today tend not to read websites top to bottom; they begin reading anything pops out in them, and proceed to the next thing that captures their interest. The pattern looks a little

BasecampThe Basecamp landing page.

The circles and the figures indicate the regions and the sequence in which these elements are looked at by them, respectively. Users dash to another from a single area of the page. You will need to structure your copy a way to take advantage of this browsing pattern. Listed below are a few pointers:

  • Have a couple points of attention. These are the sections of your page that draw the attention of visitors. This is sometimes achieved by stronger, higher-contrast colors and larger fonts. You may also use images, such as icons, next to text to provide these areas even more visual pull on.
  • Each focus stage should ideally be accompanied by a descriptive heading. Visitors need to be able to understand exactly what this piece of content is all about, without reading the copy any farther. Don't make headings vague or mysterious to draw folks in. Keep them educational yet succinct. People today want information and them annoy.
  • Any additional text ought to be brief and simple to digest. Provide just the essentials, and strip the remainder . In most cases, additional text that replicate writers put in to earn a stage ambiguous only adds weight. Long paragraphs might read bite-sized parts of text but put off people. Cut your copy down till no fat is left to cut.

The "Why you need to use OpenOffice" page could definitely use improvement. No points of attention are supplied, apart from the massive banner in the top; along with the copy is piled together in large chunks, making it daunting to see.

Items program's features page divides each attribute into little bite-sized segments, each with its own icon and going. This makes the list simple to scan. To earn copy more effective, list benefits as opposed to feature titles.

Smashing Membership. Just sayin'.

5. How you can get in touch

User participation is important if you want to establish a successful community, and communities are significant if you would like to build successful websites and social Web programs. User participation can be important if you want to build loyal clients. Instantly answering people's queries and repairing their problems doesn't only indicate that you've got good customer serviceit means you attention, along with your clients and customers will enjoy it.

But a lot of sites do not give visitors a simple channel for getting in contact with the company. Some websites do not even have an email address or contact form on them.

CocaCola contact page

After you click on the contact link on the official Coca-Cola site. You are presented with this page. No email. The majority of the links lead to automatic FAQs; the feedback form requires your address and age and has a 500-character limitation; the "Publish an idea" form is two pages long, with terms and conditions connected. It doesn't seem like Coca-Cola actually would like you to get them.

Sure, setting your email on the Web will bring in a whole lot of spam, however there are two or three solutions.

Enkoder is my favourite solution for placing email addresses on the Web. Enkoder is another one as a Web app: a one for Mac OS X, and also a program that comes in two different flavors. It encrypts any email address that you provide it and provides you a bunch of gibberish JavaScript code to place on your page. After the page with the code heaps, your email actually appears as a clickable hyperlink. Bots scouring for email addresses won't be able to interpret the code.

You can also use contact types to circumvent the problem of showing your email address onto a page; if you don't set some Captchas or other junk protection mechanism in 41, however, you are still going to receive spam. Remember that things like Captchas are barriers to user interaction and will likely hamper the user experience.

Forums to the rescue. Forums are a communication channel that could be an alternative way for users to get in contact. A public forum is better than a simple contact form or email simply because your clients can help each other on a forum. If you do respond with an individual client, another customer may assist that person out, solving his or her problem.

GetSatisfaction is a Web app that functions just like a forum. Users can post their issues and opinions and employees and clients can react 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, a two-way communication channel like this is a terrific way to stay in contact with your clients.

GetSatisfaction AppleThe Prior GetSatisfaction forum for Apple.

6. No way to hunt

A great deal of people begin searching for a search box. Maybe they do not need to invest some time learning the website's navigation structure and know just what they're searching for. Jakob Nielsen calls these folks search-dominant consumers:

Our usability studies demonstrate that more than half of users are search-dominant, roughly a fifth of the users are link-dominant, along with the remainder exhibit mixed behaviour. When they enter a site, the search-dominant consumers will go straight for the search they would like to locate specific information as quickly as possible and are task-focused.

Whether you run an internet shop or website, you will need search. Folks may come searching for a product or for a post they recall reading some time back, and chances are they'll want to locate it. The good news, in case you have implemented search is the fact that it is very easy to do.

You do not have to code your own search attribute; search engines like Google and Yahoo have very likely already indexed most, if not all, of your website's pages, so all you will need to do is pick the one you would like to use and also plug in a search box. Here's the form code to using Google as the search engine:

And here is the one for Yahoo:

To make it function, all you need to do will be alter the worth of this "hidden" area to your website's domain. This will restrict the reach of this Google or Yahoo search query. You may also want to alter the value of this "Publish" text to express anything you want.

7. Too much performance that requires enrollment

Your site may have characteristics or some content that require visitors to register prior to using. That is excellent, but you should be careful how much material is put behind this enrollment shield. Very interactive Web applications, such as file editing, email and job management, limit 100% of their performance for users. Other websites, such as news websites that are social, don't. I can browse all the stories on Digg and Reddit without having to log in; users don't have to differentiate themselves to enjoy some performance.

Be careful that you don't lock out features that do not really need user identification when you employ a barrier. Some blogs require people to register prior to submitting. Sure, that will significantly decrease spam, but it will also significantly decrease the number of comments you see, also.

The amount of barriers you will find affect user participation on your site. User participation will be almost surely increased by barriers such as enrollment. Indeed, once users begin using your site, they will more likely join, since they're already involved.

GetSatisfaction login

The GetSatisfaction interface permits you to fill in your opinion about a company or product and click on the "Post" button again. Instead of seeing your feedback posted, you are greeted with a sudden "Log in or register" message. Considering the client could be frustrated.

The landing page for Pixlr, an internet graphic editing app, has a link titled "Jump in' begin!" By clicking on it, the app is opened. No trials you test drive the app straight away.

8. Old permalinks pointing

A permalink is a link to a page that is not intended to alter. Issues occur, however, as soon as a site moves to a different domain or has its own construction reorganized. Unless something's done on them old permalinks pointing to existing pages on the site become lifeless. That something is called a 301 redirect.

301 redirects are instructions stored on your server that redirect visitors to pages. Consequently, if a person arrives on your site using an old link, they wont observe a 404 error page ("Page not found"): that the 301 redirect forwards them to the perfect location, provided that you've set this up properly. The quantity "301" designates the kind of redirect which it is: irreversible.

Frye Wiles 404 pageFrye / Wiles 404 error.

There are many strategies. How they're implemented depends on the Web server you are using. Listed below are the fundamentals of tackling 301 redirects about the Web server right now, Apache.

The following code should go in a file called ".htaccess" in your main site folder. Yes, the file name begins with a stop. This implies it is a system tray, which file browsers that are conventional have a tendency to hide by default. Consequently, if you can't view it using your file browser or FTP client, turn your "Screen invisible files" option on. Just create or (if it is already there) edit the file using the editor of choice. This file is retrieved a visitor arrives on your site, and some redirect rules you put in there will be implemented.

Here's a straightforward 301 redirect code:

RewriteEngine on
Redirect 301 / /oldpage.html /newpage.html

The code is quite self-explanatory. When somebody tries to get “yoursite.com/oldpage.html,” they will immediately be redirected to “yoursite.com/newpage.html.” The "RewriteEngine on" piece at the top ensures that the mod_rewrite engine is switched on (the default is off). Here is the engine that manages the redirects.

9. Long registration forms

Registration forms are barriers. They're the task, along with barriers as it takes effort to fill them in . People must commit time and effort to register, and then they must invest even more time and effort in the future to recall what user name and password that they used.

By creating the form as brief as 14, we could shrink this barrier. In the conclusion of the afternoon, the aim of a registration system is simply to be able to recognize every user; consequently, the requirements are as a unique identifier, such a user name or email address, and a password. If you don't want more information, do not request it. Keep the form brief.

The ReadOz signup form is extremely long. On closer inspection we find that half of the fields are optional. If they're optional, they do not actually have to be there. Such a form would likely scare off a user viewing it for the very first time. Show only the remainder could be filled in later.

Tumblr has among the shortest sign-up forms around. Only 3 disciplines: password, email as well as the URL of your site.

Basecamp signupThe Basecamp signup page has a smart trick. It does not have any site navigation aside from a home-page link. This keeps the user focused on the procedure that is signup, of leaving the page without any distractions or way.

Less Thinking

Usability is about making things easier to use. Less believing, less frustration. A site should do current visitors and all the work just for. Usability is also about the experience people have using your site, so attention to detail matters, as do the presentation and feel of the page.

Drop your thoughts about these and any additional usability issues you run into in the comments section below! (al)

About The Writer

9 Common Usability Mistakes In Web Design