Nielsen Usability Engineering Life Cycle

1
Nielsen Usability Engineering Life Cycle

• Pre-design Phase
• Conduct a field study on how users work in their
  environment.
• Run a small user test analysis on the old design
• Make a comparative user test on competing web
  sites.

• Design Phase
• Use parallel design to make simple prototypes of
  different design
• approaches.
• Select the best design from the previous step and
  develop it further,
• then do more user testing.
• Iterate this design as many times as your time
  and budget allows.
• Almost finish site and do one market test.

2
Nielsen Usability Engineering Life Cycle (cont.)

• Post-Design Phase
• Get statistics and feedbacks about real use of
  the web site.
• Refresh Your web site (Minor changes).
• Start planning for the next redesign of the web
  site.

• Nielsen states that
• It is very common to double the
  usability of your web site the first time these
• methods are applied.

3
Planning Web Sites

• Planning web sites is the process of identifying
  goals, objectives,
• users,etc. of your site.

• Before building the web site

• Identify your target audience.

The target audience will be
1. Students from the University
2. Students registering for the University
3. People trying to get general
informal about the fees and deadlines
for the University
4
Planning Web Sites (cont.)

• Have a statement of purpose.

The web site will reduce the demand on the Fee
office for routine information regarding the
expenses, fees, deadlines, services, loans,etc.
for the study in the University. The site will
carry information that are provided by brochures
and printed material available at the fees
office. The site will support certain student
services like queries on financial status. After
one year of operation on the web, the web site
will be able support online requests for loans
and also support electronic transactions like
paying the fees by Visa or Master card.

• Know your main objectives.

The main objectives will be 1. Allow the user to
easily access the general information provided by
the fee office 2. Structure the information in
such an easy and understandable manner. 3.
Support students queries for their financial
status. 4. Provide secure server for the
financial information of the students
5
Planning Web Sites (cont.)

• Have a concise outline of the information that
  your web site
• will contain.

The information the site will contain will be
1. Undergraduate fees 2. Graduate fees 3.
Deadlines 4. Living expenses 5. Loans
provided by U. of C.
6
Site Structure

• Site structure is the art of organizing and
  structuring the information
• that your web site will contain into pages
  that support users tasks
• and easy navigation.

• Why site structure ?
• No matter how good the navigation system is, if
  the site structure is poor
• then the usability of the system is poor.
• The information on the web is different from
  printed material because the
• screen cant support one large document in a
  single page.
• Users dont want to scan very long pages to get
  to a piece of information.
• To support future growth.

• Under all conditions the structure should
  support users tasks not
• the organizational structure.

7
Site Structure (cont.)

• Web sites are structured in hierarchical approach

• The success of a web site structure is determined
  by how well the
• actual information structure matches the
  users expectations.

8
Text Documents

• Government, educational, corporate, and
  organizational web sites
• present large amount of information and text
  documents on their sites

• The text documents in a site are presented in
  chunks of information

• Chunks are 1-3 pages of information on a specific
  topic

• Chunks are used because
• users dont want to spend long time reading long
  documents, they save it
• or print it.
• Users will not get bored, there will be links to
  jump to the next topic.
• Chunks are better fitted for the computer screen
  which is limited, the user
• will not have to scroll again and again.

9
Sub-Sites

• Sub-sites is one way to handle very huge
  websites with large amount
• of information.

• It is a collection of web pages within a web
  site that have been given
• a common style and a shared navigation
  structure.

• Sub-sites Should not be independent from the
  parent web-site and it
• should keep the consistency of the web site.

• Each page of the sub-site must contain a logo
  link to the home page
• of the sub-site and a logo link to the parent
  site home page.

• Example
• IBM Web Site
  http//www.ibm.com
• IBM branch office in Canada
  http//www.ibm.com/ca/en

10
Web Site Navigation

• Why the web is considered to be a navigation
  system?

• Due to the large amount of information and text
  documents on the
• web, designers must provide a good navigation
  system beyond the
• GO-TO blue hyper link

• the site navigation system helps the users to
  get a sense of your site
• structure and organization. It help them to
  view your site as a hole to
• decide where they want to go.

• The navigation system interfaces must help the
  user to know
