104 th annual cla conference building our strengths n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
104 th Annual CLA Conference: Building our Strengths PowerPoint Presentation
Download Presentation
104 th Annual CLA Conference: Building our Strengths

Loading in 2 Seconds...

play fullscreen
1 / 53

104 th Annual CLA Conference: Building our Strengths - PowerPoint PPT Presentation


  • 364 Views
  • 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

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

PowerPoint Slideshow about '104 th Annual CLA Conference: Building our Strengths' - 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
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

overview
Overview
  • 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
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
objectives
Objectives
  • 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
slide29

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
slide31

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>

</tr>

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
    • UNIX: JSP/PHP/CFM
    • 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

<html>

<head>

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

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

</head>

<body>

<div align="center">

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