Download Lecture 8

IS1824: Introduction to Internet
Multimedia
Lecture 8: Style 2 (Navigation/Content)
Rob Gleasure
[email protected]
http://girtab.ucc.ie/rgleasure/index.html
IS1824

Today’s class
 Report submission
 The home page
 F-shaped design
 Writing for the web
 Mistakes in Web design
Next Week’s MCQ

Continuous Assessment
 Multiple Choice Questions (choose one of four answers for each
question)
 50% of the CA for this part of the course
 30 questions in 45 minutes
 Negative marking will apply:
 3 marks for a correct answer,
 -1 for an incorrect answer
 0 if left blank
Example MCQ items

A HTML table may contain images





True
False
Only the image is of type .gif
Only if the attribute ‘img = “true”’
Which of the following is best describes a router?




A simple inexpensive means of segmenting 1 network into 2 or more
sub-networks
An intelligent processor which manages traffic on a network
An inexpensive device which provide a central connection point for
devices on a Local Area Network
A device whose sole purpose is to run dedicated antivirus software to
prevent viruses entering a network
Example MCQ items

Which of the following is a correct way to insert a hypertext link
into a HTML document?





<a href> text =”http://bis.ucc.ie” </a>
<a link =”text” href = “http://bis.ucc.ie” />
<a href = “http://bis.ucc.ie”> text </a>
<a> text: href = “http://bis.ucc.ie” </a>
Technologies such as HTML, CSS, JavaScript and XML are all
tied together by the DOM. What does DOM stand for?




Document Object Model
Document Oriented Modelling
Document Onset Mapping
Document Oriented Mapping
The Home Page

The first few seconds



Most people will decide within the first 2-4 seconds whether your
site is helpful to them
 It needs to be immediately obvious what your site does
The home page also creates the users’ first impression of your
site
 It must appear professional and trustworthy
The main thing to bear in mind with your homepage is that we are
looking for a combination of clarity, style and character
The Home Page

The home page and navigation

The home page plays a crucial role for a website, acting as the
entry point for the majority of users

Most people know what they want from your site and want to find
it with as little complication as possible
 Clear and intuitive navigation is key to satisfying them

More than anything else, we want to minimise the number of
clicks to any one part of the site
 This begins with the home page – if it can filter users off into
specific sections then they are likely to feel they are making
progress quickly
The Home Page

Scrolling on the home page?

Users are generally less willing to scroll on a home page than
later, more specific pages
 Keep any content below the bottom of the screen to an
absolute minimum (possibly just a footer, personal information,
copyright details, etc)

As users get closer to their desired content, they are likely to
increase in patience and you can increase the amount of content
on a page and expect them to scroll down a page
The Home Page

An introduction page?

A number of sites have started taking this to extremes and using
a home page to launch the ‘real’ website, like a cover to a book.
This presents a significant trade-off:
 On one hand you are adding a click and potentially irritating
users (they’ve already chosen to enter the site).
 On the other you are reinforcing your brand and arguably
adding to the overall sense of ‘polish’

For example, check out
http://www.cirquedusoleil.com/en/welcome.aspx
http://microsites.audi.com/audir8/html/index.php
http://nystudyvacations.com/
http://unionstationdenver.com/
The Home Page

Linking to the home page

A user on any page should be able to return to the home page
with a minimum of effort

This is partly for orientation purposes, so that a user feels they
can search through various pages on your site without feeling lost

It is also because users may not enter your site on the home
page (for example if specific pages are linked to from other sites
or search engines)
Designing in F-shapes

In Web pages that are largely text-based, users generally read in
what is called an F-shaped pattern
i.e.
 They first read in a horizontal movement, usually across the
upper part of the content area.
 Next, users move down the page a bit and then read across in a
second horizontal movement that typically covers a shorter area
than the previous movement.
 Users may then scan the content's left side in a vertical
movement. Sometimes this is a fairly slow and systematic scan,
other times users move faster.
Designing in F-shapes

