1. GCE Applied ICT G053: Lesson 04 Evaluating Websites
Mr C Johnston

2. Learning Outcome
Understand the principals and key features which result in best practice web design
Understand and apply theoretical approaches to web design so best practice is achieved

3. Discussion
Have a look at the screen shot of this home page what are your thoughts?

4. Fundamentals of Website Design
Content is important, but content alone will not make your site work.
Good Design is:
Understandable
Interesting
Easy to use
Uniform in look and feel
Done from a visitor’s point of view:
WYSIWYW (What You See Is What You WANT)
Functional

5. Fundamentals of Website Design
Purpose of Web Design
Inform/Educate
Persuade
Make users want to use the site
Influences on Web Design
Target audience
Technology used by both target audience and designer
Nature of the content
Economy (budget, time, and scale of the project)
Amount and type of visuals included
Meeting usability objectives

6. Design Tips1 Purpose Communication Typeface Colours Images
Always caters for the user and what they are expecting, each page needs a clear purpose
Communication
Short snappy, organised into heading subheads
Typeface
Sans serif rather than serif fonts
Colours
Well though out colour pallet, complementary colours create harmony, pastel colours so no eyestrain, contrasting colours between background and content, whitespace
Images
help or hinder? Tiled background? quality (not pixelated but not huge, scaled in proportion, infographics?

7. Design Tips2 Navigation Grid based layout “F” pattern layout Load time
How easy to navigate your site – no MMN!! logical page hierarchy, using bread crumbs, designing clickable buttons, and following the ‘three click rule’
Grid based layout
No random placed content – use sections, columns and boxes that line up and feel balanced – lines of symmetry are good
“F” pattern layout
Top and left should have most of content right is often ignored
Load time
People hate waiting – optimise images, do we really need that video?
Mobile friendly
Is the site compatible with different size screens?

8. Design Tips3 Usability Consistency Responsive Closure
Users don’t what to think – just use the site without hindrance – intuitive (can use with instinctive behaviour), think about tasks users will be doing on the site are they easy
Consistency
making everything match -heading sizes, font choices, colouring, button styles, spacing, design elements, illustration styles, photo choices etc.
Responsive
Responds to our actions to assist with browsing experience – rollovers so know what like about to click
Closure
Are we sure that form has sent – we need closure as reassurance

9. Design Tips4 Accessibility Clarity Media Accuracy Simplicity
Follows the WAI rules so that people with disabilities can still experience the site
Clarity
Make sure contrast is fine, pictures not pixelated, no clashing BG with foreground
Media
Media adds richness but at what cost?
Accuracy
Ensure content is factually correct, no spelling mistakes, biased – will be some but not OTT, pictures – sales of good act?? Copyright??
Simplicity
Keep layout and content simple - use white space

10. Activity
Visit and watch some of the videos that illustrate bad web page design
Download this tutorial worksheet
For each of the web pages shown in the tutorial
what are the key issues with the page?
what improvements could be made?

11. Extension Research the Web Accessibility Initiative
What does it aim to achieve
What are the main areas it targets
What guidance can you give to other web designers based upon your findings?
Some theories behind web design include:
Miller theory
Hick’s law
Zombie theory
Responsive web design
Three click rule
Colour theory
For each summarise the main implications it has on web design
Z-layout
Maslow's theory
Visual website theory
Gestalt theory
Golden theory

12. What Makes A Good Website Summary
Site has clear purpose
Site is designed for its target audience
Content you learn something from
Content is reliable and not too biased
Tasteful style
Consistent style
Quick to download
Updated regularly
Know who the author is
Good links to related sites
Not too many adverts
Has interactivity and dynamic content
Site is complete, fully tested and working

13. Web Accessibility Initiative
WAI Video #1
WAI Video #2
These are guidelines which allow people with disabilities to access websites,
12 directions are spilt into 4 categories –
Perceivable
Operable
Understandable
Robust
Judging websites against the criteria will give your evaluations more weight
This sheet may help you

14. Example Evaluation Sheet
URL address:
Information appeared quickly.
  5  
  4  
  3  
  2  
  1  
Page is colourful and interesting.
  5
  4
  3
  2
  1
Page has been updated recently. Date ___   
  4
Page makes you want to explore further.
  2
Author of page can be found easily.
  3
Author of page can be contacted easily.
Page contains more than one opinion.
  1
Page links to other useful sites.
Information is clearly labelled and organized.
Written text gives you useful information.

15. Activity
Develop your own criteria sheet for judging the quality of webpage. Include factors from all the different sources
Download and complete this worksheet to practice evaluating webpages

16. Evaluation Structure Website Evaluation Description of Website
Evaluation Table
Design
Good Points
Bad Points
Improvements
Structure

17. 9/8/2018
Evaluation
Description of the website including audience and purpose
Description of the sites deign
Description of design good points
Description of the design bad points
Improvements to the sites design
Description of the sites structure
Description of the structures good points
Description of the structures bad points
Improvements to the sites structure
Site #1
Include Screen Shots To Illustrate Points
Include points from your own evaluation grids – your grids could be presented in the evaluations. For high marks WCAG considerations need to be taken into account. 17

18. Activity Complete Task 1 Part 3 of the assignment
Choose 2 of the websites found and complete a formal evaluation of each
Evaluate both the design (fonts, colours, content) and structure (how the pages physically link and is the expected content where you think it is)
Use your own criteria and WAI criteria to make suitable comments
The evaluations need to be in depth and critical – critical analysis means that points are fully expanded and justified with reasons for your views. The reasons should draw upon web design theory learnt.
Previously some have read like a story describing what was on the website rather than a critical analysis of the sites contents, design and structure.

19. Further Reading What makes a good website
design/