GarrettDimon.com

Gorilla Usability Testing

Mon, 07 Jul 2008 01:44:00 GMT

So, what exactly is Silverback? It’s “spontaneous, unobtrusive usability testing software for website designers.” It gracefully records the on-screen action, including mouse clicks, as well as video and audio of the subject so you can create a library of usability testing videos to share or review later.

The Genesis of the Idea

Great software is the usually the result of people “scratching their own itch,” and Silverback is a perfect example. Clearleft has been doing basic usability testing with a video camera and tripod since they opened their doors. It got the job done, but it wasn’t ideal. They had spent some time exploring other options, but none of the solutions met their needs.

One day, a friend of theirs participated in a usability study run by Leisa Reichelt. He noticed that she had created a simple little hack to run iChat video and automatically create screen captures every 5 seconds in order to create a single file showing the screen as well as the test subject’s reaction. One thing led to another, and Clearleft decided they could take this idea to the next level, and the vision for Silverback was born.

Figure 1 The blank slate guidance helps you dive right in without the need to read instructions or configure anything.

Early Concepts & Mockups

We spoke briefly about the development process and how the application has evolved since the early concepting and prototyping phases. Andy graciously shared some of the early wireframes and mockups of Silverback. They were able to ultimately stay very true to their original vision, but the departures and evolution of the ideas are are very interesting.

Wireframing

Like any concept, Silverback’s interface has evolved through a series of sketches, wireframes, and mockups to become the application that is today. (Figure 1) Naturally it’s not an exact replication of the early concepts because ideas change and technical limitations rear their head. The example preferences screen shows some of the basic options as well as comparing the original wireframe to the preferences pane as it exists today. (Figure 2)

Figure 2 While there are inevitably some variances, the resulting application has stayed true to the original concepts.

The wireframes show the concept of projects and sessions, and the only significant changes are how they are organized and presented on the screen. (Figure 3) The export options have also been moved into the save dialogue where they are more appropriate (Figure 4), and the final interface provides a higher level of user feedback about the video and exporting configuration.

Figure 3 Even in the initial versions, the sessions worked with the concept of a project. During the development process, the interface for managing projects has necessarily evolved to be more complete, but the original underpinnings are still evident in the wireframes. Figure 4 The quality options for exporting have migrated to the save dialogue, but the project, subject name, date, length, and notes for sessions have stayed the same.

Mockups

Wireframes are, by their nature, fairly abstract. They generally serve as an exercise in thinking and understanding and don’t need to be high-fidelity. That fidelity isn’t necessary until the mockups. Like the Silverback wireframes, the initial mockups help show an interesting evolution. On Silverback, like any project, things changed. Whether it’s technical constraints or usability enhancements, they embraced the change instead of religiously focusing on following the mockups.

Figure 5 The original mockups show the right pane as being a single all encompassing

Andy also spoke about the implementation saying that the graphical parts of the interface were actually the most difficult aspects to get pixel perfect. When setting out to design a desktop application, there was hope that they’d be able to avoid the issues of multiple browsers that we have to deal with in web development. Unfortunately, developing desktop apps isn’t without its share of inconsistencies. From UI quirks to tracking down bugs on different physical machines with different software and hardware configurations, the team had equally frustrating moments developing for the desktop.

Figure 6 The list of users was migrated into its own pane.

While some aspects inevitably changed, it’s clear the final product didn’t stray far from the original mockups. (Figure 5, 6, and 7) The clear evolution of the application from wireframes, to mockups, to working desktop app is a wonderful example of working within constraints and adapting to new information over the course of a project. Change isn’t a bad thing. Of course, it’s important to manage change, but it’s not something to be afraid of.

Figure 7 The area for video was originally designed to be much different. That area of the screen has now evolved to present context-relevant information based on whether it’s pre or post recording.

The “Final” Interface

One of the reasons Silverback succeeds is its focus. It’s not trying to be a screencasting application, although it could easily be used as one. It’s not trying to be an overly complex solution, either. It’s focused completely on enabling you to capture, store, and export videos of people using software. There’s no editing functionality or unnecessary features. Silverback dutifully performs its job without distractions. (Figure 8)

Figure 8 Silverback presents a simple and intuitive interface for browsing and recording all of your usability tests by project and test subject. There’s even space to jot down notes.

Blank Slate Guidance

