Responsive Web Design – Paper Prototyping and Guerilla User Testing

There is nothing we love more at Usability Matters than hands on learning!  For this third post in our Responsive Web Design (RWD) Series we checked out the Toronto Mobile UX meetup group’s RWD workshop. This workshop focused on paper prototyping and guerrilla user testing of responsive design. We were excited to see if there were some new approaches and learnings we could adapt into our processes.

Overview

The evening kicked off with the requisite mingling and snacks, meeting fellow tech junkies and swapping responsive war stories. There was a good mix in the room, from dev and design to project management and marketing. Everyone agreed that responsive is a popular approach, with clients eager to learn more and develop responsive projects. A brief presentation from Maggie Adhmai of Plastic Mobile gave us an overview of the evolution of mobile. Some interesting points came up.

Key Learnings

  • The difference between Adaptive and Responsive design – let’s demystify it right here! Most projects are a mix of responsive and adaptive approaches to varying degrees.
  • Responsive Design means that the content stays exactly the same across devices/breakpoints but it responds and rearranges to suit the viewing environment.
  • Adaptive Design means that content may be removed or added to set a predetermined set of screen sizes or devices.
  • The idea of a desktop has really changed with the advent of devices like tablets, slimline laptops like MacBook Air and Google Chromebook Pixel. This reminded me of the idea of ‘desknots‘, a suggested term for all of our connected devices which are not statically located. We often use the word mobile for this, but this can get confusing as it has typically referred to smart phones. Most computing is now mobile, as the percentage of stationary desktop setups is decreasing.
  • Mike Riegel, a vice president at IBM has said that “Mobile is the primary way that people interact now with computing.”
  • According to Greg Simpson, GE’s chief technology office, the company uses 36,000 iPhones and 12,000 iPads to reduce reliance on laptops.

 

Paper Prototyping

The workshop then moved into a paper prototyping exercise, led by Andrew Corway. Paper prototyping is a great way for designers to test their ideas in a low cost, low risk manner, before anyone even opens Photoshop or a text editor. There are a myriad of  great tools out there to help streamline the process too, from UX Pin’s Prototyping Notepads to Zurb’s responsive sketch sheets, and one we are super excited about having backed on Kickstarter – an iPhone 5 rubber stamp called UINK.it. There are even great apps to simulate interaction using your sketches such as a personal favourite; Prototype on Paper. Paper prototyping is a great way to quickly catch mistakes or pain points very early on in the process, and to help with that there is no better critic than the user.

Guerilla User Testing

Once we had created some sketches of our designs, a designated note taker brought them to other participants for some very informal think aloud user testing. Getting immediate feedback from users in this way, by showing them a sketch and listening to their thoughts as they interpret it can really provide immense amounts of insight. It can be challenging for people to understand states or interactivity as a sketch is a static piece. An approach to combat this is to sketch a series or flow of screens that describe what appears when something is tapped on/clicked. You can then present the user with a task and present them with a series of sketches.

Thanks to Toronto MUX for hosting the workshop. We have always been a huge fan of paper prototyping as an approach, and combined with some guerrilla user testing, this low cost method can bring immense value to your process, responsive and otherwise!