To use the elevator in question as an example of borderline terrible usability, we joked on the ride up to the 5th floor about the flaws in the design of how something we all take for granted — and use regularly — works. Elevators are simple machines, right? They go up, down, and stop at various floors. You push a button and an alarm sounds, or you turn a key and lock it in place. A couple more buttons let you hold the doors open on a specific floor, or shut them if you’re so inclined. Nothing really complex to it, is there?

You’d be surprised at how much can go wrong with something so straightforward. Let’s look at a couple of specific examples of why this elevator makes for an inconvenient and at times incredibly frustrating user experience, and how we can draw parallels to UX design in the process.

I pressed the button, didn’t I?

The elevator in question appears to have a mind of its own.

Take this scenario: I press the button in the lobby to go up; unbeknownst to me, one of the elevator cars, waiting in the lobby, already had its doors closing. They close, not stopping due to my button press, and the button deactivates itself automatically. I back up, not realizing that the call button is no longer selected, and wait impatiently until realizing that I have to press it again. Annoying, isn’t it?

So what’s wrong here, and how does this relate to interaction design?

Well, in this specific case, I’d like to draw your attention to proper error handling. When something doesn’t work properly, most folks expect some kind of messaging coming back their way explaining what went wrong, why, and what they can do to fix it. In the case of the elevator, there’s no feedback mechanism letting the user know that their request failed.

One of the core tenets of UX design in this bold, shiny, message-bubble-happy Web 2.0 world is to provide clear, obvious feedback to the user when they’re interacting with your web application. In the case of the elevator, it may be as simple as chiming a bell and holding the door open if it’s already open when you press the call button, but in your designs it’s something that needs to be taken into account. Have a standardized methodology for providing your users feedback in case of errors, and make it easy for them to correct what went wrong and try the action again. If it’s something they can’t fix, provide user-friendly messaging that explains what’s going on, so as not to cause a revolt amongst your users (assuming it’s not a common error.)

The old switcheroo

This one gets everyone who uses this elevator at one time or another. Regular users of the elevator will get used to buttons being in a certain location. This elevator is special; the buttons for opening and closing the doors are inverted on the other side of the elevator. If you’re accustomed to where they are on one side, you’ll automatically hit the same button on the other side’s panel — in this case, having the opposite of the intended effect. Oops!

There’s a pretty striking parallel here to web site navigation design: switching navigational elements from page to page on a web site will definitely confuse your users. Why would you design an elevator with mirrored navigation controls? It appears that many of our best practices in interactive media would apply just as easily to industrial design.

While changing design elements around between templates on a site might work as long as their positioning is clearly defined from page to page, you should really spend the time and justify why you need to build an inconsistent navigation. In our test subject’s case, there’s no clear reasoning behind the mirrorring of the top row of buttons, all the while leaving the bottom two buttons in the same positions. It seems quite random, considering they’re the only set of controls where the positioning has changed, from one side of the elevator to the other.

User testing — even the so-called “Mom test” — goes a long way in cases like this — what may seem visually pleasing or quirky as an interaction designer may cause your users no end of grief and frustration. Take the time to not only ensure that your site’s navigation is consistent and well-structured, but also to test your designs with users who may not be web-savvy and see if it stands up to their usage. Designers and developers have a tendency to become blind to their own work, as time passes; what makes perfect sense to you may have the opposite effect on your users. Enchanting your audience with an attractive, yet highly-usable design and information architecture will help to enlist regular users. These happy regulars, in turn, may lead to more sales, or, with luck, a core group of users who evangelize your site or product and save you time, energy, and money in the long run.

Supporting information of questionable value

I always find the warnings attached to elevators in high-rises highly entertaining, and this one is certainly no exception.

Notice the strangely highlighted words in the fire warning on the left? “Fire Use” and “Not” are what stand out to me at a quick glance. Does that make much sense to you?

Beside it, we have an elaborate schematic of the 5th floor, including our emergency exits, the locations of the nearest fire extinguishers, telephones, and of course, the ever-important bathrooms. If I’m at the office and a fire breaks out on my floor, am I going to sit for five minutes trying to decipher a cryptic blueprint, make a quick trip to powder my nose, or am I going to run down the emergency stairs at full-tilt and pull the nearest fire alarm?

