← Fell Swoop Blog

Responsive Prototyping for Usability Testing

We recently designed an HTML5 web app for an e-commerce company. The product is targeted towards iPad users and we wanted to create an immersive, fun environment that felt more like an app than a traditional e-commerce website. The solution for this particular project involved a responsive design so we could target different tablet resolutions and still allow desktop users to experience the fun.

We’re pretty big fans of Axure here at Fell Swoop and it happens to be our go-to tool for prototyping these days. So during the design process for this project we created wireframes like we usually do in Axure, but when we focused on building a prototype to test on the iPad we ran into several problems:

  • Fixed position elements are a critical part of the design and Axure’s support for this on iOS is still a bit buggy.
  • The way Axure handles scrolling and swipe events was cumbersome and didn’t represent what the performance would be like in the finished product.
  • Finally, our biggest issue with Axure was it’s lack of proper support for responsive design. We would have had to build multiple prototypes to evaluate portrait vs. landscape orientation on an iPad for example.

It’s certainly possible that we could have worked around these problems in Axure, but deadlines were quickly approaching. We had a desire to build a prototype that reflected the performance of the final product and we knew HTML was the only way to get there, so we shifted gears.

To get started quickly we decided to build off an existing framework. We picked Twitter’s Bootstrap because it had support for many of the UI features we needed and we knew its responsive grid would suit our needs. Working with frameworks of any type has its tradeoffs — and there were definitely several times where we were banging our heads against Bootstrap’s default design.

That said, the responsive grid and interactivity via css and data attributes were a huge win for us. With Bootstrap we were able to complete a fairly complex, responsive prototype of a multi-layered e-commerce app in just a couple of days. The project is still underway, but we’ll talk about several technical aspects of building a responsive prototype in a future post after it’s launched.

1 Comment

  • Mehmetcan says:

    I don’t think comfort with condig HTML (and other technologies) has much bearing on this personally. I am quite comfortable with it as I started more technically oriented in the mid ’90s and learned visual and interaction design as I went along since them.I can code HTML and CSS very quickly but, for me, the advantages of prototyping tools like Axure is increased speed and the need to put a reasonable facsimile of the real interactivity or flow in front of a client sooner rather than later to nail down expectations. I now use Axure for that as it enables me to create much more complex interactivity and user flows than Fireworks ever could. Fireworks has been my main visual Web design tool (for final graphics and layout but not code) for over 10 years while Axure is a recent addition.Starting out on paper is indeed a good idea no matter the software tools one uses