About me? Director of Interaction Design, Duo Consulting Education in Advertising and Fine Arts 13 years of experience in design, development and project management for the web Work featured in Communication Arts, Graphic Design:USA, Graphis, and Forbes.com’s Best of the Web.

Director of Interaction Design, Duo Consulting

Education in Advertising and Fine Arts

13 years of experience in design, development and project management for the web

Work featured in Communication Arts, Graphic Design:USA, Graphis, and Forbes.com’s Best of the Web.

About you? Designer? Developer? Content contributor or editor? Manager? Marketing?

Designer?

Developer?

Content contributor or editor?

Manager?

Marketing?

What is the purpose of your site’s content? Communication

Communication

Hi.

Design is about communication as well. Often we’re trying to answer some very important unspoken questions.

Often we’re trying to answer some very important unspoken questions.

Where am I? What should I do next? Where can I find my information? What are my options? Did I make the right choice? Can I buy this? Who is this company? Can I trust them? What are their values?

Good design anticipates and answers users’ questions. The user may not even realize that they’re asking these questions at all.

The user may not even realize that they’re asking these questions at all.

Unified Behavior Model These are learned behaviors from the global web that users will try to reapply in similar situations.

These are learned behaviors from the global web that users will try to reapply in similar situations.

Don’t reinvent the wheel. “ If 80% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.” Jacob Neilson

“ If 80% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.” Jacob Neilson

What should I do next?

Color is the single most powerful design tool available. It can communicate mood, emotion, emphasis, unity, movement, and rhythm. Colors carry physiological, cultural, personal, emotional, and expressive implications.

It can communicate mood, emotion, emphasis, unity, movement, and rhythm. Colors carry physiological, cultural, personal, emotional, and expressive implications.

Red Increases pulse rate and breathing and causes blood pressure to rise. The food color. It makes you hungry by increasing your body's metabolism. Hot, passionate, urgent, danger, blood, devil, angry, enraged, amorous, outspoken, optimistic

Increases pulse rate and breathing and causes blood pressure to rise.

The food color. It makes you hungry by increasing your body's metabolism.

Hot, passionate, urgent, danger, blood, devil, angry, enraged, amorous, outspoken, optimistic

Yellow The color of the sunny disposition, the idealist. Intellectuals love yellow. As you get older you tend to dislike yellow because it can make you feel anxious or angry. Yellow enhances concentration and speeds metabolism. Warm, cowardice, caution, fearful, bright

The color of the sunny disposition, the idealist. Intellectuals love yellow.

As you get older you tend to dislike yellow because it can make you feel anxious or angry.

Yellow enhances concentration and speeds metabolism.

Warm, cowardice, caution, fearful, bright

Blue The number one color choice of the introspective and educated. Pumps people up. Proven to increase energy. Responsibility, trustworthiness, compassion, those are the attributes of royal blue. Honest, integrity, righteous, puritanical, moral, severe, prudish, cool, melancholy, sad, glum, downcast, gloomy, unhappy, quality, first place

The number one color choice of the introspective and educated.

Pumps people up. Proven to increase energy.

Responsibility, trustworthiness, compassion, those are the attributes of royal blue.

Honest, integrity, righteous, puritanical, moral, severe, prudish, cool, melancholy, sad, glum, downcast, gloomy, unhappy, quality, first place

Green A good color for people in transition. Green is Mother Nature's color, lover's of green may be fickle. Universal symbolism: Nature, freshness Contemporary symbolism: Ecologically beneficial Nature, health, regeneration, contentment, harmony, cheerful, lively, friendly, fresh, sickly, unripe, immature, simple, unsophisticated, gullible, new

A good color for people in transition. Green is Mother Nature's color, lover's of green may be fickle.

Universal symbolism: Nature, freshness

Contemporary symbolism: Ecologically beneficial

Nature, health, regeneration, contentment, harmony, cheerful, lively, friendly, fresh, sickly, unripe, immature, simple, unsophisticated, gullible, new

Good design might never be noticed. Bad design is hard to miss.

