This document provides guidance on creating prototypes for website design. It recommends starting with paper sketches of the information architecture and page layouts. These sketches can then be developed into more detailed wireframes using tools like Adobe InDesign. The wireframes should be annotated to explain design decisions. Interactive prototypes can then be created using tools like Axure to test interactions and refine the user experience. Prototyping allows problems to be identified and solved early in the development process.

2. .net technique planning
Planning create the
perfect prototype
Master prototyping and your final site build will be a cakewalk. Odette Colyer of
user experience design consultancy Super User Studio explains how to go about it
Knowledge needed Prototyping tools, user-centred design techniques
Requires Pen and paper; tools such as Visio/OmniGraffle, InDesign, Axure RP
Project time Project dependent, but process is flexible
It’s much cheaper to change a website early on in the development
process than it is to make changes later on. Building prototypes –
draft versions of your website – is a good way of nipping problems
in the bud and getting things right first time around.
At Super User Studio – a user experience design consultancy that offers
research, strategy, design and evaluation services to leading online brands –
we consider prototyping an essential part of web design. In this tutorial, we’ll
walk you through the process from start to finish.
The images in this feature are taken from our work with Teachers TV. Over
the past year, we’ve worked with the educational site to refine its registration
process, introduce new elements to its site and produce the strategy and
design for My Viewing Log – a tool that enables you to record how Teachers
TV videos impact on your classroom practice.
Before you begin the prototyping process, you’ll need to work on Informed decisions Working out the information architecture of a project is a
research and strategy for the project. You’ll also need to have worked on the fundamental step in the process of identifying user pathways through a website
initial information architecture, to map out the world of the product you’re
designing and vital user pathways through that world. There’s a range of UX this by dividing the page into rectangles, then label each area to indicate what
tools and techniques to support your preparation for prototyping, but they content or data it represents. The most important purpose of these sketches is
won’t all be necessary for every project. The idea is to deploy those that will to get your team thinking about the experience you want the user to have of
sufficiently support your understanding of business objectives and user needs, the product. It’s an exercise that can be shared with clients and users too, and
and which you deem most appropriate for your project. revisions can be made speedily.
At Super User Studio, before we start prototyping we usually give attention Super User Studio often workshops with stakeholders, using paper, scissors,
to things like: client brief; business requirements; heuristic evaluation; whiteboards, flip charts, index cards and Post-It notes to produce these early
usability testing; user research; audience analysis or personas; competitor prototypes. Some may move straight to interactive prototyping from here.
analysis; best of breed review; content/data requirements; features Others will use the sketching exercise as a means of eliminating more obvious
requirements; sitemap; user scenarios; task flows; and user journeys. solutions, before digitising the sketches and thinking more deeply about the
product’s information space.
Techniques For those projects that require independent consideration of information
Your end prototype should be a fairly refined and testable representation of design, there’s the process of wireframing. Much like your early sketches,
the product. There are several techniques you can use to reach this point, wireframes are page layouts that illustrate the information space of the
which again will be project-dependent. For example, if you’re working on a product and depict how that information is presented to a user. Getting
fairly simple web application, you may decide to go straight to an interactive started on wireframes involves pulling together your sketches, any workshop
prototyping tool such as Axure or iPlotz. With this approach, you’ll consider notes, user research, strategy, content ideas and feedback into a skeletal
the information, navigation and interaction design at the same time. However, format. Your first wireframes should be low-fidelity, as it’s important to
content-driven websites usually require separate focus on information and gradually build detail into them. In other words, you shouldn’t be too
navigation design through the use of wireframes. This enables you to work on concerned about working with specific data or content initially, nor making
presenting the information in a way that facilitates user understanding, before them look like the finished product. Instead, your focus will be on considering
you think about how the product has to function. what basic features are to be presented on a page, their relative importance
Remember, your approach should be prescriptive and you may not tackle or hierarchy and the behaviour of that information in line with user needs.
the prototype in a linear way. Ultimately, your goal is to reach a solution that Different user-experience professionals will use different tools to produce
combines decisions on navigation, information, interface and interaction their wireframes. At Super User Studio, we use Adobe InDesign because we
design, while fulfilling business requirements and user needs. find it fast to use and you can set up a library of reusable components. You
The simplest way to get started is to use the humble pen and paper. First, can find some components for your project here: unify.eightshapes.com/users-
refer back to the list of features and content requirements gathered when guide/what-you-get/wireframe-components. Building an asset library ensures
undertaking your research and strategy. Then sketch out the rough areas of you use consistent design solutions across your wireframes. With InDesign,
content for each of the major templates or screens of the product. You can do you can also create a lovely, ordered bunch of PDFs to present to clients.
74 .net february 2010

