New GIFs animate the testing process in UX design

Published:  March 16, 2015

San Francisco web firm Froont has created a set of animated GIFs that demonstrate the four main types of UX testing, in a bid to highlight digital design’s facility to be tested and measured. The four GIFs — each showing a manageable testing technique to aid the creation of high-performing design — follow from Froont’s previous GIF collection of nine basic principles of web design.


A/B Testing

A/B testing or split testing is the concept of splitting all your traffic into two equal parts where one part sees design version A, and the other sees design version B. A/B testing can be used at any stage, and usually bigger websites run several tests simultaneously.


Heatmaps and Clickmaps

Where A/B testing shows if one design is more effective than another, heatmaps and clickmaps show where users are looking. They reveal what specific elements of a page the user is focusing on, and where the user is clicking — helping improve conversions and link placement. Scrollmaps come into play here too, testing how far users scroll, and what they’re actually reading.


User Testing

As simple as watching how a user interacts with your page or product in real life to see where the snags and roadblocks are, and making the appropriate adjustments. Froont recommends recording the session too using a tool like ScreenFlow, which records the screen and also the expression and voice of the user.



The final GIF in Froont’s set considers the simple technique of a design questionnaire. Less useful however for strategical decisions, surveys are valuable for confirming a hypothesis or determining the feelings of your users. Consider the questions in relation to audience size: the bigger the audience and more precise the questions, the smaller the chance to be biased by your own assumptions.

Froont: Open Design Blog

Leave a Reply

Your email address will not be published. Required fields are marked *