Rafblog - Jake Cohen's Blog

Thinking in DFS vs BFS

The concepts of depth-first search (DFS) and breadth-first search (BFS) are usually used to describe an algorithm for visiting nodes in a graph or a tree structure. The key difference is whether you visit all of the nodes nearest to you first, then begin radiating outward from there, or whether you continue as deep as possible along a given path first, and backtrack only when you can continue no deeper.

A thought process can be represented as a sort of graph. If you think of one thing, and that brings to mind something else, it is like forming an edge between the two nodes that represent the different thoughts.

If thoughts are like a graph, then what is the difference between a depth-first search and a breadth-first search between thoughts and memories? Depth-first search is what happens when you make several intuitive leaps from one thought to another. For example, if someone says, "I need to go get this film developed," and you pick up on the word "developed," you might then think "developer," which could lead to the famous Steve Ballmer "Developers, Developers, Developers" video, which makes you think of Microsoft, which makes you think of Bill Gates, and finally you say "hey I heard the Bill and Melinda Gates Foundation donated a lot of computers and money to the computer science program at Stanford." Then you'd get a strange look because you were supposed to be talking about cameras and film. This is depth-first search in the human thought process.

What about breadth-first search? This is thinking about an idea and coming up with a list of all the thoughts it triggers. You have to be careful not to follow down the path of any of these thoughts, or you've begun depth-first search. In the example above, if someone mentioned getting film developed, you might think of camera stores, or film developing solution, or remembering to rewind a camera before taking the film out, or the difference between 24 and 36 exposure rolls.

How often have you thought of a bookmark you had as being "near the bottom" of your bookmarks list, and when you've added enough bookmarks that this is no longer true, that bookmark becomes much harder to find? Mentally, that bookmark's value was secondary to the notion that it was "near the bottom" of the list. It has forced a DFS traversal on what is meant to be a breadth of information.

There are many applications that choose their own convention for where to access their options and settings. For example, in most Microsoft applications, the Options dialog is found in the Tools menu. In Photoshop, you find Preferences in the Edit menu. In Wordpad, you find Options under the View menu. But how do you find it if you don't remember where it is? You search menu by menu looking for it, which is essentially a BFS traversal of the menu tree.

So what does this mean for interface design? It means that as we become accustomed to using an interface, our memory on how to do various things can be triggered by familiar UI elements. This causes us to make the mental leap to the process by which we accomplish whatever we're trying to do. We remember processes and UI habits in terms of DFS, but we learn them by experimenting in BFS fashion.

Seadragon and Zooming Interfaces

Jeff Atwood has written a blog entry about Zoomable interfaces, including an image of Microsoft's Seadragon product as an example. The other examples in his post are mostly concerned with the ability to zoom in and out for finer grained control or higher-level operations.

I think Seadragon is the most intriguing example, and has the potential for using the "zoom" function as more than a means for adjusting the scope of what you're operating on. When you're navigating the web, the relationship between pages is basically a graph. In this presentation, the size of each page shown is inversely proportional to the weight of the path from the current page to that page.

Since web page graphs typically have cycles, you can get a sort of fractal effect as you navigate to sub pages, and then to more sub pages. Each "zoom" operation effectively moves you along an edge of the graph and adjusts the weights of the paths to nearby nodes, creating a new set of preview images of varying sizes.

Update: after viewing the full video of Aza Raskin's presentation, which includes a bit on zoomable interfaces, I'm not sure what point he is trying to prove. Early on, he says that hierarchies are inherently bad, and that we should not try to organize and categorize our data, because it is inherently non-scalable. Yet when he looks at the idea of zoomable interfaces, he is advocating exactly the opposite. The data is extremely hierarchical, and the "zoom" feature navigates up and down the levels of the hierarchy.

Sony Understands Packaging

I recently ordered another pair of the Sony MDR-V6 Headphones for listening to music at work, since I was pleased with the quality of the first pair I bought to use at home. As I was unpacking the headphones, I noticed that Sony has taken a lot of care to make the packaging of the headphones elegant and easy to use. Easy to use? What does that mean for packages? Well, have you ever bought something that came in that invincible hard clear plastic that is stitch-welded shut around the entire edge? The only way to get into those products is to cut it open with a strong pair of scissors or a sharp knife. The cut edges of the plastic themselves are sharp enough to cut your hands if you're not careful. The Sony packaging is quite easy to open without using anything but your hands. In fact, you can get it open without actually destroying the box it comes in. These headphones come with their own carrying pouch, but if they didn't, it'd be easy enough to store them in their original packaging. Here is the package from the outside, which looks basic enough. Here is the top of the package after opening the cardboard portion. The inner part slides out and presents the headphones on a shiny cloth background, with the cable neatly tucked behind (but easy to get to without destroying the box). Why does this matter? It shows that Sony is thinking about the presentation of their product beyond what the potential customer sees sitting on a shelf. They are thinking about the experience of the customer as they open the package and remove the headphones. (These photos were taken with my Sony Ericsson Z710i camera phone.)

Graphics Editing

