© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Converting iPad Apps to Windows Store Apps

@WinWire

Wired2Win Webinar

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Agenda

• Popular Apps

• Application Architecture

• Application Lifecycle

• Data Storage

• UI Design Guidelines – Similarities & Differences

• Commands

• Orientation & Views

• Notifications

• Windows 8 Application Layouts

• Unique Traits of Windows 8 Apps – Snap Views & Semantic Zoom

• Tools & Resources

2

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Evolution of Mobile OS & Apps

3

2007 2008 2009 2010 2011 2012 2013

iPhone 1

iOS 1.0

iPhone 4G

iOS 4.0

iPad

WindowsPhone 7

iOS 3.0

iPhone 3GS

Cupcake

WindowsPhone 6.5 Tango

iPhone 4S

iOS 5.0

iPad 2

Mango

Lumia 800,710

Exploring

Surface Pro

Windows Phone 8

Lumia 900 Lumia 620

Surface

iPad Mini

iPhone 5

iOS 6.0

iOS App Store Apps (March 2013) : 821,438

Windows Store Apps (Dec 2012):35,000

*Source: Wikipedis, Gigaon

iPhone 3G

iOS 2.0

WindowsPhone

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Multiple screen sizes need to be targeted

Key Challenges

Mac Computers iPhone iPad apple TV

Windows Windows phone Surface Microsoft TV

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Popular Apps

5

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Application Architecture

6

Cocoa Touch UIKit

Media

Core Graphics

Open GL ES

Core Animation

Core ServicesCore Data

Foundation

Core OS

Language Projections

Win RT

Storage & Network

Graphics & Media

UI, Pickers & Controls

Windows Kernel

Metadata & Namespace

Runtime Code

Objective-C C#/VB, C++/CX, JavaScript + HTML5

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Application Lifecycle - iOS

7

• One app in the foreground which owns the screen and receives touch events.

• Applications can work in the background.

• Allows for scenario based multitasking and fast application switching.

iOS Callback

application:didFinishLaunchingWithOptions:

applicationDidBecomeActive:

applicationWillResignActive:

applicationDidEnterBackground:

applicationWillEnterForeground:

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Application Lifecycle – Win 8

8

Windows 8 Events

OnLaunched

Application.Suspending

Application.Resuming

• Much simpler lifecycle.

• Suspended apps cannot execute code.

• Use Background Transfer API for file downloads or run light code.

• BackgroundCapabaleMedia API for playing audio in the background.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Data Storage

9

iOS Windows 8

Out of the box support for SQL Lite

No inbuilt database support yet. Extensions from SQLite are available.

Recommended to centralize app preferences in system settings.

Application settings are stored on a per-application basis.

Apps can uses system interfaces to access the user’s contacts or music etc.

A few specific folders can be accessed directly by the application – Documents, Music, Pictures etc.

Use File Picker to access arbitrary files and RemovableDevices API for SD cards.

• Both provide mechanisms to store and access data locally.• Internal storage area is private to each application.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential 10

Similarities• Touch first

• Focus on content

• Intuitive navigation

• Consistent UX across all apps

UI Design Guidelines

Differences• No app chrome!

• Search and share contracts

• Discreet app bars for commands

• Live tiles and toast notifications

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Commands in iOS Apps

11

Bottom bar for contextual commands.

Commands displayed as part of persistent navigation bar at the top or bottom.

Some use slide out bars.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

• Swipe from top or bottom edges brings up the app bars. • Top bar can be used for navigation in a flat hierarchy or for switching

between content.

Commands in Win8 Apps - App Bars

12

Bottom bar for contextual commands.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

• Swipe from the right edge.

• Used for sharing, searching and settings.

Commands in Win8 Apps - Charms Menu

13

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

iPad Apps - Orientation & Views

14

• Same content in both landscape and portrait layout. • Content reflows in portrait orientation.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Win 8 Apps - Orientation & Views

15

• Windows 8 runs on various form factors.• The extra real estate can be used to show more content.• The design should scale for both portrait layout and high

resolution screens.• Use multiple images for different orientations, resolutions or

screen-sizes.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

iOS Apps - Notifications

16

Besides in-app notification, two other mechanisms -

• Live Tiles • Combine the functionality of the notification

center and the app badges.

• Tiles have a rich collection of templates to choose from.

• Toast Notifications • Important updates that interrupt users

• Can appear anywhere in the system.

• Use them to notify users of events in real time

• Should be opt-in.

• A number of templates are available to choose from.

iOS apps have two mechanisms for notifications -

• Notification Centre• New notifications appear on the top of the

screen.

• Users can swipe from the top to view all messages.

• App Badges• App icons in the Springboard can have numeric

badges attached to them to indicate that there are new messages.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Win 8 Apps - Notifications

17

Win 8 apps have two mechanisms for notification -

• Live Tiles • Combine the functionality of the notification

center and the app badges.

• Tiles have a rich collection of templates to choose from.

• Toast Notifications • Important updates that interrupt users

• Can appear anywhere in the system.

• Use them to notify users of events in real time

• Should be opt-in.

• A number of templates are available to choose from.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Win 8 Apps Layout - Hierarchical

18

The Hub Layout Pattern

For apps with different sections of related content, with varying levels of detail.

• Hub Page- Landing page of the app. - Content is separated in horizontally scrolling sections - Each section mapping to a Section page.

• Section Page- Consists of individual items.- Each item has its own Detail page. - Can also leverage grouping and a panorama style layout.

• Detail Page- The third level of the app. - The format could varies with type of content, - A News app can show a news item or a photo app, just a

picture.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Win 8 Apps Layout - Flat

19

• Flat layout scheme for apps with all the content at the same hierarchical level.

• Allows users to switch between small number of unrelated sections or tabs.

• Typically no back buttons.

• Fast switching between content with the top app bar.

• Apps use thumbnails to denote items in the app bar.

• An add button to include more tabs or sections.

• Common use cases - browsers, document creation apps,

games with different modes.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Win 8 Apps - Navigation Elements

20

• Header & Back Button

• Header Menus

• Home Links

• Filters, pivots, sorts and views

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

• A way of multitasking.

• Leverage to keep users involved for longer durations.

Unique Traits of Win 8 Apps - Snap Views

21

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

• Zoom out to see data in related groups.

• Quick way to dive back in instead of navigating long lists.

Unique Traits of Win 8 Apps - Semantic Zoom

22

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Tools & Resources

23

iOS• XCode and iOS software

development kit (SDK)

• developer.apple.com

• Apple developer account – needed

only when testing on actual devices

• $99 a year.

• Provisioning portal

Windows 8• Visual Studio 2012 Express for Windows

8 and Blend (optional)

• dev.windows.com

• Developer license – free but valid for 30

days at a time.

• Windows Store Developer Account –

$49 for individuals $99 for companies.

• Windows Store dashboard.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential

DEMO: Design elements of Windows 8 apps

24

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Takeaways

25

Windows 8 has equivalents for all the features available on iOS. More flexible, more choices and unique mechanisms like Snap Views for

better user-engagements. Take advantage of multiple form-factors or orientation changes to show

more content. System-wide integration with search and share enables seamless

communication between applications. Conform with the Windows 8 design language.

Re-think your application design to leverage all the features of the platform.

© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential

Send in your questions to marketing@winwire.com.

Visit us: www.winwire.com

26

Thank you!