How Apple’s iOS 7 Changes Everything For App Designers

If you are a mobile developer getting to know what’s new in iOS 7, you’ve actually got it fairly easy. It’s the mobile designers who are banging their heads against the wall.

Everything app designers knew about the look and feel of iOS has basically been tossed out the window in iOS 7. Buttons no longer have borders, drop-down displays are translucent, icons are completely different. Designers are basically going to have to start from scratch with iOS 7 to make sure their apps fit with Apple’s new design guidelines.

It is about time too. On iOS, designers have had it easy for years as the basic user interface guidelines from Apple have stayed pretty much the same. Developers, meanwhile, had to deal with all the new features and functions that Apple released (Siri, Maps, AirPlay and so forth) as it iterated iOS through the years. Now, designers are getting their comeuppance.

Here are the major design changes in iOS 7 and some thoughts on how to get started implementing them.

9 Major Changes

iOS 7 has gone “flat.” If you don’t know what that means, you are probably not a Web designer. For those who are not in the know, flat design eschews shadows and emulating physical objects in design (like a bookshelf for Apple’s Newsstand) for simple constructs. iOS has also gone skinny, with the font and borders line having a lot less width than before. The color scheme is a bit different, with black and white modes, hints of red, blue and pastel all over iOS 7.

iOS 7 has some nine major UI differences from its predecessors:

1. Flat Design – See above. You will notice that the UI of iOS looks quite different in how it is presented. Fewer soft edges, more thin, hard lines. Depending on your perspective, this could be an improvement.

2. Font – The “skinny” aspect of iOS 7 begins with using Helvetica Neue UltraLight as a primary font. You can see this all over the design, though Apple makes it fairly easy to change the size of the font for different purposes.

3. Icons – Icons have been changed significantly. Most have gone borderless. Icons are resizable for different screen sizes (iPhone vs. iPad, portrait vs. landscape).

4. Colors – To accommodate the flat and skinny, Apple updated its primary color schemes to be blue, red, white, black and… pastel.

5. Borderless – You thought that you had your buttons down? Well, all of them are about to change. Solid-color buttons are (for the most part) out of iOS 7, replaced by buttons that don’t have border edges and float on top of the background.

6. Layers – This is where advanced designers are going to have some fun. The new UI layout allows you to present several different layers in one screen of an app. So you can align navigation and tab bar views with a custom view hierarchy to create a cool new interface. Layers also help with the fact that much of iOS design employs translucent windows.

7. Translucence – Say you have the drop-down notifications menu sitting over your app. Users will now be able to see the general colors of what is behind that menu.

8. Gestures – iOS 7 knows when someone is holding the device, allowing enterprising developers to manipulate the interface in some new ways. Apple also introduced new navigation choices, including the ability to return to the last app you were in with a swipe from the edge of the screen. You will also be able to change tabs in Safari with end-of-screen swipes or flick between messages in email.

9. Status Bars & Menus – Menus, controls, navigation and status bars are different by definition of the flat and skinny styles in the new UI and the different color schemes.

New User Interface Kits

If you are designing for iOS 7, there are three things you are going to get really used to: the new UIKit Dynamics, Text Kit and all the new features to implement the design changes in Xcode 5.

UIKit Dynamics – Helps improve user experience by incorporating real-world behavior into apps. New behavioral changes in iOS 7 include Attachment (specifying a connection between two objects and moving then dynamically with each other) and Push (different angles and vectors in how an app is manipulated). The UI convention for gravity behavior  works on a coordinate system that charts points in the movement of the device. Understanding dynamics may be confusing at first, but it is one of the more interesting user interface elements in iOS 7.

Text Kit – The greatest aspect of the new Text Kit for iOS 7 is that it should allow designers to deploy text using significantly less code. Text Kit offers a high-level framework for handling text characteristics on pages and columns, around objects (like an image) and allows for designers to edit, display, store and create text.

Upgrading Your App Designs

Apple has 900,000 apps in the iOS App Store. All built on iOS 6 or before.  If that number includes your apps, it’s time to update.

This is where the new Xcode 5 Developer Preview will help. If you chose to create most of your buttons and menus and other simple functions using Apple’s standard iOS principles, then the Auto Layout function in Xcode will automatically update them for you. If you don’t use Auto Layout… well, time to get cracking on manually updating your custom design elements. You can, of course, also take a hybrid approach where you let Apple take care of the simple stuff and customize certain specific actions in your app. Many advanced developers take this approach.

Apple insists that every iOS 7 app do three things: update the app icon (120 x 120 pixels), update the launch image within the app and support Retina display with all artwork and images.

Apple suggests (though it’s not mandatory) that all apps adopt the translucent user interface elements, redesign custom bars, update background images to support borderless buttons and adopt dynamic types in the UIKit (see above).

If you think you can update your app and sneak it by Apple’s App Store review board without updating the UI, you are going to be very sorry. The design in iOS 7 is extremely important to Apple and a consistent look and feel across apps in the App Store has always been high on Apple’s agenda. As such, Apple offers three guidelines to keep in mind:

  1. Deference – The user interface helps users but doesn’t get in the way.
  2. Clarity – Everything (text size, icons, images) focuses on functionality through design.
  3. Depth – Layers and motion, “heighten users’ delight and understanding,” according to Apple’s UI Transition Guide.

That’s the primer designers need to begin thinking of updating app design for iOS 7. Make sure you familiarize yourself with all of Apple’s new guidelines before applying the paint.

