UI-UX IA2

1. What Is a Prototype?
A prototype is one manifestation of a design that allows stakeholders to interact with it and
to explore its suitability; A prototype can be anything from a paper-based storyboard
through to a complex piece of software, and from a cardboard mockup to a molded or
pressed piece of metal.These included screen sketches, paper and cardboard mockups,
wireframes, and many post-its.
2. Importance of prototype.
 Prototypes are useful when discussing or evaluating ideas with stakeholders; they are a
communication device among team members, and an effective way for designers to explore
design ideas.
 Prototypes answer questions and support designers in choosing between alternatives.
Hence, they serve a variety of purposes: for example, to test out the technical feasibility of
an idea, to clarify some vague requirements, to do some user testing and evaluation, or to
check that a certain design direction is compatible with the rest of product development.
3. Paper based prototype.
A paper-based prototype of a handheld device to help an autistic child communicate. This
prototype shows the intended functions and buttons, their positioning and labeling, and the
overall shape of the device, but none of the buttons actually work.
4. Importance of consistent screen elements.
 Reduce Learning : Consistency limits the number of ways actions and operations are
represented, ensuring that users do not have to learn new representations for each task.
Further, establishing design norms like following platform conventions allow users to
complete new tasks without having to learn a whole new toolset.
Example:Photoshop and Illustrator have similar shortcuts.
 Eliminate Confusion: Users tend to apply rules they’ve experienced outside of your website
or product, bringing in a set of their own expectations. Knowing that, we should be mindful
of whether or not we’re causing confusion and alienation when we deviate from design
standards and conventions. Further, users should not have to spend time wondering
whether different words, interactions, or actions actually mean the same thing within the
context of your product.Use standard conventions.
5. Designing login panels
When designing standard login panels:
 Ensure the field tab order is sequenced.
 Reduce memory loads by providing auto-fill options (remember me on this computer)
 Incorrect login fields should return blank with simple error message explaining the error.
6. e-commerce process.(sieve)
From before entering the app to after they exit, to see if there are opportunities to improve
the overall experience.
 Importance-the percentage should be accurate,any changes in the percentage the design
should be done again.
Product details page
Product detail pages provide:
• Details that cannot be seen in product lists.
• Multiple product image views.
• Price and availability information.
• Bargain and discount information
• Product feature comparisons
• Related product and accessory recommendations.
• Provide 4-5 reviews on the product detail page and a link to additional reviews.

Customer ratings and reviews

Customer ratings and reviews are often critical for a user to making a buying decision.
 Provide 4-5 reviews on the product detail page and a link to additional reviews.
 Provide clear explanation of ratings (eg., by general users, members, independent 3 rd party).
 Give raters topics to rate on, rather than just dense text for the user to consume.
Example:Suppose the product is good but the delivery took late,this will result in a negative
feedback.
7. Scrolling & Pagination
 Long scrolling can be used when the users expect one continuous flow.
 Pagination can be used when there are natural breaks in the information or in forms when
