1

Android vs. iOSRESEARCH & ANALYSIS

Version 1.0 | January 2013

2

TABLE OF CONTENTS

INTRODUCTIONImportance of Designing for

Android

Importance of Understanding

Both Platforms

iOS

Android

Can I Use My iPhone Design?

So Where Do I Begin?

3

4

5

6

7

8

APPLICATIONSSoundCloud

The Weather Channel

Trulia

Hulu

YouTube

Pulse

24

25

26

27

28

29

TOOLSDraw 9-Patch

Books & Resources

30

31AREAS OF FOCUSOverview

Open Source

Multiple Screen Sizes

Multiple Resolutions

Design Style

User Interface Elements

9

10

12

15

18

20

3

Importance of Designing for

AndroidDesigning and developing for iOS has become commonplace. Brands want an iPhone app. To satisfy this need, many companies have chosen to specialize in iOS. For a long time, many apps were cre-ated for the iOS platform and not for the Android platform. The Android app is of-tentimes an afterthought.

This is beginning to change. More and more companies want two apps: one iOS and one Android.

This shift comes from facts and the fact is is that iOS and Android are the two lead-ing mobile operating systems in the United States. Combined, they make up more than 95% of the American smartphone market

share so it is natural to target both iOS and Android to cover the majority of smart-phone users.

iOS 53.3%Android 41.9%Microsoft Windows 2.7%

Combined, iOS and Android make up more than 95% of the American smartphone market share.

INTRODUCTION

November 2012 - http://www.techweekeurope.co.uk/news/apple-ios-extends-us-market-lead-103393

4

Importance of Understanding Both

Platforms

Designing a stunning, user friendly mo-bile application is similar in many aspects across all platforms. It is always important to:

• Understand the audience• Keep all functionality simple, orga-nized• Ensure all aspects are intuitive and user friendly

However, a comprehensive understanding of the two platforms and their distinctive characteristics ensures a product that is consistent with user expectations specific to each platform.

INTRODUCTION

5

iOS

INTRODUCTION

Apple’s strict policies on its App Store has resulted in a large library of beauti-ful, high quality applications. Whenever there is discussion of an iOS app, there is always commentary about how it is visu-ally stunning, polished, and easy to use. This is largely due to Apple’s iOS Human Interface Guidelines.

The iOS platform is also more appealing to develop for because it offers a con-sistent experience for users. Testing the app is much simpler because the only devices to watch out for are the iPhone, iPod Touch, and iPad. Producing an app for the App Store can be a much more swift and satisfying process. For this rea-son, many apps can be found on Apple’s App Store before it lands in Google Play. This does not mean that the demand for Android apps is not there.

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduc-tion/Introduction.html#//apple_ref doc/uid/TP40006556-CH1-SW1

6

Android The Android platform has continuously been building support and increasing its market share making what was once an afterthought a serious contender. An-droid shipped on three out of four smart-phones in the third quarter in 2012.

The demand for Android applications are certainly on the rise but creating an Android application is a much more complex and lengthy process than creat-ing an app for iOS. Due diligence is nec-essary before jumping into creating an Android application even for a seasoned iOS designer. There are many differences in navigation, screen sizes, layouts, and other distinctions that will be identified later on.

Google has recently provided User Inter-face Guidelines as well. This was due in part to the mixed bag of applications on Google Play.

INTRODUCTION

http://www.idc.com/getdoc.jsp?containerId=prUS23771812#.UP3H66HBPt4http://developer.android.com/design/index.html

7

Can I Use My iPhone Design?

INTRODUCTION

The short answer is no. As with any design, it is always important to address the ques-tion of “Who are you designing for?” When creating an iPhone app, an app specifically created for iPhone should be made. That app cannot then be the Android app be-cause the user is different. Intuitive An-droid users will expect Android style navi-gation and design and it is very obvious when an iOS app is copied directly to the Android platform.

