The California State University, Los Angeles  Web Site Redesign Project

The California State University, Los Angeles Web Site Redesign Project PowerPoint PPT Presentation


  • 46 Views
  • Uploaded on
  • Presentation posted in: General

Presented by members of the Cal State LA Web Team:. Scott Breivold Media, Communications,

Download Presentation

The California State University, Los Angeles Web Site Redesign Project

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


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

4. Overview Difficult to navigate Developed over many years No navigational structure ~ developed ad hoc Hundreds of pages Difficult to update Redundant Too many link Too word Inconsistent style Changes in campus web server operating systems Unix to Windows 2000 (SQL) Improve ADA compliance

5. Problem Statements Library Web Does the Web site structure, content, and vocabulary used within the existing Library Web make it easy for users to locate information resources and library services? Article Databases Does the layout and structure of the existing online database pages make it easy to choose and use appropriate resources?

6. Addressing User Needs Can users find appropriate paths to their information using the links on the Library Web site? Do users understand the terminology used on the Library Web site? Does our perception of what is useful to students match the actual use pattern of our users? Do users find the Library Web site a professional design? Do users find the Library Web site an aesthetically pleasing?

7. Addressing Developer Concerns What technologies can be used to make the Library Web site easier to maintain? How can we streamline the Library Web development and maintenance workflow? How can we consolidate structure redundancy in the Library Web? How can we ensure that pages throughout the Library Web have a consistent look and feel?

8. Conducting Usability Studies

9. 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 Design the Web site Test it with the users Redesign from test results Repeat if necessary

10. 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 given common tasks Observe users’ behavior (users speak aloud) Open-ended debriefing questions at end of session Four to six users enough to find major flaws Tested existing Web site and will test new design

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

12. Recruiting Test Users (Initial Test of Old Site) Much more difficult than anticipated 200+ volunteers…still had difficulty filling slots Planned to use four groups of five Lower division, upper division, graduate, faculty/staff/other Of 20, 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

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

14. Realities of Testing Questions asked almost as important as answers Some questions were leading In reality, difficult to test the research "process" Users do processes not tasks Can only quantify "tasks" Requires both quantitative and qualitative analysis

