Scribd
Upload
23 views

Lecture 6 - Prototyping

Uploaded by

tamjid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views

Lecture 6 - Prototyping

Uploaded by

tamjid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

CSE4107-Human Computer Interaction

Lecture 6: Prototyping

Dr. Md. Sazzad Hossain, PhD (Japan)


Professor
Department of CSE
Mawlana Bhashani Science and Technology University
Email: [email protected]

1
Prototyping

• What is a prototype?

• Different kinds of prototyping

- Low fidelity

- High fidelity

• Compromises in prototyping

- Vertical

- Horizontal

• Final product needs to be engineered


2
What is a prototype?
In other design fields a prototype is a small-scale
model:

• a miniature car

• a miniature building or town

• the examples here come


from a 3D printer
A prototype is an early sample, model,
or release of a product built to test a concept or process.

3
What is a prototype?
In interaction design it can be (among other things):
• a series of screen sketches

• a storyboard, i.e. a cartoon-like series of scenes


• a PowerPoint slide show

• a video simulating the use of a system

• a lump of wood (e.g. Palm Pilot)

• a cardboard mock-up

• a piece of software with limited functionality written in the


target language or in another language 4
Low-fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g.


paper, cardboard
• Is quick, cheap and easily changed

• Examples:
• sketches of screens, task sequences, etc
• ‘post-it’ notes
• storyboards
• ‘Wizard-of-Oz’

5
Storyboards

• Often used with scenarios, bringing more detail, and


a chance to role play

• It is a series of sketches showing how a user might


progress through a task using the device

• Used early in design

6
Generate storyboard from scenario
Sketching
• Sketching is
important to low-
fidelity
prototyping

• Don’t be inhibited
about drawing
ability. Practice
simple symbols
Card-based prototypes
• Index cards (3 X 5 inches)

• Each card represents


one screen or part of screen

• Often used in website


development
‘Wizard-of-Oz’ prototyping
• The user thinks they are interacting with a computer,
but a developer is responding to output rather than
the system.
• Usually done early in design to understand users’
expectations
• Ex: Aardvark startup

User

>Blurb blurb
>Do this
>Why?

10
High-fidelity prototyping

• Uses materials that you would expect to be in the final


product
• Prototype looks more like the final system than a low-
fidelity version
• High-fidelity prototypes can be developed by integrating
existing hardware and software components
• Danger that users think they have a complete
system…….see compromises

11
Low Vs High Fidelity prototypes

12
Compromises in prototyping

• All prototypes involve compromises

• For software-based prototyping maybe there is a slow response?


sketchy icons? limited functionality?

• Two common types of compromise


• horizontal: provide a wide range of functions, but with little
detail
• vertical: provide a lot of detail for only a few functions

• Compromises in prototypes mustn't be ignored. Product needs


engineering

13
Is there a suitable metaphor?
• Interface metaphors combine familiar knowledge with new
knowledge in a way that will help the user understand the
product.

• Conceptualizing what we are doing, e.g. surfing the web

• A conceptual model instantiated at the interface, e.g. the desktop


metaphor

• Visualizing an operation, e.g. an icon of a shopping cart for


placing items into

14
Explore the user’s experience (UX)
• Use personas, card-based prototypes or stickies to model
the user experience

• Visual representation called:

• design map
• customer/user journey map
• experience map

• Two common representations

• wheel
• timeline
Generate card-based prototype from use case
An experience map drawn as a wheel
An experience map drawn as a timeline
GUI Prototyping Tools
• Pencil Project :
• http://pencil.evolus.vn/
• supports Linux, Mac OS X and Windows.
• A Firefox add-on is also available
• Free
• Smartdraw
• https://www.smartdraw.com/
• $200

19
Construction: physical computing
• Build and code prototypes using electronics

• Toolkits available include


• Arduino
• Senseboard
• MaKey MaKey

• Software Development Kits


• programming tools and components to develop for a specific platform, e.g. iOS
• Includes: IDE, documentation, drivers, sample code, application programming
interfaces (APIs)
• Makes development much easier
• Microsoft’s Kinect SDK has been used in research

• Designed for use by wide range of people

You might also like