Topics Covered

DAY 1Introduction to Modern Design

Microsoft Design Principles

Design Process

Windows Building Blocks

Build 2014

DAY 2Storytelling and the Human Fom

Natural User Interfaces

Mini-improv workshop: Storytelling

Storyboarding, Scenarios, and Personas

Technologies & Trends

DAY 3Psychology of Design

Basic principles

Gamification

Motivational Design

DAY 4Visual Design for Modern UI

Basics

Grids & Tiles

Typography

Color & Content

This is not a computer science class.

This class is not just for those that want to be designers

This is not an intro-level user experience class

Degree in Computer Science and Human-Computer Interaction from Carnegie Mellon University

Over 10 years of experience spanning multiple industries: web, automotive, cloud and server technology, education, theme parks, and video games.

6.5 years at MicrosoftMy current project: designing the future of the connected experience for cars; helping to define the future of Microsoft’s Internet of Things

In my free time: I’m a professional improv actress/teacher, singer, and video gamer.

- Touch & Haptic Feedback

- Voice control / Speech

- Gesture (movement through space)

lighter cognitive burden

new options

traditional input methods don’t work

touch

Touch target size

Touch target size:TWIST!

Visual feedback

Living with the hand

Touch Gestures: An Example

Trends on the horizon

Defining “grammar-based

interaction”

Defining “natural language”

Speech listening models

Lessons learned from life as a

speech designer

Gesture input models

State of the art

Hover and proximity detection

Gesture design pitfalls

Poorly designed gestures can cause physical harm to users!

Planning at Microsoft

We use “scenario focused design” as a process to help us ensure we’re building the right products.

By learning a few of our methods, your planning will improve as well.

Personas don’t work when they’re not well-communicated.

What makes a good persona?

Persona traps

Personas: Practice and Theory

Personas, Participatory Design, and Product Development: An Infrastructure for Engagement

How can we connect these learnings to our design process? How do we ground ourselves in our customers’ reality instead of our own?

Scenarios and storyboards.

iHub already teaches great courses on interviewing, personas, research and contextual inquiry. We won’t dwell on that process here.

story

happy ending

S

P

I

C

I

E

R

Download attachments

Edit content

Share content with others

Send attachments

Forward meeting invites

Check meeting details

View content

Log into a VPN

Change corporate settings

Comply with IT policies

Stay secure

Communicate with others

Feel satisfied that work is

complete

Download attachments

Edit content

Share content with others

Send attachments

Forward meeting invites

Check meeting details

View content

Log into a VPN

Change corporate settings

Comply with IT policies

Stay secure

Communicate with others

Feel satisfied that work is

complete

piece of email

unlocks clicks new mail icon note

clicks on “reply”

beeps. new email

Excel attachment

Jane, a sales exec, has only 30 minutes before her flight to Chicago

leaves. While waiting, Jane notices an important message from her colleague,

Sue. Their partner has asked to see 3rd quarter projections as well as 2nd

quarter. Jane anxiously responds to her colleague to let her know that she got

the message but doesn’t have the 3rd quarter projections – can Sue send it to

her immediately, before her flight leaves?

<magic happens>

A couple of minutes later, Jane gets the 3rd quarter projections and has just

enough time to skim through it before boarding her flight, where she will read

it thoroughly. She is relieved and confident that she will be fully prepared for

her meeting.

Opportunity or problem

<Magic happens>

how

Happy ending

Intentional product scoping constraint

B) “Jane uses the dropdown to pick the right doc…”

Implementation detail

User context supported by research

Storyboarding

Dan Roam:The Back of the Napkin

Why storyboards?

Make our users’ context tangible & understandable

Get stakeholders emotionally connected

Convey the human results we’re looking for

Define success independent of a solution

It’s 5PM and Allison is on the

highways heading home from work.

Allison pulls into her garage after a

long day of work.Allison turns off the engine and is

ready to head inside.

FRAME 1 FRAME 2 FRAME 3

Allison’s car chimes and a message

appears as it is read to her. The

system requires a major update that

will improve performance and

security. Allison particularly notices

that the car won’t be usable during

the update.

The car asks if she’d like the

update scheduled for late tonight,

but Allison is worried that her sick

son might get worse. Allison

instead chooses a time that’ll work

better for her.

Allison heads inside and checks in

on her son. She doesn’t give her car

any more thought that night.

FRAME 4 FRAME 5 FRAME 6

On Thursday night, as Allison is

turning off her car, she gets a

reminder that SPA will be applying

the update that night at 2AM.

Allison’s son is feeling better, so that

time doesn’t raise any red flags.

On Friday morning when Allison

wakes up, she has a notification

letting her know that the update was

successful. She’s glad she doesn’t

have to leave early to check on the

car and the update.

FRAME 7 FRAME 8

Do not include UI.

some

From Scott McCloud’s “Understanding Comics”

Wong-Baker FACES Pain Rating Scale

Sketching for design

Use a pen if you can

Optional additional tools

Capture the sketches: scanner or digital photo

Take a pen and piece of paper

Experiment with lengths, directions, stroke speeds

Take a pen and piece of paper

Experiment with box sizes

Draw at least 20 boxes

Take a pen and piece of paper

Experiment with circle sizes.

Draw at least 20 circles

Play with ovals too

Take a pen and piece of paper

Experiment with widths, lengths, and tail styles

Straight arrows and curved arrows

Take a pen and piece of paper

Experiment with widths, lengths, and tail styles

Straight arrows and curved arrows

Windows 8 natively supports 3D printing

3D apps are generally expensive – market opportunity for making 3D modeling more accessible

“Maker” culture empowers a new generation of enthusiasts, but how can these makers be supported?

3D Printing