GarrettDimon.com

A Milestone of Sorts

Tue, 01 Jun 2010 03:24:00 GMT

Personally speaking, it’s been an incredible ride as I somehow managed to consolidate the 5 or 6 most significant and hectic events of my life into the last two years. That gave a very new meaning to finding a work-life balance. When I set out to build Sifter, I promised myself that I wouldn’t let work take over my life. I learned a long time ago just how unsustainable that is. However, that’s been the most difficult promise I’ve ever tried to fulfill as there was a constant struggle between personal time, bill-paying work, and Sifter. As a result, in the hierarchy of needs, Sifter was always last. It was the future, but it wasn’t putting food on the table in the present.

Putting food on the table, that was tied to client work. As a result, the amount of attention Sifter received was inherently limited. I worked on Sifter for an hour or so everyday for the last year, but the limited amount of time was generally consumed by operations and support rather than customer-facing enhancements. The tide is finally turning. I’ll still do a little client work here and there, but Sifter will dictate my availability for client work rather than the other way around.

Oddly enough, while this is a dream come true for me, I’m most excited for all of our incredibly patient customers. We’ve been all too quiet. That’s been a conscious, but difficult decision as we became more realistic about what we could achieve without a full-time developer. We’ve been very open with the state of Sifter anytime someone has asked, but we haven’t been as proactive about sharing simply because we didn’t have anything exciting to share until now.

We have always had an endless supply of ideas and enthusiasm, but finally, for the first time, we also have enough development hours to do something with it. Unfortunately, some of the initial time is being consumed by operations and the transition to full-time, so the impact of the additional time probably won’t be immediately visible. Rest assure, though, we haven’t had this much development activity since we launched.

There will be much more to share in the coming weeks, but for now, it’s time to get back to work.

The Downside of Permanent

Mon, 13 Apr 2009 04:24:00 GMT

While I believe that it’s a noble cause to ensure that content is available at the same URL for eternity, I think it’s perfectly healthy for the web to experience link rot. It’s in the very nature of things. In a forest, trees grow, but eventually, they die, fall down, and make room for new plants and trees to grow up in their place.

Much of the information we’re creating today is temporal. With technology or science, information that’s more than a year old is often outdated at best, and entirely inaccurate at worst. Maintaining that content and permalink is valuable, but if the content owner isn’t constantly updating to reflect the inaccuracies or point the reader to more current information, then it’s not the end of the world if that content disappears. Better content will replace it.

The discussion around URL shortening services is an important one. There’s nothing wrong with maintaining links and availability of relevant and accurate content. However, actively propping up outdated and inaccurate content isn’t always a good use of time or effort.

URL shortening services are what they are. They make it easier to share complex URLs. Any expectation beyond short-term convenience is setting yourself up for disappointment. If permanence is truly more important than convenience or length, we should be linking directly to the definitive resource identifier rather than a shortcut.

I’m not saying it’s always good or always bad, but we should take care to remember that just because the information exists doesn’t mean that its time hasn’t passed.

Handling Things

Tue, 31 Mar 2009 11:57:00 GMT

It’s not often that I care enough about a topic like this to take the time and share my thoughts, but for some reason, it really struck a nerve with me. Next Update has paying accounts with both companies, so I’d like to think I can be objective about this.

Building Frustration

All of the points Jason made are valid. There’s no arguing about that even if some of them weren’t entirely accurate. Hell, even the team at Get Satisfaction didn’t argue with his points. However, the tone of the message created a conversation that devolved into primarily a knee-jerk “you should sue them” reaction.

My guess is that Jason was perturbed after months of 37signals customers being frustrated and confused by the lack of responsiveness when they posted on what they potentially perceived to be a valid support forum. If so, that’s fair. I think any of us would be mad if another business was maliciously misrepresenting themselves and, as a result, causing customers to be upset with us rather than the business doing the misrepresentation.

However, the rant was clearly based on an assumption that Get Satisfaction was indeed being malicious. In the post, he explains that he is under the impression that Get Satisfaction has malicious intent.

The heavy handed tactics used by Get Satisfaction seem to indicate that their long term plan is to own every company’s customer support experience – whether it has your permission or not.

