Web Design Principles

CSCU9B2(2 lectures)

Web Site Design• This lecture is about the principles of good web design, not

the technology of implementation

Different types of website:

• Stand-alone, static– Client downloads a page, user reads it (examples)

• Dynamic– Client downloads page, – User interacts with it locally (examples)

• Portal-based– Client downloads page, interacts with it,– resulting in data being sent to the server,

• which processes the data, and • updates the page• (and may do other things too) (examples)

Server

Client

responserequest Portal

Client

request response

Back-office systemCommunication between the portal and the “back-office” server

Design always matters

• A good web site is:

– Easy to use for everyone– Logical and intuitive in its structure– Consistent in its design– Aesthetically pleasing– Not annoying

• Note that the same comments apply to a good app(lication).

Easy to Use for Everyone

• Who is the web-site for (primarily)?– Some web sites are built for the benefit of the user– Some are built for the benefit of the site owner

(e-commerce, for example)

• Either way, you want everyone to find the site easy to use regardless of:– The technology they use– Their own level of technical expertise

• Don’t make assumptions– Their own disabilities

Current (Jan 2015) browser usage

Desktop

Browser usage (2015)

www.netmarketshare.com

Current (Jan 2015) browser usage

Tablet/mobile

Browser usage (2015)

www.netmarketshare.com

Technology• Some people�s browsers are old

• Not so many people use IE any more– Was completely dominant at one time– Still at 51% for desktops use, however.

• Much browsing of the web goes on on smartphones, tablets, phablets, e-readers, laptops, games consoles as well as desktops.

Not everyone has …

• The latest Flash plug in• The ability to view Flash on all players

(iPhones, for example)• JavaScript turned on (though most do)

• Cookies turned on– (It can be reasonable to require these two)

• A large high resolution monitor• 16 million (24 bit) colours

Multiple Devices• Some web sites work fine regardless of the device:

– Phone, Phablet, tablet, laptop, desktop PC or Mac, …

• Others are better suited to a computer version and a mobile version– Make it automatic – check the browser version with

Javascript navigator.useragentSee http://www.w3schools.com/jsref/obj_navigator.asp

– Think about download time and screen size

Browsers and CSS

http://www.w3schools.com/cssref/css3_browsersupport.asp

Not all browsers support all CSS features – check before you publish

Disability Discrimination

• UK disability discrimination law (act 1995, extended 2006) makes it a legal requirement to ensure that services – including those on line – are accessible by people with disabilities– Visual disabilities– Motor disabilities– Cognitive disabilities– Hearing disabilities

• The law is open to interpretation on what is accessible …– But you should try to ensure that web sites/apps you design are

clearly accessible.

W3C Standards

• The World Wide Web Consortium (W3C) has an accessibility initiative – the Web Content Accessibility Guidelines (WCAG)

• These should help you design a legal site

• See http://www.w3.org/WAI/

WCAG Principles• Perceivable - Information and user interface

components must be presentable to users in ways they can perceive.

• Operable - User interface components and navigation must be operable

• Understandable - Information and the operation of user interface must be understandable.

• Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

What Can You Do• Perceivable

– Provide text alternatives for non-text content. – Provide captions and other alternatives for multimedia.– Create content that can be presented in different ways,

including by assistive technologies, without losing meaning.– Make it easier for users to see and hear content.

• Operable– Make all functionality available from a keyboard. – Give users enough time to read and use content. – Do not use content that causes seizures. – Help users navigate and find content.

• Understandable– Make text readable and understandable. – Make content appear and operate in predictable ways. – Help users avoid and correct mistakes.

• Robust– Maximize compatibility with current and future user tools

Other Tips• An off–white background is easier for some people to read

text from than a pure white one

• Don’t use typographies that rely on text being a certain size and font – people will re-size their font for ease of reading

• CSS offers an easy way to offer variable font sizes

• Blind users have screen readers – these don’t work if the text is in images

• Some sites offer a text-only version. – This needs careful maintenance, however

Mouse-less Use

• Some users cannot operate a mouse

• Some people prefer not to use one

• Site navigation using the Tab key should work– Check the tab order of your site (use tabindex

attribute) – on both forms and links– Can forms be completed and submitted with the

keyboard alone?

Usability• Web design expert, Steve Krug says �Don’t make users

think�

• Users have an intuition about how a site should work –make sure yours follows that

• Users scan quickly over a page and click the first thing that might take them where they want to go

• Make sure it is the right thing!

F Pattern Scanning

• Users scan a web page in an F pattern:

Source: uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design

What Does the User Want?

• Think about the user:– There may be a number of types of user

• E.g. University website

– Why would each type of user visit your site?

• Make sure the top three (or so) answers have an instant, easy to find link to click

• What standard things do most web sites offer, where do they put them?

Logical, Consistent, Intuitive

• Many people have an intuitive idea of how a web site might be organised

• Sticking to this will help them

• Make the structure and organisation of your site obvious

• Keep pages from a given site consistent – each one with the same layout

Layout Options

A banner across the top to identify the site�s identity

Menu

Items

Down

The

Side

Can change in context

Tabs across the top, always fixed

Main content

• If content is long, users will need to scroll

• Consider whether the top and side bars should float or scroll (use CSS)

Footer – don�t make the user scroll to important stuff

Search

Consistency

• Which ever design you choose, the most important point is consistency

• Keep important menu or navigation buttons fixed

• Avoid changing the layout from page to page– Helps to give the pages on a website a feeling of

“belonging together” (example: University, others)

News

• Some sites have a �latest news� box on the front page

• Make sure:– Enough happens that is always has a recent entry– It is kept up to date

• Otherwise it gives a poor impression!

– It doesn’t interfere with use of the site

Navigation

• Choose a sensible structure for your site• Make the structure transparent to the user• Tree structure:

