Evaluation of Interactive Systems Design/Prototype/Product

10 min readAug 7, 2021

Evaluation is the fourth main phase of the interactive systems design process. Evaluation means reviewing, trying out, or testing a design idea, a piece of software, a product, or a service to discover whether it meets some criteria.

How do we know if our digital designs will be usable and useful when people take them up in their work or social lives? Poor designs lead to errors and frustration and result in a substantial waste of money and resources. By reading this article you will learn the key methods used to conduct evaluations.

Inspection

Usability specialists and sometimes software developers, users, and other professionals — examine usability-related aspects of a user interface.

Inspection Methods

1. Heuristic Evaluation

A heuristic evaluation is also known as heuristic analysis, is the process of a number of expert evaluators reviewing an interface design against a set of usability principles in order to uncover and fix usability issues, preventing failure once the interface is released. It is conducted against a set of design principles called heuristics

Many people use a set of ten common heuristics from Jakob Neilsen’s 10 Usability Heuristics for User Interface Design:

Visibility of system status:

The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.

Example:-Microsoft- Windows OS

The search function in the Windows OS will show the determinate loading bar while asking the user to wait.

Match between system and the real world:

The system should speak the user’s language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Example:-The interface of the desktop calculator app is inspired by the physical calculator. Although the design is flat and minimalistic, the calculator user interface works just like the real one. Familiar interactions and elements on the calculator interface make it easier for the users to use it without the need for any training.

User control and freedom:

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Example:-In PowerPoint, if you make a mistake, you can always undo and recover from it, and if you want to go deeper, PowerPoint has a revision history that can help you to restore to a previous state of your work.

Consistency and standards:

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Example:- Most application suites will list menu components in the same order (File, Edit, View, and so on) or will use consistent icons for the same functions across applications and familiar layouts for dialog boxes and modals.

Error prevention:

Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Example:-Microsoft Word- Windows OS. While writing in the word program, the typo error or the spelling mistake which is also considered under the slip error was underlined by the red color, so that the user can fix it.

Recognition rather than recall:

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Example:-When a user returns to an eCommerce site like Amazon and eBay, the personalized home page includes a list of recently viewed items, suggestions by your browsing history, and recommendations through your purchase history.

Flexibility and efficiency of use:

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Example:- 3d Touch- iPhone

The iPhone has the 3d touch which is used to make the core actions of the applications. See how the user can perform the core and the most common actions of the application by using the 3d touch. The list of the actions varies from application to application.

Aesthetic and minimalist design:

Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Example:-Apple provides only the basic information of feature hiding additional information under “Learn More”.

Help users recognize, diagnose, and recover from errors:

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Example:-Amazon- Website

See how it is showing the warning sign and text in red color to indicate the error message along with the precise & simple text saying- Your password is incorrect.

Help and documentation:

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Example:-Dropbox’s Help Center

2. walk-throughs

walk-throughs involve walking through a task with the product and noting problematic usability features. In this section, we consider cognitive and pluralistic walk-throughs.

- Cognitive Walk-Throughs

Cognitive walkthroughs focus on the new user’s perspective by narrowing the scope to tasks needed to complete specific user goals. Cognitive walkthroughs are sometimes confused with heuristic evaluations, but, while both methods uncover usability problems and take the users’ point of view, heuristic evaluations typically focus on the product as a whole, not specific tasks.

The main steps involved in cognitive walk-throughs are as follows:

1. The characteristics of typical users are identified and documented, and sample tasks have been developed that focus on the aspects of the design to be evaluated. A description, mock-up, or prototype of the interface to be developed is also produced, along with a clear sequence of the actions needed for the users to complete the task.

2. A designer and one or more UX researchers come together to do the analysis.

3. The UX researchers walk through the action sequences for each task, placing it within the context of a typical scenario. As they do this, they try to answer the following questions:

a. Will the correct action be sufficiently evident to the user?

b. Will the user notice that the correct action is available?

c. Will the user associate and interpret the response from the action correctly?

4. As the walk-through is being done, a record of critical information is compiled.