While I’m not best friends with the team at Get Satisfaction by any means, I have had several very positive interactions with them, and unless they’re good actors, Jason’s assumption couldn’t be further from the truth. The team is out to provide a forum for customers to voice their thoughts, good or bad, when a company has ignored them or failed to help them. That’s a valid and worthwhile cause. They’re certainly not out to deceive everyone into thinking they are the only legitimate source of support for companies.

Throwing the first stone…

We’ve all made mistakes. We will all continue to make mistakes. Nobody is perfect, and certainly no company is perfect, but there’s a saying that comes to mind and couldn’t be more appropriate.

Never attribute to malice that which can be explained by ignorance.

That’s not to say the team at Get Satisfaction is ignorant, but when you’re building a large web app, some things are going to be overlooked. This is especially true if you’re launching something while attending the largest web conference in the world. For Jason to attack Get Satisfaction so voraciously and stir up a hornet’s nest of vicious commenters was taking things a bit too far, in my opinion.

The Outcome

Thor and Eric from Get Satisfaction responded quickly and graciously. Not only did they immediately address and correct Jason’s concerns, but they were incredibly and sincerely apologetic. Thor’s first comment communicates his concern…

Gosh, we messed up on the wording of that badge and are changing it pronto. The wording on that badge was actually intended to explicitly state that the space was NOT OFFICIALLY SANCTIONED by the company, but that doesn’t come off at all.

And Eric follows up shortly thereafter with his thoughts…

We definitely appreciate feedback like this, and I’ll make sure everyone on our team gets the message. If there’s ever anything I can do to help, please call on me. I’ll do my best - in the spirit of great customer service - to hopefully help you get some level of happiness

Shortly afterwards, GS held a live chat during which multiple people in the company were trying to take the blame for the problem. Let me repeat that. Multiple people within the company were trying to take the blame. Not only was the company apologetic, but the employees were individually and genuinely concerned about the mistake.

That says a lot about a company, and that’s the measuring stick that should be used to judge the GS team. They care, and they care passionately. While Jason couldn’t have known that without talking to them, it certainly wouldn’t have been too much to ask to give them the benefit of the doubt.

Ultimately, the outcome would have been the same regardless of how the complaint was delivered. The team would have made the updates and they would have made them quickly and graciously. By choosing the method he did, Jason unintentionally shifted the focus from constructive criticism into a vicious attack, and it became difficult to see the forest through the trees.

From the few people I’ve talked to, the consensus is that 37signals came out looking like the bad guys in this, and Get Satisfaction looks like a caring, responsive, and responsible company. Regardless of whether that’s the case for everyone, it’s clear that Jason’s tone, not his complaints, caused the negative perception.

The Community Facet

This is an incredibly small community, whether we realize it or not. We might have access to millions of people around the world, but day-to-day, we’re collaborating and learning from each other, and I have yet to meet someone from the community that was a clearly evil person. I’ve always found the web industry to be one of the most friendly collaborative industries around. I’ve seen direct competitors openly share ideas and best practices. I’ve watched direct competitors buy each other beers and talk like best friends. Today really caught me off guard, and I think that’s why it bothered me as much as it did.

I find it unfortunate that so many people were so quick to attack a company based on one blog post without trying to objectively look at both sides. After reading all of the comments multiple times, Jeff Croft really nailed it for me.

37signals is a small business. GetSatisfaction is a small business. They exist in the same community. They have many of the same customers. They use many of the same tools. They’re (presumably) both being affected by a shit economy right now. They’re not competitors. You’d like to think these kinds of companies would be supportive of one another, especially in times like this.

The problem isn’t in Jason’s concerns. Those are valid. The problem is that we all have more important and more productive ways to help each other improve. It’s clear when a company cares and is willing to improve. Going off on a company like Jason did should be reserved for when reaching out fails. Get Satisfaction cares deeply about constantly trying to improve. They didn’t need to be attacked to be motivated to improve.

They’ve both made mistakes along the way, but I think the important lesson is that these things go better for everyone involved when we give people the benefit of the doubt and make an effort to reach out to people instead of just attacking them.

Summary

I still can’t quite figure out why today’s events affected me as much as they did, but I sincerely hope that everything works out for the best for everyone. 37signals is a great company that’s done some incredible things for the web community, and they certainly deserve all of the respect they get. I can’t say I blame Jason for any of his frusration, and I can’t say that I wouldn’t have behaved in the same way had I been in that position. It certainly would have been tempting.

