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...

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>