Mobile app design
the new basics

Good mobile app design is hard to notice because it fit our needs so well and serving us without drawing attention to itself.

Details in detail—we spend years designing commercial mobile apps. Today we’d like to share some common basic we’ve learned so far.

Last updated — Oct 06, 2018

1. Shading background to emphasise the Card UI

Instead of a pure white background colour #ffffff, try slightly shading of grey to make the white card UI more visibility and smoother its drop shadow. Something like #fafafa or #f8f8f8 is very close to white #ffffff but still shading nicely.

2. Define one colour for CTA.

Try to define/limit one accent colour (complementary colour of the primary brand colour) for clickable jobs, such as CTA, button, hyperlink, etc. So it easy for people to recognise and expect which elements that they can interact with. Don’t mix that colour with non-clickable things such as headline, body-text or an icon (if you do not plan to make it clickable).

3. Add at least 24px invisible touchable area on top of the small icons.

Unified a decent touchable area around the utility icon will merely improve the ability to touch that icon. Make sure you communicate with the engineer teams that there is an invisible space around the icon not just true pixels of width and high on the icon itself.

4. Formulate an input with its button.

In mobile app design, a consistent visual clue will help people recognise the elements that belong together and digest the information faster.

5. Differentiate primary from secondary actions.

As a mobile app designer, we intend to help people focus on one thing (that matter) at a time. Differentiate primary from secondary actions is a great technique that helps people stay on the right track. Bonus — make a primary action right-hand side.

6. Try a ghost button for multi-choice options.

Ghost button is the outline style button. We usually use it for secondary action. On the other hand, the solid button is a colour filled-out button and the majority we use it for decisive action. For more than 3 multi-choice options, we shouldn’t stack solid buttons on top of each other because it makes all option become an important option. As you can imagine, once everything important nothing is important. Moreover, it also makes a screen feel off balance.

7. Show all selection options if under 6.

A selector drop-down requires two clicks and hides the options. Moreover, a selector drop-down UI also separates a controller with its result. Try to use a pattern that shows all options if it less than 6 options in the mobile app design.

8. Make CTA descriptive.

A call to action (CTA) should state the intent. Try to fill the blank space of  “I want to ...” when you writing for a CTA. For example, at a “Sign up page" — as a user I want to "Sign up”.

9. Avoid extensive information on the splash screen.

Try to avoid putting a long company slogan or massive visual design that people need some time to process on a splash screen (a first split second page that people see first when they open the app). The splash is like a highway billboard, we need to communicate at a feeling level not Thinking level. If you are not so creative, just make it relevant to the app icon is good enough.

10. Make navigation visible.

When you design a new app, it’s a good practice to start your mobile app design foundation around the navbar, not the hamburger menu. It will help you to focus on a core value of the app.

Bonus; a typical mobile nav bar layout.

Position 01—Core Value i.e. Explore, Feed, Article, etc.
Position 02—Discovery i.e. Search, Bookmark, Saved, etc.
Position 03—Core Action i.e. Take a photo, Create a new article, etc.
Position 04—Inform i.e. Notifications, Messenger, Inbox, etc.
Position 05—Others i.e. Setting, Secondary Menu, Account, etc.

You don’t have to follow this basic layout, be creative.

11. Give a clue and context about why they can’t go.

If the user needs to do something before they can process to the next step. Make it clear that something is missing. For example, if the users have to accept the terms before they can continue to the next screen, you may make a CTA disable and dynamically communicate with them with the context (Message in the CTA).

12. Focus on one (or related group key-behaviour) at a time for a long forms mobile app design.

Focus on one thing until success at a time to helps people minimise a cognitive load. Keep in mind, in the most scenario the keyboard interface will take a lot of the valuable real estate of the screen in order to assist you to fill out the form, so use it wisely.

Are we missing something here? Let us know