Category Archives: prototyping

I was thrilled that Sharon Dunn asked me to visit the 40 Acres to lecture the Spring MIS 374 class on High-Fidelity Prototypes again. The talk was basically the same as the one I delivered in the Fall, so I won’t waste disk space or bandwidth in posting a re-run. While the students didn’t have as many questions during the talk, there were several after class and many more through email.

I really enjoy sharing this talk and am considering working up a few others based on the questions that have come up after. I sure hope Eleanor and Sharon will have me back again next year.

I was thrilled back in August when Eleanor Jordan, my former professor now Professor Emeritus at UT Austin asked me to come speak to her class about high fidelity prototyping. “MIS 374 – Business Systems Development” is the capstone class for MIS undergrads. The students learn project methodology concepts and test everything they’ve learned in the 4-year program on teams to complete real-world projects for Austin-area clients.

Last Monday (10/22/2007) I drove down to Austin for the day to share a slightly modified version of the high fidelity prototyping talk I gave just over a year ago at Refresh Dallas. The class was great. They were very receptive and had great questions during and after the presentation. Unfortunately, our time was cut about 15 minutes short by a “non-specific” bomb-threat, but we got through most of the presentation and several students stayed after to chat while UTPD scanned the building.

I enjoyed the experience and will be happy to go down any time they’ll have me again.

The presentation and pre-class notes are available on the Downloads page.

Stephen Anderson provided a wonderful talk a few weeks ago at Refresh Dallas (and subsequently at Refresh06 in Orlando) on “Creating Pleasurable Interfaces: Getting from Tasks to Experiences“. He does a great job of making the squishy elements of UI design feel tangible. The truly wonderful interfaces that we use everyday are our favorites because of the intangibles that Stephen so eloquently describes in this talk. There’s a lot to learn in there and apply to any project we’re working on.

In this talk Stephen mentions the work of Ralph McQuarrie. When George Lucas was shopping the idea for Star Wars to different studios, he was concerned that the traditional method of providing a script to read would not do justice to the scope of setting and drama that the story would provide. He wanted something more than just words on a page to literally illustrate the characters and settings he wanted to film. So George hired artist/illustrator Ralph McQuarrie to do just that. The use of such supplemental material for movie pitches was not at all common during that time. McQuarrie later said “I understand my pictures did something to convince [20th Century] Fox to make Star Warsâ€?.

I know Walt Disney used rough sketches for storyboards in the production process, but I think George Lucas’ approach to develop such high visual fidelity illustrations was novel for selling the project. Lucas realized that there was too much room for interpretation when he only used a script; he wanted to provide more concrete examples of the vision he had for the project. That’s exactly what we do when we insist on some form of prototype to advance our project instead of relying only on a written requirements and design document.

When you’re just trying to get a project off the ground, high visual fidelity concept screens can really help make your inspiration infectious with investors and other project sponsors. Illustrating the key ideas with great visual clarity so they can get a flavor of what their investment will return.

This evening I watched a demo of iRise, the prototyping tool developed by the company of the same name. Here are some quick thoughts I took away.

The tool seems easy to use. Drag and drop screen and scenario painting looks straight forward. I can see how quickly you could develop a fairly deep prototype. It would be much faster than coding, even if you had a rich set of templates like protokit to start with.

The output has good visual fidelity. While it uses proprietary metadata to style the visual elements, it will import CSS. It appears that absolute placement of graphics doesn’t allow for a fluid layout, but there does seem to be a high degree of control over style attributes and placement. The interaction with “data sheets” provide rich data interaction simulation (something that we’ve been stratching our heads over on protokit). What seems to be lacking is rich DHTML (or as the kids call it “Ajax”) behavior. The few widgets they demoed when asked seemed to refresh the screen on each activation. There might be ways around this with hacks or in future releases.

The output has low mark-up or code layer fidelity. The output is a proprietary format similar to PDF. Like Adobe’s Acrobat strategy, a free viewer is available from iRise that will “run” prototypes (iDocs) developed by the iRise tool. Like protokit, this makes the prototypes very portable and easily viewed with or without a connection to a server. The downside is that there isn’t much (if any?) mark-up that can be reused by developers. This is especially not-good news if you’re documenting design to be shipped off-shore for development. I’d like to be able to specify accurate examples of what the mark-up should be.

The trade-off might be worth it. You save time developing the interactive model and can use some of that time to develop an interactive style guide with markup examples. You could even develop static HTML renderings of each screen, they just wouldn’t have the cool interaction that the iDoc offers.

So, when does one use iRise? Protokit? Just prototype in Rails using scaffolding? Well, any junior consultant will tell you the answer is always “it depends”. But iRise is a fascinating first step into automating the design process. Hopefully I’ll get an opportunity to evaluate iRise further to see if the mark-up side shortcomings can be overcome by overloading the available attributes and other documentation capabilities.

Until I heard about Axure last week I didn’t know about any tools out there for creating prototypes. But in the last week, I’ve learn the names of two others. The list I’m keeping currently includes:

• irise.com
• Axure.com
• Serena Composer

How did I miss all these before? Please leave a comment if you think there are others that should be added.

I have not spent much time looking at each of these. From what I have seen so far they offer high-fidelity prototypes to make sure that the sponsors/potential users understand how the application will work, look and feel.

I am very curious to see how well it generates code. The other side of the protokit benefit is that developers can also see an authentic design. Ideally, a high-fidelity prototype should look real both on the screen and under the hood. Developers should see all of the presentation assets (images and css) and exactly what mark-up their code (jsp, asp, php, etc.) should generate.

If you’ve had experience with any of these tools (or have examples online that they generated) please leave a comment below. I’m very interested to look at the output.

Ironically, these packages also automatically generate all the document debts that high-fidelity prototypes help eliminate the need for.