Jeff Atwood made a post today about the importance of a developer having the skills and tools to do basic image and graphics manipulation. I highly agree, and I cringe every time I see a 2MB attachment on a mailing list because the taker of the screenshot was not aware that even Paint can save as a compressed image format such as PNG or GIF instead of an uncompressed bitmap.

I use Photoshop Elements, which is well worth the price. Why Photoshop, you might ask? Why not Paint Shop Pro, or The GIMP, or any of the other tools out there? The main reason is the community of graphics professionals I interact with all use Photoshop, and it is easier to learn from other people who use the same tool. It is by watching graphics designers and artists that I learned, for example, that you can move around a zoomed image by dragging the mouse while holding the space bar, and that double-clicking the magnifying class restores 1:1 zoom.

It is how I found out how powerful layer groups can be, or that I can press the Alt key to temporarily switch to the eyedropper tool when using a pencil or brush. Find people who do graphics design and editing professionally, or at least on a regular basis, and learn from them. Adopt the tool they use and it will be much easier to apply the knowledge you pick up from them. If they use Photoshop CS, you can still use Photoshop Elements and translate many of the same techniques over to your own editing.

Blog Archives

Why is it that blog software always organizes entries by month? Is this really a useful way to find posts in an archive? Often I find myself browsing through the archives of a blog I've stumbled upon, such as User Centered, a blog about usability. However, this blog, like so many others, offers the archive organized by the month in which the post was made. I don't really care about that, I'd rather have an easy way to go back through the archives, viewing older and older posts, until I've either read them all or they have lost enough relevance for me to stop.

I think the organizational system used by web comics tends to be much easier to use. When you come across the site for the first time, you often want to read the archives to get caught up to the current entry. They almost always provide navigation that makes this easy. There is typically a "First entry" link that goes exactly where you would expect. From there, you can just keep hitting "Next entry" until you've caught up.

For entries that happen chronologically, like blog entries and web comics, it makes a great deal of sense to have the entries organized continuously, with the Next and Previous navigation elements always available. Browsing by month is only useful if you want to find a specific entry and happen to know when it was made (though I think offering the ability to search the entries is arguably more useful than browsing by month).

I just find it strange that sites that promote usability and user-centered design, such as User Centered and This is Broken force me to select a month to see posts in the archive.

User Interface Design for Devices

While some appliances and devices have grown easier to use over the years, some have gone the opposite direction and become more confusing. It is not, it seems, through any lack of trying on the part of the manufacturers, however. It seems that some manufacturers have simply become detached from their customer base, or their research departments are inept.

For example, look at the controls on a car stereo. It used to be simple to tweak the equalizer settings. There would be a knob for the bass, a knob for the treble, a knob for balance, and maybe a knob for fading front to rear. Now, you have the exact same functionality, but you access it through a menu. You press the "Audio" button repeatedly until you get to the setting you want, then hit up or down to change it.

The problem I see with changes like this is that they don't add anything for the end user. They might be trying to save room by not having so many knobs, or they might be using some sort of digital EQ which is more difficult to set if you control it with analog knobs. They are essentially passing a design/manufacturing problem on to the user. With the old-school knob system, it might look "low tech" but it does exactly what it's supposed to do. You can see at a glance what the current setting is, and you can change it quickly.

For another example, look at the printer attached to the average computer. Older printers had a variety of buttons that were labeled for the function they accomplished. Newer printers have only a couple of buttons, but they are labeled with a cryptic symbol or not at all, leaving you to either punch them in various combinations until you get what you want, or go find the user's manual to look up something like canceling a print job, which should be a simple, intuitive operation.

The HP LaserJet 2100 series printer is an example of a printer with an over-simplified interface. Two buttons, one of which is labeled with a triangle within a circle, one blank, are the only means of controlling this printer. It also has three LEDs on the top to indicate status. One of these is next to the blank button, one is next to a symbol that looks like a horseshoe, and one is next to a recognizable symbol: an exclamation point with a triangle around it.It is not obvious from looking at this panel that pressing the blank button gives you a printer information page, or that pressing both buttons together gives you a detailed information and status printout.

HP LaserJet 2100 control panel. Source: John VanDyk's web log.

If I had to redesign this printer's controls, I would simply show the functions you can do, and the statuses that can be reported, and not rely on user's manuals to interpret the meanings of various combinations of status lights or buttons. There would be one button with a red circle with a line through it, and the text label "Cancel" next to it. There would be a small button with the text label "Print Status Report" next to it. There would be a small button with the text label "Print Printer Information" next to it. For most printing purposes that is all that is needed.

For the status indicators, I would put a few LEDs on the control panel. One would be labeled "Power", one would be labeled "Printing", and one would be labeled "Paper Jam". The power switch would be on the control panel, not on the side or the back.

The paper tray in modern printers never seems to hold enough paper. Unless you get a office-duty larger (and more expensive) laser printer, the paper tray almost never holds a full ream. Printing paper is sold in reams. I think all printers should have paper trays that hold slightly more than a ream. The paper status light should be next to the paper tray. It should light yellow when the paper is low, and red when it is out. If the paper tray held slightly more than a ream, it would be easy to just open a new ream of paper and load it whenever the light gets yellow. As it stands now, people often load part of a ream and have to leave the rest sitting next to the printer until it is needed.

