Web Usability Human Computer Interaction

1
Web Usability Human Computer Interaction

• Why exactly is it important to make usable
  websites?
• Weve seen quotes from the likes of Tim
  Berners-Lee already about the accessible web
  but the web should be the epitome of usability
  and yet it is not.
• In traditional product purchasing scenarios a
  user first buys the product then uses it in
  the case of the web-purchasing (oh no!
  e-commerce) a user first visits a site and has
  to deal with its usability and then buys the
  product.
• The web user interface is hence thevisible point
  of contact between the user and the product.
• Crap website ? crap product?

2
Web Usability Human Computer Interaction

• A poor user interface design is a major reason
  why some web sites fail. We all know good
  examples of sites and bad ones and ones that
  just about do the job under a lot of pressure.
• There are common problems with websites
• Disorientation
• Digressions
• Information overload
• Remembering what you just found
• Designing websites is a big topic and there has
  been a lot written about it however there has
  been a lot of useless rubbish written about it.

3
Nielsen (again) Human Computer Interaction

• Jacob Nielsen first wrote an article in 1996
  about the worst 10 web mistakes in existence.
  He updates this article every few years the
  last one being in 2005 where he let readers vote
  for the worst offenders.
• On legibility he wrote Bad fonts won the 2005 by
  a landslide, getting almost twice as many votes
  as the 2 mistake. About two-thirds of the voters
  complained about small font sizes or frozen font
  sizes about one-third complained about low
  contrast ...
• How do you change the font size in IE? How about
  Firefox or Safari?

4
Low contrast Human Computer Interaction
5
Non-Standard LinksHuman Computer Interaction

• Second offender in Nielsen's 2005 vote was people
  creating non-standard links in their pages.
• Nielsen advocates that you should make obvious
  what's clickable for text links, use colored,
  underlined text and differentiate visited and
  unvisited links. Also explain what users will
  find at the end of the link.
• Avoid JavaScript etc. which break standard
  interaction techniques for dealing with links and
  never open pages in new windows (except for PDF
  files and such).

Oops!
Links are the Web's number one interaction
element. Violating common expectations for how
links work is a sure way to confuse and delay
users.
6
FlashHuman Computer Interaction

• Nielsen and Macromedias Flash go back a long way
  Flash was third in the vote in 2005. Back in
  2000 he wrote a famous article slagging the
  technology off big time
• This article slated Flash for promoting
  gratuitous (unnecessary) animation, annoying
  splash screens which delayed users access to
  content, added non standard GUI controls, and
  disabling back buttons and resizing.
• Nielsen then went on to work for Macromedia to
  improve Flash and its usability in Flash MX
  (2002).

7
FlashHuman Computer Interaction

• Despite this Flash still irks people and in 2005
  Nielsen admitted
• The debate still rages though most web-users
  will agree that Flash is more useless than not.
  Though look at this! http//www.3d-imaging.co.uk/p
  ages/flash_intro_animation_uk.htm

I view it as a personal failure that Flash
collected the bronze medal for annoyance
When I spoke at the main Flash developer
conference, almost everybody agreed that past
excesses should be abandoned and that Flash's
future was in providing useful user interfaces
Despite such good intentions, most of the Flash
that Web users encounter each day is bad Flash
with no purpose beyond annoying people. The one
bright point is that splash screens and Flash
intros are almost extinct. They are so bad that
even the most clueless Web designers won't
recommend them, even though a few (even more
clueless) clients continue to request them.
8
Webpagesthatsuck.comHuman Computer Interaction

• In August 1996 Vincent Flanders launched his
  website WebPagesThatSuck.com to support his HTML
  classes.
• He has some nice phrases which describe web
  usability problems his most famous is maybe
  Mystery Meat Navigation which is particularly apt
  for Flash problems.
• As Flanders explains

If you have to mouse over a graphic to discover
whether it's a link and where the link will take
you, then you have what I call "Mystery Meat
Navigation." This evil form of navigation has
moved from trendy design sites to the corporate
world and it must be stopped because it violates
the first rule of navigation clearly show people
where to go.
9
No.4 in 2005Human Computer Interaction

• Number 4 in Nielsens hit list was content that's
  not written for the web in other words writing
  for the Web means making content short,
  scannable, and to the point (rather than full of
  fluffy marketese).
• Web content should also de designed to follow
  cognitive patterns and use common language rather
  than made-up terms (this also improves search
  engine visibility, since users search using their
  own words, not yours).
• It has been found that people rarely read Web
  pages word by word instead, they scan the page,
  picking out individual words and sentences.
  Nilesen (!) and Morkes (2006) have found that 79
  percent of users always scanned any new page they
  came across only 16 percent read word-by-word.

10
Visual HierarchyHuman Computer Interaction

• Just as reading a paper article that someoneelse
  has used a highlighter pen is difficult then
  reading a web page that someone else (i.e. the
  designer) has highlighted using titles,layout
  and colour can alsobe a frustrating experience.
• On the Web, as in other presentation channels,
  there are two components to a message the
  message itself, and how it is presented.
  Seemingly mundane points of content presentation
  can have influence on how effectively a document
  conveys its message.

11
F-Shape ScanningHuman Computer Interaction
See http//www.useit.com/alertbox/reading_pattern.
html
12
What this meansHuman Computer Interaction
The designers mental model
What users really do.
13
ImplicationsHuman Computer Interaction

• The implications of all this are manyfold. We
  dont read pages we scan them. We dont make
  careful, considered choices we muddle through
  at breakneck speed.
• Design tips to take away from this
• Create a clear visual hierarchy on each page.
• Take advantage of convention.
• Break pages into clearly defined areas.
• Make it obvious what is clickable.
• Minimize noise.

14
ConventionsHuman Computer Interaction

• Have you noticed how many web pages look the
  same? Whilst not an advert for creative arts this
  is probably a good thing for usability (of
  course!).
• Any how many sites look EXACTLY like amazon?

15
SearchingHuman Computer Interaction

• Plenty of sites put search facilities on their
  pages.
• However, number five in Nielsens list is bad
  search.
• Neilsen claims that everything else on his list
  is pretty easy to get right, but unfortunately
  fixing search requires considerable work and an
  investment in better software. He does suggest
  though that it's worth doing, because search is a
  fundamental component of the Web user experience
  and is getting more important every year.
• How good is the Universitys searchfacility? And
  the big boys?
• Many is the time Ive used google tosearch
  someone-elses pages (eg. Amazon, Dabs).

16
Browser incompatibilityHuman Computer Interaction

• A few years ago (circa 2003) IE seemed to be the
  dominant browser and even Nielsen related
  cross-platform compatibility to a one-star
  guideline (that is, "worth thinking about if you
  have extra project time, but not a priority").
• Today, however, enough people use Firefox (and
  various other minority browsers, like Opera and
  Safari) that the business case is back don't
  turn away customers just because they prefer a
  different platform. Hence this is back at number
  6 in the 2005 list.
• We have already seen in our discussions a few
  examples of browser incompatibility problems.

17
Bad formsHuman Computer Interaction

• Forms are used too often on the Web and tend to
  be too big, featuring too many unnecessary
  questions/options.
• Nielsen has five basic guidelines to this end
• Cut any questions that are not needed.
• Don't make fields mandatory unless they truly
  are.
• Support autofill by avoiding unusual field labels
  
• Set the keyboard focus to the first field.
• Allow flexible input of phone numbers, credit
  card numbers, and the like. It's easy to have the
  computer eliminate characters like parentheses
  and extra spaces.
• Forms that violate guidelines for
  internationalization got dinged by many overseas
  users.

18
Bad formsHuman Computer Interaction
19
Web page credibilityHuman Computer Interaction

• Number 8 in Nielsens list is no contact
  information or other company info weve all
  encountered these.
• Even though phone numbers and email addresses are
  the most requested forms of contact info, having
  a physical mailing address on the site might be
  more important because it's one of the key
  credibility markers.
• Many sites make it even verydifficult to find
  even a contactemail address. The page hereis
  Tiscalis homepage you try finding a postal
  addresson it I cant!! The StanfordPersuasive
  Technology Lab have credibility guidelines.

20
See Fogg, B.J. (May 2002). "Stanford Guidelines
for Web Credibility." A Research Summary from the
Stanford Persuasive Technology Lab. Stanford
University. www.webcredibility.org/guidelines
21
Frozen Layouts with Fixed Page WidthsHuman
Computer Interaction

• Complaints about no.9 here fell into two
  categories
• On big monitors, websites are difficult to use if
  they don't resize with the window. Conversely, if
  users have a small window and a page doesn't use
  a liquid layout, it triggers insufferable
  horizontal scrolling.
• The rightmost part of a page is cut off when
  printing a frozen page. This is especially true
  for Europeans, who use narrower paper (A4) than
  Americans.
• Font sizes are a related issue. The very worst
  offenders are sites that freeze both the width
  and height of the viewport when displaying
  information in a pop-up window. Pop-ups are a
  mistake in their own right. If you must use them,
  don't force users to read in a tiny peephole. At
  an absolute minimum, let users resize any new
  windows.

22
Pop-up windowsHuman Computer Interaction

• Neilsen, for no reason other than he can, decided
  that although his voters voted pop-ups as the
  number 10 in the worst web things list he would
  talk about images. Well talk about pop-ups.
• Nielsens own stats on what annoys people
  mostabout advertising on websites are shown
  here.
• Users not only dislike pop-ups, they transfer
  their dislike to the advertisers behind the ad
  and to the website that exposed them to it.

23
Banner BlindnessHuman Computer Interaction

• In 1998, Benway and Lane reported the results of
  studies requiring users to find information
  located in banner ads.
• Contrary to the prevailing marketing philosophy
  that the larger an item on a Web page, the
  greater its perceived visual importance and
  likelihood of attracting attention, they found
  that users had more difficulty finding
  information when it was located in a banner ad.
• Benway and Lane called this phenomenon banner
  blindness. It is believed that banner blindness
  occurs because experienced Web users are in
  "search mode" and tend to ignore banner ads as
  irrelevant for their search.

Benway, J. P., Lane, D. M. (1998). Banner
Blindness Web Searchers Often Miss "Obvious"
Links. Internetworking ITG Newsletter, 1.3 (Dec.
1998).
24
The web and small devicesHuman Computer
Interaction

• Mobile devices introduce difficult usability
  problems
• Small screen size
• Traditional input mechanisms not available
• Slow Internet transfer rates
• Limited memory space
• WAP phone studies indicated poor usability and
  WAP appears to havedisappeared. In a field study
  by Nielsen and Norman in 2000, 70 of users said
  they would not use WAP within one year.
• In general, mobile devices sites should be
  designed for PDAs or phones and web content
  should represent needs of mobile users.

25
HCI for mobilesHuman Computer Interaction

• Mobile devices present interaction designers
  with a number of interesting problems.
• On the one hand they are, in many ways,
  impoverished systems they have small screens,
  limited/small buttons and limited memory and
  processing power.
• On the other hand they have lots of interesting
  aspects that desktop systems dont have they are
  always with you, they can be really small and
  portable/embeddable, they support lots of
  different wireless communications protocols, they
  have touch screens, they vibrate etc.
• The Human Computer Interaction (HCI) community
  have organised for the past few years a major
  international conference MobileHCI to look at
  such issues. This year its in Espoo in Finland
  see www.mobilehci.org.

26
Consumer devicesHuman Computer Interaction

• In parallel with academic research, consumer
  electronics manufacturers plough on with the
  process of making devices that are smaller,
  cheaper, and more stylish but are they
  improving interaction?
• Certainly there has been a building backlash
  against devices that are too small see
  http//www.usatoday.com/tech/news/techinnovations
  /2003-03-03-tiny-tech_x.htm.

27
Extra readingHuman Computer Interaction

• Have a browse of the pro-Flash website
  athttp//www.flash99good.com/ - it mightbe me
  but arent even the sites it recommends as being
  good examples of usability awful? (see
  Orange-Project).
• Then read Nielsens article from Oct 29th 2000
  Flash 99 Bad http//www.useit.com/alertbox/20001
  029.html
• Read all about Mystery Meat Navigation at
  http//www.webpagesthatsuck.com/mysterymeatnaviga
  tion.html
• The main HCI texts arent great on web usability
  there are plenty of specialist texts about
  though Ive found it hard to recommend one.
  Usability for the Web Designing Web Sites that
  Work by Brink et al seems best.