DesignAday

As much as we might like to think of design as something special, it is one of a multitude of skill sets that make for a successful product. The cover of Terry Winograd’s book Bringing Design to Software illustrates the concept as a bright red ball tossed into an array of cogs. One of Winograd’s students once told me that Winograd did not like the cover—it looks like the red ball is going to get caught in a smoothly running machine and jam up the works. That’s decidedly not the message he hoped to get across. In the reality of a software development firm, design is one of the cogs. It isn’t any more or less valuable than the other cogs that all work smoothly together. A designer must integrate her process and tools with those of the developers, testers, sales, and management to be most effective.

Much has been written about the T-shaped designer (http://is.gd/hMfZA, http://is.gd/hMg3F). I believe the T-shape is representative of a designer that has recently graduated with a Masters degree—deep in one specialization, such as Interaction Design, with a broader appreciation of the landscape in which the specialization fits. As a designer works in the field, he will naturally continue to deepen the vertical stroke, and will likely extend the breadth of the horizontal stroke as he gains more experience with adjacent specializations. I believe, however, that a mature designer should begin branching additional verticals, moving from a T to shapes more resembling  the letter m. The design industry is not a static one, and for a designer to remain relevant in the industry, he should continually seek new areas in which to add value. I foresee the design industry continuing to develop more specialties, and while one person shouldn’t be expected to do everything, it is in a designer’s best interest to not pigeonhole himself. Of course, a multidisciplinary team will almost always be more successful than a lone designer. Getting the right team combination is easier when you have several m-shaped people to pull from.

I resisted as long as I could, mostly due to the belief that I just don’t have time to participate in yet one more communication channel. What finally changed my mind was watching someone using Tweetdeck gauging the buzz when we closed registration for Interaction 11. I had never really thought about using Twitter as a realtime research tool. The ability to track trending topics by keyword is a very compelling idea. I think it may come in handy when I’m preparing for class.

As for posting, I doubt I’ll do much, but I did link Tumblr. My handle is jackmoffett.

“The Shattering” occurred yesterday. Since it’s launch in November of 2004, World of Warcraft has received two major expansions, and now it is time for the third: Cataclysm. The Burning Crusade and Wrath of the Lich King each expand the world by adding new locations: a new planet and a new continent, respectively. Blizzard has taken a different approach in Cataclysm by reforming the original world through a cataclysmic disaster. A monstrous dragon has broken free from his imprisonment deep underground and has forever changed the geography of the two original continents. Entire regions have been flooded, burned, etc. This is all very exciting for players, and counting myself one, I find the result to be quite interesting.

Certainly, the World of Warcraft is digital—it isn’t real—and yet it has so much depth (relative to games historically) that it is relatable in a very real way. I have vivid memories of the time that I have spent in the game, and because it is multi-player, they are shared experiences. Now that The Shattering has occurred, there are locations and events that can never be experienced again. Just as I can reminisce with friends and family members about vacations and events in my life, I can have those “remember when” conversations with the guys I play WoW with.

For example, one region was dominated by a huge lake held back by a massive dam. My friends and I spent a significant amount of time questing in the region, fishing in the lake, and so forth. The dam was somewhat of a monument in the game—one of the things that was cool for new players to see for the first time. One of my friends saw the dam for the first time while we were playing together and, peering over the edge, asked if we could go down to the region below the dam. I told him that we could once our characters were at a higher level and warned him not to fall off. Then, seconds later, I accidentally nudged my character right over the side. It has become an inside joke that comes up now and then. It’s part of our shared life experience. During The Shattering, the damn was demolished. The lake has drained and is now more of a marsh. Our shared experience is now a memory only. Nobody will be able to see the dam again accept in pictures.

Blizzard has introduced history—not just backstory, but true history—to a game world in a very effective, emotional way. I think that is a significant accomplishment in game design.

He was sure it was a JavaScript problem. We had two tables (that we knew of) that were displaying a disabled scroll bar when it wasn’t needed. The rest of them we had checked were fine. Actually, I should say that a div was displaying the scrollbar. You see, we have tables in which the body must scroll separately from the header. So, I implemented it such that the header and body are actually two separate tables. The body table is in a div that gets a max-height set by JS, based on the height of the window, and has overflow set to auto. The developer that was assigned to fix the bug was looking for a problem in the div sizing logic. He couldn’t find anything. Then I took a crack at it, searching for differences in the CSS. The scroll bar was only showing up in IE, of course, so Firebug couldn’t help me. I was stuck using IE’s built-in developer tools. I compared the broken table with one that was working and compared both of those to my original prototype. The styles being applied were identical. We had spent hours trying to figure it out, and were no closer to finding a solution than when we started.

Finally, I started comparing the tables themselves. It occurred to me that the buggy one incorporated row spans, while my prototype and the working table did not. I removed the row spans and voilà! The scroll bar disappeared. We spent all that time assuming that something was wrong with our code. I should have known it would be a quirky IE bug.

IE’s tooltips behave rather awkwardly. Hover over an item that has a tooltip and the tooltip will appear. If the mouse is still for some number of seconds, the tooltip will disappear. This timeout is sensible, but there’s a problem. Once that timeout has occurred, the tooltip will never display again until you hover over a different item and display its tooltip. I’ve found it annoying, and it has confused developers I work with. I’ve even had customers report it as a bug. 

My bank just released their new iPhone app. I don’t know that I’ll ever really need to make a transfer or check my balance from my phone, but I went ahead and got it. So many of the apps I have are there for the “what if” situations. Now that I have it installed and set up, I doubt I’ll ever use it. They require that I login with a password every time I open the app. Now, you might think that sounds reasonable, considering it provides direct access to my bank accounts. However, it is the same login that I use to access my accounts on their website. That password is a secure password that I manage with 1Password. In other words, it is long, completely forgettable, and difficult to enter.

Secure passwords are not acceptable for mobile use, and there’s no way I’m going to change my bank password to something that’s easy for me to remember and enter. I do have 1Password on my phone, so the password is there if I really need it. I can copy and paste it, but that ensures that I’ll only use the bank’s app in an emergency.

I booked my flight today for Interaction 11. I searched for flights using both Orbitz and Southwest and was struck by the difference in the display of their results. Orbitz pairs departing and return flights, repeating them in every possible configuration. This results in a long list that is hard to digest. Comparisons are difficult, because each result takes up so much screen space, you can’t fit more than two on screen at once. This is one search result in a list of 45:

Southwest, on the other hand, assumes that you are going to compare departing flights and pick one, then compare and pick a return flight. So, in not much more space than Orbitz takes for a single result, Southwest presents six for easy comparison.

Southwest’s design allows me to make a decision much more quickly and with more confidence that I’m getting the best flight for my needs.

Most of the applications I work on display lists of items, be they documents, pages, data sources, people, messages, or whatever. These items are typically actionable in some way. Years ago, the best way to handle this in a web browser was to place a button for each action with every item in the list. For example, there would be buttons for edit, delete, and send. The result was a lot of buttons on the screen, which was not ideal from the standpoint of the visual design, but allowed one-click access. Additionally, each list item would have a checkbox so that bulk operations could be performed.

As HTML and CSS became more robust, I started hiding the buttons and displaying them when the cursor would hover over the row. This got rid of the clutter while still allowing one-click access to the most important functions. However, I didn’t like the fact that there was no indication that the actions existed until a row was hovered over.

My solution, then, was to display a light gray outline of one button on each row. This, I felt, was enough of an indication that something was there while still avoiding the clutter.

I’m not sure how long it’s been there, but I just noticed Google’s new page preview feature. Every result now has a magnifying glass beside it that highlights as you hover over the result. Clicking the result opens a sizable preview of the page the result is sourced from. Each result is called out and enlarged within the preview. They even go as far as to split the page with a jagged line to show multiple results occurring in distant portions of the page. It’s a nice feature, but I find the implementation a little odd.

When you click on a result to display the preview, what you are actually doing is turning on a preview mode. All of the magnifying glass icons on the results page highlight. Hovering the cursor over a result shows the preview. Clicking any result turns the preview mode back off. It seems to me that, rather than putting an icon on every result, there should be a single button somewhere on the page that would toggle the mode on and off.

Eric Raymond’s Rule of Economy states “Programmer time is expensive; conserve it in preference to machine time.” But I’ve got a better one.

The user’s time is precious; conserve it in preference to programmer time.

It’s so easy for a development team to make decisions based on the schedule, rather than based on what’s best for the user. We have to deliver on schedule. We have to deliver within budget. But think about this. An implementation that saves a developer an hour or two may require one extra click from the user. That doesn’t sound so bad… until you realize that the user must perform that extra click fifty times a day. And it’s not just that user. There are thousands of them. The impact on productivity could be quite profound over the life of the product. If you think I’m exaggerating, consider the amount of web developer time that has been burned hacking IE 6.

I have sung the praises of Adobe’s smart guides in the past, just as I have complained about the lack of consistency between the applications in their Creative Suite. Here’s a head-on collision between the two.

In Photoshop, I can hold down the control key while I’m dragging an object to keep it from snapping to guides. While I’m doing this, the smart guides still appear. I find this quite useful because, while I love the smart guides, I usually end up with so many layers in a file that snapping to the smart guides becomes a hindrance. Holding down the control key, I can find the smart guide that I want to use for alignment in situations where the application would want to snap to a different guide.

InDesign also temporarily turns off snapping while the control key is pressed, but it also temporarily hides the smart guides. This is inconvenient, and I wish it behaved the same way as Photoshop, but I get by.

Then there is Illustrator—as always, the red-headed step-child. Illustrator completely ignores the control key. As far as I can tell, there is no key that will temporarily suspended snapping to guides. This drives me up the wall.

Interaction 11 has sold out three months prior to the conference. The Interaction conferences have sold out every year, but we significantly increased the number of attendees this year and still sold out faster than in previous years. With such high demand, it creates an interesting problem. Should the conference continue to grow in size, allowing more practitioners to benefit from it each year and bringing in more money for the organization? Or, would the conference lose that special, close, community feeling that it is identified with? Even this year, the numbers have been a struggle. There are a lot of hotels in Boulder, but most of them are rather small, especially those in the downtown and campus areas where the activities will be taking place. We’ve had trouble finding venues that can hold enough people for meals and parties, especially considering that we want locations with character—some uniqueness not typically found in hotel ballrooms. Transportation is a huge expense and a wicked logistical challenge.

All things considered, though, Interaction 11 is shaping up to be a very good conference. If you missed the cut, you have my sympathy.

There is an unfair wealth of outstanding restaurants in Boulder. The quality of their food is matched by their interior design. I had the privilege of eating at several of them while I was there last week. Happy provided my Friday dinner, and I snapped this shot of their specials menu.

It’s rigged up with a big role of butcher block paper at the top and a beautiful wooden frame that holds the paper in place when it has been pulled out. To change the specials, pull the paper down from the bottom and tear it off. It’s an elegant solution that fits well with the rest of the decor.

Regular readers may recall that I’m the logistics chair for the upcoming Interaction 11 conference. I’m currently in Boulder, the site for the conference, working out some of the details. During this trip, I’m staying in one of the secondary hotels with which we have arranged for a special conference rate: the Boulder Outlook Hotel & Suites. We selected this independent hotel because it has a bit more personality than your standard chain. It’s also the first “zero waste” hotel in Boulder. Every room has one container for metal, plastic, and glass, a second for paper and cardboard, and a third for trash. They even have cans for compost. When I returned to the hotel this evening, there were some local farmers selling produce in front. It isn’t an upscale hotel, but it does reflect what the entire city of Boulder seems to be about: healthy, responsible living.

This sticker is on the mirror in my bathroom.

It looks like a button, but it’s not. The designer very purposefully created graphics that look like a button. However, only the text label is clickable. Click anywhere else within the not button and nothing happens. US Airways’ online checkin is full of these nasty little buggers.