Step 7: Usability Testing

Due Tuesday, April 23

You may be familiar with the idea of usability testing from the article I assigned you to read on the 99% blog. Essentially, usability testing is the practice of showing a mockup of your website or app to non-biased potential user and observing how they interact with your design. In the example from the article, these tests revealed that the navigation was not designed in a way that was understandable to the user.

While you do not have all the content of your app completed, and nor do you have an app with actual interactive functionality, you can still perform some basic usability testing of your own. This should give you some insight into whether the layout, navigation and concept of your app is clear to users. There are a couple ways you can execute this test:

Option 1. Using Basic Interactive Features in InDesign and Testing On-Screen 

(bonus points available for using these methods)

1A. If you use only interactive PDF tools InDesign such as rollover buttons and clickable links to content, you can save your app as an interactive PDF file. When viewed in full-screen mode, your user can actually click around on these buttons in Adobe Acrobat.

1B. For the more adventurous, there are flash based animation tools available in InDesign. These tools allow movement triggered by clicks or timing, such as a menu that flies in from the side. You can also use the buttons and hyperlinks available in the option above. When saved as a Flash file (swf) this can be viewed on screen in a browser, allowing the user to interact with it.

Option 2. The Finger Point Method Using Prints

Here’s the old school way of usability testing used for websites at times. Print actual size print-outs of your screens in various stages of use. Starting with the top page, your user can then point with their finger where they want to click or swipe. When they “click”, you provide a corresponding printout for the page view they have “navigated” to.

– – –


STEP 1: Produce your mockup using one of the methods above.

STEP 2: Find at least two “users” to test on. These users should not be classmates and ideally, should not be designers. We are looking for unbiased perspectives here. The less knowledge they know of this project, the better.

STEP 3: Without telling them the concept of your magazine, ask each user to briefly explain what they think the purpose or theme of this publication is.

STEP 4: Ask each user to perform several pre-determined tasks. These tasks should be things they could feasibly do with the content you have available. For example, you might say ask them to navigate to the feature article, or ask they to find a certain article in which they have to deduce what section to go to, or return to the table of contents, etc. Take detailed notes of your observations, paying special attention to their first instincts and errors when trying to navigate your app.

STEP 5: Produce a written and visual report of your findings. You will have one page of your final presentation that overviews this testing. Using screenshots of the pages of your app, digitally draw lines over the top to point out observations and problem areas in your navigation. Your findings will be presented in this infographic-esque format.

– – – – – – –


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: