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