Test before you spend: simple early stage user testing Design

Test before you spend: simple early stage user testing

An astonishing design, wide content, and innovative interactive elements might be of no use if not focused on the future user. The actual users foreknowledge, needs, and interests must be met to offer both a satisfying source of information and positive user experience. This sounds complicated, but really, user centred design is just a matter of the right approach. The key is to start user testing early…

Figure 1 - Three phases of an iterative design process (Who? What? How?)

How early is early?

User testing should be done as early as possible. In this post we’ll divide the design process in three different phases: who?, what?, and how?. The first phase is all about the who: Who are your users? In the second phase you’ll focus on what: What kind of information are your users interested in? Only in the last phase you can start focusing on the how: How should you present your information and activate your users?

Phase 1 – Who?

“Of course we know who our target group is – they are our customers, they are in average 30 year old male who like our products.” Identifying and if necessary segmenting your target group is an essential step towards a successful website. The average age and the fact customers have a general interest in your product are certainly a good starting point, but you will need to know more than that for a good user centred design. Personas help you to ‘get to know’ your target group and make it easier to actually focus your website on them. Read more about personas on the usability engineering website or at usability.gov.

Phase 2 – What?

Once you have defined your users, you can set up concrete use cases. This will help you to understand the motivation and goals your users have when visiting your website. Based on this valuable insight, you can accurately define the content for your site. Card sorting is a very helpful technique to test and evaluate the content structure for your website. It helps you to understand how your users group items and which terminology they are likely to understand. There are several online tools that help you with your own card sorting, such as WebSort, Userzoom, and OptimalSort.

Phase 3 – How?

Eventually, after you know your target group and have defined your content, it is time to start with your layout. For a better overview, we divided the layout process into three stages: the draft stage, the design stage, and the implementation stage. You can easily embed simple user tests at the end of each of these stages.

Draft

In the draft stage, you come up with the basic layout for your website. Online tools like Creately and Gliffy offer convenient ways to create wireframes and capture your first ideas. Or just grab a pen and paper and start sketching. Glue your sketches together to build a first prototype.  Make sure you are on the right track and test your wireframes & early prototypes before focusing on the details. Any problems that are detected as early as in this stage can be adapted easily.

Figure 2 - Wireframe (left) and sketch (right) of our Clients page

Design

In the design stage, your ideas become more concrete and you can create your first mockups. In this phase you can already create interactive demos to represent the basic functions of a live website. At the design stage, you can already test your design and make sure your users like the appearence, pay attention to the right elements, or for example enter the site the way you want them to. Any problems that are encountered at this stage can still easily be changed. Be prepared to test several times before you are confident to build the actual website.

Figure 3 - Photoshop mockup of our Clients page

Implementation

In the implementation stage you implement your concepts and ideas and build the real website. If you have tested carefully throughout the conceptual phases two and three, you should not detect any major issues anymore at this stage. The goal of user testing at this stage is to gain confidence to actually go online with your website. Any substantial changes that need to be made at this stage might be more difficult and expensive to implement.

Figure 4 - Final Clients page

Advantages of testing early

There are several advantages that result from early user testing. Certainly the biggest advantage of early user testing is that changes are easily adapted to a sketch or a Photoshop mockup. Simple sketches, paper prototypes, or anything that can be digitalized (scanned or photographed) can easily be tested. Besides, costs of implementing changes are considerably low when compared to changes to a live website. Besides the technical and financial aspects, there is also a big psychological aspect to adapting changes at an early stage. A sketch is easily thrown away, while it might be difficult to admit that a pretty design does not work. Last but not least, it is easier to focus on the structure and content, if there is not yet a ‘distracting’ design.

Want to put your users in the very center of your design process? Take a look at our demo cases and find how you can quickly iterate based on early stage user tests.