Form and Function

First a thanks to everyone who has commented and used the previous versions of the gauge component seen here.

A few weeks ago a publicly traded company (that has asked to remain anonymous) hired me to make some improvements to the gauge to meet some of their specific needs.  Some of the improvements are things that other people had asked for, so I offered to give them a discounted rate if we could keep the improvements under the original open source license.   It was more important to me that I be able to share the enhancements with the community than the additional revenue I would have generated to lock up the intellectual property.

So here is a list of the latest enhancements.

1. Bounce Effect can now be set on/off by a boolean useBounceEffect. (code changes in control.)

2. Tick Mark Alignment Fixed - Tick marks for the gauge skin now use a best fit algorithm to align exactly with the min/max angles (before they sometimes would not cover the full range. (code changes in skin)

3. A X-Offset style has been provided for the value label placement (code changes in skin and control)

4. Alert Levels: A popular request was the addition of alert levels, something that I had in the original gauge I built.  The gauge now supports contiguous alert levels by passing it an array of alertValues, alertColors, and alertAlphas.   The control expects that the alertColors and alertAlphas will have one element less than the alertValues, since the alertValues contains the additional min or max boundary element, and the colors/alphas apply to the range within the boundary described by the alertValue array. (code changes in skin and control)

5. Log AND Linear scale: This was by far the most complex enhancement.  The gauge now supports movement through a log scale as well as the original linear scale, and since my math skills seem to be stuck somewhere between 8th grade trig and 9th grade algebra it took me a while to figure out the algorithm to support not only programatic value assignments, but also when a user clicks along the  and sets the value directly - yes now I remember that, Math.pow(10,value) is the inverse of Math.log(value)/Math.LN10 :)   This log scale also gets applied with the alert ranges, and the skin leverages the now public caclulateAngleFromValue() function exposed by the control itself - which takes into account the min/max value range, the min/max angle range, AND the linear or log scale. (code changes in control)

I have tried my best to run it through a bunch of tests and ferret out any bugs, but if anyone finds something I missed please post and comment, and I will try my best to fix or point you in the right direction.  Once again this code is posted under the every friendly MIT license.

Check out the sample here, with full source code.

For any designers or UX people out there, I don't know about you, but I have yet to find a wire-framing tool/software that beats a whiteboard or sketch-pad, but I think I have found something that comes pretty close.

Making wireframes is an essential part of the design process (at least for me) that allows me to quickly brainstorm layouts and different configurations for an overall application or dashboard UI.  Most illustration tools that I am familar with (like Illustrator or Flash Pro) are just too cumbersome and have way too many settings/details that are completely irrelevant to the wireframing process.  Tools like Visio (which I just can't stand) and SmartDraw come a little closer, but they have all sorts of awkward UI issues that at best, slow down the creative process and in some cases completely hinder it due to the way they expect you to create content.

Well, after many years, I think I have found a very good tool to make my wire frames in, and ironically the software was never explicitly designed to make drawings.  What I am referring to is Apple's Numbers - the supposed Excel replacement.  Well, as a replacement for Excel it doesn't even come close - for doing any type of semi-sophisticated numeric modeling it just doesn't cut it.  

But, as a very easy to use, quick and easy, creative wireframe tool it is superb.  It has all the basic shapes I could ask for, sans all the detailed property controls that make things tedious in most other tools.  The inspector panel allows me to create sophisticated gradients, fills, strokes and best of all, it has auto-align/snapping capabilities built right into its WYSIWYG interface.  Most of my wire-frames are some form of nested rectangles, and this tool just lends itself to the task beautifully.  Because of the way they designed numbers, it is a layout tool first, and and a spreadsheet second.  So you don't even need to have a worksheet at all, you can just have a blank canvas and start dropping images, shapes, text, etc.   Add the fact that you have an automatic export to PDF and it makes it ideal for delivering to clients and end-users.

For me it has been very liberating, and one of the first times I felt a software tool actually accelerated my productivity for doing this type of work, versus just being a tedious step I needed to do to translate my whiteboard/paper sketches. 

Anyone running on OS X and doing any type of wire-framing work should give it a try, I would be curious what other designers think.

Well, it looks like it is official.  I will be speaking at MAX 2008 this year on Data Visualization with Flex.  I am still working out the final details of the presentation.  When I spoke on the same topic in 2006, I did a detailed walkthrough of building a dashboard.  This year, I think I will change it up a bit and more do some highlights of what is possible with little code tidbits and how-to's.  I think this might appeal to a wider audience (and potentially shorter attention spans since my session is going to be at 3:30 on Wednesday November 19th, the last day.)

I would love to get some feedback from the community as to what level to target the session.  Should I stick with beginner level material (i.e. here are all the available components and what they do, or go to a more intermediate advanced level?)   Any comments very welcomed, as I still have a couple of weeks to flush out the preso.