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

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

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

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

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

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?

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?

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

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

Activity Visit http://www.webpagesthatsuck.com/videos.html 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?

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

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

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

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.

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

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

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

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.

Further Reading What makes a good website http://webreference.com/greatsite.html http://www.w3.org/TR/UAAG20/ http://www.commonplaces.com/blog/10-website-trends-for-2016 http://www.bbc.co.uk/guides/zgx3b9q https://shortiedesigns.com/2014/03/10-top-principles-effective-web- design/