Design Guidance for Windows Store Line-of-Business Apps 4/7/2019 6:47 PM DEV-B309 Design Guidance for Windows Store Line-of-Business Apps Brian Noyes © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Visual Studio Connections About Brian Noyes Solliance (www.solliance.net) CTO Microsoft Regional Director Microsoft MVP Pluralsight author www.pluralsight.com Web API Insider, Windows Azure Insider, Window Store App Insider, C#/VB Insider t e brian.noyes@solliance.net @briannoyes http://briannoyes.net Updates will be available at http://www.devconnections.com/updates/LasVegas_Fall08/VS

Objectives Explore adhering to Microsoft design guidance in line of business apps Understand how to better use built-in controls Discuss working with data in Windows Store apps Get us all thinking about this more

Traditional line of business applications Menus and toolbars for navigation Lots of actions -> lots of buttons The more data the better Design once, run everywhere

Traditional line of business applications

Traditional line of business applications

Line of business apps on Windows 8 4/7/2019 Line of business apps on Windows 8 New scenarios Use what you know Same skills you already have Manage using existing infrastructure Touch, mobile scenarios Better productivity Fast and fluid, get things done faster Touch, mouse, keyboard and pen Security Isolated app containers Compatibility Continue to use existing internal software © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Windows Store line of business apps TechEd 2013 4/7/2019 6:47 PM Windows Store line of business apps Keep the design clean Content over chrome, fast and fluid Navigation Top app bar Scrolling Semantic zoom Actions Canvas buttons App bars Invest in a great tile Live tiles Notifications © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Top app bar “Lives” on top of the screen, always just a swipe away Content is represented as thumbnails or icons Provides quick global navigation to sections

Semantic zoom Semantic zoom eases navigation in large content sets Use for 3+ pages of panning Provides opportunity to represent data in another context

Navigation

App bars Persistent commands on right Commands that appear throughout the app on right New/Add and Delete/Remove at far right Insert selection commands on left Show commands based on item selection Commands can be shown for single or multi-select Reduce clutter with menus/flyouts Organize related commands with menus/flyouts Flyouts provide more sophisticated UI Menus provide clear text commands Hide disabled commands

App bars

Windows PCs: built for Windows 8 4/7/2019 Windows PCs: built for Windows 8 © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Orientation Landscape Portrait

View state Snapped Filled

Multiple form factors and viewing options Design for different form factors Orientation Start in Landscape using 1366 x 768 Adjust layout for Portrait with media queries/ViewStateModels Snapped and fill views Strive for feature parity in snapped view Scaling to screens Design an app UI that looks great on devices of various sizes Scaling to pixel density Provide multiple images or use vector graphics

Condensing app bar commands Keep the same commands More than five commands wrap Labels automatically hide in snap and portrait view Padding automatically adjusts Place global commands before contextual commands Consider condensing menus or offering a more focused experience

Snapped view

Tiles and toast notifications Rich and engaging content Even when your app is not running Content updated via tile notifications even if your app isn’t running Toast notifications Alerts users to relevant, time sensitive information User is in control User will turn off your tile/notification if they don’t add value

Notification delivery mechanisms Local Notification sent while your app is running Scheduled Notification sent while your app is running, occurs at a precise time Periodic App periodically polls a remote cloud service for new content Push Notifications sent from app cloud server to user via Windows Push Notification Services (WNS)

Live tiles Secondary tiles

Share source and target Windows Share pane Share target UI

Data Design for touch Use GridViews/ListViews to display data Consider using ListView to avoid excessive panning Consider 3rd Party control suites with data grids Avoid showing “too much” data at the same time Spread data across a wide page Let the user scroll and use semantic zoom to move back and forth Use top app bar to navigate among sections of data

Data

Plan details and subscriber benefits 4/7/2019 6:47 PM Plan details and subscriber benefits Free Plan for up to 5 users Included for certain paid MSDN subscribers: Version control (TFVC or Git) Comment on changesets & commits Work item tracking and tagging Team rooms Agile planning tools Feedback Management Agile Portfolio Management* Build* Web-based test case management* Load testing* New! Additional information at http://tfs.visualstudio.com * Capability in preview – limits may apply. Authoring load tests requires Visual Studio Ultimate 2013 Preview. © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Learn more and activate today at http://aka.ms/AzureContest MSDN Subscribers – Accelerate Your Development & Test using Cloud VMs We’ve enhanced the Windows Azure MSDN benefit and added cloud use rights for select MSDN software. You’ve already got it, now use it!  Activate and try out your Windows Azure MSDN benefit today & you could win an Aston Martin V8 Vantage! Learn more and activate today at http://aka.ms/AzureContest

Resources Learning TechNet msdn http://channel9.msdn.com/Events/TechEd 4/7/2019 6:47 PM Resources Learning Sessions on Demand http://channel9.msdn.com/Events/TechEd Microsoft Certification & Training Resources www.microsoft.com/learning TechNet msdn Resources for IT Professionals http://microsoft.com/technet Resources for Developers http://microsoft.com/msdn © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Evaluate this session Scan this QR code to evaluate this session. 4/7/2019 6:47 PM Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session Scan this QR code to evaluate this session. © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/7/2019 6:47 PM © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.