Finding inspiration in the everyday.

Often when I'm working on a certain aspect of the UI design phase for while I sometimes find analogies in everyday occurrences that I can relate back to the current UI I'm working on. It doesn't matter if it's a good or bad experience it's all part of drawing information and ideas outside the context that you're working in. I may look at it and work out how could this be improved or what makes this a good experience.

It's true with everything though, the more interest you take in something the more you notice it, and the greater the detail you notice it with.

Outside of the software paradigm i see most comparisons of UI design in ergonomics, and the layout of spaces both indoor and out. I guess the usability of a screen and how we interact with physical environment and spaces contain very similar aspects.

I was at a friends house the other day and I made myself a coffee I was standing in the middle of the kitchen in front of the sink. They had the kettle to the right of the sink followed by the refrigerator and the Coffee/Tea/Sugar to the left of the sink. All of these things you can not reach without taking a few steps. (Figure 1)

The process was very jagged, there was no thought to how these items were placed in the kitchen to allow one to make a coffee in a streamlined manner.

Ideally they would of had the coffee/tea/sugar/kettle sitting to the right of the sink where the fridge was as this was the only element that could not be relocated. It's spot in the kitchen was fixed. (Figure 2)

Doing this would streamline the process ensuring an efficient use of space and the users time.

Immediately I thought of a UI that I had been working on. Is the process streamlined enough? does the user have to search the screen? and move the cursor too far between related elements to achieve their main goal?

Then I started thinking about Feng Shui for UI design, but that's another topic.

The point of this is that there is more than your run of the mill ways to gain inspiration for user interface interaction and design.

Things happen every day and our experiences we have are ever changing, I feel that being able to relate elements outside contexts is very important. I find it's a way for me to stay inspired irrelevant of the industry.

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

GetLiftCommand.as

MainBuilding.mxml

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();

Crumbline navigation has been around for a long time. The first instance I can recall was when Hansel and Gretel used a Crumbline of pebbles to navigate their way out of the forest. It was only when they used bread crumbs instead of pebbles did they become lost.

Crumblines are a great way for uses to navigate through the UI especially if the UI contains wizards and or drill downs. It provides instant feedback to the user in relation to the depth and direction of their navigational choices.

Uses can then step back to the exact position they want by selecting the specific crumb at any given time.

This is an example I created in Flex 3 to illustrate the Crumbline Navigation in it's most simplistic form.

This component takes in a collection of Crumb Objects. The Crumbline then dispatches "crumbEvents" when a crumb item is selected, letting the view dictate how it handles the navigational change.

eg.

In this example I used a simple viewstack and bound this to the Crumbline using it's selectedIndex property.

A demo of this can be seen here

Special thanks to the Brothers Grimm for the Crumbline model.