SunyoungKim,PhD Last class 1. Prototype 2. Flowchart 3. Wizard of - - PowerPoint PPT Presentation

▶
sunyoung kim phd
SMART_READER_LITE
LIVE PREVIEW

SunyoungKim,PhD Last class 1. Prototype 2. Flowchart 3. Wizard of - - PowerPoint PPT Presentation

Mar 15, 2024 108 likes •724 views

Human-Computer Interaction 16. Design Part 3. Design: Design Principles (1) SunyoungKim,PhD Last class 1. Prototype 2. Flowchart 3. Wizard of Oz Todays agenda UI design principles: Psychological principles User-centered design

slide-1
SLIDE 1

Human-Computer Interaction

  • 16. Design – Part 3. Design: Design Principles (1)

SunyoungKim,PhD

slide-2
SLIDE 2

Last class

1. Prototype 2. Flowchart 3. Wizard of Oz

slide-3
SLIDE 3

Today’s agenda

UI design principles: Psychological principles

slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9

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-10
SLIDE 10

Today’s lecture

Psychological design principles

slide-11
SLIDE 11

Psychological Principles

slide-12
SLIDE 12

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-13
SLIDE 13

Users are not good at handling unexpected situations

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

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

OK/Cancel vs Cancel/OK

Visual flow isual flow Platfor Platform m

slide-15
SLIDE 15

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-16
SLIDE 16

a more user-friendly approach to dialog boxes

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

slide-17
SLIDE 17

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-18
SLIDE 18
  • 2. Users have difficulty focusing on more

than one activity at a time.

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

than one activity at a time.

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

than one activity at a time.

Perceptual organization: Group things together (Proximity)

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

than one activity at a time.

Perceptual organization: Group things together (Hierarchy)

slide-22
SLIDE 22
  • 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-23
SLIDE 23

(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-24
SLIDE 24

(1) Figure/Ground

slide-25
SLIDE 25

(1) Figure/Ground

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

(2) Proximity

slide-30
SLIDE 30

(2) Proximity

slide-31
SLIDE 31

(3) Similarity

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

slide-32
SLIDE 32

Proximity + Similarity

What happens if you start mixing these principles together?

slide-33
SLIDE 33

Proximity + Similarity

What happens if you start mixing these principles together?

slide-34
SLIDE 34

Proximity + Similarity

slide-35
SLIDE 35

(4) Connectedness

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

slide-36
SLIDE 36

(4) Connectedness

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

slide-37
SLIDE 37

(4) Connectedness

slide-38
SLIDE 38

(4) Connectedness

slide-39
SLIDE 39

(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-40
SLIDE 40

(5) Continuity

slide-41
SLIDE 41

(6) Closure

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

slide-42
SLIDE 42

(6) Closure

slide-43
SLIDE 43

Why designers should care about the Gestalt principles?

  • They’ll help you determine which design elements are most effective

in a given situation. For example, when to use visual hierarchy, background shading, gradients, and how to group similar items and distinguish different ones.

  • These principles hold the power to influence our visual perception,

which allows designers to direct our attention to specific points of focus, get us to take specific actions, and create behavioral change.

  • At the highest level, the Gestalt Principles help you design products

that solve the customer’s problem or meet the user’s need in a way that’s beautiful, pleasing, and intuitive to use.

slide-44
SLIDE 44
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-45
SLIDE 45
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-46
SLIDE 46
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-47
SLIDE 47
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-48
SLIDE 48
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-49
SLIDE 49
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-50
SLIDE 50
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-51
SLIDE 51
  • 1. Figure/Ground
  • 2. Proximity
  • 3. Similarity
  • 4. Connectedness
  • 5. Continuity
  • 6. Closure
slide-52
SLIDE 52
  • 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-53
SLIDE 53
  • 4. It is easier to recognize something

that to recall it.

Over 46 years old

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

that to recall it.

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

that to recall it.

slide-56
SLIDE 56

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-57
SLIDE 57

Individual project (optional)

slide-58
SLIDE 58
  • I3. Ideation and Solution proposal

Based on your data analysis, come up with solutions by creating a persona, a storyboard and (sketch) low-fi prototypes of your system.

  • Describe your proposed solution(s) in a paragraph
  • Create 1 persona to represent your target user (Slide09: P56)
  • Create 1 storyboard to demonstrate a situation where your persona

encounter a problem situation and how your proposed system solves the problem (Slide11:P47-49)

  • Create 3 sketches: Sketches at least three ideas:
  • Explore different ideas of organizing content on a home screen
  • Explore various features/functions for key features: illustrate it using a

sequence of screens if necessary

  • Have at least one idea to be crazy, impossible, absurd, or ridiculous
  • Recommended to add annotations
  • Recommended to use a template for sketching
slide-59
SLIDE 59
  • I3. Ideation and Solution proposal

Submission should include:

  • A paragraph of proposal description
  • 1 persona
  • 1 storyboard
  • 3 sketches

Format

  • Add a title and description of your project on top
  • Link to your project website on top
  • Should be accessible
  • Should have full contents (no pdf file)
  • Update your problem statement with an additional paragraph

describing "solutions"

  • A PDF file, 12 point scale in Times New Roman, 1.5 line spacing

Due by Midnight 11/7

slide-60
SLIDE 60
  • I3. Ideation and Solution proposal

Rubric

  • Solution statement (1pt)
  • If you clearly describe what your proposed solution will do (1pt)
  • Persona (2pt)
  • If the persona used the proper format (1pt)
  • If the persona represents a particular type of person capturing

characteristics of target users (1pt)

  • Storyboard (2pt)
  • If the storyboard used the proper components to describe a use-

case scenario (1pt)

  • If the storyboard clearly states the problem/context/goal (1pt)
  • Sketch (5pt)
  • 1pt for each (set of) prototype (3pt in total)
  • Clarity of prototype presentation: annotation to explain ideas (3pt)