Klok - Dontate today and help those in need

Don't forget that half of every donation made today (December 31, 2009) will go to local food pantries and shelters to help those in need this winter and help support the development of Klok. Plus when you donate, you get early access to the Klok 2 Beta.

For more details, visit the Klok Beta Program page

Klok is now on Facebook

Some of you may have noticed the "Klok on Facebook" link over on the right. For those of you have not noticed, now's your chance to click on over to the Klok Facebook Page and become a fan now. My goal is to have 100 fans by New Year's eve. Help me get there by becoming a fan now.

New build of Klok 2 adds some long awaited features

The latest build (1.13) of Klok beta 2 includes some of the most requested features such as:

• Added comments to timesheets
• Added preferences for time and date formatting
• Added preference for 24 hour time display
• Added column view to dashboard view
• Added project code column to timesheet
• Window size and position is now remembered between sessions

Get the beta today at http://klok.mcgraphix.com/klok/betaProgram.htm

UPDATE: New Klok 2.0 Beta update may require uninstall of earlier beta

I discovered the problem with the latest version of the Klok 2 Beta update. Unfortunately, the issue was required that you uninstall the old version and then install the new version. The issue had to due with the certificate I used to sign the AIR file. The fix for this issue will be in an update tonight. Unfortunately, you will need to uninstall and reinstall again to correct the problem.

If you can wait until tomorrow, I would hold off installing todays update (Klok 2 Beta 1.10) until tomorrow. Sorry for the inconvenience.

This issue has been fixed in version Klok 2 Beta 1.11. If you have joined the beta program, you can download the latest version from the Beta 2 page.

New Klok 2.0 Beta update may require uninstall of earlier beta

These instructions still apply if you are trying to upgrade any version of the Beta to the current release version.

UPDATE: This issue has be fixed in Klok 2.0 Beta 1.11. If you followed the instructions below to install 1.10, you will need to follow them again to install 1.11

Sorry folks. But if you are running the Klok 2.0 beta version, then you may need to uninstall the current version of the beta before installing Klok 2.0 Beta 1.10. I haven't quite pinpointed the cause yet. You will know whether you need to uninstall if you see the following message when installing the latest update.

• If you get this message, uninstall Klok2 from the Programs control panel and try installing again.
• If you get the message again, you will need to delete the Klok2 folder (which should be empty) from your Program Files (Program Files(x86) on 64 bit Windows)

On a positive note, this update fixes the freezing problem when opening the Klok connector configuration panel when no connector is installed (KLOK-577, KLOK-573) and adds the ability to restore a maximized application (KLOK-575, KLOK-578).

If you have any problems, comment here, email me or file a bug at http://bugs.mcgraphix.com

Download Klok 2.0 Beta and help those in need (part 2)

Thanks to everyone who responding to my initial post. The response has been great so far. One thing that people have pointed out so far is that after donating you are not taken directly to the download page as expected. Don't worry, when I receive the notification email, I will send you the link directly. Please be patient as it may take me a few minutes to be notified.

As an added bonus for making a donation, you will automatically be given access to the Klok 2 beta. Since more of you have asked to be included in the beta program than I had spots available, I was not able to include everyone initially. While I had intended to keep the beta population small for my own convenience I feel that this is a great way to help.

For anyone who doesn't know, Klok is an Timetracking application built with Adobe Flex and deployed as an Adobe AIR application. More information can be found at the official Klok website at http://klok.mcgraphix.com

Download Klok 2.0 Beta and help those in need

While sitting around the table at Thanksgiving a couple weeks ago, it was inevitable that you hear people say things like “I can’t eat another bite”. It was at that moment this year where I thought to myself how crazy it is that while we sit around with more food that we can eat there are others that don’t have food (not to mention clothing and shelter)… not just on Thanksgiving, but every day.

So, with Thanksgiving a distant memory and Christmas and Chanukah right around the corner, I had a thought about how we can help make a difference for those struggling this year. So for now until the end of the year half of every donation made to support Klok, will be donated to various local charities and food pantries.

As an added bonus for making a donation, you will automatically be given access to the Klok 2 beta. Since more of you have asked to be included in the beta program than I had spots available, I was not able to include everyone initially. While I had intended to keep the beta population small for my own convenience I feel that this is a great way to help.

For anyone who doesn't know, Klok is an Timetracking application built with Adobe Flex and deployed as an Adobe AIR application. More information can be found at the official Klok website at http://klok.mcgraphix.com

