It's not a secret for anybody, even laypeople, in terms of development and interface design, that the world of mobile applications is dominated by two platforms — Google Android and Apple iOS.
Both operating systems created an array of standards, norms, patterns, solutions, and expectations that must be met for an application to successfully pass the verification and publication process.
Both systems have, obviously, their characteristics and clear advantages and disadvantages.
Even if you are a fan of either platform, denying even small advantages to a competing platform will be an expression of bias and extreme subjectivity.
The design of mobile applications for Android and iOS, although in a general sense, it's the same, differs in detail significantly.
The creation of applications for Android and iOS is governed by its peculiarities, which we'll discuss today.
UX of mobile applications — designed with Android and iOS in mind — can seem like solving identical problems, but in reality, it's a matter of solving issues more characteristic of a given system.
Because every system, collections of norms, and standards, Android and iOS are a source of desirable solutions (positive aspects) and many problems (negative aspects).
Are you ready? So, without further ado, we invite you to read the article!
We develop applications based on AWS services and AWS components.
Designing mobile applications for Android
Mobile apps have very different requirements, although they can be used to perform similar business processes stemming from business analysis. That's one thing.
Secondly, as part of the technological conditions of the parent operating system, their own design concepts, market competition, and platforms, they have developed particular patterns, languages, and design approaches.
They don't only include standards, recommendations, and requirements but also offer ready-made components, styles, tools, technologies, and ecosystems.
They constitute separate design worlds that try to answer all problems, challenges (e.g., connected to the characteristic of mobile devices), needs, and expectations related to the usability of mobile applications.
So, how do they differ? What design guidelines do project teams need to consider when designing a mobile application with the intention of launching it on a given platform, operating system of a given device?
The Android platform is associated with a dedicated design language with a very nice and promising name Material Design.
What is Material Design? What functions does it have? How does Material Design help create better mobile applications?
In the article "Material Design for Android," you can find an overview of patterns, API interfaces, and a definition of Material Design, according to which, it's a comprehensive guide that supports the visual design process (movement, interaction) on platforms and devices using the Android operating system.
Material Design is simultaneously a:
- Certain philosophy, approach to design
- Design language, visual style
- Guide indicating design patterns
- Library of components, styles, themes, and widgets
- Collection of rules which designers and programmers use to develop mobile apps.
We can say that Material Design serves quality. Creating a mobile application according to its guidelines usually allows you to meet platform requirements and fully contributes to increasing the satisfaction of a mobile app user.
In the article published on the Interaction Design Foundation website, "What is Material Design?," Material Design is defined as a language supporting onscreen touch thanks to functions rich in cues and natural movements that mimic objects from the real world.
Material Design is characterized as a tool thanks to which UX/UI designers can improve and enhance impressions of mobile application users with 3D visual effects and animations.
The purpose is to offer an appearance and behavior of design elements (especially interfaces) expected by future users of mobile applications. Thus, in line with existing knowledge, experiences, perceptions, requirements, and expectations.
The authors of the abovementioned article add that by mimicking the real world; you reduce users' cognitive load by carefully paying attention to the layout, visual language, pattern library, and maximizing predictability and eliminating ambiguity.
A distinctive feature of Material Design is that it guarantees high realism of interfaces and offers users control (including cognitive control) over components that mimic objects known from the real world with their appearance and behavior.
The unique philosophy of designing in the spirit and with the help of Material Design components can be boiled down to the following:
- Mimicking laws of the physical world — objects in an app should behave like real objects
- Avoiding behaviors contrary to these laws (e.g., disappearance or autonomous movement)
- Maintaining user experience consistency — mobile applications should look and work in line with prevailing conventions and user expectations.
Furthermore, Material Design:
- Is firmly rooted in the classical approach to typography
- And in thinking in terms of grids, spaces, scales, colors, and visual hierarchies.
And, even more importantly, with the help of its tools, it's possible to create mobile applications (especially their interfaces and navigation) quickly, in a standardized (but not devoid of individualism) manner.
Its ease of use stems from many tools, libraries, components, and clear, specific design guidelines regarding all application elements. Its appearance, aesthetic, functionality, usability, and pleasure its users feel.
Designing mobile applications for iOS according to HIG guidelines
It shouldn't be surprising that Apple's platform also developed its own solutions, a system, language, and a collection of patterns, components, styles, and ideas.
In Human Interface Guidelines, in the iOS Design Themes section, to be exact, you can learn about this unique approach to design and the distinctive features that characterize (or should characterize) the designs of mobile applications dedicated to this platform.
The distinguishing feature of Human Interface Guidelines is the three values, goals, and attributes that every team that designs applications for Apple's system uses.
Namely:
- Clarity, which should characterize the text regardless of the size, color, or context in which it's presented, and it should emphasize its role and interactivity in a subtle yet clear way
- Deference expressed in reducing the number of frames, gradients, and shadows, which highlights the crucial content
- Depth realistically reflected visual hierarchy, which helps better suggest the function, role, and meaning of a given element.
Moreover, designing according to Human Interface Guidelines should be oriented toward obtaining, using, and providing the following:
- Aesthetic Integrity
- Consistency
- Direct Manipulation
- Feedback
- Metaphors
- User Control.
Aesthetic Integrity involves using aesthetic and visual effects to highlight a given function or suggest the behavior of an app.
An application in which consistency is a value and goal offers interface elements (e.g., buttons available in the component repository UIKit) that are well-known and expected by users.
Using gestures and directly manipulating application elements enables increased engagement and a better understanding of how things work and the results of actions.
Feedback is naturally related to activities and using gestures. It's used to suggest functions and indicates the option of interacting with an element and suggesting results.
In turn, metaphors allow users to learn how things work faster and provide cognitive control.
Metaphors are rooted in well-known experiences from the real world and enable you to achieve greater comfort of interaction.
And this allows you to obtain the impression that a human, a mobile application user, controls the process and results.
The distinguishing feature of mobile apps designed for the iOS platform is also a navigation that has three variants:
- Hierarchical navigation
- Flat navigation
- Navigation based on content or experience.
In the first case, it's about making individual selections on individual screens until reaching a goal.
Flat navigation allows users to navigate between multiple categories. In turn, navigation based on experience or content enables them to move freely within available content.
Regardless of the type of navigation or configuration of these types, it's essential to maintain the following:
- Logic of navigation
- Predictability of navigation.
Differences and similarities between Human Interface Guidelines and Material Design
As we've written in the introduction, the differences between both approaches, philosophies, and collections of guidelines are best seen in the details.
Development, testing, typical functions, and the use of native attributes of a mobile device in both variants won't differ.
General user experience principles (offering a maximally positive experience and the usability of an app) in the design of mobile applications (Mobile UX Design) for both platforms are precisely the same.
For example, Hick's Law, the principles developed in Task-oriented design, which we wrote about in the article "Quick Task! Task-Oriented Design in Mobile Design" — and several others — will have precisely the same purpose and role to play in the case of applications designed for Google's platform as for Apple's platform.
The most visible differences between iOS and Android can be seen in the following:
- Style of the interface — iOS is flat, and the Android's style is based on shadows
- System fonts — San Francisco (iOS) and Roboto (Android)
- Size, dimension, and hierarchy of headlines that are much more suggestive and clear in mobile applications written for Android
- Placement of titles — center alignment (iOS) and left alignment (Android)
- Styles of buttons
- Size of interface elements — in iOS, they're designed, described, and expressed in points, while in Android, values are expressed in Dp (Density Independent Pixel)
- Optimal screen sizes — on the iOS platform, it's 375 points, and on Android, 360 Dp
- Placement of the "Back" button, which is located in the top left corner for mobile applications on iOS and at the bottom in case of applications made for Android.
Of course, this is a very demonstrative set of differences. To summarize them in a more general way, it should be said that the differences are mainly seen in patterns, standards, and design requirements regarding the following:
- Cards
- Navigational bars
- Icons
- Dialog boxes.
Both platforms (Android and iOS) also have common features, thanks to which it's possible to provide a consistent and positive user experience to users who use both variants of a given mobile app.
Similarities between mobile applications created based on Material Design and Human Interface Guidelines are seen primarily in the maintaining of the following:
- Same meanings of interface elements (e.g., search icons)
- Standard layout — top/bottom for navigation elements and middle for content
- Results of gestures — taps, scrolling, dragging, and pinching in both versions of mobile applications have the same effect.
Designing mobile applications for Android and iOS. Summary
- To a large extent, the process of developing mobile applications is dictated by Google's Android and Apple's iOS.
- Both platforms have created a number of standards, norms, patterns, solutions, and expectations that must be met in the mobile application development process for an application to successfully pass the verification and publication process (e.g., in the App Store and Google Play).
- Designing mobile applications for Android and iOS differs primarily in details regarding navigation, aesthetics, size, and forms of elements.
- Android and iOS developed their own separate — vastly different — approaches, patterns, styles, philosophies, languages, and design approaches regarding the creation of mobile applications in which usability (UX) is equally important as individuality.
- A mobile app designed for Android should meet requirements determined in Material Design.
- Material Design is simultaneously an approach to design, design language, visual style, guide, library, and collection of rules that designers and programmers use.
- A distinctive feature of Material Design is that it guarantees high realism of interfaces and offers users control (including cognitive control) over components that mimic objects known from the real world with their appearance and behavior. Thanks to this, the mobile application is understandable and easy to use.
- With Material Design, fast and standardized design of mobile applications is possible.
- Human Interface Guidelines was based on clarity, deference, and depth.
- Creating an application in accordance with the Human Interface Guidelines should be oriented toward achieving aesthetic integrity and consistency. And on offering direct manipulation, and feedback, using metaphors, and guaranteeing full user control.
- Exactly the same UX knowledge is used when designing mobile applications.
- The differences in design patterns are best seen in the requirements regarding the design of cards, navigation bars, icons, and dialog boxes, i.e., the elements that are the core of the design, that distinguish any mobile application.
- Both platforms also have common features, thanks to which it's possible to provide a consistent and positive user experience to users who use both variants of a given app.
- Today, programming for mobile platforms is a task in which development, technologies, solutions, and functionalities are oriented towards maximizing user satisfaction, offering a system that allows you to create an application that is maximally useful, attractive, and meets a range of expectations of its users.
