40043 Windows 8 UX Design Workshop

Course Objectives

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

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

Course Outline

Session 1: Introduction
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
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
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: Layout
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 Elements
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 Introduction
Workshop Day 2
Review some of the key topics from day 1.
Learn about the agenda for day 2.
Session 7: Snapping and Scaling
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 Extensions
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 Notifications
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-Up
Principles, Processes and Guidelines