104 th annual cla conference building our strengths
1 / 53

Building a Library Web Site for the 21st Century: An Update - PowerPoint PPT Presentation

  • Uploaded on

104 th Annual CLA Conference: Building our Strengths. 104 th Annual CLA Conference: Building our Strengths. Presented by Members of the California State University, Los Angeles Library Web Team:. Scott Breivold Media, Communications & Arts Librarian

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Building a Library Web Site for the 21st Century: An Update' - paul2

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
104 th annual cla conference building our strengths

104th Annual CLA Conference: Building our Strengths

104 th annual cla conference building our strengths1

104th Annual CLA Conference: Building our Strengths

Presented by members of the california state university los angeles library web team
Presented by Members of the California State University, Los Angeles Library Web Team:

Scott BreivoldMedia, Communications & Arts Librarian

Chad KahlInformation Literacy & Community College Outreach Librarian

Stephen SottongEngineering, Computer Science & Psychology Librarian

Holly YuWeb Development & History Librarian


  • We began our site redesign project by:

    • Setting goals and priorities for the project

    • Conducting usability studies

  • Initial goals included:

    • Streamlining content, structure, and layout

    • Giving the site a new look and feel -- making the site more intuitive, aesthetically appealing, in-tune with the University’s new web site design

    • Utilizing new techniques and technology for displaying content (cascading menu and database-driven pages) to improve accuracy/currency and simplify maintenance

Realities of recruitment old site
Realities of Recruitment - Old Site

  • Much more difficult than anticipated

  • 200+ volunteers…still 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

Realities of administration
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 recorded and entered

    • Old site: 12 test and 8 debriefing questions multiplied by 17 users equaled 340 cells of information

    • Audio-recorded sessions for clarification

Realities of testing
Realities of Testing

  • Questions asked 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

Key findings old site
Key Findings - Old Site

  • 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 site

  • Users ignored graphics and scanned text

  • No one used help screens

    • Faculty and staff only group that claimed to use them

More key findings old site
More Key Findings - Old Site

  • Questions missed by at least half of users

    • What is the title of any newspaper article about Jack Lemmon? (94.1% could not answer this)

    • Where can you find the magazine Sports Illustrated?

    • Where can you find information online showing how to do your research paper’s reference list in MLA format?

    • List three databases for finding journal articles in accounting.

Usability testing new site
Usability Testing - New Site

  • Problem questions – still had improvement

    • What is the title of any newspaper article about Jack Lemmon? -- 71.4% in new site vs. 94.1% in old site

    • List three databases for finding journal articles in accounting -- 42.9% missed in new site vs. 47.1% in old site

  • 8 of 12 questions missed by one or fewer users

    • 2 of the 4 problem questions (missed 50+% in old site) were correctly answered by all users

Streamlining content structure layout
Streamlining Content,Structure & Layout

Issues identified by usability studies
Issues Identified by Usability Studies

  • Confusing language / terminology

  • Too busy / text heavy / link heavy

  • Lack of consistent look and feel on all pages

  • “What’s New” graphics viewed as ads and ignored

  • Needs a search feature

  • Database page layout was hard to use and time-consuming to update

Old site

Catalog & Databases not found, despite attempts to highlight

Graphics Ignored

Too many links

Old Site


  • Re-categorize content / links on homepage and reduce the number of links

  • Integrate a searching capability by implementing a search engine, and FAQs

  • Provide a consistent navigational structure

  • Use database-driven pages to manage 140+ online resources

  • Implement style sheets and templates for easy maintenance and updating

  • Reduce content redundancy

  • Remove library jargon, and simplify terminology

Methods used
Methods Used

  • Web team divided into small groups

    • Usability Studies

    • Structure

    • Design

  • Streamlining content

    • Category chart

    • Card sorting

    • Database driven approach

Content re organization
Content Re-organization

  • Categories

    • About the Library

    • Doing Research

    • Services

    • Help

  • Navigational Structure

    • Navigation bar

    • Search functions

    • Text equivalent page

Header navigation bar
Header Navigation Bar

  • About the Library

  • Doing Research

  • Services

  • Help

  • Find Books, etc.

  • Find Articles, etc.

  • Search

  • Index

  • FAQ

Our redesign process
Our redesign process . . .

  • Examined library and commercial 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

And so we developed mockups…

And still more mockups…

Somewherearound 80 in all…

Other influences at work
Other Influences at Work…

  • Campus homepage design and departmental design standards were about to change…

  • University Public Affairs Office intervened

    • required use of newly designed header graphics

    • placed some restrictions on design/color scheme

  • Wanted cascading menus similar to campus page

  • Encouraged to include a multi-source search box

Current CSULA homepage

New CSULA homepage

Cross browser issues
Cross-browser Issues .

  • Can be done

    • requires using 2 graphics per menu item

      • lots of time to create graphics

      • difficult to maintain

    • load times of one minute+ at 56k

      • 1.5K per graphic

  • Alternative

    • text based menus

      • page loads quickly

      • easy to maintain

    • only works with modern browsers

      • IE5+, NS6+, Mozilla1+

      • must create text alternate for older browsers