Samsung E-715 and T-Mobile

T-Mobile and the Samsung E-715 have a bit of a way to go when it comes to ease of use, intuitive interfaces, and feature usability. Here's a small list of things that I simply can't believe a modern pair of companies would fail to fix:

• When talking on the phone (or checking voice mail) the screen turns off after about 15 seconds, as do the keypad lights, so its impossible to find certain keys to press when navigating menus in the voice mail system. There is no option on the phone to keep this from happening (the back-light duration setting only affects how long the screen stays lit when the phone is open, but you're not making a call).
• The list of options in the voice mail menu does not include a way to repeat the message you just heard.
• If you forget your password to log into the My T-Mobile web site, it will prompt you for your phone number and say that it will send the password to your mobile phone. After entering your number, however, it simply asks you the answer to the question you picked on sign-up, and never sends anything to your phone.
• When a new voice mail is received, a text message appears in the phone that says "You have a new voice message. Dial 123 to listen to it." However, Dialing 123 does nothing, and you annoyingly have to navigate through a couple layers of menu to delete these text messages that appear every time you get a voice mail. There doesn't seem to be any way to disable this.
• The voice mail indicator on the phone disappears after you erase the above message, even if the voice mail is still waiting unlistened on the server.

My previous phone, one of the ancient Motorola Star-tacs, had a much more intuitive menuing system, especially when it came to voice mail. Combined with Sprint's voice mail service, it was exceptionally easy to use. If a voice mail arrives, it lights the voice mail icon on the screen. If you call and check the voice messages, the icon disappears. The menu in the voice mail system includes all of the options you might like to use, including saving, erasing, re-listening, and replying to a voice message.

Despite all this, however, the new phone and service are pretty good. I can get service in my office, which never properly worked with Sprint. The phone has exceptional battery life (even compared to the Star-tac), and has a bunch of other useful features that work quite well. I think Samsung and T-Mobile, and perhaps the other providers and vendors, are concentrating a bit too hard on the cameras and games and fancy ringtones at the expense of plain, simple usability and its intended purpose as a phone.

What to Tell Your Users

Computer error messages are the source of much frustration and bitterness toward computers and computer software. One thing that the computer programming education industry often fails to teach is the principle of designing error messages.

From the code I have seen on my NoPaste site, it seems that most novice programmers will display a message in their native language that says something to the effect of "Your input was wrong! Try again!" Years later, when they have a job at a software company, their error messages have progressed to say things like "Error 29923: Invalid resource handle."

The only difference between these error messages is their wording. The problem they share is that of failing to tell the user anything meaningful. In both cases, the error message really is designed to serve the programmer because it tells them something about what is going on behind the scenes.

It is not surprising that many computer users would be greatly annoyed to find their work interrupted by an unhelpful error message such as this. The user does not care what the code is doing internally, they just want their program to run properly, and to be able to fix situations that prevent the program from running properly.

It is for this second case that error messages should be designed. If the user can fix the problem, the error message should be one that clearly indicates what went wrong (and ideally, how to fix it). For example, Microsoft does a good job with their Internet Explorer error message when a non-existent web address is typed into the address bar. It yields a page describing possible reasons that it was unable to find the site, and several things the user can try to fix the problem.

In contrast, if you did the same thing in Opera, you would get a small pop-up dialog box error message that says that it could not connect to the site, and all you can do is press OK. The user is left with no information as to why it was unable to connect. The experienced internet user will know to check the typed-in URL, see if other sites still work, and so on. The novice is just left feeling dumber for causing yet another red error message to pop up on the screen.

A case study involves me trying to install the phpBB bulletin board system. This system relies on a database installed on the server on which it runs, and one of the first things the install script does is try to create the database tables, then populate them with some initial information.

When I tried to do this, a slough of database errors appeared on the screen saying that phpBB was unable to insert into a particular table. That's it. No suggested remedies, no places to look. I had to do the looking myself. It turns out that the database tables never got created. I checked into the install script's code, and discovered that the SQL statements to create the database tables had never been read properly from disk. The code that read the SQL statements from disk had been set up to suppress all file-system error messages. That is, they just assumed it would succeed and silently failed if it didn't. When I modified the code to enable the error messages, I discovered that there was a permissions problem on the directory that contained the SQL statements on disk.

A very easy fix, even for a novice computer user, but the process to find out how to make the fix took several minutes and some PHP programming experience. If they had displayed the file system error to the user, the user would have had more options. "A file permissions error? oh, ok. I can look at the file permissions then. Let's see.. the error message says that they need to be X, and whoops.. they're Y on my disk. I'll fix that and.. neat, it works."

The moral of this story? Don't tell the users things that won't help them fix the problem. Do tell the users things that will help them fix the problem. This is the point of error messages, and the general perception of computer software will improve if people strive to follow these principles.