Designing the Last Mile

August 18th, 2008

Have you been watching the Olympics lately? I sure have. Every single minute I watch inspires me to apply the dedication necessary to become the best in anything that I do. With every success and every failure, there’s a story and a lesson to be learned.

What I found particularly interesting was the Track & Field 1500M race. I’m not much of a runner, so it’s the first time I’d witnessed a race such as this. For the first 1000M or so all of the runners stay in a surprisingly tight group. No one really attempts to push forward during this stage. I’d love to hear a runner’s insight as to why this is, but my guess is that doing so early on in the race offers a great amount of risk (tripping, overextending yourself, injuring yourself), for a small bit of reward (the temporary lead).

For the next 200M, the runners really begin to pick up the pace, and you can see the stragglers start to fall back and the contenders emerge from the pack. Finally, during the last 300M, everyone goes into an all out sprint to the finish. The pack really thins out and it becomes more like a line. There are clear champions during this stage, and there are clear stragglers.

At the Enterprise UI Summit, Craig Villamor of Salesforce.com mentioned something akin to “Designing the last mile”. At first, it seems like a different way to just say “Designing the details”, but it takes a different feeling when you apply it to User Experience and User Interface. I began to ponder the term over the next few days, and I’d like to share with you my thoughts.

On Your Marks… Get Set…

Imagine your company or product is in the 1500M race I described above. Next to you are some competing companies with competing products. You get on your mark, you set up, and POW! The gun fires. The importance of reaction time here depends on the type of race you’re in. If it’s a 100M sprint, then reaction time is quite important, for the 1500M not so much.

Applied to your business, you’ll just have to figure out if time to market impacts you. There are businessmen more savvy than I who can help you determine this. Just know that if you require a quick reaction time, then expect to do more sprinting than anything else.

The Majority of the Race

Everyone groups together for the first 1000M, which is a majority of the race. For product design, this stage is the building of fundamental features. Is the product basically usable? Does it satisfy the requirements of your target market? This is where most companies and products do just fine. They are listening to their customers, and they are delivering a usable product.

Just like the runners don’t attempt to push ahead during this portion for fear of injury, it’s tough to take risks at this juncture as you may wind up missing your target. It’s best to listen to your customers and provide a foundation that satisfies their needs.

That isn’t to say you can’t innovate in this position, but do so at your own peril. You may miss the mark completely.

The Last “Mile”

Right at 1000M, the pace begins to pick up. Product innovation occurs and you are actually starting to challenge the other companies’ offerings. You provide differentiating features and interface elements, and pull away from the pack of companies content to provide the bare minimum for their customers.

At 1200M, the all out sprint begins and every little detail counts. Visual cues are enhanced, workflows are simplified, consistency is obtained and context is nailed down. Your ability to win this race depends on your ability to design for this last leg. Most companies simply don’t have what it takes to compete in this last part of the race. Many companies seem completely unprepared, as though they were unaware that you were *supposed* to sprint this last part, and they give up, completely exhausted.

So how about it? When do you consider your app “done” or even “release-able”? Much like the final sprint, it takes dedication, practice, and a will to be the best.

Expect more posts on this topic in the future! I’ll teach you what it takes to design during this stage and what is and isn’t worth your time. Maybe I’ll make it the topic of a book some day

* all pictures are owned probably by NBC and screenshotted from their videos on NBCOlympics.com.

Listotron : Create, Manage and Share Lists

August 12th, 2008

Howdy folks!

I’d like to take a short moment to give you an update on my newest time sink: Listotron. Listotron is a collaborate project between Adam Wulf and myself, and we’re aiming for it to be the best online list maker ever. I will outline design philosophies and features in upcoming Listotron blog posts.

Above all else, we are using this project to learn the art of self-promotion– a skill both he and I are lacking in. As such, we will become absolutely transparent in our methods, decisions, and even code.

If you are at all interested in everything it takes to create a web-based application, I highly encourage you to keep an eye on the Listotron blog and Twitter account. We will be posting many tutorials and insights ranging from high-level business decisions to providing code. Most notably will be long posts on User Experience and User Interface processes and decisions.

Simply put, we’re betting on a strong correlation between how much we share with the community and the amount of publicity the product gets. “Selfless Promotion”, if you will.

I hate Captchas

July 30th, 2008

