I’m currently building a new application and one of the areas that I’ve been concentrating on is the User Experience (UX) aspects of the build.

Often, the UX design is considered to be mainly a creative process, undertaken as part of the graphic or web design phase of the project. It is then down to the developer to implement the UX as specified.

In this case, I’m building the back-end functionality first but that doesn’t mean I don’t need to think about making using the application a smooth painless experience, regardless of what improvements will be made as part of the front-end design.

Key Idea – Remove Barriers

To make interactions as painless as possible, I’ve sought inspiration from not only web applications but also desktop and mobile apps.

• Adobe Air has given flash developers the capacity to create and publish desktop applications. These guys are often at the forefront of designing great user experiences and it shows in the slickness of many apps.
• Apple’s iPhone has thousands of applications available and the limited screen size combined with the touch screen interface has resulted in some interesting new application design conventions. The native applications such as e-mail and the iPod interface present examples of functionality honed down to just the most essential interactions.

Example #1: Registration

In the conventional scheme, a user would enter their registration details, receive a confirmation e-mail, activate their account and then login to the site. This is often required even for a free trial of the application.

Automatic Login

I’ve built the registration system so it will automatically log the user into the app once their registration has been successfully processed. Rather than wait for an account activation, I’m doing a simple check to ensure the mailbox for the e-mail address that they entered exists. If I wanted to use an activation code, I could add a grace period during which the user could use the application before requiring an activation code to confirm the account.

Trial without registration

I’ve coded my app so the user can dive straight in and try out the application (in a limited form). All the data that they enter is held in a session cookie so if no further action is taken, it will expire soon after the user leaves the site. If the user decides to go ahead and register, all the data entered in the session is recorded into the database against their new account. This, combined with the automatic login provides a seamless transition from free trial to registered user without having to re-enter any information.

Example #2: Item Selection

One part of my app involves selecting an item from a list. It’s unknown how many items might be in the list so the conventional developer solution would be to create a drop-down list with either an automatic update when an item is selected or a button to confirm the selected item.
I see problems with each of these approaches, a drop-down list could potentially be quite long, requiring scrolling to navigate. If the user accidentally selects an item while scrolling, an automatic update is unforgiving. The use of a confirm button negates that problem but needs an additional interaction after the user has found the item that they were looking for. The confirm button becomes an unnecessary obstacle in the flow of the application.

One click selection

My solution is to generate a list of links, each of which can be clicked to make the selection. Initially this looks like a good solution for small numbers of items, but bad for longer lists.
The reason that I’ve chosen to go this way is that the mechanism is good, a single click once you’ve found the item. How the list is presented can be tackled as part of the front-end design. In this case I might use something like the jQuery ListNav plugin from iHwy Inc.

Some Tips

While in development mode you can improve user experience by making choices based on mechanisms and functionality, not on presentation. If, like my current project, you don’t have a specific design to work to, these tips can still make a difference.

• Look for inspiration – A good designer will keep scrapbooks of design elements, textures, colours, shapes etc. similarly, you can make a note of good experiences from any source, not just software applications – video games, information kiosks, gadgets, DVD players, whatever makes you think “that was simple/easy/nice”.
• Create a smooth application flow – remove unnecessary steps wherever possible. A single click to advance creates momentum rather than an obstacle to overcome.
• Don’t think about presentation – provide all the required output for building the front-end design. Strong front-end UX design should build on good application flow rather than try to impose it on to cumbersome application functionality.
• Follow people logic, not application logic – Think of the simplest path from one application state to another, regardless of whether it matches your database schema or object methods.
• Conventions are compromises – tried and tested conventions only became so because most people have come to accept them. At some point in the past, somebody went out on a limb and built them first. Don’t be afraid to break convention if it makes sense to do so.