Assignment No 4
Aim: Prototype and Wireframe
Problem statement:
Students are expected to choose a problem statement and identify –
Types of users going to use (age, experience, environmental conditions during use etc.)
Minimum 3 scenarios of use Create paper-based prototypes for scenarios.
Use any open-source tool to wire frame scenarios.
Theory:
There are 3 main types of users
1) Novices
For the novice user of a system, progress is slow because of the limitations of working memory.
Chunking is almost entirely absent.
Systems used by novices require more feedback and more opportunities for closure.
2) Knowledgeable Intermittent users
These users need consistent structures, good help facilities, good documentation.
3) Expert Frequent users
These users have fast response time and will require brief feedback.
Experts organize their knowledge according to a higher conceptual structure.
They can recall more than novices because their knowledge is chunked.
Expert users will look for keyboard shortcuts, abbreviated sequences.
Experts can find constant confirmation screens irritating - Use these only when important.
What is Prototype?
A prototype can be any mock-up or demo of what a website or any application will look like, when it
goes live. It is generally drawn by hand on a paper. While it may not have all the bells and whistles of a
final website build, it can give you a really good idea of the functionality, user journey and flow through
a website. A website prototype is essentially a high-fidelity visual version of the site that allows you to
link between screens and demonstrate how the website would work before going to build.
Creating website prototypes is useful in many ways. Most importantly, a prototype allows a user to
interact with the website almost as it would behave when built. While it may not include any animation
or transition styles it does operate on a basic level to let the user navigate and interact with certain
elements on the site.
Prototyping is hugely beneficial in the design process as it allows us to save a lot of time early on in a
web project. Identifying areas for improvement during the design stage is a lot easier to rectify than
finding out these problems once the site has gone into development. Prototyping is also beneficial to
show users who may not understand flat visuals as easily as an interactive version of the site.
Example of a Prototype:
High-Fidelity and Low-Fidelity Designs
Low-fidelity prototypes are often paper-based and do not allow user interactions. They range from a
series of hand-drawn mock-ups to printouts. In theory, low-fidelity sketches are quicker to create. Low-
fidelity prototypes are helpful in enabling early visualization of alternative design solutions, which
helps provoke innovation and improvement. An additional advantage to this approach is that when
using rough sketches, users may feel more comfortable suggesting changes.
High-fidelity prototypes are computer-based, and usually allow realistic (mouse-keyboard) user
interactions. High-fidelity prototypes take you as close as possible to a true representation of the user
interface. High-fidelity prototypes are assumed to be much more effective in collecting true human
performance data (e.g., time to complete a task), and in demonstrating actual products to clients,
management, and others.
What is the need of wireframes?
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used
to layout content and functionality on a page which takes into account user needs and user journeys.
Wireframes are used early in the development process to establish the basic structure of a page before
visual design and content is added. The aim of a wireframe is to provide a visual understanding of a
page early in a project to get stakeholder and project team approval before the creative phase gets
under way.
It is quicker and cheaper to review and amend the structure of the key pages in a wireframe format.
Iterating the development of the wireframes to a final version will provide the client and the design
team confidence that the page is catering to user needs whilst fulfilling the key business and project
objectives. From a practical perspective, the wireframes ensure the page content and functionality are
positioned correctly based on user and business needs. And as the project moves forward, they can be
used as a good dialogue between members of the project team to agree on the project vision and scope.
Example of a Wireframe:
Conclusion:
Prototypes are drawn and Wireframes are created using software tools
