Frank La Vigne Applied Information Sciences Microsoft MVP: Tablet PC www.FranksWorld.com [email_address]

15 years of professional experience Started career writing Microsoft Visual Basic 3 applications Microsoft MVP: Tablet PC User Group & Code Camp speaker CoDE Magazine Author President Emeritus of Richmond.NET User Group Lead Designer @ Applied Information Sciences Blog: http://www.franksworld.com Corporate: http://www.appliedis.com

15 years of professional experience

Started career writing Microsoft Visual Basic 3 applications

Microsoft MVP: Tablet PC

User Group & Code Camp speaker

CoDE Magazine Author

President Emeritus of Richmond.NET User Group

Lead Designer @ Applied Information Sciences

Blog: http://www.franksworld.com

Corporate: http://www.appliedis.com

“ 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

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

But how?

But how?

Look at the application through a user’s eyes: Are the text boxes lined up? Neatness counts you know. 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 you know.

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”

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?

Yogi Berra What good is data if decision makers can’t understand its meaning?

Yogi Berra

What good is data if decision makers can’t understand its meaning? 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 Inspire emotions Can make us hungry, nervous or calm

Colors

Draw our attention

Excite the mind

Have significance and meaning

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

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]