Example of F-shaped browsing (taken from
http://www.useit.com/alertbox/reading_pattern.html)
Designing in F-shapes

Applying the
F-shaped pattern
Taken from
http://webdesign.tutsplus.com/
articles/designtheory/understanding-the-flayout-in-web-design/
Designing in F-shapes


So what does this mean?
 The left hand side of your page should make it clear where each
horizontal row begins
 Each row should be placed according to priority, i.e. the top row
will be viewed first, the second viewed next, etc.
 A column on the left hand side or the second horizontal row both
afford natural locations for navigational details, or other
secondary relevant information
 Advertising and other more peripheral content can be pushed to
the right hand side (which is usually the last part to be read)
Designs can’t adhere blindly to this concept – if they did they would
all look the same. It helps to think about the f-shape though.
Writing for the Web

Users read differently on the web than on paper
 they usually read only about 20% of the words on an average
visit.
 web page text must be conducive to scanning!
How do we do this?
 meaningful sub-headings and bulleted lists
 one idea per paragraph
 Start with the conclusion and work backwards
 Lower the word count than conventional writing (half or less)
Writing for the Web

Writing Style
Readers of web content are much more active than readers of
printed media
 writing should:





Be non-linear
Be reader-driven
Be data intensive, rather than anecdotal
Use short sentences
Be prefaced with very short introductions
Writing for the Web

Passive Voice and Tone

Usability increases when users need fewer mental
transformations to convert a sentence into actionable
understanding.

Use active tones
 “People read webpages”
as opposed to passive tones
 “Webpages are read by people”
Subject – Verb - Object
Writing for the Web

Literacy Considerations
Often need to cater for teenagers and younger users (who tend
towards lower patience and literacy levels), as well as a wide range
of other users whose literacy or language fluency may vary.




Keep design clean
Avoid tiny fonts
Keep text concise
Use images to communicate where they do not cause distraction
Also, users often read only the first 2 words of a sentence,
so make sure they convey some sense of the content
Writing for the Web

Passive Voice and Tone

Use positive statements
 "do x“

Try and avoid negative statements
 “don’t do x”

Never use double negatives
"avoid not doing x”
This doesn’t mean you should sound hostile or aggressive
however - you’re going for ‘direct’ not ‘angry’
Mistakes in Web Design

There are no hard and fast rules in web design – it’s still more
science than art.

All the same, the following slides will present some techniques and
approaches to be generally avoided

Remember, rules are there to be broken but there must always be a
good reason
Mistakes in Web Design

Technology motivated design


Just because you can, doesn’t mean you should…
Images, animations, etc should always have a purpose
Example of technology-before-purpose web pages
 http://www.joneschijoff.com/
Be very wary of how you use flash
Mistakes in Web Design

Lack of contrast

Foreground/background contrast is necessary for your visitors to
easily read your message
 words have to be clearly separated from the background.

Avoid text on top of gray or screened backgrounds, i.e. blue text
on a light blue backgrounds.

Avoid placing text over patterned backgrounds or images!
Example of poor contrast
 http://owltastic.com/2011/07/writing-and-publishing/
Mistakes in Web Design

Overuse of colours and animations

Bright colours and animation are often useful for adding life and
vitality, but quickly become visually tiring and distracting.

Try and restrict bright colours and animations, so that a small
number can highlight important and high-impact content
Example of excessive colour and animation
 http://csszengarden.com/?cssfile=http://www.brucelawson.co.
uk/zen/sample.css
Mistakes in Web Design

Too much content/unnecessary content

Remember, if you’re trying to sell or advertise a product or
service, that goal should guide everything you do with your site

Users overwhelmed with choice are likely to give up quite quickly
 less is more!

Two questions should be on your mind at all times during design:
1. What is the purpose of this page?
2. What is the purpose of this piece of content?

Example of getting carried away…
 http://www.start-the-change.org/
Mistakes in Web Design

Long lines of Text

Long lines are tiring because your Web site reader's eyes have to
make numerous left-to-right shifts (30-50 characters are ideal)

It's also easy to get lost making the transition from the last word
of one line to the first word of the next.

Short liner lines of type also creates white space to the left and
right of each paragraph.
Examples of excessive line length
 http://www.truthism.com/
 http://www.graphic-design.com/Type/Good-bad/index.html
Mistakes in Web Design

Non-scannable text

As mentioned earlier, users read text differently on the web. A
wall of text is best avoided.

Use short paragraphs and the idea of an inverted pyramid
 lead with broader, more interesting information.
 More specific content comes later.
Think of the way tabloid newspapers present stories

http://news.ycombinator.com/item?id=2222522
Mistakes in Web Design

Bad fonts

This is usually because the writing is too small, or else because
the choice of fonts in inappropriate

In general, web-based text should
be kept sans-serif, as this is more
readable (especially in large
quantities)

Serif fonts can be used sparingly for headings and small pieces
of text
Mistakes in Web Design

Not Changing the Colour of Visited Links

Changing the colour helps users understand their current
location, as well as their past and present locations - in turn
making it easier to decide where to go next.

Knowing which pages they've already visited frees users from
unintentionally revisiting the same pages over and over again.
Mistakes in Web Design

Horizontal scrolling

Horizontal scrolling is generally not something anyone enjoys on
computers – it breaks up the process of our eyes scanning

It can be used well in the correct context but it really needs to be
clear to the user how the site works, otherwise they’ll just struggle
to navigate the site

Examples of horizontal scrolling
http://www.thesixtyone.com/
Mistakes in Web Design

Advertising that looks like content, and vice-versa

Web users have learned to stop paying attention to any ads that
get in the way of their goal-driven navigation.
 ignore anything that looks like prevalent forms of advertising

Banner blindness: shape or position on the page may mean
users never even look at something
Mistakes in Web Design

Advertising that looks like content, and vice-versa (continued)
A Taken from http://www.useit.com/alertbox/banner-blindness.html
Mistakes in Web Design

Advertising that looks like content, and vice-versa (continued)

Animation avoidance: users ignore areas with blinking or flashing
text or other aggressive animations

Pop-up purges: users close pop-up windows before they have
even fully rendered
Mistakes in Web Design

Opening too many new browser windows

Can be perceived as a hostile takeover of users’ machines

Disables the Back button which is the normal way users return to
previous sites

Links that don't behave as expected undermine users'
understanding of their own system

Generally, a new tab should never be opened for navigation
within a site
Mistakes in Web Design

Dead ends and broken promises




Anything that looks different is likely to be interpreted as a link…
Double-check your links to make sure they lead to the information
they promise.
Avoid links to pages that do not contain the promised information.
Avoid links to "work in progress" locations.
Example of broken promises is the site headings at:
 http://www.boogersite.com/boogerSites.cfm
Mistakes in Web Design

Not Answering Users' Questions

For example, not listing prices (something quite common in B2B
ecommerce sites).

Sometimes the specifics are buried under a thick layer of
marketing-speak and bland slogans.

Since users don't have time to read everything, hidden
information might as well not be there
Mistakes in Web Design

Requiring registration when unnecessary

People are generally sceptical about giving out information, and
understandably so

Requiring email addresses or any other information from people
will lose a significant number of users
 Only request such information when it’s clearly necessary or you
are prepared to lose the majority of browsers
Mistakes in Web Design

Violating too many design conventions

The more the system breaks users' expectations, the more they
will feel insecure
 Remember, users will spend a lot more time on other websites
than on yours

This means that they form their expectations for your site based
on what's commonly done on most other sites.
 If you deviate, your site will be harder to use and users will
leave!

You still need your site to be memorable though…
Want to read more?

Links and references
 http://www.useit.com/alertbox/reading_pattern.html
 http://www.wpdfd.com/issues/86/dont_be_afraid_of_serif_fonts/
 http://www.webpagesthatsuck.com/biggest-mistakes-in-webdesign-1995-2015.html#p7EPMc14_1
 http://www.hongkiat.com/blog/11-common-mistakes-blunders-inweb-design/
 http://webdesign.about.com/od/fonts/a/aa080204.htm
 http://people.dsv.su.se/~jpalme/layout/
 http://www.successful-sites.com/articles/usability-churchillreadbility.php