User-Centered Design, User Experience, and User Interface

What's the difference?

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:

icon representing a compass


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:

compass icon with a black border


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.

A faded-out compass icon


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

the compass icon is bright white


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

the bright white icon is accompanied by a red selector bar indicating active status


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!).

Bringing it all together

The necessity of User-Centered Design is self-evident, but the equal importance of User Experience Design is less obvious. To put it simply, good UX results in a positive memory; poor UX results in a negative memory, or (perhaps even worse), no memory at all.

DSoft Technology begins every project with UCD and UX considerations and studies, carrying these principles through the entire development of our products. We take the time to empathically understand not just our customers’ needs, but the needs of their customers as well, and tailor our approach to deliver usable, discoverable, and easy-to-use solutions for every single client. We use and apply the Gestalt Principles (i.e., Similarity, Pragnanz, Proximity, Continuity, Closure, Common Region) and Nielson's Usability Heuristics to ensure we improve the everyday experience of using technology through better UX design.

Learn more about our expertise and methodology through the links below.


Graphic of a circuit board leading to an illustration of the human brain

Human Factors Engineering and Human-Centered Design

We research, develop, and ensure implementation of well-tested human factors policies, regulations, programs, and procedures which promote the safety and productivity of the national airspace system.

 

READ MORE

Screenshot of the website section508 dot gov

Section 508

DSoft Technology strives to be in compliance with Section 508 on all websites developed for our government clients.  Our industrial strength tools and techniques ensure accessibility.

READ MORE