About Native App Design

Introduction

A mobile application is a program installed on a smartphone. Some apps come pre-installed as system applications, while others can be downloaded from online stores like the App Store and Google Play.

The first mobile internet connection became possible in 1998 with the advent of WAP (Wireless Application Protocol). With devices like the Nokia 7100, users could read news, check email, or download maps. However, the technology didn’t gain widespread adoption due to slow internet speeds, the inconvenience of push-button phones, and the lack of perceived value by companies in connecting with customers this way.

Next came the Symbian operating system, which allowed the installation of third-party applications. Despite this, widespread adoption was hampered by the complexity of development and the need to purchase security certificates to sign apps. While Nokia made efforts to support developers, these attempts were largely unsuccessful, and Symbian eventually faded into obscurity.

The release of the iPhone in 2007 initially encouraged the development of mobile-responsive websites. Steve Jobs initially envisioned developers creating web applications that would work through the browser. However, after Apple permitted third-party apps in 2008, the era of mobile app development truly began.

Why are Mobile Applications Needed if We Already Have Websites?

Using a mobile app is generally more convenient than accessing a website, even if the site is optimized for mobile devices. First, browser panels take up valuable screen space when using a website on a phone. Second, it’s challenging to create a website that works equally well on both desktops and mobile devices. Typically, mobile optimization focuses on adjusting the grid and blocks, but it doesn’t address differences in navigation, form filling, opening new windows, and other behaviors that require distinct approaches for an optimal user experience in different contexts.

This doesn’t mean an app is always necessary—businesses weigh the economic feasibility of investing in app development and support. Sometimes, a website meets all business needs, while in other cases, a service may only have a mobile app without a corresponding website. For designers, this means considering different versions of the same service, usually a website and mobile apps for iPhone and Android.

One service can be accessed from various devices, each requiring a tailored approach.

What to Consider When Designing for Different Platforms

• Data Synchronization

  In some cases, like online banking, certain financial transactions may only be possible through the website. In the mobile app, it’s important to clearly indicate why a service is unavailable on a smartphone. Additionally, any transactions made on the website should be reflected in the app. Otherwise, users might worry if they don’t see their actions mirrored across platforms.

• Simultaneous Use Across Devices

  Ideally, users should be able to work across multiple devices within the same application without losing information. For example, if you just added a track to your favorites on your iPhone, it should appear in the web version asynchronously or when you refresh the page. Also, consider scenarios where, in the web version, a user bookmarks a service page under different accounts. This could result in varying levels of access or different role models, which should be clearly communicated in the interface.

Why Use Native Design?

Native design refers to the design principles and elements provided by iOS and Android.

• 1

  Improves Development and Support Efficiency

  Mobile development on Android involves a vast range of devices and operating system versions—about 8,000 to 12,000 models. Using native elements helps ensure that your design is correctly displayed across a wide variety of devices. While iOS has fewer device models, it has stricter app publication requirements. Native design can streamline the adoption process for your app on iOS, and keeping up with frequent OS updates is easier with native elements.

• 2

  Native Design is Familiar and Predictable

  Designs based on Human Interface Guidelines (HIG) for iOS and Material Design for Android are commonly used in standard applications and settings, making them familiar to users. Even if your team uses React Native for app development, understanding design guidelines for different platforms is crucial to creating intuitive user experiences.

Should We Only Use Native Elements?

Not necessarily. Native design doesn’t cover all possible variations and might limit your ability to find optimal solutions. Assess the costs and benefits of developing and supporting custom elements. If a custom element offers unique functionality that provides a business advantage, it may be worth creating. However, standard screens like settings, profiles, and contacts are often more efficiently designed using native elements.

Is It Necessary for iPhone and Android Designs to Be the Same?

There’s no definitive answer, but it’s important to make the design as consistent as possible across platforms by using native elements. Finding a balance between platform-specific design and consistency is often achievable. Here are some examples of equivalent elements on different platforms that can be modified to have similar views:

Bottom Navigation: Android Bottom Navigation Bar and iOS Tab Bar.

Top Navigation: Android App Bar and iOS Navigation Bar.

Modal Windows: Android Fullscreen Dialogs and iOS Fullscreen Modals.

Curtains: Android Bottom Sheet and iOS Action Sheet.

By styling native elements appropriately, you can create a similar navigation experience across platforms. Aligning designs is not as difficult as it might initially seem. This is just a starting point; you should explore design guidelines for each platform and consider how to adapt them to your specific situation.