What am I getting at with all of this? Providing clear, concise supporting information on your site is just as important as your visuals and textual copy. As Jakob Nielsen preaches, use consistent and obvious language, placement, and terminology to refer to navigational elements and other areas of your site. Providing a help area for your users to communicate with you — and to refer to in case of the inevitable problems that occur while running a large site — is also an important task that may get neglected in favour of further development of new or more elaborate features. Don’t let those things fall by the wayside and you’ll be doing yourself a favour.

Do you have any interesting experiences with the usability of everyday objects that you’d like to share? If so, we’d love to hear about them.

Course Synopsis

In this course you will explore a number of tools and techniques that you can integrate into any website, intranet, or software development process to create a first-class user experience. You will be able to try many of the approaches illustrated in the seminar through a number of hands-on activities and exercises.

Every participant will leave the course with a wide array of user experience tools and techniques. In addition, we will provide a comprehensive set of course materials and templates — a valuable resource when using the described techniques in your own environment.

UE Done Right

The cost of the course is $799, but you can sign up with the Habañero client rate of $499, if you email me and mention you read about it on the blog.

Hope you can come, it will be a fun two days!

I’ve found the process we’ve been following very effective. We’ve iterated an prototype very quickly and with a very small resource cost. Some points I think are key to this being so successful:

• Quick meetings often. The team meets on a regular basis often to keep the momentum and excitement of the project flowing. This keeps our ideas fresh and interest strong.
• Manageable take-away homework. Each team member takes on a small task to complete prior to the next meeting. That way, no one team member is stuck with huge time consuming tasks. Also, it keeps the project moving foward even though we aren’t together working on it.
• Working meetings. At each meeting, we review the homework and revise it together, so the deliverables changed quickly and organically. Many points of perspective can be integrated at each stage of progress.
• Always a prototype. By keeping the mentality that the deliverable is always in beta, we don’t hang on to one solution. No one is too attached to the outcome, and we are able to let go of ideas quickly. Constant improvement is the mantra, and making mistakes is easier to accept.
• Something tactile as soon as possible. We visualize our ideas as soon as possible to see if they work. That way, impossible ideas are discovered sooner rather than later. Also, we have a constant feeling of accomplishment as we are moving ahead with our tool.

The team discussed these strengths of the progess, and we discovered we are adapting an agile method to our project. Pretty cool! Stay tuned, we will be finished our tool soon, and we will post about it here.

This feature intelligently re-sizes, or re-targets, images by being aware of the content in the image (skin tones, objects, etc.). Using this tool, you can scale an image without skewing it. For example, if two people are standing next to each other a few feet apart, they will appear to stand closer or farther apart, while parts of the background slowly disappear. No cropping or awkward scaling necessary!

I have not tested this out with some of my own images, but this could be a useful feature to use during website projects when we have to get images to fit within CMS templates.  Usually, there are some parts of the website that rely heavily  on imagery, and on imagery that fits in with the design in the correct proportion. To update these areas of the site, the content author has to find or crop images into the right dimension. This new Photoshop trick could make things much easier!

The other thing that blows me away is how simple this idea is, yet has to be really complex to execute. I took pattern recognition back in my university days, and I can’t even begin to imagine all the math that goes into this.  I have much respect for the guy who came up with this one.

I hope you get a chance to check it out, and leave a comment to let us know what you think of this feature, or anything else that sparks your interest with CS4!

The Visual Design

The visual design was inspired by two directions: historical train design and newspaper typography. Newspaper design was a natural fit for RailCity, as it has a lot of news and announcement content that is being communicated. I see intranets as interactive corporate newsletters, so why not take cues from some of the great design conventions used in news sites and use them? I used a myriad of type sizes and settings, along with a mix of serif heading and sans serif type for maximum scanability. And of course the rich history of train design could not be ignored: the number one employee feedback was that they wanted to see the trains. There are all sorts of train artefacts at the CP head offices, and I gave hints of that culture in the background pattern, the logo, the breadcrumb styling and some of the modeling on the navigation.

