information architecture & design week 7 schedule - design critiques due now - metaphors,...

Information Architecture & Design Information Architecture & Design

• Week 7 Schedule- Design Critiques due Now- Metaphors, Graphics and Labels- Other Readings- Research Topic Presentations- Group Work – Label Sorting

Labeling Systems DesignLabeling Systems Design

• Labels are More Than Link Descriptors• Convey the Structure and Purpose of the

Web Site• Describe in the Language of the (Analyzed)

User(s) (But Not All Jargon)• Differentiate Each Topic• Imply Hierarchy- News – Tech News – Computing News –

Macintosh News

• Nouns and Verbs (Mixed & Consistency)• Reading Behavior

Varieties of Label DesignsVarieties of Label Designs• Contextual Links• Headings

- Text- Narrative Help

• Navigation System Choices- Toolbars & Navigation Bars- Application Functionality

• Index Terms- Searching (Results)- Browsing

• Graphics (Iconic)- Maps- Images

• Email Subject LinesRosenfeld p 80

Labels in Use (Affecting Design)Labels in Use (Affecting Design)

• A-Z Indexes (“Term Rotate” and Flatten)• Thesaurus of Labels (and Relationships)• Narrowing the Possibilities of Use• Examine All the Labels at End of Tech-Independent

Design• Consistent with Headings and <TITLE>• Bookmark Uniqueness• Work With Your Content (Content Analysis – Use

Search & Evaluate Results)• Card Sorting to Determine Structure and

Metaphors/Themes• Dates, Times, Sizes, Rankings & Categories Too

Well-Designed Labels…Well-Designed Labels…

• Go Unnoticed• Use Size and Color for Hierarchy• Follow Consistent Graphical & Textual

Representation• Describe and are Parallel to Other Labels• Metaphorically Correct• Use Rollover Text• Communicates Part of the Structure of the Site (The

Name of the Label is like the Name of the Page it Links to)

• Notes If It Breaks The Browsing Metaphor (another Window via Links)

Bad Labelling ExamplsBad Labelling Exampls

• Typos & Misspellings (See Above!)• Too much InterCaps (see above!)• Too Much Text or Extraneous That Really Doesn’t Tell

You Anything About The Link That Makes You Less Likely To Understand The Link And May Take More Time To Interpret Than Clicking On The Link Name

• TOO MUCH UPPERCASE TEXT THAT IS MORE ARDUOUS TO READ AND COMPREHEND

• Links in Color• “Click Here”• Are Too Numerous• Are Too Cute• Dead Links without rollover text

MetaphorsMetaphors

• What Does the Web “Look” Like To You?• What Does an Individual Web Site “Look”

Link To You?• How Do You Integrate with Labels?• How Does Metaphor Affect Memory of a Site

(during use and after a visit)?• Always a Physical Space (Movement)?- Information Highway- Maps- “Explorer” & “Navigator” (Opera?)

• How Do People Describe a Web Site Visit?

Maglio & Matlock (1998)Maglio & Matlock (1998)• Great Bibliography• Users Remembered Little of Site Visits

- Anchor Points - Key Nodes that lead to Target Information- Personal Routines – What Worked Before Will Work Now (!)

• Consistently Among Web Sites• Consistency Among Search Engines• Bad User Habits Continue• Bad Design Conventions Continue

- Language of Web Site Use• Visiting• Went…

- Talk Aloud Protocols When Studying Web Use

- Users Conceptualize Themselves Moving TOWARD Information, not Information Being BROUGHT to Them.

Maglio & Matlock (1998) 2Maglio & Matlock (1998) 2

• Metaphor and Thought- Lakoff and Johnson

• Not Only a Literary Device (in Study)• Linguistic Analysis• Cognitive Analysis• Trends and Metaphors of the Times

- Clockwork to Computers

• “Image Schemata”- Pre-conceptual structures from our embodied experience- Habits and Assumptions in terms of understanding

Maglio & Matlock (1998) 3 Maglio & Matlock (1998) 3 • Language Use on the Web

- Outside & Inside Actions

• System Actions- Click, Scroll, Type

• Move- Go, Follow

• Computer Assistance- Display, Bring Up

• Information Action- Look For, Search, Browse

• Individual Process- Look, See

• Physical Motion Most Common- What about the Browser? (Agency)- What about Other Users? (Collaboration)

Let’s look at some maps (models)Let’s look at some maps (models)

Some maps are specificSome maps are specific

Some are notSome are not

How to Design Text (from Metaphor)How to Design Text (from Metaphor)

• Labels and Graphics

• Jakob Nielsen

• Other News Examples?- NY Times- WSJ- AAS

• iSchool

Card (Term) Sorting for Site LabelsCard (Term) Sorting for Site Labels

• Why Card Sorting So Early?• Multiple Applications of this Technique,

unfortunately known (only) as Card Sorting• Rosenfeld: Two Kinds of Labels- Subject Matter Expert Labels- Lay Person – Novice Labels

• Focus on Needs & Problems with Labels• Categories of Labels help with Design Scope

Label Sorting – Label Sorting – Speed Speed SortingSorting

• How Much Time Will Users Spend Deciphering Your Site?

• A Series of Quick Label Evaluations- Terms- Phrases

Sorting Step 1Sorting Step 1

• Look at all the terms & phrases• Each of you: write a 1 sentence description of

what the site these terms and phrases must be about.

• 2 Minutes!

Sorting Step 2Sorting Step 2

• Read over the terms and phrases and circle the ones you immediately & certainly understand.

• 2 Minutes!

• Read over the terms and phrases and lightly cross out terms and phrases you don’t understand.

• 2 Minutes!

Sorting Step 3Sorting Step 3

• Work together: suggest terms and phrases for the circled items.

• Provide up to 3 alternatives. Focus.• 3 Minutes!

• Work together: suggest terms and phrases you crossed out.

• Provide up to 3 alternatives. Create.• 3 Minutes!

ROTATE Label List!ROTATE Label List!

• Each Group: Work with Another List• All Three Steps Again.

• Turn Over Work to Original Project Group• After Class:- Tighten Up Vocabulary- Consistency of Use (Nouns – Verbs)- Fix Cases, Spelling, Parallel Word Counts- What’s Missing?

Next WeekNext Week

• Design Critiques returned• Main Page Wireframe• Class Q & A about course readings- Class participation is part of your grade

• Reminder - no class on Nov. 1