Klok + Klokwork + iPhone = :-)

I lost count of the number of people who emailed me telling me how great it would be if there was some way to track time in Klok from their iPhone. Well we are getting ready to kick off the private beta of Klokwork, a hosted service for tracking time with Klok, which has the capability of syncing up time tracked from an iPhone (or any smartphone with a web browser) with time tracked from the Klok 2 desktop application.

Before the rumor mills start churning out false information, let me clarify what this is and isn't.

This is not:

• an AIR application running on an iPhone
• a Flex/Flash application running in mobile Safari
• connecting the iPhone directly to the local SQLite databased used by Klok
• going to be sold through the App store

This is:

• a JQuery + JQTouch based AJAX application running in mobile Safari
• able to be added to the home screen and accessed like any other application
• connected to a hosted Java-based web application called Klokwork
• synchronized with the Klok desktop application using Klok's new pluggable connector architecture

Agile and UX - I couldn't have said this better myself

Although... I think I have said almost exactly this a number of times.

If you know me, you know that I usually don't completely agree with Jakob Nielsen. However, in this post about Agile and UX, I really can't disagree with anything he says in the post. I haven't read the entire report (I don't have an extra $148 at the moment) so it is possible that I will eventually find something that I can disagree with.

One of the things that really stands out for me is this quote:

You can't just design individual features; they have to fit together into a coherent whole — a whole that must be designed as well. Bottom-up user interface design equals a confused total user experience (the Linux syndrome)

I am not really a Linux user so I can't speak to the User Experience of Linux in general, but the idea that "Bottom-up" design leads to poor results is just plain obvious. Not to mention in my experience I have seen it happen numerous times. In contrast I have see first hand how a small investment "up front" in design proves to really pay off.

More Klok 2 screenshots

Bear with me everyone. Trying to coordinate a beta program takes a bit more time than I imagined. Combine that with trying to wrap up the beta itself, and I am going slightly slower than expected.

Here are some screenshots of Klok 2 with some of the new features shown.

The main Klok 2 interface.

The Klok 2 Synchronization panel (With Klokwork connector installed)

The new Week picker

The new Time Picker

The Project view (with new Add Sub Project button) and Description tab visible

Sneak Peek at Klok 2.0

More information is coming soon. There has been an amazing response to my request for beta testers. I haven't had a chance to contact everyone yet. So if you haven't heard from me, please be patient. In the meantime, here is a screenshot.

Flex Component - TimeField Update

Thanks for the comments everyone. I have made a few changes to my TimePicker component based on some of the comments. The example now has the Klok 2 skin applied to it.

You can see the updated version here.

View the sample here

Flex Component - TimeField - Feedback needed

While working on Klok, I have tried several different mechanisms for entering the start time or end time of an entry. Having looked at a bunch of examples such as the Yahoo Astra one, this one, this one and this one I started to see a pattern. Most of the examples are "stepper" based controls. What this means is that to get from one time to a different time it involves a varying number of clicks depending on the times. For example, if the control's current time was 3:35 AM and you need to change it to 12:19 PM, it requires a whole bunch of steps to get there.

What I really wanted was a way to pick the time in the fewest number of clicks and allow for just typing in the time directly if you happen to prefer that. The result is a true time "picker" control that is loosely based on the way a DateField works. There is still some work to be done on the skin but I think I am on the right path.

View the sample here

To use, just click the icon and pick the time. Or, just enter the time directly. The following formats are accepted:

• 1:49 PM
• 1P (Shortcut for entering 1:00 PM)
• 13:49

This control is my proposed solution to be used in Klok 2.

Please give it a try and see if it works for you. (Please try to break it if possible.) Whether you like it or not, please leave some comments so I can improve upon it.

UPDATE - I made some changes based on the comments and updated the demo. Which now has the Klok 2 skin applied to it.

Introducing KlokWork and Klok 2.0 Beta Programs

I know it has been quite some time since I put out an update for Klok. In that time, I have been working on it... I promise. We have made the decision to go right to version 2.0. This is mainly because of the required changes to the way data was being stored in 1.x. Version 2 stores data in two ways. The standalone version stores its data in a local SQLite database. The version with KlokWork embedded, connects to an external system to store its data. This will be able to connect to external systems such as FreshBooks and Harvest as well as home grown systems that can expose an AMF based API.

