Animation without aggravation

Happy New Year. Now with all those holidays behind me I can get back to blogging more regularly. To start off the year, I thought I would start with an example from Klok.

I recently was asked how I accomplished the animation when minimizing the left panel in Klok. It doesn't get much easier than this folks. This is one of those things that seems like it would be difficult to accomplish but Flex really does all the work for you.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
 <mx:HBox width="100%" height="100%">
  <mx:Canvas height="100%" width="200" backgroundColor="#ff0000" resizeEffect="Resize" id="leftPanel"/>
  <mx:Canvas height="100%" width="100%" backgroundColor="#0000ff"/>
 </mx:HBox>
 
 <mx:Button click="leftPanel.width=10" label="Shrink It"/>
 <mx:Button click="leftPanel.width=200" label="Grow It"/>

</mx:Application>

Basically, all the magic happens by setting the resizeEffect. This causes the change in size to be animated. Setting the resizeEffect to the string "Resize" will cause an instance of mx.effects.Resize to be created with the default properties. If you want control over those properties, it isn't much more complicated.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import mx.effects.easing.Bounce;
  ]]>
 </mx:Script>
 <mx:Resize duration="1000" id="myResize" easingFunction="{Bounce.easeOut}"/>
 <mx:HBox width="100%" height="100%">
  <mx:Canvas height="100%" width="200" backgroundColor="#ff0000" resizeEffect="{myResize}" id="leftPanel"/>
  <mx:Canvas height="100%" width="100%" backgroundColor="#0000ff"/>
  
 </mx:HBox>
 <mx:Button click="leftPanel.width=10" label="Shrink It"/>
 <mx:Button click="leftPanel.width=200" label="Grow It"/>
</mx:Application>

Notice that in both examples the buttons aren't calling any methods to kick off the animation. The buttons just set the width property. Pretty simple isn't it?

In reality you probably would be changing the width inside a method, but the important thing is that you don't have to tell the animation to "play". It is just hooked up view the resizeEffect attribute. There are many effect attributes that you can set which can allow you to do some cool stuff.

Flexbuilder 3 Beta 3 upgrade issues

Yesterday I downloaded and installed the new beta of Flexbuilder 3 and I ran into a couple of problems. Now before anyone starts to think that this is a Flexbuilder 3 Beta 3 complaint, it isn’t. The problems I had were easily fixed by following the instructions in the release notes. For anyone interested, the problems I had were caused by reusing a workspace from Beta 2 in Beta 3. As the release notes indicate, you need to force Flexbuilder to reinitialize the workspace. The instructions are clearly specified.

I like many users don’t like to “read the manual” so I immediately went in search of an answer on the web. So, I figured I would save someone the trouble by posting specifically about it.

Worst UI Ever? - Links

First of all, let me say that I love Ebay. How else would I be able to sell my extra Hannah Montana tickets? However, occassionally I find myself asking "huh?" Take this list of links for example:

What do you think the difference between Seller's Guide, Seller Central and Seller Tools is? I clicked on each of them looking for information about the Buy it Now option. I couldn't find any information on any of the resulting pages easily. Eventually I found my way back to the Seller's Guide, which is apparently the code name for Seller's Help, and found it by searching. The first time I was on the Seller's Guide page, I completely overlooked the search box since I had just done a search on the previous screen in the main search box which apparently only searches items. When searching for Buy it Now, I received, as you might expect, over 2000 products.

Here's the problem. The links all sound like the same thing based on their names. They could be slightly improved by adding tooltips assuming it is possible to articulate the difference in 3 to 10 words. To add to the problem, even after visiting those pages, I am still not sure what the difference between Seller Central and Seller Tools is.

The bottom line is that when you decide to add one more link to a menu, it is important to make sure it makes sense in the context off all the other links. All by themselves, each would make perfect sense, but when put together the problem becomes apparent.

Required reading for RIA designers and product owners

With the holiday season usually comes less time and more work. Funny how that works. In the little spare time I have left, I stumbled upon what I think is a must read for anyone working on RIAs. I found Magic Ink - Information Software and the Graphical Interface to be full of useful information for both designers and product owners. One of the biggest challenges for UI designers, especially living in the Agile world, is convincing the rest of the team that slowing down and really "designing" the interface is valuable and in fact necessary for success.

The author makes numerous references to the work of Edward Tufte but also extends some of the concepts of Tufte by illustrating how and why the techniques he suggests can work in an interactive medium such as RIAs.

While the RIA technology described is not Flex or Silverlight, I think those two technologies are likely to be the most common platform for RIA development. So while reading Magic Ink, don't get hung up on the fact that the applications mentioned are HTML or desktop widgets. The concepts apply to any and all RIA platforms.

Flex Builder 3 Pricing Confusion