Having worked with some of the earlier releases, it’s very clear now the amount of thought and attention that’s gone into making the application easy to use from the moment you download it. (Figure 9) There’s no configuration. You’re ready to go as soon as you open it, and it helps make sure you can get started without ever having to ask, “What next?”

Figure 9 Once you create a project, you still need to create sessions, and Silverback makes sure you don’t get lost along the way.

iSight Preview

Figure 10 The iSight preview pane provides a quick preview of the subject and video just above the button for starting the new session. The preview also provides a subtle outline for helping to ensure that the subject is centered on the screen. And if you’re iSight is disabled, the preview pane appears blank and doubles as a reminder so you don’t start recording without it.

With each session, Silverback helps you get started with a preview of what the camera sees just above the button to start the session. (Figure 10) Within the preview, there’s even a subtle outline to help make sure things are centered and that the videos of the subjects are consistent. It’s not always necessary, but it’s subtle enough that it doesn’t get in the way if you don’t need it.

Of course, sometimes the iSight isn’t enabled or the machine may just not have one. In the case of the disabled iSight, you won’t accidentally start recording and miss the video because the preview pane makes it obvious when you’re not capturing video.

Getting Started

One of the simplest, but most thoughtful features is the initial screen you see when you start a session. Instead of immediately beginning to record, it displays a temporary screen and instructs the test subject to press the spacebar to begin the session. (Figure 11) This way, the screen is blank before the session begins and there’s no need to start the session by reaching around them or swapping seats.

Figure 11 When you start a session, it displays a holding screen until the test subject is ready to begin. This makes it easier to start it for them and help them get going from a blank slate.

Export Previews

After recording a session, you still have to export it to Quicktime in order to be able to watch it. Depending on the length of the video and computer speed, the process can sometimes take a while. As a result, you’d probably rather not have to export, wait 30 minutes, and then view the video only to find out you exported with the wrong settings.

Figure 12 The export previews each show the video preview in a different location based on the export preferences.

Thankfully, Silverback shows a small preview of the video along with the captured video of the subject so you can tell what the export will look like. You can choose the size and location of the iSight video and optionally hide it or make it semi-transparent so that it’s less likely to obscure any screen activity. What’s nicer is that the previews automatically update based on the current settings in the preference pane. (Figure 12)

Export Options

There are a plethora of options when you export your videos. You can choose where the iSight video is located as well as the size of the iSight video. (Figure 13) There’s even an option to have the iSight video be semi-transparent so that it doesn’t obscure any of the screen activity. Of course, there’s also quality and size options for the final quicktime movie as well.

Figure 13 The exported video includes an ever-present video of the test subject. The size and location is easily configurable.

What’s nicer is that you can change the settings each time you export the video. That way you can try several different options or create different versions at different sizes and quality for different purposes. So you could create a high quality version that you keep on your laptop for presentations and a lower quality version for distributing to other team members.

Figure 14 The exported video shows when and where the subject clicked on the screen with circles that gradually expand and disappear.

Capturing Clicks

In retrospect, it seems obvious that we’d want to capture clicks, but after exporting a session and watching the quicktime video, I was pleasantly surprised to see they had thought of it. Conveniently enough, Silverback overlays small circles that expand and then disappear to help show when and where a test subject clicks. (Figure 14)

Exception Handling

Recording audio and video is a tricky thing. There are dozens of edge cases that could lead to an incomplete or corrupt video. The hard drive could fill up, applications could crash, or maybe there’s a hardware problem. Capturing and seamlessly handling these edge cases can be the difference between a successful session and unsuccessful one. Silverback has you covered. (Figure 15 and 16)

Figure 15 Silverback makes sure to draw attention to any potential technical glitches before a recording begins. Figure 16 Silverback also provides immediate feedback if a recording failed. That way you’ll know if you need to go ahead and take more extensive notes, or potentially schedule another session.

Session Avatars

Whenever you’re browsing back through old sessions, sometimes it can be difficult to remember a session based just on the subject’s name. So, to make things a little more visual, Silverback automatically creates an image of the test subject to use as the avatar for each session. (Figure 17) That way, you can remember a session based simply on the subject’s face.

Apple Remote

Figure 17 A picture of the test subject is used as the avatar to assist in finding and remembering sessions.

Finally, one of my favorite features is that Silverback works with the Apple remote if your machine has one. (Figure 18) You can pause and restart the recording without having to be at the keyboard. This is a subtle but incredibly valuable feature. If you’re running a session and the subject is sitting at the computer, it can be physically awkward to get to the keyboard and press the necessarily awkward keyboard shortcut to pause or finish the session. Enabling the use of the Apple remote makes this part of the process measurably easier.

