UI design mobile app / 10 min read

What is UI design and why is it important?

First, we need to explain what UI design stands for: it means ‘User Interface design’ and you probably have heard of UX design, which stands for ‘User Experience design’. Both are crucial to any product and need to work well together. The terms are often used interchangeably, but they mean VERY different things and refer to different aspects of the product development and design process.

So, what is the difference?

A user interface (UI) is the touchpoint between the user and the digital device (or product), for example, the touchscreen on an ATM where you can select what you want to do with your money (withdraw, move, transfer money, and more).

On an app, UI design considers the feel, interactivity and mainly the look of the product with the main aim that the product is as intuitive as possible. That means that the UI designer needs to consider carefully each visual as well as an interactive element the user might encounter.

UI designers use colours, fonts, icons, buttons, images, and spacing to achieve the best outcome. See also our previous blog where we discuss ‘Design with cognitive load in mind’

A user experience is a process of enhancing user satisfaction by improving

• Usability
• Accessibility, and
• Efficiency

Of user interaction with apps and websites (read more in this blog: What are the top three UX design fundamentals?)

1. What is UI design?

UI design considers the feel, interactivity and mainly the look of the product with the main aim that the product is as intuitive as possible. In addition, it’s also important to remember that also people with varying visual, hearing, mobility and intellectual abilities use apps and websites. That means that websites and apps need to be designed and developed so that also people with disabilities can use them.

Did you know that around 1 in 12 men (!) and 1 in 200 women have a colour vision deficiency meaning that they have difficulty distinguishing between shades of red, yellow and green.

Read more here: Colour vision deficiency 

UI design basics

The different components that comprise the user interface include:

• Typography: headings, subheadings, text elements and lists
• Images: logos, icons and images
• Forms: text inputs, checkboxes, menus which offers selections

The role of UI design in app development

To keep it short, the role of UI design in app development is aimed toward easy, enjoyable, and effective interactions between the user and the app. The UI designer is responsible to create an interface that is intuitive, visually pleasing, is accessible to all and efficient.

Read more here: Top three UX fundamentals

2. The elements of UI design

As already briefly explained above, the UI elements are all the parts we use to build apps (or websites). They encourage the user to interact with the device by providing touchpoints to navigate around on the app or website (buttons, menu, boxes, etc).

Navigation

Navigation is the backbone of how users interact with and use your products and gives the user a way to get from point A to B to C and so on, in a smooth way. Designers use a combination of UI patterns (links, labels, icons and other UI elements) to make the navigation easier.

Good navigation design should also give the user confidence in the product, provide credibility and enhance the users understanding.

Note: poor navigation will result in fewer users and, potentially, not enough sales of your product.

User input

To give the users the opportunity to engage with your product, input fields are an essential user interface design element. It gives the user the opportunity to enter non-standard responses.

I’m sure you’ve come across websites or apps where you, as the user, wanted to enter some details and got frustrated as this function didn’t exist (i.e. delivery address or sending queries to the product team).

Output

Depending on your product, your users might need some ‘outputs’ from you. These could include specifications, drawings, instructions, components and so on.

You could think of outputs as documentation of your product, the instructions you would need to assemble your product.

3. The process of designing an UI for an app

The app design process consists of the following steps (read also: 12 steps for building a mobile app)

• Define the problem your app will solve and list the ways it’ll solve it
• Research the market
• Create a user flow and sketch how the app will work
• Apply UX and UI design elements
• Create wireframes and a prototype; define the scope of the build and budget
• Test the app design and user flow, getting feedback
• Promote and think about the next app idea

Research and planning

Before we can start with developing and designing an app, we need to make sure that the app will work and there’s an audience for it. We must figure out how your app idea will solve a problem and what its core purpose is.

This next step in creating an app is important as you need to think about how your user will interact with the app. So, let your ideas and questions flow. Here is how we would roughly approach the process.

• We’d get all stakeholders in a room so you come up with the best creative ideas.
• Get a giant list of ideas.
• Run some fun games to help filter them down to the key ideas.

Just make sure you having an external moderator in the room and using fun games help prevent the room from being hijacked by those who have the loudest voice.

The next step is to sketch it and visualise it for the first time. This gives you the opportunity to check what the other stakeholders have in mind and how the app could look (they have to draw their interpretation on a piece of paper of how this will actually look on the screen).

Note: it’s not an art competition! You just want to know how they see it in their own minds.

Creating wireframes and prototypes

Prototypes are a great way to test an idea or concept before building it into a full-fledged product. They allow you to work on something without worrying about the consequences of making it public or using real user data.

Test your design in a real app: Reptile

Reptile is a real app platform that allows you to test your designs in an actual app before you go through the time and expense of developing them.

The reptile app prototype platform is an online platform that helps businesses and developers to create realistic mockups of their apps in minutes.

It provides a hassle-free way to test user flows, designs, and interface components before launching a complete app development project. (Here is more information on How to prototype your product quicker.)

To test your designs in a real app platform, Reptile offers an easy-to-use drag-and-drop interface. This lets you quickly create a new app. Then, once you have created your app, you can start testing your designs immediately.

Read more: Prototypes, what are they?

Design and implementation

“Short-term memory famously holds only about 7 “chunks” of information, and these fade from your brain in about 20 seconds.” [Miller, G. A. (1956). “The magical number seven, plus or minus two: Some limits on our capacity for processing information”. ]

This doesn’t necessarily mean that all content must be limited to seven or so items per page, just when we expect users to remember. A good design example that caters to cognitive load is links – this is exactly why we change their colour after they’ve been clicked.

Apply UX and UI design elements as described above.

Note: Response time must be fast, so the user doesn’t forget what they were doing before a page loads. So, simplify and break everything up into manageable pieces.

Testing and feedback

Test early, and as often as possible. User testing is invaluable and will give essential insight into a product design. Please don’t rely on your personal experiences and opinions alone.

Make changes as you go – this will also help you avoid one of the biggest problems of any product innovation: bad UX / UI design.

Ask your friends, family, employees or, best of all, potential users and get their feedback. You can also use it to run focus groups and monitor how users react.

4. Tips for designing great UI for your app

Keep it simple

Simplify and break everything up into manageable pieces.

Make it visually appealing

Avoid any design nightmare in the mobile app UX design process by establishing a visual language and using it consistently. On your website or app, for example, the design of buttons must look the same. 

Consider the user's needs

When a user lands in a new area of your app or product for the first time, they immediately (and unknowingly) demand answers to three key questions.

- Where am I?

This should be answered quickly, and hopefully at first glance. The answer could come in the form of a well-labelled page heading, self-explanatory content, or potentially an onboarding experience for that section.

- What can I do here?

What actions can I take? These should also be self-evident, as all interactive items should be clearly defined using the visual language of your product. Is there a button I can press? Content I can read? It should look like it, and I should be able to find it fast.

- How do I move forward?

What’s next? Ensuring that your product answers this question from every point is the key to keeping users from exiting the product after using only a small part of it. The way forward should be clearly identifiable (as always, at a glance) and appealing. 

5. Test, test, test

Do answer all of these above questions and use testing sessions to review your work, and watch out for sticking points.

6. Conclusion

UI design focuses on aesthetics, the colours, the feel of the app, the animations, the images, buttons, icons and text.

And, more importantly, correct User Interface (UI) design is important because it can make or break your customer base! That means that the UI designer needs to consider carefully each visual as well as an interactive element the user might encounter.

 

Photo by Steve Johnson on Unsplash

Photo by guy stevens on Unsplash

Photo by FORTYTWO on Unsplash