User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... ·...
Transcript of User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... ·...
![Page 1: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/1.jpg)
User Experience (UX) in Web Development
An Introduction to UX Methods and Principles Applied in Web Development
Juan Atachagua!Academic Affairs Web Team!
Development of User-Centered Design & Experience (DUDE)!July 11, 2014
![Page 2: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/2.jpg)
Agenda• What is UX?
• Why UX?
• Design Principles
• Technical Approach
• Q & A
![Page 3: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/3.jpg)
What is UX?
![Page 4: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/4.jpg)
What is UX?User Experience (UX) accounts for a person's behaviors, attitudes, and emotions about using a product, system, or service.
![Page 5: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/5.jpg)
What is UX?
• Human Factors
• Human Computer Interaction (HCI)
• Quality Function Deployment (QFD)
Relative Fields of Study
![Page 6: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/6.jpg)
What is UX?Overall Goal
Reduce the friction between a task someone wants to accomplish and the tool that they are using to complete that task.
![Page 7: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/7.jpg)
What is UX?Affordance
The relation between an object, or an environment, and an organism that affords the opportunity for that organism to perform an action.
![Page 8: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/8.jpg)
What is UX?Good Affordance
![Page 9: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/9.jpg)
What is UX?Bad Affordance
![Page 10: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/10.jpg)
• Focus on the needs, wants, and limitations of the end users throughout the design process.
What is UX?User-Centered Design
• Cooperative Design - Involving designers and users equally
• Participatory Design - Focused on the participation of users
• Contextual Design - Researchers aggregate data from customers and apply these findings into a final product
Technical Approaches:
![Page 11: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/11.jpg)
Why UX?
![Page 12: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/12.jpg)
1. So… It’s Marketing, Right?
2. UX is Time Consuming
3. UX is a Luxury
4. UX is Not Statistically Significant
Why UX?Misconceptions
![Page 13: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/13.jpg)
• Marketing describes what people want
• UX describes how to achieve what people want
Why UX?Misconception #1 - So… It’s Marketing, Right?
![Page 14: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/14.jpg)
Why UX?Misconception #2 - UX is Time Consuming
Today Tomorrow
• Needs Analysis • User Requirements • Prototyping • Test & Evaluation
• Call Center • Maintenance • Documentation • User Training
![Page 15: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/15.jpg)
• Paying a consultant
• Paying someone in-house
• Paying for resources (e.g., lab and equipment, participant recruitment services, participant compensation)
Why UX?Misconception #3 - UX is a Luxury
![Page 16: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/16.jpg)
• $1 to resolve problems early
• $10 to resolve that same problem during development
• $100 to resolve the same problem after launch
Why UX?
Software Engineering, A Practitioner’s Approach, Roger Pressman
Misconception #3 - UX is a Luxury
![Page 17: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/17.jpg)
• Quantitative vs. Qualitative
• Small sample sizes means more one-on-one
• 5 users uncover 80% of major problems
Why UX?Misconception #4 - UX is Not Statistically Significant
![Page 18: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/18.jpg)
Design Principles
![Page 19: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/19.jpg)
What Makes a Bad Website?
Design Principles
![Page 20: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/20.jpg)
What Makes a Bad Website?
Design Principles
![Page 21: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/21.jpg)
What Makes a Good Website?
Design Principles
![Page 22: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/22.jpg)
What Makes a Good Website?
Design Principles
![Page 23: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/23.jpg)
What Makes a Good Website?
Design Principles
![Page 24: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/24.jpg)
Eye-Tracking Research
Design Principles
![Page 25: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/25.jpg)
• F-Shape
• Golden Triangle
Eye-Tracking Research
Design Principles
![Page 26: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/26.jpg)
Eye-Tracking Research
Design Principles
Users spend 80% of their time looking at information above the page fold and only 20% of their attention below the fold.
![Page 27: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/27.jpg)
• Primary Effect: Recall things first events
• Recency Effect: Recall events
Serial Position Effect
Recommendations
• List important items in the beginning and last
• Recency Effect: Recall events
Design Principles
![Page 28: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/28.jpg)
• Closure
• Common Fate
• Figure-ground Relationship
• Continuation
• Law of Prägnanz
• Proximity!
• Similarity
• Uniform Connectedness
Gestalt Principles
Design Principles
![Page 29: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/29.jpg)
Figure-Ground Relationship
Design Principles
![Page 30: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/30.jpg)
Figure-Ground Relationship
Design Principles
![Page 31: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/31.jpg)
Design PrinciplesCommon Fate
![Page 32: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/32.jpg)
Similarity
Design Principles
![Page 33: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/33.jpg)
Design PrinciplesProximity
![Page 34: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/34.jpg)
Design PrinciplesProximity
![Page 35: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/35.jpg)
The more alternatives, the longer it takes you to make a decision
Humans can only hold seven ± 2 items in working memory
Hick’s Law
Working Memory Capacity:
Design Principles
![Page 36: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/36.jpg)
What Makes a Bad Website?
Design Principles
![Page 37: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/37.jpg)
• Difficulty in remembering multiple paths
• Inefficiency
• Increased likelihood of selecting wrong choice
• Users are less likely to adopt
Hick’s Law
Design Principles
![Page 38: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/38.jpg)
Design PrinciplesHuman Limitations
![Page 39: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/39.jpg)
Human Limitations
Design Principles
![Page 40: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/40.jpg)
Technical Approach
![Page 41: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/41.jpg)
Prioritization of User NeedsNeeds Analysis
Information ArchitecturePrototyping
Test & Evaluation
Refine
Workflow
User Requirements
![Page 42: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/42.jpg)
Needs AnalysisMethod for gathering, understanding, and prioritizing user needs!
Methods for Gathering User Needs:!
• Client Interviewing
• Focus Groups
• Questionnaires & Surveys (online or in person)
![Page 43: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/43.jpg)
Not all needs are equally important
• Musts are fundamental to a project’s success; failure to meet a “must” means the project is likely to fail
!
• Shoulds have priority; failing to meet a “should” is tolerable, but missing too many becomes problematic
!
• Nice-to-Haves are complementary features; in/exclusion has no significant weight on a project’s success
Prioritization of User Needs
![Page 44: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/44.jpg)
Once prioritized, needs can provide a structure for layering out content
Musts Shoulds Nice to Haves
Prioritization of User Needs
![Page 45: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/45.jpg)
In turn, a menu structure of how content is grouped is created
Information Architecture
![Page 46: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/46.jpg)
Low Fidelity: Rough draft of planned concepts. Can be hand drawn.
Prototyping
![Page 47: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/47.jpg)
High Fidelity: Interactive demonstration of concepts. Shows where content will be placed. Uses image and text placeholders for content.
Prototyping
![Page 48: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/48.jpg)
Usability Testing
Process by which products are tested by those who will use them, is intended to help product developers
What is it?
Value
A usability test with 5 users will typically uncover 80% of the site-level usability problems.
![Page 49: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/49.jpg)
Usability TestingSteps:!
1. Know What to Measure
2. Design Task Scenarios
3. Testing Protocols
4. Recruit Participants
5. Run!
6. Evaluate and Report
![Page 50: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/50.jpg)
• Time
• Number of Errors
• Type of Errors
• Task Completion
• Need for Assistance
• Pathways Taken
Step 1: Know What to MeasureExamples
![Page 51: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/51.jpg)
Step 2: Design Task ScenariosTask #1!
You are in danger of being placed in disqualified status as a Junior.
—> Find a policy about academic disqualification to determine what GPA you must maintain as a Junior to not become disqualified.
!
Task #2!
You are an undergraduate and you need to take some time off for medical reasons.
—> Find a policy about how to submit a medical withdrawal.
![Page 52: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/52.jpg)
• Realistic - Correct circumstances
• Actionable - How vs. What
• Avoid Clues - Don’t give away solutions!
Task Scenarios
Design Principles
![Page 53: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/53.jpg)
Example of an Ideal Path:
Home > Opportunities > Student Jobs > Student Assistant Position
Number of Steps: 5
!
Actual Path Taken:
Home > Get Involved > About > Home > Opportunities > Student Jobs > Student Assistant Position
Number of Steps: 7
Step 2: Design Task Scenarios
![Page 54: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/54.jpg)
Think Aloud Protocol: Users verbalize their thoughts during each task
!
!
Retroactive Think Aloud: Users report their thoughts after a task/study
“I’m searching for a Student Assistant position… I’m clicking ‘Opportunities’, because I think that’s where I’ll find it”
“I was looking for the Student Assistant position... I clicked on Opportunities
Step 3: Apply Protocols
![Page 55: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/55.jpg)
Step 4: Recruit ParticipantsRecruiting
• Psychology Subject Pool
• Staff or students involved with other unrelated projects
• Staff or students not apart of the web team
![Page 56: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/56.jpg)
Wait, not yet!
Pilot Testing:
• Testing is never flawless on the first run
• Run a pilot study to learn how the study will run
Step 5: Run!
![Page 57: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/57.jpg)
Step 6: Evaluate & Report
12% 19%
19%
19%
31%
General Ease of Use (8) Image Editing Tools (5) Grid System (5) Importing Images Ease of Use (5) Look and Feel (3)
• Summarize findings
• Provide recommendations for improvement
Enjoyed the Most
![Page 58: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/58.jpg)
Step 7: User Requirements
• User Requirements Document (URD)
• Clear and verifiable
User Requirements
![Page 59: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/59.jpg)
Step 7: User RequirementsExamples
Poorly Defined Well Defined
The system must be user friendly. (Duh!)
The GUI should provide suitable fields and options to allow all the above information to be added to the particular artist information.
![Page 60: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/60.jpg)
Step 7: User RequirementsExamples
Poorly Defined Well Defined
The database needs to show up quickly.
When the user accesses the database, it must appear on screen within 2 seconds.
![Page 61: User Experience in Web Developmentcsun.edu/sites/default/files/User Experience in Web... · 2014-07-23 · Step 2: Design Task Scenarios Task #1! You are in danger of being placed](https://reader033.fdocuments.net/reader033/viewer/2022042223/5ec9b5e4e65fc80af44aa0d0/html5/thumbnails/61.jpg)
Questions & Answers