Introduction to Human Computer Interaction Course on NPTEL, Spring - - PowerPoint PPT Presentation

introduction to human computer interaction
SMART_READER_LITE
LIVE PREVIEW

Introduction to Human Computer Interaction Course on NPTEL, Spring - - PowerPoint PPT Presentation

Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 5.1 Ponnurangam Kumaraguru (PK) Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ fb/ponnurangam.kumaraguru, @ponguru 1 Why do


slide-1
SLIDE 1

Introduction to Human Computer Interaction

Course on NPTEL, Spring 2018

Week 5.1

Ponnurangam Kumaraguru (“PK”)

Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ fb/ponnurangam.kumaraguru, @ponguru

1

slide-2
SLIDE 2

Why do prototyping?

❑Build simplified versions of the system ❑Quickly experiment with alternatives ❑Get feedback on your design faster

  • fix problems before code is written
  • saves time and money

❑Keeps the design centered on the user

  • must test & observe ideas with users
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6

Why Use Low-fi Prototypes?

  • Simulate the prototype
  • sketches -- evaluate -- iterate
  • sketches act as prototypes
  • lets non-programmers to participate
  • helps make sure everyone on team is on same

page

slide-7
SLIDE 7

Downsides of High-Fidelity

  • Perceptions of the tester/reviewer
  • representation communicates “finished”
  • comments focus on color, fonts, alignment
  • “When can we have it?”
slide-8
SLIDE 8
  • High-fidelity prototypes take more time to make
  • high-fidelity tools encourage precision
  • but specifying details takes more time
  • tend to waste time on small details that aren’t

important in early stages of design

Downsides of High-Fidelity

slide-9
SLIDE 9
  • Creativity
  • people tend to focus narrowly on one design with

high-fidelity tools

  • easy to lose track of the big picture

Downsides of High-Fidelity

slide-10
SLIDE 10

The Basic Materials for Low-Fi

  • Large, heavy, white paper (11 x 17)
  • 5x8 in. index cards
  • Post-its
  • Tape, stick glue, correction tape
  • Pens & markers (many colors & sizes)
  • Overhead transparencies
  • Scissors, knives
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14

Constructing the Paper Prototype

  • Set a deadline
  • a few hours or 1-2 days
  • don’t think for too long - build it!
  • Draw a window frame on large paper
  • Put different screen regions on cards
  • anything that moves, changes, appears/disappears
  • Ready response for any user action
  • e.g., have those pull-down menus already made
  • Use photocopier to make many versions
slide-15
SLIDE 15

Constructing the Model

slide-16
SLIDE 16

Constructing the Model

slide-17
SLIDE 17

Constructing the Model

slide-18
SLIDE 18
slide-19
SLIDE 19

Instructions to Participants

  • Describe purpose of evaluation
  • “I’m testing the product; I’m not testing you”
  • Tell them they can quit at any time
  • Demonstrate any equipment
  • Explain how to think aloud
  • tell us what they are trying to do
  • tell us questions that arise as they work
  • tell us things they read
slide-20
SLIDE 20

Instructions to Participants

  • Explain that you will not provide help
  • Explain basic concept of the UI, but not too much
  • Describe the task
  • give written instructions, one task at a time
slide-21
SLIDE 21

Sketching & Prototyping

❑https://www.youtube.com/watch?v=JMjozqJS44M

slide-22
SLIDE 22

Digital prototyping

❑https://www.youtube.com/watch?v=KWGBGTGryFk

slide-23
SLIDE 23

IDEO shopping cart video

❑https://www.youtube.com/watch?v=M66ZU2PCIcM

slide-24
SLIDE 24

User-Centered Design

❑User is kept in the loop of the design process ❑Testing under real circumstances (i.e. end user using the product) is important ❑End users wants, needs, and limitations have to be considered in designing a product ❑Ethnography plays an important role?

  • Companies invest in studying the product among users
  • Windows party!
slide-25
SLIDE 25

Myths of Good Design

slide-26
SLIDE 26

Myths of Good Design

❑# Good design is just cool graphics

  • graphics part of bigger picture of what to communicate & how
  • also need to consider what people are trying

to do and how to improve

❑# Good design is just common sense

  • why are there so many bad web sites?

hard to use apps?

  • underestimates work needed for great designs
slide-27
SLIDE 27

Myths of Good Design

❑# We can fix the interface at the end

  • overlooks cost of major changes
  • good design includes making sure you have the right

features

❑# Marketing takes care of understanding customer needs

  • does not help you understand behavior
  • what people say vs. what they do and

what they actually need

slide-28
SLIDE 28

What Processes are there for Building Applications?

  • One fairly typical process: waterfall

Requirements Specification Design Coding Integration and Testing Operation and Maintenance

What is the problem with this model?

slide-29
SLIDE 29

Problems with "Waterfall"

❑You can’t go back up if there’s a problem downstream

  • Design is unrealistic / infeasible
  • Can’t adapt

❑Should be getting more feedback throughout

  • Testing

❑Implies that you design once (and get it right first time)

  • Not optimal for user experience
slide-30
SLIDE 30

Problems with "Waterfall"

❑Ex. “We’ll fix the user interface at the end” ❑Ex. Do testing all at once (rather than progressively as you go) ❑“Testing” for software engineers different than for user experience practitioners

  • Software quality testing vs user testing
slide-31
SLIDE 31

Alternative: Iterative Design

❑Course project should be structured around iterative design ❑Fail fast

Design Prototype Evaluate

slide-32
SLIDE 32

Stepping Back

Ideal Design Process

  • Lo-Fi, Med-Fi, and High-Fi prototypes
  • Ideally, in early stages of design:
  • Do as many iterations rapidly in early stages of design

to work out bugs

  • Fail fast, try lots of ideas, breadth
  • Avoid high-fidelity tools
  • Over time, progressively refine your design, adding details
  • Transition to med-fi and/or high-fi
slide-33
SLIDE 33

Ponnurangam Kumaraguru (“PK”) Associate Professor Indraprastha Institute of Information Technology New Delhi – 110078 pk@iiitd.ac.in precog.iiitd.edu.in