5.The design is then revised to fix the problems presented. Before making the fix, insights derived from the walk-through are often checked by testing them with real users.

- Pluralistic Walk-Throughs

A diverse group of stakeholders in a design are brought together to review the design, including user interface designers, users, developers, and management. The walkthrough is conducted by identifying primary tasks for the system and stepping through those tasks, identifying usability problems along the way.

Benefits:

Include a strong focus on users’ tasks at a detailed level.
The researchers bring a variety of expertise and opinions for interpreting each stage of the interaction.
“Design, Prototyping, and Construction,” by involving a multidisciplinary team in which users play a key role.

Limitations:

only a limited number of scenarios, and hence paths through the interface, can usually be explored because of time constraints.
The limitations with this approach include having to get the researchers together at one time and then proceed at the rate of the slowest.

Web analytics

Web analytics is the process of analyzing the behavior of visitors to a website. This involves tracking, reviewing, and reporting data to measure web activity, including the use of a website and its components, such as webpages, images, and videos.

Web Analytics Process
Set the business goals.
To track the goal achievement, set the Key Performance Indicators (KPI).
Collect correct and suitable data.
To extract insights, Analyze data.
Based on assumptions learned from the data analysis, Test alternatives.
Based on either data analysis or website testing, Implement insights.

Types of web analytics

Off-site web analytics uses the data that can be found all over the internet, on various websites, social media, etc.

On-site web analytics refers to measuring data flow on a given website.

Web analytics tools

Google Analytics — the ‘standard’ website analytics tool, free and widely used

Piwik — an open-source solution similar in functionality to Google and a popular alternative, allowing companies full ownership and control of their data

Adobe Analytics — highly customizable analytics platform (Adobe bought analytics leader Omniture in 2009)

Kissmetrics — can zero in on individual behavior, i.e. cohort analysis, conversion, and retention at the segment or individual level

Mixpanel — advanced mobile and web analytics that measure actions rather than pageviews

Parse.ly — offers detailed real-time analytics, specifically for publishers

CrazyEgg — measures which parts of the page are getting the most attention using ‘heat mapping’

A/B testing

A/B testing is a marketing strategy that pits two different versions of a website, advert, email, popup, or landing page against each other to see which is most effective.

How To Conduct Efficient A/B Testing

Step 1: Pick one variable to test.

Step 2: Divide your audience equally and randomly when possible.

Step 3: Test versions simultaneously.

Step 4: Give tests time to run.

Step 5: Measure your results.

Step 6: Take action based on results.

The Main Benefits Of A/B Testing

Reduces bounce rates
Helps to increase conversion rates
Improved Content Engagement
Higher Values
Multi-functional

Example — Increase your email clicks by 325% with a sleek design

Microsoft was looking to increase the number of people clicking through on their emails.

Hypothesis: Changing the color scheme would increase click-throughs.

Result: Version A increased click-throughs by 325%.

Version A (White Background, Full Product Image, Purple CTA) — Winner:

Version B (Orange Background, Cropped Product Image, Pink CTA):

Predictive Models

predictive models can be used to evaluate a product without users being present. Rather than user researchers being involved in role-playing during inspections, or tracking their behavior using analytics, predictive models use formulas to derive various measures of user performance. Predictive modeling provides estimates of the efficiency of different systems for various kinds of tasks.

Fitts’ Law

One kind of predictive model that has been influential in HCI and interaction design over the years is Fitts’ law.

“The time required to reach a target is based on the distance from the starting point and the size of the target.” Coined by Paul Fitts in the 1950s, the law is applied to the location and size of menus and buttons in software.

Fitts’ law states that:

T = klog2 (D/S +1 .0)

where

T = time to move the pointer to a target

D = distance between the pointer and the target

S = size of the target

k is a constant of approximately 200 ms/bit.

Fitts’ Law Applications

Usually, the cursor automatically stops at the edges of the screen. Put UI elements in the corners of the screen, and they will be easier to click on.

Example:-apple.com (mobile view) — While there’s no cursor on most of the mobile devices, they inherit the same approach from the desktop — hamburger menu in the left corner and bag icon in the right corner.