UserTesting conflict

#1

We use usertesting.com to do usability testing, and I used an Antetype prototype for the first time with it today. Users experienced a problem where the Chrome extension they use to do the tests is hidden by the prototype. My transcript with UT support suggests maybe Antetype is stacking screens or something, covering up the widget? Hopefully they fix it on their end, but maybe you all want to test it as well to see if there’s a quick fix. This really impedes my ability to use Antetype for prototyping. Here are a couple videos showing the problem: https://www.dropbox.com/s/cbzu8pi6lokpojw/UT.zip?dl=0

(12:48:16 AM) Ben Dansby: We ran some tests today with a prototype, and all 3 users experienced the UT widget disappearing while they were doing tasks. Can you help me figure out what is going on?
(12:48:21 AM) *** Beth joined the chat ***
(12:48:23 AM) Beth: HI
(12:48:36 AM) Beth: Oh no I’m sorry for the inconvenience
(12:48:41 AM) Beth: what study is this on?
(12:48:56 AM) Ben Dansby: Standards 1 and Standards 2
(12:49:04 AM) Beth: I’ll take a look
(12:49:05 AM) Beth: One moment please!
(12:49:14 AM) Ben Dansby: Thank you
(12:55:25 AM) Beth: Is your “browse & assign” webpage have an overlay once someone clicks on the “standards & tests” or other buttons?
(12:56:53 AM) Ben Dansby: Not to my knowledge, but I’m using a new prototyping app, so it’s possible that’s what it’s doing in the background?
(12:58:12 AM) Ben Dansby: I didn’t realize UT was affected by what’s on the web page
(12:58:33 AM) Beth: yes, I think it may be an overlay issue. I’m going to let the engineering team know about this bug. In the meantime, you can make it any browser other than chrome, and so people will use our other recorder. It won’t capture the “enhanced metrics” (clickpaths) but it will work :slight_smile:

#2

Here is the prototype in question in case that’s relevant: https://noredink-product.s3.us-west-2.amazonaws.com/design-prototypes/NF%20Standards%207%20Web%20Viewer/viewer.html

#3

Ok, I guess I know what goes wrong here. If Antetype changes a screen, we replace the whole <body> of the HTML-page. (in the first video after clicking “Standard Tests”).

As a workaround: using the index.html should work, since the prototype itself runs inside an iframe and should not interfere with user-testing-controls. Since we have to get rid of the the toolbar, you can use the following script as the first script-action on the “load screen”-event of the first screen:

// hide the toolbar on load: 

if (!window.alreadyLoaded) {
	window.parent.postMessage({command: "toggleToolbar"}, "*");
	window.alreadyLoaded = true; 
}

without-toolbar.atype.zip (200.5 KB)

#4

this triggers a bug with wrong screen-height after hiding the the toolbar, I try to find a better workaround …

#5

ok, I think I found a better way. In this zip-file Archive.zip (4.1 KB) you find two files:
viewer.css and webviewer.js.

To use those,

  • Export the WebViewer as usual
  • Replace the viewer.css and webviewer.js.-files inside the static-folder with the versions above:
    image
    image1983×2048 383 KB
  • use the index.html instead of viewer.html in the URL of the prototype

Now the prototype runs inside an iframe (but without a toolbar) and should not interfere with the user-testing-controls.

Hope this helps. But we have to find a better way for this problem.

Cheers,

felix

#6

Thanks, Felix! I really appreciate it.