First
situation
What
is web prototyping?
o
The process by which a web-based model
of the end product is constructed for the purpose of outlining how a website or
web application will look and behave.
o
It’s on a whiteboard, paper and online
is a test site that will include some content, all primary navigation and
possibly images and key functional elements.
Why
do we need to prototype?
o You can
include photos of your prototype in your inventor's logbook.
o A prototype
helps you figure out any design flaws your invention has and if it really
works.
o It can help
you make sure your invention is the right size, shape, and form.
o A prototype
helps you sell or
license an invention. You can use it during demonstrations.
o Making one
can prepare you to write your patent
application and make your patent
drawings.
What
are the advantages and disadvantages of using low fidelity prototype and high
fidelity prototype?
Advantages
|
Disadvantages
|
|
Low fidelity prototype
|
|
o limited error checking -
navigational and flow limitations
|
High fidelity prototype
|
o
Permit test and exploration
o
Aid with customer / user buy-in
o
Produces useful user evaluation
results
o
Look and feel of final product
o
Can be used as marketing / sales
tool
o
Can be easily converted to a real
system
|
o User frustration as product appears to be finished
when really it was only a prototype
o Expensive and time consuming to develop
o Inefficient for proof of concept designs
o Not effective for requirements gathering
o Very difficult to actually discard and start again
o Users can be reluctant to change design
|
h Explain
different types of prototyping
Type of Prototype
|
Typical Purpose
|
General Characteristics
|
When to Use
|
Concept Prototype
|
Analyze system approaches
|
High-level, overall vision
|
Concept Definition Stage
|
Feasibility Prototype
|
Determine feasibility of various solutions
|
Proof of concept for specific issues
|
Concept Definition Stage
|
Horizontal Prototype
|
Clarify scope and requirements
|
Demonstrates outer layer of human interface only, such as windows, menus,
and screens
|
Function Definition Stage
|
Vertical Prototype
|
Refine database design, test key components early
|
Demonstrates a working, though incomplete, system for key functions
|
Later portion of Function Definition Stage
|
Functional Storyboarding
|
Determine useable sequences for presenting information
|
Demonstrates the typical order in which information is presented
|
Function Definition Stage
|
1. What
are the differences between prototyping and wireframe?
|
Prototyping
|
Wireframe
|
|
·
A built, high fidelity set of functional pages or
components
|
·
A low-fidelity, conceptual drawing
|
|
·
Contains detailed page components for the task flow
|
·
Used to explore layout and task flow options
|
|
·
Is a targeted, usability testable specific user task
scenario
|
·
A fast, iterative visual communication to explore
options using general data
|
|
·
Contains the actual navigation and interactions for
eventual coding
|
·
A buy-in tool for stakeholders (designers, clients,
developer all agree before coding)
|
|
Interactivity
Create different states of a design in which the user can actively engage with the design and change the states of the prototype. |
·
An annotated set of paths and flows with entry, exit
and interruption points
|
|
Animation
Set up transitions between various states of an application. |
·
Can be functional or a general storyboard (Day in
the Life)
|
|
|
Creation
Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily. |
|
|
Modularity
Design once, and have the changes cascade throughout the whole document. |
