How We Reinvented Our Library Website for the 21st Century

1
Keeping Up Appearances...
How We Reinvented Our Library Website for the
21st Century
2
Presented by members of the California State
University, Los Angeles Library Web Team

• 
  

Scott BreivoldMedia Services Librarian Chad
KahlCommunity College Outreach Librarian Stephen
SottongEngineering, Computer Science
Technology Librarian Holly YuWeb Development
Librarian
3
Program Outline

• Why and how we decided to reinvent our library
  web site
• Conducting usability studies
• Analyzing accessibility results and usage
  statistics
• Improving overall design -- seeking to make the
  site more intuitive, aesthetically appealing,
  easy to understand
• Utilizing database-driven pages to reduce
  maintenance and improve accuracy/currency

• 
  

4
Why Redesign?

• Difficult to navigate
• Developed over many years
• No navigational structure developed ad hoc
• Hundreds of pages
• Difficult to update
• Redundancy
• Too many links
• Too wordy
• Inconsistent style
• Changes in campus web server operating systems
• Unix to Windows 2000/SQL
• Improve ADA compliance

5
Why Usability Studies?

• Focus on user needs
• Ask the user if the web site is easy to use
• Follow usage patterns rather than make
  assumptions
• Iterative process
• Test existing web site
• Design the new web site
• Test it with the users
• Redesign from test results
• Repeat if necessary
• 
  

6
Usability Study Methods

• Pre-Test Surveys
• Paper and web-based versions to enlist volunteers
• Key issue, matching test users to campus
  demographics
• Formal Usability Testing
• Users were given common tasks
• Observed users behavior -- users spoke aloud
• Debriefing questions at end of session
• Four to six users enough to find major flaws
• Tested existing web site and will test new design
• Focus Groups
• Moderated discussion with eight to twelve users
• Opinions on redesigned web site

7
Testing Checklist

• Purpose statements
• Problem statements/questions
• Human subject requirements?
• Draft standard documentation forms and scripts
• Recruit users
• Train observers / pre-test questions
• Schedule sessions
• Administer tests
• Analyze data
  

8
Realities of Recruitment

• Much more difficult than anticipated
• 200 volunteersstill had difficulty scheduling
• Planned to use four groups of five
• Lower division, upper division, graduate,
  faculty/staff/other
• Of 20 originally selected, only half participated
• Contacted 40 people for 17 slots
• Met demographic goals for college and gender
• Did not meet demographic goals
• status, age, ethnicity, non-native English
  speakers
• Offered inducements copy cards and food
• Grant funded

9
Realities of Administration

• Labor intensive
• Sub-group of five members plus two administrative
  assistants
• Difficult to get two members to observe and
  record
• Original plan one moderator, two observers --
  happened infrequently
• Massive amount of data to be recorded and entered
• 12 test and 8 debriefing questions multiplied by
  17 users equaled 340 cells of information
• Audio-recorded sessions for clarification

10
Realities of Testing

• Questions asked are almost as important as
  answers
• Some questions were leading
• In reality, it is difficult to test the research
  "process"
• Process consists of many smaller tasks
• Can only quantify "tasks"
• Requires both quantitative and qualitative
  analysis

11
Key Findings

• Native vs. non-native English speakers
• Non-native speakers had difficulty with 47.2 of
  answers
• Native speakers had difficulty with 30.3 of
  answers
• Experienced Internet users were less critical of
  the site
• Users ignored graphics and scanned text
• No one used help screens
• Faculty and staff were the only group that
  claimed to use them
  

12
More Key Findings

• Questions missed by at least half of users
• What is the title of any newspaper article about
  Jack Lemmon? (16 out of 17 users could not answer
  this)
• Where can you find the magazine Sports
  Illustrated?
• Where can you find information online showing how
  to do your research papers reference list in MLA
  format?
• List three databases for finding journal articles
  in accounting.

13
What is Accessible Design?

• According to W3Cs Guidelines, accessible design
  should
• Ensure a graceful transformation
• Provides equal access despite differences in web
  browsers, internet connection speed, etc.
