• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Design Without Politics
 

Web Design Without Politics

on

  • 3,306 views

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

Statistics

Views

Total Views
3,306
Views on SlideShare
3,226
Embed Views
80

Actions

Likes
6
Downloads
74
Comments
2

8 Embeds 80

http://www.newcityexperience.com 24
http://insidenewcity.com 24
http://www.insidenewcity.com 13
http://www.slideshare.net 9
http://beta.newcityexperience.com 4
http://newcityexperience.com 3
http://www.newcitymedia.com 2
http://newcitymedia.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Please do! It's always interesting to see how it turns out. What's your audience and focus question?
    Are you sure you want to
    Your message goes here
    Processing…
  • I'm using the KJ method you taught us at EduWeb tomorrow for a meeting! I'll let you know how it went!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.

Web Design Without Politics Web Design Without Politics Presentation Transcript

  • Web Design Without Politics
  • Goals for Today
    • Make the last hour of Eduweb count.
    • Learn tricks for getting the best input from stakeholders.
    • Have fun.
    PHOTO BY ROB
  • 6 Techniques for Collaboration
    • KJ Sessions
    • Nav Bar Survivor
    • Posterframes
    • Mood Boards
    • Design Consequences
    • Digital Paper Prototyping
  • 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
  • KJ Method
    • Technique for gaining rapid group consensus
    • Inventor Jiro Kawakita
    • Can be used for strategic planning, problem solving, brainstorming and yes, information architecture
  • 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
  • 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)
  • 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
  •  
  • Finding holes
  • VT FINANCIAL AID KJ EXAMPLE
  • Let’s Try It
  • Choose a site
    • Your athletics site
    • Your continuing education site
  • 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
  • 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.
  • NAV BAR SURVIVOR
  • 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.
  • imperial college london – collaborative wireframing
  • imperial college london – collaborative wireframing
  •  
  •  
  • IMPERIAL COLLEGE HOME PAGE WIREFRAME
  • IMPERIAL COLLEGE LONDON – FINAL DESIGN
  • 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
  • MOODBOARDS AT TUFTS ALUMNI
  • MOODBOARDS AT TUFTS ALUMNI
  • MOODBOARDS AT TUFTS ALUMNI
  • 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.
  • Digital Paper Prototyping
    • Same advantages of paper prototype
    • Can be easier to prepare and run a usability test
    • Easier for team to observe
  • 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.
  • 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/
  • Thanks!
    • David Poteet [email_address] (540) 552-1320 x206
    • Slides available: