![\"Education\"](\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\")
In his book, \u201cThe Tipping Point,\u201d Malcolm Gladwell explains how it\u2019s often the little things that make the biggest difference. We might assume that big results come from big changes, but that\u2019s not always the case.<\/p>\nIn his book, \u201cThe Tipping Point,\u201d Malcolm Gladwell explains how it\u2019s often the little things that make the biggest difference. We might assume that big results come from big changes, but that\u2019s not always the case.<\/p>\n
I think the same holds true for web application usability. Sometimes it\u2019s the small UI elements that make the biggest impact. If your web applications frustrate or confuse users, or if you just want to improve usability, you might just need a few small changes.<\/p>\n
Today, let\u2019s take a closer look at web application usability–specifically focusing on those small user interface elements or concepts that make a big difference. I\u2019ve compiled 7 simple ways to improve your web application\u2019s usability, without performing a major overhaul. While obvious for designers, font selection is often an afterthought for web developers. Many don’t realize that font selection, size, spacing, and color all have a profound effect on a web application\u2019s overall usability. How much of an effect? It\u2019s been said that typography is 95% of design<\/span><\/a>. Your treatment of text elements can play a major role in the user\u2019s opinion of your application.<\/p>\n \u201cIf your content is unreadable, from a visual standpoint, users will just move along,\u201d says Rui Da Costa, Digital Specialist and Web Developer at Catalyst<\/span><\/a>. \u201cStudies have shown that there are variety of \u2018optimal\u2019 reading conditions for content and that when you make adjustments to any one of these characteristics, you should make changes to all of them.\u201d<\/p><\/blockquote>\n Now, am I saying you should become an expert in typography? Not at all. I\u2019m simply saying that developers should be aware of its importance. Coming from a developer\u2019s perspective, it\u2019s easy to gloss over the importance of font selection without realizing its true impact on usability. If you’d like to read more on the topic, here’s a great article on typography basics <\/span><\/a>for those unfamiliar with best practices.<\/p>\n In my experience, many poorly designed web applications share a common problem: a lack of white space. The developer tries to cram a bunch of features and data into the application without considering that it might overwhelm the user. Proper use of padding and white space is often the difference between a clean or a cluttered interface.<\/p>\n \u201cRecently sites like exposure.so and medium.com<\/a> have been praised for their use of whitespace,\u201d explains Da Costa. \u201cA clean design is easy to navigate, keeps users engaged and, once again, is readable.\u201d<\/p><\/blockquote>\n What do I mean by \u201cwhite space?\u201d White space is the area between elements on a page. When applied correctly, it can turn a cluttered interface into a clean interface. For example, the image below shows the difference white space makes in a simple data table. Which one of these seems simpler and less overwhelming?<\/p>\n The difference between a frustrated user and a happy user often comes down to communication. Does the web application provide the user with feedback? If a user clicks a button, does the application make it clear that it received the command? If an error occurs, how clearly does the application relay the error and steps to resolve it? These simple messages make all the difference in the world.<\/p>\n \u201cOne thing I have to make sure to cover is immediate feedback to users,\u201d says Avi Zuber, UX Director at WizeHive<\/span><\/a>. \u201cThe world runs on different internet speeds and servers tend to burp more often than people would like to admit. It’s become almost standard that users will click on an item and visually nothing will happen. Users need to know that their action has an actual reaction otherwise they grow impatient. That reaction might be an error message, but *something* needs to change on the screen. If an app is not working, that might be understandable, but never leave users in the dark or they’ll get frustrated and walk away.\u201d<\/p><\/blockquote>\n You don\u2019t realize the importance of context until you visit a web application that offers none. For instance, have you ever completed a multi-screen registration form without a progress meter? You feel lost–like you\u2019re blindly stumbling through a dark cave, unsure of where you are or where you\u2019re going. Are there 2 more steps or 10 more steps?<\/p>\n \u201cIf you’re expecting a user to navigate or progress through a multipage experience, make sure they understand where they are in the process,\u201d explains Pete Shea, Director of Strategy at Tank Design<\/span><\/a>. \u201cUse clear progress bars to give the user context.\u201d<\/p><\/blockquote>\n Proper use of context gives the user three important pieces of information: Where they are, where they were, and where they are going. The image below gives a great example of context in a web app.<\/p>\n I\u2019m always surprised by the sheer amount of inconsistent web applications I encounter. Consistency–a supposedly fundamental UI principal–is often ignored. Navigation elements, buttons, and color schemes frequently vary from screen to screen, creating frustrating and confusing interfaces.<\/p>\n \u201cIf you have an interface where things are consistently in specific places it makes it easy for your users to interact without fear of getting lost,\u201d explains Da Costa. \u201cWhen a user gets lost they get frustrated and a frustrated user isn\u2019t going to continue to use your site or app or whatever product you\u2019re trying to give them.\u201d<\/p><\/blockquote>\n For web developers, this should be a simple fix. Keep your navigation elements in the same place. Don\u2019t vary your color scheme from screen to screen. For instance, if an \u201caction\u201d button is green on one screen, don\u2019t make it blue on another.<\/p>\n Making the user\u2019s life as simple as possible is one of the foundations of good web application usability. As Shea explains below, providing suggestions based on user input is a great way to make your application just a little bit easier.<\/p>\n \u201cIf there is stored information that can be returned based on the first few keystrokes, let the user scroll down to select rather than typing in the entire field set,\u201d he explains.<\/p><\/blockquote>\n Besides the slight time savings this offers to the user, it also offers another benefit: spelling error reduction. This alone will save users plenty of time and frustration. As an example, take a look at the image below. If the user was searching for “Lojas das Bicicletas,” don’t you see how much time the auto-suggest feature saves in this instance?<\/p>\n Have you ever completed a form on a mobile device? Unless the developer accounted for the limited keyboards found on touch devices, you were forced to keep switching between the text and numeric keyboard options. While not a huge problem, it sure is inconvenient.<\/p>\n \u201cPresent users with the numeric keyboard on touch devices for numeric form input fields,\u201d says Shea. \u201cIf you expect a user to input a telephone number, save them the time and inconvenience of having to switch to the numeric keyboard themselves.\u201d<\/p><\/blockquote>\n How can an application automatically switch keyboards on the users device to account for varying input field types? HTML5 introduces some new form input types for that purpose, such as \u201ctel\u201d and \u201cnumber.\u201d We won\u2019t get into each tag here, but this article<\/span><\/a> provides a little more information on HTML5 input types.<\/p>\n So, what do you think? Can you think of any other small UI elements that play a big role in usability? If so, I\u2019d love to hear them in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":" In his book, \u201cThe Tipping Point,\u201d Malcolm Gladwell explains how it\u2019s often the little things that make the biggest difference. We might assume that big results come from big changes, but that\u2019s not always the case. I think the same holds true for web application usability. Sometimes it\u2019s the small UI elements that make the …<\/p>\n
\n<\/a><\/p>\n1. Font selection\/styling<\/h3>\n
2. White space<\/h3>\n
![\"The](\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2014\/01\/whitespace.jpg\")
3. User Feedback<\/h3>\n
4. Context<\/h3>\n
![\"A](\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/12\/build-process-bar.png\")
<\/a>5. Consistency<\/h3>\n
6. Autocomplete (or auto-suggest)<\/h3>\n
![\"The](\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2014\/01\/Ajax-Suggest.png\")
7. Appropriate keyboard selection on touch devices<\/h3>\n