Mobile Apps

Mobile, connected thought leadership

BYOD – Global

All Things Mobile – Global

Mobility Hub – US Advisory

Financial Services Mobile Payments Community – United States

70% of New Apps Made for iOS, Where Devs Make 4X As Much As Android

This month, the world’s two largest mobile app platform providers, Apple and Google, enter what is arguably the most critical month of the year for each company, when each hosts their annual developer conference, the Apple Worldwide Developer Conference (WWDC) and Google I/O.  While engaged in a multi-year platform war, their success largely depends on innovation provided for their platforms by the third party developer community.  If the developer community embraces one platform over the other, developers will build the software that infinitely extends the value of the consumer experience, giving a platform a meaningful edge.  The perceived availability of a large, steady stream of high quality apps is a key reason for consumers to initially choose an Android or iOS device, and then to remain loyal.  Moreover, given that the mobile industry is among the leading sectors in the worldwide economy, the outcome of these two conferences can largely impact the fate of some of the most prolific, innovative forces in the world’s economy today.   Combined, Apple and Google have a market cap of approximately three quarters of a trillion dollars.

This report compares developer support for iOS versus Android and explores the underlying factors that could explain varying levels of developer loyalty.  We use the data set collected by Flurry Analytics, now powering consumer insights for more than 70,000 companies across more than 185,000 mobile apps.  Each day, Flurry tracks more than 1.2 billion anonymous, aggregated end user sessions across more than 100 million unique devices.  Each month, Flurry tracks over 36 billion end user sessions across more than a 500 million devices, a number that is more than 60% of Facebook’s monthly active user base.

Oh Captain, My Captain

At Flurry, we track developer support across the platforms that compete for their commitment. When companies create new projects in Flurry Analytics, they download platform-specific SDKs for their apps. Since resources are limited, choices developers make to support a specific platform signal confidence, as they invest their R&D budget where they expect the greatest return.  Further, because developers set up analytics several weeks before shipping their final apps, Flurry has a glimpse into the bets developers are making ahead of the market.

iOS vs. Android Applications Started

The chart above shows that Apple continues to garner more support from developers.  For every 10 apps that developers build, roughly 7 are for iOS.  While Google made some gains in Q1 2012, edging up to over 30% for the first time in a year, we believe this is largely due to seasonality, as Apple traditionally experiences a spike in developer support leading up to the holiday season.  Apple’s business has more observable seasonality.

The Apple 2-for-1 Proposition

Among the reasons iOS appears more attractive to developers is the dominance by Apple in the tablet category.  Not only does Apple offer a large, homogenous smartphone base for which to build software, but also when developers build for smartphones, their apps run on Apple’s iPad tablets as well.  That’s like getting two platforms for the price of one.  Apple offers the most compelling ‘build once, run anywhere’ value proposition in the market today, delivering maximum consumer reach to developers reach for minimal cost.

Apple iPad versus Android tablets

The pie chart above demonstrates just how much Apple dominates the tablet category.  The Galaxy Tab and Amazon Kindle Fire hold very distant second and third places in terms of consumer usage.  To build the chart, Flurry aggregated total worldwide user sessions across the first five months of the year, January through May.

Android Fragmentation Pain

Opposite to the efficiency Apple offers developers through their homogenous device base, Android fragmentation appears to be increasing, driving up complexity and cost for developers.  Further, this fragmentation is concentrated primarily in just smartphones, as there is no serious Android tablet contender to the iPad.  For Android, Flurry observes fragmentation along two significant vectors, devices and firmware.  Let’s look at device fragmentation first.

Android Device Fragmentation

The chart above shows the number of consumer application sessions across the top 20 Android devices in May 2012.  Four major OEMs – Samsung, Motorola, HTC and Amazon – have Android devices in the top 20.  17 of the top 20 hold a share of 6% or fewer, meaning that each additional device a developer supports will deliver only a small increase in distribution coverage.  However, on Android, both devices and firmware contribute to fragmentation, so let’s look at firmware fragmentation next.

Android Operation System Fragmentation

The above chart reveals that the majority of devices in the market run Gingerbread, which is only the third newest iteration of the Android OS.  Honeycomb, more optimized for tablets, and Ice Cream Sandwich, which put a lot of effort into the user interface, have a combined 11% of penetration in the market.  Froyo, which shipped before Honeycomb and Ice Cream Sandwich, alone has a higher share of firmware penetration than the two newer, more advance firmware versions combined.  This means that the majority of consumers are running on an Android operating system that is three to four iterations old.

Money Matters

Running a comparison of revenue generated by top apps on both iOS and Android, Flurry calculates that the difference in revenue generated per active user is still 4 times greater on iOS than Android.  For every $1.00 a developer earns on iOS, he can expect to earn about $0.24 on Android.  These results mirror earlier findings from similar analysis Flurry conducted in Q4 of 2011 and Q1 of 2012.

At the end of the day, developers run businesses, and businesses seek out markets where revenue opportunities are highest and the cost of building and distributing is lowest.  In short, Android delivers less gain and more pain than iOS, which we believe is the key reason 7 out of every 10 apps built in the new economy are for iOS instead of Android.

iOS versus Android App Revenue

Over the next two weeks, the momentum of two of the world’s most innovative, influential and prolific technology companies will be impacted by the reaction the development community to their conferences, Apple WWDC and Google I/O.  And as developers watch Apple and Google, the world should watch developers.

[Source: Flurry]