WinWire webinar: Converting iPad apps to Windows Store apps

Converting iPad Apps to Windows Store
Apps
Wired2Win Webinar

@WinWire

WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies

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

Evolution of Mobile OS & Apps

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

Windows Store Apps (Dec 2012):
35,000

Surface Surface Pro

Lumia 800,710 Lumia 900 Lumia 620

Windows Windows
Phone 7 Mango
Phone 8

Windows Windows
Phone Phone 6.5 Tango
Cupcake

iPad iPad 2 iPad Mini
iPhone 1 iPhone 3G iPhone 3GS iPhone 4G iPhone 4S iPhone 5
iOS 1.0 iOS 2.0 iOS 3.0 iOS 4.0 iOS 5.0 iOS 6.0 Exploring

2007 2008 2009 2010 2011 2012 2013
*Source: Wikipedis, Gigaon

WinWire Technologies, Inc. Confidential 3
© 2010 WinWire Technologies

Key Challenges

Multiple screen sizes need to be targeted

Mac Computers iPhone iPad apple TV

Windows Windows phone Surface Microsoft TV


Popular Apps

5

Application Architecture

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

Cocoa Touch UIKit Language Projections

Core Graphics Storage & Network

Media Open GL ES Graphics & Media

Core Animation UI, Pickers & Controls
Win RT

Core Data Metadata & Namespace
Core Services
Foundation Runtime Code

Core OS Windows Kernel


Application Lifecycle - iOS

• 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:


Application Lifecycle – Win 8

• 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.

Windows 8 Events

OnLaunched

Application.Suspending

Application.Resuming


Data Storage

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

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 Application settings are stored on a per-
preferences in system settings. application basis.
Apps can uses system interfaces to A few specific folders can be accessed
access the user’s contacts or music directly by the application – Documents,
etc. Music, Pictures etc.
Use File Picker to access arbitrary files and
RemovableDevices API for SD cards.


UI Design Guidelines

Similarities
• Touch first
• Focus on content
• Intuitive navigation
• Consistent UX across all apps

Differences
• No app chrome!
• Search and share contracts
• Discreet app bars for commands
• Live tiles and toast notifications


Commands in iOS Apps

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

Bottom bar
for
contextual
Some use slide commands.
out bars.


Commands in Win8 Apps - App Bars

• 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.

Bottom bar
for
contextual
commands.


Commands in Win8 Apps - Charms Menu

• Swipe from the right edge.
• Used for sharing, searching and settings.


iPad Apps - Orientation & Views

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


Win 8 Apps - Orientation & Views

• 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.


iOS Apps - Notifications

Besides in-app notification, two other mechanisms -
• apps have
iOS Live Tiles two mechanisms for notifications -
• Notification the functionality of the notification
• Combine Centre
• New notifications appear on the top of the
center and the app badges.
• screen. a rich collection of templates to
Tiles have
• Users can swipe
choose from. from the top to view all
• messages.
Toast Notifications
• AppImportant updates that interrupt users
• Badges
•
• App appear anywhere in the system. numeric
Can icons in the Springboard can have
• badges attached to users of events inthat there
Use them to notify them to indicate real time
• are new messages.
Should be opt-in.
• A number of templates are available to choose
from.


Win 8 Apps - Notifications

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.


Win 8 Apps Layout - Hierarchical

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.

Win 8 Apps Layout - Flat

• 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.


Win 8 Apps - Navigation Elements

• Header & Back Button

• Header Menus

• Home Links

• Filters, pivots, sorts and views


Unique Traits of Win 8 Apps - Snap Views

• A way of multitasking.
• Leverage to keep users involved for longer durations.


Unique Traits of Win 8 Apps - Semantic Zoom

• Zoom out to see data in related groups.
• Quick way to dive back in instead of navigating long lists.


Tools & Resources

iOS Windows 8
• XCode and iOS software • Visual Studio 2012 Express for Windows
development kit (SDK) 8 and Blend (optional)
• developer.apple.com • dev.windows.com
• Apple developer account – needed • Developer license – free but valid for 30
only when testing on actual devices days at a time.
• $99 a year. • Windows Store Developer Account –
• Provisioning portal $49 for individuals $99 for companies.
• Windows Store dashboard.


DEMO: Design elements of
Windows 8 apps

WinWire Technologies, Inc. Confidential
24

Takeaways

 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.


Thank you!

Send in your questions to marketing@winwire.com.

Visit us: www.winwire.com

WinWire Technologies, Inc. Confidential
26

WinWire webinar: Converting iPad apps to Windows Store apps

More Related Content

What's hot

Viewers also liked

Similar to WinWire webinar: Converting iPad apps to Windows Store apps

More from WinWire Technologies Inc

Recently uploaded

WinWire webinar: Converting iPad apps to Windows Store apps

Editor's Notes