Workshop 40043A:

Windows 8 UX Design Workshop

Length:2 Days
Published:August 23, 2013
Language(s):English
Audience(s):Developers
Level:200
Technology:Microsoft Visual Studio 2012
Type:Workshop
Delivery Method:Instructor-led (classroom)
About This Workshop
This workshop is created using the flipped classroom approach. In a flipped classroom approach, students learn the concepts at their own pace and outside of the classroom. They learn the concepts prior to attending the classroom. In the classroom, they apply the concepts by working on the labs.
The hands-on labs will help designers and developers apply and reinforce their learning with respect to:
  • Design principles underlying Windows Store applications
  • Recommended approach and processes for designing the user experience (UX) of Windows Store applications
  • Guidelines and requirements for designing Windows Store application user interfaces
The labs support the “Windows 8 UX Design Jump Start” materials found online at http://go.microsoft.com/fwlink/?LinkId=318041
Audience Profile
The primary audience of these labs is designers of Windows 8 store applications (user experience designers, interaction designers and visual designers).
A secondary audience is developers of Windows 8 store applications who are charged with user interface design, or who need to be familiar with the guidelines and processes of Windows Store application user experience design in order to work with designers, or designers’ deliverables.
All participants will have viewed the Windows 8 UX Design Jump Start materials (available at http://go.microsoft.com/fwlink/?LinkId=318041).
At Workshop Completion
After completing this workshop:
  • Describe and apply the recommended process and techniques for designing the user experience of Windows Store applications.
  • Apply Microsoft User Experience guidelines to the design of Windows 8 Store applications. In particular:
    • Determine the appropriate navigation pattern for an application
    • Apply layout rules to application screens
    • Apply correct commanding guidelines
    • Effectively design for different form factors, including Snapped view
  • Identify opportunities to leverage Windows 8 Charms and Contracts in an application user interface. In particular:
    • Identify and design user interfaces for Share scenarios (source and target)
    • Identify when it is appropriate to use the Windows 8 Search charm, and design compliant Search experiences
    • Identify opportunities to use the File Picker and File Saver contracts, and design appropriate user interfaces for each
    • Understand what user interface elements belong in the Settings charm and design compliant Settings user interfaces
  • Identify opportunities to use application tiles, live tiles and secondary tiles to enhance an application user experience
  • Describe the Start Screen tile design options.
  • Describe the guidelines for usage of notifications and apply them appropriately.
Workshop OutlineSession 1: Introduction
In this module, students will get an overview of the workshop and the Windows design principles. Students will also become familiar with the application being used for the labs.
Lessons
  • About this Workshop
  • Designing for Windows 8
  • Lab Scenario
  • Review the Windows 8 Design Principles
  • Learn about the workshop agenda
  • Learn about the application and the scenario that will be used on all the labs.
Session 2: Less is More
This module covers the process of identifying what your app’s unique offering is, and the right organization of features to deliver that promise. The first three steps of the user experience design process described here will result in a “Great At” statement, a set of User Flows and finally a set of application features they require.
Lessons
  • The “Great At” Statement
  • User Flows
  • Features
Lab : Creating a Great At Statement
  • Brainstorm Great At statements
  • Critique your Great At statements
  • Settle on your Great At statement
Lab : Identifying User Flows
  • Brainstorm possible user flows
  • Remove features
  • Remove user flows that don’t support the Great At statement
  • Review your final user flows
Lab : Identifying App Features
  • Brainstorm possible app features
  • Remove unnecessary features
  • Group features
  • Identify a “Great At” statement for your application
  • Determine a set of “User Flows” to support the “Great At” statement
  • Brainstorm and organize the features required for your app.
Session 3: Navigation
This module introduces the two standard navigation patterns for Window Store applications, and the navigation devices available to users to find their way around your application.
Lessons
  • Navigation Patterns
  • Content
Lab : Designing Navigation
  • Design the navigation for the Sample Application
  • Validate the navigation for the Sample Application
  • Select the right navigation pattern for your application.
  • Organize a hierarchical navigation structure.
  • Add a semantic zoom view to your Hub page.
  • Apply standard Navigation elements to your page designs.
Session 4: LayoutThis module describes how to organize and present the content and features of an application.Lessons
  • Laying Out Content
  • Typography
  • Branding
Lab : Layout
  • Layout the Pages of the Sample Application
  • Typography
  • Branding
  • Apply standard page templates to your application.
  • Layout content within the pages.
  • Apply the Windows 8 type ramp.
  • Consider the branding for your application.
Session 5: UI ElementsThis module describes the guidelines for laying out app bars.Lessons
  • Commanding
  • App Bar Design
Lab : Design for Commanding
  • Laying out Commands for the Home Page
  • Laying out Commands for Other Pages
Layout commands in app bars for your application.Session 6: Day 2 IntroductionThis module reviews the work students did on day 1 and introduces the agenda for day 2.Lessons
  • Workshop Day 2
  • Review some of the key topics from day 1.
  • Learn about the agenda for day 2.
Session 7: Snapping and Scaling
This module describes the scaling and snapping strategies that you can use to
support a wide variety of screen sizes, resolutions, aspect rations and orientations.
Lessons
  • Scaling
  • Snapped View
Lab : Designing for Scaling
  • Sketch Page Scaling Behavior
  • Discuss Portrait View Behavior
  • Learn about different scaling strategies.
  • Apply scaling strategies.
  • Learn strategies for designing snap views.
  • Layout snap views for your application.
Session 8: Charms, Contracts and ExtensionsThis module described how to design Share and Search experiences for an application.Lessons
  • Charms, Contracts and Extensions
  • The Share Contract
  • The Search Contract
  • The File Picker Extension
Lab : Designing for the Share Charm
  • Design a Share Source Experience
  • Design a Share Target Experience
Lab : Designing for the Search Charm
  • Design a Search Experience
Lab : Designing for the File Picker
  • Design a File Picker Experience
  • Design Share and Search experiences for your application.
  • Design File Picker experiences for your application.
Session 9: Tiles and NotificationsThis module describes how to design default and secondary tiles for an application.Lessons
  • Tiles
  • Notifications
Lab : Designing Application Tiles
  • Design the Sample Application Default Tile
  • Design the Sample Application Secondary Tiles
Lab : Designing Notifications
  • Design Notifications for the Sample Application
  • Design a default tile and secondary tiles for Food with Friends.
  • Design notifications for Food with Friends.
Session 10: Wrap-UpThis module provides a recap of the topics covered in the workshop.Lessons
  • Principles, Processes and Guidelines
Recap the topics covered in this workshop
  • Learn the importance of treating each application uniquely
  • Recap the underlying principles of Windows 8 design
  • Compare real world design considerations with the experiences of this workshop
Additional Reading
To help you prepare for this course, please review the following resources:
Before attending this workshop, students:
  • Must have viewed the Windows 8 UX Design Jump Start materials.
  • Must have familiarity with the Windows 8 user interface.
  • Must have familiarity with Windows Store applications and their user interface conventions.
  • Should have experience with the principles and techniques of user experience and user interface design.
Looking for training resources, events and advice from peers? Join the Microsoft Training and Certification Community. Preparing for an exam now? Find your Microsoft Certification Study Group. Talk to us on these social networks:

Find a Microsoft Learning Partner near you

Find Training Near You

Location:

Eg: Seattle, WA or Paris, France