Web best practices

1. Web best practices

2. Basic needs of ALL websites • Utility • Usability

3. Web site usability • Learnability: How fast is the system picked up? • Efficiency: Once learned, how quickly can basic tasks be performed? • Memorability: When returning after a period, how easily can proficiency be reestablished? • Errors: How many errors made, their severity, and how easily can they recover from the errors? • Satisfaction: How pleasant is it to use the design?

4. Good utility and/or usability = ? • Users that repeatedly come back to your site • Reduced time spent on email and phone • Users with who have and share positive impression • Efficiency for staff/faculty/students • Reduced paper and environmental costs

5. About the Web and its users • The power and difference of the web is that it is a non-linear medium • People do not move in a single trajectory, they move anywhere at anytime • Google has changed everything • People do not read on the web – they scan

6. Laurier web philosophy • Represents the Laurier brand and lets users know that they are on the university site • Clear, consistent navigation • Neutral design • W3C Priority One compliant (accessibility) • Compatible with most web browsers

7. Specifics • Font is standard on most computers/browsers • Font colours, sizes consistently used • Links and navigation schemes are consistent and follow web norms • Graphics are minimal to speed download

8. Best practices • Navigation • Content • Accessibility • Images • Tools

9. Best practices - navigation • Use short titles (keywords) • Use upper/lower case • Avoid underlined words • Insert hyperlinks where possible • Avoid using graphics as links • If required, acquire a memorable URL

10. Best practices - content • Make site user-centric • Design content as if it were an inverted pyramid • Keep content short and hyperlink data as much as possible – try using the CMS anchors feature • Put compelling, interesting info “above the fold“ • Don’t layer the content too deeply – minimize clicks • Use key words, bullets, bold, hyperlinks • Paste copy into Notepad before pasting into the CMS

11. Best practices - accessibility • Use tables only where necessary • Use image tags with images • Use unordered lists • Use minimal number of images • Ensure links function (test!)

12. Best practices - images • Main image area scales but image does not • Use width of 1500 pixels • Have main image content in left-hand 450 pixels • Images/video can be uploaded to Flickr/YouTube and HTML link embedded • Images should serve a specific purpose • Optimize photos before uploading

13. Best practices - tools • Documents tool • Word or pdf, difference to forms, plan sub-categories • Online forms • ITS can help link to database • Photo galleries • Image optimization, captions • E-newsletter • Blogs • Media Experts

14. Revising your site • Test existing site to identify good and bad (3-5 users) • Research your competitors or other sites • Hold a content identification meeting • Refine site design and build paper prototype • Test paper prototype (3 users) • Build actual site • Retest revised site (3 users)

15. Resources • terrymorris.net/bestpractices/ • Useit.com • www.flickr.com/