What’s behind the pre-loader?
CursorManager.setBusyCursor();
When designing a new UI it’s important to delve inside the end user’s cerebral hemispheres to understand what drives users to perform the tasks they do.
The pre-loader as a concept has been around for a long time in various forms not necessarily related to web applications. It can be seen in the form of a support act when going to see a band, or the lighting before a thunder storm, or the clowns before the lion tamer. In one way or another the pre-loader has provided a way to distract the user from the time taken to get to their main goal at that given point in time.
Adobe has obviously has understood the necessity for the pre-loader concept and have included pre-loading functionality inside the flash component library, and more recently Flex. Flex also has the capability of setting the busy cursor on service request thus emphasising the importance of notifying the user and keeping them aware that that data will appear to a screen near them. Of course this type of distraction is minimal, however providing something that is too distracting may result in a slight loss in the ability for the user to focus back on the task of interest.
I remember reading about a case study about a property owner of a large corporate building. Not a day would go past without a complaint about the building’s lift and how long it took to arrive in the lobby. It came to the stage where something needed to be done about this. For the owner there were two obvious solutions, one would be to spend thousands on getting the lift replaced or let the issue go and continue being at the end of the complaint stream. An associate suggested that the owner get a psychologist in, they agreed to bring him in after much speculation. His suggestion was not to worry about replacing the lift but to fit full length mirrors in the lobby. The mirrors were installed and as a result not a single complaint was received from that point on.
In this case the mirrors were the pre-loader and the data was the lift. People were distracted by the fact that they could look at themselves while waiting for the lift (there was probably some sort of Flexing involved too). It was a very simple yet elegant solution.
Inside the flex applications that I build I like to pre-load all requests to the server whether it be as a busy cursor / text notification / progress bar or even sound (elevator music anyone?). The simplest way way I’ve found to do this is to have a public String property on my Model of course you may want to create a more detailed class but I’ll use the string in this example. By setting this property from my commands it allows the application to listen/test to the changes to this and display the required feedback/preloader to the user.
an example would be something like this
ModelLocator.as
public var statusMessage:String = "";
GetLiftCommand.as
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public function execute( event:CairngormEvent ):void { var levelChangeEvent : LevelChangeEvent = LevelChangeEvent(event); var liftID : int = levelChangeEvent.liftID; var delegate:LiftDelegate = new LiftDelegate(this); delegate.getLift(liftID); /* set the service status */ model.serviceStatus = "I'm getting the lift so I'll put some mirrors up"; } public function result( event : Object ):void { model.lift = event.result.lift; /*clear the service status now that we've got the result*/ model.serviceStatus = ""; } |
MainBuilding.mxml
|
1 2 |
<!-- Hide or show the mirrors based on the service status message --> <components:mirrors visible="{model.serviceStatus.length?true:false}" /> |
In todays development world where the amount of information that is being pushed back to the client is getting larger and larger, pre-loading is important to not only give feedback to the user but to give them a slight distraction prior to the data arriving.
CursorManager.removeBusyCursor();
Hi, nice ideas but I’m not sure I agree with you completely. For me the most important use of a preloader is not to distract but to inform and provide feeback that the app is not stalled but doing something in the background and will complete at a given interval. Thus you preloader isn’t working (hard enough) unless it’s feeding back some information, be that the loading progress, time left etc.
To take your analogies, only the lightning is a good preloader because it gives you some information about how far away the storm is. (Ever popped off for a pee during a warmup act and missed the start of the main show?)
With the lift example, while the mirror was an ingenious addition the basic lift preloader is always some kind of light or floor indicator telling you where the lift is now relative to you and that it’s working. I don’t think having just mirrors but no lift indicators would have worked as well, people still need feedback to tell them everythings ok, then they can relax and be distracted.
Lindelc383c2b6f @len yes it looks like he’s using eclipse.@Lee: Nice tituroal lee, but the one thing what bothers me, would it be possible to set up a gradient in the compiler arguments as well?
Thanks for the feedback Adam 🙂
Yes I think the pre-loader should provide feedback albeit through a progress bar/displaying time left etc… even though it is feedback it still is a visual and cognitive distraction for the user while the application does what it needs to do.
"Ever popped off for a pee during a warmup act and missed the start of the main show?" I hate that! but sometimes you don’t know how long things will take when requesting information etc.. remote service calls. However when the support act comes on you do know that the main band isn’t too far away and that you’ll be head banging in no time.
I agree with what you said about the lift, the mirrors and assuming there were light indicators would make up pre-loader.
I’ve been in some lifts where there are no light indicators, you push the button and pray to the elevator gods that the doors will open and it’ll be there to take you one floor up and while you’re inside you realise it would of been faster to take the stairs.
08:34Hardcoding the numbers for the width and hegiht means that this is less dynamic. i.e. in theory if you gave the Class a generic name (Note: class and therefore the asset should be capiltalized), and calculated its width and hegiht instead of hardcoding those numbers, you could hand that FLA out to any designer to customize and know that it will work in your application as expected.Hard coding any values means it’s likely you’ll need to update the code as the designer makes changes.
The example works, everything is Ok now. Though I really nad problems with the design and had to learn for quite a long tims (downloaded much info by http://rapid4me.com SE) and at last started to understand something.
Is it posissible to use Catalyst for slyting Flah Builder Video component?In the Catalyst options, there is only few to choice.- button- vscrollbar- hcrollbat- textinput- repeated listand mybe one more i dont remember. Am I right?
, Flex people will have to jump into the flash IDE. Any cnhcae we could get the source code for this? I’ve been tinkering with it in Flash, but I don’t know what the hell I’m doing.Awesome tutorial though, thanks.