SunyoungKim,PhD Last class Psychological design principles Recap. - - PowerPoint PPT Presentation

▶
sunyoung kim phd
SMART_READER_LITE
LIVE PREVIEW

SunyoungKim,PhD Last class Psychological design principles Recap. - - PowerPoint PPT Presentation

Dec 22, 2023 386 likes •970 views

Human-Computer Interaction 17. Design Design Principles (2) SunyoungKim,PhD Last class Psychological design principles Recap. Psychological principles 1. User sees what they expect to see. 2. Users have difficulty focusing on more

slide-1
SLIDE 1

Human-Computer Interaction

  • 17. Design – Design Principles (2)

SunyoungKim,PhD

slide-2
SLIDE 2

Last class

Psychological design principles

slide-3
SLIDE 3
  • Recap. 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-4
SLIDE 4
  • Recap. Gestalt theory

Continuity Similarity Proximity Connectedness Closure Figure/Ground

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

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

Today

Norman’s design principles

slide-10
SLIDE 10

Norman’s Design Principles

slide-11
SLIDE 11

Usability

Usability is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment - ISO 9024

Usability is NOT identical to making things simple to use!!!

slide-12
SLIDE 12
slide-13
SLIDE 13

Link: https://www.youtube.com/watch?v=yY96hTb8WgI

Norman’s Door

slide-14
SLIDE 14
slide-15
SLIDE 15

Norman’s 6 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-16
SLIDE 16
  • 1. Visibility

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

  • State of the system
  • Possible actions
slide-17
SLIDE 17
  • 1. Visibility
slide-18
SLIDE 18
  • 1. Visibility
  • Sensor technology like auto faucets - not sure how to use
  • guess where to put hands
  • Visible knobs, dials and buttons have been replaced by

invisible and ambiguous “active zone

slide-19
SLIDE 19
  • 1. Visibility
slide-20
SLIDE 20
  • 2. Feedback

“What is it doing now? what action has been performed? Sending back information immediately 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-21
SLIDE 21
  • 2. Feedback
slide-22
SLIDE 22
  • 2. Feedback
slide-23
SLIDE 23
  • 3. Mapping

Controls and displays should exploit natural mapping.

slide-24
SLIDE 24
  • 3. Mapping
slide-25
SLIDE 25
  • 3. Mapping
slide-26
SLIDE 26
  • 3. Mapping
slide-27
SLIDE 27
  • 3. Mapping
slide-28
SLIDE 28
  • 4. Affordance

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

  • Mouse button à push
  • Door handle à pull
  • Glass à see through
slide-29
SLIDE 29
  • 4. Affordance
slide-30
SLIDE 30
  • 4. Affordance
slide-31
SLIDE 31
  • 4. Affordance confusion

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

slide-32
SLIDE 32
  • 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
slide-33
SLIDE 33
  • 5. Constraints
slide-34
SLIDE 34
  • 5. Constraints
slide-35
SLIDE 35
  • 5. Constraints
slide-36
SLIDE 36
  • 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-37
SLIDE 37
  • 6. Consistency
  • Aesthetic
  • Style and appearance is repeated to enhance recognition,

communicates membership and sets emotional tone

slide-38
SLIDE 38
  • 6. Consistency
slide-39
SLIDE 39
  • 6. Consistency

http://www.hugeinc.com

slide-40
SLIDE 40
  • 6. Consistency
slide-41
SLIDE 41
  • 6. Consistency
slide-42
SLIDE 42
  • 6. Consistency

Problems of Consistency:

  • Repetitive
  • Boredom
  • Monotony

à Inconsistency With a Purpose

  • Draw Attention
  • The Sake of Usability
slide-43
SLIDE 43
  • 6. Consistency
slide-44
SLIDE 44

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

slide-45
SLIDE 45

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

slide-46
SLIDE 46

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

slide-47
SLIDE 47

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

slide-48
SLIDE 48

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

slide-49
SLIDE 49

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

slide-50
SLIDE 50

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

slide-51
SLIDE 51
  • 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-52
SLIDE 52

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

Group project

slide-54
SLIDE 54
  • P4. Wireframe and Flowchart

Among the sketches you created in the last assignment, you either pick some, combine some, or update some. And then, come up with a final set of wireframe with a flowchart. Wireframe

  • Use a software of your choice.
  • Recommended: Wireframe.cc https://wireframe.cc/
  • Recommended: Balsamiq https://balsamiq.com/products/
  • Recommended: Indigo studio

https://www.infragistics.com/products/indigo-studio

  • Check for more:

http://mashable.com/2010/07/15/wireframing-tools/#oqegDW3EXZqq

  • Do not apply colors
  • Don't focus on the details, look & feel and visual details, but focus on

the content structure, workflow, and systems usability.

slide-55
SLIDE 55
  • P4. Wireframe and Flowchart

Indigo Studio

  • 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 you’re a Free 1-Year Academic License for Infragistics Indigo Studio here (http://www.infragistics.com/products/indigo-studio/ indigo-academic-license)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

slide-56
SLIDE 56
  • P4. Wireframe and Flowchart

Flowchart

  • Use a software of your choice
  • Recommended: Powerpoint
  • Recommended: https://www.draw.io/

Turn in: a PDF with

  • Your project proposal on top
  • A link to your website that has wireframes and a flowchart
  • Wireframe of your entire system
  • A flowchart
  • State which team members contributed to which part
  • Exemplar: Link
  • Due by midnight 11/13

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

slide-57
SLIDE 57
  • P4. Wireframe and Flowchart

Rubric

  • Wireframe (6pt)
  • If the wireframe does not miss any screens that are important part of the

system (2pt)

  • If each screen in the wireframe clearly demonstrates what it's about (2pt)
  • If each screen has any usability problems (2pt)
  • Workflow (4pt)
  • If the workflow does not miss any steps that are important part of the

system (2pt)

  • If the workflow clearly demonstrates how a user would navigate through a

system (1pt)

  • If the workflow does not have any usability problem (1pt)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.