Robby on Rails

Throughout our design and development process, we’re working around areas of the site that are not yet implemented but we also want to be able to allow our clients to demo their application. In an effort to manage their expectations, we need to be careful about what we link to. If a page/widget isn’t ready to be demo’d yet, we should avoid providing pathways to get interact with or navigate there. However, when we’re implementing HTML/CSS for pages, it’s sometimes makes sense to not hide certain things on the screen.

For example, let’s suppose that you’re working on the primary navigation of an application. You know what the other sections are going to be, but you’ve only implemented a few of them so far. Your HTML/CSS person is working on the design for the navigation and wants to have them be proper links… even to pages that don’t yet exist.

One option, which is quite common, is to provide a link with href="#". This works to some extent, but when people click on things, they naturally expect something to happen in response.

This approach doesn’t mesh well with our team as we don’t really want to field any questions like, “the navigation links are all broken. Nothing happens!”

So, a pattern that we’ve been using for a while is to trigger a javascript alert for every link within an implemented area that is linking to something that isn’t yet implemented.

Let’s take a really basic javascript function like:

# public/javascripts/application.js
function unimplemented() {
  alert("NOTICE\n\nThis feature is not implemented yet. Please check back again soon!");
}

This allows us to do the following:

  <a href="javascript:unimplemented();">link text</a>

When someone clicks the link, they’ll see a typical javascript alert message. This informs our clients/beta testers that we’re paying attention to what works and what doesn’t.

Let’s take it a step further and push this into a view helper.

# app/helpers/application_helper.rb
def link_to_unimplemented( link_text, *args )
  link_to_function( link_text, 'unimplemented()', *args)
end

Now, we’re able to use link_to_unimplemented and pass any arguments that you’d pass to the default link_to view helper.

<%= link_to_unimplemented( 'link text', { :class => 'link_class_name' } ) -%>

Now our web designers can go about their work and use this helper as necessary.

An nice benefit for doing this is that we have a pattern that we follow so that we can rely upon to make sure that we don’t forget anything. This is the equivalent of adding @TODO@s throughout our code base.

If we search through app/views for ‘link_to_unimplemented’ we should be able to prevent missing any broken links. In the next screenshot, I’m using grep with colorized matches.

As you can see, we have something left to implement in that area of the application. :-)

This has been one of those lightweight patterns that we’ve been able to adopt and it’s definitely helped manage the expectations of our clients throughout our development process.

I’d love to hear your thoughts on this. How does your team handle things like this?

Related Posts

• Designers, Developers, and the x_ Factor
• Spice up your Terminal with colored grep pattern results

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?”

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.

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.

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.

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.

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.”

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…

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.

It just occurred to me that my first Skitch was on July 7th, 2007. 7/7/7. I’ve been meaning to post an article about how Skitch has changed the way our team approaches reporting bugs and communicating ideas visually.

First of all, the Skitch web site advertises it (see video) as a fun tool for playing with photos and sharing stuff with friends/family. While this is true, I think their bigger market could be those of us who work in the web design and development community. It took a less than a week for Skitch to become a tool that I rely on the most during my day to day work and since it keeps surprising me that people aren’t using it and/or haven’t heard about it… I thought that I’d share how we’re using it at Planet Argon.

Introducing “LOLBUGZ”

Our team is currently using Lighthouse for managing bugs/tickets for internal and client projects. If there is one way to slow down bug fixing cycle.. .it’s the ticket submission process. It takes a lot of time and commitment to try and communicate some problems that you’ll find in a web application. This is why screenshots can be so useful to helping speed up the process. Skitch allows us to not only provide a screenshot really quickly, but it gives us the ability to focus our attention with shapes and text, which provides more context when viewing an image.

For example, here are a few real-world Skitches that I’ve used to report some problems.

What happened to this drop down?

This pagination needs some CSS-Love!

Oh no! Tags are getting grouped together…

Styling has gone crazy…

I mastered an unordered list! (hooray!!)

This list isn’t scaling anymore…

Side note: LOL BUGZ was a term coined by Rick Olson at Active Reload to describe the tickets that I post for Lighthouse. ;-)

Trying out 15 during the initial releases for the iPhone… bug report sent via twitter to Erik Kastner.

As you can see, using Skitch helps communicate some very specific things without needing to type a huge description. Of course, we do try our best to add more context with our tickets. For example, here is a real-world example of a ticket that I posted on Lighthouse. As you’ll see, there are a few skitches embedded in the tickets, which works much better than attaching screenshots to tickets.

One of the best features of Skitch is it’s work-flow. Within a few seconds, I can do the following tasks.

• Take a screenshot of a specific region of my screen
• Add some arrows and text
• Click on Webpost, which will upload directly to myskitch.com
• Click on Share to navigate to the new upload
• Click on the embed textfield and it uses JS to copy the embed html into my paste buffer
• Paste the html snippet directly into the ticket that I’m reporting
• Submit my LOL BUG

Side note: it also allows you to upload to Flickr, a ftp account, etc.

Over the past four months, Skitch has become one of my favorite OS X tools. The interface is lightweight and the workflow is almost perfect (feature request: providing the embed code in my paste buffer without needing to go to myskitch would be A+++)

I’ve also used Jing, which works on Windows and OS X and does video. I’ve not found it to be as intuitive for working in this manner. In fact, the work-flow leaves a lot to be desired. However! It does do video and this has come in handy a few times for showing people some “live” interaction-type bugs that can’t be communicated as easily through text/images.

If you’re not using Skitch yet and are on OS X… I highly recommend that you try it out for a few weeks during a bug fixing sprint. We’ve gotten our clients and almost everybody on the team using it in this fashion. The productivity increases haven’t gone unnoticed.

That’s not to say that it’s not fun for point out things that aren’t related to your project bugs. ;-)

Happy Skitching!

UPDATE

Plasq liked the writeup and gave me 50 extra invites to pass out for Skitch. So, if you’re in need of one… ask me via email. Thanks Plasq team!

In a new article on A List Apart, Jeffrey Zeldman writes:

“Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.”

He goes on to describe Web Design as, “as the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.”

Read the rest of the article, Understanding Web Design on alistapart.com.