View
698
Download
2
Category
Tags:
Preview:
DESCRIPTION
We talk about the importance to analyzing and studying interface design for a research prospective. Great/Effective Design starts with research. Think like a detective and anthropologist of your audiences and you plan your site. Once you are done with the planning, use Design CRAP to create interfaces that communicate and guide your viewers.
Citation preview
Web Design: Lecture 2
Design as Problem Solving & Core Design Principles
Don Stanley 3Rhino Media | UW-Madison www.3rhinomedia.comdon@3rhinomedia.com608 561 7097
DON STANLEY | @3rhinomedia | Spring 2013
What is Design?
Problem Solving/Sense Making
DESIGN = Communication
Clutter and confusion are failures of design,not attributes of information” -- Prof. Ed Tufte
DON STANLEY | @3rhinomedia | Spring 2013
Designs You Find EffectivePlaying Sherlock Holmes
DON STANLEY | @3rhinomedia | Spring 2013
What is Design?Clutter and confusion are failures of design,not attributes of information” -- Prof. Ed Tufte
DON STANLEY | @3rhinomedia | Spring 2013
What is Design?
Problem Solving/Sense Making
DESIGN = Communication
Clutter and confusion are failures of design,not attributes of information” -- Prof. Ed Tufte
DON STANLEY | @3rhinomedia | Spring 2013
Why Study Design?
Vision trumps all other senses when it comes to our brain. Our brain is highly attuned to the sense of vision.
Recognition and recall soar with pictures. According to John Medina, Ph.D., if we hear a piece of information, three days later we will remember 10% of it.
Add a picture and you will remember 65%!
DON STANLEY | @3rhinomedia | Spring 2013
Interfaces Impact ExperienceInterface design refers to what we see and interact with. What we see has a huge influence on our experience (Don Norman, Ph.D.)
User Experience Our experience determines if we will interact with a product or tool. And we have choices.
Consider these two text blocks …
DON STANLEY | @3rhinomedia | Spring 2013
Interface Design, UX, How We Use
Interface design refers to what we see. What we see has a huge influence on our experience (Don Norman, Ph.D.)
User Experience: Our experience determines if we will interact with a product or tool. And we have choices
Thinking Like a HumanUsability Expert Steve Krug says “Don’t Make Me Think”
Fact #1: We don’t read pages, we scan them
DON STANLEY | @3rhinomedia | Spring 2013
Thinking Like a HumanUsability Expert Steve Krug says “Don’t Make Me Think”
Fact #1: We don’t read pages, we scan them
Fact #2: We don’t make optimal choices, we satisfice
DON STANLEY | @3rhinomedia | Spring 2013
Thinking Like a HumanUsability Expert Steve Krug says “Don’t Make Me Think”
Fact #1: We don’t read pages, we scan them
Fact #2: We don’t make optimal choices, we satisfice
Fact #3: We don’t figure out how things work. We muddle through because it works enough.
DON STANLEY | @3rhinomedia | Spring 2013
Reality
Design is a Planned ProcessWeb communication involves creating an organized plan to
improve asite to better serve customers and drive desired business
outcomes.”- Leigh
Duncan
4 Phase Plan, the 4Ds:1. Discovery2. Design & Dictate3. Develop4. Deploy and Determine
DON STANLEY | @3rhinomedia | Fall 2012
Discovery: Most Important D
Pareto’s Principle: 20% of your efforts will produce 80% of your results. What is the 20%?
Why do most organizations fail? Let’s take a look …
What NOT to do!
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections?
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections?
PROBLEM SOLVING: What problem does your audience solve by coming to your site? What do they get?
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections?
PROBLEM SOLVING: What problem does your audience solve by coming to your site? What do they get?
ACTIONS: What activities do they need to need to take to achieve their goals? (watch a video, sign up for email, download something, etc.)
Discovery: Questions to Consider
TARGET/TARGET ACTION: What is your target? Why are you creating this site? Sales? Contacts? Build Audience? Thought Leader? Build Brand?
KEY AUDIENCE: Please list your audiences. Who is the most critical audience you need to connect with? Please describe the most important visitors? How often are they online? What do they use the web for? Connections?
PROBLEM SOLVING: What problem does your audience solve by coming to your site? What do they get?
ACTIONS: What activities do they need to need to take to achieve their goals? (watch a video, sign up for email, download something, etc.)
BUILD AUDIENCE: What is the best way to share this with your key audience? How do you promote your site?
Design CRAP: ContrastClutter and confusion are failures of design, not attributes of information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly It differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism
Think google.com
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly It differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism
Think google.com
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly It differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism
Think google.com
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly It differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism
Think google.com
Design CRAP: RepetitionREPETITION - repeating the use of various elements such as color, size, layout, typefaces, image styles to convey meaning. How does this apply to navigation? Headers? Multiple pages?
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly It differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism
Think google.com
Design CRAP: AlignmentALIGNMENT - Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page.
Design CRAP: Contrast
Clutter and confusion are failures of design, not attributes of information” -- Ed Tufte
CONTRAST - Making key elements stand out with color, size, shape,
It guides the users eye, swiftly and effortlessly It differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism
Think google.com
Design CRAP: Contrast
Design CRAP: ProximityPROXIMITY - Elements that are related should be visually connected. Likewise, elements that are not related should be visually separated.Use whitespace, colors, backgrounds, etc.
Let’s look at an example of the principles in action.
Design CRAP: Proximity
PROXIMITY - Elements that are related should be visually connected. Likewise, elements that are not related should be visually separated.Use whitespace, colors, backgrounds, etc.
About copy
Optimizr analyzes your web page or entire website and then transforms convoluted table structures and tagless content into lightweight, CSS positioned div layouts and semantic markup. It’s 2.0-licious!
One-click Optimizing! Optimizr’s functions are automatic and require no knowledge of html or css. Registration copy
Create an account >>
Individual Level For individual users with one static website. Learn more >>
Pro Level For individual users with multiple static websites. Learn more >>
Enterprise Level For users with CMS-driven websites. Learn more >>
Homework
Begin thinking like a problem solver. What are the problems with the Prevention Speaks Interface? Consider the questions we discussed today.
Begin sketching out your ideas for the redesign
Next Class, we will talk about Grid Design, the Design Process and Anatomy of Good Design.
If you’d like, read the “blink test” article by HubSpot
Recommended