Interface Design Concepts and Planning: 532 lecture 2

  • 682 views
Uploaded 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 …

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.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
682
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. Designs You Find Effective Playing Sherlock Holmes DON STANLEY | @3rhinomedia | Spring 2013
  • 4. What is Design? Clutter and confusion are failures of design, not attributes of information” -- Prof. Ed Tufte DON STANLEY | @3rhinomedia | Spring 2013
  • 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. 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. 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. 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. 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. 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. 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. Reality
  • 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. 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. What NOT to do!
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Design CRAP: AlignmentALIGNMENT - Alignment is another way of creating associationsbetween visual elements, which help users quickly understandthe relationships of objects on a page.
  • 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. Design CRAP: Contrast
  • 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. 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. 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. 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