Remote Usability Testing on a Mobile Prototype

Smart phone

Usability testing on a mobile device has become vital as the number of mobile users trend higher each year. When UX researchers conduct a usability test on a mobile interface, the best approach is to sit down with and observe users interact with device in-hand. Sometimes researchers are brought in at the beginning stages of design (a perfect time to test the design). When testing in these early stages, researchers get feedback by showing users a paper prototype or screenshots of the interface. Another powerful method is to observe users interact with a mobile prototype that displays on user’s desktop/laptop monitor.

 

A Convenient Approach

One convenient approach for testing at the beginning stages of design is for researchers to show a prototype of the interface remotely through a desktop computer using services such as Invision. This approach provides an adequate interative experience for getting feedback on significant design issues, and provides the convenience of recruiting and testing remotely.

The Hand

pointer hand

Although I have seen the benefits of this approach many times, there is one thing that drives me crazy; “The Hand”! What is it? It is the hand that appears over elements of the interface that are interactive. This is especially troublesome because the interface on mobile devices don’t provide cues to users. Furthermore, participants may start looking for the hand to guide them through their task rather than clicking on elements naturally.

A Solution

To prevent “The Hand”, I have provided code that allows researchers to present screen shots of an interface within the context of a smart phone, wherein the hand does not appear when the pointer moves across interactive elements. Although this is not ideal for a real mobile experience with touches and gestures, it allows researchers to evaluate the fundamental design.

Preview it here (note: the services icon and back button are the only interactive elements)

Instructions

  1. Copy the code below
  2. Past it into your HTML file
  3. Change the image source within the ‘<div id=”display”></div’ (see pink text below) to your interface image
    • .png and .jpg should work fine
    • Make sure the image is 320 pixels wide
    • Add 400 pixels to the end length of the original image; don’t stretch the image just extend the length past the image.
  4. Create an individual page for every interface you will test
  5. Link the pages together by creating hot spots on the elements you want interactive. For example, the link to the ‘Services’ page, on the preview prototype above, links to the service page (i.e., <area shape=”rect” coords=”104,328,209,529″ href=”Services.html” style=”cursor:default”>)

The Code

The code is simple.

 

<html>
<head>
 <title>Mobile Phone</title>
 <style type="text/css">
 body {
 margin: 0;
 }
 #wrapper {
 margin: 0 auto;
}
 #phone {
 width: 400px;
 margin: 0 auto;
 font-size:0;
}
 #top {
 position:fixed;
 }
 #left {
 float:left;
 padding-top: 268px;
 position:fixed;
}
 #display {
 float: left;
 padding-top: 268px;
 padding-left: 28px;
 z-index:1000;
 }
 #right {
 float:left;
 padding-top: 268px;
 padding-left: 348px;
 position:fixed;
 z-index:-1;
}
 #bottom {
 position: fixed;
 margin-top: 727px;
 }
 area, map, img {
 display:block;
 cursor:default;
 }
</style>
 </head>
 <body style="background-color: #4B4B4B; padding-top: 0px;">
<div id="wrapper">
 <div id="phone">
 <div id="top"><img src="https://www.uxsci.com/wp-content/uploads/2015/02/top.fw_.png" alt="" width="380" height="272"></div>
 <div id="left"><img src="https://www.uxsci.com/wp-content/uploads/2015/02/left.fw_.png" alt="" width="32" height="459"></div>
 <div id="display"><img src="https://www.uxsci.com/wp-content/uploads/2015/02/HomePage1.png" alt="" width="320" height="2466" usemap="#Map2">
 <map name="Map2">
 <area shape="rect" coords="104,328,209,529" href="Services.html" style="cursor:default">
 </map>
 </div><!-- This is the div you will use to place your mockup -->
 <div id="right"><img src="https://www.uxsci.com/wp-content/uploads/2015/02/right.fw_.png" width="32" height="459" alt=""></div>
 <div class="link" id="bottom"><img src="https://www.uxsci.com/wp-content/uploads/2015/02/bottom.fw_.png" alt="" width="380" height="1629" usemap="#Map">
 <map name="Map">
 <area shape="rect" coords="35,3,74,42" href="javascript:history.go(-1);">
 </map>
 </div>
</div>
</div>
</body>
</html>