DESIGN Unit 14 Website Design HND in Computing

DESIGN Unit 14 Website Design HND in Computing and Systems Development

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 W 3 C Mark-up Validation Service

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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