• Where am I ?
• Where have I been ?
• Where can I go ?

11
Where am I ?

• The navigation system must provide information
  about where the
• user is in two ways
• Relative to the web.
• Relative to the site.

• Put the site (organization) logo on every page
  with a hyper link to
• go back to the home page.

• Show the relative location by showing the
  structure of the site and
• highlighting the current location (breadth
  method).

• Example
• Toby Braun Information design
  http//www.tbid.com/

12
Where Have I been ?

• Currently there is no solution to provide
  detailed information to
• answer this question.

• Partial solutions are provided such as
• The back button of your browser
• The history folder provided by the browser.
• Changing the color of the hyper link for a
  previously visited page.

13
Where Can I go?

• Two entries to show you where you can go
• The navigation system of the web site
• Hyperlinks.

• The navigation system can use
• Main structure of the site
• Pull down menus

• Sometimes it is not preferred to use hyperlinks
  in your page.
• Example http//www.IEEE.org/membership/mem_serv
  /apprequest.html

14
Breadth Vs. Depth Navigation

• The most common navigation design is to list all
  the top levels of
• your site in a breadth or depth method.

• The breadth method is like http//www.theweather
  network.com

• This method has the advantage of giving the
  users at all times the
• sense of site structure, but it has the
  disadvantage of occupying
• 20 of the screen for listing these levels
  which can be accessed
• from your home page with one additional
  click.

• The depth method is like
• http//www.useit.com/papers/
  heuristic/heuristic_evaluation.html

• This method has the advantage of giving a full
  hierarchical
• description and the user can jump to any
  higher level. Also it takes
• minimal space. However this approach is more
  suitable for
• hierarchical information architecture.

15
Search Design

• Nielsen studies showed 50 of all users are
  search dominant,
• 20 are link dominant, and the rest exhibit
  mix behavior.

• The search should be available on every page.
  Why?
• Users can get lost in the site and need to go to
  a certain page.

• The search should be general and not scoped.
  Why?
• The users might not understand that the search
  is scoped.

• In case of scoped search, the search page must
• Explicitly specify which scope is being searched
  in the search and
• results page.
• Include a link to search the entire site in the
  search and result pages

• Example
• http//search.microsoft.com/us/corpinfo/billg/sear
  chMS25.asp

16
The Search Page

• Dont use Boolean search in the main search
  page. Why?
• Users get confused and use it in the wrong way
  resulting in zero hits
• Instead use a separate advanced search page.

• The search page should
• Sort the results from best match to least match.
• Eliminate duplicate occurrence of the same page.
• Example www.myhomepage.com
• www.myhomepage.com/mydirectory
  /index.html
• The search engine should consider quality beside
  relevance. How?
• When a user follows a link from the result page,
  he can be asked to
• evaluate the quality of this page.
• Example The FAQ page has higher quality in case
  of questions.

17
The Search Engine

• The search engine must include a page abstract
  for each result.

• The page abstract can be generated
• - Automatically by the search engine.
• - By the author (publisher) of the page.
• ltMETA NAMEdescription CONTENTThis is a
  content summarygt

• the author description is much better. Why?
• Human being still much better in expressing what
  a page is all about.

• Page abstracts must be kept short and intensive.
  Why?
• Most www search engines display the first 150
  characters of the abstract.
• (it is a trade off between full description
  and excessive reading by the user)
• In web Sites search engines, most users scan the
  abstract rather than reading it.

18
The Search Engine (cont.)

• Each page should contain a list of keywords in
  the META tag.
• ltMETA NAMEKeywords CONTENTconsulting,
  accessibility,GUI,
• interface design, usability, web
  usability,..gt

• Keywords list must
• Include simple and compound terms
• Have focused and highly descriptive keywords
• have alternative keywords for any terms used by
  competitors (IBM users use
• the term DASD instead of Hard Disks).

• Example (1) http//www.usability.uk.com/
• 
  http//www.enel.ucalgary.ca/shehata

19
URL Design

• The URL must be considered although not part of
  the user interface
• because it must be designed in a specific
  way to make it easier for the
• users to get to your web site.

• Domain names must be exactly or similar to
  physical company names.
• Easy to remember and easy to spell (I already
  know the physical name).