• Provide understandable and navigable content
  
  

14
Benefits of Accessible Design

• Reduces need for assistive technology
  software/hardware on individual computers
• Universal access for all users
• Added functionality for all users
• Prevents potential lawsuits

15
ADA Evaluation Tools

• Bobby 3.2 - online ADA analysis
  toolhttp//www.cast.org/bobby
• LynxViewer - text-based browserhttp//www.delorie
  .com/web/lynxview.html
• JAWS 3.7 - screen readerhttp//www.hj.com

16
Errors Identified

• Acronyms
• CSULA (sounds like Roman dictator Sula)
• Jargon
• ILL (sounds like ill)
• Labels

17
Accessibility Tools

• Accessibility standards and guidelines
• Evaluation tools
• Online training web sites
• Browser analyzers
• Assistive technology devices
  

18
What We Learned?

• Include accessibility assessment in planning and
  design process
• Develop ADA compliance checklists or follow
  latest guidelines
• Build stronger partnership with the disabled
  community
• Rely on OSD expertise with student needs and
  abilities
• Invite visually impaired users to test site
• Utilize available accessibility tools
  

19
Usage Statistics

• Number of page "hits"
• Types of pages requested
• Top pages / top documents accessed
• Length of time users stayed on site/page
  ("stickiness")
  

20

21

• 
  

22
Issues we tried to address

• Improve overall navigational structure
• Confusing language / terminology
• Too busy / text heavy / link heavy
• Consistent look and feel on all pages
• Category headers ignored by some
• others thought they should be links to secondary
  pages
• Whats New graphics viewed as ads and ignored
• Some wanted a search box on home page

• 
  

23

• 
  

24
Our redesign process . . .

• Examined commercial and library web sites for
  design concepts, color schemes, navigational
  approaches, etc.
• Exchanged URLs and ideas -- lots of virtual
  brainstorming!
• Design sub-group created numerous mock-ups

• 
  

25

• 
  

26

• 
  

27
And so we developed mockups

• 
  

28
And more mockups

• 
  

29
And still more mockups

• 
  

Somewhere around 80 in all
30
Other influences at work

• Campus home page design and departmental design
  standards were about to change
• Wanted look and feel of library home page to
  reflect new campus header and color scheme
• Wanted cascading menus similar to campus page
• Encouraged to include a multi-source search box
  

• 
  

31
Current CSULA home page
New CSULA home page

• 
  

32
And so we went from

• 
  

33
To

• 
  

34
And Developed a Secondary Page Template

• 
  

35
OPAC Interface Received Favorably

• 
  

36
Our Database Page is Currently a Frame Set

• 
  

37
Desire to Move to Layout Like This(inspired by
the VMI Library SourceFinder)

• 
  

38
Following Post-usability Testing, we may have to
Clear the Screen and Try Again!

• 
  

39
About Rollover Menus
40
Key to Cross-Browser Menus I
function DetermineType() if
(document.getElementById) layerRef"document.ge
tElementById\(\'" styleRef"\'\).style." el
se if (document.all) layerRef"document.all
." styleRef".style." else if
(document.layers) layerRef"document." st
yleRef"." Netscape4true else windo
w.parent.location.replace("textonly.html") ret
urn false
41
Key to Cross-Browser Menus II
ShowLevel3(0) for (i1ilt4i) eval(layerRef
"Level20" i styleRef "visibility\'hidden
\'") eval("OffImg('Level101', 'L10" i "',
'01000" i "')") if (iVisgt0) eval(layerR
ef "Level" iVis styleRef
"visibility\'visible\'")
42
Database-Driven Web Technologies

• Dynamic pages vs. HTML
• pseudo-tags insertedlt Response.Write Today
  is, Date gt
• evaluated by server
• results inserted in page
• Four major technologies
• ASP Active Server Pages
• JSP Java Server Pages
• PHP PHP
• CFM ColdFusion

43
ASP

• Most popular
• Windows-only operating system
• Uses IIS Web Server
• security concerns
• can use Personal Web Server for small sites
• Development tools available
• FrontPage
• Cost of technology built into operating system

