Understanding UserCentred Design

1
Understanding User-Centred Design

• March 2007

2
GeoConnections is

• a national partnership initiative
• led by Natural Resources Canada (NRCan)
• developing the Canadian Geospatial Data
  Infrastructure (CGDI)

3
CGDI vision

• To enable access to the authoritative and
  comprehensive sources of Canadian geospatial
  information to support decision-making.

4
User-driven

• According to Treasury Board of Canada guidelines
  for the renewed GeoConnections program, user
  needs should drive program priorities to ensure
  the infrastructure serves requirements.
  Additionally, the guidelines mandate that a
  user-centric design process will be employed for
  future infrastructure development.

5
User needs and UCD within GeoConnections
6
GeoConnections guide on UNA/UCD

• For more information on UNA and UCD please
  consult the GeoConnections guide to
  Understanding Users Needs and User-centered
  Designon the GeoConnections web site
  www.geoconnections.org

7
Contact

• For more information on GeoConnections and the
  CGDI contact
• Annie Laviolette
• User needs Advisor, GeoConnections
• 613-995-4783
• annie.laviolette_at_nrcan.gc.ca

8
The Agenda

• Introduction on GeoConnections and the CGDI
• Part 1 What is UCD and why does it matter?
• Usability and value
• What is the result of a non-UCD approach? Some
  common usability issues
• Part 2 A UCD approach to development
• The process
• Case study

9
UCD Placing the User at the centre

• User Centred Design (UCD) shifts the focus from
  the designer of the application/system/web site
  to the user of that application/system/web site
• The goal of UCD is to concurrently improve
• the usability of applications and
• the usefulness / utility of applications
• BY intuitively making the
• Purpose
• Scope and
• Target audience

10
What is usability?

• The extent to which a product can be used by
  specified users to achieve specified goals with
  effectiveness, efficiency and satisfaction in a
  specified context of use - ISO
• Usability in everyday life
• Ordering a product from a web site
• Programming your VCR
• Changing your address

In other words, a VCR that is used as a
paperweight cannot be called an unusable
paperweight, because we have removed it from its
specified context of use.
11
But usability cannot exist by itself
"You need to build something that's
fundamentally useful to people and then build
usability on top of that. If all you have is
usability, you don't have much. - Marissa Mayer,
Director of Consumer Products, Google
Usability Utility Value

• Utility is the extent to which the online
  offering meets needs and solves problems
• Content
• Applications
• Communications
• Community

12
Identification of key stakeholders

• Why?
• Typically, sites have multiple stakeholders with
  different ideas about the site and what it should
  be
• Not involving all stakeholders in UCD will result
  in not getting buy-in from all parties involved
  this results in potential for conflict and
  incoherent service delivery in the future
• Having all stakeholders participate in a UCD
  approach mitigates individual biases
  stakeholders understand the participatory nature
  of the process objective data gathered from
  users helps dispel personal pre-suppositions

13
Value

• Why should I visit this Web site as opposed to
  another Web site that also has the same
  information?
• - Credibility of information (authoritativeness)?
  
• - Info easy to exchange
• Online vs. offline
• Why should I use an online source, as opposed to,
  say, a library? What is the inherent value of the
  Web?
• - Data available online is malleable
  (downloadable, etc.)
• - 24/7 access
• - Remote access

14
Online value model
Real data from an unidentified Canadian financial
institution, based on a quantitative survey and
regression analysis by Phase 5
Brand
.18
.62
VALUE
.48
.28
Usability
.62
Price
.18
Navigation
Help / Tutorials
.32
.16
.47
Speed
Admin Fee
Transaction Fee
15
Articulating value in the electronic universe
16
The interface is ...

• the point of contact/transference between
• the articulation/perception (value claim) and
• the confirmation/denial
• of Value

17
Articulating value in the electronic universe
THE INTERFACE
18
The interface ought to intuitively ...

• Articulate the purpose (of the web site,
  application, system)
• Target a particular audience
• Is this site for me?
• Identify the scope AND, wherever possible
• Indicate how the constituent parts are related to
  each other
• Articulate the value proposition
• Why should I use this online venue instead of
  others?

19
If you thought the last slide was obvious
20
The challenge
Remember the ISO definition and its emphasis on
specified users, goals and contexts? The
extent to which a product can be used by
specified users to achieve specified goals with
effectiveness, efficiency and satisfaction in a
specified context of use - ISO

• The challenge on the Web is to determine who or
  what constitutes