• For a new company, the owner must think of a
  name as a trade mark
• and also as Internet domain name mark.

• URLs design Tips
• Make URL short as possible. The shorter, the
  less typing mistakes.
• Use common natural language words. Avoid
  difficult words.
• Try to use all lower case because O is confused
  with 0.
• Avoid special characters as possible because they
  can be forgotten.

20
URL Design (cont.)

• Example Two words URL For Jakob Nielsen web
  site.
• www.jakobnielsen.com
• www.jakob-nielsen.com
• www.jnielsen.com

• Whenever the web site pages are moved, make sure
  that the old
• URL is still active. How?
• Setup a redirect from the server.
• Use HTTP redirect code 301 if this page is
  permanently moved.
• Use HTTP redirect code 302 if the page is
  temporarily moved.

• Nielsen studies showed that the old URL must be
  active for at least
• half a year and preferably for 2 years.

21
International Use Web Sites for Global audience

• World Wide Web is intended for international
  use. A single click
• can take the user overseas without leaving
  his chair.

• By the year 2000 50 of web users are
  overseas.
• 2005 80 of web users
  are overseas.

• Two approaches for international use
• Internationalization Single design that can be
  used world wide.
• Localization making an adapted version of the
  design for specific locale

• For the web, sometimes it is better to use
  internationalization. Why?
• Many companies will not have the resources or
  budget to localize
• their web site
• Many countries will not have have enough users
  to make localization
• worth wile.

22
General internationalization issues

• Dont use icons or gesture that can be considered
  as offense.
• Ex The mail box with a flag can be considered
  as an offense in some counties,
• The envelope will be much better.

• The time is different around the world, specify
  your time as
• AM/PM or 24 hours, also specify your time
  zone and GMT position
• Ex 4 PM Mountain Time (USCanada) (GMT-0800)

• The date should be written in words not numbers
• Ex 12/8/2001 can be read as 12 of August 2001
  or 8 of December 2001
• the solution will be December 8th, 2001.

• Use universal standards for the currency and
  sales in the site and
• remember to put the shipping costs for
  different countries. Dont
• use free telephone numbers.
• Ex USD for United States Dollars
• 800 numbers dont work outside US
  and Canada

23
General internationalization issues

• Some countries have high Internet access costs,
  its convenience
• to split large downloads into pieces.

• Use clean and simple English. Avoid slang or
  religious expressions

• Be prepared for international huge amount of
  emails.

• Important to consider cultural differences
  between different countries.

Q Give the Dog the ball.
A game called Give the Dog a Bone found on the
otherwise excellent JumpStart Toddlers CD-ROM
Useit.com Papers and Essays International
Usability
24
Usability Testing

• Usability testing of the web site is very
  important. Why?
• The only way to ensure that you have a usable
  web site.
• Fixing the usability problems at early stages is
  much cheaper.
• Users have infinite potential of making
  unexpected misinterpretations
• of the site elements and for performing jobs
  in different ways than you
• imagine. Designers are not users.
• Helps to correct problems for sites that are
  intended for international
• use.

• Testing methods
• Heuristic evaluation
• Walkthroughs
• User testing
• Cheap usability tests

25
Heuristic Evaluation

• It is a usability engineering method to find the
  usability problems
• in a web site through the application of
  known usability principles
• (Heuristics).

• It is done by a team of expert evaluators.
• The evaluators work alone to avoid any peer bias
  and to ensure the
• independency of their opinions.
• The evaluator must goes through the interface at
  least twice.
• Each evaluator can use any addition principles
  for evaluation

• Heuristic evaluation is a discount usability
  engineering.
• Nielsen case studies The cost of using the
  heuristic method is
• 10,500. The expected benefits were 500,000
  (Nielsen 1994)

26
Heuristic Evaluation (cont.)

• Nielsen has developed ten heuristics for testing
  web usability