3. .net technique planning
Paper trail Most great designs – be they buildings, movie sets or cartoon characters – Noteworthy Annotating every aspect of your wireframes is a key part of the
start out as a humble sketch, and website design should be no different development process, and one that stakeholders will thank you for
This brings us to the issue of the wireframe’s audience. As well as being data or content challenges and to consider how your client’s product can
an important part of the design process, wireframes have generally become distinguish itself from them. Re-introduce yourself to the key users of the
part of the client-facing process too. With this in mind, it’s crucial you keep product too, by reviewing your user research. Reminding yourself of how and
documentation well organised. At Super User Studio, we refer back to when an archetypal user might interact with the product, for example, will
previous IA diagrams to ensure titling and enumeration is carried through directly influence your interface design decisions.
consistently. Sometimes, we’ll use subtle shading and contrast to differentiate There are lots of resources out there to support the development of your
key elements of a page to promote understanding of the layout. We also wireframes: try looking up uipatternfactory.com. Alternatively, see how others
provide concise annotations, which we’ll look at later. It’s important to ensure approach their wireframes at wireframes.tumblr.com.
that your varied mix of stakeholders is communicated with effectively.
Ideally, your low-fi wireframes will be reviewed by all key stakeholders, Annotating wireframes
including your project team, clients and users. Before you show them to As your wireframes become richer in detail, you’ll feel the need to
clients, however, be sure to inform them of the purpose of these greyscale annotate. Annotating your wireframes will ensure your information and
navigation design decisions are documented and traceable. They should also
You’ll need to absorb feedback
communicate these decisions to stakeholders as clearly as possible.
Everyone has their own way of annotating. We use number stamps on the
wireframe that correspond to notes made in the margin or at the bottom of
and not get attached to any the page. We prefer to keep annotations on the same page as the wireframes
where possible, to aid readability and quick interpretation. It goes without
assumptions you’ve made saying that your notes should be as unambiguous and jargon-free as possible.
Just as you put yourself into the mindset of the users when creating
the wireframes, it’s the stakeholders’ shoes you need to step into when
depictions of their product. They may not be used to viewing wireframes, annotating them.
so it’s important to explain that they don’t represent the end layout of the Designers will need to know the varying visual styles required for a
product. Instead, their purpose is to encourage discussion, deeper thought component. Developers will need to know the functionality behind that
and iteration. At the same time, you’ll need to be prepared to absorb feedback component, where its information is sourced or how that information
and not get too attached to any early assumptions you’ve made about layout. behaves. The client will be keeping their eye on how your decisions are
Dan Brown has a good take on this in his book Communicating Design (bit. fulfilling business requirements. We often colour-code our annotations to
ly/4ipsIx): “Very rarely, if ever, is design work accepted on the first pass, and highlight who they’re most relevant to. Alternatively, you could try splitting up
sometimes you can only hope to be ‘wrong in the right direction.” your annotations into different categories. Whatever your approach, keep it as
uncomplicated as possible.
High fidelity As well as enumerating and titling each wireframe, you may wish to include
Once you’ve compiled your feedback and made the necessary amendments to a brief description of the page. This is particularly important when one web
your wireframes, you may decide to move on to interactive prototyping. This page or screen has multiple states of interaction depicted across multiple
again will be dependent on the product you’re designing. Developing your wireframes. For example, you could describe a user’s stage in a task flow like
wireframes further will give you the benefit of applying greater thought to the a registration process, what key tasks they can perform on that page or even
layout of information and the ability to move away from familiar structures to which business requirements are being met at that point.
something that’s more bespoke for the product and its users. There’s no need to make annotations on every design decision, though.
To move on to high-fidelity wireframes, you’ll need some specific data You’ll only end up diminishing the efficacy of the wireframes if you over-
or content in place. In an ideal world, you’ll have all the signed-off content annotate them. Stick to notes on the unobvious or the conditional, such as:
for the product you’re working on, but in the real world this isn’t always Navigation & links – where do they link to?
possible. Sample content or data where relevant may be all you need for some Functional explanations – how a form behaves with and without Ajax
projects, especially when you’ve given thought to the overall content or data functionality or process rules
requirements at the beginning. Having an overview of the product’s content Information sources – unobvious aggregated content
or data requirements and access to actual content in places should give you Changes in the user interface – how the interface alters dependent on
what you need to produce a sustainable design solution. information already submitted by the user or particular user type
This is also a good point to review any competitor research you may have Conflicts against requirements – when you’ve made a decision that
undertaken. This will enable you to assess how competitors tackle any similar conflicts with a business, technical or user requirement
.net february 2010 75 next>

