When talking about “interaction design”, designers talk about the practice of “Wire Framing”.
In the past this “Wire Framing” involved creating fairly primitive mock-ups of user interfaces on paper, arranged to make a “Story Board”, much in the same way as makers of animated cartoons always have.
The use of these story boards has allowed designers to “run through” prospective designs with real users as well as developers. A useful tool.
Although paper is certainly a useful tool (I use it alot myself). I can’t help wondering if there’s a way of doing this on a computer effectively. You’d think there would be wouldn’t you?
Draw It!
One approach is to use a graphics editor such as Photoshop or the ubiquitous MS Paint (for goodness sake use Paint.NET at least….). This is good in that it helps the stakeholders understand what it is that the new product will look like. It’s bad in that it isn’t interactive and it usually takes lots of time, sometimes with a mediocre result. It’s good if you have a Graphic Artist to help. (The difference between a developer and a Graphic Artist producing a piece of work is that although they will probably both take ages to produce something, at least the Graphic Artist produces something worth looking at).
Prototypes
Another approach is to create a prototype using the actual development tools. In the Microsoft World, run up Visual Studio and start churning out miracles. Sadly however this approach is still development and developers can get bogged down in the detail.
There’s also the “scary” side to an operational prototype. That nightmare scenario where development budgets are reduced and the boss says “why don’t we just put the prototype into production”……Enough said.
So the trick, in my opinion is to create something that looks as real as possible (ie as impressive as possible), but clearly is not the “real thing”.
Enter – Expression Blend
The era of User Experiences ushers in another alluring alternative. Microsoft for example offer designer-oriented products such as “Expression Blend” that allow designers to create WPF and Silverlight based user interfaces without having to run the equivalent development tool “Visual Studio”.
Allegedly Expression Blend will allow designers to create user interfaces. At last designers have the power to wireframe in a rich way, creating user experiences that behave like prototypes. Like the craftsman in his workshop, the designer has created a beautiful puppet, which dances for his appreciative masters. But what if Pinnochio wants to become a “real boy”?
When it comes time to create real software the developers add the code, like Blue Faerie’s pixie dust and bring the user interfaces to life.
A pretty story indeed. But will it happen? In the Microsoft world it’s something that was promised with web frameworks such as ASP.Net in the early days, the dream of separating ui design from programming content.
Sometimes creating the desired ui experience does take a while, even for someone proficient in Expression Blend. (Happy to be howled down on this point) A lot longer than doing a hand sketch or using MS Paint anyway.
Powerpoint Magic
A technique that has been used in my team is to use PowerPoint to do our Ui concept demos. It has proven to be so believable, I’ve had stakeholders ask me to click on ui elements that are not part of the demo, despite repeatedly telling them “it’s only powerpoint”.
We create different slides for each ui state. In it’s simplest form we press enter to advance to the next ui state.
This does NOT involve complex animation and transitions. This sort of thing, even in a normal powerpoint presentation just wastes time.
If there’s time we’ll add “Custom Actions” (Mouse Hover or Click) to some UI elements to advance to the next slide, but that’s it.
To create the slides, we usually begin with a base (in the case of a browser based app this may be a screenshot of a webbrowser frame). Take screenshots of various UI elements from other applications using screen capture software. (this is built in to Vista….I recommend using Gadwin if you’re running XP) The more of these you have the more realistic your concept will look. Use the built-in powerpoint text boxes for more conceptual work.
The screenshot below a screenshot of a proposed PDA application. It uses a screenshot of Visual Studio’s emulator as a base:
Using this approach can have these advantages:
- It can look exactly like the real thing
- It’s easy to do
- It’s fast
- You can add annotations
- You can add limited interactivity
- It works for any kind of application, not just Microsoft Wpf/Silverlight
- You can use any Powerpoint-like tool
Conclusion
The “User Experience” is a becoming a key differentiator in many software markets. Creating prototypes can be an important technique in creating compelling Ui experiences. Perhaps more of this would be done if people realised that even a tool like PowerPoint can be used to do this.
Links
