Robby on Rails: Tag interaction

Tip: Save your users 15+ seconds of their day

Robby Russell — Thu, 31 Jan 2008 12:42:00 -0600

Since understanding the context is so important when designing interfaces, I wanted to point out one of those things that caused me to shake my head at.

When logging into our Basecamp account this afternoon (via openid)... I was presented the following helpful notice.

Uploaded with plasq’s Skitch!

What’s amusing in this scenario… is that I’m sure that Basecamp knows that I’m logged in via openid and it is, in fact, displaying the OpenBar across the top of the page. Yet, it’s making this helpful recommendation that I’m obviously already aware of.

What harm is there? Well, in this scenario, I caught it and thought, “wow, this isn’t helpful or informative.” Over time, it’s these short-lived experiences that affect our overall perceptions of the product.

When we’re designing and developing applications, we must be very consistent with how we communicate with our audience. We don’t need to provide them information that isn’t relevant to them.

I’m not picking on Basecamp here, I’m sure that they have great intentions with this, but as a developer, I know that it doesn’t take a whole lot of extra work to avoid small problems like this, which could lead your people to feel like you’re not being respectful of their time.

Saving customers 15-30 seconds is something that we can quantify.

100 customers = 25-50 minutes
1,000 customers = ~4-8 hours
10,000 customers = 40-80 hours
etc…

Just a little reminder that it’s easy for us to overlook things like that can make a difference.

Review: FogBugz, part 1

Robby Russell — Tue, 01 Jan 2008 15:43:00 -0600

Today, I thought that I’d give FogBugz a quick trial. A few of our Rails consulting clients use it and I’m hearing that others are as well.

Along the way, I’m bringing one of my favorite tools so that I can share some things thoughts (visually) along the way.

Signing up for a free trial

My first impression of FogBugz was, “nice homepage design… but what is that screenshot of?”

Uploaded with Skitch!

I’m not a designer, but the interface in the screenshot isn’t jumping out to me as something that you’d expect to see in a modern web application. While I appreciate the default browser colors for links (this is really important)... I think they could have found a better way to distinguish which bug links you’ve previously viewed. It’s very likely that you’ll most bugs many times, so having the color be different might not make sense in the same way it would when reading content on a web site. Again, I’m not a designer and I’d be curious to hear from a designer on this. Just something that I initially thought.

Uploaded with Skitch!

Okay, this sign up form seems really easy to start with. I’m used to free trials being really simple to get going. So, I enter in my sub-domain selection and provide my email address on the following page so that they can confirm that I’m legit.

(several minutes later…)

Okay, this process required me to jump from my browser to my email to my browser back to my email and then back again to my browser. It’s really frustrating for an application to force me to go back and forth between my browser and email client. I think the initial email is something I can cope with, but I found it a bit silly to have to wait for another email to receive a link to login to my new account, especially considering I already knew the URL as that was the first thing that I provided. The application could have provided the link (or redirected me) to the following form, which I had a few things to comment on.

Uploaded with Skitch!

At first glance, this might not seem like much… but I’m becoming more and more disappointed by the choice of language that we’re using in applications. First of all, this is the first time that I’ve seen this page. I’m not changing my password… what you’re really asking me to do is, “Create (or set) a password.” There are other verbs that you could use here, but change really isn’t appropriate. Also, choose doesn’t work here either.


  chose; choos·ing.
  –verb (used with object)
  1.    to select from a number of possibilities; pick by preference:

What am I choosing from? Again, you’re asking me to create a new password.. not change one and definitely not choose one, unless you’re implying that I should choose one from a collection of ones that I already use.

One might argue that we can make an assumption about what they mean, but it’s simple problems like this that can seriously confuse people that use the software we design and develop. As people interact with minor problems like this, their perception of the software as being helpful and friendly… can quickly deteriorate.

Okay, so that was my first several minutes of getting into my new FogBugz account.