Resizable header
Resizable Header .

  • Maintains position of all header elements

  • Uses two resizable data elements in table:

<tr width="100%">

<td width="200"><a href="http://www.calstatela.edu"><img border="0" src="image/campusleft.gif" width="200" height="70" alt="California State University, Los Angeles homepage"></a></td>

<td width="50%" valign="bottom"><img src="image/border.gif" alt="" width="100%" height="1" border="0"></td>

<td width="360"><img border="0" src="image/libmid.gif" width="360" height="70" alt="California State University, Los Angeles Library"></td>

<td width="50%" valign="bottom"><img src="image/border.gif" alt="" width="100%" height="1" border="0"></td>

<td width="200"><img src="image/libright.gif" width="200" height="70" border="0" alt="California State University, Los Angeles Library"></td>


Maintaining uniformity
Maintaining Uniformity .

  • Used a single style sheet for all pages

    • sets background colors

    • sets page fonts

    • defines color scheme

  • Want to use database driven pages

    • single point for data updates

    • pages updated immediately

  • Used client-side includes

    • define content in one place

    • automatically update all pages

About database driven web technologies
About Database-Driven .Web Technologies

  • Four major technologies

    • ASP: Active Server Pages

    • JSP: Java Server Pages

    • PHP: PHP

    • CFM: ColdFusion

  • All technologies work the same

    • psuedo-tags inserted

    • evaluated by server

    • results inserted in page

Which one
Which One? .

  • Which one does your organization use?

    • internal support

    • training

    • mentoring

    • reduced cost

  • What is your server & platform?

    • Windows: ASP


    • LINUX: PHP

  • Money?

    • No money: PHP

  • Development tools available

    • used FrontPage to create pages

Code needed for one table
Code Needed for One Table .

