web redesign project update july 28, 2010. agenda project scope project requirements best practices,...
TRANSCRIPT
Web Redesign Project UpdateJuly 28, 2010
Agenda
• Project Scope
• Project Requirements
• Best Practices, Navigation and Information Architecture
• Usability Testing
• Next Steps
09/06/10
Project Scope
• Original scope = 1-click away from home page
• Specifically, addition of pathway pages lead to many more sites than originally proposed
• Changes in current information architecture (IA) led to redefined scope
09/06/10
Project Scope
• uWaterloo home
• Pathway pages: future student, current student, faculty, staff, alumni, employers
• Panels: About Waterloo, Today @ Waterloo (including Bulletin), Faculties & Academics, Offices & Services
• Other: Feature Stories, Communications | News, Support Waterloo
09/06/10
Project Scope
• Close guidance and Recommended IA:• Faculties (Departments addendum to Faculties)
• Undergraduate Admissions (Future Students -MUR)
• Services/Support Unit
• Alumni
• Support
• Graduate Admissions
Project Requirements
• Technical:• HTML: W3C XHTML 1.0 Recommendation; Strict
DOCTYPE, No JavaScript or CSS will be present in any mark-up file
• CSS: W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), NO CSS hacks
Project Requirements
• Technical (continued):• Browser Support: Internet Explorer 7, FireFox 2.0,
Safari 3.0, Opera 9, Chrome 2 and up
• Site Formats: Full, Print, mobile/naked
• Drupal: Any XHTML/CSS templates developed must conform to Drupal practices and restrictions.
Project Requirements
Technical (continued):
• Javascript: • Framework: jQuery must be used for any and all
JavaScript in the templates
• Progressive Enhancement: fully usable without JavaScript; functionality must be developed with no JavaScript and then enhanced by adding JavaScript
Project Requirements
• Accessibility• New site will be Web Content Accessibility Guidelines
(WCAG) 2.0 - Level AA compliant
• Level AA compliance = accessible to most users in most circumstances
• Working with OPD, site will tested in late August, early September for compliance
BEST PRACTICES, NAVIGATION, IA
Best Practice Documents
• Content and IA Review– http://web.uwaterloo.ca/files/BestPractices-IAContent.
• Homepage Content – To be updated based on usability
• Panels Recommendations– Being finalized
• Faculty X Best Practices– Being finalized for public view
IA Best Practices• User-oriented navigation
• including navigation header names and order
• Intuitive organization
• Meaningful link names & streamlined across the sites
• No more than 7-9 navigation items
• No more than 3 levels of navigation
• No external links in the navigation
IA Goals
• Align and streamline navigation across Waterloo sites
• Improve usability of navigation and site content
• Improve accessibility of navigation
• Eliminate external linking within navigation
WATERLOO NAVIGATION SPECIFICS
Capitals & Punctuation
• Capitalize:– Only the first letter of the first word– The first letter of the first word after a pipe | – Proper nouns as they are officially known
• Punctuation – Avoid: – Ampersand & – Question marks– Periods – Exclamation marks
Navigation Must Haves
• About [Unit Name]– Mission | Vision – includes a mission and vision
statement. – Our people – list of all contacts and staff in the unit or
group. This should always be the last link of the About section.
• News | Events– Events– News– Contacts – if there are media contacts
Common Suggested Headers
• Global connections
• Quick Facts – instead of Fast Facts, Facts, etc.
• Community engagement | Outreach
• Teaching
• Research
• Policies | Procedures
Fat Footer
• The fat footer should be used to include calls to actions and not to duplicate the top-level navigation of the site. – Links must include:
• Contact [Department / Unit / Service Name]• Work for [Department / Unit / Service Name]
– Links should include, if relevant:• Support [Department / Unit / Service Name]• Visit [Department / Unit / Service Name]
– [Department / Unit / Service Name] Maps | Directions
FACULTY X NAVIGATION
Faculty X
• One core navigation template and content recommendations: • All 1st level navigation items
• Core 2nd level navigation items
• Some optional 2nd level navigation items names
• 3rd level not defined
Faculty X Top Level
• About [FacultyX]
• Departments | Schools | Programs
• Teaching
• Research
• Resources | Services
• News | Events
Faculty X Fat Footer
• Contact [FacultyX]• Visit [FacultyX]• Support [FacultyX]• Work for [FacultyX]• Information for:
– Current undergraduates– Current graduate students– Future undergraduates– Future graduate students– Faculty | Staff– Alumni | Friends
HOME PAGE
Content Recommendations
• Published on May 29th, 2010– http://web.uwaterloo.ca/story/homepage-content-strat
egy• To be updated based on Phase 2 Usability
Testing – Future Students to be a pathway page– Support Waterloo to be in the footer– International pathway page removed to be
integrated as a section in each audience pathway.
ABOUT WATERLOO
About Waterloo
• Why Waterloo? • Teaching• Research• Community engagement | Outreach • Public accountability• University leadership• History | Traditions• Contact Waterloo
NAVIGATION - NEXT STEPS
IA Work
• Prepare pathway page categories:– Future Students– Current Students– Faculty– Staff– Employer– Alumni
• Finalize navigations:– Support Waterloo– Co-op / Career Services
And more
• Create and finalize the wireframes
• Usability testing
• Accessibility testing
• Adjust navigation
Usability Testing
• 1st phase: Content recommendations for pathway pages (completed)
• 2nd phase: paper prototyping of the homepage (completed; report online)
• 3rd phase: online testing of low-fidelity prototypes/wireframes (mid-August)
09/06/10
Usability Testing
• 1st phase results:• Pathway pages need to be task based
• Want personalization (undergrad/grad)
• Calendar (campus events, filtered by group)
• Contact information searchable based on name and title (WATIAM )
• Nice to have:
• News feeds, Dates, photos
09/06/10
Usability Testing
• 2nd phase results:• participants shown paper mock-ups of proposed
homepage and asked to complete tasks
Usability Testing
• 2nd phase results: 9 key areas1. Remove “For” from pathway navigation
2. Change story tab names
3. Unbold “About Waterloo”
4. Remove “Start Here” from “Future Students: Start Here”
5. Clear way to close panelsRead more: http://web.uwaterloo.ca/story/phase-2-usability-testing-results
Usability Testing
• 2nd phase results (continued)
6. Move “Support Waterloo” from Header
7. Clear role for “International” tab
8. Remove “A-Z” from “Offices & Services A-Z”
9. “Academics” in “Faculties & Academics
Read more: http://web.uwaterloo.ca/story/phase-2-usability-testing-results
Usability Testing
• 3rd phase: mid-August
• Incorporate recommended changes and retest
• Wireframe-based testing
• Build out of wireframes for testing underway [preview]
Usability Testing
• Testing will continue throughout the project (and beyond)
• Goal is to make usability testing and continuous improvement a key part of Waterloo web workflow
Next Steps
• Wireframes: As wireframes are received, they will be reviewed, sign-off (completion expected end of August)
• Usability Testing (ongoing)
• Design/Buildout: September - onward
Thank you!
Questions?Comments?