So we are getting ready to have a select few users and small teams try out some of the new functionality. For more information on this program visit the Klok Beta Program page.

FlashBuilder 4 silently fails while launching

Imagine this... You double click the icon to launch FlashBuilder and see the splash screen show up. Then you glance away from the screen and when you look back, FlashBuilder isn't running. No error Alert. No phantom process running in task manager... just nothing at all.

This happened a few times because I started to think I was imagining the part where I clicked the icon and saw the splash screen. So I would try to launch it again. It turns out that I am not going mad. FlashBuilder was really failing silently and just failing to launch. I tried deleting my workspace and launching again, but every time I did that it would recreate the workspace directory automatically and then fail to start.

Searching Google for "FlashBuilder won't start" yielded only one promising result but >the link was to a Jira defect that I can't see. I was about to call the professionals at ITFixed to have someone perform CPR on my machine when I figured I would try one last thing. Since FlashBuilder is basically Eclipse, I tried the old -clean command and like magic it came back to life.

Just open a command prompt to the directory where FlashBuilder is installed (On Vista: C:\Program Files (x86)\Adobe\Flash Builder Beta2) and execute the magic command:

Gumbo.exe -clean

I'm not quite sure what caused the problem in the first place. I had gotten a few out of memory errors (even though my machine has 4GB or RAM) but I can't say for sure that the problems are related.

LiveCycle Data Services 3 - Pricing

I was poking around the Adobe Labs site and came across the Model Driven Development Getting Started Guide. This looks really, really cool. However, I couldn't find any information regarding which version of LiveCycle DS it will be part of. Given the hype about the new capabilities of Flash Building and LiveCycle, I'm sure there are many developers getting very excited about using it in real world projects. It definitely seems like it can save a lot of time.

I am anxious to download it and try it out, but before I put the time and effort into it, I would like to know if it is really feasible for the types of projects I work on and the budgets I need to work within. If there is going to be a $5000 per CPU type price tag on it, I will have a hard time justifying it to my clients.

To put my conspiracy theorist hat on for a moment, I wonder if Adobe is withholding the price until we all get "hooked." Once hooked, we may never want to go back to writing server side code which would allow them to charge us an arm and a leg.

Adobe InContext Editing problem with SIFR

I recently had an opportunity to try out InContext Editing on a client project. Of course, 5 minutes after hooking it up I ran into a problem. If you happen to be using sIFR to add nice typography to your site, you will notice two problems.

1. First, the sIFR Flash content appears to be in front of the InContext Editing interface;
2. Second, the sIFR replaced text is not editable. If you make an editable region around sIFR replaced text, you get an error when you edit the page.

