UI Design Principles Every Mobile App Developer/Designer Must Follow

Principles to adhere to while designing mobile app’s

In mobile app development, the UI (user interface) and UX (user experience) play the most significant roles in a mobile app’s success

  • Consistency of the design layout: Different sections of the app must be coherent in the design, and there must be a consistent flow of the layout throughout the app.
  • Unambiguous Interactive Elements: The design elements that are interactive in nature must be clearly depicted. Ambiguity should be avoided to make sure that the users are going to access such elements when required by them. Options hidden in menus may sometime be forgotten.
  • Single Trial Learning Experience: The term ‘Intuitive’ is often used to describe mobile apps when suggesting that they are very user-friendly.
  • Anticipate and Answer Users’ Queries: When a users tap a button, they want to know whether the process has started and how long will it take. As technology abstracts these actions, the users are usually kept in the dark while the process is going on. Use Toast in Android and notifications in iOS so users will be notified when a process has completed.
  • Layered User Experience: The UX should be layered. Layered here refers that all the features of an app must not be exposed at once. It should surface out as the users delve deeper into the app and discover new things. This would help in keeping the users’ interest intact for a longer time.

Mobile structure

This structure includes a permanent app bar and floating action button. An optional bottom bar can be added for additional functionality or action overflow. Side nav menus overlay all other structural elements.

Top left to right: Side nav, app bar/primary toolbar, content area (below the app bar/primary toolbar), and right nav
On the bottom: bottom bar

Baseline Grids

All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.

        

Type aligns to a 4dp baseline grid. See detailed information on typography

List

A two-column, left-aligned list with a 56dp floating action button.

 

Screen edge left and right margins: 16dp

Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp

Vertical spacing

  1. Status bar: 24dp
  2. Toolbar: 56dp
  3. Subtitle: 48dp
  4. List item: 72dp

Detail view

A detail card with a 56dp floating action button.
   

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.

  1. Status bar: 24dp
  2. Toolbar: 56dp
  3. Space between content areas: 8dp
  4. List item: 72dp

Navigation drawer

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

   
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

  1. Account menu and list items: 48dp
  2. Space between content areas: 8dp
  3. Navigation right margin: 56dp

Density-independent pixels (Dp)

Density-independent pixels (pronounced “dips”) are flexible units that scale to uniform dimensions on any screen. When developing an Android application, use dp to display elements uniformly on screens with different densities.

Screen density Screen width in pixels Screen width in density-independent pixels
120 180 px    240 dp
160 240 px
240 360 px

Image scaling
Images can be scaled to look the same across different screen resolutions by using these ratios:

    Screen resolution           dpi          Pixel ratio         Image size (pixels)    
xxxhdpi 640 4.0 400 x 400
xxhdpi 480 3.0 300 x 300
xhdpi 320 2.0 200 x 200
hdpi 240 1.5 150 x 150
mdpi 160 1.0 100 x 100

Designing for mobile has some really exciting challenges and big opportunities ahead of it. The fast development of technology and the constant changing of user contexts means that today’s constraints may not exist in the next few years. Innovative thinking and creativity will help us explore new ways of looking at these challenges, and allow us to continue to find new, beautiful and usable solutions to the design problems in front of us.

The look of an app’s user interface depends on the market that you are targeting. By adhering to standard guidelines you can create a user interface that is easy to understand and user friendly. With the world of app development continuing to advance and grow, you need a unique and intuitive user interface to make your app stand out from the crowd.

Leave a Reply

Your email address will not be published. Required fields are marked *