tom haynes

Tech Demo

I’ve been doing some hardware prototyping with a Raspberry Pi and RFID reader. The goal is a simple music player with a low-tech interface. Here’s what I’ve got so far:

I have a short Python script that runs when the Pi boots up. Phidgets provides a library for the RFID reader, and I’m using pygame’s music library.

The audio quality out of the headphone jack is poor, so I need to figure out how to extract audio from the HDMI port instead.



Some recent inspiration. Check out more.


Back in 2012, some folks from Microsoft Design and Bassett Design released a short film called “Connecting” that worked to answer the question “What is interaction design?”. It was fantastic.

A few weeks ago they released a second, this time about interaction design and the maker movement. It’s just as good. Enjoy:

Here’s the site for the project: Connecting Series.

"The Spielberg Oner"

Tony Zhou’s “Every Frame a Painting” series is fantastic. Here’s his take on Steven Spielberg’s one-shot scenes:

Check out his Tumblr, too.


Such measuring tools, Rosen writes, allowed inventors to see if their incremental design changes led to the improvements-higher-quality parts, better performance, and less coal consumption-needed to build better engines.

Someone needs to teach Bill Gates how to use em dashes properly…

But seriously, read the annual letter from his foundation. Very smart.


I’ve been thinking about this off and on for a while now.

Often I’ll be working on the computer, reading a book, or cooking a meal when I realize that I need to send an email. (And I can’t just write a note to myself to do it. I know what I want to say right now and I’m ready to type it and — in most cases — send it. Some things are time-sensitive and can’t wait long on a sticky or in a drafts folder.)

So I open my email client and I see 12 new exciting messages. Well, maybe one or two are exciting. Something new from a close friend or something that looks to be time-sensitive. I look at them, maybe I reply. Some of them are spam or look boring and I quickly delete them. And so on. And then five minutes later I’ve dealt with the new stuff and am ready to focus on … wait, what was it again? Most of the time I remember but I still I feel silly that I wasted time and mental energy on something unnecessary.

Now, I may not need or want to send my coworker or friend something if I have new correspondence from them. I care about e-etiquette and I don’t like to be rude. Not being up-to-date on our conversation will also make our communication less effective (bad for work and bad for life). That means I can’t just train myself to not look at the new messages, or create a keystroke that jumps me to a Compose screen or window. I have to know if I have anything new from my recipient(s), or anything else that might be relevant.

My ideal mail client offers two options when you open it up: Send Mail or Check Mail.


Which do what you would expect them to do. Check Mail goes to the all-powerful, dashboard-style interface of today, while Send Mail gives this simple screen:


A basic send interface, but with a twist. There’s a simple list of “possibly related” messages that shows up when you add each recipient. Hopefully it’s empty which means you’re good to go. If there are messages there, you can hover over them and scan quickly to see if any are relevant. There’s obviously some “smartness” here since we all have multiple addresses, mailing lists, aliases, delegated accounts, etc. But false positives aren’t a big deal since we can just ignore them (much less to ignore than an entire inbox). And maybe we’ll even restrict what you can do from these messages: you’re already in compose mode, so it makes sense that you’d have to explicitly leave in order to jump over to read-and-reply mode (that is, these messages don’t have “Reply” links on them).

Just an idea.

Actual size, revisited

In 2010 (was it really that long ago?) I argued that shouldn’t complain when I try to make switch the zoom to “Actual Size” if it’s already 100%.

The other day I noticed that it doesn’t work this way anymore. Now there’s a checkmark next to the greyed-out “Actual Size” and the OS doesn’t beep at me when I hit ⌘0.

Actual size



I’m liking this animation from Instagram’s web interface.

(Cross-posted from this interface, one of my other blogs.)

Coming soon

This greyed out menu item — “Label (coming soon)” — is respectful to users. It’s almost an apology, something you don’t see in interfaces very often. This sort of communication between a program and a person isn’t really something I’ve seen before. Very interesting.


The Impossible Project Factory Tour

Wait, a company named “Impossible” bought the last of the Polaroid company’s supplies in 2008 and is now making and selling it?

I’m surprised I didn’t hear about this before, actually. Cool/crazy news.

"You spend a lot"


I think this could be phrased better. It always feels accusatory, which doesn’t make me receptive to their “advice” (read: “ad”).

Simple things

Stair Rover

The Stair Rover and accompanying video are pretty neat, but my favorite part is a comment on the related Core77 post:

Uncoordinated hipsters must be stoked, but it’s the simple things in life that bring the most joy. Just learn to ollie.

Koan-like, almost.

Avengers UI design


Jayse Hansen’s image dump of his UI work in The Avengers

I wish I could work on stuff like this. It’s crazy to see something as complicated as Iron Man’s HUD start as rough pencil sketches.



Getty just announced their new watermarking system which I think is fantastic. Great callouts and examples on the announcement site, too.



“Git for ages 4 and up” taught me about git and reminded me that using creative teaching tools can be extremely effective.

Highly recommended if you’ve used git but never known what “refs” were or what a “fast-forward” merge was.

His live demo goes off the rails a little but I also learned a lot from watching them trying to get back on track. All the little commands you run to make sure the system state matches your mental state.