15. Key Findings (Initial Test of 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 less critical of the site Users ignored graphics and scanned text No one used help screens Faculty and staff were only group to claim to use them

16. More Key Findings (Initial Test of Old Site) Questions missed by at least half of users What is the title of any newspaper article about Jack Lemmon? 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.

17. Usability Testing (Initial Test of New Site) Problem questions improved, but... 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 1 or 0 users 2 of the 4 problem questions (missed 50+% in old site) were correctly answered by all users

18. 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 Improve overall navigational structure Category “headers” ignored by some, others thought they should be links to secondary pages

19. Improving ADA Accessibility

20. Cal State LA Students with Disabilities Fall Quarter 2001 Enrollment Total number: 461 Communication 11 2.3% Deaf 4 0.87% Learning 186 40.35% Mobility 163 35.36% Visually Impaired/Blind 26 4.33% ?Data from the Campus Office for Students with Disabilities

21. Our Approach Evaluated the Library Web for ADA Compliance Bobby 3.2 LynxViewer JAWS 3.7 Encouraged by University and Library Administration Asked Users to Help with Testing Relied on Office for Students with Disabilities (OSD) staff for their expertise regarding the needs and abilities of our students Invited visually impaired or blind users who rely on screen readers to test our site

22. Examples of Errors Identified Acronyms CSULA (sounds like Roman dictator Sula) Jargon ILL (sounds like ill) Labels needed in forms

23. What We Learned Include accessibility assessment in the planning and design process Develop ADA compliance checklists or follow latest guidelines Build strong partnerships with the disabled community Rely on OSD expertise regarding students needs and abilities Invite visually impaired users to test site Utilize available accessibility tools

24. Usage Statistics Number of page "hits" Types of pages requested Top pages / top documents accessed Length of time users stayed on site or individual pages (stickiness)

26. Streamlining Content, Structure, and Layout

27. Why a New Structure? Address problems identified in usability study Number of links Use of “confusing” words Reduce redundant redundancy in content Prioritize information Provide multiple paths when appropriate

28. 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 Improve overall navigational structure Category “headers” ignored by some, others thought they should be links to secondary pages

29. Streamlining Content Category chart Card sorting Database driven approach

30. Old Library Web (Homepage)

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

33. Card Sorting Exercise

34. New Library Web Homepage Menu

35. The Design Phase

36. 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 Improve overall navigational structure Category “headers” ignored by some, others thought they should be links to secondary pages

38. Redesign Process Examined commercial & 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

39.

40.

41.

43.

44. Other Influences at Work Campus home page design and departmental design standards were about to change… Wanted basic look and feel of the Library home page to reflect new campus header and color scheme Encouraged to adopt a cascading menu (similar to new campus page) and include a multi-source search box

46.

47.

48.

49. OPAC Interface Received Favorably

50. Database page went from a frameset . . .

51. To a model inspired by the VMI Library's SourceFinder page . . .

52. Utilizing New Techniques and Technology

53. 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 Improve overall navigational structure Category “headers” ignored by some, others thought they should be links to secondary pages

54. Techniques We Wanted to Utilize Dynamically resizable headers Dynamic HTML Creating rollover menus Database-driven Web pages Current technologies Difficulties Alternate approaches

55. Resizable Headers Could not center homepage Rollover menus must be placed precisely Could not find the left side of centered page Needed page to resize to fit browser Left justified non-resizable pages — ugly Header problem Could center non-resizable header — ugly Use resizable cells

56. Resizable Headers Split header into 5 sections 3 graphics 2 resizable cells Fill resizable cell with 1 pixel wide graphic graphic stretches to fill cell

57. Resizable Headers (Code) <tr width="100%"> <td width="200"><a href="http://www.calstatela.edu"><img border="0" src="image/campusleft2.gif" width="200" alt="California State University, Los Angeles homepage"></a></td> <td width="50%" valign="bottom"><img src="image/border2.gif" alt="" width="100%" border="0"></td> <td width="360"><img border="0" src="image/libmid2.gif" width="360" alt="California State University, Los Angeles Library"></td> <td width="50%" valign="bottom"><img src="image/border2.gif" alt="" width="100%" border="0"></td> <td width="200"><img src="image/libright2.gif" width="200" border="0" alt="California State University, Los Angeles Library"></td> </tr>

59. Dynamic HTML Allows graphical effects in response to mouse / keyboard rollover menus on homepage mouseovers for OPAC tabs dynamic examples in OPAC Difficult to create combination of HTML and JavaScript proprietary implementation in older browsers (e.g., NS4, IE4) modern browsers use same code Developed cross-browser method used techniques from various sources

60. Key to Cross-Browser I function DetermineType() { if (document.getElementById) {layerRef="document.getElementById\(\'"; styleRef="\'\).style."; } else {if (document.all) {layerRef="document.all." styleRef=".style."} else {if (document.layers) {layerRef="document." styleRef=".";} else {window.parent.location.replace("textonly.html") return false} }}}

61. Key to Cross-Browser II ShowLevel3(0) { for (i=1;i<=4;i++) { eval(layerRef + "Level20" + i + styleRef + "visibility=\'hidden\'") eval("OffImg('Level101', 'L10" + i + "', '01000" + i + "')") } if (iVis>0) { eval(layerRef + "Level" + iVis + styleRef + "visibility=\'visible\'") } }

62. Cross-Browser Dynamic HTML

63. About Cascading Menus

64. Rollover Menu Cross-Browser Problems Can be done requires using two graphics per menu item (138 total) lots of time to create graphics difficult to maintain load times of over one minute at 56k Alternative text based menus web page loads quickly (~15 secs. @ 56k) easy maintenance only works with W3C compliant browsers IE5+, NS6+, Mozilla 1+, Opera 7+ must create text alternate for older browsers

65. About Database-Driven Web Technologies Four major technologies ASP — Active Server Pages JSP — Java Server Pages PHP — PHP CFM — ColdFusion Web pages work the same psuedo-tags inserted evaluated by server results inserted in page

66. ASP (Active Server Pages) 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

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

68. PHP Gaining popularity Linux, UNIX and Windows Windows is least supported Apache Web Server only No development tools high geek factor Free!!! (http://www.php.net/downloads.php)

69. CFM (ColdFusion) Popular in large organizations Most operating systems Most web servers Development tools available extra cost (DreamWeaver) Very expensive $14K+

70. Which One? Which one does your organization use? internal support training mentoring reduced cost Development tools available used FrontPage to create pages What is your server & platform? Windows — ASP UNIX — JSP/PHP/CFM LINUX — PHP Money? No money — PHP

71. FrontPage SQL Code Generated for One Table

72. Yet More Problems 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 SO! Translated dynamic page output to static page and waited for the SQL Server to be reopened and waited and waited ….. (may never be used)

73. Alternative Approaches I

74. Alternative Approaches ~ Headers and Footers

75. Alternative Approaches II Invented a new way — Active Client Pages Desperation is the mother of invention Uses only JavaScript Downloads database to client Processes on client machine, not server Yes, it's

76. Active Client Page ~ Database Simple set of JavaScript arrays Text file edit with Notepad easily updated smaller size than standard database files

77. Active Client Page ~ Database Example WebPage[2] = "/library/hmpgs/sbreivo/index.htm"; Name[2] = "Breivold, Scott"; Job[2] = "Media, Communications, & Arts Librarian"; Ext[2] = "6094"; Room[2] = "3019 North"; Mail[2] = "[email protected]"; Status[2] = "Faculty"; WebPage[38] = "/library/hmpgs/ssotton.htm"; Name[38] = "Sottong, Stephen"; Job[38] = "Engineering, Computer Science, Technology & Psychology Librarian"; Ext[38] = "5168"; Room[38] = "1025 A North"; Mail[38] = "[email protected]"; Status[38] = "Faculty";

78. Active Client Page ~ HTML

79. On the CD-ROM Old and new Web sites Database pages OPAC pages Bibliographies ADA Usability Web design Usability study documentation This PowerPoint presentation

  • Login