I hope it’s a trend and I hope it dies soon.

Seriously don’t put the burden of your spam problem on the users.

It’s too easy (and too rewarding) to focus on the details

July 27th, 2008

A couple of days ago I found myself thinking about the process of software design (as I often do), and I posted this tweet up on twitter. I got a few responses in twitter, and a few via IM, so I thought I’d take the opportunity to discuss this topic.

Essentially the hypothesis is that it’s too “rewarding” to focus on the details. That is, it offers too much personal benefit (the satisfaction of setting and achieving goals) at the cost of the final product.

What’s the Problem?

When I speak of the “software design process”, I am referring to the process of deciding on how the product will work, and then carrying that through to development. Whether this is adding new features or re-designing current features, every company has their own way of doing things, depending on size, experience in the marketplace, customer needs, et al.

Many companies impose false metrics upon themselves in order to build as many features into the product as they can. This makes it easy to walk up to a potential customer, then provide some sort of feature matrix showing your product is far superior to the competitor’s.

By “false metrics” I mean setting short term goals, such as building out features, and then measuring success on your ability to achieve these goals. This is a terrible measurement of success because it trickles down. Each employee judges himself based on his ability to achieve these goals, rather than building a product that people love.

We set release dates and aim for a set of features to implement; then, when we have achieved this goal, we celebrate and start it all over again.

This works for many companies, sales-wise, but this mentality will ultimately lead to a crappy product.

The fact of the matter is that the more resources you spend working on details, the fewer resources are spent working on The Big Picture.

The Big Picture?

In software design, what I mean by The Big Picture is this: can the customer still do what they need to do with your product, despite the number of features you’ve provided them?

Take a look at how I phrased that… despite the number of features you’ve provided them.

When designing software, adding features typically means adding buttons. In web-based software, it means adding links, new pages, new interfaces, and more. Simply put, if you were to draw a web application on a whiteboard, and each unique page is a box, and each link is a line connecting boxes– new features typically means more boxes and more lines.

More boxes and more lines equates to more options for the user, and more options easily leads to confusion and paralysis.

Everyone knows this, though– but yet customers still request features and capabilities beyond what your product provides, so how can we fulfill their needs without overwhelming them?

The Solution

The solution varies depending on what your product is, as well as your internal processes for building the process, so I can’t really provide an actionable solution. What I can provide is something to think about, and hopefully apply to your product design process.

When looking at your product, perspective needs to continually shift. When customers are asking for a particular feature, shift perspective to how they’re using the app and figure out the problem before deciding on a solution. When deciding on the feature, shift perspective to the future of the product to make sure everything is in line with the overall goal of the company.

Once a feature is decided upon, be sure you shift perspective often to the whole of the current product, rather than grabbing a magnifying glass to make sure the feature is pristine. Have people unfamiliar with the product use it a bit to make sure the focus of the product is not lost.

The goal is to be completely void of any unintentional changes of the overall feel and purpose of the product. After all, it’s The Big Picture that your customers are using, and not the tiny minute details and features. Unless your details and features contribute to The Big Picture in a consistent manner, your product will feel clumsy and tiring to your users.

The new Facebook Interface

July 23rd, 2008

Facebook has always impressed me with its user interface. The adjective that I would use to best describe its interface is “restrained”. Workflows are always simple, colors are muted, icons are simple in presentation, and you’re never far from what you need to do. It’s quite a compliment to think of its interface as “restrained” when it’s dishing out data to the scope of what Facebook is dishing out.

Facebook recently announced an interface redesign, and you can see the fruits of their labor here : http://www.new.facebook.com

It’s really a workflow redesign above all things, and a pretty broad one at that. Just like any redesign, I’m sure there will be publish backlash and outcry, but overall I’d say it’s a nice improvement.

To online interface designers, Facebook’s interface carries a lot of weight. The sheer number of users they have combined with their primary market (which is essentially a vocal tech-savvy younger crowd) provides a good insight into what works and what doesn’t. When they change something their users don’t like, everyone knows it.

They lead the charge in social interaction, and you can bet that any tricks they have up their sleeve will propagate quickly among other apps of its kind.

Overall

The application overall feels less “tight”, and that’s mostly due to the lack of containers and hard lines connecting to their containers (nearly all containers have a good amount of padding). The width has changed from 799px to 940px. Since the side navigation has been completely removed, this provides an enormous space improvement for content (646px vs. the full 940px).

Applications have also taken something of a back seat. Profiles no longer advertise their apps with the icons, and application information has been banished into the Boxes tab. It also appears that applications have the ability to add tabs to your profile page, but I haven’t seen any instances of that so far.

Toolbar / Navigation

The focus here (and with most of the redesign) seems to be on your content, and less on the application itself. The persistent left navigation is gone, and the toolbar is as minimal as possible. Account settings, privacy, and log out have been buried under the lock icon.

The burying of “log out” is definitely a bold step, and many UI designers would definitely cry foul. I think it’s great, though… almost akin to “start -> shut down” or “apple -> shut down”, and with a web app like Facebook, I don’t think people log out all that often. I could be wrong, though.

The home icon mouseover on “facebook” matching the home icon next to home is a nice touch of visual affirmation.

It peeves me a little that the buttons across the top are inconsistent in their behavior, though. The “Applications” button triggers a drop down, while the rest jump to a page.

Speaking of drop downs, it seems they have a server side process to generate this crazy single tone invert of an image to create a “hover” state for it. Seems strange to do for a result that doesn’t really add anything to the experience (indeed not changing it would have looked better), but there you go.

Home

Lots of white space here. It would be nice to see some visual separation in the commonly used actions up top, or even just remove that section altogether. I know who I am, I know my avatar, update status is already on the right, and so are links to bookmarks such as photos, videos, links, and notes. Really this is the only new addition to the page, and I think it’s a bit useless.

The sidebar is wider, and now includes a sponsor, and is now rounded… which is strange. It remains the only rounded element I can find in Facebook and I think it’s rather ugly.

My Profile

BAM. Here’s where most of the change is, and where the most time planning workflows was spent, I think. Welcome to the new facebook.

Actions & Tabs

Instead of trying to fit everything on one page, it’s now split up into tabs, giving your photos and boxes (custom application inserts) equal weight to the likes of your information. This allows each bit of your profile some breathing room, personal information in particular.

Since the wall is the default tab (more on the new wall in a bit), it’s reinforcing the notion that what people are doing is more interesting than who people are. Your personal info is buried under a tab. Facebook is capitalizing on the fact that they pull in photos (who needs flickr?), status updates (who needs twitter?), and friending / connections and present a nearly perfect interface for displaying this information.

Again, the common actions are up top, but this time it’s more fleshed out, providing the ability to update status, write a note, add photos, add video, etc without leaving the page. Strange the “Home” page doesn’t have this.

I love the concept of being able to quickly get data into facebook with this one little toolbar. In the old view, it’s difficult to figure out exactly how to, for instance, get photos into facebook. Now it’s super easy to tell how to get information into the app, and I’m quite partial to the ability to take a picture via webcam. The ajax interaction here is superb.

[qt:/video/webcam.mov 566 536]

The New Wall

I love the new wall. Essentially it’s just the regular wall with the mini-feed thrown into it, but it’s amazing how much that helps. What this results in is a decidedly “me-centric” view that provides an enormous amount of context to what’s going on between you and your friends.

For instance, let’s take this exchange:

The context is obvious. I know exactly what Kris was talking about here. The filtering out of noise (stuff that I don’t care about, ie, the friend feed) and adding in signal (stuff I do care about, ie, anything that has to do with me) makes this timeline almost feel like it’s telling a story. Fantastic.

However, let’s take a look at how this would be presented in the old Facebook layout:

The information is in two different places, and context is ruined.

To be honest, I never really cared for facebook due to the sheer amount of information given to me (such as the feed on the home page). I don’t like spending time sorting out what is and isn’t important to me… I’d rather be presenting that which pertains to me directly, then given the option to find out more information if I care to. The My Profile page does exactly that; plus, I can view other peoples’ profile pages, and consistency in the way the information is displayed allows me to know what to expect. Fantastic.

The Look

Comparing wall posts, the new version is decidedly better. There are fewer calls to action, less meta, the dates are grouped and the time is grey (faded into the background). Gone are the hard lined borders, instead opting for a greyish-blue background hue that I personally find noisy.

The avatars are enough to set off wall posts, but if they needed to distinguish them more (based on feedback or whatever) there are better ways. Perhaps it just seems noisy to me because I don’t do much in facebook, so incoming wall posts is a majority of what I have; but good design should scale