1. Visibility of system status users need to
know where they are in your site the
status of form transactions need to be clear -
let the user know that their data
submission was successful 2. Match between the
system and the real world speak the users'
language and avoid jargon use intuitive
symbols (e.g. back buttons point left,
forward buttons point right) 3. User control and
freedom provide clearly marked exits (or home
buttons) support undo/redo transactions
don't take browser controls away from users 4.
Consistency and standards using navigation
controls consistently use consistent
layout author to HTML and CSS standards
(improves cross- browser usability) 5.
Error prevention regularly check for broken
links use javascript to validate forms
27
Heuristic Evaluation (cont.)
6. Recognition rather than recall label
navigation elements (don't make people
mouse over them to see what they are). 7.
Flexibility and efficiency of use allow advanced
search options don't prevent users from
book marking pages. 8. Aesthetic and minimalist
design don't clutter pages with unnecessary
objects as they add to download time and user
confusion 9. Help users recognize, diagnose and
recover from errors explain errors in
plain English rather than using error codes. 10.
Help and documentation not necessary on smaller
sites, but when used, should be integrated
within the site.
28
Walkthroughs Evaluation

• A walkthrough is a scenario-based evaluation of
  a web site interface. 

• Scenarios are developed with the following in
  mind
• Who Description of the user and their relevant
  knowledge  
• What and why Description of the user's goals
  and motivation  
• With Description of the tools and equipment
  that the user have.  
• How Description of the actions needed to
  achieve the user's goal

• Walkthroughs can be completed by groups
  including site developers,
• representative users, and usability
  practitioners ( pluralistic
• -walkthrough) or done by one person
  (cognitive walkthrough).

29
Walkthroughs Evaluation

• The following questions are considered at each
  step required to
• achieve the user's goal.
• What knowledge is needed to complete this
  action, and will the
• user have this knowledge? 
• Will the user notice that the correct action is
  available?
• Will the user associate the correct action with
  their goal?
• Will the user perceive the system feedback?
• Will the user understand the system feedback?
• Will the user see that progress is being made
  towards their goal?

30
User Testing

• User testing is the most sophisticated and
  costly, but usually the
• most useful testing method.

• Tasks are based on the sites main goals and
  objectives.

• The user test is monitored, usually, but not
  always, in specially-
• designed laboratories where video cameras
  and/or eye-movement
• tracking devices are used.

31
Number of Testing Users

• User testing involves an optimal number of 5
  users to do the test.

• The first test with five users finds about 80
  of the usability
• problems in the system
• The second test will find about 13 of the
  remaining problems.

32
Cheap Usability Tests

• Who said that usability tests must always be
  expensive and time
• consuming. (Jakob Nielsen cheap usability
  tests)

• Studies showed that for a team conducting the
  tests
• Experts 39 hours to conduct the test.
• Beginners one week.
• Users can be recruited for less than 1000

• You dont need fancy usability labs. Conduct the
  test on any
• machine with you as an observer.

• User testing can be done on two levels
• 1. Site-Level usability testing
• 2. Page-Level usability testing

33
Nielsen One Hour Usability Test

• Jakob's One-Hour Usability Test
• 1. Use the hallway methodology instead of
  formal recruiting catch a user
• or two on their way to the cafeteria
  (for an intranet), at a tradeshow, or
• any other place reasonably
  representative users gather.
• 2. Spend 10-15 minutes with each user,
  giving them your laptop and
• asking them to perform a single task
  with your site.
• 3. Write up a 50-line email message listing
  the usability catastrophes you
• observed. Mail this mini-report to your
  entire Web team from your
• hotel room that same evening.

• Rest assured that the 50-line limit for the
  email message will feel like
• a severe constraint even with no more than
  two users on a laptop in
• a hallway for a few minutes, you will have a
  long list of observations

34
Other Suggestions for Cheap Usability Test

• For international usability testing, ask your
  usability experts to
• perform tests whenever they travel to any
  country for other purposes

• For international remote testing, you dont
  require advanced
• communication tools, use a web cam and a
  headphone with mic. at
• the user machine instead of video
  conferencing.

• For user testing, conduct the test with no more
  than 5 users.

35
GUI Bloopers
36
What Is It?

• A mistake that software developers frequently
  make when designing graphical user interfaces
  (GUI)

37
Good GUI DesignPrinciple 1

• Focus on the users and their tasks, not the
  technology
• Discover who the intended users are
• Understand the tasks

38
Good GUI DesignPrinciple 2

• Consider function first, presentation later
• Develop a conceptual model

