Getting started with Usability and User Centered Design - Part I

Last week, we officially launched our User-Centered Design services area at Zauber, together with an internal presentation for the whole company. Our presentation intended to tell developers why they all take part (consciously or not) of the design process, and how we can develop our design awareness and integrate it with our software development process.

Why choosing User-Centered Design as a design framework?

User-Centered Design is about optimizing a product by thinking in specific goals of an specific group of people in a specific context of use. It's at the same time a very rational philosophy about design and a set of very useful techniques (some of them really scientific). It makes sense to design for human beings, trying to know better their goals and problems. After all, we're building products for people, and if the product helps their purposes and they can understand it intuitively, their productivity and satisfaction by using it increases.

Getting started with User-Centered Design

Some UCD techniques require some effort to learn and integrate to a defined process, but some of them can be more easily adopted.

Iterate the design process

You shouldn't think about design as an activity that just takes place at the beginning or at the end of the development process. User-Centered Design is about finding solutions to interaction problems, thus the best way to solve a problem is by approaching it in an iterative way, in order to understand it better and find the most suitable solutions. The best way to make it work is to start working on the more crucial functions and then expand your key decisions to the rest of the features.

Make sketches and wireframes

Everytime you think about a screen or visual component, it's a good practice to begin with quick sketches trying to figure out which visual components will be more understandable for your potential users. It's really helpful to validate your work with your project partners and even with people who don't know about the project, previously explaining to them the main goal of the user facing that screen or component. This will also help you to iterate and go over your work.

Learn about some basic laws

• Fitts Law: proximity to the mouse's cursor and size of page elements may increase or decrease the ability of a user to interact with it. In a nutshell, you have to make the clickable area bigger for main actions. To learn more, there's a Wikipedia article about Fitts' Law and you can also check Usability First's definition.
• Hick Law: when the user is taking a decision, it's making a cognitive effort. The more options he has to consider, the harder it will be for him to make the choice. You've to keep a clear, default path of decisions and to make the rest of possibilities available but with less visual hierarchy. To learn more, you can check Usability First's definition about Hick's Law.
• KLM-GOMS: each operation we demand from the user implies a cognitive effort for him/her. KLM-GOMS is a model that quantifies basic operations with a computer, such us clicking, pressing a key, alternating between mouse and keyboard, etc. It's useful to optimize data input actions reducing the effort needed for each of them. To learn more about KLM-GOMS, you can check this article from The Department of Computer Science, University of Maryland.

Use Interaction Design patterns

There are very useful libraries you can consider each time you're about to select interactive components for your screens. If you're a developer, you probably know the benefits of using Design Patterns. We recommend http://www.welie.com/patterns/ and http://quince.infragistics.com/UX-Design-Patterns.aspx.

Use Jakob Nielsen's Heuristic Guidelines

Heuristic guidelines are a set of important rules to have in mind when designing to increase intuitiveness, ease of use and consistency of your product. They can also help you to evaluate the application you are building and make new iterations over it once you are in an intermediate instance of the design. To learn in detail about these guidelines, you can check the original article at useit.com. There's also a good list of examples of heuristic guidelines applied to web applications at http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5

Next steps

Next week we will be covering in detail different research techniques, books and more. Stay tuned and give us feedback!