{"id":7122,"date":"2013-11-05T09:45:27","date_gmt":"2013-11-05T15:45:27","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=7122"},"modified":"2022-11-22T10:57:40","modified_gmt":"2022-11-22T16:57:40","slug":"7-web-application-development-mistakes-that-kill-usability","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2013\/11\/7-web-application-development-mistakes-that-kill-usability\/","title":{"rendered":"7 web application development mistakes that kill usability"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\" alt=\"Education\" width=\"76\" height=\"100\" class=\"alignleft size-full wp-image-725\" \/>No web developer wants to create a bad user experience. Nobody sets out to make a confusing and frustrating interface that drives users away. But, the sad truth is&#8230;this happens far too often. <\/p>\n<p>How often? <\/p>\n<p>According to the <a target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">online marketing institute<\/span><\/a>, the problems caused by a poorly designed interface are substantial. The numbers indicate that: <\/p>\n<ul>\n<li>85% of users abandon a site due to poor design<\/li>\n<li>83% of users leave because it takes too many clicks to get what they want<\/li>\n<li>62% of users gave up looking for an item while shopping online<\/li>\n<li>40% of users never return to a site because the content was hard to use<\/li>\n<li>50% of sales are lost because visitors can\u2019t find content<\/li>\n<\/ul>\n<p>The fact is, usability is becoming an essential aspect of web application development. User expectations have changed. Modern end users expect to pick up a web app and understand how it works. Confusing interfaces will only frustrate users and drive them away. <\/p>\n<p>However, many developers build applications which do just that. They unwittingly make development mistakes that hurt their web application\u2019s usability. In doing so, they accidentally alienate their users. <\/p>\n<p>What are these mistakes? In what ways do developers accidentally create interfaces that frustrate their users? We posed those questions to a few experts in the area of usability, and have compiled their feedback below. Here are 7 development mistakes that kill web application usability:<br \/>\n<a name=\"20131104\"><\/a><!--more--><\/p>\n<h3>1. Inconsistent approaches to common functions<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cMost usability mistakes on the web involve developers forgetting that people don\u2019t want to have to struggle to figure out how to use the interface,\u201d explains Steven Swimmer, Web and Digital Strategy consultant at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Swimmer Media']); \" href=\"http:\/\/swimmermedia.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Swimmer Media<\/span><\/a>. \u201cThings that may seem obvious to a developer are not at all obvious to users. Unless your odd interface adds utility, then it\u2019s not worth doing. If there is an odd interface that adds some utility but is misunderstood by users, you need to provide some integrated means of showing people how to use the app.\u201d\n<\/p><\/blockquote>\n<p>The desire to create something \u201cnew and innovative\u201d can become one of the biggest stumbling blocks for developers. Delivering a unique user experience, or new approaches to common functions, is more likely to confuse users than impress them. Most users won\u2019t bother figuring out how your great new interface works, or will simply become frustrated when a seemingly common function doesn\u2019t behave as expected. Here\u2019s one great example:<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cUsers expect that commands will be the same from site to site or app to app,\u201d says Ian Lamont, author of <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Ian Lemont']); \" href=\"http:\/\/twitter.in30minutes.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Twitter In 30 Minutes<\/span><\/a>, <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Ian Lemont']); \" href=\"http:\/\/googledrive.in30minutes.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Google Drive &#038; Docs In 30 Minutes<\/span><\/a>, and <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Ian Lemont']); \" href=\"http:\/\/dropbox.in30minutes.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Dropbox In 30 Minutes<\/span><\/a>. \u201cBut it doesn&#8217;t always work that way. Take Dropbox. I tell users that deleting a file in Dropbox is like trying to kill a vampire. You may think you&#8217;re deleting something by selecting a file and clicking the &#8220;Delete&#8221; key, or dragging it into the trash on your desktop. The file isn&#8217;t dead yet. The only way to drive a stake through its heart is to log on to Dropbox.com, use the &#8220;Show Deleted Files&#8221; option, and then select &#8220;Permanently Delete&#8221;. Sound complicated? Absolutely. Dropbox has reasons for setting it up this way, but it&#8217;s not intuitive, and leaves a lot of users frustrated or vulnerable.\u201d\n<\/p><\/blockquote>\n<h3>2. Ambiguous error messages<\/h3>\n<figure id=\"attachment_7134\" aria-describedby=\"caption-attachment-7134\" style=\"width: 173px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/11\/origin_3575367541.jpg\" alt=\"photo credit: cowbite via photopin cc\" width=\"173\" height=\"126\" class=\"size-full wp-image-7134\" \/><figcaption id=\"caption-attachment-7134\" class=\"wp-caption-text\">photo credit: <a href=\"http:\/\/www.flickr.com\/photos\/cowbite\/3575367541\/\">cowbite<\/a> via <a href=\"http:\/\/photopin.com\">photopin<\/a> <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\">cc<\/a><\/figcaption><\/figure>\n<p>When a user makes a mistake, or attempts an unauthorized action, what happens? Do they receive a confusing error message, or an error message with clear advice on how to resolve the issue? In my experience, it\u2019s typically the former. Most error messages mean nothing to the user, and provide no guidance as to the user\u2019s next steps. The result: frustration. <\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cPoorly written or ambiguous error messages can be frustrating to users,\u201d explains David Ciccarelli, CEO and co-founder <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Voices']); \" href=\"http:\/\/www.voices.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Voices.com<\/span><\/a>. \u201cDon&#8217;t give the users an error number and code that means nothing to them. Instead, say \u201cSorry, that didn&#8217;t work. Try this instead\u2019.\u201d\n<\/p><\/blockquote>\n<h3>3. Changing navigation element location<\/h3>\n<p>One of the most common ways developers annoy their users: They accidentally turn their applications into scavenger hunts. They place navigation elements, or essential buttons, on different places across screens&#8230;which frustrates users to no end. <\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cChanging where an element is located from page to page or screen to screen will cause your users to hunt for a feature,\u201d explains Ciccarelli. \u201cI once used an enterprise application that had the main navigational tabs change order depending on which part of the app I was in. Terribly frustrated, we ended up terminating our contract only to switch to a competitor who is often praised for good usability.\u201d\n<\/p><\/blockquote>\n<h3>4. Giving the user too many competing options<\/h3>\n<p>Your application must provide the user with a clear path. Take the screenshot below, for example. When a user logs in, the application delivers three clear options. Sure, the application is capable of many more tasks, but adding all of those options will only complicate the process for the user. Don\u2019t focus on the application\u2019s capabilities. Focus on the user\u2019s goals. <\/p>\n<figure id=\"attachment_7131\" aria-describedby=\"caption-attachment-7131\" style=\"width: 540px\" class=\"wp-caption alignright\"><a href=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/11\/Main-menu1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/11\/Main-menu1.png\" alt=\"The user&#039;s three main options are clearly emphasized\" width=\"540\" height=\"278\" class=\"size-full wp-image-7131\" \/><\/a><figcaption id=\"caption-attachment-7131\" class=\"wp-caption-text\">The user&#8217;s three main options are clearly emphasized<\/figcaption><\/figure>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cWhile the user should be in control of the experience, too many competing options can make decisions difficult,\u201d explains <span style=\"color: red;font-weight: bold\">Caroline de Gruchy<\/span>, an experienced web designer. \u201cThe options on a page should be mutually exclusive. I had a client who wanted three different calls to action leading to 3 very similar pages, leading back to the same information afterwards. How was the client to decide where to go? Clicking 3 separate pages that tell you the same thing wastes my time and shows no respect.\u201d\n<\/p><\/blockquote>\n<h3>5. Lengthy Registration process <\/h3>\n<p>One of the big complaints surrounding the healthcare.gov fiasco was the registration process. Users were forced to complete a lengthy registration process (that frequently failed) before they could see available healthcare plans. This is a usability no-no. If you must ask for user information before granting access, keep that info to a minimum. Lengthy registration processes will only drive away potential customers.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cSome designers\/developers like to have 10 pages for a new registration,\u201d says <span style=\"color: red;font-weight: bold\">Jeanine Swatton<\/span>, an engineer \u2013 iOS and Ruby on Rails Developer \u2013 who teaches iOS development at Silicon Valley University and UCSC Extension. \u201cDon&#8217;t they realize that after the 2nd page, they lose the potential customer? Keep it simple &#8211; a one click sign up process asking minimal information. Allow users to add their profile later.\u201d\n<\/p><\/blockquote>\n<p>Another point on this topic: Make sure you tell the user just how much time the registration process will require. Nobody wants to get started on a registration process, only to realize later that the registration form is 10 pages long and requires a half hour of their time.<\/p>\n<h3>6. Small clickable areas<\/h3>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cBecause your visitors might be using a keyboard and mouse with a widescreen monitor or a smartphone with a small touch screen, you need to design your UI with both users in mind,\u201d says Noah Nehlich, owner of <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Structure Studios']); \" href=\"http:\/\/www.structurestudios.com\/website\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Structure Studios<\/span><\/a>. \u201cSmall text links can be very hard to click successfully on a mobile device, and might drive people away in frustration when they can\u2019t reach the information they need.\u201d\n<\/p><\/blockquote>\n<p>This is an issue on two levels. First, clickable areas must be as big as they appear. What does that mean? The image below highlights this issue. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/11\/clickable1.png\" alt=\"clickable\" width=\"540\" height=\"196\" class=\"alignleft size-full wp-image-7132\" \/><\/p>\n<p>You\u2019ll notice that what appears to be a clickable button is actually a small text link inside a box. Clicking the button itself will do nothing&#8230;unless the user clicks the text. Imagine how frustrated your users will become when they repeatedly click an apparent button that doesn\u2019t actually do anything.<\/p>\n<p>Secondly, creating small clickable areas (as described above) can prove frustrating for the growing number of mobile users. These days, you must build an application that functions well on any device&#8230;which calls for links and buttons that are easily clickable on a touchscreen. Brian Maggi, Director of Product Marketing at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Sencha']); \" href=\"http:\/\/www.sencha.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Sencha<\/span><\/a> shares a good piece of advice for making web apps usable on a mobile device:<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cDesign for a single thumb,\u201d he says. \u201cThis means making UI hit zones big enough for the thumb, the fattest finger. Make related things closer in proximity too, because it\u2019s also the shortest.\u201d\n<\/p><\/blockquote>\n<h3>7. Blaming negative feedback on a \u201cfear of change\u201d<\/h3>\n<p>I\u2019m seeing a problem crop up more and more: When cloud-based software companies redesign their interface, they blame negative user feedback on a \u201cfear of change.\u201d While that does happen, it\u2019s a dangerous approach to user feedback. Sometimes, interface redesigns remove features that users loved, or complicate common actions. While many users do dislike change, don\u2019t automatically group all complaints in that bucket. <\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cI get the sense that some developers and UX designers are not thinking about the needs of their users when they try to follow minimalist interface ideals that seem to be the rage in San Francisco and Silicon Valley,\u201d says Lamont. \u201cNot everyone wants that. I think minimalist interfaces actually create more clicks and more frustration for users when the apps have a lot of functions or features. People also don&#8217;t like it when software companies make a radical change to an interface. Microsoft was criticized when it switched Office to the ribbon interface. Now a lot of Web software companies are feeling the heat.\u201d<\/p>\n<p>\u201cI have documented one case involving Hootsuite, a popular Twitter client that recently changed a critical UX element that infuriated many paying customers. The company blamed customers&#8217; &#8220;Fear of change&#8221; as the reason for the outcry, instead of acknowledging that the UX change had been poorly thought out in terms of its most dedicated users.\u201d\n<\/p><\/blockquote>\n<p>What do you think? Would you add anything to this list? If so, feel free to share in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No web developer wants to create a bad user experience. Nobody sets out to make a confusing and frustrating interface that drives users away. But, the sad truth is&#8230;this happens far too often. How often? According to the online marketing institute, the problems caused by a poorly designed interface are substantial. The numbers indicate that: &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.mrc-productivity.com\/blog\/2013\/11\/7-web-application-development-mistakes-that-kill-usability\/\"> <span class=\"screen-reader-text\">7 web application development mistakes that kill usability<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","slim_seo":{"title":"7 web application development mistakes that kill usability - mrc&#039;s Cup of Joe Blog","description":"No web developer wants to create a bad user experience. Nobody sets out to make a confusing and frustrating interface that drives users away. But, the sad truth"},"footnotes":""},"categories":[8],"tags":[43,15],"class_list":["post-7122","post","type-post","status-publish","format-standard","hentry","category-education","tag-usability","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/comments?post=7122"}],"version-history":[{"count":21,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7122\/revisions"}],"predecessor-version":[{"id":13893,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/7122\/revisions\/13893"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=7122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=7122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=7122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}