![Page 1: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/1.jpg)
Lecture 2: Usability, HCI and User-Centered Design Methodology
Lecture prepared for Interface Design DMS 546/DMS 446
This lecture is based on chapters 1 and 3 of User-Centered Website Development (McCracken and Wolfe), chapter 1 of Designing Web Usability (Jakob Nielsen), “Human-Computer Interaction and Your Site” (Nicky Danino - http://www.sitepoint.com/article/computer-interaction-site), on a Powerpoint presentation at http://www.vtc.edu.hk/ive/ty/ict/, a Powerpoint presentation by Franz J. Kurfess at http://users.csc.calpoly.edu/~fkurfess/Courses/484/W07/Slides and slides provided with Interaction Design (Preece, Rogers, Sharp)
![Page 2: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/2.jpg)
Focusing on Usability
The benefits of making a website more usable
The importance of understanding users' needs
The history and goals of Human-Computer Interaction
The methodology of user-centered development
![Page 3: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/3.jpg)
Introduction
Have you ever been unable to find something in a website that you know is there?
Have you ever been enraged by a useless or misleading error message?
Have you ever wondered why a website needs to know your e-mail address, and left the site for fear it might be misused?
![Page 4: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/4.jpg)
It doesn’t have to be that way
You can design websites and software products that...
are pleasant and convenient for your users
let them accomplish their goals
The key is to think about your users...
learn about them
watch them work, in their workplace
interview them, also in their workplace
![Page 5: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/5.jpg)
Logical design or ambiguous design?
Where do you plug the mouse?
Where do you plug the keyboard?
top or bottom connector?
Do the color coded icons help?from: www.baddesigns.com
![Page 6: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/6.jpg)
How to design them more logically
(1) A provides direct adjacent mapping between icon and connector
(2) B provides color coding to associate the connectors with the labels
from: www.baddesigns.com
![Page 7: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/7.jpg)
Benefits of Usable Software and Websites
Gaining a competitive edge
Reducing development and maintenance costs
Improving productivity
Lowering support costs
Reduced training costs
![Page 8: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/8.jpg)
Gaining a competitive edge
websites:
purpose of site - ?
AmazonExpediamySpaceYouTube
![Page 9: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/9.jpg)
Gaining a competitive edge
Usability is a major factor in the conversion rate of a site...
![Page 10: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/10.jpg)
Gaining a competitive edge
Conversion rate refers to “the percentage of visitors who take action on the site”
Getting the user to take an action...
...converting visitors to purchasers, registered users, etc.
![Page 11: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/11.jpg)
Gaining a competitive edge
In physical product design and packaged software design...
users buy first and experience usability after...
on the web, users typically experience usability first and buy later.
(Jakob Nielsen)
![Page 12: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/12.jpg)
Gaining a competitive edge
BAD USABILITY = NO CUSTOMERS
(Jakob Nielsen)
![Page 13: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/13.jpg)
Gaining a competitive edge
Amazon - making it simple to find things and order
Ease of use is the most important driver of high conversion rates
![Page 14: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/14.jpg)
Gaining a competitive edge
The average conversion rate for shopping sites is 3- 5% (McCracken and Wolfe)
Increasing the conversion rate lowers the cost of individual sales
![Page 15: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/15.jpg)
Gaining a competitive edge
Example Scenario:
You spend $2500 on advertising that generates 5000 visits to a shopping site.
Suppose the conversion rate is 2%...
2% of 5000 visits = 100 purchases
$2500/100 = each purchase cost $25 in advertising.
![Page 16: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/16.jpg)
Gaining a competitive edge
If the conversion rate is 4%, then you attract200 purchases...
...each purchase would cost $12.50 in advertising.
![Page 17: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/17.jpg)
Gaining a competitive edge
The higher the conversion rate, the better the sales and the greater the profit margins.
(Gurley cited in McCracken and Wolfe)
![Page 18: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/18.jpg)
Gaining a competitive edge
When IBM launched the “ShopIBM” website their hits went up 120%, but sales went up 400%.
(Battey 1999 cited in McCracken and Wolfe)
![Page 19: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/19.jpg)
Gaining a competitive edge
Usable websites have highest conversion rates.
Difficulty finding item or figuring out how to buy it leads to frustration and no sale.
An enjoyable experience leads to more time spent on site, more purchases, and repeat purchases
![Page 20: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/20.jpg)
Gaining a competitive edge
Usability and Software Development
what is the purpose of:QuickbooksWS-FTPFinalCut Pro
![Page 21: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/21.jpg)
Gaining a competitive edge
Software products provide a service, allow people to achieve a certain goal.
Usable software is a better value for customer.
Usability is a major factor in:
attracting users retaining usersselling upgrades & extensions
![Page 22: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/22.jpg)
Reducing development and maintenance costs
Learn about users first, and you will avoid:
implementing features users don’t want
creating features that are annoying or inefficient
high cost of making changes late in the development cycle
![Page 23: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/23.jpg)
Improved productivity
Shopping site:
customers are able to buy easier
Intranet or custom software solution:
employees are able to be more efficient
![Page 24: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/24.jpg)
Lower support costs
calls to customer support can cost the company $12 to $100 or more per call
avoid user problems by making the site more usable
![Page 25: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/25.jpg)
HCI Origins
![Page 26: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/26.jpg)
HCI Origins
Scenario:
$3,000,000 mainframe computer (1966)compared to the cost of the computer, salaries
are cheap. Therefore train an expert to operate the computer. Relatively few computer operators are needed.
![Page 27: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/27.jpg)
HCI Origins
But with the expanding computer market(IBM Personal Computer for home and small
business released in 1981...) cheaper computers are operated by people who are not technicians or computer scientists.
![Page 28: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/28.jpg)
HCI Origins
ease of use becomes an issue
industry needs to find ways to make the computer usable by a broad market
![Page 29: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/29.jpg)
HCI Origins
HCI has roots in
Human Factors (machinery operation - origins in WWII-era aviation)
ergonomics (usually more associated with workplace and repetitive tasks)
![Page 30: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/30.jpg)
What is HCI?
“Human Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of the major phenomena surrounding them.” (ACM SIGCHI working definition)
![Page 31: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/31.jpg)
Goals of HCI
To develop or improve the
Safety
Utility
Effectiveness
Efficiency
Usability
Appeal
. . . of systems that include computers
![Page 32: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/32.jpg)
Safety
safety of users, safety of data (or both)
![Page 33: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/33.jpg)
Utility
services the system provides
information
instruction
purchases
etc.
![Page 34: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/34.jpg)
Effectiveness
User's ability to use the services:
find desired information
enter credit card data
etc.
![Page 35: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/35.jpg)
Efficiency
How quickly users can accomplish goals or finish work using the system
![Page 36: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/36.jpg)
Usability
ease of learning
ease of use
![Page 37: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/37.jpg)
Appeal
How well users like the system
first impressions
long-term satisfaction
![Page 38: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/38.jpg)
Design Process Overview
![Page 39: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/39.jpg)
Design Process Overview
Need to take into account:Who the users areWhat activities are being carried outWhere the interaction is taking place
Need to optimise the interactions users have with a product
Such that they match the users activities and needs
![Page 40: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/40.jpg)
Design Process OverviewUnderstanding users’ needs
Need to take into account what people are good and bad at
Consider what might help people in the way they currently do things
Listen to what people want and get them involved
Use tried and tested user-based methods
![Page 41: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/41.jpg)
Design Process OverviewWhat is involved in the process of HCI design?
Identify needs and establish requirements
Develop alternative designs
Build interactive prototypes that can be communicated and assessed
Evaluate what is being built throughout the process
![Page 42: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/42.jpg)
Design Process OverviewCore characteristics of interaction design
users should be involved through the development of the project
specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project
iteration is needed through the core activities
![Page 43: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/43.jpg)
User-Centered Development
![Page 44: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/44.jpg)
User-Centered Development
Characteristics of User-Centered Development:
iterative process
Design -> Prototype -> Evaluate if it passes evaluation of usability specifications, it is ready to implement
if it fails, then repeat the Design -> Prototype -> Evaluate process
![Page 45: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/45.jpg)
User-Centered Development
Needs AnalysisUser and Task AnalysisFunctional AnalysisRequirements AnalysisSetting Usability SpecificationsDesignPrototypingEvaluation
![Page 46: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/46.jpg)
User-Centered Development
Needs Analysis
A few sentences summarizing nature and purpose of the proposed system.
![Page 47: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/47.jpg)
User-Centered Development
Needs Analysis
example: “The redesigned website for the Plains Art Council
in Burkmere, SD will foster greater participation in the arts in the local community by providing a comprehensive listing of available art programs and services and by creating an online gallery for local artists.”
Q: who is the audience for this site?
![Page 48: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/48.jpg)
User-Centered Development
User and Task Analysis
User Analysis characterizes the people who will use your site.
age, education, familiarity with computers,
experience or expectations with similar software or sites
![Page 49: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/49.jpg)
User-Centered Development
User and Task AnalysisTask Analysis looks at what the users will want
to accomplish using the software or site goals:
buy shoescommunicate with friends
specific tasks:search, view images, compare prices, purchase send and receive messages, upload and view photos, etc
![Page 50: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/50.jpg)
User-Centered Development
Functional AnalysisThe computer services that will be needed for the tasks.
search and sort capability
“shopping cart,” secure credit card transaction
at this stage – make decisions about how much functionality to build (could just put a telephone number instead of online reservation, etc.)
![Page 51: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/51.jpg)
User-Centered Development
Requirements AnalysisFormal specifications...
may include:Data DictionariesEntity Relationship DiagramsObject-Oriented Modelling
![Page 52: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/52.jpg)
User-Centered Development
Setting Usability Specifications
performance measures
preference measures
![Page 53: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/53.jpg)
User-Centered Development
Setting Usability Specificationsperformance measures are directly observable
examples:time to fill out billing an shipping informationnumber of clicks to locate what is playing at a specific movie theater# of tasks completed correctly / # of errorshow many times did user need to type additional info on a form? # of negative comments or facial expressions(?)what parts of the screen the user looked at (eyetracking)
![Page 54: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/54.jpg)
User-Centered Development
Setting Usability Specificationspreference measures
interview or questionnaire
usefulness of some aspect?ease of use overall?appearance?convenience?first impression?did website meet expectations?
![Page 55: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/55.jpg)
User-Centered Development
Setting Usability Specificationspreference measures
Scale of 1-5 1 = strongly disagree 2 = disagree 3 = neutral 4 = agree 5 = strongly agree
Overall the site is easy to use _____
When I searched for an item the results were useful to me_____
I could pay for my purchase quickly_____
![Page 56: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/56.jpg)
User-Centered Development
Setting Usability Specifications
Setting usability specifications means setting a target number for performance and preference measures.
Don't just pick arbitrary goals!
Work from evaluations of the existing site or software interface or from information about the quality of comparable products.
![Page 57: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/57.jpg)
User-Centered Development
Design
Organization and Appearance
organize content according to user's expectations
navigation
look and feel
![Page 58: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/58.jpg)
User-Centered Development
PrototypingA model from which the product will be implemented
global prototypinglocal prototyping
evolutionarythrow-away
high-fidelityLow-fidelity
pros & cons / pitfalls...
![Page 59: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/59.jpg)
User-Centered Development
Evaluation
testing the prototype
user-based evaluation (developers observe users)
expert-based evaluation(experts critique usability)
![Page 60: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/60.jpg)
HCI Methodology for WebsiteDevelopment ( Nicki Danino)
![Page 61: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/61.jpg)
HCI Methodology for WebsiteDevelopment
1. Requirements AnalysisEstablish the goals for the website from the standpoint of the user and the business.
Agree on the users' needs and aim for usability requirements.
Appraise existing versions of the website (if any).
Carry out an analysis of the competition.
Complete discussions with potential users and questionnaires.
![Page 62: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/62.jpg)
HCI Methodology for WebsiteDevelopment
2. Conceptual Proposal
Outline site design and architecture at an abstract level.
Perform a task analysis to identify essential features.
![Page 63: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/63.jpg)
HCI Methodology for WebsiteDevelopment
3. Prototyping
Create visual representations (mock ups) or interactive representations (prototypes) of the website.
Evaluate usability using a proven method.
Using the results, create more mock ups or improve the prototypes.
Repeat this process until the design and usability goals are met.
![Page 64: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/64.jpg)
HCI Methodology for WebsiteDevelopment
4. Development
Create the final product.
Evaluate functionality through testing, quality assurance, usability testing, and field testing.
Use the evaluation results to improve the product.
Repeat this process until the business goals are met.
![Page 65: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/65.jpg)
HCI Methodology for WebsiteDevelopment
5. Launch and Housekeeping
Launch the Website.
Maintain and tweak with user feedback (housekeeping).
Use the feedback to create new requirements, and begin major design improvements (system iteration).
![Page 66: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/66.jpg)
More on HCI Methodology
Chart with process broken down into tasks, purposes, techniques and deliverables:
http://www.knabedesign.com/articles/methodology.html
![Page 67: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/67.jpg)
Something to think about.
![Page 68: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/68.jpg)
Something to think about.
Who Does HCI Serve?
![Page 69: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters](https://reader030.vdocuments.site/reader030/viewer/2022032707/56649e215503460f94b0e14b/html5/thumbnails/69.jpg)