A Brave New World

Silverback is in a great place to bring usability testing to the masses. It will be possible for anyone to quickly and affordably create convincing and useful videos to help improve software. It won’t provide some of the more advanced features of a complete usability lab, but it will be more than enough for most people. All it needs to do is help designers and developers see their products through the eyes of the user, and it achieves that purpose very well. In doing so, it will expose the majority of the flaws as well as strengths.

Personally, I feel that one of the most exciting aspects of Silverback is the potential for getting increased buy-in, understanding, and involvement from executives and team members who can sometimes be too busy to attend usability sessions in person. Creating a report of the results with a word processor or slideshow just isn’t effective enough, but enabling them to watch videos of real people with real facial expressions and audio is.

Summary

Figure 18 One of the most convenient features of Silverback is the ability to use the Apple remote to play and pause a session.

Silverback will be a great addition to any web developer’s tool kit. With it’s thoughtful interface and ease of use, the team from Clearleft has a winner on their hands. It should be available to the public in the next few weeks for around $50, and it will work on both Leopard and Tiger. I can’t remember the last time I was this excited about the potential for software to really help make a difference. Nobody will have a legitimate excuse not to do at least a few sessions of usability testing, and the result will be better web sites and software for everyone.

Congratulations and thanks to the team involved with bringing such a great product to life.

Andy Budd, Concept Creation and Wireframes
Sophie Barrett, Project Management
Jon Hicks, Logo and UI Design
Paul Annett, Quality Assurance
Martin Redington, Development

Getting Satisfaction

Tue, 06 May 2008 06:39:00 GMT

It’s not forum software. It’s better. It’s designed from the ground up to be more inviting and less technical than what we traditionally associate with the word “forum”. If you take a quick spin through the site, it’s easy to see, but it wasn’t until after I started using it myself and had a brief chat with Lane Becker, one of several people behind the interface, that I began to realize just how impressive their vision is.

Figure 1 The primary page doesn’t simply provide a link to “make a new post” or something equivalently dry. Instead, it immediately engages visitors with normal language about the primary contexts that a customer or potential customer would use to talk to a business or its representatives.

The site itself is designed to be provide “people-powered customer service”, and it shines through in the attention to detail seen throughout the interface. You can think of it as forums designed to help people more effectively communicate with businesses. More importantly, it also serves as a place where people can help each other regardless of whether or not they’re official representatives of a given company. While some companies may not be ready for this kind of approach, with an option of this caliber, it can only be a matter of time before they come around.

Getting Started

While the site itself is a treasure-trove of interface design gems, I wanted to focus specifically on the task of starting a new discussion. When you arrive at a company’s main page, one of the first things you see is a simple text field inviting you to ask a question, share an idea, report a problem, or start a discussion. (Figure 1) While each of the contexts are similar from a technical standpoint, the distinction between them helps provide valuable context for the ensuing discussion.

Figure 2 Throughout the interface, a simple banner identifies the company, but more importantly, it sets some context and lets you know that people from the company are actually listening and participating.

After getting started by asking a question, the first thing you see at the top of the page is the name of the company with a statement about the level of involvement from that company. (Figure 2) If the company doesn’t have any official representatives, it lets you know that “No one from this company has sponsored, endorsed, or joined the conversation yet.” It’s important that Get Satisfaction doesn’t require a company to sponsor or approve the conversation. This is a powerful default because it enables customers to start conversations and potentially help each other even if no official representatives show up.

We want it to be perceived that if you’re using Get Satisfaction that you’re saying you want to be an open and honest company that wants to engage customers.

On the other hand, if the company is actively involved in the conversation, it creates a completely different sense of involvement. Or, as Lane said, “We want it to be perceived that if you’re using Get Satisfaction that you’re saying you want to be an open and honest company that wants to engage customers.” So, the simple statement in the interface that employees are “listening and participating” reinforces the implicit pact between business and consumer. It may seem simple at first, but it’s actually an incredibly relevant piece of information that provides context by letting you know whether you’re shouting into the canyons or speaking directly to people who can and will help you. It’s subtle, but it definitely feels better to know that the company, or at least someone who works for the company, is interested in what you have to say.

Starting a Conversation

Now that you’ve navigated to the right place and understand the level of involvement from the company, you’re ready to start a conversation, and this is where the interface becomes downright fun. While each of the contexts for starting a discussion are essentially the same from a technical standpoint, the interface actually uses a significant amount of real estate to provide context and clarification. (Figure 3)

