Simple tools & tactics for prototyping multimedia experiences.
In my previous post on the subject of digital prototyping, I outlined some ways in which the process can help create stronger multimedia exhibits. Prototyping can keep teams aligned, help identify and resolve user experience issues, and provide proof-of-concept for complex digital experiences.
This all sounds wonderful… but the reality, of course, is that digital prototyping can be complicated and expensive. Good, affordable software developers are hard to come by, if they’re not already working for Google or Facebook. But there are a number of simple prototyping tactics that teams can use to better design, and understand, their digital interactives. Here are a few:
Just because an exhibit is digital doesn’t mean it can’t benefit from the same hands-on protytping techniques as a traditional exhibit. Paper prototyping is just what it sounds like: interfaces can be drawn out, cut up, and tested on paper to assess scale, intuitiveness, and engagement.
Paper prototyping can be particularly useful for testing the physicality of a digital exhibit, and can help teams make smarter choices about AV specifications. One easy way to get started is to cut foamcore or paper to the size of an exhibit’s digital display. For small displays, will the screen have the impact and legibility it needs to support your content? For larger touch displays, will the interface elements be reachable for smaller and shorter visitors?
Cutting out paper to represent buttons, images, text, videos, and other elements can take this a step further, allowing teams to experiment easily with interface layouts. And with staff mediation, simple games and interactions can be user-tested on paper as well.
When graphics are in development – or even beforehand – printing full-sized mockups of digital designs can help assess contrast and legibility; designs that look great on a laptop screen may have a very different effect when scaled upward. Be sure to print content at the same bitmap resolution as its digital display, so that the printouts don’t suggest a higher level of detail than the exhibit will provide.
Presentation & Prototyping Tools
One of the simplest ways for non-coders to create a testable prototype is to use desktop or web-based presentation software. PowerPoint, Keynote, and Google Slides all provide functionality to ‘link’ elements from one slide to another; one can quickly connect text or icons on a menu screen to separate slides representing different application states. You won’t get much more complex interactivity out of these tools, but it’s a reasonable way to prototype for user testing: are buttons, text and navigation elements easily understood and intuitive for users?
On the more professional side, the last few years have seen the emergence of a new wave of digital prototyping tools, largely built around the needs of mobile app and website developers. Most prominent is InVision, an app that has become a full-fledged ecosystem for designing, prototyping, and reviewing digital application – and for most purposes, it’s free to use. Designers who use Adobe’s Creative Suite can try out XD, a desktop application that offers similar functionality; other newly emergent tools in this category include Proto.io, Marvel, and Fluid UI.
These apps let users easily drag-and drop buttons, icons, menus, lists, and other content into an interface template, then link these together to prototype navigation and transitions. These are all intended for professional designers and software developers, and while they aim to be easy to use, non-designers may face a bit of a learning curve. They are also largely focused on mobile development, so their preset tools are optimized for smaller devices, and may not translate easily to larger, less traditional interfaces.
Working with the Pros (and Semi-Pros)
A software developer is generally the last person brought into the process of making digital exhibits – and I’ve been that developer on more than one occasion. Programmers are relatively costly, and their work is considered by some (including themselves, on occasion) to be mysterious, solitary, and antithetical to the collaborative processes of exhibit development.
Today, though, many coders work with Agile methodologies, where projects are built through a cycle of constant re-iteration, refining and adding features with each update. Essentially, the prototype evolves to become the product – a good workflow match for much exhibit development.
If you’re planning to work with a professional programmer to build your digital exhibit, consider bringing them in during your initial planning phase, even if only for a short time. A small investment in prototyping early on can establish a project’s feasibility, pinpoint the red flags that may make it overly complex and expensive, and help your teams refine ideas before establishing a formal scope and sending out RFPs. Better to understand these challenges earlier in the process than later, when designs, budgets, and schedules are set in stone.
Finally, note that a non-professional coder may have the skills needed to build your digital prototype. Look to junior staff members; programming is no longer solely the domain of Computer Science majors, and many young graduates have basic experience with web development. Plus, with the plethora of free tools and tutorials available online, there are few barriers to entry for curious exhibit professionals to dip their toes into the programming world.
Prototyping for Synergy
When multimedia experiences aren’t prototyped, the worst case scenario is often a non-functioning exhibit, or one that confuses or fails to engage visitors. But something else is lost in the process – the opportunity to organically develop digital concepts in parallel with an exhibition’s other experiences. Digital prototyping can help bring about new ideas for both physical and digital experiences, sparking the imagination and excitement of designers and developers to take their exhibitions to the next level.