Mike Rundle's Weblog

On User Experience: Part I

I think about how people interact with their environment all the time, however I don't know many people who think the user experience and ergonomics is cool, so I never get to talk about one of my favorite topics. I'm going to start a new thing here on my weblog, where every week I'll write one "chapter" from a continuing series called "On User Experience". Here I'll discuss my theories on user interaction, ergonomics, communication systems, and other fun stuff just cause I find it difficult to find good information on these topics. Feel free to comment and let's see if we can flesh out some cool info.

Interfacing

On Dictionary.com, my favorite definition for the word interface is this:

A point at which independent systems or diverse groups interact. Source »

People stuck in the computer world tend to only think of an interface as what is visually (or aurally, depending on many factors, ability being one of them) depicted on the screen. A user interface is commonly thought of as the invisible layer that connects information coming out from the application with user input going into the computer. The part of the system where input and output is exchanged can be thought of as the user's interface with the application, however I like to think that this is not the only "interface" one should think about.

Sky and ground
When you look up at the sky and then trace the skyline down to where it connects back with the earth, you are looking at the horizon line. This is the connecting point where terra firma meets with atmosphere (at least visually) and can be considered the meeting point of two wholly separate, but interdependent entities. This is where the sky and ground interface.

The horizon line is not always straight: the connecting line takes the shape of this two-way juncture and if there are mountains reaching up from the ground the horizon line will be physically different than if there were no mountains at all. It can be said that the horizon line is a compromise between the ground and the sky, where the meeting of these two massive elements is modified based on variables found in either of the two conjoining parties. I find the horizon analogy useful for talking about what an interface truly means — a give-and-take arrangement between two different, but constantly connected, elements of the world.

Everywhere an interface
When discussing a person's experience with their surrounding environment, one can imagine that at every single moment of one's day, they are faced with a finite number of environmental interfaces. A walk down a hall cannot simply be thought of as getting from Point A to Point B, but it is rather your goals intentions meeting with the hall's goals and intentions. Your intent is to move quickly and safely down the hall in order to get to your final destination, while a hall is designed to be a connecting space between two rooms or spaces.

A hall is not designed to protect you from the elements (that's what a roof does), or to keep your feet warm in the winter (that's what carpeting does), or to alert you to obstacles in your path (that's what a lighting fixture does), but rather to be the connecting space between Point A and Point B and nothing more. Your goal of moving down the hall to get somewhere fits in nicely with the hall's purpose of connecting two open spaces, however when you mix in additional elements to this interface, you are adding additional variables that could potentially disrupt this communicative process. If you trip while you are walking down the hall, it is not a communication breakdown between the hall and yourself (remember, this "communication" I'm talking about is the give-and-take between your goals and the hall's intrinsic purpose) but rather an interruption between the environmental interface. You tripped because your toe got caught in the carpet and because there wasn't enough light to notice the snag, not because the hall didn't do its job or because you didn't know how to walk correctly down it. What happened was a communication breakdown caused by external factors associated with your interface with the hall, not with you or the hall itself.

When you first buy a VCR (huh? a VCR? what's that!) the blinking 12:00 will plague your life for as long as you let the clock go unset. The blinking number is the VCR's way of letting you know that setting the time is probably a good idea, and your goal for this situation is to interact with the VCR in such a way as to 1) make the blinking stop, and 2) correctly set the time. So your goals and the VCR's goals are a close match, both you and it want the clock to be changed, so why is this such a big deal?

The problem arises when you actually try and change the time. Just like when you tripped in the hallway, there are many variables that can cause you to err in your interaction with the environment, and in the VCR's case, the cryptic buttons and programming sequence is what is tripping you up. You want to change the time, the VCR blinks 12:00 to let you know that setting the time is possible, however the buttons and widgets on the VCR can tangle you up and stop you from ever getting the blinking to stop. These little technological variables get in the way of your interaction with the VCR, therefore your goals and the VCR's goals cannot be met without great difficulty.

These external factors
Earlier I mentioned that there are a finite number of external interfaces/situations available at any given point in time, and I want to elaborate more on why I feel it is a finite number as opposed to an infinite one.

