Usability testing with web prototypes: an overview



This article is intended for technology professionals new to usability testing programmes and prototyping.

In the broadest terms, usability testing seeks to place proposed elements of a user experience in front of participants in order to:

  1. Measure and evaluate a particular aspect or collection of aspects of use;
  2. Discover new, sometimes unforeseen issues, problems or requirements;
  3. Limit and manage project risks and resources.

Usability testing versus other types of testing

Usability testing should be strongly distinguished from, for example, user acceptance testing or systems testing, both of which have very different and terms of reference and outcomes. The temptation to mix these processes out of a sense of convenience or perceived harmony should be scrupulously avoided.

Usability testing does not concern itself with defects, bugs or performance any more than how these might damage or otherwise affect the quality of the user experience.

Nor do usability testing programmes follow on from the development process.  Testing should normally be conducted prior to development, since that is when issues should be recognised and risk can be limited, all at the least risk and cost to resources.

The role of test participants

It is common to find a range of different testing methods employed in a usability testing programme. These can be roughly divided into learning or practice methods, in which testers gather information from participants either by discussion or by interaction with user experience objects such as interface or device prototypes.

The participant him-/herself is not the object of the exercise. Useful results are rarely achieved without the participant being completely aware of this fact.

Indeed substituting the word customer for the word user in the classic adage the customer is always right explains the principle precisely. A problem experienced by the participant as a result of his/her user experience almost always translates to a trend of improvement. In this way, problems should be fully recorded rather than explained away!

Dependencies for effective usability testing

The character and effectiveness of a usability testing programme depends squarely on the circumstances of the project into which it is introduced but also on the quality of the variables involved. These variables typically include:

  1. Partiality or prior conditioning of participants;
  2. Depth and incremental frequency of testing work packages;
  3. Analysis and result handling in the project governance.

Key test components

Usability testing usually involves or may even generate certain components, each of which are important to the success of the overall programme.


Test designers should identify objectives for the test based on what they consider to be the most important issues to be addressed. Examples might be the flow of navigation or the perception of a particular task.

The measure of innovation within a proposed concept can also influence the objectives of the test programme, especially if the concept seeks to establish some kind of novel user experience pattern.

Any testing programme absolutely requires defined objectives, without which it is otherwise difficult to define the other test components.


The scenario consists of preparatory information about the role of the participant and the purpose of the test, together with any other relevant information such as expectations or task descriptions. A simple example might be:

Story so far

You are a university student and you’re planning your next academic year. You are required to enrol online for two extra-faculty modules in the Spring Semester.

Your task

Use the module booking facility to enrol for the two modules “PH101 – Introduction to Philosophy” and “PO102 – Political History Since 1945″ in the faculties of Philosophy and Political Studies respectively.

Web prototypes

For the purposes of this article, a web prototype consists of one of the following:

  1. A single or collection of paper sheets containing representations of interface elements which, taken together, form the illustrative basis of a use case (the ‘paper prototype’);
  2. A single or collection of screen-based views presented in a browser which again, taken together, satisfy the flow of a use case (the ‘screen prototype’).

In a paper prototype test, the test subject interacts with the paper sheets, progressing through a pre-defined use case. In the latter example, the same occurs onscreen with the usual methods of interaction peculiar to that medium.

The value of prototypes

Prototypes are cheap to create and easy to manage. Success criteria can be measured without great expenditure of resources.

Just as in industrial design, prototypes enable designers to mock-up and user experience professionals to try out a concept, object, or process before major investment in design or development.

Furthermore, since the prototype is simplified to its basic elements, the test process better targets basic objectives without distracting participants with other, specious concerns.

Paper prototypes

A paper prototype is produced with every iteration of a rapid iterative design process. The prototype represents the elements of a user interface drawn to the minimum of detail required to communicate  patterns or concepts clearly to the target audience.

The participant is invited to navigate a paper prototype as they might onscreen. Instead of a mouse pointer, the participant interacts with a pencil.  Interactions are managed using additional paper elements, new pages are replicated by new sheets of paper.

The prototype will be hand- or computer-drawn and should not normally include any rich graphical objects . The purpose of this approach is to remove any subjective notions or judgements about the prototype, thereby avoiding any confusion accidental or otherwise between purely visual design and usability.

Care must also be taken to ensure visual consistency. This is particularly important when using paper sheets that were originally computer-drawn and then printed.

Similarly, even though some representations do not lend themselves to the dimensions of a single page, all sheets must nevertheless retain the same scale and that might mean joining pieces of paper together.

Screen prototypes

Just as with the paper version, the screen-based prototype must maintain consistency and avoid any superfluous graphical detail.

The interaction between the user and the interface should try to maintain fidelity to the experience of the medium. In a web browser, this translates to the requirement that browser functionality including scrollbars and software-level navigation should always be retained.

An example of a screen-based prototype is shown below:

Screen prototype example

Choosing between paper and screen prototypes

Which type is appropriate for a test programme depends first and foremost on the resources and processes available to the project.

Though consistency and fidelity to a real user experience is usually easier to maintain with screen prototypes, they can be more difficult to maintain than paper prototypes throughout a rapid iterative design process.



What Makes A Product Cool?

What Makes A Product Cool?

The controversy surrounding the coolness of Google’s Glass in the last three days has raised anew an old marketing question: What makes a product cool?

Product coolness is determined by three product attributes, and an efficient and effective WOM and buzz campaign that helps the product reach the mass market quickly:

1. Value

Cool products fill a genuine consumer need.  Apple’s products, for instance, fill the consumer need for mobile communications, computing, music, and distinction. Nike offers consumers top quality shoes, apparel, and accessories. Starbucks offers consumers a “third place,” away from home, where they can enjoy a cup of coffee and socialize. Red Bull offers drinks that give consumers fast energy.

2. Innovativeness

Cool products seduce consumer fantasy and imagination by delivering better value than conventional products, and address emerging trends; they are simple and easy to use. Google’s glasses, for instance, allow consumers to use Internet search in ways once seen in futuristic movies.

3. Appeal

Cool products must appeal to the right group, the early targets of the marketing campaign.  Google’s and Apple’s products usually target the two groups that are most sensitive to WOM and buzz campaigns, the “pioneers.” That means the young, restless and curious, consumers enchanted with the new and the exotic; and the “early adopters;” and consumers who are always on the lookout for products that will improve their personal and business lives—a larger group than the pioneers, the bridge to reach to an even larger group, the “early majority.”

Product appeal is usually supported and reinforced by a marketing campaign that should have a message which conveys the product attributes to the target groups.  The message should be clear, credible, transparent, direct, and sticky — using characters and stories familiar to consumers.

The message should be launched in the right context, the “conditions and circumstances,” the place and time the message is launched. And it should enlist the “agents of influence” i.e., consumers who are more effective in influencing others or be influenced, by others, and therefore spread the product message, by telling their neighbors, their friends, their co-workers and fellow club-members.

The marketing campaign should add emotion and hype to the controversy surrounding the product to speed up the spread and the diffusion of the message to a critical mass of consumers.

Measuring Coolness

Coolness isn’t something tangible. It’s not something you can measure in the same way that you can count screen size or memory capacity. It’s more powerful than that. It can come from a design that speaks to the market and turns buyers into members of an elite club (in the iPod’s case, a club of devoted music fans). That can happen even if the club is enormous, non-selective and open to anyone willing to open their wallets wide enough.

It can come from being sharp enough to change your industry even when you’re so small the industry has barely noticed you. That’s a coolness connected to your competence – the fairest kind – but it’s also a coolness that can disappear once you become established.

And it can also come from careful marketing. That’s the hardest kind of coolness to create and maintain. In fact, one of the things that makes Apple so cool is its ability to still be cool despite being a big company that produces proprietary software, distributes copy-protected content and runs a capricious monopoly over the applications created by independent developers.

It is possible then to create coolness, but you have to be cool enough to know how to do it.

The bottom line: What distinguishes cool products and sets them apart from uncool products are value, innovativeness, and appeal; and a WOM and buzz and campaign that enlists the “agents of influence” to spread the right message to the right consumers, in the right place and time.


The Relationship Between Usability And User Experience

Usability is a narrower concept than user experience since it only focuses on goal achievement when using a web site. By contrast, user experience is a “consequence of the presentation, functionality, system performance, interactive behaviour, and assistive capabilities of the interactive system”. This essentially means that user experience includes aspects such as human factors, design, ergonomics, HCI, accessibility, marketing as well as usability. An alternative way to look at this relationship is by subdividing user experience into utility, usability, desirability and brand experience. This is best illustrated by representing these sub divisions as concentric circles where the innermost circle is the most basic aspect of user experience as shown in the diagram below



