Your SlideShare is downloading. ×
0
Web Design Without Politics
Goals for Today <ul><li>Make the last hour of Eduweb count. </li></ul><ul><li>Learn tricks for getting the best input from...
6 Techniques for Collaboration <ul><li>KJ Sessions </li></ul><ul><li>Nav Bar Survivor </li></ul><ul><li>Posterframes </li>...
Who should participate? <ul><li>Core team </li></ul><ul><li>Key stakeholders </li></ul><ul><ul><li>especially anyone who h...
KJ Method <ul><li>Technique for gaining rapid group consensus </li></ul><ul><li>Inventor Jiro Kawakita </li></ul><ul><li>C...
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...
Using KJ for Information Architecture <ul><li>Start by identifying and prioritizing your audiences. </li></ul><ul><li>Find...
KJ: Focus Question for Information Architecture <ul><li>What would someone come to your web site to  FIND  or  DO ? </li><...
 
Finding holes
VT FINANCIAL AID KJ EXAMPLE
Let’s Try It
Choose a site <ul><li>Your athletics site </li></ul><ul><li>Your continuing education site </li></ul>
Doing a KJ <ul><li>Make a list of your key audiences (together) </li></ul><ul><li>Answer individually - What would someone...
Nav Bar Survivor <ul><li>Imagine you’ve already clicked deeper into the site from the home page. </li></ul><ul><li>Nominat...
NAV BAR SURVIVOR
Posterframes <ul><li>Place posters on the walls representing your main landing pages. </li></ul><ul><li>Work from KJ sessi...
imperial college london – collaborative wireframing
imperial college london – collaborative wireframing
 
 
IMPERIAL COLLEGE HOME PAGE WIREFRAME
IMPERIAL COLLEGE LONDON – FINAL DESIGN
Mood Boards <ul><li>Gather magazines, your own publications – anything </li></ul><ul><li>Teams of 4-5 make collage posters...
MOODBOARDS AT TUFTS ALUMNI
MOODBOARDS AT TUFTS ALUMNI
MOODBOARDS AT TUFTS ALUMNI
Design Consequences <ul><li>Take 7 minutes to sketch out a screen. </li></ul><ul><li>After 7 minutes, pass your screen to ...
Digital Paper Prototyping <ul><li>Same advantages of paper prototype </li></ul><ul><li>Can be easier to prepare and run a ...
Digital Paper Prototyping <ul><li>Create wireframes in your favorite graphics program. </li></ul><ul><li>Project on the wa...
Read more <ul><li>KJ Sessions </li></ul><ul><ul><li>http://www.newcityexperience.com/general/unlock-the-wisdom-of-your-gro...
Thanks! <ul><li>David Poteet [email_address]   (540) 552-1320 x206 </li></ul><ul><li>Slides available: </li></ul>
Upcoming SlideShare
Loading in...5
×

Web Design Without Politics

2,276

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
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,276
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
76
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide
  • KJ intro - 5 minutes KJ session - 20 minutes Nav Bar Survivor &amp; Posterframes - 5 minutes Design Consequences intro - 2 minutes Design Consequences - 20 minutes Digital Paper Prototyping - 5 minutes
  • These are all techniques we have developed, learned and adapted over the years working in a higher ed setting. They’re born partly out of necessity, because we have to get input from a wide range of stakeholders during the process. But we’ve found they help us get - deeper insights - clearer guidance - smoother process with less conflict and territorialism - faster and less expensive
  • In this example, content and links are taken from a set of “mental models” on the wall in the same room with the posters. This can also be done with data from a KJ session or other research like a Carewords Survey.
  • Pamela Agar at Imperial College London explains the elements of the Media landing page to the whole team. By going through this process, everyone on the team has a thorough understanding of how and why you arrived at the proposed architecture, and key stakeholders become advocates for the plan.
  • The earliest version of the Imperial College London home page wireframe
  • The Imperial College London homepage wireframe, now rendered in OmniGraffle.
  • The final Imperial College London home page design
  • Create your wireframes in your favorite graphics program (like OmniGraffle, Axure, Vizio, Illustrator). Project your screen on the wall or share it through a screen sharing application like Glance.
  • Transcript of "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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×