44
JSP

• Fairly popular
• All operating systems (UNIX, Windows, Linux,
  etc.)
• Available for most web servers
• Few development tools
• high geek factor
• Moderate cost

45
PHP

• Gaining popularity
• Linux, UNIX and Windows
• Windows is least supported
• Apache Web Server only
• No development tools
• high geek factor
• Free!!!

46
CFM

• Popular in large organizations
• Most operating systems
• Most web servers
• Development tools available
• extra cost (DreamWeaver)
• Very expensive
• 14K

47
Which One?

• Which one does your organization use?
• internal support
• training
• mentoring
• reduced cost
• What is your server's operating system?
• Windows ASP/JSP/CFM
• UNIX JSP/PHP/CFM
• LINUX PHP/JSP/CFM
• Money?
• No money PHP

48
Opening a Table in SQL
49
Creating the Query 1
50
Creating the Query 2
51
Open FrontPage
52
Insert Database Results
53
Insert the Query
54
Setting up the Table
55
Table Inserted
56
Actual Page Display
57
Code Needed for One Table
lt!--webbot botquotDatabaseRegionStartquots
tartspanlt/pgtltpgts-columnnamesquotName,LoginName,
Title,Unit,Phone,Email,Office,EmployeeType,Departm
entLiaison,DepartmentContact,Name,Expr1,Expr2,Expr
4,Expr3quotlt/pgtltpgts-columntypesquot202,202,20
2,202,202,202,202,202,202,202,202,202,202,202,202
quotlt/pgtltpgts-dataconnectionquotLibraryquot
b-tableformatquotTRUEquot b-menuformatquot
FALSEquotlt/pgtltpgts-menuchoice s-menuvalue
b-tableborderquotTRUEquot b-tableexpandquot
TRUEquotlt/pgtltpgtb-tableheaderquotTRUEquot
b-listlabelsquotTRUEquot b-listseparatorquo
tTRUEquotlt/pgtltpgti-ListFormatquot0quot
b-makeformquotTRUEquot s-recordsourcelt/pgtltpgts
-displaycolumnsquotDepartmentLiaison,Expr1,Titl
e,DepartmentContactquotlt/pgtltpgts-criteria
s-orderlt/pgtltpgts-sqlquotSELECT ,'amplta
hrefampquothttp//www.calstatela.edu/library/h
mpgs/'PersonnelDirectory.LoginName'.htmampquot
ampgt'DepartmentLiaison.Name'amplt/aamp
gt' AS Expr1,DepartmentLiaison.DepartmentContact
AS Expr2, PersonnelDirectory.Title ASExpr4,
ampltbrampgt DepartmentLiaison.DepartmentLia
ison AS Expr3ampltbrampgtFROMPersonnelDirect
ory INNER JOINampltbrampgt
DepartmentLiaison ONPersonnelDirectory.Name
DepartmentLiaison.NameampltbrampgtWHERE
(DepartmentLiaison.DepartmentLiaison 'English')
ORampltbrampgt (DepartmentLiaison.Department
Liaison 'Asian American ampamp Pacific Asian
studies') OR (DepartmentLiaison.DepartmentLiaison
'Communication Studies') OR (DepartmentLiaison.De
partmentLiaison 'LiberalStudies')
OR(DepartmentLiaison.DepartmentLiaison 'Modern
Languages ampampLiteratures') OR
(DepartmentLiaison.DepartmentLiaison 'Music')
OR (DepartmentLiaison.DepartmentLiaison
'Philosophy') OR (DepartmentLiaison.DepartmentLiai
son 'Theatre Artsampamp Dance') OR
(DepartmentLiaison.DepartmentLiaison 'Art')
quotlt/pgtltpgtb-procedurequotFALSEquot
clientside SuggestedExtquotaspquot
s-DefaultFieldslt/pgtltpgts-NoRecordsFoundquotNo
records returned.quot i-MaxRecordsquot256quo
ti-GroupSizequot0quotlt/pgtltpgtBOTIDquot0qu
ot u-dblibquot_fpclass/fpdblib.incquotu-dbrg
n1quot_fpclass/fpdbrgn1.incquotlt/pgtltpgtu-dbrgn
2quot_fpclass/fpdbrgn2.incquot
tagquotTBODYquotlt/pgtltpgtlocal_previewquota
mplttrampgtamplttd colspan64
bgcolorampquotFFFF00ampquotalignampquot
leftampquot widthampquot100ampquotamp
gtampltfontcolorampquot000000ampquot
ampgtDatabase Results regions will notpreview
unless this page is fetched from a Web server
with a web browser. Thefollowing table row will
repeat once for every record returned by
thequery.amplt/fontampgtamplt/tdampgt
amplt/trampgtquotlt/pgtltpgtpreviewquotamp
lttrampgtamplttd colspan64
bgcolorampquotFFFF00ampquotalignampquot
leftampquot widthampquot100ampquotamp
gtampltfontcolorampquot000000ampquot
ampgtThis is the start of a DatabaseResults
region.amplt/fontampgtamplt/tdampgtam
plt/trampgtquot--gtlt!--include
filequot_fpclass/fpdblib.incquot--gtlt/pgtlt/f
ontgtltfont color"800000" size"1"gtltpgtltlt/pgtltpgt
fp_sQryquotSELECT ,'lta hrefquotquothtt
p//www.calstatela.edu/library/hmpgs/'PersonnelDi
rectory.LoginName'.htmquotquotgt'Departmen
tLiaison.Name'lt/agt' AS Expr1,DepartmentLiai
son.DepartmentContact AS Expr2,
PersonnelDirectory.Title ASExpr4,
DepartmentLiaison.DepartmentLiaison AS Expr3 FROM
PersonnelDirectoryINNER JOIN DepartmentLiaison ON
PersonnelDirectory.Name DepartmentLiaison.Name
WHERE (DepartmentLiaison.DepartmentLiaison
'English')OR (DepartmentLiaison.DepartmentLiaison
'Asian American amp Pacific Asianstudies') OR
(DepartmentLiaison.DepartmentLiaison
'Communication Studies')OR (DepartmentLiaison.Depa
rtmentLiaison 'Liberal Studies')OR(DepartmentLia
ison.DepartmentLiaison 'Modern Languages amp
Literatures')OR (DepartmentLiaison.DepartmentLiais
on 'Music') OR (DepartmentLiaison.DepartmentLiai
son 'Philosophy') OR (DepartmentLiaison.Departmen
tLiaison 'Theatre Arts ampDance') OR
(DepartmentLiaison.DepartmentLiaison 'Art')
quotlt/pgtltpgtfp_sDefaultquotquotlt/pgtltpgtfp_sNo
Recordsquotlttrgtlttd colspan4
alignleftwidthquotquot100quotquotgtNo
records returned.lt/tdgtlt/trgtquotlt/pgt
ltpgtfp_sDataConnquotLibraryquotlt/pgtltpgtfp_iMaxR
ecords256lt/pgtltpgtfp_iCommandType1lt/pgtltpgtfp_iPageS
ize0lt/pgtltpgtfp_fTableFormatTruelt/pgtltpgtfp_fMenuFor
matFalselt/pgtltpgtfp_sMenuChoicequotquotlt/pgtltpgt
fp_sMenuValuequotquotlt/pgtltpgtfp_iDisplayCols4
lt/pgtltpgtfp_fCustomQueryTruelt/pgtltpgtBOTID0lt/pgtltpgtfp
_iRegionBOTIDlt/pgtltpgtgtlt/pgtlt/fontgtltfont
color"808080" size"1"gtltpgtlt!--include
filequot_fpclass/fpdbrgn1.incquot--gtlt/pgtltp
gtlt!--webbot botquotDatabaseRegionStartquot
i-CheckSumquot59751quotendspan --gtlt/pgt
58
This Complete PowerPoint Presentation, along with
Reports, Statistics, etc. is available
athttp//www.calstatela.edu/library/ALA.htm