Coming soon… Robby will share his thoughts on managing bugs with FogBugz.

That Checkbox Needs a Label

Robby Russell — Sun, 02 Dec 2007 00:43:00 -0600

As a user of many web applications, I often find myself noticing little things that slow me down. One such thing is the use of checkboxes in web forms. It’s not the problem of checkboxes itself, it’s the face that checkboxes require the user to really focus their attention to a fairly small box on the page and perform a click inside. If you’re filling out a form really quickly, it’s almost guaranteed that you’ll take advantage of you your tab key to get through each field quickly. Sometimes there are select boxes, which require the user to make selections with their mouse. Checkboxes drive me crazy because it requires more time to position the cursor and move on.

So, when I see a form like this, I don’t see it being very quick to interact with.

While I’m not in love with the date selection interface here, my bigger pain has been the checkbox in the form. Why? Because they forgot to use the <label for=""> HTML tag.

What’s the problem? Well, I don’t have the convenience of clicking on the label text, which would toggle the corresponding checkbox.

I know, many of you know all about this… but I run into this problem everywhere. This is an accessibility issue for people and really just increases the chances for a frustrating user experience. When you use the label tag properly… it will provide a larger amount of the screen for people to click, which reduces the chance of not clicking in the right spot. The label tag was designed with this in mind so that people could click close enough to trigger the desired action.

Here is an example of where it becomes really useful.

So, the lesson? Please remember to use the label for tag. :-)


<input type="checkbox" id="remember_me" name="remember_me" value="true" />
<label for="remember_me">Remember info?</label>

This is an easy thing to forget when building web applications. We’ve forgot and I’m sure you have too. I just wanted to point it out though because I see this happen so much… even in new sites.

Perhaps you run into similar problems with web applications that can be fixed with just a little more HTML. Care to share your experiences?

For more information, read Labeling form elements from the Dive Into Accessibility site.

Saying Goodbye Was Never This Hard

Robby Russell — Sun, 02 Dec 2007 00:07:00 -0600

There was a post the other day on Signal vs Noise about the pain of opting out of mailing lists titled, Redonkulous unsubscribe delays, which I was reminded of after the following experience.

Earlier today, I got an email notification from my old Friendster account, which ended up being spam. I hadn’t logged into the account in ages and looked around at my profile and others. No meaningful interaction between my friends in a few years. It’s felt like a ghost town. So, I thought… “should I just delete my account?” I was thinking about doing the same thing with my Facebook account as well, because I’m getting tired of being invited to applications a few times a day due to a friend leaving my name checked when they sign up for a game. (this is getting old…)

So, I decided to kill the Friendster account, which I’ve had since February 2003. Oh… the good ole days of social-networking sites.

Upon filling out a form I got the following error with the notification, “Please list the other social networking site you switched to.”

Uploaded with Skitch!

The tone of this error message is very rude and helped support my decision to leave the site.

While I appreciate that they’re looking for feedback, they shouldn’t demand it out of me. As a result, my response was…

Uploaded with Skitch!

Wait a minute. You’re demanding that I list the sites that I’m switching to… in 20 characters or less? Thanks for giving me the opportunity to LOLBUG you. Sigh. Who makes these interaction decisions there?

If they really wanted to get some useful feedback, perhaps they could have asked me nicer.

So, I decided to head over to Facebook and compare their process.

At first glance, this looks very much like the form that I was presented with on Friendster. Except that I can only select one reason why I am leaving and I can think of a few. However, when I made a selection… something surprised me.

Okay, so maybe I’ll leave my Facebook account around for the time being. Perhaps there is a Facebook application out there that will be get my attention.. but to date, this has yet to happen.

This post is dedicated to the memory of Robby Russell’s Friendster Profile. Feb. 2003 – Dec. 2007. R.I.P.

AT&T Online Support could use some QA

Robby Russell — Wed, 06 Jun 2007 01:15:00 -0500