Getting to Know SharePoint

The SharePoint platform introduced a whole other challenge. Due to the size and complexity of the project, we wanted to use as much of the out-of-the-box functionality as we could. I had to get up to speed with SharePoint, and I followed these guidelines:

• Use it I spent many hours in our MOSS sandbox creating team sites, adding web parts and noodling around. Understanding the user experience was key.
• Look at the built-in customization I took a look at the built in templates and styles that SharePoint offers, so I could understand how to change the look and feel.
• Understand the code behind the interface We took screenshots and overlayed coloured areas to represent CSS styling so we knew visually what areas were controlled by what code.
• Ask the developers questions I relied pretty heavily on my developers for their expertise and understanding of the product. If I wanted to change something, i asked questions first to avoid headaches later.
• Break the rules! Where there was room to move, we found it together.

Making the Design Work

We developed both publishing pages and collaboration pages, and you can see how the collaboration template mimics the publishing page design. It’s pretty cool what you can do with changing a few background images, typography and a little style. We wanted to have a relatively seamless experience between the two areas of the site, but we knew there would be differences due to the highly dynamic nature of collaboration pages.

One of my favourite parts of the show is when they show elements of the creative design process. Don’t get me wrong, this isn’t the main focus of the show (the stories between characters definitely take precedence), but it’s fun to see the ideas they come up with at work and little snapshots of how they got there.

Here are some observations I had while watching some recent episodes - which I think still ring true in the design work we do today:

1. Ideas can happen anywhere. I loved seeing on a recent episode all the napkins that Don Draper (a creative guy who is the main character of the show) scribbles on to collect his ideas. His wife was rummaging around in a drawer and digs up all these napkins from different bars, restaurants, etc. All of them had sketches or ideas for tag lines - and not phone numbers! It was a fascinating glimpse into how the creative process works for Don and gives me more reason to carry around my little Moleskine everywhere.

2. Don’t be afraid to talk about your own story.I also enjoy how Don ties his own personal experiences into the products he markets. A memorable scene in a show from last season was his pitch for the ‘Carousel’ or the circular slide projector. Don was trying to sell his idea for the Carousel by using his family and personal photos to tell a story. The dramatic tension in the episode had been built up by that point too, but it was an interesting take on the vulnerability of our own stories and how they can often create connections between strangers and of course, clients. There is a fine line in bringing up personal references during a design review for say, a website, but the stories that come from real anecdotes can be quite powerful if used appropriately.

3. The ‘AHA’ moment takes time. On some episodes, the characters are shown going through a series of brainstorming meetings to talk about ideas and review collateral. It’s pretty typical that a team meets regularly and shares ideas, but it’s also fun to see all the evolutions it takes to get to a final product. You regularly see drawings and slogans ripped up, product names change (remember the Relaxicisor > Rejuvenator?), and Don leading his team to the “A-HA” moment at the right time. You also see client meetings where ideas don’t go over so well, which in the end results in a better product as the team is forced to go back to the drawing board. You can’t rush the design process sometimes!

Mad Men is a show that has me addicted - if you haven’t checked it out yet, I highly recommend it.

Checkout the website that showcases their portfolios. I am pretty impressed with the progress they have made over the year, and it is cool to see which area each student has taken a personal interest.

I find teaching very gratifying, I have always enjoyed school and this is one way I can keep in touch with the spirit of learning, not to mention all the new emerging web experiences and technologies. Can’t wait for next semester to begin!

The user experience of this is interesting – it’s a one click operation from the browser with nothing to install, nothing to wait for - it’s just all part of the browser with a desktop icon. If it all works as described, it’s much simpler than other options out there.

This will be an interesting space to watch, and I’m starting to think about how the websites we build today are going to change into much richer applications in the future, where a user can choose how and where they want to run them.

By the way, despite two recent posts about Google products, I’ve not taken it upon myself to promote Google products. Google and I just happen to spend quite a bit of time together.

Earth Light:

Simplicity is Complex:

It wasn’t too long ago that I was fumbling around in the world of HTML and CSS, and I’m so happy to share my knowledge with a bunch of eager minds. It feels really good to give something back.