Prototyping: getting the user experience right, bit by bit

Credit: Book cover, Scott McCloud, Understanding Comics

DIY development has an unfortunate reputation for poor user interface design; a reputation that goes back to the dark days of Visual Basic. That was the era of Windows Forms, of text boxes, radio buttons, and an endless array of buttons, when applications looked as though someone had thrown the contents of a design toolbox onto a screen and then stuck some code behind it.

Things are very different now. Consumerization doesn’t just mean bringing your own tablets into the workplace, it’s also about providing users with the same online experiences they get from Facebook or Twitter. If you’re building apps for your team, then you’re going to need to think about user experience as much as you think about code.

Getting user experience right is about a lot more than design, and it’s important to take time to understand many of the issues you’re going to need to address in an application – especially if you’re building an app that delivers information, or needs to take user input. Surprisingly some of the best books on user experience have nothing to do with app development, and instead they deliver universal user experience principles that work across a wide range of techniques and technologies.


One of the most useful books on user interaction is Scott McCloud’s Understanding Comics. In deriving the rules used in comic page design and in graphical storytelling, McCloud provides guidelines for the signals and signs you need to include in your apps to make them easier to use and understand. It’s also a beautifully drawn and entertaining book in its own right

But books on UI and UX are only part of the story. Getting your app right is a lot more than just writing code. If you want to make something that’s more than today’s version of a Visual Basic form you’re going to need to add user experience tooling to your development platform. That means it’s as important for the individual or team developer to prototype their apps as it is for a full blown development team.

In the past that would have been expensive, requiring specialized wireframe tools and a whole suite of web and animation design tools – or even building a working model of an app in Flash. Those days, however, are long gone. Now user experience tools can be downloaded for free, and sit beside free development platforms for both desktop and mobile apps. A recent arrival is Infragistics’ Indigo Studio, a tool for creating application storyboards and laying out screens, and available for Mac and PC.

Storyboards are a useful tool for collaborative design. Applications can be sketched out in an interactive storyboard, so you can try your ideas out on your co-workers. There’s no need to write code, all you need to do is put together a wireframe screen, or use images to show what a screen might look like. While it’s possible to use tools like PowerPoint to create wireframes, they’re not really able to replicate the screens of a full-blown application. As Indigo Studio comes with a library of UI elements to help you layout prototypes, it’s a lot easier to use it to show what you’re trying to build.

Credit: Screenshot
Laying out a mobile application in Indigo Studio

Like most development tools Indigo Studio takes a project based approach to screen and storyboard design. You can start with one screen, or you can lay out a storyboard based on a back-of-the-envelope sketch (and even use scans of your rough designs as the basis of each screen in a storyboard).

Start by picking a screen size – are you designing for a tablet, a phone, or a desktop PC? Once you’ve chosen your screen resolution you can drag design elements onto the screen, experimenting with what works where. You can show tabbed and tree UIs, as well as adding user interactions for each element, along with tooltips to show what you expect your users to be doing at each point in a screen. Screens can be linked together in a storyboard, so as a user clicks on one screen element they’re taken automatically to the next screen in the prototype. You can use this to show how a search is carried out, and how results are displayed – and even how you’re showing users that your application is processing their data.

Credit: Screenshot
Storyboards show application screens in the context of an application workflow.

Don’t expect to be able to go straight from a tool like Indigo to an application. What it produces are only prototypes, intended to be used to give a feel of final code. There may be links and HTML in there, but it’s not usable code. You’ll need to take the design you’ve created and replicate it in an app development tool or web design application.

But by proving the application design before actually writing any code you’ve saved time – and reduced the risk of your intended users rejecting the app you’re spending your spare time developing. An effective prototype will act as a guide to application development, letting you know the inputs and outputs you need to provide – as well as the APIs and services you plan to hook in to your code.

Credit: Screenshot
Use Indigo for desktop and touch-based applications.

What the BYODevelopment model brings to application development is an approach that at heart is a traditional rapid prototyping methodology, blended with continuous development, much like larger scale agile development processes. BYODev applications are constantly evolving, tinkered with in a few spare minutes in line with feedback from friends and colleagues.

That means tools like Indigo Studio are increasingly important, as they start that user-driven feedback loop early – as soon as you have the idea for an app you can build a wireframe prototype, which can be shared with potential users. As Indigo Studio is free, they’re then able to download their own copy and make suggestions for changes in screen layout, and even in application workflow. Storyboards can be shared over the web and annotated to show the steps users are expected to take.

Tools like Indigo Studio make development more collaborative, giving everyone involved with a project the opportunity to see what’s required, and what’s going to be delivered. They even make it possible for non-coders to be part of any informal application development process, and documenting user experience early can help successful BYODevelopment projects transition from users’ own applications to corporate applications at any stage in their lifecycle: even while they’re sketch prototypes. 

From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies