I See What You Did There

Kickstarter

2009-11-15T00:00:00+00:00

Kickstarter.

Kickstarter is a new site for fundraising projects of any size. Project creators set a due date and dollar amount; pledgers offer their financial support to projects. Hit the dollar amount by the due date, and you get all your funding; don’t, and you get nothing. High stakes, of course – but project creators have nothing to lose.

I’m writing a book about interaction design these days, which abstracts and exemplifies many of the principles on I see what you did there’s entries. I'm funding it via Kickstarter, and have used it from the perspective of a project creator for a few months now. And so with this review, the snake eats its own proverbial tail.

Kickstarter’s administrators make money by taking a small cut of successfully funded projects, which means they’re directly invested in the success of project creators. There are many stakeholders, but they coalesce into only two groups (creators and pledgers). And the path is clear: they (being Kickstarter writ large) won’t receive many pledges if the project pages are designed poorly, projects won’t succeed if they don’t receive enough pledges, and Kickstarter won’t make any money if projects don’t succeed. So it’s pretty easy to demonstrate the need for a really usable site that encourages the conversion of potential donors.

Part of this, of course, falls to project creators. If the project is uninteresting or poorly executed or marketed, then it will receive few pledges. But much more is at stake for Kickstarter: frame every project poorly, and they will all suffer. Fortunately, Kickstarter’s design is beautiful and spare in turns, beautiful in its spareness, and its functions and behavior are remarkably tuned to the site’s attendant concerns.

Kickstarter is a novel system with many successes thus far, including one benefitting the site itself. It has tremendous promise. But its newness means that project creators and donors will, at first, have no idea how to use it well. To allay this, much of Kickstarter’s interface is built to help new users along, providing suggestions about how to build a project, contextual answers to frequent donor questions, and tips for becoming successfully funded on their blog.

Finding projects.

The front page of Kickstarter features many interesting projects, as well as administrators’ write-ups for them. It provides the means to browse for more, but it lacks a search form. In order to search for a specific project, you have to click Discover projects in the header nav, and scroll down on the left sidebar – far from discoverable. The front page would benefit from a search form, because users may come to Kickstarter wanting to find a find a specific project that they know about.

Examining projects.

Fortunately, the project pages more than make up for this foible. The project’s health is laid bare in the largest type, at the top of the page.

Then, the ultimatum of funding: Kickstarter’s core mission. Small type, but the high contrast and “banner” style set it apart from the rest of the page quite nicely.

After this is the most important function on the entire site, as bright as possible. The use of kelly green here and nowhere else sets it apart better than anything else on the site, and for good reason: there’s nothing else on Kickstarter that matters more than converting users to pledgers.

The right-hand column contains potential gifts for donors, should the project be funded. It also contains a little blurb about the project creator.

Project pages are divided into two columns. Donation functions, the list of gifts, and the author blurb are on the right column; a user-created header image and project summary are on the left. Many projects suffer a bit from the right column being drastically longer than the left, which pushes the author information too far down, with too much white space in the primary column. In context, then, important information is pushed to the side.

Project pages would benefit from having the option of placing author information in either the right or the left column, which would visually balance the page as needed.

Managing projects.

It’s possible to save projects before “launching” them publicly – essential for creators, because a project is a very large set of information, and it’s frequently revised and edited as a project progresses. And once projects are launched, you can edit the vast majority of parameters (you can’t edit gifts that pledgers have already selected, probably to protect them from a bait and switch).

As mentioned before, Kickstarter needs to teach all users how to work with it. Contextual help accompanies literally every form field, staying out of the way of users’ work but providing a wonderful way to guide them along.

Help text can be static or dynamic. Sometimes the field offers some form of validation, on fields that have character limits or data type constraints.

And help expands beyond just project editing. On the page to keep track of your pledgers, the right column handles some of the administrivia once you’ve become fully funded, and addresses the question (frequently asked by my friends) of pledging to yourself.

Back on the project editing page, rewards are laid out very well, adopting a unique architecture that’s nonetheless readily learnable. Creators can have zero rewards, or many rewards. So the page needs to scale well, to accommodate a wide array of uses.

