Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Without Politics

2,740 views

Published on

Learn 6 tricks you can take home to get participation without politics:
1-KJ Sessions
2-Nav Bar Survivor
3-Design Consequences
4-Mood Boards
5-Posterframes
6-Digital Paper Prototyping

Published in: Design, Business, Technology

Web Design Without Politics

  1. 1. Web Design Without Politics
  2. 2. Goals for Today <ul><li>Make the last hour of Eduweb count. </li></ul><ul><li>Learn tricks for getting the best input from stakeholders. </li></ul><ul><li>Have fun. </li></ul>PHOTO BY ROB
  3. 3. 6 Techniques for Collaboration <ul><li>KJ Sessions </li></ul><ul><li>Nav Bar Survivor </li></ul><ul><li>Posterframes </li></ul><ul><li>Mood Boards </li></ul><ul><li>Design Consequences </li></ul><ul><li>Digital Paper Prototyping </li></ul>
  4. 4. Who should participate? <ul><li>Core team </li></ul><ul><li>Key stakeholders </li></ul><ul><ul><li>especially anyone who has the ability to derail the process </li></ul></ul><ul><li>Representatives of key communities & audiences </li></ul><ul><li>Workgroups of 4-5 </li></ul><ul><ul><li>distribute core team members among these workgroups </li></ul></ul><ul><li>6-7 for KJ sessions </li></ul>
  5. 5. KJ Method <ul><li>Technique for gaining rapid group consensus </li></ul><ul><li>Inventor Jiro Kawakita </li></ul><ul><li>Can be used for strategic planning, problem solving, brainstorming and yes, information architecture </li></ul>
  6. 6. KJ Method <ul><li>Gather 4-6 people for ~1 hour </li></ul><ul><li>Start with focus question </li></ul><ul><li>Put opinions (or data) onto Sticky Notes </li></ul><ul><ul><li>one answer per note </li></ul></ul><ul><ul><li>use a fat-tipped marker </li></ul></ul><ul><li>Put Sticky Notes on the wall </li></ul><ul><li>Group similar items (without talking) </li></ul><ul><li>Discuss & Name the groups </li></ul><ul><li>Vote on priorities </li></ul>
  7. 7. Using KJ for Information Architecture <ul><li>Start by identifying and prioritizing your audiences. </li></ul><ul><li>Find participants who represent your users. </li></ul><ul><li>OR who know their needs well. (less ideal) </li></ul>
  8. 8. KJ: Focus Question for Information Architecture <ul><li>What would someone come to your web site to FIND or DO ? </li></ul><ul><ul><li>FIND – looking for certain information, answering a question </li></ul></ul><ul><ul><li>DO – accomplish some task, use some sort of application </li></ul></ul>
  9. 10. Finding holes
  10. 11. VT FINANCIAL AID KJ EXAMPLE
  11. 12. Let’s Try It
  12. 13. Choose a site <ul><li>Your athletics site </li></ul><ul><li>Your continuing education site </li></ul>
  13. 14. Doing a KJ <ul><li>Make a list of your key audiences (together) </li></ul><ul><li>Answer individually - What would someone come to your web site to FIND or DO ? </li></ul><ul><ul><li>FIND – looking for certain information, answering a question </li></ul></ul><ul><ul><li>DO – accomplish some task, use some sort of application </li></ul></ul>
  14. 15. Nav Bar Survivor <ul><li>Imagine you’ve already clicked deeper into the site from the home page. </li></ul><ul><li>Nominate links that should always be available no matter where you are on the site. Put them on stickies on the wall. </li></ul><ul><li>Consolidate any that are closely related. </li></ul><ul><li>Everyone votes on their top 5. </li></ul><ul><li>Top 7 are your main navigation, plus “Home” </li></ul><ul><li>Others can be second-tier or footer navigation. </li></ul>
  15. 16. NAV BAR SURVIVOR
  16. 17. Posterframes <ul><li>Place posters on the walls representing your main landing pages. </li></ul><ul><li>Work from KJ session or other data to place essential content and navigation onto each poster. </li></ul><ul><li>Experiment with different groupings and arrangements. </li></ul>
  17. 18. imperial college london – collaborative wireframing
  18. 19. imperial college london – collaborative wireframing
  19. 22. IMPERIAL COLLEGE HOME PAGE WIREFRAME
  20. 23. IMPERIAL COLLEGE LONDON – FINAL DESIGN
  21. 24. Mood Boards <ul><li>Gather magazines, your own publications – anything </li></ul><ul><li>Teams of 4-5 make collage posters representing ideas, messages and qualities of the brand that they want the site to express. </li></ul><ul><li>Teams present their Mood Boards to the group </li></ul>
  22. 25. MOODBOARDS AT TUFTS ALUMNI
  23. 26. MOODBOARDS AT TUFTS ALUMNI
  24. 27. MOODBOARDS AT TUFTS ALUMNI
  25. 28. Design Consequences <ul><li>Take 7 minutes to sketch out a screen. </li></ul><ul><li>After 7 minutes, pass your screen to the person on your left. </li></ul><ul><li>Now pick something on that screen and sketch the screen you see after you click. </li></ul>
  26. 29. Digital Paper Prototyping <ul><li>Same advantages of paper prototype </li></ul><ul><li>Can be easier to prepare and run a usability test </li></ul><ul><li>Easier for team to observe </li></ul>
  27. 30. Digital Paper Prototyping <ul><li>Create wireframes in your favorite graphics program. </li></ul><ul><li>Project on the wall or share through a screen sharing application. </li></ul><ul><li>User points to the wall or moves the mouse on the screen and says “click.” </li></ul><ul><li>Person acting as computer changes the screen, passes control back to the user. </li></ul>
  28. 31. Read more <ul><li>KJ Sessions </li></ul><ul><ul><li>http://www.newcityexperience.com/general/unlock-the-wisdom-of-your-group-–-host-a-kj-session-for-site-architecture/ </li></ul></ul><ul><ul><li>http://www.uie.com/articles/kj_technique/ </li></ul></ul><ul><li>Mood Boards </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/Mood_board </li></ul></ul><ul><li>Design Consequences </li></ul><ul><ul><li>http://www.disambiguity.com/design-consequences-a-fun-workshop-technique-for-brainstorming-consensus-building/ </li></ul></ul><ul><li>Digital Paper Prototyping </li></ul><ul><ul><li>http://www.newcityexperience.com/general/usability-testing-hack-digital-paper-prototyping/ </li></ul></ul>
  29. 32. Thanks! <ul><li>David Poteet [email_address] (540) 552-1320 x206 </li></ul><ul><li>Slides available: </li></ul>

×