Jason Sutter//blog

17 Aug 2011design

My main use of Tumblr is to collect and share things I find inspiring. More often than not, those things are images. Sometimes I’ll re-blog them. Most of the time I’ll “Like” the image from within the dashboard.

I rarely like something just to say “Hey, I noticed what you’re doing here. Keep it up!”.1 I’m creating bookmarks… I want to be able to find a given image at some un-determined time in the future.

Within Tumblr, clicking the “Liked xx posts” button in the side bar will take you to a view with a single infinite scrolling column. The presentation is nearly identical to the default view of new content. The only difference is that images are shown as thumbnails.

Dearest for Tumblr

I find it really hard to find anything in this view. Very few images fit on a single screen, there’s a lot of noise, and there isn’t an option to filter by type of post.

I wanted to have a go at making something with the Tumblr API that would ease the process of retrieving images in my ever increasing pool of likes.

Thanks to Sudocode’s OAuth library, I was able to quickly throw together2 a little app: Dearest.

The first thing I did was throw away all the text. Images on Tumblr rarely include any meaningful attribution. Even when they do, that’s rarely what I remember about them. I’m scanning for something based on what I recall it looking like.

Dearest for Tumblr

To ensure easy scanning, all the thumbnails are cropped, from the top left, to the same size (about 3:2). This keeps them in a nice tight consistent grid. It’s very easy to look at them left–to–right/top–to–bottom. For the vast majority of images, there’s enough data there to pick something out by color, shape, and/or content. If that isn’t the case (ex: a tall photo with the majority of the information at the bottom of the frame) a mouse–over will reveal the full image.

Finally, I added some simple keyboard shortcuts. Right arrow to view the next page, left to view the previous. Combined with the default browser behavior of space-bar to scroll, it’s very easy to view a large number of images quickly.

All and all I’d say it works really well. I’ve routinely been able to quickly locate things I liked months ago. …Just as I expected.

What I didn’t expect is that there is a much stronger sense of nostalgia when browsing this way. I think it’s because the infinite scroll Tumblr uses keeps everything in motion (you look while scrolling). Combine it with a layout where only one item is on each horizontal line and you never have a chance to get the sort of view needed to build a sense of continuity.

When the images are far more static (look, then scroll, then look) and presented with more context, you can begin to not only remember an image, but to remember when you liked that image. And when you liked the images around it. And so on and so on.

Which has me wondering about an interface that can seamlessly blend affirmation, retrieval, and reminiscing.

Maybe for version 2…

In the meantime, feel free to try Dearest out. It has some rough edges, but it won’t do anything to mess up your Tumblr account.

If you have any comments or suggestions, I’d love to hear them.


  1. Not that there’s anything wrong with affirmation. I love it on Twitter. It’s just not a big part of how I use Tumblr. 

  2. In the old days, we’d call this a beta. Some things that should work don’t. Like the back button in your browser. And it will act weird when it gets to (near?) the end of all your likes. 

Filed under: my projects  tumblr api 


blog comments powered by Disqus

About

Jason Sutter

This is the blog of Jason Sutter, a User Experience Designer located in beautiful Portland, Oregon.

Projects

Tumblr: Dearest
quickly browse your image favorites
Web Wireframe Stencil for Omnigraffle
mock up web applications

Good Stuff