User Centered Design & User Experience

User-Centered Design (UCD) refers to identifying and defining technical requirements to meet the physical needs of a certain group of people. It is a concrete process that influences how a product is engineered and developed.

For example, consider this icon, which measures 16 × 20 pixels:

That is a rather small area to target with a mouse, let alone touch on a tablet or smartphone. If a user is in a hurry, or their hands are cold, or they have limited dexterity or other physical limitations, it is easy to miss.

To help users overcome this obstacle, we implement the icon with a 40 × 40 pixel footprint:

The size of the icon does not change, but the “hot spot” (clickable area) is much larger. This increases the user’s accuracy, and reduces mis-clicks when two icons appear next to each other.

These are small but critical considerations to make products that are accessible. It is a major part of DSoft's work for the veteran community.

User Experience Design (UX) refers to the way a user perceives a product, and relates to the psychological needs of a certain group of people. It is an abstract process to influence the user to feel a certain way about a product.

Here is how that same icon may look on a website in its “rest state,” i.e., the default appearance of an enabled hot spot.

When the user moves their cursor over the icon, its appearance is brighter.

When the tool is in use, the icon is accompanied by an indicator.

The three states of the same image are like a story:
“This is a tool. I can click on this tool. I am using this tool.”

The user feels:
“I am inferring. What I infer appears to be correct. I am successful.”

User Interface Design (UI) is the implementation of UCD and UX principles, and determines how the user will interact with the product. It is closely related to UX and creates the “front end” presentation, encompassing what is often referred to as the GUI, or Graphical User Interface. How might that look?

You are already familiar with UX principles in action, such as using a Wizard. This is a design pattern that breaks a lengthy task into smaller, more manageable chunks, with clear prompts like buttons labeled Next or Finish. The pattern often displays a completion indicator such as a series of circles that are filled in as the user advances through each step.

This method is popular because it gives the user a sense of making progress through a chore. Facing an endless form with dozens of fields is daunting, if not outright loathsome. Think of how many virtual shopping carts you have abandoned when the checkout process takes an unreasonable amount of effort. Breaking the form into small chunks that group related information is a more positive experience. It makes the difference between being done with something (finally!), and having accomplished something (hooray!).