• A specified user
• Specified goals
• Specified context of use
• For example The end-users of a particular Web
  site may be as diverse as farmers, scientific
  researchers or policy makers. Each of these
  different groups of users may have different
  contexts of use, as well as goals set for their
  use of the very same Web site.

21
Identifying key user groups

• UCD ensures that the key user groups of a
  particular application are clearly identified
• Who are they?
• What is their interest in the particular site?
  What would motivate them to visit the site?
• How does this relate to their current interests
  and activities?
• What sort of information or interaction do they
  currently seek or conduct information and
  interaction that they could now seek or conduct
  through the Web site?

22
Identifying key user groups

• UCD ensures that the key user groups of a
  particular application are clearly identified
• What is the most likely context for their use of
  the site?
• How would the use of this site fit into their
  workflow?
• How does the access to technology ranging from
  Internet connectivity to the actual availability
  of a computer at a convenient location impact
  their use of the site?
• What are they most likely to do once they are on
  the site?
• What sorts of content are they most likely to
  consult?
• What types of interaction, if any, are they most
  likely to conduct?

23
If there is more than one user group

• What are the similarities and key differences
  between them?
• If the different groups are highly divergent
  i.e., the differences between them greatly
  outnumber the similarities then how does one
  prioritize between the different groups?
• On what basis does one identify the focal,
  secondary and tertiary groups?

24
What is the result of a non-UCD approach? Some
common usability issues

• Conflicting format and conventions
• Navigation
• Strategic and Tactical Metaphors
• Taxonomy
• Nomenclature
• Spatial encoding
• Audience conflation

25
1. Conflicting format and conventions

• Search engines
• length of search strings not specified
• search scope undefined (WWW, site,
  sub-domain?)E.g. within the GOL network, does
  the Search-scope include all GOL sites or only
  a particular cluster? Does the user know that
  s/he has moved away from one cluster into
  another?
• Forms
• date format not specified (yy/mm/dd)
• postal code spacing
• do I include in currency?

The Search scope while ambiguous on the
navigation bar is clearly specified on the
Search form
26
1. Conflicting format and conventions
Hyperlinks
Links to Glossary?
Link to brochureware?
27
2. Navigation common issues

• 2.1 Conflicting Metaphors
• 2.1.1 Strategic
• 2.1.2 Tactical
• 2.2 Taxonomy how information is organized
• 2.3 Nomenclature how information is labelled
• 2.4 Spatial Encoding how the virtual space of
  the Web site is mapped and how that mapping is
  communicated to the user

28
2.1 Conflicting metaphors

• Strategic metaphor
• Holistic
• Inceptional
• Underscores site concept
• the site as a .

For a strategic metaphor to work, the user needs
to be familiar with the frame of reference that
the metaphor seeks to use to make the new
environment familiar.
29
2.1.1 Strategic metaphor

• Imagine a user from a culture that has no idea of
  McAfee
• What sort of a site is this?
• What is the purpose of the site?
• Who is the target audience of the site?
• What sort of person/organization is McAfee?

30
2.1.1 Strategic metaphor
31
2.1.2 Tactical metaphor

• At the level of interaction
• Design
• Architectural

For a tactical metaphor to work, the site element
needs to be true to the original frame of
reference or else it subverts its own promise.
E.g., if a site is using a Windows file/folder
format to metaphorically communicate the
expandability of a menu bar, then users may well
expect that the site will allow multiple folders
to be opened at once, just because Windows does.
The post-metaphor Tabs were a reference to paper
files and folders however, they have become a
Web convention to a point where many youngsters
may see online tabs as the frame of reference
that will help them understand the use of
(increasingly rare) paper files and folders.
32
2.2 TaxonomyWill everyone expect to find it in
the same place?
If I require information on the population of
Gallows Cove, NFLD, where do I go Census or
Canadian Statistics?
33
2.3 Nomenclature Does everyone think it means
the same thing?
I am not familiar with Senecas internal branded
terminology what is ELVIS?
Do all of this banks clients know what MyView
the ability to view their holdings at other banks
is? And what impact does that have on Self
Service?
34
2.4 Spatial encoding

• What is spatial encoding?
• Spatial encoding is all around us!
• Books pagination
• Cities grids (NYC)

Do users intuitively understand the coding order?
After all, spatial encoding exists in order to
allow users to negotiate unfamiliar territory.
35
2.4 Spatial encoding on the Web

• Route
• landmarks
• Home Page button
• Menu items
• Banners
• Hyperlinks
• Survey
• paths
• Using Back button on browser window
• Using Home Page button for direct access
• Opening new browser window vs. new page in same
  browser window

36
3. Audience conflation
Does Account Info relate to both residential
and commercial clients? No. Is the answer
obvious? No.
37

• 3. Audience conflation overall

• What is the purpose of the site?
• Who is the site for (target audience)?
• How is the site organized?

38
Is it possible to prove the value of User-Centred
Design?

• Absolutely!
• Through statistical analysis of quantitative
  survey results
• Quantifying the strength of the relationship
  between usability and site value (however
  defined)
• Through appropriate reporting of qualitative
  usability tests
• Building the user into the design process
• Probing into whys and wherefores
• Do NOT mix quantitative techniques with
  qualitative approaches
• The results are misleading (sometimes false)
• The profession loses credibility

39
Quantitative survey results Principal
components analysis
Principal components analysis reduces many
variables or factors to a core set of composite
variables (components) that can then be used in
analysis such as regression modeling.
When we run correlation analysis with these
components, instead of the individual factors,
the component that we denoted as usability has a
correlation coefficient of .668 (a very strong
relationship with overall satisfaction) and is
clearly the main driver of overall satisfaction.
40
Bad practice example
How valid are these results if n 12? This sort
of measurement discredits findings from usability
tests
In recent tests we have seen mean satisfaction
scores (from post-interview questionnaires
offered to qualitative samples) decline over
subsequent iterations, even as respondents
explicitly articulated increased satisfaction
with subsequent iterations in the qualitative
interview.
41
A UCD approach to web site/application/system
development
Product/Service Idea
1. Set objectives site host

• Strategy Process Facilitation

• Content
• Applications

Stakeholders vision vs. users assessment

• Focus Groups
• Card Sorting

Utility Mapping
2. Understanding user context

• Nomenclature
• Taxonomy

3. Developing requirements
UCD/Design Blueprint
4. Production of design
Wireframes, low-fidelity prototypes

• Wireframe and low fidelity testing

Alpha Testing

• Channel research

5. Evaluation of design
Online prototype

• Tracking and evaluation research

42
1. Setting objectives

• What is the purpose of the site?
• What will be the benefits to the user?
• Why should they come to the site?
• What would be the benefit to the organisation?
• Why should I invest in the site?
• Who is the site for?
• What community?
• How shall I get them there?
• What will the site do?
• Content?
• Functionality?

43
1. Setting objectives

• Methodology
• One-on-one interview with key internal
  stakeholders stakeholders to go through and
  complete a strategy document which asks key
  questions
• 2. Strategy session with internal stakeholders
  moderated group where stakeholders reveal how
  they individually answered the strategic
  documents discuss points of convergence and
  points of divergence work towards reconciling
  points of divergence
• 3. Outcome A strategy document that answers the
  key strategic questions and has sign-off from all
  major stakeholders

44
2. Understanding user context

• Profiling users
• Creation of personae
• Segment and personae-based understanding of
  user-needs and different use contexts

45
2. Understanding user context

• Profiling users
• Things to consider
• Who is your audience? Activists? Researchers?
  Farmers? Doctors?
• Will they most likely access the site from
• An office with high-speed Internet connectivity?
• A mobile wireless device with limited display
  capability?
• A dial-up connection with low bandwidth and slow
  connections?
• Are they
• Highly computer savvy and prefer downloading
  malleable data?
• Do they primarily prefer processed information in
  flat formats ?
• Are they primarily focused on local/regional
  information?

46
2. Understanding user context

• Key question
• Do the site hosts hypotheses about the target
  audience hold true?
• Do members of the target audience see any value
  in the site?
• If so, are the drivers of value what the site
  hosts had assumed?
• Methodology
• Contextual enquiry (qualitative)
• Focus groups (qualitative)
• Quantitative surveys for segmentation
• Outcome A document that clearly identifies key
  user groups, their key points of interest in the
  site, and their most likely use contexts

47
3. Developing requirements

• a. Strategic
• b. Technical
• c. Design
• d. Navigational schema

48
3.a. Developing strategic requirements

• Mapping site hosts hypotheses against
  user-research feedback
• Identifying points of convergence and points of
  divergence
• Reconciling points of divergence
• Does it make sense to change the site hosts
  hypotheses to align it with users requirements?
• Will that fulfill the strategic purpose of the
  site?
• Does it make more sense to abandon a particular
  user group for the time being and serve the
  others whose needs coincide with the site hosts
  vision?
• What that go further in fulfilling the strategic
  purpose of the site?
• Finalizing
• The key purpose of the site
• The key target audience of the site
• The scope of the site

49
3.a. Developing strategic requirements

