is 485, professor matt thatcher
DESCRIPTION
User Centered Design: An Introduction to the Design, Prototyping, and Evaluation of User Interfaces. IS 485, Professor Matt Thatcher. Interface Hall of Shame. Milltronics' Dolphin Plus (a configuration package for industrial level and flow sensors). Interface Hall of Shame. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/1.jpg)
User Centered Design:An Introduction to the Design, Prototyping, and
Evaluation of User Interfaces
IS 485, Professor Matt Thatcher
![Page 2: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/2.jpg)
2
Interface Hall of Shame
Milltronics' Dolphin Plus(a configuration package for industrial level and flow sensors)
![Page 3: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/3.jpg)
3
Interface Hall of Shame
![Page 4: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/4.jpg)
4
A Proposed Redesign
![Page 5: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/5.jpg)
5
Interface Hall of Shame
![Page 6: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/6.jpg)
6
Agenda Who am I? HCI introduction Usability defined Iterative, user-centered design Waterfall vs. prototyping UI designer as architect
– a discussion of the analogy– an overview of methods and tools
Course administration
![Page 7: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/7.jpg)
7
Who am I? Associate Professor of MIS The Wharton School, University of Penn
– Ph.D and M.S. in Information Technology / Economics– B.S. in Finance and Decision Sciences
Research interests– economic impact of IT on firms/industry– IT value– software patent policy design
Course information– http://faculty.unlv.edu/thatcher/is485/
![Page 8: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/8.jpg)
8
What is HCI? Human
– the end-user of the program
Computer– the machine that the program runs on
Interaction– the user tells the computer what she wants
(inputs)– the computer communicates the results
(outputs)
![Page 9: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/9.jpg)
9
Where Does HCI Occur?
Hardware
Systems SoftwareData base and Telecommunications
User
Applications Software
User Interface
![Page 10: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/10.jpg)
10
User Interfaces (UIs) Part of the program that allows
– users to interact with the computer– users to carry out their tasks
User vs. customer vs. client– user is a term not used in many industries– customer – the person who will use the product you build– client - the person/company that is paying you to build it
The UI is the system to the user– everything the user hears, sees, touches, etc.– metaphors, organization, navigation, appearance, interaction
HCI = designing, prototyping, and evaluating UIs
![Page 11: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/11.jpg)
11
What Do Users Want?
Well designed software applications exhibit
Technical Soundness
Functionality
Usability
![Page 12: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/12.jpg)
12
What’s the Difference?
Usability
Technical Soundness
Functionality
It works as the specs say it will
It is available and reliable (it works the same way every time)People can perform their tasks quickly and easily
![Page 13: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/13.jpg)
13
Why is Usability So Important?
Hardware
Systems SoftwareData base and Telecommunications
User
Applications Software
User Interface
![Page 14: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/14.jpg)
14
Measuring Usability Easy to learn
– how long does it take for typical users to learn relevant tasks?
Easy to remember– how easy is it to remember from one session to the next?
Efficient to use– how long does it take to perform benchmark tasks?
Minimal error rates– how many and what kinds of errors are commonly made?– if they occur, is good feedback provided so users can recover
High user satisfaction (subjectively pleasing)– confident of success– visually pleasing
![Page 15: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/15.jpg)
15
Keys to Designing and Building Successful, Highly Usable UIs
User-centered design Task analysis Iterative UI design cycle
– design– rapid prototyping– evaluation– iteration
Programming Implementation...
![Page 16: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/16.jpg)
16
User-Centered Design (UCD)(Part 1)
A highly structured, comprehensive software development methodology driven by– clearly specified, task-oriented business objectives– recognition of user needs, limitations, and
preferences – not technology-centered
![Page 17: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/17.jpg)
17
UCD (Part 1):Task Analysis
Design
Organizational & Social Issues
Technology Humans
Tasks
![Page 18: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/18.jpg)
18
User-Centered Design (UCD)(Part 2)
Information collected using task analysis is scientifically applied in the design, prototyping, evaluation, and implementation of products and services
![Page 19: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/19.jpg)
19
UCD (Part 2):The Prototyping Model
Prototype
Design
Evaluate
![Page 20: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/20.jpg)
20
GUI Screen Design Metaphors
– essential concepts conveyed through words and images
Organization of content (data and functions)– screen layout and screen sequencing– screen controls/widgets (e.g., check boxes, option buttons)
Navigation– efficient movement along the content via menus, icons, dialog
boxes, buttons, windows, hyperlinks, commands, etc.
Appearance (the look)– visual (typefaces, fonts, size, typesetting, color, etc.), auditory,
ornamental background, etc.
Interaction (the feel)– effective input and feedback sequencing (physical I/O devices)
![Page 21: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/21.jpg)
21
What is a Prototype? Smaller representation of the system
– a way to see what something will look like before it is built
– less reliable, robust, and complete than final systems
Communicates a physical representation of the proposed design to the user
Built with tools, not production code– different construction materials than the final system– much faster and cheaper to develop
Keeps the design centered on the user– allows user involvement in testing design ideas– supports iterative design based on user feedback
![Page 22: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/22.jpg)
22
A Prototype of a Palm Banking Application
Web-based (html) representation of a software application for a handheld technology
![Page 23: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/23.jpg)
23
Rapid Prototyping Build a mock-up of the UI design Low-fidelity techniques
– paper-based sketches and storyboards– chauffeured prototypes– Visio, SmartDraw, drawing tools, etc.
High-Fidelity techniques– interactive, computer-based prototypes– Access, Dreamweaver, Frontpage, GoLive,
HTML, Visual Basic, Director, Flash, HyperCard, PowerPoint, Excel, etc.
![Page 24: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/24.jpg)
24
Evaluation Test with real users (participants)
– user testing
Expert reviews (evaluations w/o users)– heuristic evaluations– cognitive walkthroughs– pluralistic walkthroughs– consistency checks– and many more…
![Page 25: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/25.jpg)
25
Iterate!
Prototype
Design
Evaluate
![Page 26: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/26.jpg)
26
Waterfall vs. Prototyping
Application Description
RequirementsSpecification
SystemDesign
Product
Initiation
Analysis
Design
Implement
DesignPrototype
Evaluate
![Page 27: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/27.jpg)
27
Problems with WF WF lacks user’s perspective
– technology-driven– focus is on the “client”, not the “user”– does not involve user until “implementation” stage
» sees user role as finding “bugs” in the code or other minor problems
WF has no feedback (sequential, not iterative)– groups “hand off” discrete deliverables to the next group in
the WF process» functional specs are frozen early in the process
– high cost of fixing errors » increases by factor of 10 at each stage » iterative design finds these earlier
![Page 28: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/28.jpg)
28
User-Centered Design (UCD) When rigorously applied, a UCD
approach– keeps the design centered on users (not
technology)– keep users involved throughout process (early
and often)– meets both user needs and the business
objectives of the sponsoring organization
![Page 29: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/29.jpg)
29
Why Do Iterative User-Centered Design?
Nearly 25% of all applications projects fail. Why?– overrun budgets & management pulls the plug– others complete, but are too hard to learn/use
Solution is iterative user-centered design. Why?– easier to learn & use products sell better– can help keep a product on/ahead of schedule– reduces training costs, technical support, maintenance
efforts, product updates– satisfied users leads to reputation effects (or better
employee retention)
![Page 30: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/30.jpg)
30
Who Builds Interfaces? A team of specialists (ideally)
– graphic designers– interaction / interface designers– technical writers– marketers– technical support– test engineers– software engineers– customers/users– client– and more…
![Page 31: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/31.jpg)
31
UI Designer as Architect (Clarifying UCD)
Design– users (home buyers)– tasks (functions, activities, or units of work)– environment (where are tasks performed?)– technology (construction materials)
Prototyping and evaluation– low-fi sketches (blueprints)– high-fi representations (small-scale models)
Iterate Programming (construction)
– don’t commit to “brick-and-mortar” too fast
Implement (move-in)
![Page 32: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/32.jpg)
32
What Does An Architect Want to Know Before Designing a Home?
Design
Environment (e.g.,climate)
ConstructionMaterials
Home Buyer
Tasks
![Page 33: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/33.jpg)
33
The Architect’s Prototyping Model
Small-scale
models
Design
Evaluate
Construction only after sufficient iterations
![Page 34: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/34.jpg)
34
Summary UI design is about:
– creating a user experience that is easy to understand– keeping human concerns at the center of the design
process – focusing on usability
Task analysis– method of identifying and characterizing the users, their
tasks, and the context Prototyping model
– iterative, user-centered approach that involves users early and often
![Page 35: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/35.jpg)
35
Goals of the Course Learn to design, prototype, and evaluate UIs
– the importance of human factors in the design of interactive software applications
– cognitive / perceptual constraints that affect UI design– task analysis and contextual inquiry to identify software
requirements– technology tools used to prototype UIs– techniques used to evaluate a UI design– importance of iterative design for usability– real-world applications of course concepts and tools– how to work together on a team project– how to communicate your results to a group
![Page 36: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/36.jpg)
36
How IS 485 Fits Into the MIS Curriculum?
Most courses focus on learning technology– programming languages, data structures,
databases, telecommunications
IS 485 is concerned with design and evaluation– focus on human factors– assume you can program and learn new languages– technology as a tool to evaluate via prototyping– skills will be important in any career you choose
![Page 37: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/37.jpg)
37
Administrivia - Class Structure Registration
– everyone registered?
Syllabus– look over very carefully
Readings– electronic reserves– internet readings– downloadable documents
![Page 38: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/38.jpg)
38
Administrivia - Class Structure Teaching style
– lectures– case studies (design, prototyping, and
evaluation)– interactive, in-class assignments– student presentations– computer demonstrations and tutorials
Grading– project milestones (50%)– mid-term exam (30%)– attendance/participation (20%)
![Page 39: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/39.jpg)
39
Administrivia - Class Structure Course web-site
– http://faculty.unlv.edu/thatcher/is485/– course materials, notes, announcements, etc.
Regarding missed exams Honor code
![Page 40: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/40.jpg)
40
Responsibilities Me
– make sure you understand– keep you amused and interested in coming to
class– make this class useful to you for getting and
keeping a job You
– do the readings– come to class ready to participate– find help when you need it– tell me if I am going too fast/slow
![Page 41: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/41.jpg)
41
The “Quality Circle” Feedback from YOU is critical to the
success of the course 1 student -> liaison bet. the class and me
– have lunch w/ me 4 times during the semester– students in the class can approach (or email) the
representatives to discuss problems or concerns– responsible for passing the anonymous feedback to me
Volunteers– your name and email address will be posted to the
website
![Page 42: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/42.jpg)
42
Any Questions or Comments?
![Page 43: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/43.jpg)
43
Next Time Team project Read through the course web site
– schedule– syllabus– project– milestones– team meetings [look at “Team Feedback 1”]
![Page 44: IS 485, Professor Matt Thatcher](https://reader035.vdocuments.us/reader035/viewer/2022062321/568139be550346895da16179/html5/thumbnails/44.jpg)
44
Teams One member from each team should:
– go to the left side of the white board– write down the name of each team member as of
now
Students without a team should:– go to the board– write your name on the right hand side of the
board
Let’s figure this out I need to take pictures and get emails