HITDesign

HIT Design Considerations

There are various things to consider when designing HITs, in order to make them clear, easy-to-use, and cross-browser compatible. The (Official) Mechanical Turk Blog has various posts critiquing HITs posted to the site, and this page will offer some other accumulated wisdom.

More soon...

Screen Size

Most MTurk workers appear to complete HITs on laptop computers. While there is growing use of tablets and smartphones for the completion of online surveys more generally, it appears that workers continue to use relatively large screen devices. Here's a graph showing screen sizes for a sample of about 600 MTurk workers from November 2015, showing the width and height of their screens. The thickness of the lines indicates the prevalence of the screen size:

If your HIT involves images, PDFs, etc. it may be valuable to consider how workers with different sized devices will be able to see your HIT. Keep in mind that HITs are also displayed to workers inside an HTML iframe, the height of which can be controlled when creating the HIT (e.g., if using an ExternalQuestion-style HIT). It may be appropriate to have content that is dynamically scaled to the worker's device.

Browser Features

One of the most important considerations in designing a HIT is cross-browser and cross-platform functionality. Not all workers will be viewing the HIT in the same browser, using the same operating system, or on the same screen size as the one you used to post and test a HIT.

The following code shows an excerpt of an HTMLQuestion-style HIT that can be used to record various features of a worker's browser and operating system. This code may be useful if you believe work completed on your HIT will be sensitive to these features:

<form name='mturk_form' method='post' id='submitform' action='https://www.mturk.com/mturk/externalSubmit'>
    <input type='hidden' value='' name='assignmentId' id='assignmentId' />
    <input type='hidden' value='' name='browser' id='browser' />
    <input type='hidden' value='' name='engine' id='engine' />
    <input type='hidden' value='' name='platform' id='platform' />
    <input type='hidden' value='' name='language' id='language' />
    <input type='hidden' value='' name='width' id='width' />
    <input type='hidden' value='' name='height' id='height' />
    <input type='hidden' value='' name='resolution' id='resolution' />
    <script>
        function turkGetParam( name ) { 
          var regexS = "[\?&]"+name+"=([^&#]*)"; 
          var regex = new RegExp( regexS ); 
          var tmpURL = fullurl; 
          var results = regex.exec( tmpURL ); 
          if( results == null ) { 
            return ""; 
          } else { 
            return results[1];    
          } 
        }

        var fullurl = window.location.href;
        var assign = turkGetParam('assignmentId');
        var hit = turkGetParam('hitId');
        var worker = turkGetParam('workerId');

        if(assign=="ASSIGNMENT_ID_NOT_AVAILABLE")
            {
            document.getElementById("accept").innerHTML = "<p style='font-weight:bold;text-align:center;'>Please accept the HIT!</p><br />";
            }
        else
            {
            document.getElementById('assignmentId').value = assign;
            document.getElementById('browser').value = navigator.userAgent;
            document.getElementById('engine').value = navigator.product;
            document.getElementById('platform').value = navigator.platform;
            document.getElementById('language').value = navigator.language;
            document.getElementById('width').value = screen.width;
            document.getElementById('height').value = screen.height;
            document.getElementById('resolution').value = screen.colorDepth;
            }
    </script>
    <input type="submit" value="Submit">
</form>