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.

First up: ConceptShare

I tried ConceptShare to keep a change history of wireframe changes. I didn’t actually share the link with a client on the project, since we had feedback tracked in review meetings, but I did enter the feedback into this application and output the summary into a tracking document. This allows you to keep the history of changes as snapshots for your own reference (very handy when you have to revisit options!)

What I like about this tool:

• You can use any tool to develop the wireframe, both online and offline. I use FireWorks, outputted  wireframes as PNGs, and then easily uploaded all the images to Concept Share.
• I figured it out in less than 5 minutes
• The UI is very simple & clean without distracting branding (very CS4-like actually)
• You can present the wireframes within this tool and chat with others who are remote
• Reasonable pricing ($49/month for a small team)
• Built in Canada :) 

Protonotes

I saw Protonotes referenced on the Adaptive Path blog, and had to check out because I’ve spent many hours in rooms with sticky notes everywhere. This tool is a neat concept for reviewing web prototypes - anyone can post a comment somewhere on the page, using of course, a sticky. We tend to get email feedback from different stakeholders, so this application would help to aggregate the comments. It’s also possible to output all the comments into Excel and keep track of what’s completed in the application.

One downside of this is that all the wireframes/mockups have to be output in a web format that can incorporate the Javascript for the stickies. Usually we share our deliverables in PDF or image format because that’s the easiest way for clients to review the content. However, if we could just as easily output to HTML from Visio/FireWorks/PhotoShop and share it somewhere, this could be a neat option.

Silverback (Mac OS only)

We used Silverback recently for website usability testing as it is very simple to setup and get going right away. It doesn’t have as many bells and whistles that an application like Morae has (which we also use), but it’s got the key concepts to capture on-screen mockups, record audio/video and setup markers in the recordings. It’s very reasonably priced and a snap to setup.

One downside we found was that the recordings take a while to export into a video format to use after the testing. Other than that, it’s a great quick option to use!

Jing

Mallory tried out Jing the other day to explain how to accomplish a task within one of our internal applications. It’s a really nice way to create a ‘how-to’ video by capturing screens from your desktop and recording audio. It’s easy to share the video using the free online storage, or create a swf file for email/IM. The access to the application is different too -  it’s a glowing orb that sits discreetly on the edge of your desktop. This application could be useful for training, sharing how an interaction could work, etc. There are many uses for this one!

That’s all for now - please let us know if you have also tried these applications, or have tried others. We would love to hear from you!

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!

• Find out what themes are and what themes CAN AND CANNOT do from a design and user experience perspective.
• Learn how to create new themes for WSS/MOSS 2007.
• Avoid some of the time-consuming pitfalls related to theme development.
• Easily deploy and maintain themes across hundreds of SharePoint sites.

There will even be pizza & pop!

When: November 12 from 6:30pm - 8:30pm
Location: Room 825, 555 Seymour St., Vancouver BC (BCIT) — Map

In case you need inspiration, check out one of our past projects that uses SharePoint themes.

Hope to see you there!

We firmly believe that any successful co-op experience depends largely on how engaged and committed the organization hiring the student is to giving them a supportive environment. This isn’t about someone getting us coffees and our drycleaning! All of us on the team have been fortunate enough to have had some great coaches and mentors in our UE careers and we’d really like to return the favour.

Not that this is a totally altruistic endeavor… by participating in co-op terms we’ve all been struck by how great a feeling it is to share what we know, not to mention what we’ve learned from this next generation of UE professionals.

So — all of that to say that if there are any UE Dev students in co-op programs out there, please contact us. People with developer backgrounds and a passion for front-end programming would be a great fit.

Here is the official job description:

Junior User Experience Developer — Vancouver

We’re seeking a co-op student to work as a Junior User Experience Developer within our User Experience (UE) team for a four month work term with a possibility to extend to eight months.

As a Junior UE Developer at Habañero, you will work closely with the rest of the UE team in the web development process and contribute to developing intuitive, practical and user-friendly web sites, portals and web applications.

The ideal candidate will be enthusiastic, flexible, and have a strong customer service ethic and a passion for user experience. A user-centric design philosophy is also required to be able to balance an outstanding user experience with clean, standards-compliant code.

This co-op placement would see the developer working under the guidance of existing senior usability engineers at Habañero. Applicants must be starting or already part of an existing co-op programme at an accredited educational institution in order to apply.

Responsibilities

• Develop highly usable presentation layer solutions on a variety of platforms, including traditional websites, Flash/Flex, Silverlight, and the Microsoft Office product family, such as Microsoft Office SharePoint Server, Word, PowerPoint, Excel, InfoPath, and Visio
• Work effectively with multi-disciplinary teams including customer stakeholders, project managers, business analysts, designers, developers, testers, and systems personnel
• Participate in all phases of the software development lifecycle

Required Skills and Experience

• Relevant education, training, or experience with CSS, JavaScript, XHTML, XML
• A strong interest in usability engineering
• Experience with the software or web application development lifecycle
• Familiarity with Microsoft SQL Server and relational database design
• Familiarity with Adobe Photoshop and/or Fireworks
• Strong English language skills (oral and written)

Nice-to-have Skills and Experience

• ASP.NET and C# development
• ActionScript 2.0 and ActionScript 3.0 Flash/Flex/AIR development
• Silverlight 1.0 and Silverlight 2.0 development
• WSS or MOSS 2007 development
• Relevant Microsoft Office programming experience
• An appreciation for business problems and a good sense of solution design
• Awareness of agile modeling and lightweight development processes

