First Situation:
1. What is a web prototyping?
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. Essentiality, prototyping means building a model of the website before you build the actual website. From a developmental standpoint, a prototype isn't actually built in the same way that a sophisticated website would be. A simple prototype might be a collection of clickable HTML pages that describe more complex, database-driven functionality for example, by depicting the result of a search rather than actually receiving and processing queries without being concerned with design-realted issues of look and feel, colors, typography, images and the like.
2. Why do we need to prototype?
Website prototypes are typically interactive demos of a website early in the project lifecycle. They are used to gain agreement and gather opinion from the various project stakeholders, including the end users. Typically a website prototype will go through a couple of rounds of usability testing to ensure everything is working before the project moves into development. Although it can take some time to choose the right tool and learn it, this time is far outweighed by the costs involved in launching an untested website which doesn't work.
3. What are the advantages and disadvantages of using low-fidelity prototype and high-fidelity prototype?
Advantages
Low-fidelity
prototype
|
High-fidelity
prototype
|
~ 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. |
~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
Low-fidelity
prototype
|
High-fidelity
prototype
|
~ 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”.
~ Users might judge a low-fidelity prototype as unprofessional. |
~ 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.
Fidelity
|
Appearance
|
Optimal uses
|
Limitations
|
Interface
|
Low
|
Rough
sketch; highly schematic and approximate. Little or no interactive
functionality.
|
Early
design; conceptualizing and envisioning the application.
|
Limited
usefulness after requirements established; limitations in usability testing.
|
 |
High
|
Lifelike
simulation of the final product; refined graphic design. Highly functional,
but the back end might be simulated rather than real.
|
Marketing
tool; training tool; simulation of advanced or highly interactive techniques.
|
Expensive
to develop; time consuming to build.
|
 |
5. What are the differences between prototyping and wireframe?
Prototyping
A prototyping is "a product that is designed and built to test a new design. The protype is used to correct mistake and make [the design] more user friendly".
Medium fidelity wireframe
Wireframe
A wireframe is a low fidelity representation of a design.
Low fidelity wireframe 
Medium fidelity wireframe
Second Situation:
"I'm responsible for building a user-interface mockup on a new
website. I'd like to have something that's more powerful than sample
screenshot, so for example I should be able to click on a button and be taken
to another page -- although it can be another "static" page not
attached to an actual database. I'm not ready to design or build database. I'm
not ready to design or build database yet. I believe the eventual coding will
be in J2EE, so plus points for something that helps the developers do their
work faster, too."
Chong Wei
How would you response to this statement? Please help him.
| 1. To solve this problem, Chong Wei need to sketch the storyboard for easy explain the function web page. | 2. Then, Chong Wei need to follow the flow which web page must be appear first. |
| 3. Chong Wei also need to explore the elements of web design which is whether to use hierarchical, linear and random of website organization. | 4. Chong Wei must explore the colour of interface which is compatible to attract user. |
