Construction of a Native Mobile User Interface

April 5th, 2022 by Ishan Geeganage

More 6.64 billion people across the globe are using smart phones (and the apps on them). The majority of people use mobile applications for banking, searching for and ordering from restaurants, health, news, email and engaging on social media platforms.

A mobile user interface is the graphical and usually touch-sensitive display on a mobile device, such as a smartphone or tablet, which allows the users to interact with the device’s apps, features, content and functions.

In a mobile app, the icon is the first thing people see. The app icon design should aim to entice users to download the app, as well as help people quickly find the app on their device screen. Research has shown that an app icon can be a significant factor in the success or failure of an app.

App Design Considerations

Aside from the icon, when designing a mobile app, it is important to consider the following:

Navigation

Successful navigation is simple and intuitive, providing an obvious way to move between screens and functions. As many apps are used on very small screens, the effective use of screen real estate is very important.

Large touch area

Allowing sufficient space around controls will ensure that buttons, links etc are easy to tap using the thumb or finger.  Insufficient space and smaller controls will annoy a user and potentially cause them to make mistakes.

Simplicity

It is not necessary to display every possible piece of information on the interface. Organising content in a way that provides the user with a clear understanding of information, and allows them to drill down when they need more will allow you to reduce clutter and make using your app easier.

Larger text

It is important to keep text size in mind when designing for a mobile screen.  Designers work on a desktop computers to create app designs; it is important to constantly check that the text size will be easily readable once it is being seen on a mobile.

Use Native Controls

Many so-called native mobile controls are available to use within your app design.  These are controls, such as switches, list choices, buttons etc.  One of the benefits of building a native mobile app is that you have access to the native controls.  It is not a good idea to use simple web controls instead, as these are more difficult for the user to interact with, and the native controls are more expected by the user.

Available Components

Apple, unlike Android, does not have a dedicated “back” button.  When we are designing the user interface for a native Apple app, we need to address the Back button functionality.

In Messages, Mail and even Safari, a simple swipe right from the edge of the screen will navigate the user back to the previous window. This gesture also works in some third-party apps like Instagram.

Similarly, when we using the common screen elements like the Date Picker, Time Picker and Dropdown, we cannot produce the same look and feel for both iOS and Android apps. This is because these default components render a different look and feel in iOS and Android.

Use Simple Forms

Keep forms for user data entry to the simplest possible set of fields and options.  Use form controls to keep the need to type text to a minimum.  When building forms, there are various ways to help the user enter data, but keeping the design to the simplest possible in the first place is paramount.

Consistent Experience

If your site/app is present on both web and mobile, provide a consistent experience to the user.

Screen Structure

We need to consider the screen layout when designing the app. Apps can have different layouts, but there are many common screens which will usually have a layout something like the following:

mobile app layout

Images and Gradients

Wherever possible, instead of using images or image gradients, use colours and colour gradients to create in the same effect. Doing so will reduce the usage of complex images and therefore reduce the operational complexity of the app, thus improving performance of the app.

Building an App User Interface

Planning is very important before we write any code in order to convert an app design, into an actual functioning app.  The following activities are involved in building the design for a native mobile app.

Cutting up images

iOS

A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.

For example, suppose you have a standard resolution (@1x) image that’s 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.

Android

To provide good graphical qualities on devices with different pixel densities, we need to include multiple versions of each image in your app—one for each density bucket, at a corresponding resolution. Otherwise, Android will scale your image so it occupies the same visible space on each screen, potentially resulting in scaling artifacts such as blurring.

For example, if you have a image that’s 48×48 pixels for medium-density screens, the following size images need to be included within the app:
• 36×36 (0.75x) for low-density (ldpi)
• 48×48 (1.0x baseline) for medium-density (mdpi)
• 72×72 (1.5x) for high-density (hdpi)
• 96×96 (2.0x) for extra-high-density (xhdpi)
• 144×144 (3.0x) for extra-extra-high-density (xxhdpi)
• 192×192 (4.0x) for extra-extra-extra-high-density (xxxhdpi)

app development

Using default icons

iOS and Android provide access to a small number of system icons. These built-in icons are available for common tasks and types of content. Every system-provided image has a specific, well-known meaning. To avoid confusing users, it’s essential that these system icons are used in accordance with its meaning and recommended usage.

iOS

standard app icons when building a mobile app

Android

Android standard app icons app development

Layout Construction

iOS

Auto Layout is a development tool for constructing adaptive interfaces. Using Auto Layout, we can define rules (known as constraints) that govern the content in an app. For example, we can constrain a button so it’s always horizontally centered and positioned eight points below an image, regardless of the available screen space.

Auto Layout automatically re-adjusts layouts according to the constraints we specify for certain environmental variations, known as traits. We can code an app to dynamically adapt to a wide range of traits.

auto layout use when building a mobile app

Android

Android provides an XML vocabulary for ViewGroup and View classes, which means that most of the user interface of an Android app is defined in XML files. The Android Studio’s Layout Editor is used to assist in the creation of the user interface; it writes the XML as the programmer drags and drops views to build out an app layout.  Fine adjustments can then be made within the XML if required.

building an Android mobile app interface

Code Manipulation of the user interface

iOS

The Interface Builder editor within Xcode makes it relatively simple to design a full user interface without writing any code. Simply drag and drop windows, buttons, text fields, and other objects onto the design canvas creates a functioning user interface.

We can independently design interfaces, separate from their implementations. User interfaces are actually archived Cocoa or Cocoa Touch objects (saved as .nib files), and iOS will dynamically create the connection between UI and code when the app is run.  It also assist developers to re-use common design elements.

Android

The Layout Editor enables us to quickly build layouts by dragging UI elements into a visual design editor instead of writing layout XML by hand. The design editor can preview a layout on different Android devices and versions, and we can dynamically resize the layout to be sure it works well on different screen sizes.

Supporting Libraries

We can develop custom screen designs without using third-party libraries, but certain libraries are very beneficial for efficiently building highly customised designs.

For both iOS and Android there are numerous libraries we can use for custom components like alert, popup, chat and animation.

iOS examples:
• LoadingShimmer
• ViewAnimator
• AnimatedCollectionViewLayout

Android examples:
• GarlandView
• InfiniteCards
• SparkButton

Testing

Once we have completed the build of an app – that’s implementing both the design and the required functionality – then it is imperative that we undertake thorough testing.  As a developer, I will thoroughly test my app, but it is also important that an end user tests it as well, as they are likely to uncover issues that I have considered.

Mobile application testing is very different from software testing and website testing. We need to consider the following before performing mobile application testing:

  • Screen resolution (different screen sizes in both iOS and Android)
  • Screen orientation (landscape, portrait)
  • Different devices’ manufacturers (only for Android phones)
  • Different operating system versions in both iOS and Android can have an impact
  • Changing a system settings like font size, themes and dark mode
  • Turning on/off GPS and incoming calls

This article provides a simple overview of what’s involved in building a design into a functioning mobile app. If you have questions, please don’t hesitate to get in touch.

Facebooktwitterredditpinterestlinkedinmailby feather

Leave a Reply

Subscribe to our monthly

Contactpoint Email News

Our enews is sent out approximately monthly, and contains information on latest digital technologies, and how these can be used to help your organisation grow.

To subscribe, simply fill in your details below: