Designing for apps

Overall user interface (UI) 

Fundamental principles to follow when designing a user interface for an application include:

• simple and minimalistic design
• a mobile-first design
• consistency in creating design patterns
• making use of white space
• user control
• error prevention.

Small fonts need more line spacing. This is because small fonts are harder to read so more spacing around them allows the eye to easily follow. 

Format 

Text should always be HTML and not on images. This allows screen readers to pic up the text and resizing at an appropriate resolution for mobile devices. 

Hierarchy 

Use font size, weight and colour to separate each style.

Heading 1's should always be the most prominent element of the page. Sub-headers and other text should be smaller.

Spacing can also be used to separate your blocks of text clearly and using proximity to indicate to the user what text belongs to what subject heading. Important information must be placed at the top of the page. 

F pattern rule 

People read from left to right, so text must have left alignment. 

Colour 

Text and images should have significant colour contrast of a minimum 1.4.3 colour contrast (Level AA), so they can be read by people with low vision. 

Images and photos 

Images and photos must always have appropriate license. For example, sourced from royalty free websites, subscriptions or created in house. 

Images should not contain text. 

Images of people or models must have been formally consented to, signing a model release form. 

Images should be of a high quality so that they do not appear blurry and pixelated. However, they should also be optimised for the web, so they do not take a long time to load. 350kb is a good image quality to aim for. 

Illustrations 

Use the same artistic style throughout the app. Ensure illustrations are in SVG format where possible for better rendering.  

Icons 

Use vectors SVG for your icons as they will render at a sharper quality on various devices.

Use consistent styles, either outline or filled.

Icons should have the same stroke weights. Avoid using detailed icons, simple icons cause less confusion to the user. 

Touch target 

Minimum of 44px to allow for bigger thumbs and diversity. 

User feedback 

Always provide user feedback wherever possible, such as progress bars, loading screens or clicked states. 

Ways you can achieve this are:

Animations and interactions 

Animations and user interactions provide visual user feedback. For example, a circler loading animation when the app is pulling data allows the user to know their action has prompted the app to do something and they must wait a few seconds.

Other examples of using animations to provide user feedback would include states like hover, focused, clicked and toggled. 

When implementing animation to an app, it's important the animation is a soft and phased transition. This is so it does not have a negative impact on users with visual difficulties.

Avoid using flashing, visually dramatic way of communicating ‘something has happened’ to the user. 

States 

Apps will have various states through the user’s journey. It is important to visually communicate this. 

Loading states 

Loading states are micro-interactions used to indicate to the user that the system is working.

For example, the page is saving. These can be done via skeleton loading screens which simulates the layout of a website while data is being loaded. Other methods would be an animated loading wheel. 

Partial states 

Partial states happen when only a fraction of content on the page is visible to the user.

The aim is to encourage the user to interact with the page more so it is important to indicate above the fold that there is more content to view below the fold by showing parts of an element. 

Error states 

Error state will appear when the user has inputted information in an incorrect format or has failed to input information. The user will not be able to travel through their journey, so it's important to communication this prominently to avoid frustrating the user.  

Universal colour to communicate an error state is red, which is ideal to follow as this will be what the user is used to when interacting with other applications. 

Success states 

Universal colour to communicate an error state is green. 

Buttons 

Placement 

Best practice is to place buttons in the thumb zone, so users do not have to strain.

You can achieve this easily by where possible use a full-width button. Where this is not possible you can take guidance from the following diagram of where to place most-used buttons - 

Image shows thumb zones on mobile. Red areas are hard to reach, orange areas are slightly harder to reach and green areas are easy to reach. Image sourced from AddyOsmani.com - Modern Touch-Friendly Design

Primary buttons 

Primary buttons should be used where the user may want to go.

For example, ‘next’, ‘complete’, ‘start’.

Secondary buttons 

Secondary buttons give users an alternative to a primary action.

Secondary buttons are the ‘go back’ to the primary button’s ‘next’, or the ‘cancel’ button to the ‘submit’ button.