Net Magazine February 2010


Published on

Creating the Perfect Prototype

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Net Magazine February 2010

  1. 1. .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: 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
  2. 2. .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 Alternatively, see how others provide concise annotations, which we’ll look at later. It’s important to ensure approach their wireframes at 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>
  3. 3. .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 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 and 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 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