Android Apps Design and User Experience
As a matter of fact, a visually appealing and engaging app is typically a result of having an effective User Experience (UX). Furthermore, design informs a user’s experience of your product, and gives structure, meaning, and beauty to the elements on screen. When you are creating an Android app as a product, it is significant to establish a Design System, which is a single source of truth that allows a team to design, realize, and develop. Material Design is a Design System created by Google to help teams build high-quality digital experiences for various platforms such as Android, iOS, Flutter, and the web. This essay aims to discuss some main sub-systems of Material Design, which makes it easy to utilize for building beautiful Android applications.
Introduction and Overview
The User Experience (UX) can be defined as how a user interacts with and experiences a product, system or service. Enhancing user experience is vital to most companies, designers, and creators when creating and refining products because negative user experience can decrease the use of the product remarkably.
Fundamentally, design informs a user’s experience of your product, and guides them through tasks. In addition, It gives structure, meaning, and beauty to the elements on screen. While you are creating a product, it is significant to establish a Design System, which is a single source of truth that allows a team to design, realize, and develop a product.
A Design System is a point of reference for design and code, and provides a centralized place for important issues such as type, color, and layout practices, which enhances cross-functional collaboration. Design systems are dynamic, evolving with the product, and they improve the design and engineering experience of a product by allowing designers and developers to focus on problematic issues. Besides, they reduce Quality Assurance risks, and offer consistency across all components used throughout a product. Therefore, it allows for easy experimentation and cascading changes as your brand evolves through various iterations. There are some notable Design Systems, including Lightning Design System (by Salesforce), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft). However, this essay will consider Material Design as a default Design System for Android app development.
The four key elements of a successful Design System
The four key dimensions of Design System Value have been represented by Material Design Research in 2020 as follows: Process, Product, Team Health, and Job Satisfaction.
The four key elements of a successful design system and value consists of the process. This defines the way for improving speed and efficiency. The product, which identifies and explains the main reason to maintain issues consistent. Team health, which is vital in keeping the team aligned. Finally, job satisfaction, which builds confidence and continues to grow. Design systems can be critical in an enterprise setting, where there can be a broad umbrella of branding and a variety of various use cases. As a result, whether you are creating your Design System or language from the beginning or building it on available systems, understanding design fundamentals is extremely essential for having successful results. In fact, Google’s Material Design makes it easy to work from a pre-existing design framework, which is customizable.
Material Design as a System of Systems
As it is mentioned, Material is a Design System created by Google to help teams build high-quality digital experiences for various platforms such as Android, iOS, Flutter, and the web.
System of systems is a collection of task-oriented or dedicated systems that pool their resources and capabilities together to create a new, more complex system which offers more functionality and performance than simply the sum of the constituent systems
As a matter of fact, Material Design is a System of Systems. Material Design is composed of lots of systems that provide the creation of beautiful, usable products such as the color scheme, type scale, and shape family. So, it is obvious that understanding its fundamental sub-systems makes material design easy to implement and utilize for building beautiful products.
Color
Initially, color is one of the most critical building blocks within a Design System. It creates visual hierarchies, and indicates the intent of a feature or component. Colors should be applied consistently throughout a UI and be compatible with the brand it represents. It should distinguish among elements. This means it should create sufficient contrast among them. Also, it should be applied purposefully. Thus, it conveys meaning in multiple ways, like relationships among elements and degrees of hierarchy. In Material, color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. To create contrast among elements, like a distinct element of a data table, you can use light or dark variants of your primary colors. You can be able to use these to distinguish elements within a component, like the icon of a floating action button from a circular container.
Material’s color system is an organized approach to applying color to a UI. Global color styles have semantic names and defined usage in components — primary, secondary (brand colors), surface, background, and error.
Moreover, color is critical when it is used to point out different states, such as error states, selecting colors that are different from the primary palette, and on and off states. Sometimes, dense dashboards require to display multiple infographics on a single screen, each with multiple sections. To accomplish this task, you should adopt a color theme with one primary color and up to five additional colors. This color them allows you to demonstrate legible distinct infographics.
Every color also has a complementary color used for elements placed “on” top of it to promote consistency and accessible contrast.
When creating your color story, it is extremely important to keep accessibility and legibility in mind. Fortunately, the color picker is a prominent tool to help make sure information is readable, particularly for backgrounds, imagery, and type. When paired with typography, color can be able to rise both the visibility and level of type’s importance.
Eventually, app surfaces use colors from certain sections in your color palette, like a primary color. Whenever elements, like text or icons, appear in front of those surfaces, those elements should use colors designed to be clear and readable against the colors behind them. This category of colors is called “on” colors, referring to the issue that they color elements that appear “on” top of surfaces that use the colors as follows: a primary color, secondary color, surface color, background color, or error color. When a color appears “on” top of a primary color, it is called an “on primary color”. For instance, while the Primary color style 1 is used as a container color, the On Primary color 2 can be utilized for inner contents.
Typography
Typography is another crucial part of a Design System. In Material Design, typography is based on type scale. A type scale is a hierarchy of type styles or font families that can be used for different situations throughout a layout.
The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
By using a type scale, you can be able to apply your type throughout products consistently and systematically. The material type scale is a combination of 13 reusable styles that each has an intended application and meaning, all the way from big headline styles, to body text, to captions and buttons. Working out a good type scale for your application keeps typography consistent and meaningful to users, while providing enough stylistic options to create a compelling appearance and tone. If your Android app does not already have a specific brand typeface to use, you can select the typeface that share some characteristics with other parts of your brand’s identity or the tone you desire to convey in the app. You should consider some important issues, such as how the brand’s voice would sound, what shapes are used in the logo, or whether your brand identity is serious or playful in this process.
More stylized display typefaces are expressive and make a great choice for big headlines and other selected moments in an app. Type is one of the subsystems that allow you to create themes for your material components, customizing them to create something unique. For instance, the text on a button should be shared by all the buttons in a dialog box and tab labels.
Additionally, if you want to create and apply a custom type scale to a data table, you will address some steps as follows: First of all, you should look for a font that you use or most of our components. Once you find a font, you can create a theme using style tags in our XML resource file. Then, apply the theme to the whole app in the Manifest file. You can push this even further by selecting a display typeface that complements what is already there. Choose an interesting display typeface, and specify which parts of the type scale should adopt this new typeface as well. You can be able to paste in some code that indicates our theme to apply this typeface to the headline styles. Also, plugging in any type face will allow you to obtain values that you can then apply in code or in your design tool of choice, including Figma design kits.
Shape
Shape is a significant aspect of material design because it draws the eye in and conveys both ornamentation, as well as action. A cohesive shape system focuses attention and can suggest interaction.
Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.
When working within design elements with various types of shapes, such as tables and dashboards, customization of buttons, and tabs can give you more branded appearance. This aspect can be paired with typography and color; therefore, it can create a very distinct look for your brand indeed. Also, there are some important issues should be addressed as follows:
- Paying close attention to rounded corners or the radius when creating components.
- Trying to be consistent with the radius for certain similar elements.
- Reserving distinct shapes and rounded corners for buttons or highlighting something unique.
Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous.
Afterwards, when designing a layout, there are some main ideas to deal with. First, you should start by dividing your layout into regions. Then, you should decide where your main content lives and where the controls and navigation buttons should proceed.
Second, you should make sure your layout is responsive to various screen sizes and orientations. Furthermore, grids and margins should adapt to those changes.
Third, it is crucial to define minimum and maximum dimensions for components and layouts, and scale among them. This will lower the overhead of handling layouts and offer you a smoother spectrum of response.
Fourth, once you have defined the grid and margin behaviors, you should consider the internal composition, where you are putting content and components, and how they relate to the edges of the screen and other components. This will affect how users perceive their meaning, function, and relatedness.
Ultimately, you should consider the information hierarchy in any layout and ask some vital questions during this process as follow: what is absolutely essential? what can be concealed? that it is revealed only when the user needs it?
Interacting users with a component should determine the degree of density in a UI. When users view and interact with large amounts of information, high density components can enhance the experience by making more content available on screen, increasing the density of lists, tables, and long forms makes information easier to scan, view, and compare. However, this idea cannot be applied to all components, for example, tasks and alert-based components should not increase their density.
Responsive layout
As you know, Android devices can have all shapes and sizes. Thus, your Android app’s layout needs to be much more flexible. Instead of defining your layout with rigid dimensions that assume a certain screen size and aspect ratio, your layout should gracefully respond to various screen sizes and orientations. By providing as many screens as possible, your Android app can be made available to the majority number of users with different devices.. Besides, making your app flexible for different screen sizes ensures that your application can manage window configuration changes on the device efficiently, like when the user enables multi-window mode.
In fact, you must display only the content that is relevant to the task properly. Showing a dialogue screen is an appropriate example of this. Users may run your app on different devices with various display sizes. Also, your layout should not be the same for each device. On a mobile device, for example, the screen size is limited. As a result, a dialog screen with lots of content will fit the whole screen. Then, you should not simply repeat this layout on a tablet with a much larger screen. The small mobile friendly dialogue portion can remain the same size when the rest of the screen is used for other purposes. This can support much better experience for users because the small, and possibly not optimized, screen can be used in a tablet setting without modification. In addition, a data heavy screen can need that you show it to users in different ways based on their devices. For mobile users in case, consider using a list to show them just only the minimum content they require. A proper example is Gmail. So, you should give them the option to customize or sort the list by field. Tablet users who have much more room to work with can observe the data table instantly. This will considerably improve both the tablet and mobile experience, while optimizing UX for each form factor.
Navigation
Navigation enables users to move through an Android app. It is extremely important to improve interactions using inherent native gestures, and to plan an app’s navigation destination and their relative positions within the navigational architecture.
Primary destinations are major parts of an app that users access frequently. These are often destinations that a user intends to switch between frequently or access quickly. Secondary destinations are found within or revealed by primary destinations, such as a tap bar that organizes genre and music library, or anchor links that assists users navigate a long page of content. Providing destinations are top level destinations that are either less frequently used or exist to support the functionality of the app. Examples of supporting destinations can include settings, archive, trash, and help and feedback. In general, supporting destinations should not be placed in components like the bottom nav or navigation rails, because these components carry size constraints and prioritize primary destinations. Eventually, another design matter is responsive navigation experience based on the device. Generally, you would use Bottom navigation on mobile devices, navigation Braille on tablets, and drawers on desktop. Therefore, Bottom navigation bar can be used for some use cases as follows:
- 2–5 destinations on mobile
- Increased awareness
- Frequent switching
However, you should avoid it if long labels needed.
In conclusion
Design informs a user’s experience of your product, and gives structure, meaning, and beauty to the elements on screen. When you are creating an Android app as a product, it is essential to establish a Design System, which is a single source of truth that allows a team to design, realize, and develop. Material Design is a Design System created by Google to assist teams build high-quality digital experiences for different platforms such as Android, iOS, Flutter, and the web. This article discusses some main sub-systems of Material Design that makes it easy to implement for building beautiful Android apps based on Google resources.
