The Magic Behind User Interfaces

“How hard could it be to add a single checkbox to a web page?” Our designer asked me this question as we planned a new feature to let users auto-tweet their activities. You’d think it would be as simple as sprinkling a little HTML, adding a bit of code on the server, and moving on to the next new feature. However, there was so much more to adding this single checkbox that I thought it would be interesting to share how much work a small change really can take.

The Design

First, we had to answer “Where should the checkbox go?” and “How should it look?”. Here’s what we came up with, simple and concise. Writing the HTML took less than a minute.

Now it was time to answer “What happens when the checkbox is clicked?”. We assumed most users would be connecting to their Twitter accounts for the first time, so we focused on this interaction. Here’s a breakdown of how it works:

• Ask the user for permission to connect with their Twitter account.
• If they accept, leave the checkbox checked.
• If they don’t give permission, uncheck the box and show some sort of error message
• Alternatively, if they had already connected their Twitter account, just leave the checkbox checked.

OAuth and Twitter API

Next, we needed to learn how to authorize a user’s Twitter account. Twitter uses a protocol called OAuth that lets users give publishing permissions to other websites. When you authorize FriendFit, we receive a special token that lets us tweet on your behalf. We need to store this token (a string of letters and numbers) in order to use it later.

This was our first time using OAuth and the Twitter API, and thankfully we found a great PHP library, TwitterOauth, to handle both. Using this library, we created a new pop up page to handle the entire connection process. This page first sends the user to Twitter, then saves the authorization token after the user accepts. To make things even friendlier, we give users the option to add their twitter username to their profile after they’ve connected. In order to store this new data, we needed to add a few new fields to our database.

User Session & Login

Now that we’ve saved the user’s twitter token, we needed to change in the site’s login code. On login to FriendFit, we know needed to check if the user had connected to their Twitter account. To avoid asking the user to verify Twitter again, we added some Javascript to let the page know that the user has already verified their Twitter account.

URL shortening

Now that we have permission to tweet on a user’s behalf, we needed to figure out what were going to tweet. At a minimum, we wanted to share the type of activity, mileage, total time, calories burned, and a link to the new post. Because of Twitter’s 140-character limit per tweet, we now needed a way to create short links to individual posts. You may be already familiar with URL shortening services such as Bit.ly, but we felt that having the FriendFit brand in the URL was important. So we added a simple redirection page to handle these new links, making the appropriate change to apache’s .htaccess file. The new links look like this http://friendfit.com/a/lhj, and the Apache redirection rule is as follows:

Actually Tweeting

At this point, we have both the permission to tweet and the tweet content. What’s left is actually publishing the new tweet! This required a few changes to our “FitBlog_saveNewPost()” function, both to accept a flag indicating the user’s desire to tweet, as well as actually sending it to Twitter. Since we use AJAX to save new posts, this required changes on both the server-side and client-side code. After much testing, everything worked seamlessly.

Conclusion

So now you know that often a checkbox is so much more than just a checkbox. Here’s a diagram I’ve seen a few times that neatly summarizes this point (sorry, I can’t seem to find the original source!). We, as programmers, must always look for ways to simplify the user experience and hide complexity from our users. This is the point where interfaces start to feel like “magic”.

So, what was your biggest implementation challenge for a so-called “small change”? Please share in the comments below.