Effective Prototyping
Many readers have asked about how I produced the prototypes used in the articles. I’ve been meaning to write about the tools and techniques I use as a freelance UX designer, and, given the interest in prototyping, I’ve decided to write a series of short tutorials about the this aspect of my workflow.
The UX Process
If you’re anything like me, a significant proportion of your time is spent communicating ideas about Users, UI and Information Architecture with clients, coworkers and management. Among the artifacts produced as part of any good product development process there are
- User Stories
- Personas
- Mood boards
- UI flows
- Wireframes and Prototypes
Let’s look at effective prototyping.
Effective Prototyping Is
Effective prototyping is fast. It’s about communicating just enough about the intended product so that
- Clients can make judgements about how their brief has been interpreted
- Management can avoid costly mistakes early in the development process
- Developers and designers can work more effectively
Effective Prototyping Isn't
A professional user experience designer must understand the product development life-cycle, and they must be disciplined enough not to introduce unnecessary and costly (in terms of time and therefore money) elements into the prototyping process.
Prototyping is not the time to get distracted by
- Graphic design
- Visual design
- Precise key frame animation
If you find yourself spending
- …just a few more minutes getting the kerning of this heading right.
- …just a couple of more minutes deciding on the correct shade of blue to use for the background.
- …just 10 more minutes getting these menu animation keyframes juuuust right.
Then you need to stop and reassess which part of the product development life-cycle you’re currently engaged with.
Prototypes are, by their very nature, disposable. Treating them as such will enhance your ability to contribute to effective product development.
Prototyping Tools
You don’t need to use a prototyping application to do good prototyping. The quickest way to get ideas down is to use paper and pencil.
The benefits of paper prototyping
- Anyone can do it. The barrier to entry is almost non-existent
- It is immediate.
- Encourages quick iteration, after all, you probably only spent 3 minutes quickly jotting down ideas
The Downsides
- Not as easy to share as digital prototypes
- Not interactive
- Doesn’t scale well as your project complexity increases
Paper prototyping is an awesome place to start. At some point though, you’re probably going to want to introduce digital prototyping.
Characteristics of a Good Prototyping Tool
Whichever prototyping tool you choose (and there are many), your chosen application should be:
- Efficient
Time is money. If you’re wrestling with your software you’re wasting time and this will eventually hurt your bottom line. - Expressive
Dream up a novel or unusual interaction. Can your chosen application help you communicate this? If not, then your tools may be limiting your ability to communicate effectively. - A Communication Tool
Your chosen software should make sharing and receiving feedback as effortless as possible.
Prototype Fidelity
The truth is, there is no one tool to rule them all. Depending on your project scope, you may need low, medium or high fidelity prototyping.
- Low Fidelity
Pencil+Paper - Medium Fidelity
UX-App, Balsamiq, UXPin - High Fidelity
Photoshop, HTML/CSS/JS, Native Code (iOS, Android etc), FramerJS, Atomic.io
It’s unusual that an early stage project requires high fidelity prototyping. It may be a symptom of poor project management, which unfortunately can’t always be avoided by those of us in the trenches.
To be clear, tools such as FramerJS, After Effetcs and Atomic.io, are awesome, but they don’t belong at the early prototyping stage of product development. You should only begin to incorporate motion design into the picture once the high level IA and user flows have been well established.
Which Fidelity Should I Use?
Always, always, always go with the lowest fidelity you can. Remember that
- The purpose of prototyping is to communicate ideas.
- Prototypes should be treated as disposable.
The quicker you can get those ideas out and in front of stakeholders the better.
About UX-App
My personal (digital) tool of choice for rapid prototyping is UX-App. Let’s do a quick evaluation of this software using the 3 characteristics identified above
- Efficient
- Expressive
- Effective Communication
1. Efficient
I don’t want to wrestle with my software to be able to quickly build complex UIs. The first thing that drew me to UX-App was the comprehensive pre-built component suite.
Here’s an example of how to put together a simple Tab Control.
Here’s a clickable version you can check out.
There are over 60 pre-built components to choose from and they are all easy to use. The component suite alone has saved me countless hours over the past year. Whichever prototyping tool you choose, make sure that common UI controls such as Tab View, Carousel, Combo Box etc are included and easy to use.
2. Expressive
UX-App comes bundled with just about every common UI component your project might need. If, however, you need to prototype a novel or unique interaction then you can use the Code Editor to define any interaction you might dream up.
Here’s a very simple example from one of my previous articles.
Here’s a clickable version you can check out.
This interaction was achieved using the following instructions.
UX-App uses a drag-and-drop interaction designer with which you can define a huge array of possible interactions. This is definitely getting into the intermediate skill level with regard to UX-App, however it is well worth the effort to master this powerful aspect of the application.
Here’s a quick demo to give you an idea of how interactions are created.
Here’s a clickable version you can check out.
3. Effective Communication
A prototype is useless unless you can share it effectively. There are a number of ways to share your designs using UX-App. The designs I work with are
- Shared directly with a client or other stakeholder on a screen or device
- Shared via email
If I’m currently working as a sub-contractor for a larger organization, I’ll often be in direct contact with developers and/or designers which makes sharing a design by using the ‘Publish to Device’ functionality useful.
Otherwise if I need to get feedback on a design from a user I use the
- Share → Via link
option to receive feedback via email(that tried and tested communication medium).
The examples I’ve been including in this article are generated using this method.
You can also invite clients to a prototyping session. I’ve had mixed results with this. Some clients love being involved with the design process and, even though the client view that UX-App provides isn’t difficult to get your head around, some clients still prefer face-to-face or email communication.
In any event, it’s a nice feature to have and allows clients or other stakeholders to view a project and leave notes within the application.
Summary
When it comes to early stage prototyping, speed trumps all. If you start to get bogged down in graphic design or precise animation timing then you run the risk of getting too attached to your prototype.
Whichever tool you choose, make sure that it allows you to communicate ideas as quickly as possible. For me UX-App hits just the right level of fidelity for much of the early stage prototyping that I do.
Coming Up…
I’ve been using UX-App for a while, and I’m looking forward to sharing some practical examples and tips in my next article.
Next week I’ll be exploring
- Component Editing
- Interactions &
- Previewing on a Device
Stay tuned!