So, I was trying to send AT&T wireless a support email through their online system and got stuck at the following screen.

Come on guys… you can design a better form than this… and I’m now going to have to try and sneak in a question under a sub-topic that doesn’t apply to my question… just so I can send you an email?

Getting help shouldn’t be so hard¹.

¹ At least I can Print this page and show all my friends…

Hug Your Designer Day

Robby Russell — Tue, 22 May 2007 17:18:00 -0500

Amy Hoy, of slash7 fame, gave a talk titled, Rubber, Meet Road: Getting Designers Running with Rails, which provided a good overview of some of the problems that designers and developers face when working together. This was one of my favorite talks, because she essentially explained several of the problems that our team has faced in the past and in many ways, still encounter from time to time. A few things that I was surprised to hear, was that several companies leave their developers to implement HTML/CSS in the Rails applications, rather than let their designers into the area. Some teams, provide a directory in public/ for their designers to write their HTML/CSS. Amy said that she preferred to work in the standard view directories (as a designer), which is exactly how our team works.

In fact, I agreed with Amy on several points.

Developers say, “We can’t do that” too often, when really… we mean, “We won’t/don’t want to) do that”
Template languages create extra barriers to training designers. Stick with RHTML… designers won’t be afraid of ERb syntax if you sit down with them and explain some of it. Move the ugly stuff to helpers… like you should be anyways!
Teach your designers how to use subversion… let them break it first and then help them… they’ll love you for it
When meeting clients with a designer and a developer… don’t let the developer speak too much about implementation when it hasn’t been designed yet. Interaction Design should dictate architecture not vice-versa.

“Stop, Collaborate, and Listen”—Vanilla Ice

I’d like to personally thank Amy for being a diplomatic designer and telling the hundreds of developers that showed up for her talk to remember that designers and developers… think differently… and that’s a good thing for the application and ultimately… the user experience.

Having said that, I’d like to request that tomorrow, May 23rd, be… Hug Your Designer Day.

Happy Birthday Allison

Robby Russell — Wed, 28 Mar 2007 20:53:00 -0500

This morning was delightful. I woke up to find that 37signals had referenced our website on Signal vs Noise this morning. In particular, they referenced the Rails hosting order form on the PLANET ARGON site. What’s interesting is that Allison created this design over a year and a half ago.. and we’re actually in the process of a complete site redesign, which Chris and Allison are planning to blog about in depth. :-)

There are some discussions within the comments on the blog post about the design decisions that were made, some of which we’ve already begun to address in our redesign process brainstorming (based on google analytic conversion data).

On top of that, today is our Experience Director, Allison Beckwith’s, birthday.

Thanks for the linkage, 37signals!

...and… Happy Birthday Allison!

Agile Interaction Design

Robby Russell — Wed, 30 Aug 2006 14:36:00 -0500

I would like to start some dialogue with all of you…

In a recent post, Jeremy Voorhis said the following about About Face 2.0 in his post announcing his Agile Book Club.

About Face 2.0 isn’t bad; it’s full of some great advice. My biggest gripes with it are the follows:

It declares that programmers are just unfit for interaction design.
It advocates for waterfall development.
Cooper has a defensive tone whenever discussing his beloved discipline of interaction design.
The web chapter is dated.
If you can get over all of those things, it is full of great ideas, specifically about working with personas, and data entry and retrieval.

I disagree with a few of these conclusions. In particular, that Cooper advocates waterfall development. I’ve been hearing a lot of developers throw the word, “waterfall” around… but why?

Take the following excerpt from this great conversation between Kent Beck, the father of XP, and Alan Cooper.

“During the design phase, the interaction designer works closely with the customers. During the detailed design phase, the interaction designer works closely with the programmers. There’s a crossover point in the beginning of the design phase where the programmers work for the designer. Then, at a certain point the leadership changes so that now the designers work for the implementers. You could call these “phases”—I don’t—but it’s working together.”[1]

