Annotations on Mobile Screens


I work everyday on my computer, so giving feedback on web browsers or computer applications is easy. Mobile is a bit more tricky, but in today’s world, SUPER important.

Tools


Telecine
Telecine is a free application that enables us to record a video android screens. I’ll be looking into iphone apps that are comparable.

SnagIt
My FAVORITE tool for giving feedback on screens (and a million other things) is TechSmith’s SnagIt. I was a bit reluctant at my last company to pay for it – it costs about $50 for a license – but the time it has saved me has been enormous.

Some sort of messenger
Some way to send a message from your phone to your computer. I have Slack installed on both my phone and my computer, so I can send myself a message. Emailing yourself also works!

Viewing your project on Mobile.
Talk to your dev team about the best way to view a project on mobile. The devs might have set up a version of the website on a test server that you can access using a password. In the past, I’ve had success using HockeyApp to test mobile apps. If something is still in the design stage, your designers may share a prototype with you using services like Marvel or Invision.

Simple Stuff: Screen Shots on Mobile


Most smart phones have a screen-shot function by default. Do a quick google search for “how to take a screen shot on (phone model).” I’m using a Nexus 5 right now, so I can take a screen shot by holding the power button and decrease volume button at the same time, but it varies per phone.

  1. Once you have your screen shot, send it to your computer using any method. Slack and Hipchat work great for this, but emailing yourself works fine too.
  2. Open the screen on your computer and…
  3. …screen shot it (again) with SnagIt.
  4. Use SnagIt’s “Step” feature to add numbers to the screen shot, this makes it easier to annotate.

Complex Stuff: Create Screen Videos


Since mobile has a smaller screen, mobile websites and apps rely more on movement to organize information. I’ve found it useful to use a free app called Telecine to make simple videos of issues.
To use Telecine,

  1. Start by opening the app.
  2. Make sure that Three Second Countdown and Show Touches are switched on.
    • The countdown gives us a chance to switch to the right app before the recording starts.
    • Showing touches helps the developers see what the user is doing to make the system react in certain ways.
  3. Tap the record button in the bottom corner, then look to the top of the screen where a camera and an X have appeared.
  4. Navigate back to the screen or app that you want to record, and the red redord button. You’ll see the countdown start.
  5. When you’re done with the video, tap on the clock in the top right corner (this is an invisible button that the app adds.
  6. Send the video to your computer by emailing yourself or sending it to yourself over Slack, Hipchat, Google Hangouts, or another messenger app.

Tips for making good videos


Later, we’re write some notes about these videos. Here are a few things I’ve found helpful when making videos:

  1. Walk through what you want to show one time before you start the video.
    • It only takes a second, and it’ll makes our interactions recorded in the video cleaner.
  2. Try to show only 2-3 things in each video.
    • This keeps the file sizes of the videos smaller
    • It makes it easier for the devs to check things off of the to-do lists (because they don’t have to scroll through a 5-minute video just to figure out what they’re talking about). It is better to have multiple short videos than one long video.
  3. Add a little bit of space between each interaction in the video.
    • When we write notes, we’ll note the time in the video for each thing (ex: “At 0:16, note that the Sign In button doesn’t work”). Don’t rush!
  4. For static things that are incorrect, just rub your finger over it.
    • This helps us mark something in the video (since we’re recording touches). In our notes, we’ll be able to mark this with the time (ex: At 0:12, note that the Sign In button is the wrong color, it should…)

Categories: How To