Richmond Code Camp October 4, 2008 Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]

Microsoft MVP: Tablet PC 15 years of professional experience Started career writing Microsoft Visual Basic 3 applications Author, User Group & Code Camp speaker Long Time Dev-igner INETA Membership Mentor for DC, MD and DE Lead Designer @ Applied Information Sciences Blog: http://www.franksworld.com Corporate: http://www.appliedis.com // TODO: Find a better picture of myself

Microsoft MVP: Tablet PC

15 years of professional experience

Started career writing Microsoft Visual Basic 3 applications

Author, User Group & Code Camp speaker

Long Time Dev-igner

INETA Membership Mentor for DC, MD and DE

Lead Designer @ Applied Information Sciences

Blog: http://www.franksworld.com

Corporate: http://www.appliedis.com

// TODO: Find a better picture of myself

“ I’m not an artist.” No one is asking you to be one. “ UI is just fluff anyways.” Have you ever been frustrated by one? “ Good UI is subjective.” Not Really. It is measurable. “ I don’t own any turtlenecks.” That’s OK.

“ I’m not an artist.” No one is asking you to be one.

“ UI is just fluff anyways.” Have you ever been frustrated by one?

“ Good UI is subjective.” Not Really. It is measurable.

“ I don’t own any turtlenecks.” That’s OK.

UI = User Interface UX = User Experience

UI = User Interface

UX = User Experience

Graphic design is a process Just like designing software: There are rules, patterns and conventions There are even acronyms User Interface (UI) User Experience (UX) What’s the difference between UI and UX? It’s easy actually. * Or how I stopped worrying and embraced my creative side.

Graphic design is a process

Just like designing software: There are rules, patterns and conventions

There are even acronyms

User Interface (UI)

User Experience (UX)

What’s the difference between UI and UX?

It’s easy actually.

User Interface is What the user sees Controls Layout User Experience is What the user feels Steps in a process Wait times Shifts in attention & eye focus

User Interface is

What the user sees

Controls

Layout

User Experience is

What the user feels

Steps in a process

Wait times

Shifts in attention & eye focus

Yogi Berra Examples of good (and bad) design are all around us.

Yogi Berra

Which site is likely to get repeat visitors? Which site is more likely to generate revenue? Does UX design matter?

Which site is likely to get repeat visitors?

Which site is more likely to generate revenue?

Does UX design matter?

Q: Why are screens like this still common sights at retail stores, hospitals, etc in 2008? A: It’s actually usable. Keystroke navigation Consistent High contrast

Q: Why are screens like this still common sights at retail stores, hospitals, etc in 2008?

A: It’s actually usable.

Keystroke navigation

Consistent

High contrast

We have lots of tools: Powerful CPUs Graphics cards Slick IDEs What are we designing for really? What is our Target OS?

We have lots of tools:

Powerful CPUs

Graphics cards

Slick IDEs

What are we designing for really?

What is our Target OS?

The Human Mind aka Homo Sapien 1.0 Focus Focal Length Attention Span Visual Perception http://shrinkster.com/11dx Bill Hill, Microsoft Research

The Human Mind aka Homo Sapien 1.0

Focus

Focal Length

Attention Span

Visual Perception

Look at the application through a user’s eyes: Are the text boxes lined up? Neatness counts. A lot of folks rarely use the mouse. Do the tab orders line up? Do keyboard shortcuts make sense? Are frequent tasks easy? Count the number of clicks/keystrokes/context shifts it takes to perform a task.

Look at the application through a user’s eyes:

Are the text boxes lined up?

Neatness counts.

A lot of folks rarely use the mouse.

Do the tab orders line up?

Do keyboard shortcuts make sense?

Are frequent tasks easy?

Count the number of clicks/keystrokes/context shifts it takes to perform a task.

Look at the application through a user’s eyes: Is a given screen’s purpose obvious? To you? To everyone else? To your target customers? Placement of information In Western Cultures, users read from Top Left to Bottom Right “ Above the fold”

Look at the application through a user’s eyes:

Is a given screen’s purpose obvious?

To you?

To everyone else?

To your target customers?

Placement of information

In Western Cultures, users read from Top Left to Bottom Right

“ Above the fold”

This chart conveys important information. But what?

This chart conveys important information.

Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative (1992)

Look at the application through a user’s eyes: Can users readily identify important data? Colors and Contrast Font size Can users see text clearly? If they have to squint or hunt, then the answer is no.

Look at the application through a user’s eyes:

Can users readily identify important data?

Colors and Contrast

Font size

Can users see text clearly?

If they have to squint or hunt, then the answer is no.

Relevance and frequency are immediately obvious

Relevance and frequency are immediately obvious

Colors Draw our attention Excite the mind Have significance and meaning That vary from culture to culture Inspire emotions Can make us hungry, nervous or calm

Colors

Draw our attention

Excite the mind

Have significance and meaning

That vary from culture to culture

Inspire emotions

Can make us hungry, nervous or calm

Red Red is also considered an intense, or even angry, color that creates feelings of excitement or intensity Yellow Yellow can also create feelings of frustration & anger Yellow can also increase the metabolism. Green symbolizes nature and the natural world. represents tranquility, good luck, health, and jealousy.

Red

Red is also considered an intense, or even angry, color that creates feelings of excitement or intensity

Yellow

Yellow can also create feelings of frustration & anger

Yellow can also increase the metabolism.

Green

symbolizes nature and the natural world.

represents tranquility, good luck, health, and jealousy.

Yogi Berra the predominance of the colors red & yellow in many restaurants is there only to make customers hungry

Yogi Berra

Yogi Berra Blue conveys importance and confidence without being somber or sinister, hence the blue power suit of the corporate world

Yogi Berra

Some Simple Tips for Happy User Experiences

Some Simple Tips for Happy User Experiences

The Tools to Build a Better User Experience

The Tools to Build a Better User Experience

Expression is a suite of products for building UX’s --Much like Office is a suite of business tools Demos Expression Design Expression Blend

Expression is a suite of products for building UX’s

--Much like Office is a suite of business tools

Demos

Expression Design

Expression Blend

Frank La Vigne www.FranksWorld.com [email_address]