IA, IxD Deliverables defined….Prototypes, Mockups, Flows oh my! April 24, 2008

I develop RIA and games, where I find that webpage methodologies break down, and use several terms/tools in the early phases to capture various facets of the system.   Lately on the IxD mailing list there has been some confusion as what is what so here's my list:

• Wireframe - a single screen as output by IA's, typically representing one state at a time, a skeleton to serve as a container for available copy and for graphic design to flush out as 'Comps'
• Sitemap - a rought organization of wireframes into sections and navigation between pages.
• Storyboard - sequence of wireframes + graphical interaction (mouse clicks, drags), typically a one way trip through a system,  trying to get buyin from the entire team.  Can be expansive in covering a wall, often required in team discussion to jump around and interrelate, or played back in a video like format.  Frequently the beginning of a usecase/workflow.
• Comps - aka composition, a single screen as output by graphical designers based on Wireframes, and provided copy.
• Interactive Wireframe - aka clickthroughs, wireframes stacked in time,selectively hiding an showing things, to help flush out the interactive architecture. As somethings have to be played to be understood.
• Mockup - a high graphic fidelity, but limited in interactivity similar to a theme park ride. Great fun on the ride, but get a few feet off the track and the whole thing breaks down.  A version that faithful covers all the use cases states to be conveyed, can also be called  a simulation.
• Statemap/Lifecycle - a heirarchical statechart of all system states and events between them, frequently having links/thumbnails to various fidelity comps. Like a subway map it should encompass at varying levels of detail the entire system of states relevant. I find this missing in most designs. Screw this up then everything is already broken. Been compiling a library of common LifeCycles (user registration, media players), as I find that they are constantly rediscovered, and getting them right..can be tricky. I'll publish them as I have time.
• Flow - a particular usecases/workflow across the statechart + sitemap etc.
• Prototype - a typically technically driven 'spike' to answer a narrow question if something is feasible or not, or better than another scenario. typically disposable. Often using whatever is available ducktape, wood, paper + glue. Tehcnically anything that isn't building the final release meets the definition of a prototype. Thus I find it's more practical to have more specific terms (like mockup) to describe what I expect of a deliverable, what it does and what it won't do. However in the case for questions like 'can we sort 10000 items clientside, based on the dominate color' generally there isn't any other term available, so I use spike/prototype.