There are a finite number of people on this earth, and if every single person on the planet had their hand in a different environmental factor (one person made the carpeting in your hall, another made the light fixture, another designed the wallpaper on the wall, another person developed the vacuum cleaner used to vacuum your hall's shaggy carpet, etc. etc.) there would still only be a finite number of external factors with which you could interact in a given situation. Even if you cut your hand on the wall, tripped over the vacuum, got a rug burn from the carpet, and managed to touch or interact somehow with something designed by every single person on this planet, you would still only have a finite number of external factors working their way into the basic interface you started with — your goal of moving down the hall interacting with the hall's purpose of connecting multiple rooms. Because of this, and because there is not an infinite amount of anything on this earth, there are only a finite number of variables that can work their way into your communicative process with something in the environment.

UX Group Development and Integration

According to research done at the User Interface Engineering group (brought to my attention by a Peter Merholz essay) “the size of an organization’s user-centered design practice is somewhat inversely proportional to the site’s usability.” This indicates that when companies want to expand their UCD practice, they are doing so in the wrong ways and are jeopardizing the associated products' user experience at the same time.

The problem is that companies are not using their UX team intelligently, and because of the lack of UX integration into the product development lifecycle, the UX team becomes the "interface cops" right before a product/interface is shipped. I wrote about this phenomenon, and steps companies can take to fix it from happening, in a paper for my "User-Centered Design Methodologies" class here at RIT.

 User Experience Group Development and Integration (PDF, 120K)

Also, here are the original images I made for the report in case you'd like to use them: Team Structure and Phase Diagram.

This work and the associated images are copylefted thanks to the Creative Commons.

The Car Blog: Launch and Design

The Car Blog is a go! TCB (The Car Blog) is a blend between a car forum, a weblog, and an online magazine, and is a place for car people to go and vent or rant about the world of automobiles. I did a better job of explaining the site on the About page, so go check that out if you want more. This blog entry isn't about explaining what TCB is, it's about giving you the nitty-gritty about the design decisions I made, why it looks the way it does, and the CSS ballyhoo and tomfoolery that powers the visuals. So let's get into it!

Beginning Design Thoughts

Successful car site design incorporates heavy imagery and a deep sense of visual amazement, because when it comes down to it, we like to buy and look at cars that we think look good and car websites are the same way. When I started out sketching initial concepts for TCB, I knew that we needed a solid header graphic that incorporated big-time car imagery for some off-the-bat visual punch. I went over to my favorite photo resource, stock.xchng, and found this gorgeous photo of a Ferrari 360 Modena against a blue sky. After some Photoshop color-shifting and slicing, I achieved an effect that I think lures your eyes down the page more because of the slicing's vertical orientation.

The typography choice for the logotype is DIN, even though I was originally considering Interstate. Both typefaces are examples of auto-specific fonts, where in the U.S., Interstate (or an identical twin) is used on all interstate highway signs. Just look up at the green rounded rectangles next time you're driving, and you'll noticed the slanted ascender tops which are its dead giveaway. I ended up choosing DIN because it is the German equivalent of Interstate, and I love German cars. DIN is one of the most recognizable sans-serif typefaces out today, and if you just look around a little bit, it'll pop right out at you. Oh, and the B-Logs font is Myriad Pro, but you already knew that ;)

Advertising Design

I've never been fully in control of a website that has advertising on it before, so I was really excited to make the ads on TCB not as ugly as other ads on the web. Coudal and John Gruber have done a fantastic job deploying text-only advertisements on their pages that are integrated into the design, and I went to school on their examples in order to make the TCB ads work as well.

We have three different ad placements on TCB, and each one has their own design style and physical area on the page. The "Premier Ad" is underneath the Leading Article area on the homepage (as well on top of the content in the individual entry pages) so because of its placement, it needed to be tightly integrated with other elements on the page so I wouldn't throw-up when looking at it over and over. I reused the blue from the header graphic and navigation to get the color scheme for the Premier Advert box, and then kept the rounded-box metaphor going as well. The top part of the div was done using a background image (nothing fancy), and I used a superfluous display: block'd span element underneath it to round the bottom as well.

The advertisement at the top of the Shortlinks box needed to 1) not look like an "ad", and 2) blend into the style of other shortlinks. What I did was simply use the same style as other ones (except not in an unordered list, and no light grey background) and add a background image on the bottom that alerted users that it was an advertisement in the same manner as the Premier Ad on the left. If your gamma is correctly adjusted, the background of the rounded "ADVERTISEMENT" rectangle should match the lighter grey underneath other entries over there.