39
Good GUI DesignPrinciple 3

• Conform to the users view of the task
• Strive for naturalness
• Do not impose arbitrary restriction
• Use the users vocabulary not your own
• Keep program internals inside the program
• Find correct point on the power/complexity
  trade-off

40
Good GUI DesignPrinciple 4

• Dont complicate the users task
• Common task should be easy
• Dont give users extra problems to solve

41
Good GUI DesignPrinciple 5

• Promote learning
• Think outside-in, not inside-out
• Be consistent but not naïve
• Provide a low-risk environment

42
Good GUI DesignPrinciple 6

• Deliver information, not just data
• Design displays carefully get professional help
• The screen belongs to the user
• Preserve display inertia

43
Good GUI DesignPrinciple 7

• Design for responsiveness
• Not the same has performance
• Responsiveness is even more important on the web
• Software need not to do everything it was asked
  for
• All delays are not equal - prioritize

44
Good GUI DesignPrinciple 8

• Try it out on users, then fix it
• Schedule time to correct problems found by tests
• There are tests for every time and purpose

45
References

• www.gui-bloopers.com
• http//www.webpagesthatsuck.com

46
Killer Web Sites
47
Overview

• 1st 2nd Generation Web Sites
• Good-looking Pages
• Image Preparation
• Third Generation Sites
• Design vs. Usability

48
Background

• 1st Generation Sites linear, sequence of text
  images, bullets horizontal rules
• Designed by technical people
• 2nd Generation Sites playing with ltBLINKgt,
  icons, tiled images, bevelled buttons
• Menu icon driven

49
1st 2nd Generation Site Structure
50
The Problem

• Designer wants to maintain control over his/her
  site.
• Direct Manipulation Net Objects Fusion is not
  always possible
• HTML silly putty.

51
Page Creation

• Text
• Images
• Headers
• Subheaders
• Links
• Menus

52
Page Layout Tips

• Vertical White Space readability, hierarchy,
  comprehension
• GIF Headlines varying typefaces
• Horizontal Rules JUNK
• Margins Absolute vs. Relative

53
Page Layout Tips

• Short Lines simple and quick
• Multiple Columns cause scrolling
• Indents between paragraphs
• Space words and letters
• Tables mortise images

54
Rendering Type Tips

• GIF pictures show varying typefaces.
• Anti-alias smoothes out fonts.
• Consistent size, colour, weights and intermediate
  colours.
• Text in a word processor provides spell checking.

55
Rendering Type Tips

• Words in caps letter-spaced.
• Mixed upper lower spaced tightly.
• Captions use the ALT tag for control.
• Small Caps effective, properly spaced.

56
http//www.worsfold98.freeserve.co.uk/
57
http//www.advanced-taekwondo.net/
58
http//www.dsiegel.com/damage/index.html
59
http//www.cyber24.com/htm3/index2.html
60
3rd Generation Web Sites

• Layout Principles Creative design solutions
• Complete Experience to the visitor
• Metaphors Visual Themes
• Generate familiarity, ease of navigation, quality
  content

61
3rd Generation Sites
Tunnel Bypass
62
Entry

• A.K.A. Front Door, Splash Page
• Load quickly, Little information, Location
• Hook people into the site.

63
Fish Food Tunnels

• Fish Food Temptation - Sports, Weather, Gossip,
  Marilyn Monroe, FREE STUFF
• Keep giving Generate a Buzz
• Entry Tunnels Option to go for a ride
• 2-4 entertaining screens

64
Core Page

• Create a community with return customers and
  participants.
• Directs and guides the visitor.
• Doesnt necessarily exist on 3-G sites.
• Many intra-site links, some external links.

65
Exit

• Well-marked exit entices visitors to stay.
• Subtle so as not to encourage an exit.
• Good place to ask something from your visitors.

66
Miscellaneous

• Net Equity audience mind-share, things that
  are/will be familiar to the audience.
• Monthly, weekly, daily changes.
• Whats New! should not be stated.

67
Example Sites

• http//www.dsiegel.com/home.html
• http//www.accad.ohio-state.edu/mlewis/Gallery/ga
  llery.html
• http//www.6168.org/tv/tv_2.html
• http//fray.com/