Get Satisfaction is not an evil company out to confuse and hurt people’s perception of other companies only to blackmail the companies into giving them money. They made some mistakes, but who among us hasn’t? More importantly, they addressed their mistakes openly, honestly, and quickly. How many other companies would have responded like that?

Answering to Customers

Wed, 18 Mar 2009 07:29:00 GMT

Early on, I made the decision to answer every request or suggested with a personal response and a detailed justification of our decisions. That is, if someone asked for a feature, I wouldn’t just say yes, no, or we’ll think about it, but rather, I’d offer some insight into whether it had crossed our minds yet, how we’ve thought about approaching it, or why we decided against it.

I told myself that if I can’t justify our decisions or philosophy in writing such that a customer can understand or respect our thinking if not agree with it, then we owe it to that person to reconsider our position. On the surface, this seems simple enough, but it takes time to respond to people. Writing is difficult. Defending or communicating your thoughts in writing can be even more challenging, and that’s a good thing.

It’s easy to tell someone “No”, “Just because”, “We’ll think about it”, or “It’s complicated”, but that doesn’t do much for either party. Taking the time to explain yourself is as much an investment in your own understanding as it is in their understanding. More importantly, it turns the whole encounter into an open-minded two-way conversation. That’s much more valuable because now you’ve got an extra mind that might just be determined to help out. Then everybody wins.

Of course, not all companies could do this because it would mean that the support team would have to have a pretty intimate understanding of the vision and implementation details for a product, but it has worked wonders for me. It might not be sustainable as we grow because it does require so much time to write detailed responses, but I don’t plan on letting go of this practice without a fight.

Independent Software Development

Wed, 11 Mar 2009 04:18:00 GMT

In January of ‘08, I woke up to the first day on the job. I was free of the daily grind. I could work anywhere and anytime I wanted. I could attend any web conference without seeking approval. I could write and share to my heart’s content. But most importantly, I could spend every single day working on things that I loved.

As it turns out, only the last one is 100% true. In retrospect, I wouldn’t trade it for the world, but making ends meet and building a software empire, err, uhh, village, can be quite the juggling act.

The Daily Grind

I didn’t have to commute or work set hours, but being highly self-motivated and loving what I was doing led to a self-imposed grind where I felt guilty about every moment that wasn’t paying the bills or finishing Sifter. By blogging so openly about our plans, I had unintentionally created some expectations that loomed over me. Combine that with loving what you’re doing, and it was, and still is, hard to put the mouse down so to speak.

The really daily grind for me was making time for friends and family. Working was easy. It was fun. And, unfortunately, it can be pretty addictive as well. I’d like to think I kept a reasonable balance, but I probably averaged 60 hour weeks. That may not seem like a lot, but one of my goals in becoming self-employed was to find more time away from the desk. It hasn’t exactly worked out that way, but it’s getting closer.

Working Anywhere and Anytime

In theory, this is attractive, and it was until Sifter launched. Now, with customers all over the world representing different time zones, the reality is that I’ve always got an eye on Sifter and support. Instead of working a boxed in 8 hour day, I’m regularly working a bunch of separate 2-4 hour shifts. I don’t mind so much, but Lauren, my fiancée, is, quite simply, over it. I can’t say I blame her, and one of my highest priorities is to bring in some backup for support.

Working anywhere is another thing that sounds great. I’ve romanticized about working on coffee shops or coworking spots for as long I’ve seen others doing it, but it turns out that I’m not too effective in that environment. At home, I have a meticulously crafted setup that includes a desk and chair high enough and large enough for someone that’s 6’6” and 225 lbs. I also have a printer/scanner, large monitor and various other amenities. Most importantly, it’s quiet, and there aren’t any distractions. (Yet.)

It turns out that I’m most productive from home, but there is a huge drawback in that I don’t have anyone to spin around in my chair and bounce ideas off of. That’s really tough at times. I blast friends with mockups over IM or call them up to make them listen to my new ideas, but it’s not the same. Frankly, it gets a bit lonely at times.

Web Conferences

I don’t need approval or justification to attend web conferences, but I’m too heads down to jet set from conference to conference like some people. Switching from a full-time job to part-time consulting constrains the cash-flow considerably. So, while I have been able to attend a handful of conferences, it hasn’t been the free-for-all that I had hoped. The most significant challenge is that it’s hard for me to justify work time that isn’t paying the bills or improving Sifter.

Writing, Blogging, and Sharing

This was probably one of the most exciting facets of being self-employed and building my own web applications. I’d finally have more than enough material to update the blog regularly and share ideas free of NDA coverage. Unfortunately, it turns out that the amount of time one has for blogging is inversely proportional to the amount of fun cool things that you’re working on and able to discuss publicly.

I’ve learned more in the last year than I have in probably the last 3 years, and none of that new knowledge is under NDA. (Well, some of the client work is, but it’s a very small amount.) I have a backlog of ideas that I want to share and talk about so that you don’t trip over the same silly mistakes that I made. Lessons about the business, interface design, development, customer support, and more are all there with rough drafts that I just haven’t made time to finish.

I’m dying to sit down and type it all up, but improving Sifter wins out every time. For every new paying customer that spends their hard-earned money on our application, I feel even more obligation to make sure that Sifter makes them happy. So blogging loses out, for now.

Loving What You Do

Despite all of the challenges, there’s something to be said for waking up every morning and pouring your heart into work that you love. I consider myself incredibly lucky to have that opportunity, and I consider myself even luckier that it seems to be working out financially as well. I’ve always believed that work and passion should go hand in hand. That is, we should all want to work to find a way to pursue our passions rather than just trudging through another 8 hour day just so we can pay the bills.

It’s not easy, but nothing worth doing ever is. So, if there’s anything I’ve learned this last 14 months, it’s that it’s definitely worth it. Whether it’s web development, music, writing, tight-rope walking, or creating and marketing your own BBQ sauce, being able to spend your work hours doing something that you enjoy makes all of the difference in the world.

Smart Return in Sifter

Mon, 08 Dec 2008 14:27:00 GMT

Just in case you missed it, Sifter launched last week. With all of the new material, I wanted to get back to sharing some of the behind the scenes details about designing Sifter.

Today, I wanted to focus on a feature that exists almost entirely behind the scenes. It’s more about interaction design than tangible aspects like visual or interface design, but it’s just as relevant to creating a good user experience. Just because a feature isn’t visible, doesn’t mean that it’s not valuable.

The Feature

I have been calling the feature “Smart Return”. The idea is simple. Whenever you’re viewing a list of issues, it’s possible, and likely, that you’ve sorted it a certain way or filtered the page so that you only see the issues that you care about right now.

The problem is that when you leave the page to create an issue or update an issue, we need to make sure return you to the page you originally came from as well as remember the state of the page so you don’t have to reapply your sort and filters.

A Real World Example

For instance, let’s say that I have a dozen issues that are assigned to me. Of those, I decide to focus exclusively on the critical and high priority issues. Since the list is short, I go ahead and sort them by when they were created. That way, I can make sure to address the oldest issues first. So, at this point, my page is filtered and sorted on several different parameters. (Figure 1)

Figure 1 One of the key ways to interact with issue lists is to filter and sort them into a list off issues that you can work through.

Now, when I click on an issue, I’m taken to the issue details page. After I take some action on this issue, it would be annoying to have to sort and filter my issue list every time. So, regardless of what I do next, I’d ultimately like to return to my issue listing sorted and filtered the way that I left it. (Figure 2)

On the surface, this seems like an almost trivial problem. Capture the referrer, and send you back there after you’re done. Unfortunately, it wasn’t that simple.

The Curveballs

No Sessions

The initial idea for all of this was to simply capture the value in the session and hold on to it until we were ready to use it. Unfortunately, we’d need to clear that session variable whenever we finally did use the value. Otherwise, the return value could very easily be incorrect if you follow a different course of action and we didn’t reset it. This seemingly small limitation led to a much more advanced, but ultimately elegant solution.

Figure 2 From every issue detail page, you can easily return to the issue listing page and rest assured that it’s still sorted and filtered the way you left it.

Entry and Exit Points

From the issue detail page, there are actually multiple different actions you could pursue, and each complicates matters in its own unique way. Without going into the boring detail, there are 7 relevant courses of action that we need to consider. (Figure 3)

