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.
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 
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?
I have a Flickr account.
July 15th, 2008
So I found this cool new photo sharing service called “Flicker”, except without the “e” so it’s “Flickr”. I suppose “Flicker” was taken already. If it stores photos, shouldn’t it be called “Shuttr” or something, instead?
Anyway, the URL to my Flickr account is http://www.flickr.com/photos/28643143@N07/. I guess Flickr is too cool to give me flickr.com/buckwilson.
Anyhow, subscribe to it, bookmark it, do whatever you kids are doing these days to keep updated on it.
I’m trying to be more “transparent” with what I do with my time. Tweeting, blogging, Flicking (Flickring? Flickering?), if it’s social, I’ll try it. I’m just a sucker that way.
To be honest I’m just trying to increase my visibility among those who might care. I think I’m a decent enough designer, but the only way I’ll grow is if I connect with people who I view as “holy cow way better than me”. So anyway, if you’re a superstar designer person and you’re reading this, will you be my friend? Heck, if you’re a mediocre design person, you can be my friend, too! We can hang out and watch cartoons and eat Cap’n Crunch.
Oh, and Flickr called me a “Batch”. I thought that was pretty rude.
I’m pretty sure they meant to put “SAVE THIS, BATCH!”.
Jerks.
The Winning jQuery UI Theme
July 11th, 2008
Howdy everyone! Sorry it’s been so long since my last post. I plan to keep regular maintenance on the blog, and I expect you guys to hold me to it.
So the jQuery theme poll was awhile ago, and I still haven’t cranked out the theme, unfortunately. The CSS guy and I kind of fell off of talking to one another; and, while it’s mostly done, it needs a little bit of polish before I release it. It’s coming, though!
In the meantime, I am posting the Photoshop document for you to play with. It is complete, and labelled. As with all of my posted .psd files, feel free to do whatever you like with it. It’d be nice if you linked back here, but I’m not going to require it (mostly because I can’t really enforce it).
Also, I’ll be doing some maintenance on the blog in the next few days… usability issues mostly (I’m still learning Wordpress). Hopefully I’ll get the blog to a point where I won’t have to worry about the site so much, and I can focus on the content. Wish me luck!