Figure 3 Instead of simply using radio buttons to help identify the type of message, the types are used to help set context and change the resulting information accordingly despite the fact that the fields are the same regardless of which type is chosen.

In addition to making the context of the discussion so visually important, the field labels change based on the type of conversation that you’re starting. So, for a question, the label is “What’s your question?” whereas the label for an idea is “Tell us about this idea.” (Figure 4) Again, it’s a very subtle but important detail. In most interfaces, these options would be a drop down or radio button at best, but here they’re used as important tools for framing the conversation.

Figure 4 The form fields haven’t changed, but the descriptions and guidance have changed subtly based on the context of an ‘Idea’ instead of a ‘Question’.

Getting Emotional

The one feature that really caught my attention was the ability to tag conversations and comments with emotions, internally referred to as the “Satisfactometer”. (Figure 5) Online, it’s incredibly difficult to convey sarcasm, happiness, or frustration purely through text and words. Within the context of customer service, these emotions are a key part of the experience for both the company and the customer, and the team here clearly recognizes that.

Figure 5 The idea of tagging something surely isn’t a new one, but enabling people to tag something with feelings and emotions is a really interesting and, well, exciting touch. Figure 6 When you select a face, an additional field is exposed offering you the ability to clarify your feelings with words.

It would be one thing if you could simply choose from the array of facial illustrations, but that’s just the beginning. Of course, 4 facial expressions is nowhere near enough to truly convey a detailed emotion or feeling, so again, they’ve come through with the option of getting a little more explicit with your emotions. After choosing one of the facial expressions, you can add a simple text description providing a more robust explanation of your feelings. (Figure 6)

So, this is getting a bit touchy-feely, but let’s give this an objective look from a usability perspective. Is it intuitive and learnable? Yes. Is it efficient? Yes, although, it does require you to use the mouse, so it’s not perfectly efficient. Is it easy to remember how to use it? Yes. Does it handle errors well? Yes, but really, it almost eliminates the possibility of errors, so that’s a huge plus. What about satisfaction? (No pun intended.) Is it pleasant to use the design? In my opinion, I think it’s exponentially more enjoyable than selecting an emotion from a drop down or a series of radio buttons.

Figure 7 Specifying your feelings doesn’t end with the process of posting. Each discussion keeps track of the general feelings and displays a pleasantly simple bar chart to summarize the “room’s mood”.

So, we’re able to share our emotions, but what happens afterwards? Unsurprisingly, they’ve thought of that too. Whenever you view a conversation of any type, one of the elements in the sidebar is a simple bar chart to help communicate the general feeling of the room. (Figure 7). What makes it interesting is the decision about how to represent it. By using a bar chart with only four categories and not displaying a summary of the associated tags, you’re losing a significant amount of the granularity. However, when you really think about it, the four primary categories are enough to provide a simple and quick overview of the conversation.

Ultimately, it’s not a defining feature, but it’s a great way to help make online interactions more human. Instead of everything being about form fields, numbers, and text, it’s a simple and user-friendly way to make the experience a little more natural. I definitely think that’s worth talking about.

Quality Control

Lastly, after you’ve gone through the form, there’s a status meter to help you gauge the quality of your discussion. (Figure 8) While it would be easy to trivialize, or think that it might discourage people, according to Lane, it actually leads to “more perfectly formed topics because people have this huge incentive to do things right.” So, by providing a quality meter, you can actually provide people with the context and motivation necessary to invest more time in the discussion.

The quality control piece leads to more perfectly formed topics because people have this huge incentive to do things right.

What’s more interesting is that the quality meter was an idea from the developers, and they came up with it shortly before launching. So, while they would ultimately need to collaborate with the designer, the inspiration for great interfaces can come from anywhere. One of the encouraging parts of talking to Lane was that they felt that a huge part of why the interface is so successful is that it was truly designed by everybody. Instead of simply having one interface designer that drove the interface, the team worked in a much more collaborative and iterative way that lead to higher quality and more innovative solutions.

Figure 8 While these dynamic bars are common for helping you understand the quality of a password, the idea of using them to help people gauge the quality of the post is fantastic. Naturally, it also provides suggestions for improving that quality.

Summary

