OverviewOverview

Frank CervoneFrank Cervone

OverviewOverview

• Web site design and redesigns– Usability testing techniques– Designing for “scent”

• Web site design and redesigns– Usability testing techniques– Designing for “scent”

OverviewOverview

• Writing for the Web – Techniques, strategies, and

examples

• Writing for the Web – Techniques, strategies, and

examples

OverviewOverview

• Interactive, content-driven Web sites – Efficient site management – On-target search results

• Interactive, content-driven Web sites – Efficient site management – On-target search results

Web site designWeb site design

• What is good design?– Schools of thought

•Tufte - buffet•Nielsen – treasure hunt

• What is good design?– Schools of thought

•Tufte - buffet•Nielsen – treasure hunt

Web site UsabilityWeb site Usability

• How do we know what is usable?– Usability engineering as an

emerging discipline– What does research tell us?

• How do we know what is usable?– Usability engineering as an

emerging discipline– What does research tell us?

Jared M. Spool

Essentials for Quality Web Design

Essentials for Quality Web Design

• Know who your users are• Know why they are coming to the site• Design for Scent of Information

• Know who your users are• Know why they are coming to the site• Design for Scent of Information

What is the Scent of Information?

What is the Scent of Information?

• The clues users follow as they navigate a site

• Based on Xerox’s Information Foraging theories

• Tell us why users make the choices they make as they are seeking their target content

• The clues users follow as they navigate a site

• Based on Xerox’s Information Foraging theories

• Tell us why users make the choices they make as they are seeking their target content

What We Know About ScentWhat We Know About Scent

• Users can scan the page for Trigger Words

• If they don’t find the trigger words, they look for Search

• If Search isn’t a good option, they hit the Back Button

• Users can scan the page for Trigger Words

• If they don’t find the trigger words, they look for Search

• If Search isn’t a good option, they hit the Back Button

Tips for Creating Sites with Scent

Tips for Creating Sites with Scent

• Start with the most important content - make that easiest to find

• Find out what your user’s trigger words are

• Look for uses of the back button and search to tell you things are going awry

• Longer, more descriptive links work better than short links

• Start with the most important content - make that easiest to find

• Find out what your user’s trigger words are

• Look for uses of the back button and search to tell you things are going awry

• Longer, more descriptive links work better than short links

How do you know if your site has good scent?

How do you know if your site has good scent?

• Common technique: Usability Testing

- Find out how users work with your site

– Options: simple to complex

• Common technique: Usability Testing

- Find out how users work with your site

– Options: simple to complex

Writing for the WebWriting for the Web

• What do libraries do?– organize as much content as possible

• What is the focus of Web publications– Select the best content– Edit it well– Make compelling reading

• What do libraries do?– organize as much content as possible

• What is the focus of Web publications– Select the best content– Edit it well– Make compelling reading

Writing for the WebWriting for the Web

“It is words that drive actions on a Web page”

“It is words that drive actions on a Web page”

Gerry McGovern – author of “Content Critical”

Gerry McGovern – author of “Content Critical”

And with that, let’s learn about

effective writing for the Web

Writing for the Wired WorldWriting for the Wired World

Darlene Fichter Data Coordinator

University of Saskatchewan

Darlene Fichter Data Coordinator

University of Saskatchewan

Library Web developmentLibrary Web development

• Focus on technology, design and navigation• Site-wide perspective• Often, key Web developers do not have Web writing

experience

• Focus on technology, design and navigation• Site-wide perspective• Often, key Web developers do not have Web writing

experience

The ResultThe Result

Writing is ignoredWriting is ignored

The realityThe reality

• Technology and navigation are important

• Design is important

• Technology and navigation are important

• Design is important

Librarians enjoy hunting

for information.

Users like finding it.

Typical library audienceTypical library audience

• Diverse: age, occupation, etc.• Focused on getting the job done

• Diverse: age, occupation, etc.• Focused on getting the job done

Research shows people don’t readResearch shows people don’t read

• People who are looking for information don't read

• What do they do?• They scan

• People who are looking for information don't read

• What do they do?• They scan

ReadingReading

• Is at least 25% slower on the screen compared to a paper-based format

• Is at least 25% slower on the screen compared to a paper-based format

Reading slower: Implications for style

Reading slower: Implications for style

• Be succinct Use ½ the word count of

conventional writing• Write in pyramid style like a

newspaper article

• Be succinct Use ½ the word count of

conventional writing• Write in pyramid style like a

newspaper article

“More is better” syndrome“More is better” syndrome

• Need to ask what is important? • Then give prominence to high

demand items

• Need to ask what is important? • Then give prominence to high

demand items

Four ways to improve your writing

Four ways to improve your writing

1.Strike out useless words

2.Use simple sentences3.Avoid jargon4.Be direct

1.Strike out useless words

2.Use simple sentences3.Avoid jargon4.Be direct

Remember: Readers understand

more when reading less.

Remember: Readers understand

