Transcript July 28, 2010 - University of Waterloo

Web Redesign Project Update
July 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/BestPracticesIAContent.pdf
• 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-contentstrategy
• 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 areas
1. 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 panels
Read 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?