{"id":8221,"date":"2014-08-19T10:00:43","date_gmt":"2014-08-19T15:00:43","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=8221"},"modified":"2022-11-22T11:11:40","modified_gmt":"2022-11-22T17:11:40","slug":"4-major-web-application-usability-trends-in-2014","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2014\/08\/4-major-web-application-usability-trends-in-2014\/","title":{"rendered":"4 major web application usability trends in 2014"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-725\" alt=\"Education\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\" width=\"76\" height=\"100\" \/><span style=\"font-size: 14px;\"><em>Summary: Why is usability so important? Without it, your application will get abandoned. All of the time and effort put into that application will be for nothing. In this article, you&#8217;ll learn a few usability trends you must adopt in your web application development over the coming months.<\/em><\/span><br \/>\n<a name=\"20140808\"><\/a><!--more--><br \/>\nWhat is \u201cusability?\u201d<\/p>\n<p>It\u2019s a broad term, but we can boil it down to two key points: <\/p>\n<p>First, it refers to ease of use and learnability. How quickly can a user learn the interface? Will it confuse them?<\/p>\n<p>Second, it refers to utility. Does it meet the user\u2019s needs? Does it do what they expect it to do?<\/p>\n<p>You can\u2019t have one without the other. A simple interface without utility is worthless. Likewise, a useful application without a simple interface won\u2019t get used. <\/p>\n<p>Why is usability so important? <\/p>\n<p>If your web application is difficult to use, users will leave. If it frustrates users, they will leave. If it doesn\u2019t meet their needs, they will leave.<\/p>\n<p>So, why is usability so important? Without it, your applications won\u2019t get used. An unused application is a worthless application.<\/p>\n<p>How can you improve web application usability? In this article, we\u2019ll cover a few modern usability trends that you can\u2019t ignore. These trends will impact web development usability both this year, and in the near future. <\/p>\n<h3>1. Multi-screen design <\/h3>\n<p><span style=\"font-size: 14px; line-height: 1.7em;\">We\u2019ve entered the multi-screened era. You no longer know how a user will access your web application. <\/p>\n<p>Will they use a smartphone? Will they use a PC? Will they use a tablet? <\/p>\n<p>You don\u2019t know, and you can\u2019t control it.<\/p>\n<p>What can you do? Any web application you create must now adapt to any screen or device. No, I\u2019m not talking about creating <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'HTML5 wrong question']); \" href=\"https:\/\/www.mrc-productivity.com\/blog\/2014\/07\/native-vs-html5-youre-asking-the-wrong-question\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">separate native applications for mobile devices<\/span><\/a>. I\u2019m talking about creating apps that adapt to the new, multi-screened world. <\/p>\n<p>So, how do you go about creating an application for different screen sizes? After all, you can&#8217;t possibly fit everything on a PC-based web app into an app for smartphones. There isn&#8217;t enough room on the screen. <\/p>\n<p>What&#8217;s the answer? This need for apps that adapt to a variety of screen sizes is driving a concept known as \u201cmobile-first\u201d design. As explained below, it means that you develop for the smallest screen size first, and work up from there. <\/span><\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cMobile first design and UX has been a very good and positive trend in web app development,\u201d says John Turner, CEO of <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'UsersThink']); \" href=\"http:\/\/usersthink.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">UsersThink<\/span><\/a>. \u201cBecause smartphones and small tablets have grown so much in popularity, making sure web apps work on all types of devices has become very important. And due to the limited screen size of small devices, a greater emphasis on focus and reducing complexity has become a much higher priority. But that&#8217;s also lead to web apps becoming much easier to use on desktops and laptops, as UX and usability has become paramount for business success.\u201d\n<\/p><\/blockquote>\n<h3>2. Simple interfaces<\/h3>\n<p>Does it ever feel like attention spans are declining? It\u2019s true. According to these <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'statistics attention']); \" href=\"http:\/\/www.statisticbrain.com\/attention-span-statistics\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">statistics<\/span><\/a>, the average attention span has dropped by 4 seconds over the last 13 years. <\/p>\n<p>In fact, we now have shorter attention spans than your average goldfish.<\/p>\n<p>What does this mean for web application usability? Users need simple interfaces. Most won\u2019t take the time to figure it out if they find it confusing. Most won\u2019t take the time to dig around a cluttered interface. <\/p>\n<p>Get down to the basics. Who are your users? What are they trying to accomplish? Focus your web app on those two questions, and remove the excess.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cSimplicity and frankness have become the undertone of good web app interfaces,\u201d says Raffi Semerdjian, Senior Designer at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Digarati']); \" href=\"http:\/\/digarati.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Digarati<\/span><\/a>. \u201cConsolidate your channels &#8211; the hand has only five fingers &#8211; and most people only use their thumbs. Good web apps offer users the ability to engage with content rhythmically and are designed to discourage an off-beat experience. In other words, don\u2019t make it a challenge for a user to get what they want; don\u2019t let your users feel incompetent &#8211; it only means you didn\u2019t plan smart!\u201d\n<\/p><\/blockquote>\n<h3>3. Prominent calls to action<\/h3>\n<p>We\u2019re seeing larger, more prominent buttons in web apps, and that will only continue. Why? It\u2019s driven by a couple of factors.<\/p>\n<p><figure id=\"attachment_7127\" aria-describedby=\"caption-attachment-7127\" style=\"width: 350px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/11\/Main-menu.png\" alt=\"Larger buttons help users understand what action to take, and make the application more usable on mobile devices\" width=\"350\" height=\"180\" class=\"size-full wp-image-7127\" \/><figcaption id=\"caption-attachment-7127\" class=\"wp-caption-text\">Larger buttons help users understand what action to take, and make the application more usable on mobile devices<\/figcaption><\/figure><span style=\"font-size: 14px; line-height: 1.7em;\">First, buttons must now work across different devices and interface types. Sure, a small button works great on the more precise, mouse-based interface. But, have you ever tried selecting a small button on smartphone screen? It\u2019s difficult&#8230;and frustrating. <\/p>\n<p>Second, it\u2019s simpler for the user. As explained below, prominent calls to action are more understandable. They help guide your user through your application.<\/span><\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\n\u201cWe tend to trust that the user will know exactly what to do when they come to the end of a page in many experiences,\u201d says Talib Morgan, President at <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Source', 'Actuan Global']); \" href=\"http:\/\/www.actuanglobal.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Actuan Global<\/span><\/a>. \u201cWe\u2019re actually assuming and you know what they say about that. Instead, make sure there is a clear call-to-action. That way, the potential is there for the user to be further engaged and you can minimize the opportunity for drop-off.\u201d\n<\/p><\/blockquote>\n<h3>4. Web apps that work anywhere<\/h3>\n<p>Mobile changes everything. It not only changes how users access your applications, it changes where they access your applications. <\/p>\n<p>What does that mean? Well, what happens if a smartphone user loses their data connection? Will your application <a onclick=\"_gaq.push(['_trackEvent', 'Blog', 'Inside Link', 'Offline']); \" href=\"https:\/\/www.mrc-productivity.com\/blog\/2014\/08\/will-your-mobile-web-apps-work-offline\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">still function offline<\/span><\/a>? As mobile usage grows, so does the chances that a user will venture into a dead zone. <\/p>\n<p>This changes the way we approach web application development. Modern web applications must account for any scenario. They must adapt to any device, and function in any location.<\/p>\n<p>So, what do you think? Is there anything you would add to this list? If so, please share your thoughts in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summary: Why is usability so important? Without it, your application will get abandoned. All of the time and effort put into that application will be for nothing. In this article, you&#8217;ll learn a few usability trends you must adopt in your web application development over the coming months.<\/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":"4 major web application usability trends in 2014 - mrc&#039;s Cup of Joe Blog","description":"Summary: Why is usability so important? Without it, your application will get abandoned. All of the time and effort put into that application will be for nothin"},"footnotes":""},"categories":[8],"tags":[43],"class_list":["post-8221","post","type-post","status-publish","format-standard","hentry","category-education","tag-usability"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/8221","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=8221"}],"version-history":[{"count":8,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/8221\/revisions"}],"predecessor-version":[{"id":13949,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/8221\/revisions\/13949"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=8221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=8221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=8221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}