And then underneath the Shortlinks box we have our third category of ads — the least intrusive, and also the least "styled". I made these simple because once your eyes get to the section of the page where those ads would be, you're most likely reading the main page content and I didn't want to force a visual saccade over there which would throw your reading off. These don't have rounded edges like everything else, or do they? And this brings us to our next section.

CSS Tomfoolery

When we were talking about the design of this site way back in the summer, we decided the baseline browser would be IE6, which makes development a whole lot easier. The cool thing, also, about developing for high-level browsers is that we can do things with the CSS that we normally wouldn't think of. Some of that stuff included Mozilla- and Safari-specific styles to spice it up a bit.

-moz-border-radius — A Mozilla-specific style that rounds the corners of a block-level element. It was used in those instances where I felt multiple divs just to accomplish a rounded corner effect wasn't necessary (like the light-grey shortlinks entries, as well as the advertisements underneath the shortlinks). Also, enough people are out there using Firefox so I thought a nice segment of the population would benefit from such stylings. And if you're like me, and use Safari instead of Firefox...

text-shadow — This effect was implemented in the latest version of Safari (Jaguar users, I think you're out of luck) and it looks wicked cool. I actually use this effect extensively on the homepage: the current navigation tab text, the leading article title, the leading article subtitle and category, the author/comment count div, the sidebar links, and also in the footer. So if you're using Safari, you get an extra treat that others don't :)

The navigation of the site uses an inverted tab style that I've used in the past, and thought it would work well here too. Sliding doors are in effect, however I've been using that technique since before Doug gave it a name :) Some really intricate-looking design effects were achieved quite simply by using background images. For an example, the navigation tabs appear to overlap the underlying color, but that entire unordered list just uses this background image to make it appear complicated. Also, to make the Shortlinks header appear to be offset from the Leading Article header, I just stuck that image in the navigation's background as well. Boom! Effect achieved with no CSS headaches.

Even though in the header you can click on both the TCB and Business Logs logos, the top header graphic is all one image. In an effect similar to the old imagemap idea, there are two divs up there with transparent backgrounds that "cover up" where the clickable areas appear to be. You can see this for yourself if you hover about 20px left of the left edge of the B-Logs logo ..... it's still clickable.

Final Thoughts

This wasn't the most complicated CSS design I've worked on (the gov't work I did was, go figure) but it's the design I'm most proud of. My test for a website is if I get sick of the design before I even launch it, but for this one, I was excited to show off my work and see what people thought and haven't gotten sick of it yet :) This site is also really rewarding for me because our writers are very influential people in the design community (Jason Fried, Carlos Segura, Didier Hilhorst, to name a few) and working with them on a project was really great.

This site wouldn't look like it does now without the help of my usual beta testing and feedback team: Paul, Matto, Nigel, Mike, and Alex. Thanks guys.

And that's it. What do you guys think? What would you change? Any bugs? Let's hear it, good or bad.

For the Windows users in my audience, here is a screenshot of what the site looks like with Safari-rendered text-shadowing. Makes you want to buy a Mac, eh? :)

Applied Common Sense

Here's a purposefully incomplete list of some skills and terminology associated with "my profession": usability, cognitive walkthrough, scenario-based design, interaction design, user experience, heuristic evaluation, information architecture, UI design, formal usability testing, horizontal- and vertical- prototypes, and user-centered design methodologies.

To be a usability professional — whatever that "really" means — you need to have overly-specific (and confounded) terms and phrases for things that do not need them. I tell the client that I am "using scenario-based design processes to improve the information architecture" when that really means that I'm "thinking like a user in order to make the site easier to move through". Wow, wasn't that easier to understand! Why is it that people feel the need to jargonize things in order to sound as though they know more than they actually do? Why is it that people who work specifically on the user's experience with technology specialize so much and seem to be proud of this specialization? If I ever categorized myself as just a "heuristic evaluation expert" or "navigation designer" or "usability testing professional" then I don't think anyone would feel the great need to hire me. Specialization may be good for some fields, but if you're a user interface designer and don't know the first thing about information architecture then I won't hire you.

A PhD in Common Sense, Applied

