General

What makes a good User Interface Design?

To a user of a digital product, the interface is the product. But what makes a good visual design? In the past 15 years, I created and reviewed plenty of UI and apps designs. In this evolving article, I distilled the essentials for you with some practical examples. So you can assess your own products better.

Taking ACTION

When your UI design is streamlined, everything works together smoothly. It put the business in action by letting the user take action. This is why I center the six criteria of the UI Design Check around the acronym of ACTION, which stands for:

  • Appeal
  • Clarity
  • Typography
  • Interaction
  • Order
  • Navigation

Ready? Then let’s dive into it with some examles!

Appeal

Do you know the feeling of being cheated … by a design? First, it makes a great impression, everything nice and shiny 😍. The marketing pages lures you in, you feel confident, you want it! Your high expectations are set, but once you’re in, everything looks so different and you feel disappointed 🫤.

Flatex – Frontpage with an image of a man happyliy looking at his phone, let’s assume while he is investing using Flatex.
😎 Nice! Even though the typesetting could be better, Flaxtex’s front page makes a quite slick impression.
The trading app of Flatex
😫 Messy! Inside the app, you an old-fashioned layout, tiny text and cryptic buttons. Did I sing up for that?!

To me this happened with the online broker Flatex. It made a slick and shiny impression from the outside, but it is cluttered, laborious and looking dated on the inside.

Appeal matters, because to the user, the app is the product. It strongly influences how well it will be adopted. Ask yourself for your own app design:

  • Is it making the right impression?
  • Does it fit the branding?
  • Is the design coherent and meeting expectations?

Clarity

This is about life and death! At the children’s hospital, doctors have to do a lot of calculations each day, also my wife Birgit. To do that, she’s using an app, which is death to the eyes.

Overview of Pedz
🫣 The overview of the Pedz app: Like my kid’s room after one year of not cleaning up.
Pedz body percentile calculator
☠️ Body percentiles calculator: No label or input is aligned, all on a noisy background.

So many things are wrong here:

  • A cluttered overview with clumsy doodles
  • Input fields that align anywhere and constantly lose focus
  • Weird tool tips pop up
  • And all on a very noisy background!

This layout does not help to reduce cognitive load, while treating patients.

To bring clarity to your design, ask yourself:

  • Is cluttering avoided?
  • Are alignment and spacing consistent?
  • Are similar elements reused for similar things?

Typography

Let’s stay in the medical field. My wife Birgit is studying like crazy right now for her specialist examination. But what’s even crazier, is the Anki flashcard app she’s using.

It has several severe issues:

  • The text with no hierarchy
  • The alignment is horrible, all centered
  • Font sizes change from 11 to 32 pt
Anki original app design
😱 Where are the hierarchies? What’s the question? What’s are the answers … it’s so confusing.
How the Anki app could look like
😃 I quickly mocked up, how it could look like with proper spacing and alignment. Wouldn’t this make learning so much easier?

With only a little care about typography, this all would make learning so much easier. I quickly mocked this up here. If you want me to dive deeper into it and explain what I did, tell me in the comments! And to be fair, as I found out, Anki is just the app, the flashcards are made by people in the community, and I guess they just followed a bad template.

Make typography better in your app design by asking yourself:

  • Is the text set in a clear way?
  • Are font sizes appropriate?
  • And is color contrast sufficient?

This helps you to unite words and meaning with the power of typography!

Interaction

Let me tell you a quick story of a personal success and a big failure. For the first time, I participated in the city run of my hometown. Super proud of my superhuman top athletic 5k performance 🏅, I wanted to check the results on the website, but they just did not show up!

Well, actually they showed up … but way below! I had to scroll down an enormous list to see my rank. Not very obvious 😕.

Besides the overall messy design, the purpose of this site seems to be a navigation between different races. But where are the results?
They show at the very bottom of that list, making them very hidden, resulting in poor interaction design.

You can improve the interaction with your UI or app, by asking:

  • Are changes of state clearly shown?
  • Is it clear what’s interactive?
  • Are there sufficient target sizes?
  • Is information not only relying on color?

Order

A few years ago, IKEA’s shopping bag on mobile had a problem. The elements were not obviously grouped together. When scrolling through a few items in the shopping bag, it was not clear if the amount belonged to the previous or the next product 😐.

In visual design, there is the rule of proximity. What is close together, belongs together. By now, IKEA fixed it, with a compact design, that clearly uses white space between the individual items, so that they can be easily differentiated 😁.

IKEA’s cart in 2020: It’s unclear if the amount belongs to the prevous or the next item.
IKEA’s cart in 2023: A compact layout and a deliberate use of white space brings order into the design.

With these questions, you can bring order to your design:

  • Are elements that belong together also grouped together?
  • Is the most important information/action on top?
  • Are the other hierarchies clear?

Navigation

Let’s complete the ACTION acronym with a story of another family member, because my sister is losing her nerves over this app. Her additional health insurance allows her to submit doctor’s bills, but she constantly loses track of what bills were covered and what not 😡.

Because once she goes back from the details, the whole list is collapsed again! Resulting in a complete loss of orientation and multiple submissions of the same invoice. They could solve that by saving the position after you opened the pdf.

Put your users in control with a clear Navigation by asking yourself:

  • Is it clear where I am?
  • Is it obvious where to go next, and how to go back?
  • Is progress clearly shown?

The complete UI design checklist

When I assess a visual design, I take a close look at the flowing six criteria that form the acronym ACTION. I ask myself the following questions that are related to it.

Appeal

Making a great impression

  • Is the design attractive?
  • Does it fit the topic, branding, or company?
  • Is the visual design coherent?

Clarity

Reducing the load

  • Is cluttering avoided?
  • Are alignment and spacing consistent?
  • Are similar elements reused for similar things?

Typography

Uniting words and meaning

  • Is the type choice clear and legible?
  • Are font sizes appropriate?
  • Is color contrast sufficient?

Interaction

Making it easy to use

  • Are changes of state clearly shown?
  • Is it clear what’s interactive?
  • Are there sufficient target sizes?
  • Is information not only relying on color?

Order

Setting priorities

  • Is the most important information/action on top?
  • Are the other hierarchies clear?
  • Are things grouped that belong together?

Navigation

Purposefully guiding the user

  • Is it clear where I am?
  • Is it obvious where to go next, and how to go back?
  • Is progress clearly shown?

Do you want me to check your design?

Maybe you’re not 100% design savvy, or feeling uncertain what might not work with your visual design? I give you a clear assessment, point out problem areas, and give practical advice. So you know what to focus on, when creating a professional impression of your website or app.


What is the most important criterion to you? Or do you know an app that clearly fails one? Tell me in the comments below!

Typographic power to your inbox!

  • Font Friday: I personally recommend one typeface per week and for what use case it’s best. Every second week I recommend a free font.
  • Pimp my Type: Articles or videos from the YouTube channel that will help you to pimp up the type of your next design project.
  • No Comic Sans, Open Sans 😅 or any other BS, like annoying ads. Your email will only be used for the newsletters, unsubscribe anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *