Nomenclature of mobile app visual elements — Android vs iOS

Vivek Kumar
UX Collective
Published in
4 min readJul 12, 2018

--

Design Pattern of Mobile Visual Elements every UX Designer should know:

Most popular mobile apps are now being designed mainly for two platforms Android & iOS, the reason is Android and iOS are the top two most used operating systems in the world as reported from the leading search agency Gartner.

So, if a UX Designer is designing an application which will be available on both the platforms, he/she should know the difference in the names of visual element, although they look or behave same on each platform.

Visual Elements Terminology | Android vs iOS

1. Top App Bar vs Navigation Bar | Android vs iOS

These bars appear on the top of an app screen, just below the status bar. They are used for branding, screen titles, navigation, and actions. They can transform into contextual action bars.

.

2. Top Navigation vs Segmented Controls | Android vs iOS

Both of these have almost same behaviour. Within these, screen is divided into equal width and may contain icons or texts or combination of both.

.

3. Bottom Navigation vs Tab Bar | Android vs iOS

These appear at the bottom of an app screen and provide the ability to quickly switch between different sections of an app. They mostly have 3 to 5 destinations, but can vary based on device size.

.

4. Dialogs vs Alerts | Android vs iOS

These are a type of modal window that appears in front of app content to provide critical information, ask for a decision or request feedback. They consist of a title, an optional message with one or more buttons.

Image Credits : www.google.com

.

5. Full Screen Dialog vs Popover | Android vs iOS

These are a type of modal window that appears on entire screen. They are used for content or tasks which require keyboard input and have two buttons; one for confirmation and the other for cancellation.

.

6. Confirmation Dialog vs Pickers | Android vs iOS

They include one or more scrollable lists of distinct values. In Android, user taps a confirmation action to confirm a choice or dismissive action to cancel. In iOS, user chooses a distinct value and taps outside the picker for confirmation.

.

7. Modal Bottom Sheet vs Activity Views | Android vs iOS

They present a set of choices while blocking interaction with the rest of the screen. They may contain a task such as Copy, Move, Favorite or Share, relevant to the current context.

.

8. Dropdown Menu vs Action Sheet | Android vs iOS

These are a compact way of displaying multiple choices related to current context. They appear upon interaction with an element (such as an icon or button) or when users perform a specific action.

.

9. Floating Action Button vs Call to Action Button

They represent the primary, or most common, action of the screen and perform a constructive action (such as create, share, or explore).

Image Credits : www.twitter.com

And this doesn’t end here. There are even more elements which behave same on both platforms but have different terminologies. Keep exploring.

Sources : https://material.io/design & https://developer.apple.com/design

Thank you for reading..! Please do CLAP if you found it worth reading..!

--

--