Design is Content, too


Published on

Published in: Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Design is Content, too

    1. 2. About me? <ul><li>Director of Interaction Design, Duo Consulting </li></ul><ul><li>Education in Advertising and Fine Arts </li></ul><ul><li>13 years of experience in design, development and project management for the web </li></ul><ul><li>Work featured in Communication Arts, Graphic Design:USA, Graphis, and’s Best of the Web. </li></ul>
    2. 3. About you? <ul><li>Designer? </li></ul><ul><li>Developer? </li></ul><ul><li>Content contributor or editor? </li></ul><ul><li>Manager? </li></ul><ul><li>Marketing? </li></ul>
    3. 4. What is the purpose of your site’s content? <ul><li>Communication </li></ul>
    4. 5. Hi.
    5. 6. Design is about communication as well. <ul><li>Often we’re trying to answer some very important unspoken questions. </li></ul>
    6. 7. 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?
    7. 8. Good design anticipates and answers users’ questions. <ul><li>The user may not even realize that they’re asking these questions at all. </li></ul>
    8. 10. Unified Behavior Model <ul><li>These are learned behaviors from the global web that users will try to reapply in similar situations. </li></ul>
    9. 11. Don’t reinvent the wheel. <ul><li>“ 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 </li></ul>
    10. 14. What should I do next?
    11. 22. Color is the single most powerful design tool available. <ul><li>It can communicate mood, emotion, emphasis, unity, movement, and rhythm. Colors carry physiological, cultural, personal, emotional, and expressive implications. </li></ul>
    12. 23. Red <ul><li>Increases pulse rate and breathing and causes blood pressure to rise. </li></ul><ul><li>The food color. It makes you hungry by increasing your body's metabolism. </li></ul><ul><li>Hot, passionate, urgent, danger, blood, devil, angry, enraged, amorous, outspoken, optimistic </li></ul>
    13. 24. Yellow <ul><li>The color of the sunny disposition, the idealist. Intellectuals love yellow. </li></ul><ul><li>As you get older you tend to dislike yellow because it can make you feel anxious or angry. </li></ul><ul><li>Yellow enhances concentration and speeds metabolism. </li></ul><ul><li>Warm, cowardice, caution, fearful, bright </li></ul>
    14. 25. Blue <ul><li>The number one color choice of the introspective and educated. </li></ul><ul><li>Pumps people up. Proven to increase energy. </li></ul><ul><li>Responsibility, trustworthiness, compassion, those are the attributes of royal blue. </li></ul><ul><li>Honest, integrity, righteous, puritanical, moral, severe, prudish, cool, melancholy, sad, glum, downcast, gloomy, unhappy, quality, first place </li></ul>
    15. 26. Green <ul><li>A good color for people in transition. Green is Mother Nature's color, lover's of green may be fickle. </li></ul><ul><li>Universal symbolism: Nature, freshness </li></ul><ul><li>Contemporary symbolism: Ecologically beneficial </li></ul><ul><li>Nature, health, regeneration, contentment, harmony, cheerful, lively, friendly, fresh, sickly, unripe, immature, simple, unsophisticated, gullible, new </li></ul>
    16. 31. Good design might never be noticed. <ul><li>Bad design is hard to miss. </li></ul>
    17. 39. An interface that confuses a user can make them feel stupid and in the wrong. <ul><li>Users don’t come back to sites that they don’t understand. </li></ul>
    18. 40. A site should be like a good friend. <ul><li>Would you let a friend continue to make mistakes, or would you try to help them through their task? </li></ul>
    19. 41. Design as a scientific process. <ul><li>“ 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.” </li></ul><ul><li>Wikipedia, </li></ul>
    20. 42. Interaction Design tools <ul><li>Creative brief </li></ul><ul><li>Wireframes </li></ul><ul><li>User testing and focus groups </li></ul><ul><li>Personas </li></ul><ul><li>Best practices </li></ul><ul><li>Style guides </li></ul>
    21. 43. Creative brief
    22. 44. Interaction Design tools <ul><li>Creative brief </li></ul><ul><li>Wireframes </li></ul><ul><li>User testing and focus groups </li></ul><ul><li>Personas </li></ul><ul><li>Best practices </li></ul><ul><li>Style guides </li></ul>
    23. 45. Wireframes
    24. 46. Wireframes
    25. 47. Wireframes
    26. 48. Wireframes
    27. 49. Interaction Design tools <ul><li>Creative brief </li></ul><ul><li>Wireframes </li></ul><ul><li>User testing and focus groups </li></ul><ul><li>Personas </li></ul><ul><li>Best practices </li></ul><ul><li>Style guides </li></ul>
    28. 50. Personas
    29. 51. Interaction Design tools <ul><li>Creative brief </li></ul><ul><li>Wireframes </li></ul><ul><li>User testing and focus groups </li></ul><ul><li>Personas </li></ul><ul><li>Best practices </li></ul><ul><li>Style guides </li></ul>
    30. 52. Measureable results <ul><li>Start with goals and objectives </li></ul><ul><li>Research the users </li></ul><ul><li>Define constraints </li></ul><ul><li>Create a solution </li></ul><ul><li>Test the solution </li></ul><ul><li>Refine the solution </li></ul>
    31. 53. <ul><li>Search results filtering </li></ul>
    32. 54. Goals and objectives <ul><li>Increase the use of filtering tools on search results pages. </li></ul>
    33. 56. Research users <ul><li>Live user observation during real job search situations revealed that users frequently never saw the filtering tools </li></ul><ul><li>When they did find the tools, they were impressed with the ways they could refine their results </li></ul><ul><li>Most users seemed to overlook the filtering tools due to “banner blindness” </li></ul>
    34. 57. Establish constraints <ul><li>Ad space needed to remain unaffected </li></ul><ul><li>Page width had to fit within 750px </li></ul>
    35. 58. Design a solution <ul><li>Filtering tools were moved to the top of the page in an expandable interface to place them in the flow of information </li></ul><ul><li>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 </li></ul>
    36. 61. Test the solution <ul><li>An HTML only prototype was prepared and presented to real site users </li></ul><ul><li>While users recognized and responded to exposed filters, few expanded the basic set of filtering tools </li></ul><ul><li>When they were exposed, the filtering tools were frequently used </li></ul>
    37. 62. Refine the solution <ul><li>The designs were slightly updated to expose the basic filtering tools by default </li></ul>
    38. 64. Results? <ul><li>Within the first week of launching the updated designs, the use of the filtering tools doubled </li></ul>
    39. 65. So… <ul><li>Your design should engage in a conversation with your users. </li></ul><ul><li>You have to understand the user and their needs and speak the same language. </li></ul><ul><li>You need to place yourself in their place and try to help them through your site by anticipating and answering their questions. </li></ul>
    40. 66. Questions? <ul><li>Kenneth Walters </li></ul><ul><li>[email_address] </li></ul><ul><li>Duo Consulting </li></ul>