From Visual to Behavior and Beyond

Where do we start to establish a UI pattern library? A visual standard? A UX standard?

Start pushing the pixels is a good first step to facilitate discussions. While the challenge is that user experience is more than meets the eye. The more precise we want to be, the more issues we may have to address.

There are several considerations that go hand in hand.

Four Considerations

Visual consistency may be the first coming to mind. Aesthetically satisfying look-and-feel certainly matters, especially for first impression, which sometimes does make a difference.

There can be many different designs in many different styles. How do we decide which to use?

But how do we know what kind of usability criteria are better for us? For a specific case? We can only answer that when we know how they are aligned with our business goals.

Eventually, UI and UX are measured to determine whether it works or how well it works, the criteria of which are reflected in and tightly coupled with our business goals.

Measurement tells us how far we should go and what to focus on.

4. Principles

When we try to incorporate all the above together, we may find out that an overarching principle is eventually necessary for us to decide on what or how.

So, UI pattern library is often the natural starting point, which gradually leads to a full-fledged digital design standard.

Four Components of Digital Design Standard

1. Philosophy (Strategic layer)

The cultural mindset that goes behind the principles and methods.

It’s inevitably subjective, but should be aligned with the business strategy and corporate culture.

2. Principles/Method (Tactic layer)

Those are the criteria, subjective or not, that we use to make high level design decisions, including scope, alignment with business, approach, artifacts, and architecture.

Strategic factors, measurement, and higher level usability considerations are clarified here.

3. Interaction (Cognitive and emotional Layer)

The behaviour level of the actual design.

Macro-level interactions concern the journey or flow. Micro-level interactions concern the behavior of the visual elements.

Usability considerations govern the standard here in various forms such as guidelines or certain exact details of the behaviour.

4. Visual & Motion (Cognitive & visceral layer)

The bottom level of visual and motion concerns the actual graphic and visual effect. UI components are usually defined with specifications.

The flexibility may be a challenge as visual design trends or conventions change. Sometimes enough variants are defined, other times guidelines are created to loosen the control on the pixel level.

{END}