University of Antique

TARIO-LIM MEMORIAL CAMPUS

Tibiao, Antique

APDEV 1
Application Development and
Emerging Technologies
Chapter 5

ter5│julagos│ccs-uatlmc
 CHAPTER 5

DESIGN, PROTOTYPING AND CONSTRUCTION

Objectives:

At the end of the unit lesson, the learners can:

• Describe prototyping and different types of prototyping activities
• Explain the use of scenarios and prototypes in design

A. PROTOTYPING

What is Prototype?

- One manifestation of a design that allows stakeholders to interact

with it and to explore its suitability
- A scale model; a paper-based outline of a display; a collection of wires
and ready-made components; an electronic picture; a video
simulation; a complex piece of software and hardware; or a three-
dimensional mockup of a workstation.
- Useful when discussing or evaluating ideas with stakeholders which
serves as communication device among team members, and an
effective way for designers to explore design ideas.

Low-Fidelity Prototyping

1. Storyboarding – consists of a series of sketches showing how a user

might progress through a task using the product under
development.
2. Sketching – hand-drawn sketches devising own symbols and icons
and even dialog boxes.
3. Prototyping with Index Cards – using index cards and is used often
when developing websites.
4. Wizard of Oz – assumes a software-based prototype wherein the user
interacts with the software as though interacting with the
product.

High-Fidelity Prototyping

- Looks like the final product that provides more functionality than a
low-fidelity prototype
- Can be developed by modifying and integrating existing components
– both hardware and software.
- Used to develop a tactile vision sensory substitution system

Compromises in Prototyping

a) Horizontal prototyping – providing a wide range of functions but

with little details
b) Vertical prototyping – providing a lot of detail for only a few function
 Three Key Principles in the Anatomy of prototypes

1. Fundamental prototyping – activity with the purpose of creating

a manifestation in its simplest form, filters the qualities
in which designers are interested, without distorting the
understanding of the whole.
2. Economic prototyping – makes the possibilities and limitations
of a design idea visible and measurable in the simplest
and most efficient way.
3. Anatomy of Prototypes – filters that traverse a design space and
are manifestations of design ideas that concretize and
externalize conceptual ideas

B. CONCEPTUAL DESIGN

- Concerned with transforming requirements into a conceptual model

which is fundamental to interaction design.
- Closely related to concrete design and the difference is a matter of
changing emphasis. During design, conceptual issues will sometimes
be highlighted and at other times, concrete detail will be stressed.
Producing a prototype inevitably means making some concrete
decisions.

Conceptual Model – outline of what people can do with a product and

what concepts are needed to understand how to interact with
it.

Key Guiding Principles of Conceptual Design:

1. Keep an open mind but never forget the users and their context.
2. Discuss ideas with other stakeholders as much as possible.
3. Use prototyping to get rapid feedback.
4. Iterate, iterate, and iterate.

Approaches on Developing an Initial Conceptual Model

1. Interface Metaphor – combination of familiar knowledge with new

knowledge in a way that will help the user understand
the product.
Which interface metaphors would be suitable to help users
understand the product?

2. Interaction Types – considering four different types of interaction

or its combination: instructing, conversing, manipulating,
and exploring.
Which interaction type(s) would best support the user’s
activities?

3. Interface Types – prompt and support different perspectives on the

product under development and suggest different
possible behaviors.
 Do different interface types suggest alternative design insights
or options?

Subset of Interfaces
1. Shareable interface
2. Tangible interface
3. Augmented and mixed reality

Expanding the Initial Conceptual Model

1. What functions will the product perform?

2. How are the functions related to each other?
3. What information in needed?

C. USING SCENARIOS

- Informal stories about tasks and activities.

- Can be used to model existing work situations but is commonly used
for expressing proposed or imagined situations to help in conceptual
designing.
Four Roles (Bødker,2000)

- As a basis for the overall design

- For technical implementation
- As a means of cooperation within design teams
- As a means of cooperation across professional boundaries, e.g. as a
basis of communication in a multidisciplinary team

D. GENERATING PROTOTYPES

1. Generating storyboards from scenarios

2. Generating card-based prototypes from use cases

E. CONSTRUCTION

- Putting together components and developing the final product

Two Kinds of Resource

a. Physical Computing – concerned with how to build and

code prototypes and devices sing electronics.
- creating physical artifacts and giving
them behaviors through a combination of building
with physical materials, computer programming
and circuit building (Gubbels and Froehlich, 2014)

b. SDKs: Software Development Kits – a package of

programming tools and components that supports
the development of applications for a specific
platform.
- includes an IDE (integrated
development environment), documentation,
 drivers, and sample programming code to illustrate
how to use SDK components

Answer:

∙ instructing: the user wants to see details of a

particular movie, such as scriptwriter and
shoot locations.

Sample Activity: ∙ conversing: the user wants to identify a

movie on a particular topic but doesn’t know
Consider the movie rental subscription
exactly which one.
service.
∙ manipulating: the movies might be
Identify tasks associated with the product that
presented as icons
would be best supported by each of the
interaction types: instructing, conversing, ∙ exploring: the user is looking for interesting
manipulating, and exploring. movies, with no particular topic or actor in
mind.

Post Test/Enrichment Activity (This should be answered/done and to be

submitted as SOFT COPY. Submission bin is provided at the LMS.)

1. Try to consider an Internet Café. Identify tasks associated with the product that
would be best supported by each of the interaction types: instructing, conversing,
manipulating, and exploring.

2. Produce a storyboard prototype using the scenarios generated from the

activity/ies inside the Internet Café.

Source: Interaction Design: Beyond Human-Computer Interaction, 4th Edition, Jennifer

Preece, Yvonne Rogers, Helen Sharp, John Wiley & Sons Ltd, 2015. Page 385-429.