Luckily, there is a simple solution to the problem. If you open up the sifr.js file you will immediately notice that the Javascript is compressed in such way that it is pretty unfriendly. However, since luck is on our side, the only line you need to edit is human-readable. Scroll to the bottom of the file and you will see a line that looks like this:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac && (!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100)) {

That IF statement checks to make sure sIFR is ready to be setup. In our case what we want to do is make sure that that condition checks to see if you are in InContext Editing. We can tell by looking at the top.document.location to see if the page that is currently in the location bar is the ice/ide.html page. Changing the condition above to:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac && (!sIFR.UA.bIsWebKit || sIFR.UA.nWebKitVersion >= 100) && top.document.location.toString().indexOf("ice/ide.html") <= 0){

Doing so will cause sIFR to be enabled unless you are in the InContext Editor...problem solved.

Vista 64 bit and Type 1 fonts

I came across a weird problem today where after installing a Type 1 font, it was still not available in Illustrator or Photoshop but was available in MS Word. It turns out that you need to install it in the normal fonts folder and put it in C:\Program Files (x86)\Common Files\Adobe\Fonts as well.

I don't know if this violates any font licenses so you should verify that you are allowed to have two copies installed this way.

I hate error messages like this

TypeError: Error #2007: Parameter blendMode must be non-null.

I was working away on an AIR application and all of a sudden I started seeing this error message. It would show up when I had focus on something and clicked a button that removed the component's parent from the stage. As a result of the error, my app would stop working in all kinds of weird ways. For example, TabNavigators stopped working, but List controls worked fine. Some changes to my display list would work ok while others would result in part of the screen going blank.

I will spare the details of how I figured out what the problem was, but the root cause seemed to be that I was compiling my application with the 3.2 Flex SDK but I was compiling one of the Library projects that I was depending on with the 3.3 SDK.

Setting them all to the same version fixed the problem.

I didn't see any other posts through a Google search of that error, so I figured I would post it here.

It IS possible to do this in an AIR Application...!

A couple hours ago, I posted a question regarding loading classes from a local SWF file. I poked around a bit more thinking that the problem had something to do with the ApplicationDomain. I took another look at the LiveDocs for ApplicationDomain and tried out the example on that screen without any luck. I even commented on the LiveDoc page. I was about to go file a bug but figured I would do one more Google search on the subject. I found this a post at Actionscript.org that seemed to describe the same problem. One on the replies mentioned that he was able to work around the problem by putting a half second delay betweeen the loading of the swf and any attempt to access the classes. So, I took the ClassLoader example from the ApplicationDomain LiveDoc example and added a 500ms delay to the complete handler:

private function completeHandler(e:Event):void {
      setTimeout(function(...params) {
         params[0].dispatchEvent(new Event(ClassLoader.CLASS_LOADED));
       }, 1000, this);
     }

After that small change I was able to load the classes from the external SWF. However, this doesn't solve the FlexUnit problem because internally, FlexUnit loads the test classes using getDefinitionByName(). Even if you pass the test cases in as Classes, it gets the qualified name and then calls getDefinitionByName() resulting in the error.

Is this possible in an AIR application?

I have what appears to be a common question regarding a requirement that has come up two of my current AIR application projects. Here is the basic requirement.

The ability for an installed AIR application, to access and load Classes from a separate SWF that is located on the file system

I consider this to be a "plugin" architecture. Let me give you a concrete example. I am working on various AIR projects at any one time. For each I write FlexUnit tests. Because my tests are used to test my AIR applications, they need access to the AIR specific libraries. Rather than compile a unique FlexUnitRunner for each set of tests, I would like to create a single FlexUnitRunner application that allows me to load and run the tests from any of my projects.

I want to be able to have my test projects get built automatically when I change a class in FlexBuilder and then be able to hit a "refresh" button on my FlexUnitRunner application to rerun the tests with the changes.

My initial thought was that I could package my unit tests in a SWC and then have my runner unzip the SWC, pull out the library.swf, load it using RSLItem, SWFLoader or Loader. Then get amd instantiate my TestSuite from that set of tests and run it. This seemed to work in AIR 1.1 but doesn't work in AIR 1.5. The result in 1.5 is always "the Variable PreSaveProcessorTest is not defined"

My second thought was to compile a Module and load that at run time. I can load the module, but I can't figure out how to use AIR specific classes File, FileStream, etc. in the module. There is no option to "include Adobe AIR Libraries" like there is when compiling an SWC.

If I put my tests in a SWC project and reference them from my Module, the module can't use any of my classes that reference File for example. This isn't necessarily needed for my FlexUnit problem.

But if I reference the SWC project from my Module and try to get an instance of my ModuleTestSuite class, I can instantiate it. However I then get a FlexUnit error when I try to FlexUnitCore.run(...) my suite that says: Property metaData not found on ModuleTestSuite and there is no default value.

I have read many articles and posts regarding this, but none do exactly what I want:

http://weblogs.macromedia.com/emalasky/archives/2008/04/remote_plugins.html

http://stackoverflow.com/questions/344705/building-a-plugin-architecture-with-adobe-air

http://livedocs.adobe.com/flex/3/loading_applications.pdf

Has anyone actually got a working example of how this kind of thing can be done in AIR 1.5?

This RSLItem method is exactly what I was doing in Klok, to allow installation of my 3rd party app connectors at runtime. However, that no longer seems to work.

If someone from Adobe can show a working example that would be really helpful. I imagine there are quite a number of people wondering how to create a "plugin" architecture.

UPDATE: I resolved the issue with the FlexUnit error but I am now back to "the Variable PreSaveProcessorTest is not defined". I think the issue is that FlexUnit is doing a getDefinitionByName() which seems to be the problem.

Designing RIAs...the Right Way

Anyone who knows me will tell you that I frequently preach that the only way to successfully design an application that is easy to use and meets user goals is to take a step back and think about it as a whole. I often get pushback with the usual "That sounds like waterfall to me" argument. Like I have said before, it doesn't matter what it is called to me as long as it works.

So the folks at Forrester set out to investigate how to create successful RIAs. The report focuses mostly on Cynergy who is one of the big guys in the field of RIA development (so they know what they are doing). I have to say that I am not surprised by the findings or by the way Cynergy designs and builds applications. To me it seems like common sense. But I am glad that this "official" report calls some attention to it.

You can buy the report from Forrester or get a free PDF of it from Cynergy.

Oracle Buys Sun - The future or MySQL

With the news that Oracle is to buy Sun, I can't help but wonder what will happen to MySQL. Maybe it won't mean anything. Any thoughts?

Using Blaze DS in Commercial Applications

A couple of days ago (Apr. 15, 2009) a post popped up on my blog reader titled "Using BlazeDS in Commercial products" which immediately caught my interest. I just assumed that you could use it in commercial products but I have never actually looked into the license. Basically the post indicated that you can't use BlazeDS in commercial products without buying an OEM license from Adobe but you can use it for internal applications. Of course I immediately commented and said that given that, why wouldn't I just always use GraniteDS. I went back a few hours later and found that the blog post was not even there anymore, let alone my comment.

So my question has yet to be answered... If I can't use the opensource BlazeDS for anything but internal applications, why would I spend any effort in every getting familiar with it? 

If you want to read the original post, you can view the cached version here, at least for now.

Arabic Text as a Flex Button label?

The Text Layout Framework that Adobe has made available on the labs site is a very cool display of the capabilities of Flash Player. However, what seems to be suspiciously missing from all the demos is an example of how to use Arabic text on a button. Just putting arabic in the MXML as the button label obviously doesn't work (otherwise... I wouldn't be posting this). What happens is the letters look like they are in reverse order. I can't read Arabic, but I don't think that would make much sense. Especially since none of the letters get connected with the appropriate ligatures.