Attributes

• Excellent communication skills
• A focus on customer service and delivery
• Highly organized
• Able to research and apply knowledge effectively

Applicants should expect a thorough interview process, including testing and comprehensive reference conversations.

If you’re interested, please apply by sending your resume to: csanders@habaneros.com. In the subject of your e-mail, please include “Junior User Experience Developer — Vancouver”. Thanks in advance for your emails, but we will only be contacting candidates selected for interviews.

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!

On Day 1, I took in the pre-conference workshop with Paul Gould and David Bishop from MAYA design and really enjoyed their casual, yet informative approach. The workshop format was part instruction and part breakout sessions with groups and ran through a gamut of methodologies including concept maps, entity relationship diagrams, navigation maps, and one I hadn’t heard of before: bullseye diagrams. Like the target on a dart board, the bullseye diagram is an interesting way to prioritize features (the most critical and most used in the center). I was also really impressed by the quality of documentation produced by MAYA and how effective it was in telling client stories or ensuring that the team understood the client’s domain and needs.

Day 2 and 3 took place at the Harold Washington Library Centre - a stunning building and an architectural beauty even among all the other great buildings in Chicago.

If you follow the blog of David Armano from Critical Mass or read a lot of blogs and news covering web trends then David’s talk didn’t express a lot of new ideas, but did emphasize how brands are no longer about what they project, but rather a sum of its interactions. The winners: Dell, Starbucks, Zappos, Comcast Cares. The losers? I’ll let you decide.

There were a couple things that stuck out from Jason Kunesh’s talk. One, how many new tools are often founded in earlier analog equivalents (e.g. twitter’s really just like CB radios of old) and; two how information architects are like the bricoleurs of old shaping a discipline by pulling influence from other disciplines.

Dave Gray’s presentation Books and Browsers was a fantastic romp through the history of the book and it’s useful form and how the browser could change. I’ve followed Dave’s work at XPLANE for years and plan to make it down to one of the VizThink conferences in the coming year. What’s always engaging about Dave’s talks are the wonderfully hand-drawn slides and his incredible ability to make the obvious stand out.

Elliott Malkin’s talked about a couple of his recent projects: one an electronic representation of historic Jewish eruv’s (one using cell phone semaphores and another using lasers) and his desire to understand the life of his grandfather that drove cemetery 2.0 were fascinating efforts in representing information.

Edwina von Gal seemed to be out of place, but one interesting take-away in her talk cut-short was the use of stones arranged like erratics (erratics are random rocks that deviate from the size and type native to an area often deposited by fleeing glaciers)  to provide visitors wayfinding clues without the use of signage as they walk about the grounds of the landscape she is designing for Frank Gehry’s building in Panama. I was also intrigued by the placement of certain plants and trees to encourage both familiarity for Panamanian visitors as well as to prompt visitors to stop, take notice and experience the small and regular.

Dressed all in black (like Johnny Cash) the ever-busy Jesse James Garrett gave us an overview of his work on Aurora, the future vision of the Firefox browser. The design themes: providing context awareness, natural interaction (that feels like the real world), continuity and multi-user applications that encourage collaboration are all great ideas. For those who regularly read the Adaptive Path blog, there was nothing new here. But, JJG and team have a lot to be proud of as they’ve managed to propose some interesting ideas that might rear their head one day in future browsers or operating systems.

Chris Crawford one of the greats of game design, shared with us his model for linguistic user interfaces. The GUI of his own software was compelling in the way that it could create and inversely parse limited inputs to create an interactive story and dialog. A most impressive effort and one worth watching over time.

Alberto Canas, a researcher at the Institute for Human Machine Cognition, gave a fantastic talk about the use of concept maps and the strength of these tools in facilitating the explicit expression of knowledge. Alberto’s entire presentation itself was one big concept map run on the software application Cmap Tools. I was particularly struck by the ability of concept maps to evaluate a person’s understanding of a subject (knowledge) over rote memory of information about a subject. His examples of these tools being used in schools in Panama and young children creating concept maps of their own was really empowering and spoke to the value IAs can really play in shaping our understanding of complex information.

Of course you can’t do a conference in Chicago without having someone from 37Signals come out to talk. Joining us this time around was Jason Fried. I like most of what 37Signals has done as well as the “do it on our terms” approach they have taken, but there was little of substance here for an audience of IAs - but perhaps not surprising coming from someone who said he’d never hire someone so specialized as an IA.

Aradhana Goel from IDEO shared with us her take on the societal, technology and business trends she’s been seeing lately. In particular that we has information architects and designers need to take in both the micro (the human factors that help us understand people and create empathy and dig into the context) as well as the macro (the trend factors and collective thinking that help us find the context). Three techniques on the macro that IDEO has been using to flush out strategy for companies include: media audits (they run off and digest media, create mood boards and try to spot themes); era analysis (where they evaluate what you find in the present, how things were in the past and what the future might look like) as well as the use of expert panels (mixed panels of people from various backgrounds and disciplines who tell them what they see happening in the future).

Bill DeRouchey’s presentation spoke to how past experiences create expectations and how IAs (and designers) can inherit ideas from other interfaces and seek out inspiration from common interactions - good or bad - when creating new work. Bill shared some good suggestions about the importance of clarity (anticipate the question) and the importance of surprise (those unexpected anticipations that make us say “wow”).

I sadly had to miss the talk from Andrew Hinton but all reports say it was fantastic.

If you want to hear any of the speakers, Boxes and Arrows has posted podcasts of each lecture.

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.