The Nine Too-Often-Neglected Principles of e-Learning Design
Design is Content, too
66
Transcript of Design is Content, too
About me?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.
About you?About you?
Designer?
Developer?
Content contributor or editor?
Manager?
Marketing?
What is the purpose of your What is the purpose of your site’s content?site’s content?
Communication
Hi.
Design is about Design is about communication as well.communication as well.
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 Good design anticipates and answers anticipates and answers
users’ questions.users’ questions.
The user may not even realize that they’re asking these questions at all.
Unified Behavior ModelUnified Behavior Model
These are learned behaviors from the global web that users will try to reapply in similar situations.
Don’t reinvent the wheel.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
What should I do next?
Color is the single Color is the single most powerful design most powerful design
tool available.tool available.
It can communicate mood, emotion, emphasis, unity, movement, and rhythm. Colors carry physiological,
cultural, personal, emotional, and expressive implications.
RedRed
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
YellowYellow
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
BlueBlue
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
GreenGreen
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 Good design might never be noticed.never be noticed.
Bad design is hard to miss.
An interface that confuses a An interface that confuses a user can make them feel user can make them feel stupid and in the wrong. stupid and in the wrong.
Users don’t come back to sites that they don’t understand.
A site should be A site should be like a good friend.like a good friend.
Would you let a friend continue to make mistakes, or would you try to help them through their task?
Design as a Design as a scientific process.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
Interaction Design toolsInteraction Design tools
Creative brief
Wireframes
User testing and focus groups
Personas
Best practices
Style guides
Creative briefCreative brief
Interaction Design toolsInteraction Design tools
Creative brief
Wireframes
User testing and focus groups
Personas
Best practices
Style guides
WireframesWireframes
WireframesWireframes
WireframesWireframes
WireframesWireframes
Interaction Design toolsInteraction Design tools
Creative brief
Wireframes
User testing and focus groups
Personas
Best practices
Style guides
PersonasPersonas
Interaction Design toolsInteraction Design tools
Creative brief
Wireframes
User testing and focus groups
Personas
Best practices
Style guides
Measureable resultsMeasureable results
Start with goals and objectives
Research the users
Define constraints
Create a solution
Test the solution
Refine the solution
CareerBuilder.comCareerBuilder.com
Search results filtering
Goals and objectivesGoals and objectives
Increase the use of filtering tools on search results pages.
Research usersResearch 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”
Establish constraintsEstablish constraints
Ad space needed to remain unaffected
Page width had to fit within 750px
Design a solutionDesign 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
Test the solution 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
Refine the solutionRefine the solution
The designs were slightly updated to expose the basic filtering tools by default
Results?Results?
Within the first week of launching the updated designs, the use of the filtering tools doubled
So…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.