Adding and modifying rewards is an extremely easy and simple quasimode: click “edit” and the following replaces the original frame.

But if I can’t edit this reward anymore, why is it apparently possible for me to remove it?

Final thoughts.

My bias is obvious: I’m a project creator on Kickstarter, and I believe fervently in its mission. Especially in today’s down economy, people still want to work, and many are trying to follow their own passions. People of a stunning array of interests – writers, filmographers, scientists, photographers, record labels, butchers – are finding ways to go it alone, and Kickstarter is as good a catalyst for these big ideas as I’ve ever seen.

While Kickstarter’s interfaces have their foibles, they’re tiny and easily correctable, and I had to dig hard to find them. Overall, the site is astoundingly well-designed, with a fairly singular aesthetic of generous white space, clean typography, a consistent baseline, and nearly pitch-perfect layout and information architecture. And in its own roundabout way, it’s quite an honor to see my own project framed so well.

Dropbox (Web)

2009-10-03T00:00:00+00:00

Dropbox (Web).

Dropbox is a popular and successful service that allows you to synchronize files with your personal computers, your iPhone, and a centrally located web site. There’s a free version that allows up to 2GB of space; paid versions give you more space. No matter what, file size and transfers are unlimited. Individual clients exist that integrate with the Mac OS X Finder, Windows Explorer, and Linux file browsers to offer seamless integration between multiple computers. Drafts and deleted files are tracked on the server as well.

For the sake of brevity, I’ll focus on Dropbox’s web client, which is very data-rich and offers considerable in-page interactivity.

The immediate impression one makes is that this looks like their operating system’s file browser. There’s a file listing; you can enter the folders on this listing to reveal identical-appearing listings of the folders’ contents.

Top navigation is a row of tabs, kept very concise, serving as the core functions of the product.

The left sidebar appears to be a bit threadbare. But this is so they can make room for search results:

Below this lies the status of your account: how much of your space quota that you’ve used. This doesn’t offer enough data to be terribly useful; it shows the percent that you’ve filled, but not the maximum quota or how much space you’ve used.

Clicking this meter offers this information, but this page could benefit from integrating that data – perhaps when the user hovers the meter, if there’s a desire to keep the page as clean as possible.

Above this are two links: to download the desktop client, and to upgrade your space. This page organizes these administrational links out of the way of the user’s interaction, which establishes a sensible hierarchy.

The file listing employs an iconography that’s reverent to the conventions of most operating systems (e.g. , , and look similar to each other as well as their OS equivalents) with a twist that’s equal turns helpful and adorable: feedback shows whether a folder is shared or not .

This sharing analogy is additionally reflected in the button in the top navigation.

Creating a new folder yields an unconventional but tremendously useful dialog: it focuses to a new row, and it appears as if you’re renaming the folder.

Hover feedback is generous throughout the site, which helps to comfort and guide the user. Hovering the top menu options highlights their border (as above). Hovering drop-down menus’ items inverts them, as on . And hovering files and folders tints their background slightly blue, adds a border, and (most importantly) provides the feedback aligned right – which, when clicked, quickly generates the above pull-down, with options to share, copy, delete, and (with files) view previous drafts.

This functionality pervades every aspect of working with files on Dropbox. It even extends to the desktop versions, which add Finder/Explorer/whatever extensions to perform similar tasks on-device.

In all hover cases, the target to click is the background around each item as well as its corresponding text, which reduces user error.

Top navigation has some nice feedback to view recent events, which reminds me of the little badges on iPhone applications. On the other hand, I try to keep these badges to a minimum, because they – along with their always-red color – convey something that needs my immediate attention. I turn most of them off on my iPhone, leaving only the badges for things that I should check right now: text messages, missed calls, unread emails. Then I suppress missed Prowl messages, Things todos, etc.

Many people simply don’t care about their recent progress unless somehow prompted by unexpected changes in their files. Dropbox’s preferences are admirably simple, but having a way to turn this off would be useful. Another potential solution: change the color of to one that doesn’t convey such a dire alert – like , , or .