Why can’t I just port my application?Porting an iPhone app to Android does not work. Proponents of directly porting apps across the two platforms insist that it cre-ates a consistent experience for users and

maintains brand consistency. This is typi-cally not the case. The average user does not own multiple devices across multiple platforms. Brand consistency is created by the established branding guidelines. This is usually done through typography and color palette.

8

So Where Do I Begin?

INTRODUCTION

Understanding that apps that are designed specifically for the iOS platform do not translate to the Android platform is the first step to take. There are several key dif-ferences between the two platforms that will be covered.

Learning to embrace the specific aspects of each platform will help create polished apps for both platforms. To do each plat-form justice, multiple treatments and lay-outs will be needed and much more work will need to be done. Understanding the nuances of each platform’s navigation and the differences in layout will help when planning the process of creating apps for multiple platforms.

9

OverviewThe Android platform is open source with no strict regu-lations. The iOS platform has many limitations with strict guidelines and rules.

Open Source1

There are hundreds of different screen sizes running the An-droid platform. iOS only runs on a few Apple devices.

Multiple Screen Sizes2

There are many different screen densities found on Android smartphones. The iPhone only has two different resolutions.

Multiple Resolutions3

AREAS OF FOCUS

Android apps are done in flat style while iOS apps are more lush with 3D effects and shadows.

Design Style4

There are several similarities between Android user interface elements and iOS user interface elements.

User Interface Elements5

10

1. Open Source

AREAS OF FOCUS

It is very important to understand that Android is open source under the Apache license. This means that there is no stan-dard Android hardware. Anyone can put Android on anything. Android can be found on ski goggles, wristwatches, and laundry machines along with devices that we are more accustomed with like tab-lets and smartphones. The problem with Android being open source is that there are hundreds of devices created by many different manufacturers to run Android. Each manufacturer is also able to modify the open source code and distribute it. Each carrier tailors the code as well for the smartphones they sell.

Pros• Users love the ability to cus-tomize their phones without the need to hack or jail-break• Worldwide leading smart-phone platform• Many different devices in many different device categories to choose from

Cons• Multiple devices with different screen sizes and resolutions• No standard hardware• Varying software

11

1. Open Source

AREAS OF FOCUS

The cons listed above creates a big prob-lem for designers when creating an app because there are many different screen sizes and resolutions to consider along with the variations in software. This means that designs will appear slightly different and may behave differently on each device.

Android’s creators knew that making their software open source would mean multiple devices and built the platform with tools to help developers and designers support them. One tool is the Draw 9-Patch tool which is unique to the Android SDK and will be covered more in depth later. These tools along with a solid understanding of the Android platform will allow for careful planning to help support most devices.

Google does not force any controls for An-droid devices because it is open source but it does have an Android Compatibility Pro-gram which defines hardware and software requirements. If a device passes, it ships with Google apps like Google Play.

continued

12

2. Multiple Screen Sizes

AREAS OF FOCUS

The biggest difference between the two platforms is the large number of devices resulting multiple screen sizes. Screen size is the actual physical size which is measured as the screen’s diagonal. There are hundreds of devices that currently run Android as opposed to the hand-ful that run iOS. This along with multiple screen densities found on Android devic-es, which will be covered next, is the big-gest difficulty when designing an app for Android. Multiple screen sizes should be a constant consideration when designing the layout for an Android app.

13

2. Multiple Screen Sizes

AREAS OF FOCUS

Designing for iOS is relatively easy when considering the number of screen sizes. There is only one manufacturer using one standardized operating system which limits the number of screen sizes being produced. The hardware is also consis-tent across all devices.

There are currently only four different screen sizes to consider when designing an app for iOS. There are only two dif-ferent screen sizes for smartphones. The physical size of the screen, which is what the user interacts with, determines the layout of the app. The iPhone and iPhone Retina has the same physical size so the same layout can be used. The iPhone 5 needs an altered layout because the height of the screen is different.

