SE365 · Lectures 9–10 · Annotated SlidesDesign, Prototyping and Construction
Original
Overview

Design, Prototyping and Construction

What a prototype is and why build one, filtering and manifestation dimensions, low- vs. high-fidelity prototypes and the compromises involved, construction, conceptual design (metaphors, interaction types, expanding the concept), concrete design, scenarios and storyboards, card-based prototypes and physical computing kits.

How to read this page

Every original slide is shown unchanged. Yellow marks on a slide point to a numbered note: hover or tap a mark to jump to its note, and hover a note to see its marks. Questions tagged Past exam appeared on a real paper; Prediction questions are likely angles, not confirmed. Pick an answer to each question: a wrong pick tells you why it is wrong, so you can try again.

All 35 slides
  1. 1 Slide 1
  2. 2 Overview
  3. 3 Learning Outcomes
  4. 4 1. Prototyping & Construction
  5. 5 1.1 What is Prototype?
  6. 6 Slide 6
  7. 7 1.1 What is Prototype? (cont)
  8. 8 1.2 Why Prototype?
  9. 9 Filtering dimensions of prototyping
  10. 10 Manifestation dimensions of prototyping
  11. 11 1.3 What to Prototype?
  12. 12 1.4 Low-fidelity Prototype?
  13. 13 1.4 Low-fidelity Prototype?
  14. 14 1.4 Low-fidelity Prototype?
  15. 15 1.4 Low-fidelity Prototype?
  16. 16 1.5 High-fidelity Prototype?
  17. 17 Compromises in prototyping
  18. 18 1.5 High-fidelity Prototype? (cont)
  19. 19 Low-fidelity VS High-fidelity Prototype?
  20. 20 1.6 Construction
  21. 21 2. Conceptual design: from requirements to design
  22. 22 2. Conceptual design: from requirements to design (cont)
  23. 23 2.1 Is there a suitable metaphor?
  24. 24 2.2 Considering interaction and
  25. 25 2.3 Expanding the initial conceptual model
  26. 26 2.4 Concrete design
  27. 27 3. Using scenarios in conceptual design
  28. 28 3.1 Using prototype in design
  29. 29 Generate storyboard from scenario
  30. 30 Generate card-based prototype from use case
  31. 31 Construction: Physical Computing
  32. 32 Physical computing kits
  33. 33 Physical computing kits
  34. 34 Physical computing kits
  35. 35 Summary
Slide 1 / 35

Slide 1

Slide 1: Slide 1
Slide 2 / 35

Overview

Slide 2: Overview
Slide 3 / 35

Learning Outcomes

Slide 3: Learning Outcomes
Slide 4 / 35

1. Prototyping & Construction

Slide 4: 1. Prototyping & Construction
Slide 5 / 35

1.1 What is Prototype?

Slide 5: 1.1 What is Prototype?

Notes

  1. Prototype: a manifestation of a design that lets stakeholders interact with it and explore its suitability.

Slide 6 / 35

Slide 6

Slide 6: Slide 6
Slide 7 / 35

1.1 What is Prototype? (cont)

Slide 7: 1.1 What is Prototype? (cont)
Slide 8 / 35

1.2 Why Prototype?

Slide 8: 1.2 Why Prototype?

Notes

  1. Why prototype: evaluation and feedback, communicate ideas, test technical feasibility, clarify requirements, choose between alternatives.

Slide 9 / 35

Filtering dimensions of prototyping

Slide 9: Filtering dimensions of prototyping
Slide 10 / 35

Manifestation dimensions of prototyping

Slide 10: Manifestation dimensions of prototyping
Slide 11 / 35

1.3 What to Prototype?

Slide 11: 1.3 What to Prototype?
Slide 12 / 35

1.4 Low-fidelity Prototype?

Slide 12: 1.4 Low-fidelity Prototype?

Notes

  1. Low fidelity: paper, sketches, storyboards, cards, Wizard of Oz. Quick, cheap, easy to change; good early.

Exam angle

PredictionQ1

A storyboard on paper is a:

Slide 13 / 35

1.4 Low-fidelity Prototype?

Slide 13: 1.4 Low-fidelity Prototype?
Slide 14 / 35

1.4 Low-fidelity Prototype?

Slide 14: 1.4 Low-fidelity Prototype?
Slide 15 / 35

1.4 Low-fidelity Prototype?

Slide 15: 1.4 Low-fidelity Prototype?
Slide 16 / 35

1.5 High-fidelity Prototype?

Slide 16: 1.5 High-fidelity Prototype?

Notes

  1. High fidelity: looks and works like the final product (built with tools such as Figma or code). More expensive; users may focus on details; developers may resist throwing it away.

Slide 17 / 35

Compromises in prototyping

Slide 17: Compromises in prototyping

Notes

  1. Compromises: horizontal (wide range of functions, little detail) vs. vertical (few functions in depth). Throwaway vs. evolutionary prototyping.

Exam angle

PredictionQ1

A prototype with many features but little detail in each is:

Slide 18 / 35

1.5 High-fidelity Prototype? (cont)

Slide 18: 1.5 High-fidelity Prototype? (cont)
Slide 19 / 35

Low-fidelity VS High-fidelity Prototype?

Slide 19: Low-fidelity VS High-fidelity Prototype?
Slide 20 / 35

1.6 Construction

Slide 20: 1.6 Construction
Slide 21 / 35

2. Conceptual design: from requirements to design

Slide 21: 2. Conceptual design: from requirements to design

Notes

  1. Conceptual design: what the product will do and how it behaves (concepts, metaphors, interaction types). Concrete design: colours, layout, icons, details.

  2. Trap Conceptual design = WHAT and how it behaves; concrete design = how it LOOKS.

Slide 22 / 35

2. Conceptual design: from requirements to design (cont)

Slide 22: 2. Conceptual design: from requirements to design (cont)
Slide 23 / 35

2.1 Is there a suitable metaphor?

Slide 23: 2.1 Is there a suitable metaphor?
Slide 24 / 35

2.2 Considering interaction and

Slide 24: 2.2 Considering interaction and
Slide 25 / 35

2.3 Expanding the initial conceptual model

Slide 25: 2.3 Expanding the initial conceptual model
Slide 26 / 35

2.4 Concrete design

Slide 26: 2.4 Concrete design
Slide 27 / 35

3. Using scenarios in conceptual design

Slide 27: 3. Using scenarios in conceptual design

Notes

  1. Scenarios → storyboards → card-based prototypes.

Slide 28 / 35

3.1 Using prototype in design

Slide 28: 3.1 Using prototype in design
Slide 29 / 35

Generate storyboard from scenario

Slide 29: Generate storyboard from scenario
Slide 30 / 35

Generate card-based prototype from use case

Slide 30: Generate card-based prototype from use case
Slide 31 / 35

Construction: Physical Computing

Slide 31: Construction: Physical Computing

Notes

  1. Physical computing: Arduino, MaKey MaKey, micro:bit for prototyping physical interaction.

Slide 32 / 35

Physical computing kits

Slide 32: Physical computing kits
Slide 33 / 35

Physical computing kits

Slide 33: Physical computing kits
Slide 34 / 35

Physical computing kits

Slide 34: Physical computing kits
Slide 35 / 35

Summary

Slide 35: Summary