web design without politics
DESCRIPTION
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 PrototypingTRANSCRIPT
![Page 1: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/1.jpg)
Web Design Without PoliticsWeb Design Without Politics
![Page 2: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/2.jpg)
Goals for Today
Make the last hour of Eduweb count.
Learn tricks for getting the best input from stakeholders.
Have fun.
PHOTO BY ROB
![Page 3: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/3.jpg)
6 Techniques for Collaboration1.KJ Sessions
2.Nav Bar Survivor
3.Posterframes
4.Mood Boards
5.Design Consequences
6.Digital Paper Prototyping
![Page 4: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/4.jpg)
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
![Page 5: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/5.jpg)
KJ MethodTechnique for gaining rapid group consensus
Inventor Jiro Kawakita
Can be used for strategic planning, problem solving, brainstorming and yes, information architecture
![Page 6: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/6.jpg)
KJ Method1.Gather 4-6 people for ~1 hour
2.Start with focus question
3.Put opinions (or data) onto Sticky Notes
one answer per note
use a fat-tipped marker
4.Put Sticky Notes on the wall
5.Group similar items (without talking)
6.Discuss & Name the groups
7.Vote on priorities
![Page 7: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/7.jpg)
Using KJ for Information ArchitectureStart by identifying and prioritizing your audiences.
Find participants who represent your users.
OR who know their needs well. (less ideal)
![Page 8: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/8.jpg)
KJ: Focus Question for InformationArchitecture
What would someone come to your web site to FINDFIND or DODO?
FINDFIND – looking for certain information, answering a question
DODO – accomplish some task, use some sort of application
![Page 9: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/9.jpg)
![Page 10: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/10.jpg)
Finding holes
![Page 11: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/11.jpg)
VT FINANCIAL AID KJ EXAMPLEVT FINANCIAL AID KJ EXAMPLE
![Page 12: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/12.jpg)
Let’s Try It
![Page 13: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/13.jpg)
Choose a siteYour athletics site
Your continuing education site
![Page 14: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/14.jpg)
Doing a KJMake a list of your key audiences (together)
Answer individually - What would someone come to your web site to FINDFIND or DODO?
FINDFIND – looking for certain information, answering a question
DODO – accomplish some task, use some sort of application
![Page 15: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/15.jpg)
Nav Bar Survivor1. Imagine you’ve already clicked
deeper into the site from the home page.
2. Nominate links that should always be available no matter where you are on the site. Put them on stickies on the wall.
3. Consolidate any that are closely related.
4. Everyone votes on their top 5.
5. Top 7 are your main navigation, plus “Home”
6. Others can be second-tier or footer navigation.
![Page 16: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/16.jpg)
NAV BAR SURVIVORNAV BAR SURVIVOR
![Page 17: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/17.jpg)
Posterframes1. Place posters on the walls
representing your main landing pages.
2. Work from KJ session or other data to place essential content and navigation onto each poster.
3. Experiment with different groupings and arrangements.
![Page 18: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/18.jpg)
imperial college london – collaborative wireframingimperial college london – collaborative wireframing
![Page 19: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/19.jpg)
imperial college london – collaborative wireframing
![Page 20: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/20.jpg)
![Page 21: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/21.jpg)
![Page 22: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/22.jpg)
IMPERIAL COLLEGE HOME PAGE WIREFRAMEIMPERIAL COLLEGE HOME PAGE WIREFRAME
![Page 23: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/23.jpg)
IMPERIAL COLLEGE LONDON – FINAL DESIGNIMPERIAL COLLEGE LONDON – FINAL DESIGN
![Page 24: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/24.jpg)
Mood BoardsGather 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
![Page 25: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/25.jpg)
MOODBOARDS AT TUFTS ALUMNIMOODBOARDS AT TUFTS ALUMNI
![Page 26: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/26.jpg)
MOODBOARDS AT TUFTS ALUMNIMOODBOARDS AT TUFTS ALUMNI
![Page 27: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/27.jpg)
MOODBOARDS AT TUFTS ALUMNIMOODBOARDS AT TUFTS ALUMNI
![Page 28: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/28.jpg)
Design Consequences1. Take 7 minutes to sketch out a
screen.
2. After 7 minutes, pass your screen to the person on your left.
3. Now pick something on that screen and sketch the screen you see after you click.
![Page 29: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/29.jpg)
Digital Paper Prototyping
Same advantages of paper prototype
Can be easier to prepare and run a usability test
Easier for team to observe
![Page 30: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/30.jpg)
Digital Paper Prototyping1.Create wireframes in your favorite graphics program.
2.Project on the wall or share through a screen sharing application.
3.User points to the wall or moves the mouse on the screen and says “click.”
4.Person acting as computer changes the screen, passes control back to the user.
![Page 31: Web Design Without Politics](https://reader033.vdocuments.site/reader033/viewer/2022061300/54c81d274a795971448b4594/html5/thumbnails/31.jpg)
Read moreKJ 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/