Human-Computer Interaction 6. Design principles Dr. Sunyoung Kim - - PowerPoint PPT Presentation

▶
human computer interaction
SMART_READER_LITE
LIVE PREVIEW

Human-Computer Interaction 6. Design principles Dr. Sunyoung Kim - - PowerPoint PPT Presentation

Mar 16, 2023 378 likes •1.28k views

Human-Computer Interaction 6. Design principles Dr. Sunyoung Kim School of Communication & Information Rutgers university Last class 1. Brainstorming 2. Sketch 3. Prototype 4. User testing with prototypes Recap: Sharpen the focus

slide-1
SLIDE 1
  • Dr. Sunyoung Kim

School of Communication & Information Rutgers university

Human-Computer Interaction

  • 6. Design principles
slide-2
SLIDE 2

Last class

1. Brainstorming 2. Sketch 3. Prototype 4. User testing with prototypes

slide-3
SLIDE 3

Recap: Sharpen the focus

  • Posing the right problem is critical

– neither too narrow, nor too fuzzy

  • Not “bicycle cup-holders” but

“helping cyclists to drink coffee without accidents”

slide-4
SLIDE 4

Recap: Number your ideas

slide-5
SLIDE 5

Recap: Why sketching?

Designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather, they draw sketches to try out ideas, usually vague and uncertain ones.

  • Suwa & Tverksey
slide-6
SLIDE 6
slide-7
SLIDE 7

Recap: Prototype

A prototype is not the final product! Do not expect it to look like the final product.

  • A simulation of the final product
  • Using visuals to describe how a system should behave
  • To test whether or not the flow of the product is smooth

and consistent

  • To test the feasibility and usability of our designs before we

actually begin writing code

slide-8
SLIDE 8

Recap: Prototyping process

User testing User testing User testing Paper sketches Wireframing Interactive prototyping Coding User testing

slide-9
SLIDE 9

Recap: Prototyping process

Low fidelity High fidelity Medium fidelity

Wireframing Interactive prototyping Paper sketches

slide-10
SLIDE 10

Recap: Flowchart

  • Specific sequence of actions
  • Visualize the entire process of how a user walk through

the system

  • Visualize what is going on and thereby help understand

a process, and perhaps also find flaws, bottlenecks, and

  • ther less-obvious features within it
slide-11
SLIDE 11

Recap: Wizard of Oz

A rapid-prototyping method for systems costly to build or requiring new technology. A human “Wizard” simulates the system’s intelligence and interacts with the user through a real or mock computer interface.

  • Makes it possible to test functionality that does not yet

exist

  • Can simulate different system behaviors and test result

(e.g., speed of ticket from input to output)

  • Can simulate errors and test result
  • Common in areas such as intelligent agents, human-

robotic interaction

slide-12
SLIDE 12

Today’s agenda

UI design principles

1. Psychological principles 2. Norman’s design principles

slide-13
SLIDE 13
slide-14
SLIDE 14

User-centered design

  • User interface design knowledge

from users: need to know about the users and their tasks

  • Design iteratively!

Design principles

  • Theoretical: User interface design

knowledge from theory & experience

  • Experiential: Abstract, high-level

guides for design

Good Interaction Design

slide-15
SLIDE 15

Theory: Psychological principles

  • 1. User sees what they expect to see.
  • 2. Users have difficulty focusing on more than one activity

at a time.

  • 3. It is easier to perceive a structured layout.
  • 4. It is easier to recognize something than to recall it.
slide-16
SLIDE 16

Users are not good at handling unexpected situations

  • The context
  • Prior knowledge of the world
  • 1. User sees what they expect to see
slide-17
SLIDE 17

Button placement: Button placement: OK/Cancel vs Cancel/OK

OK/Cancel vs Cancel/OK

Visual flow isual flow Platfor Platform m

slide-18
SLIDE 18

Button placement is important, but remember to also pay attention to the visual weight and labels you give your buttons.

OK is not ok anymor OK is not ok anymore! e!

slide-19
SLIDE 19
  • OK is not ok anymor

OK is not ok anymore! e!

slide-20
SLIDE 20

Principles:

  • A. Consistency: Users are not good at handling unexpected