It is so very interesting to me how so many companies don't "get" usability and the user experience. For once and for all, let me say this: all a company has is its reputation, and what customers think about their product and that's it. If your product sucks, or is difficult to use, then a potential customer will go and buy a different widget from your competitor. If your product sucks, then the approval of your company drops, and you'll make less money. Oh my god, I just simplified the entire field of product design and economics into one sentence, but it's true.

Here's an example. Method's dish soap was a brand new product with absolutely no market penetration prior to its launch, you know, a brand new company and all. Then it launched, and people realized it was a genius example of industrial design and aesthetics, so they bought a ton of it. Now Method is moving past companies in the soap industry (if there is one!) and gaining market share every single month. Game over, good design wins. See how easy it is! Now what if every company would realize that good design means everything? Don't you think that consumer products would be easier to use? Hell ya they would.

The entire user experience field is just applied common sense to me. Who's going to be using the product? Okay, now what would they need in order to accomplish their task? What other products have they used before, and how much do they know about similar technology (meaning: what other products are they "used to"?) Now Joe Schmo and 50 other people complained about this feature, let's evaluate it. There we go, the entire user experience field compacted into a paragraph.

We'll All Have Jobs!

This entry is not a rant directed towards practitioners in the field of UX, but is directed towards businesspeople who don't know squat about our profession. Until corporations realize that "well-designed products = more money + more customers", there will always be consulting firms making truckloads of money that have a staff of 20 User Interface Designers, with another 5 Information Architects, 2 Human Factors Researchers, and one User Experience Group Director.

And by the way, IconNicholson is still looking for a User Experience Group Director, so if you'll excuse me, I'm going to go apply for it.

Hoverless Current Links

Good information architecture is more than drawing boxes and arrows in a logical manner. IA relies the experience of interaction designers to let the user know accurately and succinctly where they are in the context of the entire site, and where they can go from there.

Hierarchical navigation, dropdown menus, breadcrumb trails, "You are here" banners, and clickable logos are all examples of interaction design techniques which attempt to aid the user in traversing the website. Good IA means nothing if the user is confused.

The Technique

Breadcrumb trails and site navigation are my bread and butter (no pun intended). If I can get the logo and the nav to look and work perfectly, then 70% of the site's design is done. From there it's all downhill. One of my biggest pet peeves involves the "current" state of where you are in the site — how the link that signifies your current position lights up when you rollover it. But you click it, and it just reloads the same page. I'm going to show a way that I try to get around that, and make it so that users are slightly less confused (always a good thing).

The navigation on BusinessLogs is very straight-forward — at no time do you not realize where you are in the context of the entire site. If you are viewing the services page, the word "Services" turns to orange in the main nav. When you hover over it, your mouse pointer doesn't turn to a hand cursor, even though that is still a link. Yup, you can still click on it, but it doesn't appear to be clickable and that's the point. Here's how you do it:


<a href="pagelink.html" style="cursor: default;">archives</a>



Not all browsers support the changing of cursors, however IE6, Mozilla, Safari (and others I'm sure) support the "default" type which just reverts back to the arrow.

You can obviously stick this style in the CSS file to make your code cleaner, in fact, I recommend it :)

Where to use it

Use this technique wherever you have a link that points back to the same page you're currently on. Whether it's your logo on the homepage, the very last link in a breadcrumb trail, or in a navigation like on BusinessLogs. It makes navigation less confusing for users, and is literally ONE line of CSS code. How can you go wrong?

Usability Superhero

I can code in Java. I can connect Java to a database, pull entries out in XML format, and write a web service that can interface with the whole shebang. I can write a Perl script that will automatically work with the web service to pull content out and put it on a website.

But I'm not a developer.

I can code in PHP. I can write a PHP script that will use the web service, pull the XML-formatted data out of the database, and then output it to a PDF on the fly so the server can email it to you.

But I swear I'm not a developer.

I can take that XML, transform it server-side with XSLT, and spit out the cleanest XHTML you will ever see. Then I can format those semantic tags with standards-compliant CSS and make it work on your browser and your PDA and your internet-enabled refrigerator.

One more time, I'm not a developer!

What I do is make stuff better. If a designer is having a hard-time hand coding the entire site, then I'll build a database backend powered by whatever tool I happen to choose. If a web service will make a certain software process faster, then I'll write it. If a user interface slows down an e-commerce transaction too much, then I'll make it more usable. I just fly in whenever a person is having a difficult time with something, and make it better.

Think of me as the Usability Superhero.

