1 / 53

104 th Annual CLA Conference: Building our Strengths

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

paul2
Download Presentation

104 th Annual CLA Conference: Building our Strengths

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 104th Annual CLA Conference: Building our Strengths

  2. 104th Annual CLA Conference: Building our Strengths

  3. 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

  4. 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

  5. Conducting Usability Studies

  6. 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

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

  8. 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

  9. 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

  10. 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.

  11. 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

  12. Streamlining Content,Structure & Layout

  13. 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

  14. Catalog & Databases not found, despite attempts to highlight Graphics Ignored Too many links Old Site

  15. Old Database Page

  16. Examined Current Usage Statistics

  17. 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

  18. Methods Used • Web team divided into small groups • Usability Studies • Structure • Design • Streamlining content • Category chart • Card sorting • Database driven approach

  19. Content Re-organization • Categories • About the Library • Doing Research • Services • Help • Navigational Structure • Navigation bar • Search functions • Text equivalent page

  20. Header Navigation Bar • About the Library • Doing Research • Services • Help • Find Books, etc. • Find Articles, etc. • Search • Index • FAQ

  21. Implemented Cascading Menus

  22. New Database Page

  23. Giving the Site a New Look & Feel

  24. 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

  25. And so we developed mockups…

  26. And more mockups…

  27. And still more mockups… Somewherearound 80 in all…

  28. 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

  29. Current CSULA homepage New CSULA homepage

  30. And so we went from…

  31. To…

  32. Developed a Secondary Page Template…

  33. OPAC Interface also Enhanced

  34. Old Database Page was a Frame Set…

  35. New Database Page Eliminates Frames

  36. Following Post-Usability Testing, Refinements Were Made . . .

  37. Utilizing New Techniques and Technology

  38. About Cascading Menus

  39. 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

  40. 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>

  41. Resizable Header - cont.

  42. 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

  43. 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

  44. 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

  45. Actual Page Display

  46. 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>

  47. 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

  48. 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>")

More Related