Problem Based Learning : Web Prototyping
First Situation
First Situation
1.
What
is web prototyping?
A website prototype can be any
mock-up or demo of what a website will look like when it goes live. It can be
anything from a paper sketch, to a clickable HTML prototype. Prototyping
involves the creation of an interactive experience that effectively
communicates the structure, information and functionality of a website in a way
that enables the remaining steps in the process, specifically design and
development, to proceed without the possibility of emerging on the other side
with contradictory results. Essentially, prototyping means building a model of
the website before build the actual website.
2. Why
do we need to prototype?
Prototypes can help developers see
any problems in the web interface or layout that should be changed before the
site is coded or is finalized. Other than, can help developers get feedback on
their design faster, saves money, experiment with alternative designs, fix
problems before code is written and keep focused on customer design.
3. What
are advantages and disadvantages of using low-fidelity prototype and
high-fidelity prototype?
Advantages of using low-fidelity
·
Takes only a few hours
·
no expensive equipment needed
·
Can test multiple alternatives
·
fast iterations
·
number of iterations is tied to final
quality
·
Almost all interaction can be faked
Disadvantages
of using low-fidelity
·
Users might judge a low-fidelity
prototype as unprofessional.
·
While Low-fidelity prototypes allow
spontaneous changes for exploring interactions, they also sacrifice some
realism.
·
Limitations in navigation and flow while
a control person has to “make the interaction”
Advantages
of using high-fidelity
·
Permit
test and exploration
·
Aid
with customer / user buy-in
·
Produces
useful user evaluation results
·
Look
and feel of final product
·
Can
be used as marketing / sales tool
·
Can
be easily converted to a real system
Disadvantages
of using high-fidelity
·
User frustration as product appears to
be finished when really it was only a prototype
·
Expensive and time consuming to develop
·
Inefficient for proof of concept designs
·
Not effective for requirements gathering
·
Very difficult to actually discard and
start again
·
Users can be reluctant to change design
4. Explain
different types of prototyping.
In
our three-level framework:
·
Low-fidelity prototyping tools and
methods are used for early design just after requirements analysis, to help
conceptualize and envision the interface at a high level. These tools often
support rough sketching of interface screens by freehand drawing with a mouse
or tablet pen.
·
Mid-fidelity prototyping tools are used
after early design, for the purposes of detailed design and usability validation.
They present detailed information about navigation, functionality, content and
layout, but in schematic (“wireframe”) or approximate form.
· High-fidelity prototyping tools permit
the creation of a lifelike simulation, normally for marketing purposes or
sometimes for user tests, before the final version has been developed.
High-fidelity prototyping tools tend to target developers, and are often
general-purpose development tools. Due to the efforts required, high-fidelity
prototypes are usually not “rapid”; nevertheless the expression RAD (rapid
application development) is widely used in the field.
5. What
are the differences between prototyping and wireframe?
Prototype is:
·
A built, high fidelity set
of functional pages or components
·
Contains detailed page
components for the task flow
·
Is a targeted, usability
testable specific user task scenario
·
Contains the actual
navigation and interactions for eventual coding
Wireframe is:
·
A low-fidelity, conceptual
drawing
·
Used to explore layout and
task flow options
·
A fast, iterative visual
communication to explore options using general data
·
A buy-in tool for
stakeholders (designers, clients, developer all agree before coding)
·
An annotated set of paths
and flows with entry, exit and interruption points
·
Can be functional or a
general storyboard (Day in the Life)
Post a Comment