10 User Interface Design Fundamentals

You just finished the world’s newest killer web/mobile/desktop app and are ready to release it to the world. The program logic is airtight. The functionality saves users buckets of time. You prepare for the accolades you so richly deserve. What could go wrong?

Unfortunately, despite all the magic you created within your app, it is all for naught if users are presented with a confusing, difficult-to-use and opaque interface. Most app programmers are whiz-kids at putting together logic, data and connectivity, but fall short when it comes to UI design.

There are two reasons for that:

  1. Programmers look at their apps from the inside out. They instinctively know how to use the app because they wrote it. Users do not have that same advantage.
  2. A superb UI is a mix of diverse disciplines unlike programming such as human psychology, communications, physics and art.

Do not despair. Following the 10 UI design fundamentals below will significantly improve your UI’s looks, functionality and keep it away from user’s trash icon.

10 User Interface Design Fundamentals

1. Separate Your Wants from User Wants

Try not to subordinate user goals to your business goals. For example, a user comes to your web app to search for information. If a newsletter subscription popup is the first thing they see, you threw up a roadblock before they even get started.

2. Create an Interface Map

Good UIs impart a feeling of control to users. That feeling of control is diminished if they navigate into UI dead-ends. Mapping out all routes a user can take reveals these UI cul-de-sacs, which you then eliminate. In any case, use interface breadcrumbs so users can always retrace their steps without having to go back to square one.

3. Consistency is King

The need for consistent looks and behavior throughout your app is paramount. Keep the layout, size, style and color of buttons, widgets, fields and text the same from screen to screen. Highlight important actions or information the same way throughout the app. If image hovers are used, use them on every image. If one action produces a feedback message, you should use feedback for every action.

4. Do Not Distract Your Users

It is tempting to add some “cool” to any UI with special widgets, new icons, animations, hovers, and popups. Unless your app’s purpose is to entertain or extra bling makes your app more intuitive to use, leave it out. Unfortunately for your latent artistic ego, users find that such things distract them from solving their problem.

5. Be a Conformist

Believe it or not, most of your users spend way more time on other apps than they do on yours. Thus, as much as possible, make your UI look and behave in familiar patterns like Facebook, Twitter, WordPress, Amazon, news outlets, etc.

6. Simplify

Once you take the time to simplify your app’s UI, simplify it again. Question the purpose and layout of every element and action to evaluate if they are truly necessary to the user accomplishing their mission.

7. Never Expect Users to Figure It Out

Even though certain choices and actions may be obvious to you, the app programmer, they may be opaque to users. Guide them through actions with a few simple choices. Highlight the preferred choice. Always present an undo option so they retain control over their actions.

8. Break down Complex Actions

If you are unable to simplify long or complex action paths in the app, at least break them down into series of simpler steps to reduce cognitive overload for users. Where possible, display which step they are executing, which have been completed and which are to be completed.

9. Plan for Errors

If users are punished for erroneous actions, they are going to blame the app, not themselves. Always plan your UI such that errors are handled gracefully and can be undone easily, and, where possible, without data loss.

10. Test Your UI on Non-Programmers

Almost as bad as testing your UI on yourself is having other programmers test it for you. Always test using non-technical users who have an interest in the problem the app solves. Do not coach them beforehand or provide instructions if you want to test how truly intuitive and easy-to-use your app’s UI is.

These are basic guidelines to achieving a useful app UI. If you follow these steps and perform further research into UI design, you may be astonished by how much science is behind these and other principles. Ironically, if you have done your job correctly, users will not even notice your excellent design. The ultimate goal of a quality UI should be to make it invisible so that users only focus on solving the problems for which your app was created.