Storyboarding UI
Today I am mocking up some UI storyboard. This is one of the fun parts of being a PM, and something I don’t get to do much since my group is concerned mostly with API design. The last time I did any intensive storyboarding was when we were designing XQuery Builder, which we showed at PDC. Different groups in the company do things differently, but here’s my process:
- Mock up the basic outline of the form using VS.NET designer and run it
- Alt-PrtSc to capture the UI
- Paste into Windows Paint
- Draw text, screen grab from Excel for grids, etc.
- Save as a GIF
- Create HTML hotspots for buttons and other regions
- Set up HTML pages and hyperlinks to connect all of the screens
Depending on how you do this, it can look deceptively realistic when you walkthrough the “application” in a presentation. I also think this approach is appealing, because it forces the PM to focus on the user interaction model rather than screw around with trying to prototype the app in VB or whatever. Obviously, some things like drag-drop (which we used extensively in XQuery Builder) are not well-suited to this method, but I think it’s a lot simpler than using Macromedia or something to mock the UI.
~
An interesting DHTML behavior; allows binding to XML as a data grid.