0% found this document useful (0 votes)
131 views

Assignment 4

Students are to choose a problem statement and identify types of users, then create paper prototypes for 3 usage scenarios and wireframe those scenarios using open-source tools. There are 3 types of users - novices who need feedback, knowledgeable intermittent users who need documentation, and expert frequent users who need brief feedback. Prototypes allow interaction to identify design issues early, while wireframes establish basic page structure before visual design. Both help get approval and ensure pages meet user and business needs.

Uploaded by

nisha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
131 views

Assignment 4

Students are to choose a problem statement and identify types of users, then create paper prototypes for 3 usage scenarios and wireframe those scenarios using open-source tools. There are 3 types of users - novices who need feedback, knowledgeable intermittent users who need documentation, and expert frequent users who need brief feedback. Prototypes allow interaction to identify design issues early, while wireframes establish basic page structure before visual design. Both help get approval and ensure pages meet user and business needs.

Uploaded by

nisha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like