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

Make the last hour of Eduweb count.

Learn tricks for getting the best input from stakeholders.

Have fun.

6 Techniques for Collaboration KJ Sessions Nav Bar Survivor Posterframes Mood Boards Design Consequences Digital Paper Prototyping

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

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

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

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)

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

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

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

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.

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.

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

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.

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

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.

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/

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:

David Poteet [email_address] (540) 552-1320 x206

Slides available: