What are the benefits of Hybrid Prototyping & Mocking?

• More reliable layouts that fit expected content layouts (better predictability)
• Quickly create complex and realistic widgets
• Rapidly develop new HTML controls
• Use each tool (expressions, notepad, Photoshop, illustrator, acrobat) to its strength

Step 1: Build Your Design Library?

When building a new web application, or widget I usually fall back on my base CSS styles for initial mocks. If you do not have a base set of styles. I suggest you build a CSS library. With only a few lines of code you can quickly create many different application widgets and their look. This is especially true if you have a standard corporate or company brand you need to follow. Here is just a quick sample of the table code I use when doing table structures.

/* Used by the other data grids */
TABLE.grid {
 border-collapse: collapse;
 font-size: 13px;
}
TABLE.grid caption {
 font-size: 13px;
 font-weight: bold;
 color: #F6F18D;
 vertical-align: middle;
 text-align: left;
 padding: 5px 0 5px 3px;
 margin-top: 20px;
 background: url(images/header_background.gif) no-repeat center left;
}
TABLE.grid TBODY TR {
 vertical-align: top;
}
TABLE.grid TBODY TR TH {
 font-size: 11px;
 font-weight: bold;
 vertical-align: top;
 text-align: left;
 border: 0px 0px 0px 0px;
 border-style: dotted;
 border-color: #B8660B;
 padding-top: 10px;
}
TABLE.grid TBODY TD.alternate {
 background-color: #EEEEEE;
 padding: 2px;
 height: 14px;
}
TABLE.grid TBODY TR TD {
 font-size: 11px;
 padding: 4px;
 height: 18px;
 text-align: left;
 border: 0px 0px 0px 0px;
 border-style: dotted;
 border-color: #B8660B;
}

 The above code is just a small example. The goal is to build out the code enough so you can simply class/id at the top of your table and then let the cascade ripple through the table elements. If I simply removed the <tfoot> or other elements I can quickly make my table look twenty different ways with only the simple class /id  at the top.  Using this same process I would build out divs, legends, fieldsets, and form elements.

I can mock up a drop down in Photoshop in about 10 minutes, or using this method I can do it in about 10 seconds. If I put more widgets to use In this way I can build out custom screens very rapid. Even more to the point I am using my actual library so I may be coding real world code that could easily be used in the final web application.

Step 2: Screen Print Is Your Friend and So is Screen Capture

Now that I have some custom widgets built and displaying on the screen I can capture the screen and begin building out my widget folders in Photoshop. I usually would create new Groups (folders) inside my Photoshop work space.  An example folders structure: Data Examples, Search Bars, Buttons, Grids, etc..
Using our little friend cut and paste I’ll start placing my pieces into the appropriate folders.

The goal is to get frameworks of your widgets. You can then use Photoshop to “spice em up,” or change them into other designs. You could even create some text examples to lay on top of your various frame-worked widgets. I usually end up creating my containers, and supporting images in Photoshop / Illustrator since that is the best tool for this job.

 Step 3: Build It Out and Tie It All Together.

Start building out your new application interface. I’ve found that using both an HTML design tool and Photoshop in tandem I can quickly pull together a design in a matter of hours. The quick benefit of this is that your design nows uses actual sizes and even actual (potentially production) code.

When you have some screens you like save them out as JPG’s. Next your are going to open up your JPG’s inside of Adobe Acrobat. Merge all of your related screens into a new PDF. Now go ahead and go to your first page and look for the interaction point you are looking to simulate. For example clicking a link pulls up an AJAX edit screen. Select the “ARTICLE” tool and draw an area around your interaction destination. Be sure to name it something you will remember. Now you want to go ahead and select the “LINK TOOL” and draw a link area around where you want your interaction to occur. You should see a popup.  Choose the following “CUSTOM LINK > ACTIONS > READ AN ARTICLE > Your named article area. Repeat this process and you now have an Interactive PDF MOCK.

Summary

In this article we looked at why Hybrid prototyping can get you to a visual interactive mock faster. We learned about creating a CSS library to speed up the process of creating these mocks. We learned how to create an interactive PDF.

Part of this comes from knowing what the common design pattern is for a particular widget. Another part is knowing how and when to stretch the limits of what is considered to be “common usage.” Any time you do something outside of the user expects is when your usability can start to plummet.

The Naked Anatomy of a Check box

Let’s take a look at a simple example our beloved friend the check box. There are two states to this standard check box that are considered common.

• If an item is checked it can indicate either something was accomplished.
• If the box is unchecked you are undoing or indicating you do not want to follow through on an action.

Generally you will find a check box in an unchecked state. Suppose for an instance that we reversed the common usage. A check box when checked now indicates to the user they are NOT SUPPOSE TO DO SOMETHING.  Applying this to the example below we see that because the current state is checked I would un-check to save my selections. Not only is this conter-intuitive but see how hard it was to explain that. You may have to read what I wrote twice to figure out what we are trying to accomplish.

Save Selections:

The same holds true for the most minute details in your application design and ultimately in the widget you choose to use. Going against the common accepted practice has already introduced unneeded complication and confusion.

In future stories we will be looking at a number of controls and how they should be used effectively.  Soon I will have a forum setup (next few weeks) to continue on the discussions outside of the articles written here.