1. Unit 14 Website Design HND in Computing and Systems Development

2. Learning Outcome 1 Understand website design concepts
rules and heuristics for good website design;
accessibility;
functionality eg
Timings
Navigation,
Ease of use,
User-friendliness;
evaluation tools eg
W3C Mark-up Validation Service

3. Rules and heuristics
A heuristic is a guideline that helps analyse or solve a problem
In web design it is accepted guidelines and commonly accepted principles for the usability of the site

4. 10 usability heuristics 1-2
As defined by Jakob Nielsen (1995)
Visibility of system status
The system should always keep users informed of what is going on through appropriate feedback within reasonable time
Match between system and real world
The system should speak the user’s language
Make information appear in a natural and logical order

5. 10 usability heuristics 3-4
User control and freedom
Provide an “emergency exit” to leave an unwanted state
Implement undo and redo
Consistency and standards
Follow platform conventions
Use the same words for the same actions

6. 10 usability heuristics 5-6
Error prevention
Design to prevent errors
Or require confirmation prior to committing an action
Recognition rather than recall
Make objects, action and options visible
Instructions on use should be visible or easily found

7. 10 usability heuristics 7-8
Flexibility and efficiency of use
Accelerators may be hidden from the novice, but available to the expert.
Allow users to tailor frequent actions
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed

8. 10 usability heuristics 9-10
Help users recognise, diagnose and recover from errors
Error messages should be in plain language (no codes), precisely indicate the problem and constructively suggest a solution
Help and documentation
If required, should be easy to search, focused on the task, list concrete steps and not be too large

9. Usability heuristics applied to web design 1-2
Visibility of system status
Steps in processing a transaction
Activity indicators (hour glass)
Match between system and real world
Avoid jargon
Avoid acronyms

10. Usability heuristics applied to web design 3-4
User control and freedom
Don’t make irreversible action easy to perform
Always provide an exit (Home)
Ask for confirmation of significant actions
Consistency and standards
Blue underlined hyperlinks
Nav bar on left, search at top right

11. Usability heuristics applied to web design 5-6
Error prevention
No broken links
No “404” errors without explanation
Recognition rather than recall
Easily recognised icons – if you have to work out what it is it hasn’t worked

12. Usability heuristics applied to web design 7-8
Flexibility and efficiency of use
Offer multiple ways to find content
Hyperlinks;
Basic search form;
Advanced search form;
Site map
Alphabetical index
Aesthetic and minimalist design
No more than is required
Pleasing design elements

13. Usability heuristics applied to web design 9-10
Help users recognise, diagnose and recover from errors
Highlight missing information in forms
Speedy validation checks
Help and documentation
be easy to find;
be focused on the user's tasks;
list possible solutions to assist the user in their most common tasks;
be organized in a manner that makes sense to the user

14. Usability checklist Accessibility
1. Site Load-time Is Reasonable  2. Adequate Text-to-Background Contrast  3. Font Size/Spacing Is Easy to Read  4. Flash & Add-ons Are Used Sparingly  5. Images Have Appropriate ALT Tags  6. Site Has Custom Not-found/404 Page

15. Usability checklist - Identity
7. Company Logo Is Prominently Placed  8. Tagline Makes Company's Purpose Clear  9. Home-page Is Digestible In 5 Seconds  10. Clear Path to Company Information  11. Clear Path to Contact Information

16. Usability checklist - Navigation
12. Main Navigation Is Easily Identifiable   13. Navigation Labels Are Clear & Concise  14. Number of Buttons/Links Is Reasonable  15. Company Logo Is Linked to Home-page  16. Links Are Consistent & Easy to Identify  17. Site Search Is Easy to Access

17. Usability checklist - Content
18. Major Headings Are Clear & Descriptive   19. Critical Content Is Above The Fold  20. Styles & Colours Are Consistent  21. Emphasis (bold, etc.) Is Used Sparingly  22. Ads & Pop-ups Are Unobtrusive  23. Main Copy Is Concise & Explanatory  24. URLs Are Meaningful & User-friendly  25. HTML Page Titles Are Explanatory

18. Activity Checklist item 7 Company Logo Is Prominently Placed
You need a company logo for Marches Special Woods