Considering Prototypes

Although prototypes have been used in other domains for quite a while, their value to the design & development of websites has only recently taken shape, so to speak. Modern websites take a lot of work. Whether the ramifications of their creation are uncovered at the outset—typically with design and development considerations—or in the longterm—how is archived content going to be accessed? is this the best way we could have designed this?—building a prototype allows us to explore natural omissions made during the design process in an efficient, cost–effective way.

So, what is a prototype? Generally, a prototype is rudimentary version of something designed to exhibit both form and function in a realistic way. Think of the miniature models made of skyscrapers. By definition, prototypes aren’t perfect because their purpose is pragmatic; they elicit feedback.

A variety of considerations go into the creation of prototypes: where do they live in the development process? what kind of context(s) do they facilitate? and how do we build them? Despite these vagaries, prototypes yield a variety of benefits to those that put them into practice.

Agile, iterative development

Although the word prototype is often given a negative connotation (usually seen as “throwaway” work), html prototyping is merely a consequence of agile development—a development methodology generally held in high regard.

During my work with an agile consultancy, our clients (mostly startups) came to us with fantastic ideas. The only problem was that these ideas were unproven and would take months (not to mention lots of money) to develop. The question I frequently explored was this: how could I present my clients with their minimum viable products sooner? In other words, how could we collaboratively develop a prototype (or perhaps even a sketch) of their ideas?

Unlike traditional prototypes that are simulated or built with different materials altogether, websites and web applications are different; their prototypes can be developed and deployed with real–world, production–quality technologies such as HTML, CSS, and jQuery.

If a database–backed interaction required a proof of concept, I found myself turning to content management systems such as Drupal, ExpressionEngine, or even WordPress in order to explore the problem space (in addition to considering the database structure that might be required). UX Designer Cennydd Bowles describes some ramifications, both positive and negative, of this approach in his article on agile design.

Regardless of the technique employed, the goal is the same: to obtain a more accurate rendering—and, hence, understanding—of what the final website will look like and how it will function.

So bring on the context

Unlike static wireframes, dynamic prototypes create context. If properly executed, those who engage with them tend to ask questions or make remarks that they simply wouldn’t from considering alternate design deliverables. As a consequence, I personally favor prototypes when it comes to both user testing and user research.

If a prototype doesn’t work the way the team anticipates, it can quickly be discarded and replaced. But before we task ourselves with changing a prototype’s visual or interaction design, we do well to give consideration to other factors related to the experience we’re creating. In Paula Wellings’s article Beyond Prototype Fidelity…, Paula explains how a number of related factors affect prototypes—not just the fidelity of the prototype itself, but elements such as environmental and social fidelity. She goes on:

Similar to how prototype fidelity can be dialed up or down to give the project the direction it needs to move forward, social and environmental fidelity can also be used strategically.

For example, at one stage in a project for a new mobile service, it might benefit the project to focus primarily on the role of the environment on the design.

  • Social fidelity [low]: low focus on friends, family, mobile calls
  • Environmental fidelity [high]: spend the day with a research participant, going where ever they usually go, or follow the typical route without participant
  • Prototype | Intervention fidelity [low]: mobile device with a screen that is a stack of post-it notes, interfaces flipped or drawn at appropriate times.

Spending a day in the field doing this sort of design work can illuminate environmental factors that can only be imagined from the office.

Paula Wellings

In other words, we must ensure that our prototypes aren’t myopic. Although killer design does compel users, that design could prove useless if it’s going to be accessed on mobile devices. Informing design means we must inform our prototype’s context.

Construction

Prototypes should be, above all, quick and painless to create. So, just because HTML might be the easiest way for digital designers or developers to create rudimentary solutions doesn’t mean it works that way for our clients. Sarah Nelson, principal of User Experience at Hot Studio, ruminates further on this concept— namely, that of a participatory, collaborative, communicative design process in her presentation 10 Secrets from a UX Design Strategist’s Toolbox.

In his prototyping book, Todd Zaki Warfel provides readers with a wide variety of tools to prototype with, including sketching, paper (and other analog methods), PowerPoint & Keynote, Visio, Fireworks, and Axure RP Pro, in addition to trusty HTML. Consider them all. If one method helps our stakeholders more clearly articulate their ideas, it’s arguably more valuable than creating an inaccessible prototype in (what could easily be considered) a foreign language.

An organization that practices both prototyping as well as agile development promotes internal synergy between designers, developers, stakeholders and users alike. Testing prototypes and developing in iterations helps pace the team by first exploring the trail and then taking calculated steps. Far too often, we treat web development as a sprint rather than a marathon. It is the experience designer’s job, in part, to help everyone walk the steps of the experience they’ll create before they run—especially when they’ll be doing so in tandem.

Final thoughts

With regards to development for the web, prototyping is rarely considered; in fact, it’s often forgotten until after the initial website launches: We prototype solutions for A/B Tests, but not for key features.

When designed early and often enough, prototypes generate context and questions in time for an agile team to answer their challenges. As those who design experiences, we must promote prototyping as a part of the design process in order to iteratively improve the experiences we create.

Although no one can meet the most exacting business demands—free, perfect, now— prototypes move our team in that direction. And that’s something clients, consultants, and users can all agree upon.

Further reading

Additional resources

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Was introduced to the concept of agile development when I started developing in Ruby on Rails. It’s a beautiful thing to know that you are being effective, and yet, not sacrificing the beauty of the process.

  2. We are developing a new prototyping and design app called ANTETYPE that makes it easier and faster to create interactive hi- and lo-fi prototypes. Just have a look at our overview video. We plan a private beta test in August, so please register for our newsletter if you are interested.

  3. True, startups take chances with unproven solutions and ideas.

    This reminded me of a startup I used to work for that made 3 prototypes for 3 markets. They decided to do launch an incentivized survey at the same time, to insure reliable feedback. Each market had a sample size of 300, 92.5% target matched participants.

    A month later, the results from the surveys where compiled and laid out into graphs and testimonials to form a complete story.

    The results where surprising. Our theory was that we’d just integrate the good, take out the bad, and we’d be happy. It turns out we were half right. Their suggestions to the site were the key to eliminating the mind boggling theories of features and assumptions that rivaled science fiction novels.

  4. This is a really interesting article – it’s useful to know some common mistakes, and how to deal with them

  5. This point has been brought up many times, but any kind of prototype that involves programming or markup sounds scary to me – that’s the fastest route to a “developer-y” looking site rather than a truly designed – graphically as well as functionally designed – site.

  6. If i could know this long before, there would be less problems waiting for me to fix.

  7. Late last year, I explored the UX designer as prototyper model, as most of our designers were doing some type of prototyping as part of their design process. When I started to investigate further and even formalize the process, about half of the designers didn’t feel like prototyping was their job, especially if their prototyping skills weren’t as finely honed.

    We are now pursuing a model in which our web developers are prototyping for us. This may be the best solution for us, as we are a very large company with lots of people and tight deadlines.

    I’m interesting in finding out if others have had any success in this web developer/prototyping model.
    My understanding is that Amazon does this as well.

  8. Neat ideas. Thanks for the thoughts. Be assured I have no antisocial infidelity!

Related Posts