Accessibility vs Usability

Web Accessibility Should Not Restrict Web Usability

“[Usability] is the practice of designing Websites so visitors can do what they wish without undue impediment. (Some impediments are necessary, like typing in personal identification numbers to look at your bank statement. Other impediments, like indulgent Flash intros, are rather quite unnecessary.) You can see a clear kinship between usability and accessibility, given that we are trying to lessen the effects of the impediment of disability…But we should not expect a one-to-one relationship. Usable sites can be inaccessible. Conversely, accessible sites can be unusable.


If some years ago making a website was a job even for those who were extremely young, nowadays the field of web design has turned into a real industry, where it is harder and harder to fight against web design companies or agencies that have already developed a strong presence.

The creation of a website starts with a good layout, usually a .psd file and then it is sliced into HTML and CSS. Regarded as unnecessary (still) some website owners hire a content writer to create the text of the online presence and a SEO specialist that has as the main purpose to obtain a higher position in the search of the engines. It’s true that a website may be done by a single person, but the entire process has become more sophisticated, therefore very few manage to be successful by themselves.

A respectable website should pass the minimum requirements of two new features: the accessibility and usability, both of them very important and somehow having many common elements. Having an accessible and usable website will become a legal requirement sooner or later, no one should ignore that the Internet is a free medium and this feature must be kept until the end of the world. To implement these features isn’t rocket science but clearly, a complete background is necessary in order to do it professionally. The first step in making a website accessible and usable is to make a distinction between the twin terms, usability and accessibility.



This term describes the attribute of any product to be easy to use by any person. It could be extended to the modalities and strategies based in the creation process. A celebrity example of web usability is Jakob Nielsen who established a group of qualities that are capital in having a more usable website. In spite of perpetual endeavors to make a website completely useful, it will never be perfectly usable.

If someone starts making website usable, then he must have clear answers to these issues:


It defines the ability of an individual that, once he is familiarized with a product, to realize its specific actions.


Example: let’s suppose that someone has modified the possibility of achieving online the products from an online store. It improved the usability only if the clients have quickly understood the new algorithms, it’s about the efficiency of the new look.

A less efficient method is simply a disaster, and it certainly isn’t a more usable website.


It is about how fast the users understand and learn the features of a website.


Example: a designer creates a new type of contact form but if the users don’t know how to use it, the work is in vain.


It describes the ability of a user to perform the same actions on a website after a long time of pause.

Example: by inserting a new plug in, the dashboard of a blog looks really good and the writing &publishing are done more quickly. Also, let’s suppose that the blogger is active but he must take a pause for a month. If at his comeback he has no problem with the new improvement then is it okay from the memorability viewpoint.


Not the last, a user must be satisfied with a product.

Example: no matter how efficient a new concept is but in case that the users aren’t satisfied with how it works, then a new concept must be created.

Making a usable website requires a lot of work but at the same time you will require the feedback of as many as possible testers. Usability is a complete chain of improvements and feedback that has as result a more comfortable navigation of the visitors, hence it’s about traffic, that means money.



Accessibility is the term that refers to the modalities, strategies, and methods to realize websites that may be well used by any kind of people, no matter by which type of permanent or temporary disability they have.

Apparently, a trifle, having an accessible website is an advantage for everyone, both owner and user: the first one is sure that there is no setback for the visitors and the last one doesn’t face any problem when visiting. Besides that, everyone has the moral duty not to offend people with disabilities, any small issue for us, the lucky people with full gifts from God, may be a serious and embarrassing matter for others.

In order to make a website more accessible, specialists have divided in two components the types of disabilities:

  • The disabilities of the human factor as: eye seeing issues (having a large variety, from small problems to full blindness, a special category being the ones that have difficulties distinguishing some colors), hearing matters or the impossibility of using a mouse or even a keyboard.
  • The disabilities due to the technological factor as: the use of mobile devices, a slow connection to Internet or disable of the JavaScript.

The making of an accessible website is based on all these entities and applying measures to solve them is the correct modality. A precious help in validating the accessibility of a website are the various online tools that test the website and are highlighting the errors, some of them are free while for the services of others a small payment is required.

In the end, the conclusion is that usability is mostly about the methods of making the navigation more facile while accessibility is about making the navigation possible for everyone. Very pragmatically, but not scientifically at all, the difference is simple: a usable website is “user-friendly” while an accessible website is “all users-friendly”.

  1. Link: