It doesn’t matter how powerful a web application is, if it’s poorly designed, users probably won’t 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’ve put together a short list of a few of the most basic ways developers can improve their application design.
Padding/white space
From my experience, inadequate white space is one of the biggest problems in application design. What is white space? It’s 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’t feel overwhelming.
Let’s take a look at an example. Of the two tables below, which one is easier to read?
The only differences between those two images are margins and padding. I’ve removed the margins and padding on the left one to give you an idea how much whitespace can affect your application’s usability.
How can you improve your white space usage in your web apps? Here are a few areas that are often the biggest culprits.
1. Line spacing: If your application contains blocks of text, make sure the lines aren’t too close together. Appropriate line spacing can really do wonders for readability.
2. Cell padding: 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.
3. Margins: In general, it’s 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.
In short, you must give each element some room to breathe. You’ll be amazed at how little changes like this can improve usability so greatly.
Eliminate confusion
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:
1. Simple navigation: When a user needs to move to a new screen, they shouldn’t get confused. The navigation elements should be placed in obvious locations and be consistent across screens. What’s an obvious location? Suppose your user makes their way to the bottom of an app and wants to move forward…but the “next” button is at the top of the app. Furthermore, what if the location of the “next” button changes on each screen? Both of these mistakes will confuse and frustrate a user.
2. Leave a trail: As users move through screens in your application, add a breadcrumb trail so they don’t 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’ll notice that the second bar provides a list of screens I visited to get to the “Field Settings” screen. I can click on any of those links to go back to a previous screen.
3. Consistent design: 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:
a. Are navigation elements in different locations throughout your screens?
b. Do color schemes change throughout screens?
c. Are element types formatted identically? For instance, if some links are green and others are blue, you might confuse the user.
In short, keep you design consistent and straightforward to eliminate confusion. It’s 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.
Take screen size into account
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’s 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’s 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.
Conclusion
If you want users to use your web apps, you must take user interface design into account. In general, your web app shouldn’t appear cluttered, shouldn’t confuse the user, and should be usable regardless of monitor size. While there’s 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.
It’s really great that people are sharing this infromtaion.