30 minute read

Background

Setting up advanced user tests, be it for design sprints or for whatever design process you use, can be time consuming and costly.

This post outlines a very easy way to satisfy most of your user test needs using mostly hardware you already have! The final result will look something like the following:

obs-final

  • the main panel which takes most of the screen is the browser window/application running the product we were testing. We can track the mouse pointer, what the user does, where they click, etc.
  • the top right panel is the room camera: we use that to check the user’s posture (not for stalking purposes we promise!) and where they look
  • the bottom right panel is the user cam: we use that to check the user’s expression, useful to see when they struggle with something or are uncomfortable

What you’ll need

  • hardware:
    • small meeting room. An out-of-the-way desk might also work, but a room helps to have some privacy and puts the user at ease which is important
    • laptop: we used a MacBook Pro 15” 2014 with 2.8GHz Inter Core i7 and 16GB of RAM, so not the newest, but still a powerful machine. Using a machine with less processing power and/or RAM might limit the stream quality
    • extra camera: we used a Logitech Webcam C930e (costs $180) that we use for remote meetings, but any small camera that can be hung on top of a whiteboard would do
    • extra mic: you could use the built-in mic in your laptop, or the mic in the extra camera, but we found that for soft-spoken people, a directed mic stationed between the user and the interviewer worked best for us; enter the Sony ECM-PCV80U (costs around $35)
    • whiteboard: some of our meeting rooms have paintings that we mounted the extra camera on, but others did not, so we have to improvise and use a whiteboard (the ones that you can move on wheels) instead
  • software:
    • OBS: Open Broadcaster Software is a free software used to record and stream on Windows, Mac or Linux
    • YouTube account with live streaming enabled: check this link for help setting up your account

Setting up YouTube

The first thing to do after setting up YouTube live streaming is to go your live dashboard that should look something like this: youtube-live-dashboard

(1) Stream key

Keep track of your Stream name/key, this will be needed below in the Setting up OBS section.

(2) Privacy

Unless you don’t mind having anyone be able to see your user tests, you should set the privacy to either Unlisted or preferably Private. Unlisted videos will be viewable by anyone who has the URL to your stream, but will not be searchable. This is pretty safe and easier to use than Private. Private videos can only be viewed by the people you specify. To do so, click on Advanced settings (to the right of the Privacy dropdown menu), then go to Basic Info, then click on the Share button. Enter the email addresses separated by a semi-column (i.e jane.doe@gmail.com, taro.namakura@gmail.com), press OK then finally click on the Share button. When the stream goes live, they will all receive an email with the link to view the stream.

(3) Share

If you set the privacy to Unlisted, or if your colleagues did not receive an email with the link, share this URL with anyone you want to view the stream. Note that if the privacy is set to Private, having this URL will NOT work for anyone who wasn’t added to the sharing list!

Setting up OBS

The OBS site has extensive documentation and tutorials to set up your streaming, so please check that out if you have any needs not covered here.

Stream settings

The first step is to specify our streaming service and account. obs-settings-stream

As the screenshot suggests, first set the service to YouTube / YouTube Gaming, then take the Stream name/key we saved above in the Setting up YouTube section and paste it here.

Video settings

We needed to have the cameras to the right-side of the main prototype window, so we changed the canvas dimensions

  • Open OBS settings
  • Open the Video tab
  • Set the dimensions as follows (or to something you prefer) obs-settings-video

Audio settings

  • Open OBS settings
  • Open the Audio tab
  • Set the Mic/Auxiliary Audio Device to the mic you want to use (Built-in Microphone, external mic or just Default) obs-settings-audio

Scene settings

The OBS window should look something like this: obs-window The different sections are:

  1. Preview screen: This is the scene that we will be streaming/recording, and will contain the prototype window and both user cam and room cam
  2. Scenes: In this post, we will only be using one scene for out test, so this section won’t be used. However, if you’re conducting two different tests, you could use a different scene for each test
  3. Sources: Each scene is made up of different parts (prototype window, cameras, etc.), each part is one source (more on this later)
  4. Mixer: Any audio input source we add (including the audio devices added in our Audio settings) shows up here, we can increase/decrease the volume of inputs using the mixer
  5. Stream controls: the buttons here are self-explanatory :)

Prototype window

The first step is to add the window containing the prototype. In this post, we assume that a browser window will contain the prototype in question. Let’s add a new source by clicking on the + button under Sources. obs-sources The relevant options for us are:

  1. Window Capture: this will capture any of the open windows, i.e any open chrome windows, your preferred chat client, command prompt, etc.
    • Rename the source to something easier to remember like Prototype window and press OK
    • In the next prompt, choose the required window from the list of all available ones currently open and press OK again
    • Notice that, in case you choose a browser window, you will see the browser tabs, something you probably want to hide. One easy way to do so, seen in the screenshot below, is to drag the new source up so that the tabs are outside the scene (notice the red border stretches up above the scene). Another method will be briefly outlined a bit below obs-prototype-window
  2. Video Capture Device: a list of all available cameras can be found here
    • Rename the source once more to something easier to remember like User cam and press OK
    • Choose the required camera (internal or external) and press OK
    • Move the source to the required space in the scene which should look something like this obs-user-cam
    • Do the same thing for the Room cam, choosing the other camera

Conclusion

Voila! You are now ready to impress your peers with your advanced testing setup!

One last thing to keep in mind, if you are testing a prototype that outputs sound, you don’t want to pick up the app/prototype’s sound with your external mic.

Luckily, OBS has a solution! If you are using Windows, this is very simple, just open OBS settings -> Audio (like we already did above) and set your Desktop Audio Device to Default. On Mac however, this is more complicated, the following link has all the information you require to get it to work.

Good luck and happy testing!

Leave a Comment

Your email address will not be published. Required fields are marked *

Loading...