[qt:/video/facebook.mov 564 232]
Editing the size of a status message is kind of a strange option– I think this feature isn’t fully fleshed out– but I do like that drop out animation.

Visually, the actions up top lack cohesion. They act like tabs, but don’t look like tabs (there’s no connection to the container they control), and if you click “Add Photos” you’ll see yet another tab style, this time it’s centered instead of left aligned. The effect is cute but super noisy, and in an interface that is almost completely devoid of gradients, this stands out as tacky.

Summary

Facebook has always been a relatively simple application, which is a supreme compliment to the interface designers, because they’re working with tons of interactions with tons of information. This latest interface seems to bust open all of the frames and containers, and put more focus on the data that is most important to you.

They’ve done some really great things: They’ve kept the single color hue scheme; kept the simple icons; made it more apparent how to get information into the app; dramatically increased the usefulness of your wall; buried your personal information a bit; and opened up the layout to use the full 940px.

However, the app feels a little floaty without the Facebook containers we’ve all come to know and love, and sometimes it feels as though everything is screaming for your attention. This is a common falling down point for single-page apps chock-full-o-ajax (like the new My Profile page is). Hopefully they can find a way to give the My Profile page a bit more focus in a second revision.

They still have a few interaction dead ends. I believe that the following rule should always be followed: If I, as a user, can view content and it’s possible for me to contribute, then it needs to be obvious how I can contribute. I don’t want to have to navigate somewhere else to find my actions. The context is already developed, so let me take it a step further by contributing data.

Take the following page:

From here I see pictures of me… fantastic! I’d like to contribute by adding pictures of me to this page! Too bad. There’s no easy way to do this.

Same goes with this page :

What is this? Applications? How do I get more stuff in this page?

In addition, once you remove that box, the entire tab goes away. How do you get it back? Install an application? But I already have the application installed, all I did was remove the box. Now what? It’d be much better to keep it there with a description of what the tab is, and how to add things to it. My favorite example being Cultured Code’s Things for OS X:

I’m definitely looking forward to the launch of this workflow redesign; it’ll be interesting to see how their multitude of users react. It will be more interesting to see, then, how their designers react to the feedback.

The “me-centric” approach is something I see taking off in the next year or so. So many companies have been pushing social interaction, but things can get a little noisy with the sheer amount of data flying around.

Putting a “what does this have to do with me?” filter on all of that data is something I think is sorely lacking in many social interaction-based applications. I hope to see Facebook drop the Home page completely in lieu of the “me-centric” Profile page, and turn the Home page into a “what’s the buzz?” type of page.

So what do you think? Is it a decent redesign, or were you hoping for something more? Does it feel quite finished to you? Do you know any good examples of “me-centric” social interaction sites?

Confirm Password, Idiot.

April 3rd, 2008

One common trend in interface design (both web and otherwise) is to assume the user is a complete and utter fool, and our job as interface designers is to protect that user from their own stupidity. Interfaces designed around this notion become large and cumbersome, with everything screaming for the user’s attention; and put up so many roadblocks that the user gets frustrated and flat out gives up.

Software is funny that way, really. No one designs a hammer to be Smash-Your-Finger-Proof, and in doing so, then that would most likely detract from the purpose of a hammer : namely, putting gigantic holes into sheet rock (at least that’s the result I get, sadly). Imagine if your drill simply would not drill unless you were holding it perfectly level. You’d keep trying, but the drill would let out a *BZZT* and flash red, with a nice message somewhere letting you know how much you suck at drilling.

Any user-driven web business can tell you how important it is to get the conversion from “browsing your site” to “using your site”, and it typically begins with a sign up form. Whether it’s an eCommerce site where users directly impact revenue, or a social site where users generate the content, the barriers to entry to create a “user” should be a small as possible. Why is it, then, in all of the money spent to track and attempt to reduce these barriers, that I’m still being “protected” by sign up forms, asking me to confirm my password, in case I screwed up typing it? You’d think this is the easiest barrier to tear down.

Hey we think maybe you’re awful at typing. Could you try typing your password in again, just in case?

It’s not as though it is some irrecoverable problem if the user were to mis-type their password. At worst, they wouldn’t figure it out until they attempted to log into their account the next time they use your site, right? (You should be logging them in automatically when they sign up) Well, the software has their emaill address, so we can easily email them a secure link to reset their password if things were to go awry.