situations

  • B. Exploiting prior knowledge: Apply prior knowledge and

experience

  • 1. User sees what they expect to see
slide-21
SLIDE 21
  • 2. Users have difficulty focusing on more

than one activity at a time.

slide-22
SLIDE 22
  • 2. Users have difficulty focusing on more

than one activity at a time.

Perceptual organization: Group things together (Proximity)

slide-23
SLIDE 23
  • 2. Users have difficulty focusing on more

than one activity at a time.

Perceptual organization: Group things together (Hierarchy)

slide-24
SLIDE 24
  • 3. It is easier to perceive a structured

layout: Gestalt theory

  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-25
SLIDE 25

(1) Figure/Ground

Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field).

Rubin V Rubin Vase ase

When confronted by a visual image, our perceptual system separates a dominant shape (a “figure”) from a “background”

slide-26
SLIDE 26

(2) Proximity

Elements closer together are interpreted as being more related than elements that are far apart.

slide-27
SLIDE 27

(2) Proximity

Elements closer together are interpreted as being more related than elements that are far apart.

slide-28
SLIDE 28

(2) Proximity

Elements closer together are interpreted as being more related than elements that are far apart.

slide-29
SLIDE 29

(3) Similarity

Elements that are similar are perceived to be more related than elements that are dissimilar.

slide-30
SLIDE 30

Proximity + Similarity

What happens if you start mixing these principles together?

slide-31
SLIDE 31

Proximity + Similarity

What happens if you start mixing these principles together?

slide-32
SLIDE 32

(4) Connectedness

Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected

slide-33
SLIDE 33

(4) Connectedness

Two basic strategies for applying uniform connectedness in a design: connecting lines and common regions

slide-34
SLIDE 34
slide-35
SLIDE 35

(5) Continuity

Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve.

slide-36
SLIDE 36

(6) Closure

A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements.

slide-37
SLIDE 37
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-38
SLIDE 38
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-39
SLIDE 39
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-40
SLIDE 40
  • 4. It is easier to recognize something

that to recall it.

  • Recognition: knowledge in the world
  • Recall: knowledge in the head

As a designer, you should try to put the information that the user needs in the world (in the UI)!

slide-41
SLIDE 41
  • 4. It is easier to recognize something

that to recall it.

Over 46 years old

slide-42
SLIDE 42
  • 4. It is easier to recognize something

that to recall it.

slide-43
SLIDE 43

Theory: Psychological principles

  • 1. User sees what they expect to see.
  • 2. Users have difficulty focusing on more than one activity at

a time.

  • 3. It is easier to perceive a structured layout (Gestalt theory).
  • 4. It is easier to recognize something than to recall it.
slide-44
SLIDE 44

Norman’s design principles

1. Visibility – can I see it? 2. Feedback – what is it doing now? 3. Mapping – where am I and where can I go? 4. Affordance – how do I use it? 5. Constraint – these are the things I can’t do 6. Consistency – I think I have seen this before

slide-45
SLIDE 45
  • 1. Visibility

Just by looking, the user should know what to do :

  • State of the system
  • Possible actions
slide-46
SLIDE 46
  • 1. Visibility
slide-47
SLIDE 47
  • 1. Visibility
slide-48
SLIDE 48
  • 2. Feedback

Sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity : tactile, visual, verbal, audio, and combinations of these

slide-49
SLIDE 49
  • 2. Feedback
slide-50
SLIDE 50
  • 2. Feedback
slide-51
SLIDE 51
  • 3. Mapping

Controls and displays should exploit natural mapping.

slide-52
SLIDE 52
  • 3. Mapping
slide-53
SLIDE 53
  • 3. Mapping
slide-54
SLIDE 54
  • 3. Mapping
slide-55
SLIDE 55
  • 4. Affordance

“Giving a clue”: An attribute of an object that allows people to know how to use it Examples :

  • Mouse button à push
  • Door handle à pull
  • Glass à see through
  • Any examples you can come up with?
slide-56
SLIDE 56
  • 4. Affordance
slide-57
SLIDE 57
  • 4. Affordance
slide-58
SLIDE 58
  • 4. Affordance confusion

Norman considers affordance to be a relationship between an object and a user, NOT property of an object

slide-59
SLIDE 59
  • 5. Constraints

Relationship between actions and results in the world, between interface controls (their layout and movement) and their effect

  • Restricting the possible actions that can be performed
  • Helps prevent users from selecting incorrect options
  • Three types of constraints
  • Physical
  • Logical
  • Cultural
slide-60
SLIDE 60
  • 5. Physical constraints

The way physical objects restrict the movement of things: Examples:

  • Key into lock
  • CD/DVD into a computer
  • Inserting a memory stick
slide-61
SLIDE 61
  • 5. Physical constraints
slide-62
SLIDE 62
  • 5. Physical constraints
slide-63
SLIDE 63
  • 5. Logical constraints
  • Exploit our common sense reasoning about the way the world works
  • These constraints often make use of the logical relationship between

physical layout of a device and the way it works

slide-64
SLIDE 64
  • 5. Cultural constraints
  • Learned arbitrary convention
  • In other contexts, cultural constraint means the constraints of social

norms placed on genders, races, etc., based on how society thinks they should act

  • Examples in the design context
  • Driving in US (and most of the countries) vs. UK
  • Light switches are very different in different countries
  • Any examples you can come up with?
slide-65
SLIDE 65
  • 6. Consistency
  • Provide similar operations and similar elements to achieve similar task
  • System are usable and learnable when similar concepts are expressed

in similar ways: Eliminating confusing & reduce learning cost

  • Enabling people to quickly transfer prior knowledge to new contexts

and focus on relevant tasks -- easy to learn and remember!

slide-66
SLIDE 66
  • 6. Consistency

http://www.hugeinc.com

slide-67
SLIDE 67
  • 6. Consistency
slide-68
SLIDE 68
  • 6. Consistency
slide-69
SLIDE 69
  • 6. Consistency

Problems of Consistency:

  • Repetitive
  • Boredom
  • Monotony

à Inconsistency With a Purpose

  • Draw Attention
  • The Sake of Usability
slide-70
SLIDE 70
  • 6. Consistency
slide-71
SLIDE 71

1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency

slide-72
SLIDE 72

1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency

slide-73
SLIDE 73

1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency

slide-74
SLIDE 74

1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency

slide-75
SLIDE 75

1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency

slide-76
SLIDE 76

1. Visibility 2. Feedback 3. Mapping 4. Affordance 5. Constraint 6. Consistency

slide-77
SLIDE 77
  • Communicates to the user what functions are available, and

allows them to infer how to interact with what they see:

  • Allows the user to predict what’s about to happen, be aware
  • f what is happening now and understand what has just

happened:

  • Gives the user a clear sense of workflow – how many steps

there may be, how long it may take and a general sense of their level of effort:

  • Prevents users from making too many mistakes by providing

smart defaults and appropriate visual design of UI controls:

When Interaction Design is done well, it:

Visibility, affordance Feedback Mapping Constraint, consistency

slide-78
SLIDE 78

User interface design basics

Best Practices for Designing a UI

  • 1. Keep the interface simple

The best interfaces are almost invisible to the user

  • 2. Create consistency and use common UI elements

Users feel more comfortable and are able to get things done more quickly

  • 3. Be purposeful in page layout

Consider the spatial relationships between items and structure the page based on importance

  • 4. Strategically use color and texture

You can direct attention toward or redirect attention away from items using visual cues

  • 5. Use typography to create hierarchy and clarity

Different sizes, fonts, and arrangement of the text to help increase legibility and readability

  • 6. Make sure that the system communicates what’s happening

Always inform your users of the state

  • 7. Think about the defaults

You can reduce the burden on the user

slide-79
SLIDE 79

Group project

slide-80
SLIDE 80

Pr Project #3 Solution pr

  • ject #3 Solution proposal and lo-fi pr
  • posal and lo-fi prototyping
  • totyping

By 3/8 By 3/8

  • An iterative design ideation
  • A proposed solution

By 3/22

  • Wireframe and Workflow
slide-81
SLIDE 81

Pr Project #3 Solution pr

  • ject #3 Solution proposal and lo-fi pr
  • posal and lo-fi prototyping
  • totyping

