Your SlideShare is downloading. ×
0
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Web Design Without Politics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Design Without Politics

2,274

Published on

Learn 6 tricks you can take home to get participation without politics: …

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,274
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
76
Comments
2
Likes
6
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
  • KJ intro - 5 minutes KJ session - 20 minutes Nav Bar Survivor & 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

    • 1. Web Design Without Politics
    • 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. 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. 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. 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. 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. 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. 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
    • 11. VT FINANCIAL AID KJ EXAMPLE
    • 12. Let’s Try It
    • 13. Choose a site <ul><li>Your athletics site </li></ul><ul><li>Your continuing education site </li></ul>
    • 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>
    • 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>
    • 16. NAV BAR SURVIVOR
    • 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>
    • 18. imperial college london – collaborative wireframing
    • 19. imperial college london – collaborative wireframing
    • 20.  
    • 21.  
    • 22. IMPERIAL COLLEGE HOME PAGE WIREFRAME
    • 23. IMPERIAL COLLEGE LONDON – FINAL DESIGN
    • 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>
    • 25. MOODBOARDS AT TUFTS ALUMNI
    • 26. MOODBOARDS AT TUFTS ALUMNI
    • 27. MOODBOARDS AT TUFTS ALUMNI
    • 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>
    • 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>
    • 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>
    • 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>
    • 32. Thanks! <ul><li>David Poteet [email_address] (540) 552-1320 x206 </li></ul><ul><li>Slides available: </li></ul>

    ×