I’m curious as to how anyone would consider this to resemble Waterfall, which might imply that Cooper’s approach to Interaction Design is incompatible with the principles behind the Agile Manifesto.

Dave Churchville posted an article last year titled, Agile Interaction Design?, which discussed how the role of an Interaction Designer (ID) can be compatible with Agile methodologies. “An ID team probably becomes the voice of the customer in Agile methods, and as such should be working closely with the development team as well as the users. In that sense, the ID role may be more of a liaison between customer and developer.”

So, do you think that Interaction Design as described by Alan Cooper… is compatible with the principles of the Agile Manifesto?

UPDATE It looks like this conversation was picked up on the Joel on Software discussion boards.

¹ http://www.fawcette.com/interviews/beck_cooper/page8.asp

DDD (d3) is the new conversational software development

Robby Russell — Thu, 03 Aug 2006 22:28:00 -0500

I’m not sure how I missed this recent post on Martin Fowler’s bliki last week on Customer Affinity. In this post he references when the term “agile” first came about and mentioned that, “one of Kent’s suggested names for ‘Agile’ was conversational software development – the point being that it’s a two way communication. “

Conversational Software Development.

This doesn’t sound so different than what Brian Ford and I are calling, Dialogue-Driven Development. ;-)

Fowler goes on to say, “This isn’t something like a telecoms protocol that you can define, but the back and forth discussions about how software can enhance the business are where the real value lives. Much of this conversation is of half-baked ideas, some of which grow into valuable features – often ones that aren’t things that the customer originally thought of.”

If you didn’t follow the thread of comments on my recent post on Dialogue-Driven Development, you might not know that this name came up during Martin Fowler’s keynote at RailsConf when Brian and I were sitting next to each other and Martin kept reusing the word “dialogue.” Brian and I can’t seem to agree if I said, “Dialogue-Driven Development” out loud or if he wrote it down on a piece of paper first… so we’re going to have to share the credit. What made this so fascinating at the time was that for the entire trip from Portland to Chicago on the Argon Express, Brian and I had been discussing a lot of what we’re planning to change and define with our approach to Client/Project/Development Collaboration & Management… and in the end… we left Chicago with ~~DDD~~ d3.

Thank you, Martin for being part of this process.

Like all things, this approach is open to ~~discussion~~ dialogue.

UPDATE

Brian has written an article called, It’s all about the dialogue. (digg.it)

Dialogue-Driven Development

Robby Russell — Wed, 02 Aug 2006 21:55:00 -0500

Just a few months ago, I wrote a short article called, The Art of Delivery, which outlined how we at PLANET ARGON approach iterative development and how it relates to quicker release cycles. I wanted to follow up with this and add some more thoughts to that and what we’ve been trying and learning since that point in time.

With iterative development cycles, we’re able to focus our attention on very specific and well-defined goals while we work with the client to organize the other goals that they’d like us to help develop solutions for.

An End to the Product Backlog

While everyone at PLANET ARGON has been doing some research on modern Agile-related methodologies, we’ve been throwing a lot of ideas back and forth… and often times we end up cherry-picking individual practices and throwing it into our evolving processes.

The problem that we’ve seen with most examples of using a standard Scrum Product Backlog is that it focuses too much on tasks rather than providing solutions for goals that are central to the success of the project. It also requires that someone maintain, on a regular basis, a well-defined list of tasks, which often times the client (Product Owner) dictates. We’ve seen many situations where a client has more feature requests than is necessary in order to attain the goal that was originally set. If we had a nickel for every time we heard someone say, “wouldn’t it be cool if it did this?”

I’ve personally worked on many projects that fell into this routine too early in the development cycle. Most clients that we work with are trying to provide a solution for their users and aren’t always the best Domain Expert. Taking the whole less is more approach, it’s vital that the earlier you can get your users in front of your application, the sooner you can get them to generate feedback, which aids in you making educated decisions about what to add to the project later on.