Without a doubt, making interfaces more human, inviting, and friendly is a worthwhile goal. I feel like it’s the obvious progression out of simple forms and basic data entry. It takes an incredible amount of insight and experience to recognize the right opportunities and solutions for making an interface more human, but the team behind Get Satisfaction has helped show just how possible and rewarding it can be.

I hope to put together more of these posts going forward and bring the site back to focusing on examples of great interface design. In doing so, two of my goals with each post are to talk to someone involved in the design and also to recognize the people behind the curtain. As I mentioned earlier, at Get Satisfaction, the whole team truly contributes and collaborates on ideas, so there’s quite a few people to mention.

The core product team…

Lane Becker, President
Leslie Chicoine, Designer
Ted Grubb, Front-end Developer & Designer
Scott Fleckenstein, Rails Developer
Cameron Walters, Rails Developer

…and, everyone else that contributed…

Thor Muller, CEO
Amy Muller, CCO (Chief Community Officer)
Eric Suesz, Community Manager

Housecleaning

Tue, 29 Apr 2008 07:39:00 GMT

Things have slowed down here a bit as I’ve shifted from designing Sifter to actually building it. As I’ve started posting all of the information about Sifter at the Next Update blog, I wanted to set everyone’s expectations about what you’ll see here in the future as well as making sure you’re watching the right places for information that’s of interest to you.

For Sifter & Next Update Information

It’s unlikely you’ll see anything here about Sifter or Next Update anymore. I’ll probably post about the launch when it happens, but in general, I want to avoid posting about any of our products here on GarrettDimon.com. My goal is for GarrettDimon.com to focus on interface design in general. So, if you’re really only interested in bug and issue tracking or Next Update, we’ve got several options.

The Next Update Blog Feed will be the primary place for information about Sifter and Next Update.
The Next Update Twitter Account has a lot of small updates about how things are progressing.
The Next Update Product Email List will be used incredibly infrequently for announcing product launches and other significant announcements. I don’t imagine we’ll ever be sending out more than a few of these per year.
The forums at Satisfaction will serve as the best place to discuss Sifter features, announcements, and anything else you may be curious about with regards to Next Update.

For Interface Design and Development

If you’re looking for information and posts about interface design and development not related to Sifter or Next Update then you’re in the right place. I’ll be ramping this site back up and be discussing interface design concepts from around the web with much more regularity.

This site will be getting back to focusing on posts like Creating a Visual Language. So, if that’s what you’re looking for, then you can just ignore this and keep on trucking because you’re already subscribed to the right feed. Thanks for sticking around.

A Profoundly Simple Widget

Thu, 03 Apr 2008 23:03:00 GMT

When it comes to Widgets, I’m a fairly pragmatic guy. I’ve tried adding a bunch of whimsical little widgets like a hula girl, sports scores, Twitter, and even some productivity widgets, but none of them stick around for long. When it’s all said and done, the only widgets that have survived are the work horses. Transmit, Calculator, Screenshots, and Weather. That all changed this week when I found “The Big Questions” widget.

Figure 1 The “The Big Questions” widget (or gadget for the Windows folks) offers a daily profound question and enables you to submit your own.

With questions like “What are you looking forward to telling your grandchildren about?” and “What would you do differently if you could start over?”, it’s a daily dose of thoughtfulness. That’s about it. I just thought this was unique enough to share. Enjoy.

Use the Ideas, but Make it Your Own

Thu, 27 Mar 2008 01:57:00 GMT

I have a problem when people steal visual design. Visual design is somebody’s signature, and copying it is akin to forging their professional signature. As in art, there will be periods of web design where many designers will adopt similar styles, and that’s to be expected. However, to copy a design almost entirely is pathetic. Period. When it comes to interface elements and concept though, I have an entirely different opinion.

Copy the Concept, but not the Style

If I implement some interface element and it seems like a good idea for your site or application, I strongly encourage anyone and everyone to use it. Have at it. That’s not to say the ideas I write about are always correct, but I lay no claim whatsoever to the bits and pieces of what I create. That’s a huge part of the reason I invest so much time sharing my real-world experiences and ideas. I want them to be used to make the internet a better place.

For Example…

Let’s look at automobiles for a moment. I don’t think anyone would argue that a Kia is equivalent to a Lexus. They’re at opposite ends of the styling and quality spectrum. However, beyond the styling, they both have four round wheels with tires, a round steering wheel, the radio or navigation head unit in the middle to the right of the steering wheel, gauges behind the steering wheel just below the dash, sticks coming off of the columns that control windshield wipers and the sort, and gas and break pedals in the same locations relative to each other.

The list goes on, but clearly, the automobile industry would be a mess if companies been allowed to patent or lay exclusive claim any of those concepts. Those elements are shared simply because that’s the way that happens to make the most sense. And despite those incredibly important foundational interface elements being consistent, all of the automotive companies continue to strive for innovation and differentiate themselves from each other.

On Web Interfaces

Since sharing my posts on the issue tracking interface design, I’ve received a fair amount of emails of people bringing sites to my attention where people have implemented the ideas I’ve written about. Some are so similar to my work that it’s a bit disconcerting, but others are only using the concept to improve something that is clearly an original creation.

Either way, I’m generally just happy to see everyone doing some little part to make the internet easier and more enjoyable to use. I see interface elements as implicitly open source. It’s important that we, as an industry do move towards some common ground. While we’re marching closer everyday, I feel that one of the best ways to do that is for all of us to start sharing interface elements that make sense in multiple contexts.

That said, just because we all use buttons, web forms, and tabs, doesn’t mean there’s not room for innovation. There’s a fine line between stagnating on a reusable concept and trying to innovate. Just because something can be reused, doesn’t mean we shouldn’t try to improve upon it while we’re at it.

Summary

We’d all be better off if we stopped trying to reinvent the wheel. We’d also be a lot better off if we didn’t blindly recycle every interface element that had its own blog post. I’m definitely not advocating the wholesale recycling of pages from web sites or applications, but I strongly believe it makes sense for us, as interface creators, to be happy when we start to see appropriate reuse of our ideas.

Issue Tracker Chat

Thu, 13 Mar 2008 04:22:00 GMT

I think one of the best things about being the designer, developer, and business owner for an hosted web app is that it shortens the distance between me and the people who are interested in using it. A large portion of my ideas and inspiration have been influenced by conversations with like-minded people, so I thought it only appropriate that we have a periodic open forum to discuss things.

Important:The chat room will be available for 24 hours, but my expectation is that the heart of the conversation will happen around 12:00pm CST. It’s going to make it difficult for some people to participate, but I’ll do my best to be around during the full 24 hours. Looking forward to hearing from you!

Update: If you missed the chat, we’ve posted a list of questions and answers for the hot topics during the chat.

Time Machine Misery

Wed, 12 Mar 2008 02:52:00 GMT

Yesterday morning and early afternoon, I was chugging happily along. I did some work on the issue tracker in Textmate, jotted some notes in Yojimbo, and created some new wireframes in Omnigraffle. It was a normal day until around 2:30 in the afternoon when my machine, a 15” MacBook Pro, inexplicably froze up while I was using Omnigraffle.

I was a little disconcerted because in my almost 3 years of using a Mac, I never had one completely lock up on me. Ctrl+Alt+Esc always worked. This time, however, it wasn’t having anything to do with coming back to life. Eventually, I gave in and held down the power button.

The Weirdness Begins

Upon rebooting, everything seems normal until I go to begin working on my Omnigraffle file again. It’s not there. I assume I just saved it to a different location. Knowing that I had saved as an early version for use as a template, I went to look for that version. It was nowhere to be found either.

A quick look through both my system’s recent items list and the Omnigraffle recent items list, there’s no sign of any files I had recently worked with for any programs I used that day. At this point, my concern begins to escalate. I check the issue tracker codebase for some work that I had done between 7am and 9am in the morning, and all of the code had reverted as well. Thankfully, I had Subversion to fall back on, so none of that work was lost.

The Weirdness is Confirmed

Now, I’m sufficiently concerned that something really odd happened. I check Yojimbo for some notes that I had added earlier, and the’re gone as well. At this point, all I’ve really lost is a couple of hours in Omnigraffle. I remember that Time Machine is supposed to help with these sorts of things, and scurry off to swim through the surreal interface.

Curiously enough, Time Machine completely denies that any of those files every existed. At this point, I’m starting to remember scenes from Rendition. More than anything, I’m just freaked out at how something like this even happens. I’m not sure why, but I hadn’t yet started to blame Time Machine. On subconscious level, I’m sure I was implicating it, but I gave it the benefit of the doubt. Until this morning.

The Revenge of the Weirdness

After reluctantly accepting my fate the previous day, I continued working and decided I’d just work a couple of hours later to make up for the lost work. I made some great progress on the new wireframes, and it felt like everything was back to normal. Just to be safe, I sent a copy of the file to my gmail account as an extra security precaution. My Super Duper backups are scheduled to run every night, so I wasn’t too worried about losing any work, but I wanted to be extra safe.