• Try to avoid making it too deep– (There will be other cross-links as well!)

Bread Crumbs

• As the user goes further down the tree, add to a list of the pages they visit on the way

• This allows them to re-trace steps or jump back to the top

• It also helps them build a mental picture of the site layout

• Highlight the tab they are currently on

KIS, KIC

• Keep It Simple– Confusing animations, scrolling option lists,

overcrowded pages, all make life harder for the user

• Keep It Clean– Don’t be afraid of

white space

Aesthetically Pleasing• Aesthetics can be a matter of opinion,

– but we all know a real mess when we see one!

• There is often a conflict between form and function –many usability principles can �inhibit� �design�

• Sometimes, easy to use is pleasing

• Fashions change– Fonts to use (comic sans? times? Impact?)– Button design: round, square, rounded– Layout

Don’t be Annoying• A few years ago, there was a trend for front

page splash movies – usually in Flash– Drove many users mad!

• The worst offenders have sound too– Sound is sometimes useful, but consider the user!

• This was all very annoying and has, on the whole, stopped now, thankfully

• Nobody wants to sit through an animation before using your web site and nobody is impressed– Applies to apps as well!

Web Forms

• You may want somebody to – register on your site, – buy a product, or – leave a message, or …

• This will involve a web form

• Here are some principles of web form design

Web Form Design• Ask the minimum you can get away with – long forms are

off-putting– Even the US Tourist Visa System tries not to be too difficult to use

• Clearly label required fields

• Use JavaScript to validate fields before the form is submitted where possible

• If fields are missing or invalid, make it clear what was wrong and re-populate the form – Don’t make them re-type everything else– Please?

It is Necessary?

• Do you really need users to register

• Ask late, and ask little– Let people get the most from your site before you ask them to

type in anything– If they have to register, can they complete other details later?

• Can they login with existing credentials?– Facebook– LinkedIn– Google– OpenID

Sound

• People expect web sites to be silent,– unless they are specifically looking for audio media

• Don’t use auto-play media with sound – you don�t know if somebody is in a public place / office / lab etc.– And they may not be expecting it either.

�Techy� Features• There is a temptation to include things on a web site

because– You just discovered how to do it– It is cool / clever– It uses the latest technology

• “the bleeding edge”

• But ask yourself– Does it enhance the user experience?– Does it enhance the user experience?– Will everyone be able to see it?

• Older browsers? Other browsers?

Testing• Usability – Can users do what they need?

• Navigation – how easy / intuitive is it?

• Functionality – does it all work?

• Validation – is the HTML and CSS valid?

• Client diversity – does it work on all browsers, all devices?

• Security – can it be hacked?

Usability Testing

• Use case scenarios – before you build a site, write some scenarios of a typical user visiting the site (use cases)– Why are they there?– What do they need to do?– How do they do it?– What difficulties might they have?

• During testing, ask people to achieve the tasks defined in the use case scenarios. Can they do it?– Let them talk through what they are doing and listen to them!

Navigation

• How many clicks does it take to get to each page?

• Is the whole route to every page obvious from the start, or are there dead-ends?

• Can you re-trace your steps from everywhere?

Functional Testing

• Black box testing – use the site like a user might– Does the site function as you hoped?– Do all the links go to a destination?– Can you fill in a form wrong?

• White box testing – look at the code– Run use case scenarios by following the code (not by

running it)– Look for logical errors

Validation

• Validate HTML• Validate CSS• Check Mobile Compatibility• Find Broken Links

Validate HTML

• There is a set of rules governing what is valid HTML

http://validator.w3.org/

Validate CSS

• The same with CSS

http://jigsaw.w3.org/css-validator/

Check Mobile Compatibility

• W3C MobileOK Checker

http://validator.w3.org/mobile/

MobileOK Checker

Offers advice on fixing each problem it finds

Find Broken Links

• Broken links are links that do not refer to a valid resource (page, image, etc.)

http://validator.w3.org/checklink

Broken Links

• The web changes all the time, so check your links regularly

Final Validation

• Spell check

• Proof read

Client Diversity

• Test on a number of web browsers and a number of devices

• This can be a little difficult– Make sure you test on Firefox, IE, Chrome, Safari– Try it on a smartphone (different types) and a tablet

(different types)– If you are serious, maintain a set of separate

installations of different versions of each browser –you may need different machines

Multi Browser Tools• There are tools that let you change the version

of the browser you are using

• MultiFireFox – allows multiple versions to run

• IE8 and IE9 have a facility to emulate IE7

• Microsoft have a product called SuperPreview, part of their Expression development kit

http://www.microsoft.com/en-gb/download/details.aspx?id=2020

Turn it All Off• Turn off cookies and JavaScript

• Use a machine without any add-ons installed

• Does the site work at all?

• Does it degrade gracefully (apologise to the user that it does not work unless they turn on cookies, for example)?

• Change your screen resolution and colour quality

• Change the window size

Change Your Screen Security

• Does your site have any user–provided content?– Comments page, wiki, forum, etc.

• People can enter anything they want– HTML with spam links– Images (possibly offensive)– Javascript – this can completely re-design your page

and trick your visitors

Defence

• Strip out HTML tags before displaying anything anybody types

• Validate all entries at the server side (technically outside the scope of this course, but here is what it means):– You can’t stop people sending whatever data they

want to your web server– You can clean, delete or ignore it when it arrives –

and you MUST

Testing

• Imagine a guest book for people to comment after visiting a B&B

• Type Buy Viagra here <a href=…>

• and submit it – does the link make it onto the message book?

Summary

• Good web design helps the user get what they want, quickly and simply

• Sometimes technology helps, sometimes it hinders

• The same is true for graphic design elements

• Testing should cover usage, validation and security