Software licensing: User interface design (with video)

User interface design is every bit as important as the core software that runs on the server. A poorly designed user interface can significantly impact the end result of a web development project. Here are a few ways poor design can hurt a web project.
- Reduced adoption rate due to confusion about accessing features
- Underutilization of available features
- Increased frustration for the user and support burden for development team
- Poor conversion (sales) rate!
User interface is much more than AJAX and color choices
It’s important to clarify that when I talk about user interface design I’m not talking about which components might use AJAX or what color items might be used. Those can be important, but what I mean is the basic structure and function of the user interface.
My long standing rule is to start on paper, just as I do with software design. In the design documents below you can see that I start by just writing down everything I want to be available to the user. I also begin to identify some implementation specifics where they are obvious. The reason to think about implementation at this point (remember we’re using wicket) is that the manner in which our framework renders these components in markup could be useful to the graphic designer who builds the UI.
Design Sketches
These documents serve as a guide while developing the server side software. They are also the entry point for vendors or team members that you bring on to collaborate. One tactic that I use a lot is to scan a hand sketch (like what you see above) and then create a Jing video using Prezi (or even Google Picasa) explaining what I want from a vendor or team member. Below is the video I made to get bids for the client side code development for this project.
Notice that these hand sketches only took me 20 or 30 minutes to draw and scanning took a couple of minutes. The Jing video took about 10 minutes to record and upload to screencast. In under an hour I have a good first iteration for the UI for the software licensing system.
Detail and Quality
Some will argue that such a coarse approach doesn’t provide the attention to detail that is required for a high quality UI or that an approach like this will only work for small scale projects. That may be true, but in my experience I’m not sure that I do any more tweaking to a design that I put together like this or any less tweaking to a design that I hash over for days or weeks. In the end, it’s been my experience that this approach gets me to a finished product faster and leaves me a lot of flexibility without sacrificing long term quality.
[…] of the application. This worked out great since I suggest always starting with a sketch drawn by hand. Here’s what they […]
[…] January 25, 2012 0 Comments […]