by
Medium Series

3 Key Rules for Effective UI Design

Nothing beats good old pen and paper when it comes to ideation.

Whether you’re someone new to UI design or a veteran with years of experience, striking a balance between good visuals and functionality can be a real daunting task at times.

This is me on daily basis…

In this article, I’ll be sharing my approach to daily UI design challenges with a thought process called O.F.C.

What is O.F.C?

O.F.C stands for Objective, Frequency, and Consistency. I’m convinced that these are the 3 key ingredients for functional and meaningful UI.

Think of O.F.C as a checklist as we tackle a feature. Its main purpose is to make sure that we never lose focus on what’s important before we proceed with visual renders. Here’s a visual flow on where O.F.C usually occurs in the big picture:

OFC can occur anytime in any situation, never hurts to do an extra check whenever time allows.

Within the O.F.C thought process itself, the 3 checkpoints act as a form of prerequisites to be fulfilled before a design intend can be implemented.

Take note of the order, order matters here.

So, what are we really looking out for in each of these 3 checkpoints? Let’s break it down.

Objective

Objective checks are basically core functionality checks. Is the “Play” button easy to find and the first thing a player sees on the main menu? Does a banner convey its message clearly without losing player interest via excessive clutter?

As easy and obvious as it sounds, UI designers (myself included, of course) tend to lose focus on objectives every so often, ending up with unintuitive compositional flow, unnecessary clutter or spending way too much time polishing and adding details to assets that doesn’t matter.

Whenever a particular UI element doesn’t fulfil its objective, revisit it again and start all over if necessary.

Only with the Objectives checked, would we then move on to the 2nd checkpoint:

Frequency

Frequency checks deal with two common user pain points: Friction and Disruption.

Friction vs Frequency
How often are players expected to access a feature and how quickly can they get to it? How many actions are required to access a high-frequency feature?

Basically, we are trying to reduce Friction between what users want VS what they need to do to get there within the UI environment. The general rule of thumb is to hide functions that are seldom used under sub-menus (eg: grouping System and Account Settings under the same sub-menu), and make sure functions which are accessed frequently are prominent and require as few actions as possible to access.

Disruption vs Frequency
Disruptions are seldom desired, but you would want someone shouting “LOOK OUT!!!” at you if something is about to fall on you, instead of receiving a warning email. However, if you’re about to enter a minefield with tons of mines, you would prefer a detailed safety briefing once or twice, instead of someone shouting “LOOK OUT!!!” every time you take a step.

The chart below demonstrates how common game features could be handled to reduce disruptions:

Examples here are subjected to product requirements and game design. They can be very different between games.

Managing the two factors mentioned above ensures that there will be no unwanted disruptions and players could navigate the UI environment with ease.

With the Frequency check done. we will proceed to the last checkpoint:

Consistency

While prioritized last in the O.F.C thought process, Consistency contributes heavily to visual polish and it value-adds to the user experience. Consistency checks consist of two factors:

Visual Consistency
When visual elements appear consistent throughout the entire game, it strengthens the overall perceived quality and visual appeal would follow naturally.

Common factors contributing to visual consistency include:

  • Level of Polish: UI assets that belong to the same category should look consistent.
  • Style and Treatment: While different assets at different pages of the UI environment can sometimes appear different, we have to make sure it remains consistent if they belong to the same category.
  • Respecting Color Theme: Avoid picking colors without adhering to art directions/style guides.
  • Clear Color Coding: Typical example: Green for progressive actions, Red for warnings, Purple for high value etc…
  • Size and Space: Because when every popup window uses the exact same amount of margin space, a UI designer somewhere in the universe gets a good night’s sleep.

Usability Consistency
Unlike Visual Consistency, Usability Consistency is not about things we see visually, but rather, things we feel. Managing usability consistency means conditioning players to navigate the UI environment intuitively.

We can achieve this by making sure that UI elements with the same function are laid out in the same location. Some typical examples: Close/Escape can always be at top right, Cancel/Disagree can always be on the left, Proceed/Play/Accept can always be on the right etc…

Tip: A fun test that you could do easily, is to remove context from your UI elements and see if users can still figure out what to do. (This test can be done during ‘Objective’ as well).

Variation A here works with context, but the moment we remove them, it becomes unclear how to proceed. Variation B improved this by categorizing the sub-functions as a different category and reducing their presence. Immediately we remove paralysis of choices, therefore achieving intuition.

When we keep our UI consistent visually and functionally, we increase visual appeal and help create a positive user experience.

This brings us to the end of the O.F.C self-checking thought process! If the feature or page layout you’re working on passes these 3 checks, you’re on the path to UI success!

What happens when there are conflicts?

As you might have guessed, not every situation will turn out well and not all features in any given situation can pass all 3 checkpoints mentioned above.

What happens when in order to fulfil an objective, you are forced to break the visual consistency of a button? What happens when a warning message needs to appear in an event, but for certain situations, this could be extremely disruptive due to frequent occurrence?

O.F.C is arranged in this specific order based on how disruptive they are to the user experience when not fulfilled. In times of conflicts and for sacrifice, we consider the checks in the reverse order:

In times of conflicts, drop Consistency first, followed by Frequency if necessary.

As long as the main objectives are met and the feature functions as it should, it is okay to break Consistency or Frequency rules, but Objectives should NEVER be compromised.

Conclusion

O.F.C is a thought process that can easily be applied to tasks beyond just UI design. Refining and implementing this thought process over the years has brought my craft from just shiny and fancy PNGs to a more user-centric and thoughtful level.

If you find this article useful, here are some good reads I highly recommend:

  • Don’t Make Me Think by Steve Krug
    A must-read for anyone dealing with UI design on any platform. It covers some of the most important design principles with actual case studies.
  • Predictably Irrational by Dan Ariely
    Understanding human behaviour made easy and enjoyable via humour and real-life case studies.

Last but not least, I shall leave you with this:

Always take a moment to think about what is truly important and never jump into the fancy distractions too soon. Design is after all, problem solving.

Waiting for claps… I’m watching you.

3 Key Rules for Effective UI Design was originally published in Mighty Bear Games on Medium, where people are continuing the conversation by highlighting and responding to this story.

Related Posts
by
by
by