1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx

1 : https://www.eeoc.gov/eeoc/newsroom/release/10-7-19.cfm
2 : https://www.eeoc.gov/eeoc/newsroom/release/11-29-17c.cfm
3: https://www.eeoc.gov/eeoc/newsroom/release/10-2-19b.cfm
4: https://www.eeoc.gov/eeoc/newsroom/release/12-5-19a.cfm
5: https://www.eeoc.gov/eeoc/newsroom/release/10-22-19.cfm
6: https://www.eeoc.gov/eeoc/newsroom/release/10-2-18c.cfm
Usability Test Template
1. Create a document with the following areas. You will use
your document during the usability test next week.
2. Goal of the site:
Explain the goal of your site in 2-3 sentences.
3. User testing detail:
Name, phone, age, employment, special interests, and any other
items you are interested in.
4. Pre-test questions:
Create three questions to ask your tester prior to the test. These
questions should be aimed to gather information regarding your
test as a potential user of the site.
5. Test tasks and schedule
· Write a series of steps for the user to follow in using your site.
At a minimum the user should be able to navigate the site,
check out the specials and subscribe to the newsletter.
· Attempt to gain information regarding how the user feels

about the site.
· Use the “Talk Aloud” method of gaining user feedback.
6. Post-test debrief:
Come up with 3 questions to ask the user regarding their input
about the site
7. Usability Scale
Use these items to rate your test’s feeling about the site. You
may use the items as questions in the post-test debrief.
· Learnability: How easy is it for users to accomplish basic
tasks the first time they encounter the design?
· Efficiency: Once users have learned the design, how quickly
can they perform tasks?
· Memorability: When users return to the design after a period
of not using it, how easily can they reestablish proficiency?
· Errors: How many errors do users make, how severe are these
errors, and how easily can they recover from the errors?
· Satisfaction: How pleasant is it to use the design?
Design Principles
Some content from:
The Principles of Beautiful Web Design
(Jason Beaird and James George)
Principles of Web Design
(Joel Sklar)
1

Learning Outcomes
apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
2
Design Process
somewhere between art, science, and problem solving
the process of creating a design comp
can be boiled down to:
discovery
exploration
implementation
3
What's a comp?
the word comp is an abbreviation of the phrase “comprehensive
dummy” –
a term that comes from the print design world.
complete simulation of a printed layout created before the
layout goes to press.
in Web design, a comp is an image of a layout that’s created
before we prototype the design in HTML
4

Discovery
meeting and learning about the client(s)
gathering information, desires, goals…
What questions should you ask a client?
5
Exploration (using the information from the client)
put yourself in the shoes of the website visitors and ask yourself
what they are looking for
thinking about buying a product…
what do you need to know before you buy?
signing up for a service…
where would you learn about the different offerings and which
option you need?
what is the clearest title possible for page x?
how many steps does it take to reach page y?
6
Exploration
Information Architecture (IA)
focus on organising the content and flow of the website into a
logical structure
make a list of all the bits and pieces of the site and start
arranging them into groups
use paper, sticky notes or a whiteboard –
or a digital tool that lets you move things easily
turn this into a flowchart (more on this later)
every box is a page
every line (arrow) is a link
the order matches the site

7
This is a very brief summary – more to come in the next lecture.
7
Implementation – Creating a layout
use… paper!
too easy to lose focus when using a computer
sketch a few possible layouts
use (something like) Photoshop to block out the planned areas
experiment with foreground and background colours
keep tweaking until you have a comp you can show the client
8
Defining Good (& Bad) Design
two ways of looking at it:
strict usability angle
functionality, the effective presentation of information, and
efficiency
purely aesthetic perspective
artistic value and visual appeal of the design
goal: maximise both
9
Design is about communication
the elements and functionality of a finished website design
should work together, so that:

users are pleased by the design but drawn to the content
users can move about easily via intuitive navigation
users recognise each page as belonging to the site
10
11
Talk about the following website (screenshot)
What do you notice first?
What is good/bad about it?
…
12
http://www.harmonyrepublic.com/
The richly textured, colorful illustrations flow around the
structure of the page, which is embellished with hand-drawn
navigation and a simple layout. The abundance of handcrafted,
organic elements creates contrast and helps to draw your eyes to
the featured artists without interfering with the pages’
readability or how it’s organized.
12
Good Navigation Design
main navigation should be clearly visible
each link should have a descriptive title

help users recognise where they are:
links change appearance when hovered over
indicate the active page or section
13
Good Navigation Design
make content and navigation clear, dominant
secondary navigation, search fields, outgoing links should not
be dominant features
make these easy to find,
separate them visually from the content,
this allows users to focus on the information, yet they’ll know
where to look when they’re ready to move on to other content.
14
Cohesive Design
have a unified/cohesive theme or style
helps hold the design together across whole site
users should never think they've left the site
15
How can we make site designs cohesive?
16
Although the content blocks on these pages are divided

differently, there are several visual indicators that let users
know that these are pages from the same site. Much of this unity
is due to the repetition of the identity and navigation blocks.
The consistent use of a very limited color palette (black, gray,
yellow, and red) also helps to unify the pages.
16
How to create a cohesive design:
consistency and repetition create smooth transitions (no "jumps"
in layout)
reinforce identifying elements
e.g. logo in the same top-left spot on every page
place navigation elements in the same position on each page
use the same navigation graphics throughout the site
use a consistent colour scheme
17
17
Testing Smooth Transitions
One way to test for smooth transitions is to click through
several pages of the site, then use back and forward shortcut
keys to change pages without having to move the mouse or
scroll and you'll quickly see if any page elements are in
different spots from one page to another
18

Web Page Anatomy
19
Web Page Anatomy
containing block
body or container div...
can be fluid (flexible) or fixed
flexible: http://en.wikipedia.org/wiki/Main_Page
fixed: https://www.facebook.com/groups/1547903532143110/
you can have a combination of both by using % widths and
pixel-based min-width and max-width
20
Flexible Page Layouts
Pros:
user gets to control view
adapt to different screen resolutions (devices)
usually less scrolling for user
Cons:
harder to design - must account for the movement of elements at
different resolutions
at high resolutions, your content can break apart or be hard to
read
21
Fixed-Width Page Layouts

Pros:
easier to design - allows Web pages to be designed like print
pages
designer has more control
Cons:
user can not control view
don't adjust to make use of larger screen sizes
at lower resolutions you get horizontal scrolling
22
no right or wrong layouts - based on your content whether you
are going to scan or scroll the page
Web Page Anatomy
logo
identity block
should usually be at top
navigation
horizontal or vertical
close to the top – definitely above the "fold"
23
The Fold
this metaphor is derived from
the fold in a newspaper
the end of one screen –
where the content of a page ends before users scroll down
ensure important content is above the fold so users don't miss it
problem page: https://secure.jcu.edu.au/app/studyfinder/
http://www.cpr-promotions.com/dead-air-in-radio-webdesign