Features are Expensive

Aside from the monetary costs of adding new features and functionality, it is important to remember that as you add new code to an application you increase the maintainability and overall scope of the project. With each new feature, the requirements change, complexity increases, and as far as your users are concerned, they are now being exposed to something new, which may or may not be what they want or need. For example, I was in a sales meeting yesterday and our potential client mentioned that at a former job during the dot-com era, their web team added e-Cards to their web site and it had nothing to do with their business model. The users did however use this new feature but they later went out of business. Perhaps they should have been an e-Card business instead. Imagine if BaseCamp added a local weather feature… I might use it… but it doesn’t help me manage our projects any better.

When clients approach us with a new feature that wasn’t previously discussed, we have to ask them they Why, What, and How? What goal is this feature providing a solution for? Do we already have a solution implemented that solves this problem? Is this a new goal and how (and why) did this goal come about? What are the costs of implementing such a feature and how will it affect the current stability of the user base and application? If we put it off 3 months, would it cause the project to come to a grinding halt? What about 6 months?

It’s important to always remember that one of the biggest problems in software development is feature creep. Many projects fail due to this and as a project manager, developer, or client… please consider the consequences and benefits of each new feature. Focus on the goals and connect the dots from there.

Get the goals clearly defined and provide clear and simple solutions for them.

Just Say NO to Bloat!

Start with a Mission Statement

One of the new things that we’ve begun doing with a few new clients is assigning them with an initial task of providing us with a Mission Statement. From the Mission Statement we can ask how each goal that the client and we outline relates to it. If one of the key goals of the Mission Statement is, “to provide gorillas with easy access to basketballs”... we will have to question any goals that imply that we might also need to provide access to soccer balls, car batteries, or scissors… or that when a gorilla is getting their basketball we might want to provide them access to stock reports. We’re not trying to solve all the gorilla’s problems and it would be naive for us to think that we know what they want before we’ve had a chance to really engage in that dialogue.

Users are the Domain Experts

Very rarely do we get a chance to interact with users before we’ve begun coding a project and getting an alpha release in front of a subset of users. Brian and I just got back from a few days in Washington DC, where we worked with a new client. They have an existing GUI application that began development in the mid-90s and we’re being contracted to help build a new solution to the problem that they began to solve ten years ago. The application has suffered from a lot of feature creep as many evolving products do. As they gave us a demonstration of their existing product, we saw first hand how it was even difficult for them to remember why Feature X was in the system. “Most customers don’t use that anyways.”

So, why is it there? Of course, nobody remembers why everything is there now. As developers come and go projects get managed by various people over the course of their life, many of different opinions and features get injected into the application. It’s a common problem and it takes a lot for a company to finally admit that it’s time to throw it out the door and start fresh.

The old rules don’t apply anymore. *

One of the first things that we did in our meetings was discuss what goals their product was aiming to provide solutions for. What do they believe that their users want and need? To get this answer, we scheduled a few conference calls with real users of their existing software! I cannot describe how helpful those interviews were and we saw a lot of consistency in their goals as users of such a system. It became apparent that they were the Domain Experts and as we move forward with the project we are going to have access to interact with those users.

Rethinking the Dialogue

When thinking about delivery, we must consider the major obstacles to overcome during the course of an iteration or release cycle. More important than having well-defined deliverables is having well-defined expectations. If you’re delivering a prototype, be clear about what a prototype is and what is it not. Schedule regular meetings with your client throughout the process. Keep the client updated as much as possible. Ask questions as soon as you can… and be sure to ask them the right questions.

There is an art to it and it’s important that you keep this process lightweight and agile like you do your development process. Perhaps we need to think of development and project management under a new heading… *Dialogue-Driven Development? ~~DDD~~? ...just what we need… another acronym. ;-)

UPDATE

We’re not going to call it DDD… just d3.