Create a New Issue - It gets really hairy here because you can ultimately end up creating and adding another issue countless times, and we need to constantly keep track of your issue listing and sorting conditions.
Return to Issue Listing - While this is conceptually simple, it presents a challenge in that it’s possible to arrive on the issue listing from the Dashboard. As a result “Return to Issue Listing” isn’t always accurate, and we need to dynamically check and see if the text should be “Return to Dashboard”.
Edit the Issue - Editing the issue takes you to a different page, so we end up losing the value of our referrer. As a result, we have to make sure that we pass the referrer along to the edit page so that it knows where to send you after you’re finished editing.
Delete the Issue - This is fairly straightforward. We need to delete the issue and send you back to your list.
Delete a Comment - Thankfully, this is handled in almost exactly the same way as deleting the issue.
Follow a link to a different issue - Of course, issues can link to each other, so it’s entirely possible that you might go off and look at another issue. If you do, we still need to be able to bring you back to your list.
Update the Issue/Add a Comment - This is similar to deleting the issue, however, because we’re using a web form, we have to remember the URI with a hidden form field instead of passing it in the address bar.

Figure 3 There are several exit points on the issue detail page where we need to make sure that we maintain the original referring page so that we can return there.

Minimizing the Use of the Querystring

A small, but very subtle point is that we need to do all of this while relying on the query string as little as possible. Many people copy the issue link and paste it into their commit messages for source control. (Figure 4) If a query string value is used to remember the original starting point, then the link becomes cumbersome to use in a commit message.

Figure 4 Generally, the issue detail URLs are concise, but if we attached a query string value on there all of the time, they would become unwieldy.

We weren’t able to do all of this without leaning on the query string a little, but we definitely made a conscious effort to rely on it as little as possible. This definitely presented some small issues that weren’t trivial to work around.

In some cases, this may seem trivial, but it’s a crucial part of the interface design. Being able to access and share issues by copying and pasting links is going to happen. In fact, it’s going to happen a lot. So that means that clean URLs, while not always possible, are a high prioiity.

Figure 5 All of the filtering and sorting is maintained via the URL. This enables you to easily share the URL with others and rest assured they will see the same thing. It also enables us to return to this page and reapply the same filters and sort.

Similarly, all of the issue listing pages are handled within the query string (Figure 5) so that they can easily be shared with other team members or bookmarked in your browser.

Missing Referrers

Finally, while we initially grab the referrer from the environment, there’s no guarantee that we’ll have a referrer. If you visit a link directly, we have to fall back on a default. So, we had to be able to specify default locations to send you if you arrived from an external link.

Figure 6 I’ve found that it’s almost always easier to solve a complex problem by starting off with a sketch of the solution.

Designing the Solution

Now that we have a firm grasp of the problem, we can dive into the steps we took to design a solution. This solution is actually the second version of “Smart Return”. The first version evolved over time as we began to recognize the edge cases, and as a result, it had plenty of room for improvement. With this version, we were able to design the solution from the ground up after we had an intimate understanding of the problem, and that was key to creating a cleaner and more maintainable solution for the future.

Figure 7 I created more detailed versions of the sketches in Omnigraffle where different color lines represent different relationships between the pages.

Recognizing a Pattern

This time around, I wanted to build a reusable framework that would be easy to understand and reuse throughout Sifter. So, I went through the page flows so that I could build an understanding of the entire scenario.

I started off with some quick sketches (Figure 6) of the page flows. Then, I migrated the sketches into Omnigraffle (Figure 7) for a more detailed view of the concepts and challenges.

Designing a Framework

At this point, I began to understand and see how the different pages interacted with each other. I made sure to cover all of the different scenarios and set out to describe how each page would share the return URL with the other pages. (Figure 8)

Figure 8 By mapping the page relationships to a key, I was able to create a simple and memorable way for the pages to communicate the return URL between themselves.

This laid out the vision of how these pages would work together, and I had a language to describe the relationships. At this point, it became almost trivial to implement the code necessary for making it happen. More importantly, it became incredibly easy to apply this logic at other points within Sifter.

Summary

One of the most significant pieces of creating a web application is understanding the interaction design. This almost invisible, yet critical piece of the design process is easily overlooked. If done correctly, it’s invisible and taken for granted. However, if handled poorly, it’s the difference between a clunky vs. a seamless experience.

Long story short, some of the most valuable elements of design are the ones that you don’t see. Just because there isn’t a visible manifestation of a decision doesn’t mean that it’s any less important.

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.