Looking at the source code for the examples doesn't shed any light on the problem. If you have seen this done please comment with an example.

Klok - Linux Support - finally

If you have tried Klok on Linux, you may have noticed that most fo the drag and drop functions didn't work. It turns out that, there were some issues in the AIR runtime that prevented this from working correctly. I have been told the the AIR 1.5.1  runtime for Linux fixes this issue. I have tested it out with Ubuntu and I have had one report of SUSE working correctly too. If you are using Linux upgrade you AIR runtime and let me know if you still see issues by submitting a bug report. Please be sure to specify your version of Linux.

Worst UI Ever - Another Error Message

Its been a while since I last posted a Worst UI Ever entry. It seemed like most of my posts were about error messages and here is another one for the list.

This was an error message I received when activation a gift card. The form itself could not be much simpler, but the error message left a lot to be desired. What lead me to the error message was another seemingly simple set of instructions. In order to fully understand the situation, here is the quick back story. Stay with me, I'll be quick. As you have read on my blog I recently bought an IPhone. When I did so, my wife and I both switched to AT&T. When we got our phones we got gift cards in the mail as rebates for some accessories we each purchased. So we each got a gift card in the mail today.

The instructions said that you needed to go to this website and enter the card number and you will need to use your phone number ending in 8... yes that's right, the phone number ending in 8. Now, I'm no statistician but it seems fairly likely that you may have two phone numbers in a family that both end in the same digit... as was our case.

Given the situation, one of my phone numbers was correct, the other was wrong so I was presented with this form with a 1 in 2 chance of "failing". My first flip of the coin was incorrect, resulting in the error message. The first problem with this process is the failure of the system to understand users beyond the data associated with the card. It is true that the card in question was associated with a specific phone number ending in 8, but there is more to my and my account with AT&T than just that. If that level of consideration could not be built into the system, then at least the system that prints the letter that is mailed with the card should give you more than the last digit of the phone number. Using the last two digits would dramatically reduce the liklihood of getting this error.

The second, more obivious problem was that the error message was obviously written by a programmer. The fact that there is nothing on the screen labeled as a PassCode is more than a little confusing. Here is a rule for anyone involved with delivering a software product:

"Don't let programmers write text that is presented to the user."

Chances are, they don't want that responsibility anyway.

Programmatic Yahoo Skin Library update 2

I have just posted another update to the Yahoo Programmatic Skins. This update includes the Radio Button, TabBar/TabNavigator, and Accordion skins.

You can see the demo and download the source here.

Free Flex Component - Gradient Editor

I can't take credit for this component, but I came across it and thought is was pretty useful. It was created by Mariusz Tkaczyk (http://mariosh.com/)The original post is a few months old and I don't remember ever reading about it, so I figured that many of us may have never seen it. The screenshot below is from his blog, where you can download the source.