more when reading less.

ScanningScanning

• Make your page easy to scan• Use lists, lists, and more lists• Create page titles, headings,

and subheadings• Be consistent in how you

design the headings

• Make your page easy to scan• Use lists, lists, and more lists• Create page titles, headings,

and subheadings• Be consistent in how you

design the headings

Use listsUse lists

• Lists speed up scanning• Use bulleted items when

sequence doesn’t matter– Use numbered items when it does

• Lists are for key concepts, not full sentences

• Lists speed up scanning• Use bulleted items when

sequence doesn’t matter– Use numbered items when it does

• Lists are for key concepts, not full sentences

Which is fastest to read? Research says…

Which is fastest to read? Research says…

Anatomy

Biology

Biotechnology

Chemistry

Microbiology

Physics

Zoology

Anatomy

Biology

Biotechnology

Chemistry

Microbiology

Physics

Zoology

Anatomy Biology Biotechnology Chemistry Microbiology Physics Zoology

• Make the links meaningful• Set link colors• Don’ t use “standard” colors in

odd ways– this is not a link, but it sure looks like one

Power of hyperlinksPower of hyperlinks

What is the weakest link?What is the weakest link?

Staff Directory

1. Search by last name 2. Browse by location 3. List all staff, click here

Promoting better writing

Promoting better writing

• Share a couple of strategies• Share a couple of strategies

Set standardsSet standards

• Editorial standards– Capitalization, punctuation– Naming conventions– Readability scores– Page length

• Formatting– Headings and subheadings– Lists

• Editorial standards– Capitalization, punctuation– Naming conventions– Readability scores– Page length

• Formatting– Headings and subheadings– Lists

Recruit authors as observers for your next usability test

Recruit authors as observers for your next usability test

• Nothing works better•Seeing is believing

• Nothing works better•Seeing is believing

Writing guides and resources

Writing guides and resources

• Before and after examples• Before and after examples

Instead of Use

construct build

concerning about

in order to to

Secrets to good wired writing

Secrets to good wired writing

• Be informed − read the research

• Watch users and learn what works

• Practice writing and editing for the Web

• Be informed − read the research

• Watch users and learn what works

• Practice writing and editing for the Web

Content-driven Web sitesContent-driven Web sites

• Moving from static to dynamic pages– Allows for customization based on

user – Provides a means for organizing

large amounts of content– Volume of resources makes hand-

coding impractical

• Moving from static to dynamic pages– Allows for customization based on

user – Provides a means for organizing

large amounts of content– Volume of resources makes hand-

coding impractical

Content-driven Web sitesContent-driven Web sites

• What it means– Page content generated on

demand– “Web page” is a template– Content is stored in a database– A template processing engine

combines the template and content to create a Web page

• What it means– Page content generated on

demand– “Web page” is a template– Content is stored in a database– A template processing engine

combines the template and content to create a Web page

Dynamic Content DeliveryDynamic Content Delivery

Laura Pope RobbinsDecember 6, 2002

Effective Web Design: A Fresh Look

Laura Pope RobbinsDecember 6, 2002

Effective Web Design: A Fresh Look

Why use a database?Why use a database?

• Library perspective– Increase access– Simplify maintenance– Save time– Eliminate errors– Focus on content not format

• Patron perspective– Dynamic and interactive– Fast and easy to use

• Library perspective– Increase access– Simplify maintenance– Save time– Eliminate errors– Focus on content not format

• Patron perspective– Dynamic and interactive– Fast and easy to use

Static content deliveryStatic content delivery

• Hard-coded HTML pages – Team effort– Webmaster as editor-in-chief

• Long lists– Subscription databases– Journal titles– Selected Web sites

• Hard-coded HTML pages – Team effort– Webmaster as editor-in-chief

• Long lists– Subscription databases– Journal titles– Selected Web sites

Static content deliveryStatic content delivery

• One link can span several pages– Unwieldy– Facilitates errors– Time consuming

• One link can span several pages– Unwieldy– Facilitates errors– Time consuming

Dynamic content deliveryDynamic content delivery

• Centralized resource– Specific piece of information exists only once– Update only one resource

• Centralized resource– Specific piece of information exists only once– Update only one resource

Dynamic content deliveryDynamic content delivery

• Editing controlled via Web forms– Consistent content– Separate style and content

• Editing controlled via Web forms– Consistent content– Separate style and content

• Variety of access– Multiple access points for one resource– Customized content

• Dynamic content

• Variety of access– Multiple access points for one resource– Customized content

• Dynamic content

Dynamic content deliveryDynamic content delivery

How were these sites created?How were these sites created?

• Webserver– Microsoft IIS

• Database– MS Access

•Provides the raw data for the Web pages

• Middleware– Active Server Pages (ASP)

•Provides the interface

• Webserver– Microsoft IIS

• Database– MS Access

•Provides the raw data for the Web pages

• Middleware– Active Server Pages (ASP)

•Provides the interface