Design + Communication

I don't think of usability as a "well-designed" product or interface, I think of it as a well-formed conversation between a person and the object with which they are interacting.

Interface design doesn't just apply to computer interfaces or the handle on a coffee pot (for you Norman fanatics out there) — an interface is the bridge that both an object and the user cross in order to accomplish some goal. The interface is where the communication between a person and an object takes place, and a "well-designed" interface is one that easily facilitates this exchange.

To be an interface designer, one must be well-versed in the intricacies of communication. The processing, translation, and flow of messages between two linked parties is what's important here, not the medium. This is why interface design is so important — because it's not just someone who knows how to prototype in CSS and likes user-centered design, it's someone who understands the goals and needs of all parties involved, and makes hard decisions in order to benefit them both as much as she can.

I see myself not as a pure "interface designer", but as an information designer — one who takes a set of goals and intelligently manages those goals through design. Information is passed from the application/object to the user (through the interface), and then is responded to by actions the other party takes. I think an example might be good here:

Using eBay

There are many different types of users associated with this service; people trying to sell an object, people looking to purchase an object, and others who just like to browse. Now these aren't all of the user types associated with eBay, but it'll serve as an example. Those people are on one end of this communication bridge, with eBay's business goals on the other. eBay is trying to entice you into purchasing an object, on which they receive a commission. They are trying to make the process of 1) going to the site, 2) navigating the listings, and 3) purchasing an item as easy as possible for an end user, because that will make them money in the easiest possible way.

Now those business goals are woven into the site's interface, somewhat invisible to the user. The placement of the search box, the allure of colors/prices, the busy layout — all of these are little ways to bring you deeper into the site so that you might purchase something.

The difficult part is designing the interface in such a way that it communicates the application's goals while meeting the user's goals at the same time. If I'm trying to find a vintage shirt, I want the search interface to be as clear and helpful as possible so that it aids me in my browsing. If the UI is inherently friendly and easy-to-use, then I will be able to find my shirt more easily. This balancing act between the two sets of goals is what makes a certain interface usable, when one party's goals compliment and are complimented by the other party's.

Teaching Usability

Notice: I'm starting the merging process of phark.net and this weblog — and what better way to do it than to bring over some of the more popular posts on my other blog to this one. The following posts (and subsequent posts this coming week) will be from my other weblog. Enjoy!

It seems as though there aren't any viable ways to prepare yourself for a career in the "user experience" industry. There are a plethora of schools that offer graduate degrees in one form of the discipline or another, but what about the four years prior to that? What undergraduate programs can sufficiently provide someone with knowledge about all of this? It's a tough answer.

As an Information Technology student, I'm expected to know my way around hardware and network adapters, databases, programming languages, and, of course, HTML. I took the very atypical route of not engrossing myself in the physical transfer of information (aka networking), nor the storage of information (database design), but rather the means by which it is communicated across mediums. I believe this provided a good grounding in the many ways that people pull information from technology — leading me right to my main area of expertise, the user experience.

But you really can't teach that connection to a youngling IT student. Most IT undergrads are concerned with how amazing their video card is, how many processors they can run in parallel, how many computers they have in their dorm room, and so on. Teaching a "soft subject" like usability is very difficult because the interest level just isn't there yet. There is no real way to force someone to become interested in this subject, it just happens.

If you are a graphic design major, interested in the user experience, you don't get exposed to usability testing nor the tech-side to the field with your core classes. You learn the art of visual communication (essential to user interaction design) but skimp on the coding skills necessary for prototyping. It seems as though there is no real middle ground.

The best bet would be to adopt a hybrid-IT program — one where usability and user-centered design principles are discussed, along with visual interaction design and communication fundamentals. This is what I'm trying to accomplish here at RIT.

I am an IT major with a minor in Mass Communications. I have taken all undergraduate and graduate IT courses that have anything to do with user-centered design and usability. I have stacks of books on my desk that deal with user experience, their interaction with technology, and the flow of information to and from their brain (ergonomics, visual processing, cognitive neuroscience, etc.). To better my knowledge, all those books have been read, re-read, analyzed, written about, highlighted, and studied diligently.

So can you really teach usability to an undergraduate student? Yes and no. Professors can give them a good grounding in the field, but they need to take extra steps in order to really prepare themselves for life after college.

You can lead a horse to water, but you can't make him drink.