PixelBender Filter required... I think?

If you read my blog you know that I don't currently have a Mac. This is true, however I have used enough of them to really fall in love with some of the UI details. One of them is the way in which when you minimize a window it kind of warps as it shrinks into the dock.

I don't know much about PixelBender effects, but this seems like something that could be accomplished. I am not even sure what keywords to use on Google to search for such an example. So, if you know of an example of how that effect might be accomplished in Flex using PixelBender (or without using PixelBender) I would really like to see it.

Programmatic Yahoo Skin Library update

I have added some new skins to my programmatic version of the Yahoo Skin Library. The new additions are the ComboBox, CheckBox, PanelTitleBar, PanelControlBar, PanelCloseButton, ToggleButtonBar.

The demo below is the actual Yahoo Skin Demo MXML with my CSS attached. So, you will see that not every component in it is styled correctly yet. As I add new skins to the library, this demo will be updated.

You can see the demo and download the source here

The Case Against Flex-Based App UIs...Really?

Last week, someone pointed out to me this article from intelligententerprise.com and asked for my thoughts on the author's arguments. In his article the author compares RIAs built with Flex to those built with Java Applets. While there are similarities between the two conceptually, any Flex developers who experienced building an enterprise application with AWT and Java 1.1 will surely agree that they have many differences.

So, here is my take on his "arguments".

"They almost always violate web accessibility guidelines"

No platform for web-based applications gives you accessibility entirely for free. Flash(Flex), AJAX and even web 1.0 HTML applications require effort to make them accessible. Flex gives developers an API to make applications keyboard accessible and able to be used by JAWS. If I am not mistaken, this capability existed with Flex before any AJAX framework had it. One could argue that making a straight HTML application accessible is far easier than making a Flex or AJAX application accessible. However, there are a lot of other user experience benefits that you can't get with plain old HTML.

"They create support nightmares"

He seems to be confusing AIR with Flex. Flex is a technology used to build applications. AIR is a desktop runtime used to run applications. AIR applications could be created with Flex, Flash or AJAX. Like any desktop application, pushing updates is not as simple as web-based ones. However, AIR does provide the ability for automatic updates that is easy to implement. "The potential for trouble remains" sounds to me like "There is no problem now but someday there might be"... you could say that about any technology. Flex applications that run in the browser have very little need to worry about this type of issue. Adobe frequently updates the Flash player but maintains backwards compatibility better than anyone I have ever seen. Applications built for Flash 5 will still run in the Flash Player 10. The only changes that may have caused problems are some security changes. While this is something that could break backwards compatibility, I would argue that it is worth it in those cases.

"They are prone to performance problems"