iOS

DevicesiPhone & iPhone Retina 3.5 inchiPhone 5 4 inchiPad & iPad Retina 9.7 inchiPad Mini 7.9 inch

continued

14

2. Multiple Screen Sizes

AREAS OF FOCUS

There are hundreds of variations to keep in mind when designing for Android be-cause there is no standard. To make de-signing and developing for the different screens more manageable, Android has defined four generalized screen sizes.

This makes designing for Android a much more difficult process than designing for iOS. Many different elements on a design for Android need to be flexible and scal-able. Dimensions need to be defined rela-tively. This is so that it can adapt to every screen size.

Target Specific DevicesThe process of creating an Android app is difficult due to the large number of devices with multiple screen sizes and resolutions. Targeting the most common devices, screen sizes, and resolutions will help narrow the scope of work that will need to be done.

ANDROID

Four General Screen SizesSmall 2-3 inchesNormal 3-5 inchesLarge 4-7 inchesXLarge 7-10 inch

continued

15

3. MultipleResolutions

AREAS OF FOCUS

Screen resolution is described using dots per inch (DPI). It is important to under-stand DPI when designing because it determines the size of the elements in a layout. It also determines the assets. An image with a low DPI on a low resolu-tion device will not be the same physical size on a high resolution device. The high resolution device will require a separate asset to maintain the same quality and same layout.

16

3. Multiple Resolutions

The iPhone has two resolutions to con-sider. The iPhone is 163 DPI and the iPhone with Retina display (iPhone 4 and iPhone 5) is 326 DPI. This require two sets of assets but because the DPI is exactly double, the specified layout and dimensions can simply be multiplied by two or divided by two.iOS

AREAS OF FOCUS

continued

17

3. Multiple Resolutions

Android devices have many different densities. They are broken down into four generalized densities.

When creating content and defining component sizes, it is necessary to pro-vide the operating system with a desired size. Providing a size in pixels four all resolutions would take much time and effort but providing a single pixel size for a button, for example, would look great on the screen density it was designed for but would not work on every other An-droid device using a different density.

The Android SDK has a solution. Any size can be defined using density-indepen-dent pixels (dp or dip). A density-inde-pendent pixel is a virtual pixel unit that is used to define UI elements and layout. One density-independent pixel equals one physical pixel on a 160 dpi screen.

Aside from providing sizes in dp, different assets need to be provided as well just like iOS. However, unlike for the iPhone, assets for up to four densities may need to be produced for Android applications.

The assets that are provided may also need to scale. Complex textures and de-sign elements do not scale well and for this reason, apps should be kept fairly clean and simple. Things to particularly look out for are buttons, gradients, icons, and backgrounds.

ANDROID

AREAS OF FOCUS

Four General Resolutionsldpi 120 dpimdpi 160 dpihdpi 240 dpixhdpi 320 dpi

continued

18

4. Design Style

AREAS OF FOCUS

iOS apps are known for their realistic look and feel. 3D effects and shadows are used throughout many popular apps.

The complexity of designing for Android found in multiple screen sizes and reso-lutions has created the need for a very simple design style. This is why Android design has a flat style void of shadows and layer effects.

The following apps highlight the differ-ences in iOS and Android app when fo-cusing on design style

19

4. Design Style

AREAS OF FOCUS

continued

20

5. User Interface Elements

iOS

1

2

1. Status BarThe status bar displays device

and current environment informa-

tion. It appears at the top edge of

the screen.

2. ToolbarThe toolbar contains the actions

buttons (typically icons) that per-

form actions related to the screen

or view. These change from view

to view. It is located at the bottom

edge of the screen.

AREAS OF FOCUS

21

5. User Interface Elements

continued

4

3. Navigation BarThis area of the app enables

navigations and manages screen

content. It appears below the sta-

tus bar and typically displays the

title of the screen. It also contains

