Interface Design Concepts and Planning: 532 lecture 2

876 views
783 views

Published on

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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
488
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interface Design Concepts and Planning: 532 lecture 2

  1. 1. Web Design: Lecture 2Design as Problem Solving & Core Design Principles Don Stanley 3Rhino Media | UW-Madison www.3rhinomedia.com don@3rhinomedia.com 608 561 7097 DON STANLEY | @3rhinomedia | Spring 2013
  2. 2. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte Problem Solving/Sense Making DESIGN = Communication DON STANLEY | @3rhinomedia | Spring 2013
  3. 3. Designs You Find Effective Playing Sherlock Holmes DON STANLEY | @3rhinomedia | Spring 2013
  4. 4. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte DON STANLEY | @3rhinomedia | Spring 2013
  5. 5. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte Problem Solving/Sense Making DESIGN = Communication DON STANLEY | @3rhinomedia | Spring 2013
  6. 6. 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
  7. 7. Interfaces Impact ExperienceInterface design refers to what we see and interactwith. What we see has a huge influence on ourexperience (Don Norman, Ph.D.)User Experience Our experience determines if wewill interact with a product or tool. And we havechoices.Consider these two text blocks … DON STANLEY | @3rhinomedia | Spring 2013
  8. 8. Interface Design, UX, How We UseInterface design refers to what we see. What we see has ahuge influence on our experience (Don Norman, Ph.D.)User Experience: Our experience determines if we willinteract with a product or tool. And we have choices
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Reality
  13. 13. Design is a Planned ProcessWeb communication involves creating an organized plan to improve asite to better serve customers and drive desired business outcomes.” - Leigh Duncan4 Phase Plan, the 4Ds: 1. Discovery 2. Design & Dictate 3. Develop 4. Deploy and Determine DON STANLEY | @3rhinomedia | Fall 2012
  14. 14. 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 …
  15. 15. What NOT to do!
  16. 16. 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?
  17. 17. 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?
  18. 18. 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?
  19. 19. 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.)
  20. 20. 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?
  21. 21. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size,shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  22. 22. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  23. 23. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  24. 24. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  25. 25. Design CRAP: RepetitionREPETITION - repeating the use of various elements such as color,size, layout, typefaces, image styles to convey meaning. Howdoes this apply to navigation? Headers? Multiple pages?
  26. 26. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  27. 27. Design CRAP: AlignmentALIGNMENT - Alignment is another way of creating associationsbetween visual elements, which help users quickly understandthe relationships of objects on a page.
  28. 28. Design CRAP: ContrastClutter and confusion are failures of design, not attributes ofinformation” -- Ed TufteCONTRAST - Making key elements stand out with color, size, shape,It guides the users eye, swiftly and effortlesslyIt differentiates elementsIt brings out dominant elementsIt mutes lesser elementsIt creates dynamism Think google.com
  29. 29. Design CRAP: Contrast
  30. 30. Design CRAP: ProximityPROXIMITY - Elements that are related should be visuallyconnected. Likewise, elements that are not related should bevisually separated.Use whitespace, colors, backgrounds, etc. Let’s look at an example of the principles in action.
  31. 31. Design CRAP: ProximityPROXIMITY - Elements that are related should be visuallyconnected. Likewise, elements that are not related should be visuallyseparated.Use whitespace, colors, backgrounds, etc.
  32. 32. About copyOptimizr analyzes your web page or entire website and then transformsconvoluted table structures and tagless content into lightweight, CSSpositioned div layouts and semantic markup. It’s 2.0-licious!One-click Optimizing! Optimizr’s functions are automatic and require noknowledge 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 >>
  33. 33. HomeworkBegin thinking like a problem solver. What are the problemswith the Prevention Speaks Interface? Consider the questionswe discussed today.Begin sketching out your ideas for the redesignNext Class, we will talk about Grid Design, the Design Processand Anatomy of Good Design.If you’d like, read the “blink test” article by HubSpot

×