Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
. . .
. . .
There are more and more apps launched for both Android and iOS. But
we can find those app design may not tackle or notice the differences
between Android and iOS on UI components or behavior patterns.
Sometimes we could find the iOS components are used on Android
apps or Android patterns are applied on iOS apps. The misused
components/patterns may cause users confused.
Youtube’s structure evolution: The important features, My subscriptions, History and Playlist are put into a drawer -> App structure is reorganized, drawer
is removed and main features are moved into tabs -> Trending is added into tabs.
Google Photos’s structure evolution: Main features are put into drawer -> Main features are moved into button navigation -> Search oating action
button, which may interrupt browsing photos, is transformed into a search bar.
Please note that, there are still some differences between Android tabs
and bottom navigation:
3. The item amount in Tabs is flexible. You can put 2-5 items in fixed
tabs or more items in scrollable tabs. But only 3-5 items can be put
into bottom navigation. 2 or above 5 items are forbidden。
iOS has used bottom “tab bars” as a default navigation for a long time
and never changed. Tab Bars, just like Android bottom navigation, have
3 to 5 category items and you can switch category views by tapping
items.
It is worth noting that tab bars usually exist even you enter the next or
deeper levels from the top one. Tapping the highlighted item on the tab
bar will bring you back to the top level. Tab bars disappear when you
are in modal view or enter detail views with bottom toolbars. However,
in Android apps, both tabs and bottom navigation will disappear when
you enter the next page in deeper levels.
2. App Bars (Action Bars) VS. Navigation
Bars
The bars on the top area of Android app screens are called app bars,
a.k.a. action bars and toolbars, which are mainly used to put current
screen name or app names and action buttons. The names are put in
the left side of action bars and action buttons, which are usually not
more than 3, put in the right side. If the actions are more than 3, we
would use overflow icon and put the less important actions into the
overflow menu.
Both Android and iOS have their own back icon styles. But iOS usually
puts a string, back or the name of the previous page beside the back
icon, which let users know where they will go back more precisely.
Several Common App Bars & Navigation Bars
3. Toolbars
Action buttons can be put on not only action bars/ navigation bars but
bottom “toolbars” on both Android and iOS.
Even though the bottom toolbars are not mentioned in Material Design
Guidelines (They talk toolbars as app bars only), we still can find the
bottom toolbars are used in Google Keep and Google Photos.
Bottom toolbars are one of the common iOS UI components and can be
found in many apps. Both icons and text as action buttons and status
descriptions can be put in toolbars.
4. Tabs VS. Segmented Controls
Pages in the secondary or lower level of hierarchy can utilize “tabs” on
Android and “segmented controls” on iOS apps.
Both Android tabs and iOS segmented controls can be placed in the
position of action bar/ navigation bar.
Android tabs can be with text only, with icons only or with both icons
and text, which are rarely found in current apps. Both icons and text
can be put into iOS segmented controls. Mixing text and icons in a
segmented control should be avoided.
All tappable text in Android are UPPERCASE, and therefore text on tabs
are uppercase. iOS segmented controls use Title Case.
About the amount of items on Android tabs, it will be 2–5 in a fixed tab
bar. A scrollable tab bar can be used when there are long strings or
more than 5 items. A segmented control should have five or fewer
segments on iPhone to ensure enough space for easily-tapping.
5. Buttons
Basically, the only difference between Android and iOS buttons is string
capitalization and appearance style.
The text in Android buttons are UPPERCASE; iOS buttons mainly use
Title Case. Sometimes ghost buttons use UPPERCASE, like OPEN and
UPDATE button in App Store, but sometime they use Title Case, like
“Book a Table” and “Directions” in Map iOS 10. The capitalization rule
in iOS seems to be inconsistent.
6. Floating Action Buttons VS. Call to
Action Buttons
Floating action buttons, FAB first appeared with Material Design in
Android 5.0. FABs, located in the bottom-right corner of screens, are
used to fix the usability issue of single hand operation. It is difficult to
reach buttons on action bars while using phones with a single hand.
FABs sometimes also located at the junction of two areas and that
makes FABs more eye-catching.
The similar design for the primary action in iOS apps is call to action
button which located in the center of tab bars. CTA buttons, in earlier
time, used different color or design to distinguish them from other tabs.
But now, as users are more and more familiar with the pattern, CTA
button’s style is the same as tabs’ in many apps. The buttons for new
post in Medium and publish a new photo in Instagram are the
examples.
7. Bottom Sheets VS. Action Sheets &
Activity Views
Android bottom sheets appear from 2015, but iOS has this similar
design for a long time. Android has this kind of design because it wants
to solve the single hand operation issue.
Android bottom sheet has 2 forms: modal bottom sheets and persistent
bottom sheets.
Android modal bottom sheets has two content: 1) Modal bottom sheets
with different actions and 2) App list which appears after users tap
“Share” icon. The former one is just like iOS Action Sheets; the latter
one is like iOS activity views after tapping “Actions” icon. The content
layout of Android modal bottom sheets can be list or grid.
Persistent bottom sheets are used when bottom sheets have the same
importance as the main content above and users may need to view the
both of information in the same time. Taking Map app as an example,
the upper area shows a map and the bottom sheet shows the details of
the location. In a music app, the upper area would show album cover,
and the bottom area may have controls for playing music.
Texts
The title and content text in Android dialogs align left; The title and
description text in iOS alert align center. Android uses “Sentence case”
for the titles; iOS uses “Title Case”. Both Android and iOS use
“Sentence case” for the content text.
The title of Android dialog and iOS alert should be short and clear.
Avoid questions with some indications, like ”Are you sure you want to
delete the file?” The sentence should be simple, neutral and direct, like
“Delete the file?”.
Buttons
About number of buttons, Android and iOS can have 1–2 buttons. iOS
guidelines suggest to avoid 3 or more buttons in general because more
buttons create complexity and can require scrolling. If you need more
than two choices, consider using an action sheet instead. But when iOS
ask users if they want to update their iOS version, it shows three
buttons, Install Now, Later, and Details in the alert.
When there are two buttons, cancel and main action button, Android
and iOS put the cancel button on the left side and main action button
on the right side.(You can check this article to know the reason why
they have this rule). When the copy on the buttons is longer, two
button can be put vertically. Main action button will be on the top of
cancel button.
The copy on the buttons should avoid using Yes and No, write action on
the buttons would be more clear and direct, like Cancel and Save,
Cancel and Remove.
iOS use red on button text for warning if the action is unrecoverable,
like delete. Android do not use specific color on button text. About
button text, Android uses UPPERCASE but iOS uses Title Case. Button
text aligns right in Android, but it aligns center in iOS.
When the context is a lot, Android dialogs can fix the title and footer of
dialog but the content is scrollable. The scrollable content dialogs often
appear when lots of options are put into the dialogs. iOS guidelines
suggest content should be short to avoid scrolling in alerts.
9. Full-Screen Dialogs VS. Modal Views
& Popovers
Android full-screen dialogs, only can be found in small mobile devices
like smart phones, which can be compared with iOS modal views. iOS
modal views have 4 styles, full-screen, page sheet, form sheet and
others like split view and popover. About the transition of modal views
on phones, a modal view will slide up in when you enter and it will
slide down out when you leave.
Popovers are used for tablets only
Snackbars can have an action button letting user to redo or take other
action. Toasts are mainly used for showing system messages. You can
not put icons on snackbars or toasts.
Android list style have single-line list, two-line list (consist of a primary
text and a secondary text) and multiple-line list (consist of a primary
text and 2 or more secondary text). Icons, thumbnails and list controls,
like checkboxes, radio buttons and switch buttons, can be added into
lists. Normally, main actions are put in the left side of list and
secondary actions are put in the right side of list.
iOS tables are similar to Android lists, but there are still some points
you should notice:
3) iOS tables have 2 forms: Plain and Grouped. A plain table has an
entire white screen with dividers. Even though only few cells have
content, the rest area still have dividers. Grouped tables have a gray
background. The first grouped table has some space with a navigation
bar and the second grouped table below. Android has one style only
and only use a divider to separate two different lists.
12. Subheaders VS. Grouped Table Headers
& Section Headers
Android subheaders and iOS headers are used for separating and
grouping lists or grid lists with different contents. iOS have 2 different
styles to separate lists: 1) Grouped Tables, used for grouping totally
different information; 2) Section Headers, can be seen in Plain Tables,
used for sorting the similar data format, like photos with different
taken dates or contacts with different names.
Android subheaders use sentence case. iOS grouped table headers use
“UPPERCASE” and plain table headers use “Title Case”.
Upon scrolling, Android subheaders remain pinned to the top of the
screen until pushed off screen by the next subheaders, whose behavior
is just like iOS section headers. Grouped table headers do not have this
kind of behavior.
Android checkboxes can be put on left or right side, but iOS usually
puts multiple selection controls on the right side.
13–3. Switches
A switch is a toggle between two mutually exclusive status, on and off.
In the past, Android did not have switches and used checkboxes for
enabling/disabling some functions, but now Android use switches
more and more. iOS always use switches to enable/disable functions.
Switches are put on the right side of lists both in Android and iOS.
Android Settings on & o : Gmail uses checkboxes but Photos uses switch buttons
13–4. Reorder/Gripper
Android uses an icon which consists of 4 parallel horizontal lines as a
reorder control, to avoid confusing people it with hamburger icon
which consists of 3 lines, used for expanding and collapsing navigation
drawer. Recorder icon usually appears in edit mode.
iOS gripper icon appeared earlier than Android. You also can see it in
edit mode. But iOS gripper consists of 3 lines only because iOS does not
use a drawer as default navigation like Android.
After swiping a list for a distance and then stopping, you can see 1–3
actions behind, and then you tap one of it to take action. But if you
swipe for longer distance, default action will be taken. Android has one
action behind only and take the action by swiping straightly.
13–6. Expand/Collapse
Expand/Collapse controls can help the hierarchy flatter because users
do not need to enter the next screen to see the information, the
information will be shown in the same screen. This control can be often
found in FAQ lists. After a question is tapped, the answer will show up.
Fewer steps are required if you try to browse those QAs.
Reference