buttons to return to the previous

screen. Content-specific controls

are located on the left.

4. Tab BarThe tab bar enables the user to

switch between different views,

modes or tasks. It appears at the

bottom edge of the screen and

accessible throughout the app.

The tabs typically contain icons

and text and has a selected state.

Tab bars contain no more than

five tabs.

3

AREAS OF FOCUS

iOS

22

AREAS OF FOCUS

5. User Interface Elements

continued

1. Status BarThe status bar displays pending

notifications along with status

information like time, battery

level, and signal strength. Swiping

down from the status bar shows

notification details.

2. Navigation BarThe navigation bar is present only

on devices that do not have the

traditional hardware keys. This

area houses the devices naviga-

tion controls Back, Home, and

Recents. Menu is also displayed

when running an app written for

2.3 or earlier.

1

2

ANDROID

23

AREAS OF FOCUS

5. User Interface Elements

continued

3. Main Action BarThis is the main control center for

an app. The main action bar con-

tains elements for navigating the

app’s hierarchy and views along

with important actions related to

the screen.

4. Split Action BarThe split action bar provides a

way to distribute actions below

the main action bar or at the bot-

tom of the screen.

4

ANDROID

3

24

SoundCloud

APPLICATIONS

Back and UpAndroid uses the main action

bar’s app icon for hierarchical

navigation. The navigation bar’s

back button is used for temporal

navigation. This leads the user

in reverse chronological order

through the history of screens.

The iOS platform uses an explicit

back button with label to allow

the user to navigate up the appli-

cation’s hierarchy.

25

The Weather Channel

APPLICATIONS

Tab BarThe iOS platform uses the bot-

tom tab bar to switch between

the app’s views. Android’s tabs

for view control are shown in ac-

tion bars at the top of the screen

instead. This guideline was cre-

ated to avoid confusion between

actions and view switching on the

Android platform.

Again, Android users expect An-

droid style navigation.

26

Trulia

APPLICATIONS

Action Bar, TabsThe tabs in the Trulia app are ap-

propriately in an action bar at the

top. This is the correct design pat-

tern used in the Android platform.

SpinnersSpinners are a quick way to se-

lect a value from a set. This is the

correct way to display dropdown

menus on the Android platform.

The iOS platform uses right facing

carets to drill down deeper into

additional content.

27

Hulu

APPLICATIONS

IntentsAndroid’s intent API launches an

activity chooser which lists all

applications that are set up to

handle the particular request. This

lets the user complete the task

with their preferred app. iOS uses

the Activity VIew Controller to

present services that the app can

preform.

28

YouTube

APPLICATIONS

Side NavigationSide navigation is a way to pro-

vide direct access to different

sections of an app. The side navi-

gation panel is pulled out from

the left and the user does not

have to leave the screen to ac-

cess it. This navigation was made

popular by Facebook and is used

by many Android applications.

This design pattern does not be-

long to one platform but is found

on many Android applications. It

is a great option because it works

across platforms.

29

Pulse

APPLICATIONS

Stacked Galleries Stacked galleries are an excellet

way to present information from

multiple sources on the same

screen. Users can navigate in any

direction: up and down to view

different categories, horizontally

to view content within a category.

30

Draw 9-patch

TOOLS

Nine-patching is not a new con-

cept but the Android SDK pro-

vides a tool called Draw 9-patch

that lets users easily define the

one pixel border to define scal-

able graphical assets. The black

border defines the scalable areas

and fill areas. This tool is espe-

cially helpful when creating back-

groud images and buttons.

31

Books & Resources

TOOLS

Smashing Android UIby Juhani Lehtimäki

Android Design Guidelineshttp://developer.android.com/design/index.html

Mutual Mobile’s Android Design Guidelineshttp://mmweb.dev.s3.amazonaws.com/wp-content/uploads/MM_Android_Design_Guidelines_v1.11.pdf

32