I couldn’t have been more wrong. This morning, after about 10 minutes of checking e-mail, my machine freezes again. Now, I’m really worried. I can’t live like this. So, with great trepidation, I force reboot my machine for the second time in two days. I felt so incredibly defeated.

You have to be kidding me.

After rebooting, I immediately go look for my wireframes, and sure enough, my new wireframes had been replaced by earlier, much older, version from before the original crash. I check Yojimbo and my issue tracker code. Sure enough, the entire file system reverted again to the state right before the original crash.

Now, the fact that it reverted doesn’t shock me at this point. However, the fact that it reverted to a state that did not appear to exist in Time Machine the day before really concerned me. Less than 12 hours ago, Time Machine told me these files didn’t exist anymore. Where did they come from? So, I go off to check Time Machine, and sure enough, it’s entirely unaware of any activity between the two crashes.

So, now that I’ve lost all of my wireframe work from the previous evening, I scurry off to Gmail to find the backup. Thankfully it’s there, but now I know something really unusual is happening. Once I calm down, I start thinking about it and assume that Time Machine is the only possible culprit that could be causing behavior like this. I turn it off, unplug the hard drive, and schedule some time later today with a Mac Genius.

The Retrospective

I still have no idea how this all happened. I’ve come out relatively unscathed, but definitely concerned. The only unusual activity I could think of was that Time Machine was being unusually persistent yesterday in trying to back things up. I told it about 3 times over the course of the morning to stop because the hard drive is irritatingly loud when it’s really working.

I’m not sure if the repeated stopping threw it off, but it’s the only thing I can remember that was unusual. I’ve had Time Machine hooked up now almost since Leopard came out, and it’s never given me any trouble, or reason to believe that it’s giving me trouble, until this. I’m still not quite sure that it is Time Machine, but I can’t identify any other possible culprit.

I generally don’t blog about technical problems, preferring to just vent via Twitter instead, but this one was sufficiently concerning that I thought it was worth sharing. As of right now, I’m giving up on Time Machine. I hate to cut out one of my layers of backup, but right now it seems to be causing more problems than it’s fixing. Has anybody else experienced or heard of anything like this? I’ll make sure to update the post if I learn anything at the Genius Bar later today.

Update: After visiting with a Mac Genius, and discovering in the log that explicitly shows that Time Machine deleted a backup at 2:22pm yesterday, right around the time of the crash. His theory is that the Time Machine backups became corrupted somehow, and this was Time Machine’s way of trying to recover. However, I’m not comfortable it’s that simple because it doesn’t explain why my internal hard drive was reverted as well. So, I don’t have any real closure yet, but I’m planning on making some adjustments to get things back on track.

Connecting Information

Mon, 10 Mar 2008 08:09:00 GMT

I’ve been using Basecamp more and more for the new company, and milestones are the one area that I’ve always struggled with in terms of efficiently entering and interpreting information. There have been some improvements, but I’ve never been comfortable with how the information is displayed. Today, I realized one of the reasons as I was making note of some milestones. The calendars on the right force you to look at the list on the left and lookup a milestone. There’s no visual cue, or even a name on hover to help you make the connection between the milestone and the date.

While there are plenty of solutions, I thought the most elegant one would be to simply reuse the information that’s already there. All I really wanted was a more visible connection between the date and the tasks associated with it. My suggestion is to highlight the associated milestones when you hover over the date in the calendar on the right.

There are some drawbacks here. First, you won’t always be guaranteed that the milestone and associated calendar date will fit within the browser window. However, in this case, you don’t lose anything. You simply just don’t gain the benefit. I also felt that this is scenario would be rare enough that it’s not worth worrying about.

Figure 1 Information doesn’t have to displayed in close proximity in order to communicate a relationship.

Next, it is possible to have multiple milestones on the same date. However, they would always be listed together since they’re sorted by date, so the simple solution there is to highlight them all. In fact, the mockup includes multiple milestones for the same date. It would still create a straightforward and understandable visual relationship be the date an all associated milestones.

Figure 2 A highlighted version helps make it easier to see the changes.

This isn’t meant to be the only example, but since I was going to write a support e-mail requesting it, I thought was worth mocking up. I also think a quick and dirty solution might be to add title tags or a div that appears on hover. Both of those solutions would require changes to the markup, and the solution I chose could most likely be accomplished with some progressive enhancement JavaScript. Plus, I really liked the idea of recycling content that already existed on the page.

