Download Web_best_practices_session

Web best practices
Basic needs of ALL websites
 Utility
 Usability
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?
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
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
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
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
Best practices
 Navigation
 Content
 Accessibility
 Images
 Tools
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
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
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!)
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
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
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)
Resources
 terrymorris.net/bestpractices/
 Useit.com
 www.flickr.com/