Recently, I’ve had to create several in-depth interactive prototypes, and keeping all the various designs and interactions straight was a bit of a daunting task. Especially when the level of interactive fidelity was high. To ensure that I hooked up every piece of interaction and wrote every logic case needed, I took the development of the prototypes step by step, or layer by interactive layer. This post is a brief description of the process I followed. I’d be interested to know how this relates to your own process and any other comments you might have.
My first goal was to make sure the prototype was a complete click-thru of all the designed pages. Now, this doesn’t mean I made just the main navigation click-able, but I also linked up any cross link opportunities too. Once I verified that all of the pages were linked together and could be traversed, it was time to move on to the next layer of interactivity.
Developing the various states for each page was next. Since I was using Axure, this meant I broke out the Dynamic Panel and used it anywhere particular components of a page changed given the right conditions. This was the part that took the longest, as I had to work out all the various iterations of the same controls. I didn’t worry too much about the specific conditions needed for the various states, as keeping track of all the logic in my head was distracting. At this stage in the game, it was important that I got all the finer details of the interactions designed out.
Now that all of the pages were linked up, and the states created, I got started with the really intensive stuff. Getting the detailed interactive logic done was the final layer to my process. The first bits of logic I tackled were those that effected the whole prototype. A prime example of this was the logged in/logged out states, which requires multiple layers of logic to ensure that it properly affected the whole prototype. Once these general logic cases were covered, I tackled the individual cases present in each page and state. These prototypes were of decent size, so I kept a checklist handy to ensure I didn’t miss anything.