2. Design Guidance for Windows Store Line-of-Business Apps
11/14/2018 3:58 PM
DEV-B309
Design Guidance for Windows Store Line-of-Business Apps
Robert Green
Microsoft
© 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.

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

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

5. Traditional line of business applications

6. Traditional line of business applications

7. Line of business apps on Windows 8
11/14/2018
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.

8. Windows Store line of business apps
TechEd 2013
11/14/2018 3:58 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.

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

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

11. Navigation

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

13. App bars

14. Windows PCs: built for Windows 8
11/14/2018
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.

15. Orientation
Landscape
Portrait

16. View state
Snapped
Filled

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

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

19. Snapped view

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

21. 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)

22. Live tiles Secondary tiles

23. Share source and target
Windows Share pane
Share target UI

24. Data Design for touch Use GridViews/ListViews to display data
Consider using ListBox to avoid excessive panning
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

25. Data

26. Plan details and subscriber benefits
11/14/2018 3:58 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
* 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.

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

28. Resources Learning TechNet msdn http://channel9.msdn.com/Events/TechEd
11/14/2018 3:58 PM
Resources
Learning
Sessions on Demand
Microsoft Certification & Training Resources
TechNet
msdn
Resources for IT Professionals
Resources for Developers
© 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.

29. Complete an evaluation on CommNet and enter to win!
11/14/2018 3:58 PM
Complete an evaluation on CommNet and enter to win!
© 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.

30. 11/14/2018 3:58 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 and be automatically entered in a drawing to win a prize
© 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.

31. 11/14/2018 3:58 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.