Welcome. How to Avoid iOS-O-S"""October 16th, 2014"

@propelics  

Propelics Background – About Us!

2

•  15+ year track record •  Fortune 500 clients •  Global experience •  100% focused on mobile for

the Enterprise •  San Jose, Boston, Pittsburgh

Propelics creates mobile strategies and world class Apps for the Enterprise.

Trusted by some of the largest global brands:

Enterprise Mobile Strategy Services •  Enterprise Mobile Strategy •  Mobile App Portfolio •  Mobile App Scoping & Planning •  IT Readiness for Mobility •  Innovation through visualization •  Center of Excellence Creation

Mobile Advisory Services •  Mobile Mentoring •  Executive Education •  Speaking Engagements

Managed Services •  Application Oversight •  Application Development, Maintenance and Support •  Managed Mobile Center of Excellence •  Onshore and Offshore App Development"

What We Do

Steven Brykman - Digital Strategist and UX Architect

Since joining the Propelics team, Steven has helped a wide range of Enterprises determine the direction of their Mobile Apps, including Amway, Family Dollar,

United Airlines, and Bright Horizons.

He spent much of the last decade as Lead Strategist for

his own design company, improving user experiences for such companies as Scholastic, Bell, Guinness, and Nintendo. Additionally, Steven co-founded Apperian, a

technology startup focused on Enterprise Application Development, and served as Lead Strategist and UI Architect.

Agenda

5  

•  Know the Schedules

•  Technology Trends

•  Building for the Future

•  Achieving Classic Design

•  Cross-Platform Design

•  Links

•  Q&A  

OS — Operating SystemSoftware that manages computer hardware and software resources and provides common services for programs. The OS is an essential component of the system software. Apple’s mobile OS is called iOS 8, Blackberry is up to BlackBerry® 10 OS, while Android’s OS’s are named after snacks (currently: KitKat). UI – User Interface (mobile)The layout and design of content, buttons, tabs, sliders, links, forms, etc.—anything the user digests and/or interacts with. UX – User Experience (mobile)A broader term that encompasses the actual usage of an interface: animations, screen transistions, alerts, brand identity, language consistency (tone, voice) as well as elements of human psychology (user-expectations).

Defining our Terms

Here’s the scenario: After months of boardroom debate, your company finally completes development on a new mobile app that’s sure to revolutionize all its outdated internal processes and bring renewed vigor to employees when—in the middle of the launch party—Apple announces a new OS! Problem is, you designed the app for the last OS… From changing the entire look and feel of the interface to replacing the very language we use to build our iOS apps, Apple has done it all!

What to do?

Put out an app that looks and feels like yesterday’s news or hold-off on the release until the UI can be updated?

Thankfully, there is a solution. This webinar will help you design for the future and predict what’s ahead so you can survive the bumps of a new OS release.

1.Know the Schedules

Know the Schedules

11 11

Apple OS releases happen on a (relatively) predictable schedule •  Small "point" updates happen a few times per year

(bug fixes or minor feature updates) •  Major updates occur once a year •  Updates don’t always coincide with the intro of new devices

(though major releases do)

* http://en.wikipedia.org/wiki/History_of_iOS#

According to Tech Radar: “Apple likes to announce new iPhones on Tuesdays, make new iOS updates available to download on Wednesdays and, depending on availability, start selling or taking pre-orders for new devices on Fridays.”

Apple OS Release History — Deep Dive I

12 12

iOS 4.0 Beta 1 — April 8, 2010 (Released for developers)

iOS 4.0 Beta 2 — April 20, 2010 iOS 4.0 Beta 3 — May 4, 2010 iOS 4.0 Beta 4 — May 18, 2010

iOS 4.0 Golden Master announced @ WWDC — June 7 (Released for developers & announced w/iPhone 4) Added 1500 new API’s, multitasking, FaceTime, iMovie

iOS 4.0 Final for developers and private testers only — June 8, 2010

iOS 4.0 Released to public — June 21, 2010 1st “iOS”

iOS 4.2 Golden Master — November 1, 2010 iOS 4.2 Golden Master 2 — November 18, 2010 iOS 4.2.1 Final — November 22, 2010 iOS 4.3 Golden Master — March 3, 2011 Final version iOS 4.3 — March 9, 2011

*  h$p://en.wikipedia.org/wiki/IOS_SDK#SDK_release_history

iOS 4.0

Apple OS Release History — Deep Dive II

13 13

iOS 5 beta 1 announced @ WWDC — June 6, 2011 (Released for developers along with iCloud)

iOS 5.0 beta 1 — June 6, 2011 iOS 5.0 beta 2 — June 24, 2011 iOS 5.0 beta 3 — July 11, 2011 iOS 5.0 beta 4 — July 22, 2011 iOS 5.0 beta 5 — August 6, 2011 iOS 5.0 beta 6 — August 19, 2011 iOS 5.0 beta 7 — August 31, 2011 iOS 5.0 Golden Master — October 4, 2011

iOS 5.0 Final — October 12, 2011 Adds iCloud Beta, iMessage, new Notifications, Newsstand, Twitter Integration, Reminders, AirPlay enhancements + 200 more features iOS 5.0.1 beta 1 — November 4, 2011 iOS 5.0.1 Final — November 11, 2011 iOS 5.1 beta 1 — November 28, 2011 iOS 5.1 beta 2 — December 12, 2011 iOS 5.1 beta 3 — January 9, 2012 iOS 5.1 Final — March 7, 2012

* http://en.wikipedia.org/wiki/IOS_SDK#SDK_release_history

Notice the timing change. Apple is now announcing a new OS at WWDC with Beta 1

iOS 5.0

Apple OS Release History — Deep Dive III

14 14

iOS 6.0 beta 1 announced @ WWDC — June 11, 2012 iOS 6.0 beta 1 — June 11, 2012 iOS 6.0 beta 2 — June 25, 2012 iOS 6.0 beta 3 — July 16, 2012 iOS 6.0 beta 4 — August 6, 2012 iOS 6.0 Golden Master — September 12, 2012

iOS 6.0 Final — September 19, 2012

iOS 6.1 beta 1 — November 1, 2012 iOS 6.1 beta 2 — November 12, 2012 iOS 6.1 beta 3 — December 3, 2012 iOS 6.1 beta 4 — December 17, 2012 iOS 6.1 Final — January 28, 2013

*  h$p://en.wikipedia.org/wiki/IOS_SDK#SDK_release_history

Apple again announces the new OS at WWDC with Beta 1

iOS 6.0

Apple OS Release History — Deep Dive IV

15 15

iOS 7.0 beta 1 announced @ WWDC — June 10, 2013 iOS 7.0 beta 1 — June 10, 2013 iOS 7.0 beta 2 — June 24, 2013 iOS 7.0 beta 3 — July 8, 2013 iOS 7.0 beta 4 — July 29, 2013 iOS 7.0 beta 5 — August 6, 2013 iOS 7.0 beta 6 — August 15, 2013 iOS 7.0 Golden Master — September 10, 2013 (Many Bug fixes)

iOS 7.0 Final Release — September 18, 2013 Adds flat design

iOS 7.1 beta 1 — November 18, 2013 iOS 7.1 beta 2 — December 13, 2013 iOS 7.1 beta 3 — January 7, 2014 iOS 7.1 beta 4 — January 20, 2014 iOS 7.1 beta 5 — Feb 4, 2014 iOS 7.1 Final — Mar 10, 2014

*  h$p://en.wikipedia.org/wiki/IOS_SDK#SDK_release_history

Apple is still announcing a new OS at WWDC with Beta 1

iOS 7.0

Apple OS Release History — Deep Dive V

16 16

iOS 8 beta 1 announced @ WWDC — June 2, 2014

“the biggest release since the launch of the App Store”

iOS 8.0 beta 2 — June 17, 2014 iOS 8.0 beta 3 — July 7, 2014 iOS 8.0 beta 4 — July 21, 2014 iOS 8.0 beta 5 — August 4, 2014 iOS 8.0 Golden Master — September 9, 2014

iOS 8.0 Final — September 17, 2014 adds widgets, continuity, healthkit, custom keyboards, background location-awareness, more…

iOS 8.1 beta 1— September 29, 2014  

*  h$p://en.wikipedia.org/wiki/IOS_SDK#SDK_release_history

Apple is still announcing a new OS @ WWDC with Beta 1

iOS 8.0

Apple Trends – the Takeaway

17 17

•  Public OS releases occur approximately once per year

•  Beta 1 of new iOS released early June & announced @ WWDC

•  Final (public) release happens 3 months later, in mid-September

•  Approximately 5 Betas will be released before and after each public release

•  A new OS is released approximately 3 months following the last

previous OS update

Apple Trends – The Big Takeaways

18 18

•  Don’t start development on an iPhone/iPad app in mid-September (once an OS has been publicly released), because a new (Beta) OS will be released in 3 months!

•  Unless the updates are trivial, we even recommend avoiding updating an existing iPhone/iPad app in mid-September. A few weeks of work can become lost time & productivity and may instantly be made irrelevant by a new Beta OS release.

•  Rather, your company should begin iPhone app development as soon as a new Beta OS is released for developers (early June @ WWDC). This will maximize your app’s ‘freshness date’ before it once again needs updating. Plus, you’ll want to be ahead of the game when the next Beta comes out (approximately 1 every two weeks).

•  This will give your company about 9 months after the previous OS Public release until the first beta for the next OS is released.

Android OS — The Big Wacky Picture

19 19 * h$p://en.wikipedia.org/wiki/Android_(opera@ng_system)#History  ** http://www.gottabemobile.com/2014/08/07/new-android-l-update-arrives-for-nexus-users/

•  Google provides major Android upgrades every three to fifteen months. •  Android updates are slower to reach actual devices than iOS. •  Updates often arrive months after a version is officially released

•  Upgrades must be specifically tailored to each hardware variation •  Older smartphones are frequently not updated if the manufacturer

decides it is not worth their time, (regardless of whether the phone is capable of running the update).

Android Release History — Deep Dive I

20 20 *  h$p://en.wikipedia.org/wiki/Android_version_history

•  Gingerbread (2.3–2.3.7) — Dec 6, 2010 Near Field Communication (NFC), Voice Input 2.3.1 December 2010 2.3.2 January 2011 2.3.3 February 9, 2011 2.3.4 April 28, 2011Voice, Video chat 2.3.5 July 25, 2011 2.3.6 September 2, 20112.3.7 September 21, 2011 Google Wallet

•  Honeycomb (3.0–3.2.6) — Feb 22, 2011 Tablet only 3.1 May 10, 2011 3.2 July 15, 2011 3.2.1 September 20, 2011 3.2.2 August 30, 2011 3.2.3 3.2.4 December 2011 3.2.5 January 2012 3.2.6 February 2012

•  Ice Cream Sandwich (4.0–4.0.4) — Oct 18, 2011 4.0.1 October 21, 2011 4.0.2 November 28, 2011 4.0.3 December 16, 2011 4.0.4 March 29, 2012

4.0 Ice Cream Sandwich

Android Release History — Deep Dive II

21 21 *  h$p://en.wikipedia.org/wiki/Android_version_history

•  Jelly Bean (4.1–4.3.1) — July 9, 2012 4.1.1 July 11, 2012 4.1.2 October 9, 2012 4.2 November 13, 2012 4.2.1 November 27, 2012 4.2.2 February 11, 2013 4.3 July 24, 2013 4.3.1 October 3, 2013

•  KitKat (4.4–4.4.4) — Oct 31, 2013 4.4.1 December 5, 2013 4.4.2 December 9, 2013 4.4.3 June 2, 2014 4.4.4 June 19, 2014 Wearable extensions

•  Android "L" (4.5) (Developer preview) — June 25, 2014 New UI, Enhanced Notifications https://developer.android.com/preview/index.html To be publicly released in November, 2014

4.4.2 KitKat

Android Trends – the Takeaway

22 22

•  At June’s annual Google I/O Event, developers got an early look at the next Android OS (Android L) (the first time in over three years). This marked a major shift in how Google releases new Android versions.

•  Google revealed Android L details, then released an Android L beta preview for developers. This marks the first time Google’s allowed developers to beta test Android before releasing it to the public.

•  (In July, Google said there’d be no updates or beta 2 for Android L, but in August, a new build was available)

•  Therefore, mid-June is the best date for beginning mobile app development, whether Android, iPhone or both

2.Technology Trends

Technology Trends

24 24

Apple and Android functionality has trended towards the following: Hardware •  Increased Physical Screen Size & Resolution

(3.5” diag – 480x320 pix @ 163ppi) à (3.5” – 960×640 @ 326) à (4” – 1136×640 @ 326) à (4.7” – 1334x750 @ 326) & (5.5” – 1920x1080 pix @ 401)

•  Increased Device Memory

4GB à 128GB

•  Increased Processor Speed, Faster Connectivity Edge à 3G à 4G

•  Easier Input Methods

Camera Scans (QR Code) à Fingerprint Reader à Apple Pay & NFC à Apple Watch

Technology Trends II

25 25

Apple and Android functionality has trended towards the following: Software •  Increased Multi-Tasking

1 at a time App usage à Apps run in the background à Constant Location Tracking

•  Increased App Integration Email/Message à Facebook/Twitter à Extensibility

•  Interaction with Content vs. Buttons iOS 6 à iOS 7

•  Increased Device Integration iCloud à Handoff

•  UI pushed increasingly forward

iOS 6 à iOS 7 (Search, Notification Center) à Widgets

•  Increased Predictivity Search Results, GPS location-awareness

The Lesson is…

26 26

Build for the future. Push the limits! (particularly in the Enterprise space where the limits generally aren’t too high to begin with.) While designing your company’s next iPhone app, ask: How might we use the very latest technologies to simplify interaction as much as possible? •  Near Field Communication (NFC) •  Background Location-Awareness •  Fingerprint Reader •  Integration Across Devices •  Integration Across Apps (including 3rd party apps) •  Increased Screen Real-Estate •  Custom Keyboards •  Widgets

Along with: •  iBeacons •  The Internet of Things

3.Classic Design Principles

Classic Design Principles

28 28

Though mobile technology is ever-evolving, fight the temptation to overcrowd your interface with graphics and functionality. •  Keep it simple •  Provide ample white-space •  Clean lines, simple composition •  Use classic (and few) fonts and sizes

The many flavors of Helvetica Neue (bold, regular, medium, light, thin) should be plenty! •  Use a limited, neutral color palette

Blues & grays (and brand colors)

Mobile UX Best-Practices •  Always use Native Controls (when available) •  Interact with content, not buttons

Where it’s all going…

29 29

Design for moments (in time and space) •  Design responsive, animated interfaces

Focus the user on the task at hand •  Minimize or remove UI elements not needed (in

that moment) •  Bring active UI elements into focus

•  Keep the current user’s location in mind •  Consider what tasks a user might be important to

a user at a particular location •  Consider how the UI should adapt to

accommodate the user’s location

I’m assuming I’ll see this icon a lot à  

The Language of Native Controls

30 30

Always rely on Native Controls (When a Native option is available)

A mobile interfaces is a visual language we have all learned to ‘speak’. So no matter the platform, it is important to always design your app using established elements (Native graphics and controls). Further, this eases the task of swapping elements with a new OS release. In this case, however, a Native option was not available so we custom-designed these rotating dials. Notice current design best-practices are still reflected here: simple lines, flat objects. The interaction is clear. These objects are meant to be rotated.  

The Language of Native Controls

31 31

The problem with not using Native Behaviors & Controls

* http://news360.com/article/255537428

Navigation displays, but nothing else* (should’ve used picker-wheels)  

This  app  is  trying  to  hide  the  screen  when  the  keyboard  appears,  instead  of  leJng  iOS  manage  the  behaviour.    Some@mes  in  iOS  the  keyboard  takes  @me  to  appear,  par@cularly  in  apps  built  for  previous  iOS  versions.    Apps  shouldn't  try  to  handle  certain  behaviours  when  the  keyboard  is  visible.  iOS  and  Android  are  "smart"  enough  to  scroll  the  screen  so  text  fields  are  accessible.  

Interact with Content…not buttons

32 32

By designing interactivity into the content itself, you’ll never have to worry when button design trends change (again).(e.g. 3D skeuomorphs & bevelling à flat design)

Consider our DuPont app, built mid-2009. Buttons aside, the design remains (relatively) fresh thanks to its transparencies, its simplicity, and the fact the user navigates by swiping—not a previous and next button—but the counter-surfaces themselves.

Windows Mobile’s new picker is a great example of the content-interaction trend in an OS.

“our goal is that you would have a sense that it wasn’t design.”

— Jony Ive

Animating the Interface

33 33

Think in the moment… Use responsive animation to bring necessary elements into focus as well as to get certain elements out of the way when they’re not needed. In this Enterprise audit app example, panels expand and contract as needed to display additional info or provide further opportunities for interaction.

4.Cross-Platform Design

Being flexible…

35 35

1.  Read Creating Adaptive UI (for iOS devices)Size Classes, Dynamic Text, Optimizing for High Resolution https://developer.apple.com/design/adaptivity/

1.  Familiarize yourself with Auto Layout Auto Layout is essential when supporting multiple versions of an iOS app. Auto Layout can accommodate new UI element metrics and respond to dynamic changes in text size. Further, an existing project can incrementally adopt Auto Layout.Auto Layout Guide:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html

For those tasked with designing an app across multiple platforms, there is some good news.

Auto Layout uses a mathematical description of the relationships between elements to create a dynamic interface that responds to changes in screen size, device orientation, and localization. Enabled by default when you create a new project.

Being flexible…more good news

36 36

1.  (even better news) Windows and Apple mobile UI have never been more similar.

2.  Changes in Lollipop include a redesigned user interface built around a responsive design language called "material design”—a cleaner design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows that allows the interface to expand and reform intelligently.

http://www.propelics.com/android-ios-best-two-worlds-rapidly-merging/

Android vs Apple UI

37 37

The Progression of Android UI Android 1.5 Cupcake 4/09 Android 2.3 Gingerbread 12/10 Android 4.4 Kitkat 10/13)

* http://www.propelics.com/android-ios-best-two-worlds-rapidly-merging/

The Progression of iPhone UI iPhone 2.0 7/08 iOS 4 6/10 iOS 7 9/13

Designing Cross-Platform Apps

38 38

Android   iOS   Mobile Web & Blackberry  

Apple Won’t Pass Our Apps…Now What?

39 39

Apperian’s EASE   iS  

EASE delivers a private, branded enterprise app store to employees and contracted workers without requiring devices to be managed

EASE  

Apple Won’t Pass Our Apps…Now What?

40 40

Testflight  

•  At WWDC 2014, Apple announced the integration of TestFlight within iOS 8 development tool suite.

•  iOS & Android compatible •  UDIDs are no longer required •  new testers added by sending an email to their Apple ID

5.Links

Where do we find all this stuff?

42 42

Apple links from the iOS Developer Library iOS 8 Overview for Developers https://developer.apple.com/ios8/ Learn About iOS 8 https://developer.apple.com/library/ios/navigation/# iOS 8 Software Development Kit (SDK & Xcode 6.0.1) https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12 iOS 8 Human Interface Guidelines (HIG) https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556All iOS developers should read Apple’s human interface guidelines for iOS-based devices to learn how apps should look & behave, and how to use the UI elements that UIKit provides. iBooks iOS 8 Human Interface Guidelines (HIG) https://itunes.apple.com/us/book/ios-human-interface-guidelines/id877942287?mt=11 Swift Programming Language Guide https://itunes.apple.com/us/book/swift-programming-language/id881256329?mt=11 iPhone User Guide for iOS 8 https://itunes.apple.com/us/book/iphone-user-guide-for-ios-8/id917482340?mt=11 iPad User Guide for iOS 8 https://itunes.apple.com/us/book/ipad-user-guide-for-ios-8/id917481145?mt=11

Where do we find all this stuff?

43 43

More iOS references: Designing Great Apps https://developer.apple.com/design/ Create UI Elements https://developer.apple.com/library/ios/samplecode/UICatalog/Introduction/Intro.html Learn how to programmatically create and customize specific UI elements. User Experience Starting Point (iOS) https://developer.apple.com/library/ios/referencelibrary/GettingStarted/GS_UserExperience_iPhone/index.html#//apple_ref/doc/uid/TP40007296 iOS 7 UI Transition Guide https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-CH6-SW1 For those who still have to transisition from iOS 6 to iOS 7-8 UI Dos and Don’ts https://developer.apple.com/design/tips/ App Review Guidelines https://developer.apple.com/app-store/review/ Don’t get stung by a rejection. Read the guidelines! iBooks In-House App Accelerator Guide Build in-house apps for your business! https://itunes.apple.com/us/book/in-house-app-accelerator-guide/id499341792?mt=11

Where do we find all this stuff?

44 44

Android references: Android L Developer Preview https://developer.android.com/preview/index.html Preview SDK Download https://developer.android.com/preview/setup-sdk.html This document assumes you are familiar with Android development (e.g. using the Android SDK Manager and creating projects). Introduction to Material Design https://www.google.com/design/spec/material-design/introduction.html#introduction-principles “This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.” Building Your First Android App https://developer.android.com/training/basics/firstapp/index.html Designing for Android https://developer.android.com/design/index.html

Conceptualization & Planning Approach

Business Drivers

Market

Opportunity

Envisioned mobile

Scenarios High Level

Requirements

Step I: Benchmarking & Requirements

Step II: Visualization, Readiness & Roadmapping

Step III: Planning and Budgeting

Build & Deploy

Scope Finalized

Competitive Analysis

App Prototype

App Roadmap

Ongoing Support

Technical Approach

Development Approach, Budgeting,

& Release Plan

Customer Feedback

Step IV: App Creation

Propelics Kickstarts

46

Special Offer Free 1 Hour Mobile

Advisory Call info@propelics.com

888-405-2820

Mobile App Roadmap

Mobile COE Kickstart

Mobile App Rapid

Prototyping

IT Readiness for Mobile Kickstart

Prototype Factory

Mobile AppScoping &PlanningKickstart

Thank You