4. .net technique planning
Resources Read all about it
The Elements of User Experience Designing Web Interfaces by Bill
by Jesse James Garrett Scott and Theresa Neil
This excellent book introduces the A great resource. This practical
concepts of usability that should book offers more than 75 design
inform your prototypes. With clear patterns for building richly
explanations and vivid illustrations interactive interfaces. They’re
Come together Interactive prototypes are the culmination of your task flows, that focus solely on ideas rather neatly organised according to six
sketches and wireframes, and enable you to judge how various elements interact
than tools and techniques, this key principles that help you take
introduction will help you create a advantage of current interactive
Content or data explanations – what information needs to successful user experience. web technologies.
be contained within a dropdown and reference to where that www.jjg.net/elements bit.ly/RIwAI
information can be accessed
Reference to previous documentation – a note about how other IA or user
experience documents (such as personas, user scenarios or task flows) have testing of the behaviour of the components and explore how the user’s
affected your decision-making experience can be enhanced.
If you do refer to previously delivered documentation, make sure you once Again, there are many tools you can use for interactive prototyping. Your
again present those documents with the wireframes. We usually redeliver choice of tool may depend on the complexity of the interaction involved
any user profiles or personas we’ve created anyway. This brings you and all and just how much interaction design you think the project warrants.
stakeholders to common ground when discussing the wireframes. Inevitably At Super User Studio, we use Axure, as it can handle quite complex
there will be differences of opinion, but by keeping primary users and their interactions such as mimicking Ajax functionality. It’s not as simple to use
needs in mind, everyone can ensure that user expectations are equally as Balsamiq, for example, nor does it have the nice interface of iPlotz, but
balanced with business objectives. it does enable you to produce a functional specification to accompany
Most importantly, think about how these annotations can support your the interactive prototypes. While the users testing the product will not be
design process. Crucially, by making notes about the reasons for certain concerned with functional specifications, your development team will be.
decisions, you’ll be able to consider whether any later requests for changes The spec offered by Axure needs editing and formatting, but effectively
are really feasible. Including some form of version history within your brings together all the annotations you make while creating the interactive
annotations will also help you keep track of the changes you’ve made so far. prototype. In our experience, annotations on interactive prototypes can be
There’s not always sufficient space to do this fully, so we tend to include just overlooked, so delivering a specification document often goes down well
the last set of changes within the wireframes and keep a fuller record within a with developers and clients alike.
separate document. Wireframing tools to consider include Visio, Omnigraffle, Your approach to interactive prototyping may be low-fidelity or high-
Adobe Illustrator and Adobe InDesign. fidelity. This will inevitably be dependent upon the project, its budget,
timeline, complexity and so on. However, if you intend to test the
Interactive prototyping prototypes with users, it’s important to allocate time to make them as
Interactive prototypes are working simulations of a product. They take your user-friendly in their presentation as you can. Paying close attention to
task flows, sketches and wireframes into a 2D realm and enable you to things such as grid structure, spacing, linking convention and typographical
consider the interaction behind components. Interactive prototyping is a hierarchy will boost the user’s apprehension of the interactive prototype.
process in itself. It enables you to test and revise the user interface, refining More importantly, your users will spend less time querying elements of the
the user’s interaction with functionality and perfecting their experience as you interface that you’re simply not testing.
iterate. For the first time, stakeholders start to see their product take shape. To support your development of interactive prototypes in Axure, check
As Garry Samett, head of digital content, Teachers TV, testifies: “When Super out the pattern libraries offered at www.axlib.org and bit.ly/7WpGxQ.
User Studio designed our registration process, having a ‘working’ prototype If there is one core insight we’d like to reflect upon in this tutorial, it’s
gave reassurance, especially to non-tech savvy stakeholders. They could see how this entire process is about communication. By focusing on issues
how it all worked early enough in the process to raise issues before coding of interface and interaction design before visual design, you’re allowing
had started. This saved us loads of time and pain.” yourself to focus on how the product can more effectively communicate
Not all projects will require interactive prototyping. If there’s limited its message to users. You’re focusing on opening up channels of
interactivity, you may wish to produce interactive PDFs from your wireframes, communication with your client and the project team. You’re also inviting
but developing a full prototype is unlikely to be necessary. Interactive communication with users to better understand how the product can meet
prototypes are useful for projects that involve either single or multiple areas of their requirements to craft the best possible user experience. l
complex interactivity. They’re also useful when those areas of interactivity are
particularly crucial to fulfilling business or user requirements. About the author
For example, it’s difficult to truly think about the interactivity of a web
Name Odette Colyer
application or social media site using static wireframes. One component of a
Company Super User Studio
page or screen could have multiple stages of interaction behind it, as could
Site www.superuserstudio.com
many other components on the same page or screen.
You could wireframe out each of these processes, but it won’t really Projects Teachers TV, The Guardian, BBC
give you sufficient clarity to consider how the interactions could be What do you wish you were better at? Press-ups: no
improved. For such projects, interactive prototypes will support your amount of chicken gives me enough strength to do them
<prev 76 .net february 2010