&lt;!--webbot bot=&quot;DatabaseRegionStart&quot;startspan</p><p>s-columnnames=&quot;Name,LoginName,Title,Unit,Phone,Email,Office,EmployeeType,DepartmentLiaison,DepartmentContact,Name,Expr1,Expr2,Expr4,Expr3&quot;</p><p>s-columntypes=&quot;202,202,202,202,202,202,202,202,202,202,202,202,202,202,202&quot;</p><p>s-dataconnection=&quot;Library&quot; b-tableformat=&quot;TRUE&quot; b-menuformat=&quot;FALSE&quot;</p><p>s-menuchoice s-menuvalue b-tableborder=&quot;TRUE&quot; b-tableexpand=&quot;TRUE&quot;</p><p>b-tableheader=&quot;TRUE&quot; b-listlabels=&quot;TRUE&quot; b-listseparator=&quot;TRUE&quot;</p><p>i-ListFormat=&quot;0&quot; b-makeform=&quot;TRUE&quot; s-recordsource</p><p>s-displaycolumns=&quot;DepartmentLiaison,Expr1,Title,DepartmentContact&quot;</p><p>s-criteria s-order</p><p>s-sql=&quot;SELECT *,'&amp;lt;a href=&amp;quot;http://www.calstatela.edu/library/hmpgs/'+PersonnelDirectory.LoginName+'.htm&amp;quot;&amp;gt;'+DepartmentLiaison.Name+'&amp;lt;/a&amp;gt;' AS Expr1,DepartmentLiaison.DepartmentContact AS Expr2, PersonnelDirectory.Title ASExpr4, &amp;lt;br&amp;gt; DepartmentLiaison.DepartmentLiaison AS Expr3&amp;lt;br&amp;gt;FROMPersonnelDirectory INNER JOIN&amp;lt;br&amp;gt; DepartmentLiaison ONPersonnelDirectory.Name = DepartmentLiaison.Name&amp;lt;br&amp;gt;WHERE (DepartmentLiaison.DepartmentLiaison= 'English') OR&amp;lt;br&amp;gt; (DepartmentLiaison.DepartmentLiaison ='Asian American &amp;amp; Pacific Asian studies') OR (DepartmentLiaison.DepartmentLiaison= 'Communication Studies') OR (DepartmentLiaison.DepartmentLiaison = 'LiberalStudies') OR(DepartmentLiaison.DepartmentLiaison = 'Modern Languages &amp;amp;Literatures') OR (DepartmentLiaison.DepartmentLiaison = 'Music') OR (DepartmentLiaison.DepartmentLiaison= 'Philosophy') OR (DepartmentLiaison.DepartmentLiaison = 'Theatre Arts&amp;amp; Dance') OR (DepartmentLiaison.DepartmentLiaison = 'Art') &quot;</p><p>b-procedure=&quot;FALSE&quot; clientside SuggestedExt=&quot;asp&quot; s-DefaultFields</p><p>s-NoRecordsFound=&quot;No records returned.&quot; i-MaxRecords=&quot;256&quot;i-GroupSize=&quot;0&quot;</p><p>BOTID=&quot;0&quot; u-dblib=&quot;_fpclass/fpdblib.inc&quot;u-dbrgn1=&quot;_fpclass/fpdbrgn1.inc&quot;</p><p>u-dbrgn2=&quot;_fpclass/fpdbrgn2.inc&quot; tag=&quot;TBODY&quot;</p><p>local_preview=&quot;&amp;lt;tr&amp;gt;&amp;lt;td colspan=64 bgcolor=&amp;quot;#FFFF00&amp;quot;align=&amp;quot;left&amp;quot; width=&amp;quot;100%&amp;quot;&amp;gt;&amp;lt;fontcolor=&amp;quot;#000000&amp;quot;&amp;gt;Database 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.&amp;lt;/font&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&quot;</p><p>preview=&quot;&amp;lt;tr&amp;gt;&amp;lt;td colspan=64 bgcolor=&amp;quot;#FFFF00&amp;quot;align=&amp;quot;left&amp;quot; width=&amp;quot;100%&amp;quot;&amp;gt;&amp;lt;fontcolor=&amp;quot;#000000&amp;quot;&amp;gt;This is the start of a DatabaseResults region.&amp;lt;/font&amp;gt;&amp;lt;/td&amp;gt;&amp;lt;/tr&amp;gt;&quot;--&gt;&lt;!--#include file=&quot;_fpclass/fpdblib.inc&quot;--&gt;</p></font><font color="#800000" size="1"><p>&lt;%</p><p>fp_sQry=&quot;SELECT *,'&lt;a href=&quot;&quot;http://www.calstatela.edu/library/hmpgs/'+PersonnelDirectory.LoginName+'.htm&quot;&quot;&gt;'+DepartmentLiaison.Name+'&lt;/a&gt;' AS Expr1,DepartmentLiaison.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.DepartmentLiaison = 'Liberal Studies')OR(DepartmentLiaison.DepartmentLiaison = 'Modern Languages &amp; Literatures')OR (DepartmentLiaison.DepartmentLiaison = 'Music') OR (DepartmentLiaison.DepartmentLiaison= 'Philosophy') OR (DepartmentLiaison.DepartmentLiaison = 'Theatre Arts &amp;Dance') OR (DepartmentLiaison.DepartmentLiaison = 'Art') &quot;</p><p>fp_sDefault=&quot;&quot;</p><p>fp_sNoRecords=&quot;&lt;tr&gt;&lt;td colspan=4 align=leftwidth=&quot;&quot;100%&quot;&quot;&gt;No records returned.&lt;/td&gt;&lt;/tr&gt;&quot;</p><p>fp_sDataConn=&quot;Library&quot;</p><p>fp_iMaxRecords=256</p><p>fp_iCommandType=1</p><p>fp_iPageSize=0</p><p>fp_fTableFormat=True</p><p>fp_fMenuFormat=False</p><p>fp_sMenuChoice=&quot;&quot;</p><p>fp_sMenuValue=&quot;&quot;</p><p>fp_iDisplayCols=4</p><p>fp_fCustomQuery=True</p><p>BOTID=0</p><p>fp_iRegion=BOTID</p><p>%&gt;</p></font><font color="#808080" size="1"><p>&lt;!--#include file=&quot;_fpclass/fpdbrgn1.inc&quot;--&gt;</p><p>&lt;!--webbot bot=&quot;DatabaseRegionStart&quot; i-CheckSum=&quot;59751&quot;endspan --&gt;</p>

Additional concerns
Additional Concerns .

  • Access to server

    • requires special access

    • only certain software can load pages

  • SQL virus

    • yet another Microsoft specific virus

    • infected our campus server

    • activation of new server postponed indefinitely

    • translated dynamic page output to static page

Client side includes
Client Side Includes .

  • Create uniform content with “Client side includes”

    • translates JavaScript “document.write” statements

    • into this

document.write("<table cellpadding='0' cellspacing='0' width='660' class='white-b' border='0'><tr><td><nobr><a ref='http://www.calstatela.edu/'><img src='http://www.calstatela.edu/library/image/header-logo2.gif' border='0' alt='University Home' width='160' height='34'></a><a href='http://www.calstatela.edu/library/'><img src='http://www.calstatela.edu/library/image/header-library2.gif' border='0' alt='University Library' width='190‘ height='34'></a><a href= 'http://www.calstatela.edu/'><img src= 'http://www.calstatela.edu/library/image/header-CSULA2.gif' border='0' alt='University Home' width='214' height='34'></a><a href='http://www.calstatela.edu/library/'><img src='http://www.calstatela.edu/library/image/header-bldg2.gif' border='0' alt='University Library' width='96' height='34'></a></nobr></td></tr></table>")

Client side includes cont
Client Side Includes - cont. .

  • by adding an invocation in page



<title>Recommended Websites--Accounting</title>

<link REL="StyleSheet" HREF="http://www.calstatela.edu/library/cgi-bin/lweb2.css" TYPE="text/css">



<div align="center">

<script language="JavaScript" type="text/javascript" src="/library/cgi-bin/tertiary-header.js"></script><noscript><h2>University Library</h2></noscript>