I don’t think I am the only one confused by the pricing structure of Flex Builder 2/3. So, here is how I understand it. Please, correct me if I am wrong here.

Here are the options for those who don’t already own Flex Builder 2 licenses but want Flex Builder 3 Professional:

1. Buy Flex Builder 2 now for $249 with the additional $99 maintenance which will allow you to get the free upgrade to Flex Builder 3 Standard. At which time, you would need to upgrade to Flex Builder 3 Professional. The cost for that upgrade doesn’t seem to be listed anywhere
2. Buy Flex Builder 2 with Charting now for $699 with the additional $299 maintenance which would allow the free upgrade to Flex Builder 3 Professional

If you already own Flex Builder 2, I am totally unclear of what the upgrade path is. Can I just buy maintenance? Or is there some other upgrade for pre-existing licenses?

What about teams of developers that are using Flex Builder 3 Professional but have a separate build machine for production builds? Do you need a separate license for that in order to use the Data Visualization stuff? I haven't seen this mentioned anywhere.

I really think that Adobe has dropped the ball here on this. It is not a great user experience when you have a product that plenty of people want to buy, but your customers aren’t sure how to go about the best way to get it.

Please comment, I am just as confused as everyone else.

Worst UI Ever? - Date Entry

Those of you who have read my other "Worst UI Ever" posts may recognize that this one comes from the same application as my last post on the topic. I don't mean to pick on this one application. Its just that I use it so frequently that I notice these problems.

Here's a screen shot of what happens when you try to submit an expense report with dates entered in the "wrong" format. Why's "wrong" in quotes? The real questions is "wrong to who?" From a system perspective, a developer would likely thing that all dates should be entered in a particular format. Sounds familiar? The reality is though, that the "right" format for date entry is the one that the user things is correct. If I, for example, live in the US then I might be used to something like 11/12/2007. However in another part of the world I might use 12/11/2007. So how should any system handle this since both of those could be interpreted as valid dates, albeit incorrect ones. If the system doesn't know what format the user wants to use then it is ambiguous.

Just Getting Picky
So what is a designer or developer to do? Enter the "Date Picker" control. This little gem has been the solution to this problem for quite a while. So no more problems with date formats because now you don't enter one at all, you simply "pick" one. If you are reading some sarcasm in the tone of this, you are not imagining it.

The date picker control is a handy little calendar that pops up when you try to enter a date into an input. The calendar, usually defaults to the current month. It has to default to something, so why not? The problem is that thought really needs to be put into the use of these things. Imagine for a moment that you are entering your birthdate and the calendar defaults to this month. Unless you were "born yesterday" this will probably cause a lot of extra navigation to enter the date that is really on the tip of your tounge, or fingers. If only you could just type it in.

Does it ever make sense to use a date picker? Of course. For example, in a scheduling application where people might be interested in setting up a meeting for next thursday, it might be nice to allow the user to choose that date rather than enter it. The difference is in how the user thinks of the particular date in mind. If the user thinks "I was born on February 1, 1970" then that is different than a user thinking "Two weeks from this past monday". This difference in mental model, should drive a difference in the UI.

So we have dispensed with the date picker for the application in question. Luckily, the application actually allows date entry as well as date picking. However, in the screenshot, the date entry is what caused my "error". The problem is really that the application doesn't do a good job of accepting the format I intended to enter. It also doesn't even do a good job of telling me what format it expects. If you look in the screenshot, it is displayed as a TIP. Now to me, a tip would be something helpful but not crucial to me using the application. It turns out that the format really was crucial given that my mistake lead to 4 separate error messages indicating that the format was incorrect, without once suggesting the format it expected.

The one thing this application does do well is when it gives you the suggested format, it shows you today's date. I have seen many applications which do something like this "(MM/DD/YYYY)" This format is very familiar to developers but would all your typical users understand this. I have even seen some that say "DD-MON-YYYY". Clearly the MON means moth, but why should users have to decode that. Showing "05-Nov-2007" (It was November 5th when I captured the screen) is much better since the context of the date is at least in the user's frame of mind. Most people at least know what month and year they are currently in.

The Bottom Line

• If at all possible let the user enter the date in the format they want
• If you can't, give the user a clear indication of the expected format using the current date as the example
• Use date pickers for dates that user's don't know by date such as "next tuesday"
• Don't tell the user they made an error if the software can't figure out what they meant. It is never a good idea to tell the user that what they enterd as "11/05/2007" is an "invalid" date when it obviously is.

Comic Relief for Designers

This is apparently the week of "I normally don't do this but...". However, I had to pass this along since it is so funny. Every designer out there, whether print or web, will be able to relate to this video. If you aren't a designer then this might not seem funny at all to you... which is why it IS funny to us.

It is rather ironic that the company that put this out there (I think anyway) , Agency Fusion, is a development company not a design company.