Using Real Data in Mockups
Us user researchers love to say, “test often, test always.” It’s rarely “too early” to test a design, whether it be scribbled on a napkin or a clickable mockup. If you’re ever looking to test an early stage mockup, we’ve seen huge success with including your users’ real data in the mockup. This gives you the opportunity to not only test something without having it built out and still make it easy on the user to complete the usability study.
What counts as real data?
Anything that makes the mockup relevant to the user is real data. It can be as simple as their usernames and icons, or real data you can gather from their current account in your product. For example take Hootsuite, Buffer, or any other freemium social media tool. If you’re testing a new social publishing flow, you should know your users’ handles for Twitter, Facebook and LinkedIn, and incorporate them into your mockups. If you don’t, start Googling. That information is readily available, and just waiting to be integrated into your mockups. Then, once a user sees the mockup, they won’t be thrown off trying to make sense of what they’re seeing. Instead of using dummy content like Lorem Ipsum or “This is a tweet. Link here,”, find some tweets that the user has sent out recently. They will understand the context better seeing the icon to their Twitter account instead of a fake one or blank avatar. If you’re looking at analytics or someone’s profile, find that information to make it at realistic as possible for the user. This gives you the opportunity to test earlier and more often, without having to ship something.
Do I even have time for this?
Yes. A million yesses. One round of user testing (4 tests, let’s say) with mockups that contain real data will replace multiple rounds of testing with dummy content. From a user researcher’s perspective, it makes the job easier when needing to guide a user through the tasks we want them to complete in the test. We used to use HubSpot’s data in the mockups, and the users had a difficult time not starting each statement with “Well, if I was HubSpot …” which didn’t keep them as focused on thinking about the task realistically. If it’s their own data, they’re not thinking too hard about what they’d do if they were someone else, and are completing tasks in their own element.
For the design perspective, I’ve asked a few of my colleagues and connections to chime in.
Amy Guan, a product designer at HubSpot, is a firm believer in including real data in mockups. Once we recruit users for the testing, we send their information her way and she customizes a version of her design for each and every tester. I asked Amy about how this impacted her process and she explained…
“On average, I would say it takes about 20–40 minutes depending on the complexity of the mockups. For instance, we were recently testing a publishing calendar using real data that required finding the individual’s scheduled pieces of content and adding it to the mockup. Some people would only have 2 scheduled items while others had content for every day! Other times, it’s as simple as putting their logo and a screenshot of a landing page they published. Both scenarios, regardless of complexity, truly helps put the user in a more relaxed state of mind for the test — ‘Ok, this is my content. I know what it is and all I need to do is analyze how it’s being used.’”
I also asked Amy to elaborate about how using real data affects her design process…
“I consider real data as the final step before user testing. I typically create mockups using data that I make up (think lots of Lorem Ipsum and pictures of puppies) and use those mockups as the initial discussion piece when chatting with my team. It keeps the project fun for me and really speeds up the iterating process when I’m not referring back to real data to make sure I’m not fudging any information up. Once we get to the point of user testing, I then go back and replace the fake data with real data from the users. I find this to be faster because we’ll typically have at least 3 users scheduled, allowing me to just quickly run through the mocks consecutively pressing copy and paste.”
Amy was kind enough to send an example our way. These mockups are from a test about a new way to edit content in HubSpot. At first, users had issues with the first version and understanding the “secondary content” section. The second mockup includes more content that a user would be familiar with, and then they understood the “secondary content” section.
Example 1 — A mockup with dummy data
Example 2 — A mockup with real data
Joshua Porter, UX designer and founder of What to Wear, finds using real data one of the more valuable things you can do when testing mockups.
“Real data is important to use because it is the primary reason why someone decides to use a given piece of software…they’re not there because they like the UI.”
Real data makes everything better.
Really. We mean it. Your mockups, your testing, your iterations. It all becomes a little clearer once you test your mockups that include your users’ data. You’ll get more actionable takeaways from testing because you won’t be digging through the “if” and “maybe” statements from your users. You can get more concrete data and move on to the next iteration with ease.
How do you incorporate your users’ data into testing?