I’ll close with two minor quibbles. The “More actions” menu pull-down doesn’t activate anything unless you’ve checked multiple files. This forces an unnecessary step: you must check the files first, then go back to the pull-down and select your action.

It would be better if this yielded the normal menu options – and when one was selected, you were then requested to check the files you wanted to modify. A “Done” button could pop up at the bottom of the pop-up menu after the first file was checked; clicking that would perform the batch action.

Lastly, the prompt to share folders is a modal lightbox.

Modes interrupt the user’s flow, especially if they are deeply involved in a task. Moving these elements to the left-hand column (overlapping search results if need be) would take advantage of the extra room over there, and the prompt would stay out of the user’s way if they wanted to keep working with other functions.

But these two problems are inconsequential in the grander scheme: Dropbox does two things (synchronizes your files and shares them with others) very well. It’s grown slowly in past months, which has worked to its benefit. After you get past setup and installation, their product is simple and learnable with remarkably little effort.

(Lastly, a humble request: if you’re interested in signing up for Dropbox, use my referral code. It benefits both of us.)

Things (iPhone)

2009-09-11T00:00:00+00:00

Things (iPhone).

The iPhone has many todo list managers of varying complexity and cost. They’re meant to keep your list organized and in your pocket, while offering Mac- or Web-based synchronization for more complicated maintenance. Remember the Milk is one of the simplest, and it’s free. OmniFocus is one of the most complex, and it’s (as of press time) $20. Things is $10, and (as you’d expect) it sits somewhere in-between, attempting robustness without getting too much in the way of your work.

This is a hard spot for a product to sit – and doubly so for a program meant to augment the actual process of working. What constitutes robust enough for a majority of users, such that they feel more empowered at no speed expense?

Things walks this fine line deftly, with a few foibles that are easy to tweak in successive versions.

Form.

The front screen shows two classification schemata: either what projects various items pertain to (although new items don’t need to pertain to any projects), or when they’re supposed to be completed.

You go into various projects and mark various items due “Today.” You can also schedule items, which move into Today on a preset date. “Today” has a specific connotation within Things: it’s all the things you mean to accomplish literally today.

The project view is visually differentiated from the task lists by making the checkboxes about twice larger on each side, and by putting each > to view the settings of an item in a blue circle.

Gray 3-D bars form the header and footer of every screen on Things, with icons in the lower bar and a title in the upper. In general, the cosmetics are quite similar to the conventions used by other Apple-made iPhone apps. This all contributes to familiarity, as well as perceived simplicity; after not much use, Things looks like it belongs on your phone.

An add button is located in the lower-left of every single view. Lists of todo items look much like lists of email or songs. A move button is located in each list, to classify project-related items by time or to shift from project to project. A star button, when pressed, allows you to mark items to file in “Today.” Lastly, a button exists in the shape of a luggage tag, which allows you to tag items.

Function.

Because of the prominently located button and simple, unambiguous interface, adding new todos is fast and rhythmic, making it an easy routine to follow. Focus is placed on the text box, so you can immediately begin typing. The top button has mechanisms to save and cancel, placed on opposite ends to prevent user error. And the default folder is selected as the one you’re navigated to at the time. If you choose to add items when located in the wrong folder, you can change this setting. (I usually navigate there ahead of time; this helps prevent error on my part.)

And most importantly, none of this is overlapped by the default iPhone keyboard.

Things preserves your past location when you restart the application, displaying the screen that you quit from. This could be disorienting when you don’t remember exactly what you last used, or if you want to routinely plot a route to get to the right place. There may be large groups of people who favor either this method or starting at the home screen each time, but there’s no setting to toggle between the two. (Which would be the default? This could be answered with user testing.)

Deleting items and projects works like deleting email in the iPhone’s native Mail application: you swipe across an item to reveal a red “Delete” button. Undeleting items is a little thornier. Once you quit Things, completed items are moved to the “Logbook.” In order to undelete an item, you have to go into the Logbook and move it to the folder or project you want. But that doesn’t set it as incomplete, so it’ll drop back into the Logbook the next time you quit:

So then you have to go back into the folder you sent the item to, and uncheck it like it was a normal todo item. And you have to do this before you quit Things again.

