Overview Frank Cervone

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

Overview Writing for the Web –Techniques, strategies, and examples Writing for the Web –Techniques, strategies, and examples

Overview 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 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 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 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? 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 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 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? 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 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 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 World Darlene Fichter Data Coordinator University of Saskatchewan

Library 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 Result Writing is ignored

The 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 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 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

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

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 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 1.Strike out useless words 2.Use simple sentences 3.Avoid jargon 4.Be direct 1.Strike out useless words 2.Use simple sentences 3.Avoid jargon 4.Be direct

Remember: Readers understand more when reading less. Remember: Readers understand more when reading less.

Scanning 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 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…  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 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 hyperlinks

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 Share a couple of strategies

Set 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 Nothing works better Seeing is believing Nothing works better Seeing is believing

Writing guides and resources Before and after examples Instead of Use construct build concerning about in order to to

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 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 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 Delivery Laura Pope Robbins December 6, 2002 Effective Web Design: A Fresh Look Laura Pope Robbins December 6, 2002 Effective Web Design: A Fresh Look

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 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 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 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 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 delivery

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