Your SlideShare is downloading. ×
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,254
views

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