Wired2Win Webinar: Windows8 Mobile App Development


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Windows reimaginedFor consumers, for developers
  • Create a Camera Capture UI demo. Seamless integration with devices and OS resources.
  • [Speak to bullets as presented above]Analytics DetailsKey pivots:Audience demographics (age, gender, country)Device class (tablet, laptop, etc.)Paid vs. FreeKey MeasuresVol. of apps (download and submissions)Top grossingTop AppsRatingsReviewsApp quality (hangs, crashes)App performance (relative to category/sub-category)Referrals (how did people discover your app?)
  • Do more with lessSolve for distractions, not discoverability. Let people be immersed in what they love and they will explore the rest.Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.Be fast and fluidLet people interact directly with content, and respond to actions quickly with matching energy.Bring life to the experience, create a sense of continuity and tell a story through meaningful use of motion.Show pride in craftsmanshipDevote time and energy to small things that are seen often by many.Engineer the experience to be complete and polished at every stage.Be authentically digitalTake full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality.Embrace the fact that we are pixels on a screen. Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material.Win as oneLeverage the ecosystem and work together with other apps, devices and the system to complete scenarios for people.Fit into the UI model to reduce redundancy. Take advantage of what people already know to provide a sense of familiarity, control, and confidence.
  • Clean and open layoutMinimize distraction and help people get immersed in the content by leaving only the most relevant elements on screen.Give content breathing room by removing lines, boxes, and unnecessary graphical effects like blurs and gradients. Use open space to frame the content.Limit navigational chrome that is persistently on screen, such as tabs. Let people focus on the current content, and avoid distracting them with way-finding chrome.Clear information hierarchy   The Microsoft design language is founded on clean, beautiful typography that helps users understand the hierarchy of the content. Use typography in place of lines and boxes to help establish structure and hierarchy.Use size, weight, and color in text consistently to convey information on a piece of content's importance. The set of variations should be small, so people can easily see how content fits together in the overall hierarchy. See Guidelines for text and typography.Use the default stylesheet to get the predefined type ramp for your text.Leverage the edge   Some actions can't be accomplished with direct manipulation. For those, show commands contextually, only as needed, to avoid cluttering your canvas. Leverage the screen or device edge so people can confidently find commands.Place commands in the app bar, which can be brought up on demand through a swipe from the top or bottom edge, and can be dismissed when users have completed their actions.Leverage the charms, which can be brought up on demand through a swipe from the right edge, for invoking the Search, Share, Devices, or Settings charms.Avoid placing commands persistently on screen, and avoid showing duplicate entry points for contracts that are accessed with charms.Design for comfort and put frequently used interaction surfaces near the edges.
  • People often touch with more than one finger and don’t even realize it.
  • Scaling to multiple form factors   Your app has the opportunity to be used on hundreds of millions of PCs running Windows 8. These PCs will have a wide range of screen sizes and resolution, ranging from <10" tablets to >27" screens.Make the best use of on-screen real estate by using the fluid layout support built into platform controls. For example, the ListView will automatically reflow content based on available space.The platform provides automatic scaling based on device screen size and resolution. Provide 3 sizes of assets, or use Scalable Vector Graphics (SVG) to ensure your app always looks crisp and polished. See the Guidelines for scaling to screens and Guidelines for scaling to pixel density.Keep in mind that turning on Make everything on your screen bigger in Ease of Access effectively lowers the current resolution and you need to ensure that all UI is still visible and usable. To learn more, see Verify your app with "Make everything on your screen bigger".Use the simulator in Microsoft Visual Studio to see how your app will look on different form factors.
  • Wired2Win Webinar: Windows8 Mobile App Development

    1. 1. WIRED2WIN WEBINAR Developing Windows 8 Mobile Apps WinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    2. 2. Developing Windows 8 Mobile Apps @WinWireCTO linkedin.com/in/VineetAroraWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    3. 3. What am I going to talk aboutWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    4. 4. Windows 8 – Windows Reimagined New Metro style UI where touch is a Designed from the chipset up for first-class citizen with full mouse- multiple form-factors : tablets, laptops, keyboard support desktops and all-in-ones Windows Store on every device with a New development models built on WinRT, including native support for full commerce platform and flexibility HTML/CSS/JS, C#/XAML, C++/DirectXWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    5. 5. Windows 8 Store App - Brand new look and feel - Run on a variety of devices, - Sold on the Windows Store. Windows Store app development is supported only on Windows 8 Can not be developed Windows Store apps on Windows 7 or Windows Server 2012.WinWire Technologies, Inc. Confidential 5 © 2010 WinWire Technologies
    6. 6. Windows 8 Platform – an architecture overview Metro style Apps Desktop Apps View DirectX XAML HTML / CSS Controller Model C C# JavaScript HTML C C# C++ VB (Chakra) Java Script C++ VB WinRT APIs System Services Communication Graphics & Devices & & Data Media Printing Application Model Internet Explorer Win32 .NET Core Windows Core OS ServicesWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    7. 7. Metro Style App APIs architectureWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    8. 8. The Windows Store - Features Paid downloads, trials, and in-apps. Use own commerce engine & retain Retain 70% of the first $25k, 100% or use the Windows Store’s full 80% of the rest commerce platform Advertise with Microsoft Advertising Robust analytics for free, or your preferred ad vendor. including demographics, reviews, referrals, and usage & performance statisticsWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    9. 9. At this point, you might be asking, "OK, so what exactly is Windows Store apps and how do they differ from desktop apps?“ A Windows Store app is a new type of application that runs on Windows 8 devices leveraging all the capabilities and features available on the device.WinWire Technologies, Inc. Confidential 9 © 2010 WinWire Technologies
    10. 10. Windows 8 Applications Characteristics One window that Work great with Can talk to each supports multiple touch and pen other views input Can be written in Have new controls Use tiles instead the developers and UI surfaces of icons language of choice Be sold in the Windows StoreWinWire Technologies, Inc. Confidential 10 © 2010 WinWire Technologies
    11. 11. Apps use tiles instead of icons • Installed apps show up as a tiles on the Start screen. • Touching or clicking the tile starts the app.WinWire Technologies, Inc. Confidential 11 © 2010 WinWire Technologies
    12. 12. One Window - Multiple Views A single, chromeless window that fills the entire screen by default, no distractions Can support different layouts and views to create a fluid and harmonious experience across a variety of form factors and display sizesWinWire Technologies, Inc. Confidential 12 © 2010 WinWire Technologies
    13. 13. Input for Windows apps Work smoothly with a variety of input sources, including touch, pen, mouse, and keyboard input. You can use a single set of events that work for all these input sources. Apps get a set of default styles that ensure UI elements work well for touch scenarios.WinWire Technologies, Inc. Confidential 13 © 2010 WinWire Technologies
    14. 14. Interaction and UIApps Can Talk to Each-otherApp contracts are a way for users toseamlessly search across and sharecontent between different apps New Controls and UI Surfaces New controls that make it easier to create a great user experience The App Bar: To present navigation, commands, and tools.WinWire Technologies, Inc. Confidential 14 © 2010 WinWire Technologies
    15. 15. Use the ‘Charms’ The charms are a specific and consistentset of buttons in every app: search, share, connect, settings, and start - core scenarios that every user wants to do in almost every app Search for content located in all apps and they can search an apps content from another app. Share content from an app with people /services. Go directly to the Start screen. Connect to devices & send content, stream media, and print. Use settings to configure app to preferences.WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    16. 16. You sell your app in the Windows Store • The Windows Store makes apps available to millions of customers around the world • Apps uploaded with a price in a local currency is made available in the worldwide marketplace in 100+ languages The Windows Store makes it easy to distribute, update, and get paid for appsWinWire Technologies, Inc. Confidential 16 © 2010 WinWire Technologies
    17. 17. Developing Windows 8 Apps17WinWireTechnologies, Inc. Confidential WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    18. 18. Develop Windows apps in a variety of languages If you know web • You can develop a Windows Store app development using HTML5, Cascading Style technologies: Sheets, Level 3 (CSS3), and JavaScript. If you have developed .NET, Windows • You can develop a Windows Store app Presentation using XAML, with code-behind in C++, C#, Foundation, or Microsoft or Visual Basic. Silverlight applications: • You can develop a DirectX Windows Store If you know DirectX: app using native C++ and HLSL to take full advantage of graphics hardware. 18WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    19. 19. Windows 8 App Development Tools Visual Studio 2012 Express for Windows 8 Blend for Visual Studio Windows 8 Software The Windows App to create and edit Development Kit Certification Kit images Programming Language Choices DirectX Windows Store HTML5, Cascading Style XAML, with code- app using native C++ Sheets, Level 3 behind in C++, C#, or and HLSL to take full (CSS3), and JavaScript Visual Basic advantage of graphics hardwareWinWire Technologies, Inc. Confidential 19 © 2010 WinWire Technologies
    20. 20. Developing Windows Store appsCreate a UI Add multimedia• Define layouts and navigation, add controls and • Capture multimedia, play audio and video, process content image filesDefine application resources Integrate devices, printers and sensors• File resources (images, XML) and embedded resources • Support devices like cameras, sensors and removable (ResW and ResJSON) storage in your appRespond to user interaction Create Windows Runtime Components• Handle gestures and keyboard, mouse, pen and stylus • Create components (DLLs) in C++/C#/VB and call interactions them using JavaScriptWork with data and files Globalize your app• Data binding, accessing, sharing and exchanging data • Adapt the app for multiple languages, cultures and regionsConnect to peers, web and network services Make your app accessible• Windows Azure Mobile Services • For people having impairments and disabilitiesManage user info Debug and test the app• Credential roaming, single sign-on, managing user contacts • Visual Studio Windows Store app simulator, code analysis, performance analysisLaunch and resume app Package the app• Manage app lifecycle (activate, suspend, resume) • Use Visual Studio to package the app for distribution 20 through Windows Store WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    21. 21. Designing Windows 8 apps21WinWireTechnologies, Inc. Confidential WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
    22. 22. Windows 8 App Design Style Principles Do more with less Fast and Fluid Pride in craftsmanship Authentically digital Win as oneWinWire Technologies, Inc. Confidential 22 © 2010 WinWire Technologies
    23. 23. Content over Chrome Clean & open layout, only relevant elements on screen • Minimize distraction • Remove lines, boxes, and unnecessary graphical effects like blurs and gradients. • Use open space to frame content. Clear information hierarchy • Consistent size, weight, and color in text to convey importance of information • Small variations , displaying content fit in overall hierarchy. Leverage app bar, charms and edges for user actions • Commands in the app bar to be brought up on demand through a swipe from top or bottom edge, and dismissed when complete. • Invoke Search, Share, Devices, or Settings charms on demand with a swipe from the right edgeWinWire Technologies, Inc. Confidential 23 © 2010 WinWire Technologies
    24. 24. Branding your Windows Store apps Colors that represent your business Less graphics (Content over chrome) Images that reflect your brand Layout relevant to your brand Company logo Right typographyWinWire Technologies, Inc. Confidential 24 © 2010 WinWire Technologies
    25. 25. Incorporate your brand into Windows Store apps Colors Grid Layout TypographyWinWire Technologies, Inc. Confidential 25 © 2010 WinWire Technologies
    26. 26. Incorporate your brand into Windows Store apps Color Images LayoutWinWire Technologies, Inc. Confidential 26 © 2010 WinWire Technologies
    27. 27. Incorporate your brand into Windows Store apps Graphics Grid Logo ColorsWinWire Technologies, Inc. Confidential 27 © 2010 WinWire Technologies
    28. 28. Touch Interaction Design • Press and hold to learn • Tap for primary action • Slide to pan • Swipe to select command, & move • Pinch and stretch to zoom • Turn to rotate More design guidance • Swipe from edge for app http://msdn.microsoft.com/en- us/library/windows/apps/hh770 commands 552.aspx • Swipe from edge for system commandsWinWire Technologies, Inc. Confidential 28 © 2010 WinWire Technologies
    29. 29. Touch Interaction – Best Practices Use fingers for what theyre good at • Small targets require precision. • Use large targets that support direct manipulation and provide rich touch interaction data. • Swiping down on a large item is quick and easy because the entire item is a target for selection.WinWire Technologies, Inc. Confidential 29 © 2010 WinWire Technologies
    30. 30. Windows 8 touch posture Designing for touch requires designing for how the device will be held (grip). The current task and how it’s presented usually determines which grip is used. Immediate environment and physical comfort also affect how long a grip is used and how often it’s changed. Optimize your app for different kinds of grips. But if an interaction naturallyInteractionitself to a specific grip, optimize for that. areas: lends areas: ReadingSlates are most often held along the side, Content in the top half of the screen is easierthe bottom corners and sides are ideal to see than content in the bottom half, whichlocations for interactive elements is often blocked by the hands or ignored.WinWire Technologies, Inc. Confidential 30 © 2010 WinWire Technologies
    31. 31. Touch Interaction – Best Practices Browse content with touch• Semantic Zoom and panning make navigation fast and fluid.• use large canvases that support panning and Semantic Zoom. Provide feedback Provide immediate visual feedback whenever the screen is touched. Interactive elements should react by changing color, changing size, or by moving. Items that are not interactive should show system touch visuals only when the screen is touched.WinWire Technologies, Inc. Confidential 31 © 2010 WinWire Technologies
    32. 32. Touch Interaction – Best Practices Content follows finger• Elements that can be moved or dragged by a user should follow the users finger when moving.• Elements that do not move should return to their default state when the user slides or lifts their finger off the element. Keep interactions reversible• Touch interactions should be reversible.• Provide visual feedback to indicate what will happen when the user lifts their finger.• This will make the app safe to explore using touch.WinWire Technologies, Inc. Confidential 32 © 2010 WinWire Technologies
    33. 33. Touch Interaction – Best Practices Multiple Fingers Recognition Touch interactions shouldn’t change radically based on the number of fingers touching the screen. Just like the real world, sliding something with one or three fingers shouldnt make a difference. Untimed Interactions • Interactions that require compound gestures such as double tap or press and hold need to be performed within a certain amount of time. • Avoid timed interactions like these because they are often triggered accidentally and are difficult to time correctly.WinWire Technologies, Inc. Confidential 33 © 2010 WinWire Technologies
    34. 34. Scaling to Multiple Form Factors Supported on a wide range of screen sizes, resolutions; range <10" tablets to >27" 3 Ways to use Max On-Screen Real Estate: • Fluid Layout support built into platform controls • Automatic scaling based on device screen size and resolution • Test app on different form factors with the Visual Studio simulatorWinWire Technologies, Inc. Confidential 34 © 2010 WinWire Technologies
    35. 35. Design for various layouts Orientation Windows 8 app adapts its layout for orientation and screen sizesWinWire Technologies, Inc. Confidential 35 © 2010 WinWire Technologies
    36. 36. For questions and inquiries: marketing@winwire.comWinWire Technologies, Inc. Confidential © 2010 WinWire Technologies