COMP 3020: Human-Computer Interaction I
Transcript of COMP 3020: Human-Computer Interaction I
Milestone I
Average: 68%
Median: 71%
General guide in interpreting marks:
A+ level: Excellent, impressive effort, many good points raised, etc
A level: Very well done, a number of good points raised, etc.
B level: Well done, acceptable level across the board
C and lower: Moderately done, basic level of knowledgeComp 3020 1
Pep Talk Time!
There are lots of marks left to come!
E.g., MS1 was 20% of the project
This is new material
Not everyone will have the same initial learning curve
COMP 3020 2
MS1: Extra Feedback
Lower marked projects tended to fall into one of two categories
1. Minimal effort
2. Lots of effort….
But deliverables not put together in a way that let the markers see, understand and assess that effort
COMP 3020 3
MS1: Extra feedback on lost marks
Missing pieces
Read through instructions carefully (at beginning and before submitting)
If you are confused about expectations, ask
There are no stupid questions!!
…. But requires advanced preparation
COMP 3020 4
MS1: Extra feedback on lost marks
Justifications
Missing
Logic issues (e.g., X => Y, when Y doesn’t follow from X)
Clarity issues
COMP 3020 5
WritingWriting is hard!!
It is hard to communicate your thoughts, idea, points
Hard to see your own blind spots
Hard to see your own assumptions about what will be “obvious” to your reader
How much time did you spend on the writing vs a programming assignment?
COMP 3020 6
Writing
How to improve
Practice
“The best way to write better is to write a lot”
Iterate
Read through and comment on each others’ writing
Divide & Conquer has it limitations when trying to put together the best possible report
COMP 3020 7
On to MSII
If we didn’t do well with our user research and requirements, does that mean we will do poorly on the rest of the project?
No! Not if you do a good job on the MSII material
Some potential strategies:
If you don’t like your requirements, you can refine them
If you can’t justify your sketches based on your requirements be honest and justify other ways (e.g., using material or concepts presented in class)
COMP 3020 8
COMP 3020: Human-Computer Interaction I
Design PrinciplesFall 2017
James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry
Design PrinciplesVisibilityConstraintsFeedbackMappingConsistencyAffordanceSimplicityMatchingMinimize memory loadDiagnose/recover from errorsControl and freedomFlexibilityProvide Help
Comp 3020 10
11
Anyone use tabs (keyboard) when filling out forms?
but aren’t hidden commands a bad thing?
Design Principle #12: FlexibilityShortcuts: Experienced users should be able to perform frequently used operations quickly
Strategies:accelerators
E.g., command completion, menu shortcuts, function keys
navigation jumpse.g., going to window/location/page directly, and avoiding intermediate nodes
type-ahead (entering input before the system is ready for it)history systems
WWW: ~60% of pages are revisits
Comp 3020 12
flexibility and efficiency of use
accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
13
14
When you’re using an accelerator, you feel and look like a Boss.
Taking these away makes it more annoying to use an interface if you are used to them.
Design Principle #12: Flexibility
If an application has a diverse user base, it is difficult (if not impossible) to design it to suit all needsOne solution: provide options for personalization
Application properties: font sizes, zoom settings, save locations
Interface control structures (e.g., toolbars)
Comp 3020 15
Design PrinciplesVisibilityConstraintsFeedbackMappingConsistencyAffordanceSimplicityMatchingMinimize memory loadDiagnose/recover from errorsControl and freedomFlexibilityProvide Help
Comp 3020 16
Design Principle #13 – Provide Help
Help is not a replacement for bad design
Simple systems:walk up and use; minimal instructions required
Most other systems:Feature rich
Some users will want to become “experts” rather than “casual” users
Intermediate users need reminding, plus a learning path
Comp 3020 17
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
18
Types of Help
Tutorials and on-line tours
Short guides that typically describe how to complete specific tasks
People look for these online when they get “stuck” or want to expand their skill sets
Demonstrate very basic principles through working examples
Comp 3020 19
Types of Help
ManualsUsed mostly for detailed lookup by experts
Rarely introduces conceptsThematically arranged
Key features:Search / findTable of contentsIndex
Comp 3020 20
Types of Help
Reminders
E.g.,Tooltips (hints)Text over graphical items indicates their meaning or purpose
Context-sensitive helpSystem provides help on the interface component the user is currently working with
Comp 3020 21
simple example: width of the field provides a clue about the length of the input.
contextual help is provided
22
Types of Help
WizardsWalks user through typical tasks
But dangerous if user gets stuck or wants to deviate from the path
TipsMigration path to learning system features
Also context-specific tips on being more efficient
Must be “smart”, otherwise boring and tedious
Comp 3020 23
help
tutorial and/or getting started manualsshort guides to read when first obtaining their systems, encourage exploration
cannot expect broad use
reference manualsheavy use on some contexts (e.g., programing), almost-zero use in others (e.g., word)
COMP 3020 24
context-sensitive help
system provides help on the interface component the user is currently working with
tooltips (hints)text over graphical items indicates their meaning or purpose
must be “smart”, otherwise boring and tedious
COMP 3020 25
From Principles to GoalsDesign Guideline Usability Goal(s)
Visibility Efficiency, Learnability
Feedback Memorability
Constraints Efficiency, Safety
Mapping Effectiveness, Efficiency, Learnability, Memorability
Consistency Efficiency, Learnability, Memorability
Affordance Learnability
Simplicity Efficiency, Learnability, Memorability
Matching Efficiency, Learnability
Minimizing Memory Load Learnability, Memorability, Efficiency
Diagnose/Recover from Errors Safety
Control/Freedom Safety
Flexibility Efficiency, Memorability
Provide Help Safety, Efficiency, Learnability, Comp 3020 26
Exercise
Do these principles apply to all types of interactive systems?
Do certain systems needs new principles?
E.g., games, VR, augmented reality, your project?
Comp 3020 27
COMP 3020: Human-Computer Interaction I
LayoutFall 2017
James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry
Layout
Presentation
More on structure
Hierarchy
Balance
Grids
Comp 3020 29
Structure
Structure doesn’t happen naturallyMust be explicitly planned, designed
People will naturally try to find order and structure, even if none was intentionally designed
Gestalt principles are one powerful way to create structure
Comp 3020 30
Grouping of Items
Logically together ⇒ physically togetherhow are the fields related?
Billing details:NameAddress: …Credit card #
Delivery details:NameAddress: …Delivery time
Order details:itemsize 10 screws (boxes)……
quantity cost/item cost7 3.71 25.97
..... ..... ....Comp 3020 31
proximity in layout
32
proximity in layout
33
order of groups and items
some guidelines
natural order (culture, experience, etc.)E.g., name before address
generic followed by details
required data followed by optional
related objects before unrelated/loosely related
Comp 3020 34
hierarchycreate a visual hierarchy to guide viewer, to allow scanning of information
create hierarchy according to intended reading sequence
hierarchy created by adjusting properties such as size, position, spacing, white space…
scanability through hierarchy and whitespace even more important with web
users want to quickly find out whether the page contains the content they are looking for
35Comp 3020
Hierarchy
Fall 2016 Comp 3020 36
Balance
37Comp 3020
Balance
Comp 3020 38
Alignment - text
Follow natural reading orderLeft aligned text is easier to read (in Canada)Right align only for stylistic purposes (e.g., slide titles, posters)
James YoungDepartment of Computer ScienceUniversity of ManitobaWinnipeg, MBR3T 2N2
James YoungDepartment of Computer Science
University of ManitobaWinnipeg, MB
R3T 2N2
Comp 3020 39
alignment – grouping(gestalt similarity, proximity)scanning for surnames ⇒ make it easy!
Comp 3020 40
Henrik SedinMarkus NäslundMats SundinDaniel Alfredsson
Sedin, HenrikNäslund, MarkusSundin, Mats Daniel, Alfredsson
Henrik SedinMarkus NäslundMats SundinDaniel Alfredsson
Vs.
Alignment -- Numbers
Think purpose!
Which is biggest?
1124.536.5594
5.3557.6
1199.8404.36
Comp 3020 41
Alignment -- Numbers
Visually:
long number == big number
Align decimal points
or right align integers
Support comparing place value
1124.5 36.5594
5.3 557.6
1199.8 404.36
Comp 3020 42