• Methodology
• Mapping exercise that places original site hosts
  hypotheses against user research feedback on a
  grid to identify points of convergence and
  divergence
• Objectively facilitated group discussion among
  site hosts to help prioritize purpose, key
  audience and scope, against strategic purpose
• Outcome A site strategy document that clearly
  identifies key user groups, their key points of
  interest in the site, and their most likely use
  contexts

50
3.b. Developing technical requirements

• Examples of technical requirements include
• Screen resolution 800 x 600 or 1024 x 768, or
  other?
• Device adaptability All desktop, or some
  desktop or wireless or other?
• Accessibility
• Adherence to all or select W3C guidelines
• Need to be equally or unequally accessible by
  assistive/adaptive technologies catering to
  visual, aural, motor and cognitive limitations

51
3.b. Developing technical requirements

• Methodology
• Technical requirements can be specified based on
  the user-research, the mapping exercise and the
  facilitated discussion among site hosts, as well
  as consultation of policy guidelines (e.g.,
  Treasury Board Secretariat accessibility
  guidelines)

52
3.c. Developing design requirements
Web site information architecture shows (a) how
the information is organized (b) how different
groups of information relate to each other (c)
how they are labelled

• Design requirements
• Information Architecture (IA)
• Taxonomy where and how to place different bits
  of information
• Nomenclature labelling format

Methodology card-sorting, topography exercises
in mini-groups
53
3.c. Developing design requirements

• Screen topography
• How to divide the screen into panels
• Where to place various elements (links, buttons,
  etc.)

Site wireframes that illustrate screen topography
54
3.d. Developing navigational schema requirements

• In his book, The Elements of User Experience
  User-Centered Design for the Web, Jesse James
  Garrett outlines a navigational framework based
  on the following 6 elements
• Global persistent main menu
• Local hierarchy of parent, children, and
  siblings nodes
• Supplementary navigation that shifts focus
  based on facets
• Contextual inline navigation embedded in
  content of page
• Courtesy links that are not regularly needed,
  but are offered for convenience
• Remote site maps, help, search, etc.

55
3.d. Developing navigational schema requirements

• The 3 cornerstone elements of the navigational
  framework of this Advanced Transport Information
  System (ATIS) portal were
• The (audience-based) tabs (Global, or Persistent
  Navigation)
• The map
• The Left Hand (LH) bar on each tab (Local
  Navigation)
• Contextual links on map

Global
Local
Map (Supplementary)
Contextual
56
3.d. Developing navigational schema requirements
Global
Contextual in its relationship with the Global
Navigation elements i.e., the items (audiences)
remain the same for each of the subjects on the
global navigation bar, but the content changes by
subject
Supplementary (also offered globally)
57
4. Production of design based on a UCD Blueprint

• The production of wireframes and other
  low-fidelity prototypes is based on the UCD
  blueprint developed through
• Technical requirements
• Information Architecture
• Taxonomy
• Nomenclature
• Navigational schema
• Screen topography
• The UCD blueprint can then be tested with members
  of target user groups for validation and
  modification

58
4. Production of design based on a UCD
Blueprint

• Methodology
• One-on-one goal-based tests with low-fidelity
  prototypes, which can be
• Paper prototypes, where respondents use their
  fingers as a mouse
• Bitmapped images shown on an HTML browser and
  users tell the research what they would do (where
  they might click) or expect to do in order to
  perform various tasks
• Bitmapped images shown on an HTML browser with
  some buttons and links hyperlinked to other
  similar images representing lower-level pages
• Outcome Finalization of UCD requirements based
  on participatory feedback from target audience
  groups

59
5. Evaluating and refining design

• Project management
• Testing the blueprint with a controlled group of
  users to uncover enablers of, and barriers to,
  usability and effectiveness (utility)
• Making modifications to design
• Further (iterative) testing with a group of users
  consistent with the first group
• Process repeated through the development cycle
  as code is introduced to move the prototype from
  low-fidelity images to higher-fidelity
  functionality, and finally into an alpha or beta
  version in synch with production to
  progressively eliminate barriers to the
  applications effectiveness
• Key considerations
• Timeline
• Cost

60
5. Evaluating and refining design beta tests

• Quantitative Methodology
• Users are intercepted at the site or recruited in
  advance and asked to complete a series of tasks
  (e.g. What are clients IT services? Locate site
  map)
• Software tracks
• task completion rates (that you determine)
• clicks to completion
• path taken
• time required to complete task
• Users can also
• provide qualitative comments
• be asked to complete a short quantitative survey

