Back to all posts

How designing a minimal UI can have maximum impact

We’re living in the age of mobile apps. As per Statista, as of March 2017, Apple and Google app stores together had over 5 million apps. Gartner predicts mobile app downloads to generate an income of $77 billion in 2017. However, a report by Localytics highlights some troubling statistics about app engagement. The report found that-

  • 24% of users abandoned an app after using it just one time.
  • Only 37% of users use a particular app 11 or more times

While there are many contributory factors behind the abandonment of a mobile app like usefulness of the app, features, onboarding, engagement etc., but studies suggests that failure to create a winning first impression and user experiences are a major reason behind failure of apps. Design is one of the major element of impressing first time users and providing great experience.

So how to design to impress your users?

Embrace Minimalist Design. Why? We’ll come to it later but before let’s understand how mobile is different from desktop or a laptop from a design point of view-

  • Mobile app usage is different- A mobile user’s major focus is on completion of tasks. We use mobile apps on the go-while walking, talking and even during our morning jogs.
  • Mobile screens are smaller- Unlike desktops and laptops where you have some consistency, each model of mobile phone varies in screen size.
  • Touch, not click- Unlike desktops where you click to next action, on mobile phones people touch for next action. Also mobile is not typing friendly.
  • Context Dependency- Mobile phones don’t have an intermediary like a mouse or trackpad. The app needs to be easy to use for people with small and big hands, at home or outside, in dark and in light.

Now, let’s come to why a minimalist UI works better for mobile. Nick Babich, in his article ‘The Art of Minimalism in Mobile App UI Design’ writes-

Minimalism is a perfect marriage of form and function. It’s greatest strength is clarity of form — clean lines, generous whitespace, and minimal graphical elements brings simplicity to even the most confounding subject matter. That is, of course, if it’s used effectively.

A minimalist UI design for mobile app does wonders to user experience because-

  • The screen is nice and tidy without extraneous details
  • As it advocates using less elements, each element has it’s important purpose
  • Easy to onboard and navigate without help
  • Easy to uses app boosts user engagement

How to design minimally?

1. Plan Well

When ‘less is more’ you need to plan each element-color, contrast, space, typography etc., well. Every element needs to be well thought. Do you need it? Can your design live without it? Think on both sides and then go ahead. Think with the end result- engaging your user, helping them achieve their goal easily and quickly- in mind.

2. Choose Right Color Palette

In minimalist mobile app designs, colors assume great significance. Color is a great way to convey vitality, communicate, give feedback and help people visualize data. Choosing right color palette is essential, however, it is important to keep it to minimum. You can pick any color you prefer but use colors that are great contrast to each other like grey and white, yellow and black, blue and white etc. Use color tools to test your colors. You can start with using:

  • Monochromatic color schemes wherein you use different tints and shades of a single color. Blue and Green are good colors for monochromatic hues as these are very soothing to eyes.
  • Analogous color schemes wherein you pick 3 colors that are next to each other on color wheel. Calm, a meditation app, uses analogous colors of blue to create a calm and serene environment for its users.
Image Credit: www.adobe.com
  • Complementary color schemes are great to make key elements in your screen stand out. Complementary colors are situated on the opposite sides in color wheel.
Image Credit: Adoriasoft

3. Use Typography To Advantage

How to make the most of typography in minimalist mobile app design? The answer lies in understanding typeface and how people read on small screens. There are many considerations in deciding typography for a mobile app are like font type, font size, space and line length.

  • Fonts: Mobile platforms have their own default fonts like San Francisco (SF) is the system typeface in iOS whereas Android supports Roboto style. However, you can also use your custom fonts provided the platform supports it. However, unless your app has a compelling need for a custom font, such as branding, it’s best to opt for system fonts.
  • Font Size: The size of your font is important as it not only adds to your design but also affects readability of the user. A good starting point in selecting font size could be guidelines from Apple and Google. Apple recommends a minimum of 11pt font size whereas it is 12sp for Android.
  • Space: Good space between lines not only improves the readability of your text but also add beauty to your content. So give at least 10 to 20% spacing between your texts.
  • Line length: The number of characters including spaces that are displayed on a single line is called line length. For desktops, the line length is mostly kept at 60 characters. A longer line length will push text beyond the screen boundaries and at the same time make readability poor. A length of 30 characters works well for mobile apps.

Using several different typefaces can make your app seem fragmented and sloppy. So use one typeface with minimum font variants and sizes. If done properly, typography can be the design like in this app-

Image Credit: www.designmodo.com

4. The Importance of White Space:

It is a cornerstone of any good design. It has many benefits when done right. It make you design look neat, fresh and soothing. Also it inherently attracts user’s attention to important elements in the screen. In our previous post- White space in UI design, we have discussed some of the best practices in using white space. Here are some tips to keep in mind while using white space for your app:

  • Practice 15 points rule: Pioneered by Designer Paul Boag, it recommends limiting a page to 15 points of attention. He says, each item you add to the page costs 1 point. If one screen element is more important than another you need to assign it additional points to make it stand out.
  • One action per screen: Each screen of your app should just provide one action for the user. This will not only keep your design good but will also help user in understanding your app and using it fast.
  • Use whitespace as divider: You can use whitespace to divide various elements in a screen. For example, while designing a product/service listing page, you use whitespace to divide various product types.
Image Credit- www.uxplanet.com

5. Use Images & Icons Strategically:

Use images only when it is necessary and serves a specific purpose. You can use a image to convey a message better or if it helps you replace texts in your screen.

Use icons strategically to not only replace content but also for navigation to other screens and highlight active/inactive state. Stroke and filled icons are very popular on mobile with stroke icon representing inactive state and filled icons the active state. Whichever icons you choose, always ensure-

  • Simple and Schematic
  • Icons are recognizable
  • Icons are memorable
Image Credit: www.ewebdesign.com

Final Thoughts:

As Antoine de Saint-Exupéry famously said: “Perfection is achieved when there is nothing left to take away.” Minimalist design works best on that philosophy. However, our goal should be creating more than a minimalist mobile app design but to create seamless user interaction and memorable user experiences. That’s what will help the app become a success. Begin with the end goal in mind and with some efforts you will get your app design right!

This article was originally posted at:
https://uxplanet.org/minimal-ui-for-maximum-impact-a2f3b779030d

Can we take you from stuck to unstuck?

We'd love to hear from you

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.