Memory leaks are just as likely in non-Flex applications. With JavaScript (AJAX) based applications it is very easy to cause memory leaks. Even Microsoft points out some patterns that cause them (http://msdn.microsoft.com/en-us/library/bb250448.aspx). Good developers can watch out for the types of coding patterns that cause memory leaks. FlexBuilder has tools to help developers identify leaks. With AJAX applications, it is more difficult.

"You can't easily modify them"

This is probably the most outrageous claim on here. He clearly doesn't understand how Flex applications are built. Changing the look and feel is one of the key features of Flex. Scalenine.com and fillcolors.com both showcase the ability to change the appearance of Flex applications in some cases very dramatically. The decision to not allow this type of "skinning" is really a business decision not a technology limitation. The demo situation he describes is rather amusing. None of the problems he describes had anything to do with Flex as the technology. Rather, they point out the vendor’s lack of a good interaction designer. He points out that the answer they wanted to hear was "You can modify the UI yourself on a role-by-role basis, and our platform is properly tiered, so we can show you how to customize it in a release-safe way." This is exactly what a well-designed/well-implemented application does allow for…regardless of technology.

Yahoo Skin Library - Programatic version example with source

I am currently working on a project on which I am using the Yahoo Flex skin library. If you haven't taken a look, I suggest you check it out. In my opinion they look a little better than the default Halo skins.

The other day, a developer asked me why changes to the fillColors style were not working. I explained that the styles could not be changed using CSS because they were graphics. This led to the question of "How can I make a red version of the primaryButton?". I got about half way through my answer of "I can create a skin graphic for you" when I realized that this was a major drawback of the graphical skin.

So I set out to create a programatic version of the Yahoo skin library.




Check out the live version with source here.
UPDATE: I changed the demo app to be the actual Yahoo Skin Library demo application. When you launch it you will see that some of the components still have the Halo skins. As I finish each component skin, this file will be updated.

My immediate need was to create a button skin which is all I have so far. It still needs to be cleaned up a bit but I figured I would post the example and source code in case anyone else ran into the same problem. I plan to create the whole set so stay tuned. If you would like to contribute some skins for the other controls, feel free to post a comment.

User Experience Designers...Listen up!

A couple days ago I posted a question here (and on some other discussion lists) regarding how usability can fit into the Agile process. I revised it slightly and added some clarification:

What are the best methods you’ve experienced with regard to incorporating quality design & usability practices into Agile software development?

There is some debate in the software industry regarding the scope of UI design work to be completed before Agile software development can begin. What are your thoughts? When is a detailed prototype necessary? When is it not necessary?

I promised to post my thoughts so here they are.

The method that I am currently using involves some upfront design time which I consider the architecture phase. During this phase is when you gather and process all the data about various types of end users and their goals. Throughout the architecture phase, we work on low-fi wireframes and/or mockups that address high level global interaction patterns such as type of navigation, inline editing vs. popups vs. separate edit screens, etc. I liken this to the engineers' decisions to use a particular technology, library or persistence strategy. Some of this stuff needs to be thought out early since changes later are expensive and destabilizing. Because, end user satisfaction is a top priority for our customers, I propose doing usability testing during this phase (and all through development). 

While wire-frames and paper prototypes can certainly be tested, we have found that nothing works as well as a clickable prototype. Someone suggested above that just build the real thing and test that. We have repeatedly seen that a very detailed prototype can be built in 4 to 6 weeks where the actual product can take 6 -12 months. Of course with agile development you have something every 2 - 3 weeks but it does take a while to get to something that can be a true test of the user experience. The level of detail in the prototype and wireframes/mockups is really determined by the complexity of the interaction. If one pattern can be reused, there is no reason to prototype every use case of it.

This process can work very well but requires some commitment of time before development begins. This doesn't have to be a year long effort but depending on the type of application somewhere between weeks and months seems appropriate. Regardless of the amount of time required, this is often labeled "Anti-Agile or Waterfall". 

What lead me to asking my original question was my desire to know how others are doing it from a tactical perspective. Can the process I describe above scale? Is it truly anti-Agile? If it is, does that really matter if the result meets user's needs better? 

If the goal is to deliver really good software, not just really good code, I am ok with being slightly less Agile.

Do prototypes help or hinder the Interaction Design process

Almost ten years ago, Alan Cooper (author of About Face and The Inmates Are Running the Asylum and my personal hero) of Cooper wrote a journal article titled "The Perils of Prototyping". It made me think about today's software and the way in which we designers communicate our vision to developers. I posted a comment on that blog asking this question:

"Do the capabilities of today's tools and the expectations of today's users change the need for prototyping?"

The reason I ask is because it isn't as easy to test interaction design patterns on paper if they require visual transitions, sounds, tactile responsiveness (on touch screens), vibration (think Nintendo Wii).

I have seen numerous times that communicating complex interactions to developers with paper mockups, or even digital mockups, is far more difficult than showing a prototype that actually does what is required. 

I have also heard first hand from developers that say a prototype really helped them with the details. Not only does it display how the software should behave, it provides and idea of how it might be implemented. This might be unique to the fact that the prototype built with Flex was for an application that was also built in Flex. So there was the ability for direct reuse of custom components, etc.

What do you think. Is there value? Can it work in an Agile environment? Or is it still as unnecessary as it was ten years ago? 

User Experience Designers... speak up!

A colleague posed a question to me today that I think is a very important question:

What are the best methods you’ve experienced with regard to incorporating quality usability practices into Agile software development?

Before posting my answer, I am interested to hear what all of you think.

Handy IPhone app for... Flex/ActionScript developers?

Mike Chambers released a cool little reference guide for Actionscript for the IPhone. Now, to me, there seems to be something wrong with using an IPhone app to create RIAs that won't run on the IPhone. Plus, if I am in Flexbuilder working on a Flex app, the Actionscript reference is only a key (ok... two keys Shift + F2) away.

But, since I have a new found love for my IPhone, I will probably install this to check it out anyway.

For more info, visit Mike Chambers' blog or you can find it on the App Store.