Interface Design Basics for Beginners

An interface is a way for different system elements to interact. More specifically, it refers to the set of rules governing the interaction between a user and a service. Designers often focus on this aspect of the interface. However, it’s important to remember that the interface is not just the screen of a device; it can also include voice or physical interfaces.

An interface is a way of interacting, it can be different.

Steps to Help You Design

• 1

  Ask Questions

  Consider organizational aspects: What problem are you solving? How will you measure the results? What are your limitations? Where can you find relevant information? Doing some initial analytical work is crucial to defining the design problem and goal.

• 2

  Collect Information About Competitors and Users

  Identify both direct and indirect competitors of the future service. What functionality do they offer? What are their strengths and weaknesses? Gather references, review feedback, and study feature articles. Interview users or observe their interactions to understand their needs, what they are willing to pay for, and the minimum functionality required to launch the project.

• 3

  Write Scripts

  Users have tasks they want to complete. Consider what happens before they interact with the interface, how they will navigate the scenario, and what occurs after they finish their task.

Consider a Small Example

Let’s look at the yellow terminal in the Moscow metro, which allows users to check the balance of their transport card and top it up.

Here’s how the terminal works: First, it has a card reader that shows the balance when you place your card on it. Second, if you’ve topped up your card through a banking application, the terminal writes this update to the card. Note that there’s no payment function on this terminal, so you can’t add money directly at this terminal. I chose this example for its simplicity.

Let’s outline a basic algorithm to describe the terminal’s states:

As you can see, we have 11 states for a simple scenario. Creating such simple diagrams helps designers think in terms of scenarios rather than focusing on individual screens.

Creating a Layout or Prototype

Once you understand how users will navigate through the process, it’s time to start creating the layout. I recommend using Figma, which is currently one of the most accessible and convenient design tools. However, you can use any tool you prefer, including paper, to sketch out your ideas.

After creating the initial version of your design, it’s essential to test it with users. Before testing, define the metrics you’ll use to evaluate its effectiveness. For a terminal, these metrics might include:

• Scenario Speed: How quickly the user completes the task.

• Error Rate: The number of mistakes users make, such as incorrect card placement or actions not covered by the script.

• Number of Actions: The fewer actions required to complete the task, the better.

Imagine we have a terminal interface that we’re looking to improve. In the original design, the user must choose between two options—replenish the card or check its balance. In the updated version, the user attaches the card, and the terminal automatically displays the balance and processes any top-up.

Analyzing these metrics will help us determine which version performs better. While the updated design may seem superior due to fewer required actions, it’s crucial to rely on actual user tests to confirm this. Additional design suggestions might include using a map image instead of a yellow circle or adding illustrations for non-native speakers.

It’s also beneficial to consult the following guides for further insights:

These guides offer visual content (UI) recommendations and describe the logic of elements and application navigation. However, they come with constraints that should not limit your creativity.

• Material Design by Google

• Human Interface Guidelines by Apple

• Fluent Design System by Microsoft

• Corporate design systems website

Collecting Feedback

Once you’ve created a layout or prototype, it’s important to gather feedback from users. Show your design to people and ask for their opinions. If you have a fully functional prototype, ask users to interact with it and observe how well they navigate through it.

Design is a process of continuous improvement.

Interface design involves selecting the best option from many possibilities to meet your goals. You don’t need to achieve perfection on the first try. Throughout the design process, you’ll explore various options and test which ones work best.

There are many approaches to design—finding the best one is key.