The Next Update

Wed, 13 Feb 2008 10:12:00 GMT

We’re launching our new company and site today. Everyone, meet Next Update. Next Update, meet everyone. We’re still working on a name and domain for the issue tracker, but getting the company site up was an important step that couldn’t wait for that to get worked out. Besides, I wanted to have a more appropriate place for sharing information about the issue tracker and our progress.

I’ll still be blogging here, but from now on, all of the updates for the issue tracker will end up at NextUpdate.com. We’ve also setup a Twitter account, and even the requisite email signup form.

The Name

I’ve had the domain for Next Update for quite some time, and the original plans for it had nothing to do with building a company. However, I always knew that I really liked the name and the URL. With software, there are several layers of meaning within the name that I think really work for what we’re doing. I’m not going to go into them all, but suffice it to say I’m really happy with it.

The Site

It’s still really rough around the edges, and it should definitely be considered a work in progress. The goal was to get something workable up and running as fast as possible so we can stay focused on building the actual application. Plus, we’re big proponents of getting the basics down and then worrying about fine-tuning over time. So despite a plethora of additional ideas, we only have a blog and comments for now. Oh yeah, and an email signup form.

That’s all for now, but we’ll be sharing plenty more in the coming months.

Vision and Purpose

Sun, 03 Feb 2008 08:10:00 GMT

The vision and purpose for an application, or even an organization for that matter, are the standing marching orders. When someone makes a decision, they need a framework within which to make that decision. If the framework doesn’t exist or lacks clarity, it’s nearly impossible to make consistently good decisions. More importantly, for a large team, it is entirely impossible to have everybody rowing in the same direction without that vision.

Figure 1 The primary means of navigation within projects organizes the issues by responsibility and status. This not only organizes the issues along those lines, but serves to constantly reinforce the value placed on responsibility.

For that reason, it’s imperative that the vision and purpose exist. Since I’m developing the issue tracker virtually on my own, I might not have to coordinate a team of developers, but I do need that same framework. I’ve had a loose vision for our bug and issue tracker for years, but that’s not good enough. Loose visions lead to loose execution. So, after a bit of exploration, I decided that status, responsibility, and accountability are the most important aspects of the application.

Then of course, the corollary to that rule was that everything had to be as simple as possible. How did I define simple? I knew that any piece of functionality that did not directly support status, responsibility, or accountability wasn’t going to make it into the first version. More importantly, it meant that the design had to place an emphasis on those elements.

Emphasizing Status and Responsibility

Figure 2 Making status and responsibility highly visible is the key.

One of the first decisions that evolved was to base the navigational elements on responsibility and status. (Figure 1) The most important responsibilities are included. They are, “My Issues”, “Everyone’s Issues”, and “Nobody’s Issues”. In the system, unassigned issues are like red flags. Therefore, they even receive their own navigational tab so they can’t be overlooked. Also, all closed issues are excluded from the primary tabs and included in their own tab to that the main tabs are focused on active issues and making progress.

Additionally, when you’re viewing one of the tabs for active issues, the issues are listed such that status and responsibility are readily visible. (Figure 2)You should be able to quickly scan or scroll through a list of issues and gain a very thorough understanding of what you’re up against.

Figure 3 The header provides an very easy way to locate the key information and also serves as a gentle reminder of the current status. Figure 4 Each comment has a visual indicator of the new status if the status was changed with the comment.

In order to establish a visual language the elements of the design indicating status are carried over when you’re viewing an issue. The colors are used in the header at the top of the page for an ambient indication of status, and each comment also has a block quickly illustrating whether the status changed when that comment was made. (Figures 3 & 4)

Similarly, the comments are designed to facility quick scanning. This enables a rapid understanding of the life-cycle that a particular issue has undergone. Or, if you’re working on an issue, it enables you to quickly look back in time through the comments to find the original reason the issue was reopened. With the easily visible status indicators attached to comments, this all becomes much more natural and intuitive.

Summary

By having a clear vision and purpose, it enables everyone to make more focused and appropriate decisions. Whenever you face that tough “what should we do here” situation, the vision provides an obvious route out of the woods. Without that vision, there’s no telling what kind of decisions are being made. A particular quote comes to mind here.

Those who stand for nothing fall for anything.- Alexander Hamilton

It’s worth thinking about. What does your application stand for?