24
The studyfinder app (https://secure.jcu.edu.au/app/studyfinder/)
shows the results below the page fold, so it looks like nothing
has happened.
24
Web Page Anatomy
content
content is king! Make this the focal point
needs to be designed ("information design")
footer
bottom, usually contains ©, contact, legal, links
some designs use minimal footers (https://twitter.com/), others
have expansive ones with lots of links
(https://www.docker.com/, http://yodiv.com/)
25
Active Whitespace
white spaces are the blank areas of the page
good use of whitespace guides the reader, reduces clutter and
clarifies organisation
deliberate whitespace is "active whitespace"
passive whitespace is normally the result of mismatched shapes
don't add space by entering blank line breaks, instead - use CSS
margins and padding
26

27
Principles of Web Design 5th Ed.
28
Grids
longing for structure and ideal proportion is deeply ingrained in
human nature
grids are an essential tool for layout design
help you create alignment easily
29
https://css-tricks.com/snippets/css/complete-guide-grid/
https://gridbyexample.com/examples/
Website to learn to create Grids
30
Grids
The black lines are not visible, just conceptual
30

Grids
31
The pink lines are overlaid here to show the 16-column grid
used
the Pythagoreans observed a mathematical pattern that occurred
so often in nature that they believed it to be divinely inspired.
ϕ = 1.6180339 (1.62)
e.g. sunflower's centre is total diameter / ϕ
thirds is a close-enough approximation
Golden Ratio & Rule of Thirds
32
Rule Of Thirds in Photography
33
Rule Of Thirds in Photography
34
Start with a grid. Make a wireframe
35

Note the use of thirds (3 columns) in a few different ways
35
Grid Systems for Websites – CSS Frameworks
these frameworks provide a bunch of CSS classes to work with
out of the box
based on (responsive) grids
unsemantic - http://unsemantic.com
foundation - http://foundation.zurb.com
bootstrap - http://getbootstrap.com
36
We are not using any of these in the subject, but you can learn a
lot from them
36
Balance - Symmetrical
37
Balance - Asymmetrical

38
Unity
– all the design elements work as a whole
two ways to achieve unity:
proximity
repetition
39
Unity – Proximity
placing elements closer together (compared to other elements)
makes them appear related
40
In the column on the left, the word “Unkgnome” is equidistant
from the top and bottom paragraphs. The result is that it looks
more like a separator
than a heading for the next paragraph.
In the second column, the “Gnomenclature” heading is placed
closer to the paragraph that follows it. In accordance with the
rules of proximity, this heading appears to belong to that block
of text.

40
Unity – Proximity
What's wrong with this form?
This is much better:
41
.proximityDemo input { margin-left: 1em; }
The first example has the text labels and radio buttons all the
same distance apart, so looking in the middle, you can't tell if
the button for, say 17-25 is to its left or right.
Adding just a little margin on one side groups the elements
enough to solve this problem.
41
Unity – Repetition
reuse elements to create unity
42
the repeated thumbnail images with the views, comments & like
icons create a sense of unity
42
What draws your attention?
43

Emphasis
making a particular feature draw the viewer’s attention
often you want an item to stand out
a button for users to press
an error message
…
make that element into a focal point
44
placement
the direct centre is the highest value screen real estate (users
look there first)
top-left is second
Placement Examples
45
Placement
know what expectations your user might have about your
navigation and content
users have come to expect common elements of a Web page in
certain locations
46
What are some of these expectations?
When is it a good idea to break these conventions?

There are usually no good reasons to break common
conventions unless your site is intended to be unconventional –
you want people to find it awkward or difficult.
46
47
I would add contact details in the footer.
47
Emphasis
continuance
your eyes keep going in one direction when they start looking
that way
place call-to-action elements at the end of 'lines' of elements
isolation
make elements stand out by moving them away from others
(opposite of proximity)
proportion
differences in scale draw attention
48
Emphasis
Contrast
juxtaposition of dissimilar graphic elements
most common method of creating emphasis

the greater the between a graphic element and its
surroundings, the more that element will stand out
can be created using differences in:
colour
size
shape
49
difference
What draws your attention?
50
Call To Action
(CTA)
The bright orange sign up button is the only orange thing in a
page of blues…
50
Standard "bread and butter" Layouts
left-column Navigation
51
Right-column Navigation
52

Three-column Navigation
53
Information Design
soooo important!
don't just design the frame/layout for your content to sit
inside…
design the content sections as well
existing print-designed content (like a client might provide)
needs to be re-formatted
line length, font, layout do not transfer well
print = portrait, screen = landscape
54
From this…
55
To this… (almost the same content)
56
What can we do?

56
Information Design
information should be easy to read and legible
break text into reasonable (logical) segments
include logical headings where appropriate
helps focus the user's attention
breaks up blocks of content
control the width of your text
paragraphs that are too wide (lose your place) or too narrow
(eyes move too much) are harder to read
57
Example – Contact Information
58
Contact Us
Phone (07) 4781 4619
Fax (07) 4781 4629
Contact UsPhone (07) 4781 4619Fax(07) 4781 4629
Contact UsPhone (07) 4781 4619Fax(07) 4781 4629
This is a great example of a small change that makes a big
difference.
Without adjusting fonts, but only aligning the phone numbers,
you can quickly see that the fax number is the same as the
phone number except for one digit. This information is there in
the first presentation, but it is not readily clear.
Design your information carefully and with the goal of
communicating as clearly and quickly as possible.
58

How Much Content Is Too Much?
don't overcrowd your pages/sections
be conscious of the user's "cognitive load"
don't make them think!
too much can overwhelm people
carefully divide content into smaller sections
not less content.. still the same content,
just broken up appropriately
probably with pictures…
people like pictures
59
Designing for the User
keep your design efforts focused on your user
find out what users expect from your site
if you can, survey or watch them
what do users want when they get to your site?
60
What's the most ‘successful’ (most used) website in the world?
How is it designed?
Ask what people think of this first statement the book author
makes? Is "Solely" too narrow? Should we focus on the client or
the designer goals as well…?
60
2-61

Google's home page in 2007, then in 2011. What's changed?
What's the same? Why?
Google's home page in 2007, then in 2011. What's changed?
What's the same? Why?
2-62
A better demonstration of the similarity/change
The previous page was not the best example of showing the
differences, because the screenshots didn't line up.
Here is a better way to show this, since you can actually see
things like the difference in the logo size or the location of
links, etc.
Design for Interaction
think about how the user wants to interact with your
information
design for your content type - will the user:
read or
scan
design pages for reading or scanning based on the content type
63
64

(scanning)
64
65
This is a different page in the same website.
Notice the cohesion.
(reading) – same site
Notice the use of a grid – this page uses 2 of the 3 columns for
content - very common and effective layout idea
65
Keep a Flat Hierarchy
don't make users navigate through too many layers of
information
create content sections organised logically
use consistent navigation
consider providing a site map or
search facility for larger sites
follow the three click rule*
66
*It's less important how many times people have to click than
how much they have to think.
66

Use Hypertext Linking Effectively
let users move between pages as they please
make it easy for them
provide plenty of navigation options
use contextual (in context) linking
avoid the use of “click here” (why?)
67
"Click here" is a problem for screen readers, that read the text
of the link, not the content around it. It's harder for scanning. It
doesn't get indexed well by search engines that rate content in a
link more highly.
67
68
Lindsay's Law – if the user would want to click there,
let them click (make it a link)
Demo: http://www.jcu.edu.au/itr/JCUPRD_049017.html
The demo (download Sophos from JCU) shows how not to do
this… follow the link (login required) and try and download the
software (that's the main thing someone would want to do)… the
link is not where you'd expect it (where it says "download").
Did you notice the left nav change? I didn't.
68
Design Principles
aesthetic design might never be your thing, but you can learn
and implement these clear principles
notice what you do and don't like on the Web and in other areas

of design (everywhere!)
mimic good design in your own work
without simply copying it
69
“Good artists copy, great artists steal.”
Pablo Picasso
Design trends & cutting-edge designs
www.assembly.com
www.tedxguc.com
dougaitkenthesource.com
www.swansea.ac.uk/bright-futures
70
70
Summary
be able to apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
recognising why sites look “good” or “bad” is helpful
71

HTML and CSS
Some content from:
Build Your Own Website The Right Way Using HTML & CSS
(Ian Lloyd)
(Joel Sklar)
1
Learning Outcomes
demonstrate best practices in creating standards-based websites
learn the basics of the HTML and CSS languages and how they
work together
appreciate some of the history of HTML and the current HTML
5 standard
2
Remember…
these notes are not meant to be exhaustive or stand-alone
you should read the chapters in the books and watch the videos
online – preferably before the lecture – to pick everything up
… and practise making small pages and sites – so it sticks!
3

Creating Web Pages with HTML
HTML is a markup language (not a programming language) that
lets you specify the structure and content of a Web page
markup elements define each section or item
this <h1> element defines a first-level heading:
<h1>What is HTML?</h1>
4
Styling Web Pages with CSS
CSS is a style language (also not a programming language) that
lets you modify how a Web page appears
the following style rule makes all heading 1 elements blue
h1 { color: blue; }
5
Separation of Form & Function
Content & Structure = HTML
Style = CSS
Dynamic Functionality = JavaScript, PHP…
these should be used appropriately
don't inextricably link content and style
e.g. make headings headings
top-level headings must be <h1>, content is structured correctly
then change the style to make it look like whatever you want

… i.e. if it's too big, don't make it <h2>… that's incorrect
(<h2> is second level headings with small font size)
6
7
Separation of Form and Function
Form = what it looks like
Style
CSS
Function = what it is
Structure & Content
HTML
Structure of a Basic Web Page
an HTML file contains content text "marked up" with HTML
CSS code can be in the same file or in a separate file
the code itself does not appear in the browser
the browser interprets the HTML & CSS and displays (renders)
the results
each browser interprets HTML & CSS in its own way, based on
its rendering engine
it is essential that you test your work in different browsers
different programs and different versions
8
9

Structure of a Basic Web Page
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Demonstration Page </title>
</head>
<body>
<h1> Sample Heading </h1>
<p> Simple sample paragraph </p>
</body>
</html>
10
the document type, or doctype for short, specifies the rules for
the document language
the <html> tag is the root element
the two main sections are the <head> and <body> elements
the <head> section is the container for all of the descriptive
information about the document (not displayed)
the <body> section includes the content that the user will see in
their browser
In the example above, the meta tag tells the browser which
character set to use—specifically, UTF-8, which includes the
characters needed for web pages in just about any written
language.
To be drawn on… note: element opening and closing tags
10

HTML Code
elements (tags) - the basic building blocks of HTML
attributes – extra information for elements (properties)
most elements have opening and closing tags
some are "void" or "empty": no content or closing tag
(e.g. img, br, hr, meta, input)
11
Add “value” to this – “en” is a value (of an attribute)
11
HTML Elements
an HTML element starts and ends with tags –
the opening tag and the closing tag.
a tag consists of an opening angled bracket (<), some text, and a
closing bracket (>). e.g. <p>
inside a tag, there is a tag name; there may also be one or more
attributes with values. e.g. <p class="test">
non-empty elements have content in them,
should have a closing tag. e.g. <p> Content </p>
empty elements can not contain content
should not have a closing tag. e.g. <br>
<p class="test"> This is a test paragraph. <br>With two lines.
</p>
12
HTML Attributes
HTML elements can have a range of attributes, depending on
which element you’re dealing with

each attribute is made up of a name and a value
always written as: name="value"
some are optional, some are compulsory –
e.g. the img (image) element requires a source file reference
<img src="photo.jpg" height="100" width="133”>
13
Learn by Example
since HTML and CSS (and JavaScript but not PHP) are sent to
the client, anyone can read the code
great way to learn
but… most Web pages don’t use best-practice techniques, so
don't trust that everything you see online is good
14
Head section <head>
not the same as headings <h1> or headers <header>…
contains information about the page, not information that will
be displayed on the page
<title> element – where do you see the title displayed?
avoid "Untitled document" pages
15
Body section
<body>
where everything to display in the browser 'canvas' goes

all content elements (p, div, img, a, head, table, etc.) must be
inside the body element
16
Some HTML Elements (just a
selection)ElementDescription<h1>, <h6>Heading – the number
defines the level; 1 = most important<ul>, <ol>Unordered
(bulleted) list, ordered (numbered) list<li>List item – must be
found inside either ul or ol<a>Anchor/link – href attribute
specifies URL to link to<img>Image – src, height, width, alt
attributes<strong>Strong importance (usually shown as
bold)<em>Emphasis to enhance meaning (usually shown as
italics)<div>Division – logical “block-level” section, used to
apply styles to<span>Span – logical “inline-level” section of
content, used to apply styles to<header>, <footer>Header,
Footer – logical sections (like div) for the header and footer of
a section<script>Script – used to embed or reference an
executable script, usually JavaScript
17
https://developer.mozilla.org/en/docs/Web/HTML/Element
Learn these and more by practice, not memorisation
Brief History of HTML
Tim Berners-Lee proposed HTML at the European Laboratory
for Particle Physics (CERN) in 1989
Berners-Lee joined the ideas of the browser, a markup language
(HTML), and a communications protocol that allowed hypertext
linking

people could read and create documents easily using HTML
HTML is an application of the Standard Generalized Markup
Language (SGML), a standard system for specifying document
structure
18
A Need for Standards
things got messy in the "bad old days" (mid 90s) with browser-
specific HTML and structural elements being used for display
information
using tables for layout and <font> are classic examples
more data-based online applications started being developed
(e.g. online banking), which HTML was not suitable for
the World Wide Web Consortium (W3C), founded in 1994 at
MIT, sets standards for HTML and other markup languages
jointly developed standards, rather than ones dictated by one
vendor, benefit everyone
19
A Proposal for HTML5
the Web Hypertext Application Technology Working Group
(WHATWG) started HTML5 in 2004 (first public draft 2008)
HTML5:
supports standards-based coding
compatible with HTML and XHTML
compatible with CSS
supports new page layout elements like <header>, <nav>
application and media compatible
e.g. video without Flash or other plugins

20
Working with HTML5
HTML5 attempts to address shortcomings of HTML
addresses needs of modern Web design
offers new features:
logical layout elements
rich media
support for applications (e.g. browser-based data storage)
removes old features:
all display elements removed in favour of CSS
framesets are gone
21
Working with HTML5
HTML5 offers two syntax options:
loose - HTML-compatible syntax
more relaxed syntax
code shortcuts allowed
e.g. <p class=test>One<p>Two<br>…
strict - XML-compatible syntax
consistent with XHTML
uses XML syntax rules
e.g. <p class="test">One</p><p>Two<br /></p>…
22
Creating Syntactically Correct Code
(Below are required for any syntax)

documents must be well-formed
all tags must nest properly and not overlap
(Below are only required for strict syntax)
use all lowercase for element names
always use closing tags
empty elements are marked with a closing slash
attribute values must be contained in quotation marks
23
Working with HTML5
we don't require a particular syntax in this subject.
if it validates with W3C validation tools (validator.w3.org),
that’s fine
“Better” code makes pages work better.
you should prefer the sort of code that tools like PHPStorm,
Brackets and Dreamweaver make, which is closer to strict
e.g. always close non-empty elements like <p>
but don’t use closing slashes for empty elements like <br>
do quote attribute values like <img src="image.png"…
24
Choosing the Correct doctype
always use a doctype statement
using a doctype forces the browser to display in standards mode
standards mode = browsers try to give documents the
specification-wise correct treatment
quirks mode = browsers violate contemporary Web format
specifications in order to avoid “breaking” pages authored
according to practices that were prevalent in the late 1990s
the standard doctype statement for HTML5:
<!doctype html>

25
https://hsivonen.fi/doctype/
25
New Elements in HTML5
HTML5 has a number of new elements
not all elements are supported by current browsers (most are)
see www.caniuse.com
test new elements carefully
many elements have been removed in HTML
mostly those involving presentation effects … why?
framesets are no longer available
26
Attributes in HTML5
elements can contain attributes that set properties
global attributes can be applied to any element
including class, id, style (all for CSS), lang, title, accesskey
earlier versions of HTML had more attributes
HTML5 has fewer attributes because of CSS
e.g. align and border attributes for div elements
http://www.w3.org/TR/html5/obsolete.html
27
Using HTML5 Elements for
Page Structure

most Web pages contain some common sections:
header
navigation
articles
figures
footers
sidebars
these are commonly marked up with <div> elements and
appropriate id or class names
e.g. <div id="header”> … </div>
28
Using HTML5 Elements for
Page Structure
The HTML5 elements for page layout include:
<header> contains the page header content
<nav> contains the navigation elements for the page
<article> contains the primary page content
<section> defines sections or groupings of page content
<aside> contains additional content such as a quote or sidebar
<figure> contains images for the article content
<footer> contains page footer content
29
Interactive Capabilities in HTML5
audio and video
new <video> element, video player built in to browser
this means you don't need plugins like Flash Player
drawing <canvas>
you can use JavaScript to create animations in the canvas
background application processing

local data storage
30
Using Good Coding Practices
create code that ensures the greatest standards-compliance,
presentation, compatibility and usefulness of your content
stick to the standards
use semantic markup
validate your code
31
Stick to the Standards
stick to the W3C standards
separate content from presentation
plan for your sites to be accessible to different devices
standardised coding and design is more accessible
32
Use Semantic Markup
semantic markup identifies the intended use of document
sections (what it is)
accurately describes each piece of content
until recently, this logical (correct) use of HTML elements was
often ignored
document elements must match the meaning and usage of the
document sections:
<p> for paragraph, <h1> for first-level heading, and so on
<h2> isn't just a smaller heading, it's a second-level heading
(imagine book chapters, sections, sub-sections…)

33
What is Semantic Markup?
Semantic markup is a fancy way of saying you can use HTML
tags to tell search engines exactly what a specific piece of
content is.
Validate Your Code
valid code conforms to the usage rules of the W3C
valid code enhances browser compatibility, accessibility, and
exchange of data
the most common mistakes include:
no doctype declaration
missing closing tags
missing required attributes like alt in <img> elements
incorrect tag nesting
unquoted attributes
34
http://validator.w3.org/docs/why.html
34
Exam Questions
What are the (loose) syntax errors in the following code?
<a href=testq.html id="test">Link</a>
<p>I am <em>very <strong>happy</em></strong> now</p>
My favourites: <li>James</li> and <li>Paul</li>
<center border="1">Here’s more</center>
<h1>Most important</h1><h4>Not so important<p>Normal
35
Answer:

https://validator.w3.org/check?uri=http%3A%2F%2Fditwebtsv.j
cu.edu.au%2F%7Esci-
lmw1%2Ftest.html&charset=%28detect+automatically%29&doc
type=Inline&group=0
35
CSS
Cascading Style Sheets
Adding Style with CSS
web designers use Cascading Style Sheets (CSS) to add
presentation information to Web pages
CSS lets you control the presentation characteristics of an entire
website (multiple pages) with a single style sheet
can also have multiple sheets for different devices
presentation properties are separate from the content
37
The Development of CSS
CSS was developed to standardise display information

HTML = what it is
CSS = what it looks like
CSS was slow to be supported by browsers
newer browsers offer more complete support
latest release is CSS3
38
CSS Style Rules
style rules express the style characteristics for an HTML
element
it's important to note that style rules apply to HTML elements
if you want to apply them to something else, you need to make
that into an element (e.g. with div or span)
a set of style rules is called a style sheet
usually a separate file with .css extension
39
39
CSS Style Rules
rules are composed of: a selector and a declaration
the selector specifies the element to which the rule is applied
the declaration specifies the exact property and values
40

40
Combining CSS Style Rules with HTML
You can combine CSS with HTML in three ways:
inline style - applies only to this element
internal style sheet - applies to whole page
external style sheet - applies to multiple pages
41
"multiple pages" = wherever it's specified
41
Using External Style Sheets
external style sheets let you specify rules for multiple pages
these are just text documents with .css extension that contain
style rules
this is the preferred method in most cases
42
<head>
...
<link href="styles.css" rel="stylesheet” type=“text/css”>
</head>
will allow you to create the style sheet only once and call upon
it from any HTML page
h1 {color: red;}
Body {background-colour:black; colour: purple}

In the styles.css file (external)
in this CSS file you must write exactly what you would have
written inside the STYLE tags - do not attempt to re-write
STYLE tags inside the new document because the style was
already identified in the LINK tag.
Using Internal Style Sheets
contained within the <style> element, which is contained within
the <head> section
only affect the document in which they reside
43
<head>
...
<style type="text/css">
h1 {color: red;}
</style>
</head>
this useful if you want to override the default for a particular
element
Using Inline Styles
you can define styles for a single element with the style
attribute
the style HTML attribute can be used to override a style that
was set at a higher level
the style attribute is useful for testing styles during
development, or to specify a property that will only ever apply
in one situation (unlikely)
44

<h1 style="color: blue">Some Text</h1>
Understanding The Cascade
”cascading" means that multiple style sheets and style rules can
apply to the same document/element
only one rule can apply to an element for a given property
any number of rules can apply for different properties
the CSS cascading mechanism determines which rules apply
based on three variables:
specificity of the selector
order of the rule in the style sheet
use of the important keyword
45
Using Inheritance to Simplify Styles
elements in an HTML document are structured in a hierarchy
parent elements contain child elements
e.g. <li> will be a child of <ul> or <ol>
elements can be both parent and child elements
the CSS properties inherit from parent to child
e.g. if you make the <ul> blue, the <li> in it will also be blue
you can style multiple document elements with just a few style
rules using inheritance
46
watch video- https://www.youtube.com/watch?v=aOScN7hzzBQ

Using Inheritance to Simplify Styles
Individual style rules:
h1 {color: red;}
p {color: red;}
ul {color: red;}
em {color: red;}
li {color: red;}
Or using inheritance:
body {color: red;}
47
body is the most useful/common element (selector) to set your
default page styles like background colour and font – inherited
by everything else
47
CSS Selectors
48
CSS Attribute Selectors -
https://www.youtube.com/watch?v=aMAkpJSq3rk
CSS Combinator Selectors -
https://www.youtube.com/watch?v=L6Y9Yltj15A
CSS Standard Selectors -
https://www.youtube.com/watch?v=7odP4_5wO3c
Excellent Videos to watch:

Using Type Selectors
the selector determines the element to which a style declaration
is applied
type selectors are the simplest form of selector
they select every instance of that element in the document
in the following example, all h1 elements will be red
49
h1 {color: red;}
Grouping Selectors
you can group selectors to which the same rules apply
specific style rules:
h1 {color: red;}
h2 {color: red;}
grouping selectors (note the comma):
h1, h2 {color: red;}
50
Combining Declarations
you can state multiple property declarations for the same
selector
individual style rules:
p {color: blue;}
p {font-size: 125%;}
combining declarations:
p {color: blue; font-size: 125%;}
51
there is no real standard for CSS formatting (e.g. indenting)-

using what Dreamweaver makes is a good idea.
Using Descendant Selectors
you can select elements that are descendents of other elements
selecting only <em> elements that are contained somewhere
within <p> elements (note the space):
p em {color: blue;}
<p>Default <em>this selected</em></p>
<em>this not selected</em>
<p><div><em>is selected</em></div></p>
In the last line, the <em> is a descendant ("grandchild") of the
<p>, but not a child. It is selected by the descendant selector.
52
CSS Selectors
53
Using Child Selectors - Combinator
You can select elements that are direct children of other
elements
Selecting only <em> elements that are contained directly within
<p> elements (note the >):
p > em {color: blue;}
<p>Default <em>this selected</em></p>
<em>this not selected</em>

<p><div><em>this not selected</em></div></p>
In the last line, the <em> is a descendant ("grandchild") of the
<p>, but not a child. It is not selected by the child selector.
54
child element of p
Using Adjacent Sibling Selector - Combinator
55
p element direct adjacent sibling of h3 ( comes after it)
Using General Sibling - Combinator
56
all p elements after h3 will be targeted
Using the Universal Selector
Universal selector lets you select groups of elements
Selecting all children of any div elements:
div * {color: blue;}
<div>...<em>this selected</em></div>
<div>this not selected</div>
57
What would * div select?

* div would select divs that are descendants of anything…
which should be all of them, since they would all be inside body
at least.
57
Using the Class Selector
CSS style rule:
.intro {font-size: 125%;}
used in HTML:
<p class="intro">This is the first paragraph of the
document.</p>
58
Using the Class Selector
the class selector lets you write rules and give them a name
use logical names like warning, not style-based names like
redText (which might become less meaningful if styles change)
you can apply that name to any element you choose using the
HTML class attribute
the dot (.) flag character indicates the selector is a class selector
e.g.
.warning { color: red }
applied using:
<p class="warning">… or <h1 class="warning">…
59
Using the id Attribute Selector
CSS style rule:

#copyright { color: white; }
used in HTML:
<p id="copyright">copyright info</p>
60
Using the id Attribute Selector
id is just like class, except:
id refers to a unique (only one) instance of the id attribute value
within a document
multiple instances of the same id is invalid
id uses a hash (#) flag character instead of period (.)
the id attribute should be used to identify parts of the page that
only occur once, e.g. logo, copyright…
class is used for repeatable sections/styles, e.g. pullquote,
highlight, errormessage…
61
# is not a "hash tag" in this context
61
Using the <div> and <span> Elements
the <div> (division) and <span> (span) elements are designed to
be used with CSS - <div> tag is block level tag and <span> tag
is a inline tag
they let you specify logical sections within a document that
have their own name and style properties
div is used to divide up a web page – to provide a definite
structure that can be combined with CSS to great effect

it adds a break before and after the contained text
it is a block-level element
62
Working with <div> elements
use <div> with the class or id attributes to create logical, block
divisions on a Web page
CSS style rule:
#column {
width: 200px;
height: auto;
padding: 15px;
border: thin solid;
}
Used in HTML:
<div id="column">This division is styled</div>
63
Could also use:
div#column as the selector
(What's the difference?)
Working with <span> Elements
the span element lets you specify inline elements that have their
own name and style properties
in-line elements reside within a line (of text)
div = block - adds line break before and after
span = inline - no breaks, can't contain block elements

<span style="display:block"> is identical to div :)
64
Working with Span Elements
CSS style rule:
.{
color: white;
background-color: black;
}
used in HTML:
<p>A <span class="inverse">Wonderful</span>site.</p>
65
Could also use:
span.inverse as the selector
Would only apply to spans with
the inverse class
Soooo much more…
make sure you're reading and watching the book and video
resources
take notes
and… practise!
66
1. Exam-style Question (Precedence)
What colour will the text "here" be?
body {color: blue;}

.one {color: green;}
p {color: red;}
<body><p class="one">here</p></body>
67
2. Exam-style Question (Precedence)
What colour will the text "here" be?
body {color: blue;}
.one {color: green;}
p {color: red;}
<body><p class= "body">here</p></body>
68
Summary
use best practices in creating standards-based websites
HTML and CSS are the core languages used to make websites
HTML is used for content and structure markup (function)
CSS is used for presentation (form)
follow the standards in how you use these
69
Development Process
& Planning
Some content from:

Deliver First-Class Websites 101 Essential Checklists
(Shirley Kaiser)
(Joel Sklar)
Note: This lecture is especially relevant to your first assignment
CP1406/CP5638
Learning Outcomes
apply user-centred design principles and methods to the whole
process of the development cycle
appreciate the value of planning and how it really can help you
make better websites… really!
be able to clearly articulate:
website goals and target audience
be able to organise content (information architecture) and create
a flowchart
2
Planning
planning is an important part of any project
larger projects need a project manager
a good project plan should be helpful
a plan is only good if you actually use it
the plan should answer the questions you will ask later on
remember, the plan informs development
know the goal so you can build a
goal-driven website

3
Planning
allow plenty of time to plan and develop your site
beat the deadline – not “last minute”
visit other websites & take notes
good and bad organisation & design
especially study the competition
think about the type of content you're presenting and look to the
Web for examples of how best to present it (follow conventions)
4
Effective Organisation
break down your website project into its major phases
initial planning
content planning
design and development planning
implementation
after launch
within each major phase, create smaller,
more manageable steps
5
There are lots of variations of project phases. Different people
do and name things differently
6

Web development is not really any different from software
development
6
Effective Organisation
prepare and follow a task list based on the above task
breakdowns. Identify:
what needs to be done
who will do it
when it will be done by
create a realistic schedule... and stick to it
realistic means planning for extra time
(over-estimate the time it will take)
7
Identify Your Goal(s) – Starting Point
every site has at least one goal
designing to best achieve that is your goal as a Web designer
and developer
examples
sell new or existing products
promote your business and develop your brand
reduce printing costs or call centre overhead
... what else?
8
Identify Your Goal(s)
can you write a short (one- to three-sentence) mission statement
that clearly states the site's goal(s)?

what does the client hope to gain from creating and maintaining
a Web site?
how will the success of the site be judged?
this question helps check if the goal is valid
if you can't measure the success of the mission,
you should change the mission until you can
9
Compare These Mission Statements
Training Zone is a company that has been around for over 150
years. They specialise in training people in IT and management
skills. This website presents information about the company, its
history, some sample articles, contact information and links.
The website is intended to increase revenue for Training Zone
by promoting the services offered by the company in order to
get people to sign up for these services online – increasing both
new and repeat customers.
10
Establish Your Target Audience
determining who will visit your website is the key to
understanding why you need a website, and identifying what it
should include.
design your sites with those visitors in mind.
if you can determine why your visitors will want to visit your
site, you should find it reasonably easy to identify your site’s
primary purpose and goals
11

Design For Your Target Audience
who is the target audience?
now how will that affect your design?
design specifically to suit your specific audience
12
It is very important to see the connection between planning and
design – e.g. if we don't design the site to suit our intended
target audience then there's no point knowing the target
audience
12
Can you design for "everybody"?
13
Herbert Bayard Swope Sr. (1882 – 1958)
The first and three-time recipient of the
Pulitzer Prize for Reporting
"I can't give you a sure-fire formula for success, but I can give
you a formula for failure: try to please everybody all the time."
Design For Your Target Audience
Who is the target audience for:
http://www.abc.net.au/radio/
http://www.abc.net.au/abcforkids/
14

identify technology issues and accessibility constraints
think about where users are located and what their technology
level might be
consider the physical capabilities of your users
What are some physical limitations of users that could affect
your design?
15
You can identify accessibility constraints
review the WCAG 2.0
http://www.w3.org/TR/WCAG20/
plan for accessibility from the outset
look to other real-life accessibility implementations
16
Plan a Budget
domain names
include variations and generic names
hosting costs
serving large amounts of content like video is often done best
by using a CDN (Content Distribution Network) like Amazon
for these parts
content costs (stock photos, videos, fonts, articles...)

outsourcing – the bits you don’t do
logo design, video editing, programming, SEO...
marketing
17
Plan a Budget
clients often have a range of needs
the more you can provide, the more of their money you get
even if you can’t do something, consider being the project
manager and organising this for them as if you can... then
outsource it
factor in extra expenses and...
profit
18
Information Architecture and
Taxonomy Creation
gather and itemise all content
provided by client and from other sources
consider content like legal, privacy, help, etc.
from the content list, start making logical groups
don't just stop when you've organised it once
keep refining until it's the best it can be
19
Taxonomy Creation
user analysis guides the design of site content
the aim is to create a content structure that is meaningful for

your users
taxonomy is a classification and naming of contents in a
hierarchy
users need to be able to understand the naming
the taxonomy of the site structures the topic hierarchy and
navigation
20
Taxonomy Creation
structure your information into logical units
users expect relevant and specific information
evaluate importance and create hierarchy
more important things before less important
many website go from the general to the more specific
find connections between units
structure of site has to correspond to mental model of user
21
Creating a Site Flowchart
turn your taxonomy into a flowchart
the flowchart shows this visually
you can visualize and refine your site design – actually "walk
through" your flowchart on paper/screen to see if the flow is as
logical as it can be
22

22
Rules for Flowcharts!
every box is a page
every line (arrow) is a link
the order matches the site
23
23
Creating a Site Flowchart
24
Top-level navigation –
Hierarchy
Don't…
25
Flowcharts Show Structure
note layout and colouring – shows hierarchy
26

Why are these shown differently?
Why are these all in one box?
Guestbook and FAQ look different… so they are different
(visual language means something). These are not part of the
top-level navigation.
Notice how the box under "Find us" has lots of items but is just
one box – it's only one page.
If time – come back to this and draw screenshots for what this
flowchart indicates
26
Exercise – Do This Now
arrange the following content into pages, then draw a flowchart.
The site is for a freelance creative designer.
Video examples
Contact
Portfolio
Interactive examples
Resume
About me
Announcements
Photography examples
27
Your first question should always be…?
What's the goal?
Screen Designs
turn your flowchart into screen designs

remember that the order and naming of links on the site should
match those in flowchart
different levels in the hierarchy will often have different
designs
28
Home
Section
Content/Leaf
So the process is…
29
Content List
Taxonomy
Flowchart
Screen Designs

So the process is… (Example)
30
Writing Good Content
writing for the Web is different from writing for print, primarily
because
people don’t usually read online –
they scan the content
http://www.nngroup.com/articles/how-users-read-on-the-web/
research found:
79% always scanned any new page
16% read word-by-word
31
Write Scannable Text
highlighted keywords
(hypertext links serve as one form of highlighting; typeface and
colour variations are others)
meaningful sub-headings
bulleted lists
one idea per paragraph
(users will skip over any additional ideas if they are not caught
by the first few words in the paragraph)
the inverted pyramid style – start with the conclusion
half the word count (or less) than conventional writing
32

Write Scannable Text
provide a summary or overview of key points for longer articles
before providing the details
use correct title case for headings (like this slide)
provide clear, concise calls to action
one of this subject’s main take-home points
what do you want the user to do now?
33
Rewrite Text For The Web
Original:
Nebraska is filled with internationally recognized
attractions that draw large crowds of people every year, without
fail. In 1996, some of the most popular places were Fort
Robinson State Park (355,000 visitors), Scotts Bluff National
Monument (132,166), Arbor Lodge State Historical Park &
Museum (100,000), Carhenge (86,598), Stuhr Museum of the
Prairie Pioneer (60,002), and Buffalo Bill Ranch State
Historical Park (28,446).
34
See: http://www.nngroup.com/articles/how-users-read-on-the-
web/
Rewrite Text For The Web
Improved:
In 1996, six of the most-visited places in Nebraska were:
Fort Robinson State Park
Scotts Bluff National Monument

Arbor Lodge State Historical Park & Museum
Carhenge
Stuhr Museum of the Prairie Pioneer
Buffalo Bill Ranch State Historical Park
this example resulted in 124% better usability
35
See: http://www.nngroup.com/articles/how-users-read-on-the-
web/
“better usability” in terms of task time, errors, memory, recall,
satisfaction - http://www.nngroup.com/articles/measuring-the-
usability-of-reading-on-the-web/
35
Prepare Good Image Content
select high quality images to support your site’s credibility
low quality content implies low quality product
crop images, if required, to target their most important aspects
avoid using photographs that have
that ‘stock photo’ feel
overused – now seem tacky and fake
36
Prepare Good Image Content
37

Compare these two sites – what do the images convey about
them?
37
Resize Images Appropriately
maintain aspect ratio
don't stretch or squash
balance quality and file size
smallest file size before quality loss is noticeable
do not resize images with HTML height & width
i.e. display images at their actual size
if you want a smaller image, resize it in an image editing
program
38
Resize Images Appropriately
demo, including Dreamweaver’s resample option
39
Create Conventions for Easier Teamwork
decide beforehand on details like filenames, file sharing,
version control, commenting, etc.
makes working in a team more efficient
make sure file structures are transferable from development
machines to the Web server
use relative links
40

Use GitHub!
40
Use Relative Links
relative (partial) URLs locate a file that resides on the same
server as the file linking to it
<a href="file.html">in same folder</a>
<a href="dir/file.html">in sub-folder</a>
<a href="../file.html">up a folder</a>
41
Naming Files
file naming conventions vary across OSes
we use Apache on Linux, so:
names are case-sensitive
do not use special characters or spaces
Important: if you work and test on Windows, your site might
work fine until you upload it to the server where index.html and
Index.html are different files.
42
42

Develop a Website Style Guide
a website style guide documents concise, helpful, and important
instructions for the creation and maintenance of a website and
its content
provide and promote consistency among all of the website’s
elements and content
contains all information for an external designer to work on the
site or develop the site further
43
include writing style guidelines and clear examples that show
users how to maintain consistent written communications
throughout the website
how should you abbreviate the company name, if at all?
what voice and “feel” should text use?
44
include guidelines for, and examples of, the use of logos and
other branding elements
https://about.twitter.com/press/brand-assets
provide templates for the site’s key web pages, along with
instructions for, and examples of, their usage
45
Testing
quality assurance validates the technology of the site
user testing validates the design

cross-platform testing and usability testing ensure users can
access content easily
you should be doing testing (e.g. in different browsers) often in
your development
46
Usability Testing (in brief)
vary your subjects (don't just ask your friends)
ask the users to perform representative tasks on the
site/prototype
observe without intervening, and take notes
refine design, then repeat the process
(More coming in the Usability lecture)
47
Publishing and Promotion
the site is published to the Web
upload files to server with (S)FTP
promotion of the site begins (if it hasn't already)
In what ways do companies promote websites?
48
Ongoing Maintenance
starts when the site goes live and continues throughout the life
of the project
depends on the contract with the client
many developers choose to use content management systems so

that clients can update the site themselves
49
Using Web Analytics
Web servers store info on each visit in logs
reporting tools can analyse the statistics
you can track user activity on your Web site
you can see things like:
visitor details: location, browser, screen res…
which pages they visit the most
how long they spend on each page
which pages they leave on (last view)
…
50
http://demo.jawstats.com
Using Web Analytics
Google Analytics is a popular, useful service
(and is not dependent on your Web server)
51
Using Web Analytics
these statistics can be used to make decisions
what pages are "underperforming"?
so how can we change those?
what countries are our visitors from?
so how can we include them more?

What other statistics -> decisions can you think of?
52
Planning
don't ignore planning
if it's not helpful, you're doing something wrong
start with the goal
design to achieve the goal and suit the audience
apply structured thinking as well as creativity
plans are useful for you, your team members, the client and
future developers of the site
to make an effective website, write a good plan then follow it as
you design and develop
53
Summary
apply user-centred design principles and methods to the whole
process of the development cycle
planning can help you make better websites
you must be able to clearly articulate:
website goals and target audience
there are rules and guidelines for effective information
architecture, including flowcharts
be able to apply these
54
Responsive Web Design (RWD)
Some content from:

Jump Start Responsive Web Design
(Craig Sharkie and Andrew Fisher)
Learning Outcomes
demonstrate best practices in creating standards-based websites
understand the need for sites that are presented appropriately
for the device they are accessed with
be able to use CSS media queries to create responsive websites
2
What is Responsive Web Design?
ensuring the user enjoys the best experience possible on your
site… minimal resizing and scrolling, be it on a desktop, laptop,
or mobile device... an approach that allows our designs to
respond to any device they find themselves on
3
Environment
screen sizes and shapes vary
landscape and portrait
how users interact varies
touch, gesture, game controllers…
4

Aspect ratio is the term used to describe the dimensions of an
image by comparing the width to the height and expressing it in
ratio form.
Write Once, Run Anywhere
Ethan Marcotte, credited as the father of RWD, published an
article on A List Apart in May 2010, “Responsive Web Design”,
which focused on technical pillars for RWD:
fluid grids
flexible images
media queries
5
Ethan Marcotte
Simplest example: viewport meta tag
site without (left) and with (right) the code:
<meta name="viewport"
content="width=device-width, initial-scale=1">
6
Fluid Grids
grids were discussed in the lecture on design principles

7
Wikipedia’s Grid entry overlaid with the 960 Grid System, 16-
column structure
Adaptive Images
looks to solve two problems:
the difficulties in predicting the dimensions at which an image
will display
resolution at which images can display
adaptive image techniques:
ways to allow your images to better accommodate fluid grids
and layouts
new proposals in HTML5 - different image sources used by
different devices
potential problems:
users may notice stretched or pixelated images
using large images (suitable for larger resolutions) for smaller
displays means the user is downloading unnecessary data
8
Media Queries
media queries assess the capability of a device –
is the browser capable of meeting these requirements?
if so, then load this CSS or execute these rules…
media type:
<link rel="stylesheet" href="print.css" media="print">
media query:

Media Queries
@media (min-width:30em) and (max-width:45em)
{
.w-4col { width: 100%; }
.w-3col { width: 74.5%; }
.w-2col { width: 49%; }
.w-1col { width: 23.5%; }
}
12
these styles apply only when the width of the viewport is
between 30em and 45em (medium width)
at this (medium) width:
w-2col – style applied
m-1col – no style applied
Example Code
https://github.com/learnable-content/introduction-to-
RWD/tree/lesson4.2final
https://github.com/learnable-content/introduction-to-
RWD/tree/lesson5.2final
13
These 3 windows show the same code at different window sizes
and how the styles are different. Left-to-right: small, medium,
large
13
Dynamic Content
content changes based on user's situation

somewhat of a frontier
examples:
calls-to-action don't need to exist after that action has been
taken
page content could be based on your location e.g. display
international shipping information for people located in other
countries, but for locals, display local information
14
Mobile-First
one school of thought: instead of designing a 'regular' website,
then adding features to make it mobile-friendly, design it with
mobile users in mind first, then augment it to produce a desktop
version
focuses early design process more on the content
should end up with better results for both site styles
15
Now…
Read the book
Watch the video course
sitepoint.com/premium/books/jump-start-responsive-web-design
sitepoint.com/premium/courses/introduction-to-responsive-web-
design-2889
16

Summary
Responsive Web design is a modern best practice in creating
standards-based websites
CSS media queries allow you to create sites that are presented
appropriately for the device they are accessed with
this helps the site to achieve the goals
17
https://www.bringyourownlaptop.com/courses/dreamweaver-cc-
2018-introduction-to-responsive-web-design-basic
Navigation
Some content from:
Deliver First-Class Websites 101 Essential Checklists
(Shirley Kaiser)
(Joel Sklar)
CP1406/CP5638
Learning Outcomes
understand user-centred issues regarding website navigation
be able to follow common guidelines to create meaningful and
effective navigation
2
Creating Usable Navigation

provide enough location information to let the user answer the
following navigation questions:
where am I?
where can I go?
how do I get there?
how do I get back to where I started?
3
https://onextrapixel.com/12-navigation-options-that-help-users-
navigate-through-your-website-effectively/
to answer these questions, provide the following information:
let users know what page they are on and what type of content
they are viewing
let users know where they are in relation to the rest of the site
4
provide consistent, easy-to-understand links
provide an alternative to the browser's Back button to let users
return to their starting point
if links don't go to pages in the same browser window, provide
visual cues as to what and where they go - e.g. for PDF links
and links that open in new windows
5
Internal
External

CSS for Hyperlink Cues – PDF
<a href="files/holidays.pdf">View Holidays</a>
a[href $= '.pdf'] { // attribute selector
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-
repeat center right; }
http://askthecssguy.com/articles/showing-hyperlink-cues-with-
css/
6
$= means “ends with”
6
CSS for Hyperlink Cues – External Link
<a class="popup" href="help.html">View Help</a>
a[class = "popup"] {
padding-right: 18px;
background: transparent url(popup.gif)
no-repeat center right; }
http://askthecssguy.com/articles/showing-hyperlink-cues-with-
css/
7

8
Building Text-Based Navigation
text-based linking is often the most effective way to provide
navigation on your site
always provide a text-based set of links as an alternate means of
navigation
use accessible (text) links as alternatives to
graphics/Flash/JavaScript, so any user can navigate
9
Adding Contextual Linking
use hypertext to connect facts, relationships, and concepts
contextual links allow users to jump to related ideas or cross-
references by clicking the word or item that interests them
these are links that you can embed directly in the flow of your
content by choosing the key terms and concepts you anticipate
your users will want to follow
10
What Are The Main Advantages of Contextual Links?
Increase awareness of your website
other companies may include your article on their web page
earning you a backlink and a higher SEO score
increase SEO and recognition can lead to an increased social
media presence through reposting and sharing

help decrease your bounce rate while making the site easier to
navigate
you will earn a higher ranking in search engine results
because of increased credibility, relevance, SEO scores, and
user experience
contextual link building also increases trustworthiness; shows
the user that if you don’t have the right answer, you aren’t
afraid to send them to the right place
higher site ranking will generate more traffic leading to greater
chance of conversions
11
Using Graphics for Navigation Links
if you use graphics for navigation, use the same graphics
consistently throughout your site
these provide predictable navigation cues for the user
reusing graphics minimizes download time
12
Using the alt Attribute
include alt attributes in ALL of your <img> tags
the alt attribute is important to accessibility
(e.g. voice-assisted navigation) and search engines
13

14
Using Icons for Navigation
be careful with navigation icons
not everyone agrees on their meaning
many Web sites include
descriptive text with navigation icons
15
no descriptive text
Guidelines for Effective Navigation
create the navigation system with users in mind
place the navigation system where users expect to find it
16
Predictable locations for navigation systems
ensure that the navigation system accommodates the various
ways in which visitors want to access content and functionality
on your site
based on user analysis (planning)
some users will have different needs and goals than others, so
provide multiple ways for users to access information

17
Multiple ways…!
use the flowchart/sitemap you planned (information
architecture) to inform the development of your site’s
navigation
create and implement a consistent navigation system throughout
your website.
templates or file includes can help with this
use navigation labels that are concise, conventional, and easily
understood
think carefully about what to call links/pages
18
Creating User-centered Global Navigation
include a link to your home page in your global navigation
users expect to find links to the home page in the top-left
corner, and in the footer at the bottom of every page
include links to all of your website’s top-level sections in your
global navigation
19
Our typical response is that users are conditioned to return to
the homepage by clicking the site logo; adding a link to home is
optional and may be extraneous. We refer to sites like Google
and Amazon as examples of websites that have opted to leave it

out of their top navigation bar.
Creating User-centered Global Navigation
provide contextual clues that identify the user’s current location
keep in mind users may come to any page from anywhere (not
necessarily via your home page)
e.g. using breadcrumbs
use minimal global navigation (or distractions) on form pages
eliminate navigation elements that aren’t required to fill out
online forms,
but do provide a link out of the form process
20
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary
navigation scheme that reveals the user’s location in a website
or Web application.
Breadcrumbs
21
The term comes from the Hansel and Gretel fairy tale in which
the two title children drop breadcrumbs to form a trail back to
their home. Just like in the tale, breadcrumbs in real-world
applications offer users a way to trace the path back to their
original
You can usually find breadcrumbs in websites that have a large
amount of content organized in a hierarchical manner.
In their simplest form, breadcrumbs are horizontally arranged
text links separated by the “greater than” symbol (>); the
symbol indicates the level of that page relative to the page links
beside it.

breadcrumbs
Avoid Creating Unnecessary Pages
creating more pages than is necessary can impact badly on
usability.
it can be harder for users to find what they’re looking for and
understand the site’s navigation.
consolidate pages as appropriate (logical) to improve the user
experience.
consider providing internal navigation to give an at-a-glance
view of the page content and to allow convenient navigation
within the page.
22
First: Good Information Architecture
ultimately, it's most important to plan your information
architecture well and then design navigation that matches this,
giving users options to get to where they want to go.
23
Summary
navigation is a fundamentally important area of Web design
navigation should be user-centred
follow common guidelines to create meaningful and effective
navigation
24

Dynamic Website using Javascript and PHP
Some content from:
JavaScript Novice to Ninja
(Darren Jones)
Learning Outcomes
apply HTML, CSS and JavaScript to develop interactive
websites
understand enough JavaScript to be able to:
write very simple scripts from scratch
use existing code to augment the functionality of websites
Scratching the surface…
we will just introduce JavaScript in this subject
(no time for detailed programming)
basics
examples
inspiration to learn more
main focus / examples
JavaScript for forms – validation
see code files at:
https://github.com/lindsaymarkward/JavaScriptExamples
using existing scripts (e.g. image galleries, Facebook
integration)

Because it runs in the browser, it's readily available. You don't
need to install anything new (unlike Python, Java and others)
4
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents: "The
DOM is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the
content, structure, and style of a document."
The BOM is the Browser Object Model, which deals with
browser components aside from the document,
like history, location, navigator and screen (as well as some
others that vary by browser).
In the document node is the DOM (Document Object Model),
the document object model, which represents the contents of the
page. You can manipulate it using javascript.
DOM is a subset of BOM
5

6
7
DOM
BOM
objects
8
9
How to run JavaScript
in the browser
in the page itself, or
in the JavaScript console (if the browser has one; most do)

You can use console.log(…) to output
debugging messages to the console
Online Environments
very useful online test and demo tools:
jsfiddle.net, jsbin.com, codepen.io
e.g. jsfiddle.net/rniemeyer/adNuR
How to include JavaScript in websites
embedded in HTML directly, e.g.
<a id="button" href="#" onclick="alert('Hello
World')">Link</a>
function calls in HTML + scripts in same file or linked file
<a id="button" href="#" onclick="fn()">Link</a>
unobtrusive - HTML doesn't know anything about JS except to
link to it
<script src="js/scripts.js"></script>
event
javascript
fn() code must be elsewhere
script tags
Unobtrusive

HTML:
<script src="js/scripts.js”></script>
…
<a id="button" href="#">Link</a>
JavaScript file (scripts.js):
button = document.getElementById('button');
button.addEventListener("click", function() {
console.log("Hello World!");
});
Useful commands & functions
alert('Good’); (display messages)
return confirm('Do you want X?’);
(returns true or false)
return prompt('What is your name?');
When you get input, use the return statement to send the value
somewhere
All these pop-ups are modal windows which will stop you from
doing anything else until you respond
Programming
see SitePoint books/courses if you haven't done much
programming before

JavaScript has many syntax and functionality similarities with C
and Java including:
variables
if else
for, while and do while loops
switch statements
arrays
functions
some things are quite different and need to be watched out for…
Variables and Types
create variables using the var keyword:
var age = 18;
every variable has a type
JavaScript has six different types of value.
there are five primitive data types:
string
number
Boolean
undefined
null
everything else is an object
var length= 16; // Number
var lastName= "Johnson"; //
String
var x {firstName:"John",lastName:"Doe"}; // Object
var x = 16 + 4 + "Volvo"; // 20Volvo
var x = "Volvo" + 16 + 4; // Volvo164
JavaScript evaluates expressions from left to right.
When adding a number and a string, JavaScript will treat the
number as a string.

Reserved words
abstract, boolean, break, byte, case, catch, char, class, const,
continue, debugger, default, delete, do, double, else, enum,
export, extends, false, final, finally, float, for, function, goto,
if, implements, import, in, instanceof, int, inteface, long, native,
new, null, package, private, protected, public, return, short,
static, super, switch, synchronized, this, throw, throws,
transient, true, try, typeof, var, volatile, void, while, with
Properties and methods
objects have properties and methods
(primitive types also have these thanks to JavaScript implicitly
creating wrapper objects so they appear to be objects)
>> name = "Abraham "
<< "Abraham "
>> typeof name
<< "string"
>> name.length
<< 9
>> name["length"]
<< 9
>> name.trim()
<< "Abraham"
>> Code
<< Output
JS is weakly (not strongly) typed
type coercion is the process of converting the type of a value in
the background to try and make an operation work.

"6" * 2 results in 12 (number)
"6" + 2 results in "62" (string)
use type constructors to convert types more safely, e.g.
number("23”)
string(6)
Can you handle the truth?
most values are "truthy"
only seven values are always false and these are known as
"falsy" values:
"" // double quoted empty string
'' // single quoted empty string
0
NaN // stands for Not a Number
false
null
undefined
We want equality
== known as "soft equality" uses type coercion
=== known as "hard equality" checks types as well
>> " " == 0 << true
>> " " === 0 << false
>> " " == "0” << false
>> false == "0” << true
Functions
in JavaScript, functions are considered to be just another value
this means that they do all the same tasks that other values and

objects can do, such as be assigned to variables, changed and
stored in arrays
you can even define a function inside another function
in technical terms, this means that functions are considered to
be first-class objects in JavaScript
Creating functions
function literals
function goodbye() {
alert("Goodbye World!");
}
function expressions - this assigns an anonymous function to a
variable:
var goodbye = function(){
alert("Goodbye World!");
};
in both cases, the function would be called like: goodbye();
DOM – Document Object Model
represents an HTML document as a network of connected nodes
that form a tree-like structure
allows you to access elements of a web page and enable
interaction with the page
every element is an object that has properties
with JavaScript, you can change anything on the page (without
needing to reload it, or actually changing the file, just the
browser's view/display of it)
usually you give the elements a unique id

and use this in JavaScript to access it
Is HTML the DOM?
https://css-tricks.com/dom/
But the HTML you write is parsed by the browser and turned
into the DOM.
25
View Source just shows you the HTML that makes up that page.
It's probably the exact HTML that you wrote.
It might look like different code if, for example, you work in
template files in a backend language and don't look at the
compiled HTML output very often. Or there is a "build process"
that happens after you write your HTML and the code is put out
to the live website. Perhaps that HTML is compressed or
otherwise changed.
View Source is a little weird actually. The only people that
would care to look at that code are developers and all the major
browsers have built in developer tools now. It has probably out-
lived its usefulness.
26

When you're looking at the panel in whatever DevTools you are
using that shows you stuff that looks like HTML, that is a visual
representation of the DOM! We made it!
27
Well, yeah, it does. It was created directly from your HTML
remember. In most simple cases, the visual representation of the
DOM will be just like your simple HTML.
But it's often not the same...
28
When can the DOM be different than your HTML code?
One possibility:
There might are mistakes in your HTML and the browser has
fixed them for you.
For instance, lets say you have a <table> element in your HTML
and you leave out the required <tbody> element.
The browser will insert that <tbody> for you. It will be there in
the DOM, so you'll be able to find it with JavaScript and style it
with CSS, even though it's not your HTML!

29
Take away from all this:
You write HTML
The browser creates the DOM for that page based on what it
"thinks" you really want.
We can use JavaScript to update the DOM to add/remove/edit
the original HTML you wrote
This is part of the reason that your HTML may seem correct,
but display differently on the page
30
DOM – Document Object Model – Simple view
31
DOM – Document Object Model – Full view

32
Events
every time a user interacts with a Web page, such as clicking on
a link, pressing a key, or moving a mouse, an event occurs that
JS can detect and respond to.
add events like (old style, mixed-together):
HTML: <a href="#" onclick="fn()">Link</a>
or (newer, unobtrusive = HTML & JS separated):
HTML: <a href="#" id="link">Link</a>
JS: document.getElementById("link").
addEventListener("click", fn);
where fn is an
existing function
Example
HTML:
<input type="text" name="email" id="email"
onBlur="changeColor(this)" onFocus="changeStyle(this)">
JS:
function changeStyle(element) {
element.style.color = "#FF0000";
}
event

function
parameter
HTML attribute
CSS property
JavaScript properties
This is it
this is a special keyword
inside the body of a function, this refers to the object the
function is called on
in HTML, this refers to the element where the code is
e.g. here this = the input element with id=“email”:
<input type="text" name="email" id="email"
onBlur="changeColor(this)" onFocus="changeStyle(this)">
CP1406/CP3568 Examples – Demo
https://github.com/lindsaymarkward/JavaScriptExamples

much of the code in the examples is about manipulating
properties based on events
also includes examples of AJAX XMLHttpRequest
Look further into:
Start with SitePoint books & courses
JSON – JavaScript Object Notation
AJAX – Asynchronous JavaScript And XML
JQuery and JQueryUI
MongoDB/NoSQL
Libraries/frameworks like:
Node.js, Angular.js, Ember.js, React.js, Knockout, Express,
Meteor, famo.us
Some interesting references
https://developer.mozilla.org/en-US/docs/Web/JavaScript
http://shop.oreilly.com/product/9780596517748.do
http://bolinfest.com/javascript/misunderstood.html
https://www.reddit.com/r/javascript/comments/2j0a9s/which_are
_most_important_concepts_new_javascript/
Next up: PHP
PHP

The browser requests a page from a webserver via the url
The web server creates the DOM from the HTML submitted
The server also makes any modifications needed due to client-
side scripting (JS) and CSS
Then it sends back the entire page
40
PHP
The browser has request a .php page. There are many ways to do
this:
Via the url
As the action in a form
As a result of a script
The server finds the PHP script and executes it line by line
The PHP library must be installed on the server to allow PHP to
be run
Finally, the server packages the resulting information as HTML
for return to the browser
41
Using pre-existing PHP scripts
You have been given two PHP scripts that you can use with
your Assessment 2 to handle submitting a form:
welcome.php
This script is used as the action of a form. It expects a name and
email address
You can use this script to handle getting registration

information from someone (see checkemail.html which uses that
script)
upload.php
This script is used as the action of a form. It expects the user to
choose a file from their harddrive which is submitted.
The script checks that the file is of appropriate size and type
The test file for this script is uploadForm.html
Show the two scripts and go through them briefly
42
A very simple php script
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is:
<?php echo $_POST["email"]; ?>
</body>
</html>
NOTE that we provide the basic HTML tags needed by the
browser
The form of a PHP script is:
<?php then any commands and ends with ?>
Echo means to print the data to the page
$_POST is where the data is coming from – extracted from the
sending form
["name"]; gives us the name of the form element that sent the
data
If you want to add more fields to your form you will need to
add extra code here to get it from POST
Then we close off the page using the </body> and </html> tags

Show the two scripts and go through them briefly
43
Summary
JavaScript can be used to develop interactive websites
you should understand enough JavaScript to be able to:
write very simple scripts from scratch
e.g. form validation
use existing code to augment the functionality of websites
e.g. photo galleries, image sliders…
Data Tables
Some content from:
Build Your Own Website The Right Way Using HTML & CSS
(Ian Lloyd)
(Joel Sklar)
1
Learning Outcomes
apply HTML, CSS and JavaScript to develop interactive
websites

understand the intended use for HTML tables:
for data, not page layout
be able to create and style tables with HTML and CSS
2
3
HTML Structure and Syntax of a Table Tag
The first row TR could be the header elements
In which case TD replaced with TH
Tables are for data
tables are designed to present tabular data, such as:
a calendar of events
a bank statement
a contacts list
… anything that you might use a spreadsheet for
but not for laying out a page
which most designers used to do
4
Using Table Elements
the HTML table elements allow the arrangement of data into
rows and columns of cells

the table element <table> contains the table information, which
consists of:
header element <th>
row element <tr>
data cell <td>
5
HTML Table Code
<table>
<tr>
<th>Name</th><th>Contact(Home)</th>
<th>Contact(Work)</th><th>Location</th>
</tr>
<tr> <td>Jane Bradley</td><td>02380 123123</td>
<td>02380 577566</td><td>Southampton</td>
</tr>
<tr> <td>Fred Bradley</td><td>01273 177166</td>…
</tr>
…
</table>
6
7

Table attributes
the <table> element used to have many attributes like
border, align, cellspacing, cellpadding, bgcolor, width
these are not supported in HTML5. Why?
these are all for presentation, which should be done with CSS
http://www.w3schools.com/tags/tag_table.asp
8
Collapsing Table Borders
tables are more legible with the table borders collapsed
use the border-collapse property
table {border-collapse: collapse;}
9
borders collapsed
"traditional" borders with cellspacing
Spanning Rows
the rowspan attribute lets you create cells that span multiple
rows
<td class="title" rowspan="6”>
Best-Selling Albums Worldwide</td>
this is a logical/structural thing, not a presentation
characteristic

10
this is not a good example – just a title in a cell (not data)
Using Table Headers and Footers
rows can be grouped into head, body, and footer sections using
the <thead>, <tbody>, and <tfoot> elements
you can style these table sections with CSS
11
thead {
font-family: arial;
background-color: #ccddee;
}
tfoot {
background-color: #ddccee;
font-family: times, serif;
font-size: .9em;
font-style: italic;
}
12
Grouping Columns
the <colgroup> and <col> elements allow you to apply style
characteristics to groups of columns or individual columns

the <colgroup> element has a span attribute that lets you set the
number of columns specified in the group
the <col> element lets you specify style characteristics for
individual columns
13
Styling the Caption
you can position the caption on the top or bottom of the table
using the caption-side property
you can also apply other style properties to enhance the caption
text:
caption {
text-align: left;
font-style: italic;
padding-bottom: 10px;}
14
Styling Table Borders
by default, table borders are turned off
you can add borders using CSS
borders can be applied to the whole table,
to individual rows, and to individual cells
15
to create a table with an outside border only:
table {
border: solid 1px black;
border-collapse: collapse;}

to specify borders for each cell, use a separate style rule:
table {
border-collapse: collapse;}
th, td {
border: solid 1px black;}
16
you can also style individual rows or cells and apply cell
borders
th {
border-bottom: solid thick blue;
background-color: #ccddee;}
17
Using Padding
you can enhance the legibility of your table data with padding
this style rule adds five pixels of padding to all sides for both
types of table data elements
th, td {padding: 5px;}
18

Using Margins and Floats
tables can be floated
use margins to add white space around floating tables
table.best {
font-family: verdana;
border-collapse: collapse;
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
19
Styling Table Background Colors
you can apply background colors to:
entire table
single rows or cells
column groups of individual columns
you can alternate colors for different rows
add hover interactions (careful…)
20
Creating Alternate Color Rows

table data can sometimes be easier to read when alternate rows
have different background colors
write a style rule for the odd or even row using a class selector
tr.odd td {background-color: #eaead5;}
<tr class="odd">
<td>AC/DC</tr>
<td>Back in Black</td> …
</tr>
21
… or use CSS's neat pseudoclasses
tr:nth-child(even) {background: #CCFFCC}
tr:nth-child(odd) {background: #FFFFCC}
tr:nth-child(1) {background: white}
http://www.w3.org/Style/Examples/007/evenodd.en.html
22
Creating Background Hover Effects
you can add interactivity to your table with hover effects
when the user hovers the pointer over a cell or row, the
formatting can change
td:hover {
color: white;
background-color: #722750;}
23

Does this create false expectations? Why?
Summary
use tables for presentation of data, not for layout
use the grouping elements to apply styles to groups of rows or
columns or to the header, body, and footer
use CSS to add presentation style to tables
use padding to add space within your cells to make your data
more legible
you can float tables and add margins with the box model
properties
24
Usability &
Accessibility
Now: Write down 3 things a user can DO (actions) on your
project website – that you could test
See chapter 9 of Deliver First-Class Websites 101 Essential
Checklists (Shirley Kaiser)
Learning Outcomes

learn to apply user-centred design principles and methods
learn to apply best practices in creating standards-based
websites
understand the 5 quality components of usability
appreciate the needs of different audiences
appreciate the value of making websites more accessible
Usability
some of this lecture content comes from:
Jakob Nielsen
"the world's leading expert on Web usability"
(U.S. News & World Report)
useit.com
usability is a quality attribute that assesses how easy user
interfaces are to use
the word "usability" also refers to methods for improving
ease-of-use during the design process
http://www.useit.com/alertbox/20030825.html
Usability is defined by 5 quality components
learnability: how easy is it for users to accomplish basic tasks
the first time they encounter the design?
efficiency: once users have learned the design, how quickly can
they perform tasks?
memorability: when users return to the design after a period of
not using it, how easily can they reestablish proficiency?
errors: how many errors do users make, how severe are these
errors, and how easily can they recover from the errors?
satisfaction: how pleasant is it to use the design?

What is Important?
Utility - the design's functionality:
Does it do what users need?
Usability and utility are equally important
Utility = whether it provides the features you need.
Usability = how easy & pleasant these features are to use.
Useful = usability + utility
It matters little that something is easy if it's not what you want.
It's also no good if the system can hypothetically do what you
want, but you can't make it happen because the user interface is
too difficult.
5
Why Do People Leave a Site?
if a website is difficult to use
if the home page fails to clearly state what a company offers
and what users can do on the site
if users get lost on a website
if a website's information is hard to read or doesn't answer
users' key questions
people don't read instruction manuals for websites.
there are plenty of other websites available
Note: many student designs don't have any real "content" on the
home page – just links to other pages. Provide some kind of
"locating" text that helps new users know what the site is.
6

Usability Improvements: Results
current best practices suggest spending about
10% of a project's budget on usability - this will more than
double a website's quality metrics and nearly double an
intranet's quality metrics
internal projects = cutting training budgets in half and doubling
the number of transactions employees perform
external projects = doubling sales,
doubling registered users or customer leads,
or doubling another desired goal
Usability Metrics
From a study of 43 website redesigns in 2003,
improvement in usability metrics (spending 10% of project
budget on usability)
Metric Improvement
Sales / conversion rate 100%
Traffic / visitor count 150%
User performance / productivity 161%
Use of specific (target) features 202%
Improving a Website's Success
Formula for website success is: B = V × C × L
B = amount of business done by the site
V = unique visitors coming to the site
C = conversion rate (the percentage of visitors who become
customers)
L = loyalty rate (the degree to which customers return to
conduct repeat business)

so how do we make a site more successful?
Increase any one of V, C, or L
9
Test Your Website
there are different types of testing:
Functionality (Quality Assurance) Testing – where you check
that the site does what it is supposed to do (checking for broken
links, code errors etc.)
User Acceptance Testing (UAT) – verify the result meets the
agreed-on requirements (usually with client)
Usability Testing – determine how easy the site is to use;
discover how the site aids or hinders people
Improve Usability by User Testing
get some representative users, such as customers or employees
(who work outside your department)
ask the users to perform representative tasks with the design
have them test a specific area of the site
give them specific tasks, and give all users the same task so you
have something to compare
Who Are "Representative Users"?
Iterative Design & Testing
you don't want a big, expensive study
it is a better use of resources to run many small tests and revise
the design between each one

so you can fix the usability flaws as you identify them
testing 5 users is typically enough to identify a design's most
important usability problems
iterative design is the best way to increase the quality of the
user experience
the more versions and interface ideas you test with users,
the better
Iterative Design & Testing
observe what the users do, where they succeed, and where they
have difficulties with the user interface.
shut up and let the users do the talking
if possible, record the user's mouse movements and faces, so
you can review the footage later
systems exist for tracking eye movement for where users look
on a page
Don't help, or make them uncomfortable
Try to make it as natural as possible
Performing The Test
encourage the user to "think-aloud", that is to tell you what they
are thinking as they are performing the process... no matter how
silly it seems to them

Facilitator ...
"As you are working, please think out loud and describe what
you are looking for, what questions you have, anything that
surprises you, etc. I won't normally answer these questions for
you but they will help us to understand how to make the site
more user friendly"
Performing The Test
help users only if they become totally stuck and unable to
proceed, and you see they are wasting the limited test time you
have.
but don't jump in and give them hints,
or explain how the site is meant to work.
remember to explain to your users that
you are testing the website, not them
why is this important?
Don't want people thinking they have to say nice things, don't
want them to be embarrassed…
We want authentic (unskewed) feedback.
17
Performing The Test
test across different browsers and make sure you clear all the
settings between tests like the history, cookies
Use post-test questionnaires to capture quantifiable feedback
about their experience - typically this is the least useful part of
the text as people tend to give answers to "please you", rather
than honest feedback.

Sample Form
Task Type 1 – First Impressions
Give them limited free time to explore the site,
(2-3 minutes) then stop and ask basic questions like:
what does this site sell?
who is this site designed for?
at first glance do you feel this site would have what you are
looking for?
do you trust the website?
Task Type 2 – Specific Item
Ask the user to search for a specific item, or a specific type of
item by giving them a realistic scenario
Example - You live on Horn Island with postcode 4875 in the
Torres Strait. Your electric jug has just died. You want to buy a
new stainless steel cordless jug and have it shipped to you.
Find the cheapest item and how much it will cost including
postage.
Task Type 3 – Open Ended
Give the user a more vague problem they have to solve for
themselves, allowing them to use their own preferences to find
the answer.

1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx

1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx

Ähnlich wie 1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx (20)

Mehr von jeremylockett77

Mehr von jeremylockett77 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

1 httpswww.eeoc.goveeocnewsroomrelease10-7-19.cfm2 ht.docx