December 2004 Archives

My first experience with Xbox Live wasn’t entirely pleasant. This is why usability is such an important issue in design in general, not just when creating applications.

First off, a little bit of background. With Xbox Live you can connect your Xbox game console to the internet and play select games online against other people, all over the world. One of the very cool features is that the Xbox Live Kit contains a headphone / microphone ear piece, allowing you to list and talk to the players that you’re playing against. The audio adapter plugs into the controller, and the earpiece plugs into the top of the adapter.

The earpiece microphone has two modes of operation. One mode transmits everything you say to other players, the other mode allows you to silence your microphone so you can cough or talk to other people in the room without the online players hearing you. There is a button to change between the modes, but it is not a stateful button. That is, the button doesn’t stay “pushed in” or not - to change modes you just push the button again.

Because the button doesn’t provide state information there is a toggle light to let you know what mode your microphone is currently in. This is where the problem is. Here are two images that show how the light works in each mode.

From these images, can you tell which mode is “recording” and which is “muting”? Is it obvious? My answer to that is a resounding no.. and here’s why.

A few things I’ve learned about user interface design:

• Avoid modes wherever possible. Modes require the user to remember something. If you need to implement a mode, be absolutely sure that the user can easily tell what mode the system is currently in.
• Metaphors are a great way to enhance usability. Users can understand metaphors because they can relate to them in the “real” world. Requiring your users to remember less can increase usability (knowledge in the head vs. knowledge in the world).
• If you use a metaphor, make sure you get it right! Ensure that the user’s conceptual model accurately reflects the system model. Bridge the gulfs of evaluation and execution.
• Users never, ever, ever, read manuals. Never. If the system needs a manual to figure it out, chances are it wasn’t designed well.

So… Miscrosoft did a good thing. The microphone has two modes – record, and mute. In order for the user to not have to remember what mode is which, they’ve used a metaphor to indicate what mode the microphone is currently in.

The problem is, they got the metaphor wrong.

The metaphor they picked, green meaning “go” and red meaning “stop”, is a metaphor that everyone understands. However, green and red don’t make sense at all in this context. If I had to guess, I would say that “go” meant the microphone was recording, and “stop” meant that the microphone was on mute.

However, another metaphor, speficially related to the microphone context, is that “off” (no light) means “not recording” and “red” means “recording.” Remember that old tape player that you had in 1990? Remember when you went to record a song off of the radio, there was a red light that illuminated to signal that the tape player was recording?

So which is it? Is green “record” or is red “record”? In my head, I picked the radio metaphor over the stop/go metaphor because of the microphone/voice context. I assumed that when the light was red that everything I said would be transmitted over the internet and when the light was green the microphone was muted and I could talk freely to myself.

As you can guess, I picked the wrong metaphor.

The button on the controller is used toggle between the two modes. Aside from the color, there is nothing else to indicate what mode the microphone is currently in.

Imagine my chagrin when I discovered that my random coughing and commentary had been heard by numerous people when I didn’t intend for it to be. Imagine my frustration when people were talking to me but I couldn't respond back to them. Believe it or not, I actually had to read the manual to figure out what the colors meant. I consider this a failure on the part of Microsoft in the design of the adapter.

How could the adapter have been designed better? Personally, if a metaphor had to be used I think more people would be familiar with the radio vs. the red/green one. Of course, this is a baseless claim.. just because I’m more familiar doesn’t mean everyone else would be… which is why it’s essential to perform usability testing. Maybe Microsoft did, and their target audience (which is probably younger than me.. but I’m only 23) understood the red/green one more a higher percentage of time?

How about a different idea – instead of a stateless button, have a stateful switch on the side with two positions, record and mute. The record position has an icon of a microphone, and the mute position has the microphone icon with the classic “circle with a line through it.”

Taking that one step further and combining with a previous thought – keep the stateless button, change the light to a microphone icon, and have a the “no” ciricle light up red when the microphone is muted. I think that would offer less ambiguity and would reduce misinterpretation. Again, that is a baseless statement… it would have to be proven through user testing.

The point of all of this, as I’m sure you’re aware, is that user interface design is important in all things. If you build something that other people need to use (from a teapot, to a doorknob, to a software program), you need to build it with the other people in mind. The architect, programmer, designer, etc. is not a good judge of “simple,” and usability testing is very important.

What do you think about the Xbox Live toggle light? Did you guess the right metaphor? How could the design be improved?

Someone asked a question about how to convert a string with HTML escape sequences (like: &lt;). to their unescaped equivalents (like '<'). Here's a quick function to do that for you...

function convertFromHTML(the_string) {
   createTextField("converter_txt", getNextHighestDepth(), 0, 0, 0, 0);
   converter_txt.html = true;
   converter_txt.htmlText = the_string;

   // store the text so it doesn't get lost when we remove the
   // text field
   var txt = converter_txt.text; 
   converter_txt.removeTextField(); // clean up
   return txt;
}
// usage:
trace(convertFromHTML("This is some <html> escaped text & stuff")); 

WARNING: This was just thrown together and isn't thoroughly tested so use at your own risk. Additionally it requires Flash Player 7 because of the getNextHighestDepth() call. You can remove that call and replace it with a numeric depth, but be careful of what depth you select since convert_txt will overwrite whatever is on that depth.

The algorithm is simple - make an html-enabled text field and put the html in it, then read the text field's text property. The text property is the normal, unformatted text without html tags regardless of whether the text field is html-enabled or not.

Enjoy!

When you create a Flash piece, do you tag it with your "created by" information?

The process of tagging a .swf file (I'll use the word tagging here informally, for lack of a better term) is quite simple. In fact, all it takes is one line of code:

String literals get compiled into the .swf and have virtually no impact at runtime. Truth be told, tagging will add a few (3) instructions and a few more bytes to the .swf file size depending on the string size, but the "code" doesn't actually do anything when the Flash Player tries to execute it. However, tagging does two things:

1. Identifies you as the author
2. Maybe, just maybe, it will ward off someone attempting to decompile your movie to get at your code (the "scare-factor")

In all honesty if someone decompiled your movie and saw the line you tagged, then they'll probably continue past the copyright and just gank your code anyway.. so #2 probably isn't that applicable.

However, #1 is a little more interesting. Have you seen people attempt to take credit for something they didn't create? I have... if everyone tags their .swf with "created by" information inside the .swf, it might eliminate some of those claims.

Perhaps a better repercussion of swf tagging could come from google and search engines in general. By now, you probably know that google will scarf up the contents of a .swf file and index it for searching, but what if you don't want it to? It might be nice to add a "no-index" tag to the .swf, to deter google from indexing your .swf. Something like this might work:

"meta[robots]:no-index,no-follow";

Obviously the above doesn't work at all yet, but it's interesting to consider. Tagging is an easy way to add meta information to a .swf file. Are there any standards out there for swf tagging yet? I wonder if this is something that could be valuable and might catch on...

As a programmer, you have the ability to make your life easier by writing code to avoid repetitive tasks and large amounts of data entry. I've been noticing that I do this a lot.. how about you? Here are two quick examples...

When I was working with the language translations of SolVE, I had a file saved as UTF-8 with characters not supported by typical English fonts. I had a hard time getting Java to recognize the characters correctly in the file to display them properly. The workaround was to escape the characters as their Unicode equivalent ('\u' followed by four hex digits).

That meant taking each character, figuring out what it's Unicode value was, and replacing it with \u0732 (where 0732 would be the character's Unicode value). For large files, I knew this was going to be a pain and I definitely didn't want to do the conversion process by hand.

Enter Flash. I wrote a small script that would take the .properties file containing the string keys (language translations) and output the same file with the characters Unicode-escaped. The main loop was something like... for every line pasted into a text field on the stage, for every character in that line (after the first = sign), output "\u" + the_line.charCodeAt(pos).toString(16) to the output panel.

It worked really well - and the time it took to write the script (maybe 5-10 minutes) was much less compared to the time it would've taken to convert the entire file by hand. All I had to do was paste the contents of the .properties in a text field, click a button, and then copy the output panel contents back into the .properties file and everything worked great.

Another quick example - I needed to fill a data provider for a combobox with the state names and abbreviations. Writing 50 lines of code by hand with a lot of data entry and potential for spelling mistakes wasn't my idea of fun - so I wrote a little script to write the code for me.

I found a state combobox on an HTML form somewhere, copied the tags from the source and pasted them into a text field. Example input looked like this:

Then, I wrote a small script to process those option tags:

btn.clickHandler = function() {
	var arr = txt.text.split("\r");
	
	for (var i = 0; i < arr.length; i++) {
		// if the line is blank, skip it
		if (!arr[i].length) continue;
		
		abbr = arr[i].substring(15,17);
		state = arr[i].substring(arr[i].indexOf(">")+1, arr[i].lastIndexOf("<"));
		trace("state_dp.push({label:\"" + state + " (" + abbr + ")\"});");
	}
}

Now, I ran the movie, clicked the button, and my output window was filled with statements like:

state_dp.push({label:"Alabama (AL)"});
state_dp.push({label:"Alaska (AK)"});
state_dp.push({label:"Arizona (AZ)"});
// etc

So, I didn't have to type in one state name at all - I simply had to find the HTML version (which was found easily), write a small script to process the input, and then copy the results of that script and paste that into the .fla where I needed a combo for all of the state names.

Little things like this can really make your life easier and save you a lot of time. That's why the Flash JavaScript API is so powerful as well...

I've also done this with ColdFusion. I'd take the results of a query and format them into ActionScript code, then copy the HTML generated view into an ActionScript file for the Flash movie.

How many of you write code to write your code for you?