![\"\"](\"https:\/\/www.mrc-productivity.com\/design\/whitespace.jpg\")
<\/p>\nIt doesn\u2019t matter how powerful a web application is, if it\u2019s poorly designed, users probably won\u2019t use it. A poorly designed user interface is a big reason many users give up on web apps. It might be confusing, overwhelming, or just plain ugly. Whatever the reason, a poor interface can ruin a perfectly good web app. How can you fix this problem? I\u2019ve put together a short list of a few of the most basic ways developers can improve their application design.<\/p>\n
From my experience, inadequate white space is one of the biggest problems in application design. What is white space? It\u2019s the area between elements (text, tables, images, etc..) within your app. When a developer fails to put adequate spacing between elements, it gives the application a cluttered and confusing look and feel. When white space is used correctly, the application is easier to read, easier to use, and doesn\u2019t feel overwhelming.<\/p>\n
Let\u2019s take a look at an example. Of the two tables below, which one is easier to read?<\/p>\n
<\/p>\n
The only differences between those two images are margins and padding. I\u2019ve removed the margins and padding on the left one to give you an idea how much whitespace can affect your application\u2019s usability.<\/p>\n
How can you improve your white space usage in your web apps? Here are a few areas that are often the biggest culprits.<\/p>\n
1. Line spacing<\/strong>: If your application contains blocks of text, make sure the lines aren\u2019t too close together. Appropriate line spacing can really do wonders for readability.<\/p>\n 2. Cell padding<\/strong>: As you saw above, a table with no cell padding can look cluttered and overwhelming. I like to add 3-4 pixels of cell padding within my tables. It makes the table look cleaner and easier to read.<\/p>\n 3. Margins<\/strong>: In general, it\u2019s good practice to set margins around your page elements. For example, try putting a 10 pixel margin around images. Put similar margins around your tables and blocks of text.<\/p>\n In short, you must give each element some room to breathe. You\u2019ll be amazed at how little changes like this can improve usability so greatly.<\/p>\n It goes without saying, but the user should not feel confused when visiting a web app. While this statement is obvious, many developers unknowingly confuse their users with a complicated interface. Here are a few ways to minimize confusion:<\/p>\n 1. Simple navigation<\/strong>: When a user needs to move to a new screen, they shouldn\u2019t get confused. The navigation elements should be placed in obvious locations and be consistent across screens. What\u2019s an obvious location? Suppose your user makes their way to the bottom of an app and wants to move forward\u2026but the \u201cnext\u201d button is at the top of the app. Furthermore, what if the location of the \u201cnext\u201d button changes on each screen? Both of these mistakes will confuse and frustrate a user.<\/p>\n 2. Leave a trail<\/strong>: As users move through screens in your application, add a breadcrumb trail so they don\u2019t get lost. A breadcrumb trail shows the user where they are, how they got there, and how to move back to previous screens. The image below illustrates a breadcrumb trail. You\u2019ll notice that the second bar provides a list of screens I visited to get to the \u201cField Settings\u201d screen. I can click on any of those links to go back to a previous screen.<\/p>\n 3. Consistent design<\/strong>: Consistency within a web application is incredibly important. Make sure you use consistent color schemes, navigation, layout, buttons, etc… Here are a few questions to ask yourself:<\/p>\n a.<\/strong> Are navigation elements in different locations throughout your screens?<\/p>\n b.<\/strong> Do color schemes change throughout screens?<\/p>\n c.<\/strong> Are element types formatted identically? For instance, if some links are green and others are blue, you might confuse the user.<\/p>\n In short, keep you design consistent and straightforward to eliminate confusion. It\u2019s good practice to let a few users test your new application before you roll it out. This will help weed out any problems or areas that might confuse the users.<\/p>\n Although you may have a giant monitor with a high resolution, what do the users have? Your application should be designed for the smallest user screen size. These days, that means you should typically design your application for a 1024×768 resolution. Keep in mind that some users still use an 800×600 resolution, but that\u2019s quickly fading away. However, if the majority of your users still have an 800×600 resolution, your application should fit on their small screens. It\u2019s your job to determine what resolution size most users currently use. Remember, something that looks great on a big monitor might be unusable on a small one.<\/p>\n If you want users to use your web apps, you must take user interface design into account. In general, your web app shouldn\u2019t appear cluttered, shouldn\u2019t confuse the user, and should be usable regardless of monitor size. While there\u2019s many more ways to increase usability, these are some of the basic steps that you can easily apply to your web apps to increase usability.<\/p>\n","protected":false},"excerpt":{"rendered":" It doesn\u2019t matter how powerful a web application is, if it\u2019s poorly designed, users probably won\u2019t use it. A poorly designed user interface is a big reason many users give up on web apps. It might be confusing, overwhelming, or just plain ugly. Whatever the reason, a poor interface can…<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-679","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=679"}],"version-history":[{"count":6,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/679\/revisions"}],"predecessor-version":[{"id":802,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/679\/revisions\/802"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=679"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=679"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Eliminate confusion<\/h3>\n
![\"\"](\"https:\/\/www.mrc-productivity.com\/design\/breadcrumb.jpg\")
<\/p>\nTake screen size into account<\/h3>\n
Conclusion<\/h3>\n