By 3/8 By 3/8

  • An iterative design ideation
  • A proposed solution
  • 1. Rephrase your project proposal from a problem's standpoint
  • Do not say what your app will do
  • Say what the problem is and why the problem is important
  • 2. Do an iterative design ideation: Generate multiple ideas (5 or more),

describe each of them, and narrow down to the final idea using:

  • Sketches
  • Sticky notes
  • Group discussion/brainstorming
  • Demonstrate your ideation process (See P27 – P36 of slide05)
  • 3. Solution statement: Describe your final idea (a proposed solution)
  • Here you say what your app will do
slide-82
SLIDE 82

Pr Project #3 Solution pr

  • ject #3 Solution proposal and lo-fi pr
  • posal and lo-fi prototyping
  • totyping

By 3/8 By 3/8

  • An iterative design ideation
  • A proposed solution

# Turn-in: a PDF with

  • A revised/final proposal: problems statement (20%)
  • What the problem is and why it's important (don't say what your app

will do)

  • Demonstration of your ideation process using (60%)
  • 5 or more ideas
  • Sketches and short descriptions of initial ideas
  • Sticky notes/sketches to demonstrate how you discussed different

ideas in a group and the process of narrowing down to the final idea

  • Description of your final idea (a proposed solution) (20%)
  • What your app will do and how it will solve the stated problem
  • These should be up in your website too
  • State which team members contributed to which part
slide-83
SLIDE 83

Pr Project #3 Solution pr

  • ject #3 Solution proposal and lo-fi pr
  • posal and lo-fi prototyping
  • totyping

By 3/22 By 3/22

  • Wireframe and Workflow
  • 1. Wireframing
  • Create wireframes of your system
  • We will be using Indigo Studio from Infragistics as our design tool.

Download the Free 30 Day Trial License for Infragistic’s Indigo Studio to your computer (http://indigo.infragistics.com/). If you like Indigo .

  • You can get a free academic license to use it beyond the 30 day trial

using your Rutgers.edu email address to download and install your a Free 1-Year Academic License for Infragistics Indigo Studio here (http:// www.infragistics.com/products/indigo-studio/indigo-academic-license)

  • 2. Workflow
  • Create a workflow or your system using Indigo
slide-84
SLIDE 84

Pr Project #3 Solution pr

  • ject #3 Solution proposal and lo-fi pr
  • posal and lo-fi prototyping
  • totyping

By 3/22 By 3/22

  • Wir

ireframe and W eframe and Workflow

  • rkflow

# Turn-in: a PDF with

  • Your project proposal at the top (if not -50%)
  • Wireframe of your entire system (80%)
  • Workflow (20%)
  • These should be up in your website too
  • State which team members contributed to which part
slide-85
SLIDE 85

Individual assignment

slide-86
SLIDE 86

Pr Project #3 Ideation and Solution pr

  • ject #3 Ideation and Solution proposal
  • posal

By 3/8 By 3/8

  • An iterative design ideation
  • A proposed solution
  • 1. Rephrase your project proposal from a problem's standpoint
  • Do not say what your app will do
  • Say what the problem is and why the problem is important
  • 2. Do an iterative design ideation: Generate multiple ideas (3 or more) and

narrow down to the final idea

  • Sketches
  • Sticky notes
  • brainstorming
  • Demonstrate your ideation process
  • 3. Describe your final idea (a proposed solution)
  • Here you say what your app will do
slide-87
SLIDE 87

Pr Project #3 Ideation and Solution pr

  • ject #3 Ideation and Solution proposal
  • posal

By 3/8 By 3/8

  • An iterative design ideation
  • A proposed solution

# Turn-in: a PDF with

  • A revised/final proposal: problems statement (20%)
  • What the problem is and why it's important (don't say what your

app will do)

  • Demonstration of your ideation process using (60%)
  • 3 or more ideas
  • Sketches of initial ideas
  • Sticky notes/sketches to narrow down to the final idea
  • Description of your final idea (a proposed solution) with (20%)
  • What your app will do and how it will solve the stated problem
  • These should be up in your website too
slide-88
SLIDE 88

By next class

Reading

Wearable sensors for human activity monitoring: A review # Discussion paper

q Submit a PDF of P3 part 1 by 3/1, 11:55PM