blogs | Karl Johnson

Friday January 26, 2007

RIA Usability is KEY : Part 1 : Always Provide User Feedback

Usability is key when it comes to building a great RIA. Super key! No matter how functional or pretty your app is, never forget about usability...never forget about the little guy! If you do, your app will fail. Even if every executive thinks it is the next best thing, if your user's can not use it intuitively, then they simply will not use it at all.

Developers: RIA != Website

One of the first rules of a good user experience is to always provide user feedback - don't leave your users in the dark and don't leave them hangin' while your app has to do something really tough. Tough things like loading a complex piece of the app, or loading a large (in file size) image. These are "tough" not because it is hard to code or hard for the Flash Player to do obviously, but because no matter how well you code your app, loading large files at runtime can take an indeterminable amount of time.

So let's make sure to handle this case right and always provide user feedback. Users quickly and naturally think the app has hung or crashed if they don't feel like they know what is going on. It is amazing how a user's feeling about an app can immediately change from negative to positive just because they see a little loading animation while they are waiting for the pieces to finish loading. Poor performance is no longer the first thing that comes to mind when your app is mentioned.

Preloader and loader graphics and animations are huge in Flex, and a fabulous way to provide a good user experience while your app is loading a large file, or especially when your app is loading its self. For the sake of showing just how easy it is to improve the usability and perceived performance of your RIA, let's do a quick and incredibly easy example of exactly what I am talking about:

Traditional web app: Launch

Your new RIA: Launch

Now this is obviously a very subtle enhancement, and my example is obviously a very watered down version of a RIA (to say the least), but using a technique like this wherever you are loading images or large pieces is a great idea, and there are a ton of ways to accomplish this. If you want to be able to present an image or component that changes based on how much of the image has been loaded so far, you will want to listen on the progress and complete events of your image and update the loader's graphical display to indicate the state of the load operation. You can use your own preloader swf, a ProgressBar component, or something else. This is probably the best user experience, since the user feels like they know when the operation will be complete. Of course, progress bars have had pitfalls since the beginning of software time, but for images and things like that, they work great for the most part.

You may have noticed that my example SWF does not indicate how much has loaded - that is because I implemented an indeterminate loading indicator. A lot of software today, including most of Microsoft's new installers, use these because they have decided that determinate progress graphics can be...well...worthless. That is not why I decided to go that route for this example though, I did it because I wanted to show you the absolutely easiest way to provide user feedback when it comes to doing something like loading an image. And here is how I did it (feel free to count the lines of code!):

Super Quick Loader Image:

	
<mx:Image id="loadingIcon" source="@Embed('loading.gif')" horizontalCenter="0" verticalCenter="0" 
   visible="{sceneImage.percentLoaded != 100}" />
<mx:Label text="Loading..." verticalCenter="18" horizontalCenter="0" color="#ffffff" fontSize="10" 
   visible="{sceneImage.percentLoaded != 100}" />

Entire App Code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#000000" >
	<mx:Button label="View Image" horizontalCenter="0" top="5" click="imageCanvas.visible = true;sceneImage.load()" />
	<mx:Canvas id="imageCanvas" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#000000" top="40" height="100%" width="100%" visible="false">
		<mx:Image id="sceneImage" autoLoad="false" source="http://www.cynergysystems.com/blogs/blogs/karl.johnson/Usability/car_small_1.jpg" verticalCenter="0" horizontalCenter="0" /> 
		<mx:Image id="loadingIcon" source="@Embed('loading.gif')" horizontalCenter="0" verticalCenter="0" visible="{sceneImage.percentLoaded != 100}" />
		<mx:Label text="Loading..." verticalCenter="18" horizontalCenter="0" color="#ffffff" fontSize="10" visible="{sceneImage.percentLoaded != 100}" />
	</mx:Canvas>
</mx:Application>

Notice I didn't have to implement a loader component, or listen on any events - I only had to bind my loading image and label to the percentLoaded property on the image component. We are binding to make sure that property does not equal 100, or 100% loaded. Inline binding like this is awesome in Flex, and makes life so much easier. Depending on your parent container, you will want to make sure to bind your visible AND includeInLayout properties to percentLoaded, or you may run into your loader image hiding but still taking up space. That won't however negatively affect it in a canvas container like this.

That really has to be the absolutely easiest way to quickly throw in a usability enhancement like this, so now you have no excuse to pass over a little detail that can have a big impact on a user's over experience with your RIA!

Maybe you found this useful, or maybe not. But the key takeaway should be that always involving the user and letting them know what is going on at all times is a big key to great usability in great software - and is also Part 1 of my RIA usability blog series!

Any comments, question or feedback, email me at karl.johnson [at] cynergysystems.com

|<