Outcomes and Benefits - Larger samples mean
greater accuracy - Can be used to model and
manage user outcomes - Further refinement of
product concepts
61

• Automated usability testing UI

Notepad - Used by respondents to insert
comments or suggestions.
Browser Window - Displays website or respondent
will interact with.
Dialogue Box - Provides comments
instructions before and after each task.
Find a tool that lets you compare investment
options
Tasker - Reminds respondent of the task and
provides Navigation options.
62
Automated usability testing UI

• Phase in development cycle
• Performance measurement
• Concept development
• Methodology
• Users are intercepted at the site or recruited in
  advance and asked to complete a series of tasks
  (e.g. What are clients IT services? Locate site
  map)
• Software tracks
• task completion rates (you determine what this
  means)
• clicks to completion
• path taken
• time required to complete task

63
Automated usability testing UI

• Users can also
• provide qualitative comments
• be asked to complete a short quantitative survey

• Outcomes and Benefits
• Larger samples mean greater accuracy
• Can be used to model and manage user outcomes
• Further refinement of product concepts

64
Automated usability with a quantitative sample
results
Note these results can be quantified only
because (a) the sample was sufficiently large
(min. 100) to have statistically meaningfully
results, and (b) the mode of data collection was
automated to minimize interviewer-bias that
informs qualitative testing
65

• Survey integration

• After completing tasks
• Respondents rate perceived difficulty
• Provide demographic info
• Compare to other sites

• Findings analyzed with behavioural metrics
• E.g. what was the average difficulty rating for
  those who took more than 2 minutes to complete
  the task?

Note these results can be quantified only
because (a) the sample was sufficiently large
(min. 100) to have statistically meaningfully
results, and (b) the mode of data collection was
automated to minimize interviewer-bias that
informs qualitative testing
66
Case study, ATIS web site

• The site an Advanced Transportation Information
  System (ATIS) Web site that would draw real-time
  information from various sources
• Traffic cameras
• Drivers
• GPS systems
• Government departments
• Transportation companies
• Other
• And present it in a map-based format, as well as
  searchable format for
• Drivers commercial and non-commercial
• Transit users
• Tourists / visitors

67
Case study, ATIS web site

• The issues
• Would the site have equal appeal to all users?
• Can user-type be used as a primary navigational
  system?
• Would content need to be differentiated by
  user-type?
• How would out-of-site content be incorporated
  on-site?
• Would users prefer accessing the information
  through the map or through search/sort?
• Should one be given greater visual emphasis?

68
Case study, ATIS web site

• The approach
• Initial hypotheses by site host
• Hypotheses validated against quantitative survey
  of users (regular telephone-based tracking study)
• First concept tested in a series of one-on-one
  usability tests (17) using JPEG images, rendered
  in an HTML browser and hyperlinked to each other
  through hotlinks
• Key findings strategic and tactical
• Refinement of design
• Second round of usability tests (17) using
  partially functioning HTML prototype all
  database elements were pre-populated (static,
  dummy data)
• Further refinement of design, followed by
  quantitative survey upon soft-launch

69
Timelines and cost for UCD

• There is nothing more futile than conducting
  user-tests with a site or application that has
  already been built if there are serious
  problems with it, then changing it would be much
  more expensive as such, a UCD approach ensures
  the involvement of users from the start
• This does NOT extend timelines or significantly
  affect budget IF
• The various phases of UCD are laid out in synch
  with the project timeline
• The cost of user-consultation is accommodated in
  the overall budget
• The cost is further managed by NOT introducing
  code until the UCD blueprint has been tested
  through cheaper, lower-fidelity formats with
  users i.e., by he time coding begins, you are
  sure of what you are coding

70
Budget for UCD

• Experience has shown that user-consultation, if
  done properly costs no more than about 10 of the
  total project budget
• Given the tremendous benefits of a UCD-approach
  (and the potential for failure in the
  non-employment of such an approach), the
  allocation of 10 for risk-management and
  product-refinement is good practice
• The 10 includes the development of the UCD
  blueprint so it actually overlaps with the
  requirements specification phase

71
Contracting an external expert for user-research

• Why?
• An external expert
• Is un-biased
• Has professional and academic experience in UCD
• The lack of bias brings objectivity to the
  process, especially when there are contradictory
  stakeholder opinions, or departmental
  pre-suppositions
• The professional and academic experience allows
  for a very focused approach to the UCD process
• The parts of UCD that particularly benefit from
  an external expert are
• User Needs Assessment understanding user
  context
• User-testing through the development process