You also have to go through too many navigation steps to edit an item. From the list view of todo items, you have to tap the item to get to its settings. Then you have to hit the “Edit” button in the upper-right corner. Only then can you tap the label and edit its contents – in a separate screen. It would be faster and easier to tap the label in the todo item’s view, rather than to hit the “Edit” button. Then it would automatically pop up a cursor, keyboard, and “Done” button.

Preferences are set within the application, instead of in the Settings app where they should be.

Conclusions.

Things has been lauded by many critics and reviewers for its simplicity. It’s not as simple as a flat, bulleted list, but it manages its complexity very well. I have better praise: it does just enough. Its more advanced features are hidden, so that people can immediately begin using it and “graduate” to the more serious features.

And on a personal level, I never have to worry about tending my proverbial todo garden, but I still manage to integrate it into my workflow; and my eternally distracted, forgetful self benefits so tremendously from a place to keep things to do, to keep me on track.

Flickr's photostream

2009-09-09T00:00:00+00:00

Flickr’s photostream.

Flickr is a complex and powerful site for sharing images with your friends. For the sake of this review, I’m going to focus on the starting point most users: a person’s “photostream,” which shows their most recent uploads.

Form.

Most of Flickr’s navigation is confined to the top 150 pixels of the page.

White space is used to split the navigation into three areas.

This establishes a hierarchy for users, both architectural (stuff pertaining to my photostream is in the green box) and behavioral (the red box contains drop-down menus that expand when clicked on).

Most of Flickr’s design decisions appear to revolve around showcasing a user’s images as well as possible. The background is white, deliberately neutral for viewing photos. Caption information suffixes each image, with title, longer description, access rights, uploaded date, and a link to comment. Other than that, the pages are kept as clean as possible.

On the “medium-sized” view, 80 pixels of white space separate each image; and the sidebar (colored such a light gray that it requires effort to see on many displays) is kept about 100 pixels to the right of the widest image. This effectively and subtly forces users to focus on the content.

Photo-related navigation (a user’s sets, collections of sets, etc) is, by default, located on the right sidebar of the photostream. (One has the option to turn this off, but few do.)

Function.

When you click on the arrow of a primary navigation tab, it expands as a quasimodal, unintrusive menu. Focusing away from the menu preserves it, and clicking away from the menu contracts it.

The “You” is a link to your photostream and not a trigger to expand the menu. This risks confusing first-time users or causing errors when people click on an unintended target. On the other hand, it looks like a link, and could confuse people who expect the right behavior. Moreover, the target for opening a menu is comparatively tiny – the button itself is 15×15, and the 20×23 area of white space around it clicks to the corresponding link (“You”, etc).

Two links stand somewhat apart in the upper-right corner: “Slideshow” and “Share This”. One links to a separate page, and the other gives a quasimodal popup. Each link is appropriate to what they’re supposed to do, but the behavior is inconsistent. I might move the “Slideshow” link to a different place in the navigation.

Regardless, having “Share This” gets around the problems of access rights. You can share otherwise “private” photos to those not on Flickr, or to folks who you don’t want to show all your friends-only photos. Too few content aggregators focus on the thorny and complex issue of access rights. Many people want to keep their experiences private, or be selective concerning what to display and to whom. The only downside with Flickr is there are only two groups you can set for access: the arbitrary “friends” or “family.”

At a glance, the icon for a set looks very similar to the icon for a collection. People tend to skim pages, and these aren’t visually differentiated enough to work well.

Conclusions.

Flickr is a very well-designed site, tailored and tuned for its content and functions. Copying its features or styling would work atrociously for a site with any other purpose. That Flickr works so well despite that is a testament to its the detail and care. Only minor tweaks are needed to make the site more behaviorally consistent, and the photostream page is a good example of that.

The core feature – uploading images – is simple, but Flickr is an extremely complex site. You can add all manner of metadata to your images, and organize them with tags, sets, and collections. But this complexity gets out of the way of users who simply want to post a camera dump of yesterday’s party, or phone shots of today’s brunch. This caters to all experience levels.