I just read through the new Android Design guidelines and on the whole they’re thoughtful and well-designed.

But why have they renamed dropdowns “spinners”?


This is confusing me.

Fancy data structures

Joel Spolsky explains something I’ve always thought but never put into words:

Spreadsheets are not just tools for doing “what-if” analysis. They provide a specific data structure: a table. Most Excel users never enter a formula. They use Excel when they need a table. The gridlines are the most important feature of Excel, not recalc.

Word processors are not just tools for writing books, reports, and letters. They provide a specific data structure: lines of text which automatically wrap and split into pages.

PowerPoint is not just a tool for making boring meetings. It provides a specific data structure: an array of full-screen images.

Add in a pinch of real-time collaboration and you’ll see why Google Docs is so popular. I’ve used shared spreadsheets to collaboratively plan carpools, update sports rosters, track workouts, share menus, and much more, none of which has to do with math.

Spreadsheet software needs to embrace this and add functions to support it. We need an easy way of counting filled-in cells that isn’t the obscurely named COUNTIF(), and easy ways of applying background colors that are a function of cell contents (e.g. 1 is white, 100 is black, and everything else is a shade of grey between).

Vertical overlap

I’ve recently noticed a new design pattern appearing in mobile applications, and I haven’t seen anyone write about it yet. That said, I don’t really know it would be called so I can’t search to make sure. While all of these examples are slightly different, they all have one thing in common: overlapping content panes, used to convey hierarchy and provide a way of navigating it. For lack of a better name, I’ll call this the Stacked Hierarchy pattern.

The new Gmail and Facebook apps use a navigation that hides behind the main content, and can be summoned by a tap in the upper left — on a “Menu” button and row of lines icon, respectively — or by dragging the content out of the way using the menu bar.

Facebook’s also serves a place to list search terms (Gmail’s search is included in the main interface).

Facebook on iPhoneGmail on iPhone

Another place I’ve seen this stacked hierarchy is in Asana’s HTML5 mobile app, Here there are three levels of hierarchy, and the main menu is always visible, even if only slightly. There’s no dragging here (probably partly because it’s a web app living in Safari) but the cards do slide left and right, strengthening the sense of overlap.

Asana on iPhone

I also found some screenshots (on Behance) of a Russian application called Beeline that also appears to be using this strategy.

Beeline on iPhone

Update (9/20) Some readers told me about Twitter’s iPad app, which was apparently the first to implement the pattern (in both portrait and landscape views):

Twitter on iPad

At first this stacking pattern struck me as weird because all of these screens are more constrained horizontally than they are vertically, so a smallish sliver of vertical content is actually quite a lot of screen real estate. This doesn’t seem to be a problem, however. Facebook doesn’t need the entire screen width for navigation, and Asana’s task card looks fine with a little less space on the left.

Lastly, the fact that these interfaces use card-like is vaguely reminiscent of Palm OS, except Palm only uses cards to represent entire applications. The hint of off-screen (or “teaser”) content also reminds me of the Windows Phone 7 UI, except I don’t believe Windows uses it for hierarchy.

Are there other examples out there? Has anyone else written about this or given it a name? Let me know.

I’m interested in seeing how this pattern evolves over time.


Wow! Shoot analogue movies on regular 35mm film. A 36-exposure roll gets you 144 frames of lo-fi, wide-screen awesomeness. Check out the LomoKino or watch more mini-movies.

Watching writing

Watching Paul Graham write

Watch Paul Graham write his essay “Startups in 13 Sentences.”

Text that is yellow will eventually be deleted, making it easy to see his writing process. What starts out as colloquial (“kind of happy”) eventually turns into formal and concise (“semi-happy”). Very interesting.

Also read his post about the experiment.



New highway signs. Very clean, great colors.

La Presse

I love how this shows the fluid nature of La Presse across papier, web, and applications mobiles.

(via Brand New)


Speaker Deck

Speaker Deck, a better-designed SlideShare?

Button research

Button research

From a little while ago.

Hey Mint!

I’ve been using your iPhone app a lot recently, and for the most part it’s great. But there’s something that annoys me: the passcode screen. It doesn’t accept my passcode taps for a few seconds, which leads to me typing the last two digits of my passcode, then backspace twice, then the whole thing. Slow and annoying. Or, I just wait for a while, slowly building rage, and then type it in. You don’t want to enrage your users.

Now, I suspect that what you’re doing is showing a Default.png image (which loads immediately) that looks exactly the same as the functional passcode screen, and then showing the real interface. This is a neat trick that is usually supposed to make applications feel like they are loading faster. But in this case it’s making your app feel like it’s broken, because when I tap what looks like a button, nothing happens. So I have to wait for a while — probably longer than I have to, in fact, just to make sure — which actually makes logging in slower. Oh no.

So, here’s my advice for you: use a Default.png image that is similar to the real passcode screen, but not exactly the same. That way I know when it’s time to type in my digits. One idea would be to show an interface that looks disabled, with a greyed out input box and buttons. Alternatively, don’t even show the buttons, and instead show a witty message, like “Finding buttons” or “Please hold.” I’m sure you’ll think of something.

(Oh, and I love the recent pending transactions update, with the dashed lines. Pretty.)

1 2 3 15 16