I would seriously like to see the logging stats larger companies have on the percentage of users who receive the “Aha! Just as we thought! Your passwords do not match! You’d better thank us now for putting in the confirm password input!” error. Out of all of the web forms I’ve filled out, I’m pretty sure I have only gotten it myself once or twice, and it was probably because I mis-typed my password in the confirm password box.

So I’m making it a point not to require someone to confirm their password when signing up. If it’s good enough for Facebook, who gets nearly 1 million sign ups per week, it’s good enough for me.

“What’s your email?” “What’s your password?” should be enough information to get someone up and running, then you can mine for more data as it’s pertinent to the experience. What a wonderful world that would be.

Creating a Nice Slider With jQuery UI

March 29th, 2008

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

One drawback of a slider is the user not knowing what he’s selected as there’s no discrete output. If you are sliding to scale something, you can eyeball something, but wouldn’t it be nice if the slider provided some feedback to the user (“50%”) as the user was fiddling with it? I’m going to show you how to do just that with the jQuery UI library.

Check out the demo here

The necessary dependencies :

• jQuery Slider & UI Base
• jQuery

The code I used is as follows :

HTML

<div id='container'>
	<div class="slider_container">
		<div class='small_label'></div>
		<div class='slider_bar'>
			<div id="slider_callout"></div>
			<div id='slider1_handle' class='slider_handle'></div>
		</div>
		<div class='large_label'></div>
	</div>
</div>

CSS

body { background: #284a6e; }
#container { height: 100px; border: 1px solid #284a6e;}
.slider_container { position: relative; margin-top: 50px; height: 40px;}
.small_label { background: url(minus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_bar { background: url(bar.gif) no-repeat; height: 19px; width: 260px;  float: left; margin: 0px 5px; position: relative;}
.large_label { background: url(plus.gif) no-repeat; height: 19px; width: 19px; overflow: hidden; float: left; }
.slider_handle { background: url(selector.png) no-repeat; height: 19px; width: 20px; overflow: hidden; position: absolute; top: 1px;}
#slider_callout { background: url(callout.gif) no-repeat; height: 45px; width: 38px; overflow: hidden; position: absolute; top: -50px; margin-left:-10px;  padding: 8px 0px 0px 0px; font-family: "Myriad Pro"; color: #284a6e; font-weight: bold; text-align: center;}

Update: A couple commenters noticed a little outline gremlin in Firefox 3 when using the slider. Just add * :focus { outline:none } to get rid of it. I’m not sure which element the outline is on, so applying it to * can’t hurt

JavaScript

After I recorded the video, it dawned on me that there’s a way to do this that is a bit simpler: by using the ui object passed in by slider, and grabbing the “left” css property of the handle. That way, the callout matches the css handle at all times, with no calculations needed; and you can reserve minValue and maxValue to return values that are useful for your web application.

Thanks to Andrew and John in the comments, I have fixed some bugs with the code. Now you can click on the bar itself and the callout will fire correctly. For this I utilized the “stop” event, checked if the callout was already visible, and displayed it if not.

The code looks like this :

$(function() {
	$('#slider_callout').hide();
	var calloutVisible = false;
	$('.slider_bar').slider({
		handle: '.slider_handle',
		minValue: 0,

		maxValue: 25,
		start: function(e, ui) {
			$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
		},
		stop: function(e, ui) {
			if (calloutVisible == false) {
				$('#slider_callout').fadeIn('fast', function() { calloutVisible = true;});
				$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
			}
			$('#slider_callout').fadeOut('fast', function() { calloutVisible = false; });
		},
		slide: function(e, ui) {
			$('#slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
		}
	});
});

For reference purposes, here is the code I used in the video :

$(function() {
	$('#slider_callout').hide();
	$('.slider_bar').slider({
		handle: '.slider_handle',
		minValue: 0,
		maxValue: 240,
		start: function(e, ui) {
			$('#slider_callout').fadeIn('fast');
		},
		stop: function(e, ui) {
			$('#slider_callout').fadeOut('fast');
		},
		slide: function(e, ui) {
			$('#slider_callout').css('left', ui.value).text(Math.round(ui.value * (100/240)));
		}
	});
});