Bad design is hard to miss.

An interface that confuses a user can make them feel stupid and in the wrong. Users don’t come back to sites that they don’t understand.

Users don’t come back to sites that they don’t understand.

A site should be like a good friend. Would you let a friend continue to make mistakes, or would you try to help them through their task?

Would you let a friend continue to make mistakes, or would you try to help them through their task?

Design as a scientific process. “ Designing requires a designer to consider the aesthetic, functional, and many other aspects of an object or a process, which usually requires considerable research, thought, modeling, interactive adjustment, and re-design.” Wikipedia, http://en.wikipedia.org/wiki/Design

“ Designing requires a designer to consider the aesthetic, functional, and many other aspects of an object or a process, which usually requires considerable research, thought, modeling, interactive adjustment, and re-design.”

Wikipedia, http://en.wikipedia.org/wiki/Design

Interaction Design tools Creative brief Wireframes User testing and focus groups Personas Best practices Style guides

Creative brief

Wireframes

User testing and focus groups

Personas

Best practices

Style guides

Creative brief

Interaction Design tools Creative brief Wireframes User testing and focus groups Personas Best practices Style guides

Creative brief

Wireframes

User testing and focus groups

Personas

Best practices

Style guides

Wireframes

Wireframes

Wireframes

Wireframes

Interaction Design tools Creative brief Wireframes User testing and focus groups Personas Best practices Style guides

Creative brief

Wireframes

User testing and focus groups

Personas

Best practices

Style guides

Personas

Interaction Design tools Creative brief Wireframes User testing and focus groups Personas Best practices Style guides

Creative brief

Wireframes

User testing and focus groups

Personas

Best practices

Style guides

Measureable results Start with goals and objectives Research the users Define constraints Create a solution Test the solution Refine the solution

Start with goals and objectives

Research the users

Define constraints

Create a solution

Test the solution

Refine the solution

CareerBuilder.com Search results filtering

Search results filtering

Goals and objectives Increase the use of filtering tools on search results pages.

Increase the use of filtering tools on search results pages.

Research users Live user observation during real job search situations revealed that users frequently never saw the filtering tools When they did find the tools, they were impressed with the ways they could refine their results Most users seemed to overlook the filtering tools due to “banner blindness”

Live user observation during real job search situations revealed that users frequently never saw the filtering tools

When they did find the tools, they were impressed with the ways they could refine their results

Most users seemed to overlook the filtering tools due to “banner blindness”

Establish constraints Ad space needed to remain unaffected Page width had to fit within 750px

Ad space needed to remain unaffected

Page width had to fit within 750px

Design a solution Filtering tools were moved to the top of the page in an expandable interface to place them in the flow of information The basic set of filtering tools was narrowed down to include only the most frequently used and other filtering options were moved off to another tab

Filtering tools were moved to the top of the page in an expandable interface to place them in the flow of information

The basic set of filtering tools was narrowed down to include only the most frequently used and other filtering options were moved off to another tab

Test the solution An HTML only prototype was prepared and presented to real site users While users recognized and responded to exposed filters, few expanded the basic set of filtering tools When they were exposed, the filtering tools were frequently used

An HTML only prototype was prepared and presented to real site users

While users recognized and responded to exposed filters, few expanded the basic set of filtering tools

When they were exposed, the filtering tools were frequently used

Refine the solution The designs were slightly updated to expose the basic filtering tools by default

The designs were slightly updated to expose the basic filtering tools by default

Results? Within the first week of launching the updated designs, the use of the filtering tools doubled

Within the first week of launching the updated designs, the use of the filtering tools doubled

So… Your design should engage in a conversation with your users. You have to understand the user and their needs and speak the same language. You need to place yourself in their place and try to help them through your site by anticipating and answering their questions.

Your design should engage in a conversation with your users.

You have to understand the user and their needs and speak the same language.

You need to place yourself in their place and try to help them through your site by anticipating and answering their questions.

Questions? Kenneth Walters [email_address] Duo Consulting

Kenneth Walters

[email_address]

Duo Consulting