you need to gather additional information based on what the user has entered.
Example:passport forms or any other forms.(in forms,if the info is incorrect,then the user
gets irritated to scroll up and re-enter information.
8. Designing Content pages
Content page elements are the design spaces within which relevant information is organized
and presented to users.
9. Designing Gallery pages
Galleries are used to display content and provide navigation.These are used to display
categories,product comparison etc.
10. Dashboards
Dashboards provide quick summaries and direct access to content that requires action.
Dashboards are good solutions for:
• Account Pages
• Applications for managers
• Customer support tools
11. Dashboards: Best Practices
Interface must provide actionable and relevant information from one or more sources that
need to be monitored:
• Consider hoe often and why a user would visit the dashboard
• Provide the most critical information upfront in a prominent position
• Alert the user if there is anything that requires immediate attention
• Place data that are related or need to be compared side by side
• Align visual hierarchy of user’s workflow
• Consider appropriate visualization of data-pie, line or bar charts
• Allow users to drilldown into the details.
12.Low-Fidelity Prototyping
A low-fidelity prototype does not look very much like the final product and does not provide
the same functionality. For example, it may use very different materials, such as paper and
 cardboard rather than electronic screens and metal, it may perform only a limited set of
functions, or it may only represent the functions and not perform any of them.
13.Uses of low fidelity prototypes.
 Low-fidelity prototypes are useful because they tend to be simple, cheap, and quick to
produce.
 They are simple, cheap, and quick to modify so they support the exploration of
alternative designs and ideas.
 Low-fidelity prototypes are not meant to be kept and integrated into the final product.
They are for exploration only.
14.High-Fidelity Prototyping
A high-fidelity prototype looks like the final product and/or provides more functionality
than a low-fidelity prototype.
15.Uses of high fidelity prototypes.
 High-fidelity prototyping is useful for selling ideas to people and for testing out technical
issues.
 High-fidelity prototypes can be developed by modifying and integrating existing
components – both hardware and software.
16.Strengths of prototype
 Greater depth of design feedback
 Presentation close to the real thing
 Allows for greater interaction
17. Limitations of prototype
 Development investment
 Ability to make changes easily
 User openness to be critical.
18.Usability Testing
Evaluation or testing is integral to the design process. Testers collect information about users’
or potential users’ experiences when interacting with a prototype, an app, a computer system, a
component of a computer system, an application, or a design artifact such as a screen sketch.
They do this in order to improve its design. Evaluation focuses on both the usability of the
system (e.g. how easy it is to learn and to use) and on the users’ experience when interacting
with it (e.g. how satisfying, enjoyable, or motivating the interaction is).
19.Purpose of Feedback
The purpose of UT is Feedback
 Feedback tells us if the design works or not
 Goal-directed behavior depends on feedback
 Dynamic systems use feedback to adapt
 Feedback helps diagnose problems and design improvements or corrections
20. Objectives/purposes of UT
 Diagnosing what is working and what is not in the design
 Measuring how well the design works
 Diagnosing problems
 Comparing alternatives
 Verifying that the design goals are met
 Look for opportunities to improve the design
 Look for insights into the UX
21.Benefits of Usability testing.
 Direct benefits
 o Gets feedback directly from the user – not intermediaries
o Provides data for design decisions- not opinions
o Saves development time by avoiding extensive rework late in development process
o Creates a positive return on investment(ROI)
 Ancillary benefits
o Builds a work team that values the user-centered process
o Helps with “change management” when introducing new systems
22. Early prototype type testing
This is a test of foundation of user interface. It often uses paper prototypes or low fidelity
wireframes(prototypes)
23. Uses of early prototype testing
 Self-evidence of the mental model
 Usability & efficiency of content organization, navigation design
 Build a strong foundation for detail design
 Help in visual presentation & branding
24. Advanced prototype test uses and purpose.
 Validate the mental model and navigation
 Evaluate page flow and interaction
 Evaluate detail design issues
 Uncover technology issues
 Test new pages that were not included in the earlier prototype
 Test page level details like content, page flow, consistency issues, graphics, page level
control and interaction.
25. Two main Types of Usability Tests
 Formative testing-The formative method identifies the issues with user interface (UI) design and
provides solutions to solve those issues during the primary stages of the development process.
Used during the early stages of the design and development process.
Used to determine if a specific design objective is met, to look for design bugs, and to
validate a design decision.
Used to validate a product has accomplished intended goals and to see if the specific task
flow is met or not.
Ex: Can user find the new “office space calculator” button to enter number of cabins and
other points to know the total space needed for rental?
 Summative testing-Summative user testing provides an indirect assessment of the usability of the
design. The group of testers in this situation are given a task and based on their performance, the
usability quotient of the design elements are measured.Summative user testing are done after
the product has been launched in the market.
Used to validate that a product has accomplished intended goals.
Ex: Has the new application form increased conversion at the expected rates?
Conducted by a group of more than ten testers, the data collected are more about the
quantity than the quality of the design (as in, what is the percentage of the users who could
use the product without running into a roadblock?), and that is why another name for
summative user testing is quantitative user testing.
26. Heuristic Evaluation
Heuristic evaluation is a process where experts use rules of thumb to measure
the usability of user interfaces in independent walkthroughs and report issues. Evaluators
use established heuristics (e.g., Nielsen-Molich’s) and reveal insights that can help design
teams enhance product usability from early in development.
Nielsen’s Heuristics include:
• Visibility of system status-for eg.users keep pressing the button add to cart repeatedly if the
feedback message is not there.
• Match between system and the real world-use users language for eg.floppy disk icon for
save.
• User control and freedom-give quit and exit in case of user mistakes.
• Consistency and standards-use classics for some intutitive designs.
• Error prevention-methods to prevent errors.for eg.word document pop-up message.
• Recognition rather than recall-memorize the user’s memory load by making
elements,actions and options available.
• Flexibility and efficiency of use-shortcuts-hidden from novice users-may speed up the
interaction for the expert user such that the design can cater to both inexperienced and
experienced users.allow users to tailor frequent actions.
• Aesthetic and minimalist design-interfaces should not contain information which is
irrelevant or rarely needed.
• Help users recognize, diagnose, and recover from errors-error messages should be
expressed in plain language (error codes),precisely indicate the problem and collectively
suggest a solution.
• Help and documentation-its best if the system doesn’t need any additional explanation.
However,it may be necessary to provide documentation to help users understand how to
complete their task.
27. Wireframe
It is a low fidelity prototype.One step before the actual prototype.
28. Example of inconsistent screen elements.
Xinfinity website-it shows different toolbars with same design and same position at
different pages.
29. Website design.

Navigation/header/banner
(logo) Login/sign-in

Primary detailed content Ads video

List menu
Supporting content
(categories)

Footer(contact us, copyright ,privacy policy)