Capn Design

Entries tagged interaction design

20100920metamirror.jpg MetaMirror: Another TV Companion

A more fully-featured (and vaporware) television companion concept that would be lovely. In theory, you are watching the show on your television and watching a simulcast on your iPad with modal dialogues over the video (e.g., to buy an album, see some trivia, etc.). I dreamt of this feature 7 years ago and I’d love to see it come to fruition.

Sports Highlights in Online Video

Posted June 22, 2010

With the NBA Final, Stanley Cup and World Cup all happening around the same time, I’ve been taking in a good number of recap, live-streamed and highlight videos. It turns out people are getting a lot smarter about how they surface interesting moments in a game.

NHL Highlights

I find it annoying that recaps for games I care about are sometimes only 30 seconds long. Sure, 30 seconds of a Cubs game is enough for most people, but I’d like at least a couple minutes. The NHL has solved that with their game highlight videos (pictured above). While there’s no commentary, they show you ever goal and a selection of exciting saves and hits. This is great for finding your favorite moment from a game or getting a sense of everything that happened. MLB’s At Bat app let’s you watch a condensed version of the game in 10 minutes, but I’d like a version with just the good parts.

ESPN World Cup Highlights

On Friday, we watched some of the US World Cup match on I don’t remember if these showed up during the game, but right as the game ended, I noticed all of the little tick marks on the timeline. Those were highlights for each of the teams. This is a great way to go back during the game and review some of the choice moments. I’d also love if they kept a marker of where you were when you left live time.

Have you seen any other original ways of displaying sports highlights online?

20100614qwerty.png iPad Frees Designers From the Tyranny of QWERTY

Looking at this and the Optimus Maximus keyboard, the iPad looks like a great deal.

The Hulu Player Heat Map

Posted May 13, 2010


Hulu is unveiling a brand new player (yes, it’s still in Flash) that has lots of awesome features, which you can read about at your leisure (here’s a cached blog post too). My favorite, by far, is the heat map.

On any full episode on the site with a sufficient volume of views, a heat map shows the relative popularity of every moment in that episode. Find hot and popular moments within long videos in no time at all.

Now I just want to see a longer version of this that covers a whole season or series.

[via Zach Klein]

20100428touch.gif Touch Gesture Reference Guide

A wonderful PDF that captures:

1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures


Video: The Multi-Layered iPad

Posted April 2, 2010

Remember that talk I gave at SVA last month? Me too! They’ve now posted the video online, so you can watch me talking if you don’t like reading or pictures. If you prefer those, you can check out the post and see the slides.

SVA has also posted all of the videos online. I recommend you watch the other two; they were great.

Thanks to Roland Lazarte for filming our talks. It looks great.

The Multi-Layered iPad

Posted March 11, 2010

As discussed, I gave a talk last night about The Tablet. Thanks very much to Liz for organizing the event. When I began planning my talk, I found it was easier to write it out as a blog post so I could find the narrative. I did just that.

What follows is the blog post and some of the imagery attached. At the very end, I included my slides from the talk, which have some additional imagery. (If you’re more of a visual person, skip to my slides on Slideshare.)

Up until now, we’ve done most of our reading using a single layer of data. This works well when you have abundant space, but breaks down when you try to work on a smaller device. As we pack more and more data into smaller spaces, we need to consider how this data is presented. The answer that provides the best compromise of accessibility and usability is to layer our data using modal dialogs. And now, a story.


photo by nirbhao

During college, I oftentimes bought my textbooks used, primarily because they were cheaper. The cheapest books were thoroughly marked up, with notes in the margins and important phrases highlighted. Sometimes, it was great to already have the important bits noted for me, but most of the time I just wanted to read. My wish was to be able to remove that layer of data only temporarily. Little did I know that 10 years later, that would be possible.

When data is presenting it a single layer, ancillary data exists separately from the primary text. When you’re studying, you write down the important parts in a notepad and create study tools with flash cards. When you’re watching a film, the credits appear at the end of the film and the deleted scenes are accessed in another menu entirely. When you’re reading a novel, contextual content is often in appendices and definitions are, well, in your dictionary.

The iPhone and other smartphones have improved the situation. Instead of having to make a note during a movie or keep your finger on the current page while flipping to the appendix, you can pull out your phone (or laptop or whatever) and look up the information. Of course, that is still two information sources in the same plane.

It’s also gotten a lot easier on the web. Sites like the New York Times offer the ability to double-click a word and get the definition. Flickr lets you annotate photos with text. The Definitive Guide to Django provides an online version of the book that lets you comment on each paragraph. As the ultimate example, Google lets you overlay a variety of information on top of a map.

Since we still do most of our reading on paper, we’ve been stuck with just a single layer of data. The best we’ve got are footnotes and notes in the margin. The introduction of the Kindle has provided a suitable replacement for reading devices. Having 1,000s of books in your hand is wonderful, but the Kindle only provides two layers of data: text and definitions. And without a touch screen, trying to get a definition is tough. You have to navigate to the word with the thumb nubbin before the definition pops up. It takes you out of the flow of reading a lot more than clicking a mouse or tapping the word.

How This Would Work

Bringing the multitouch interface to such a large surface area will allow us to bring far more layers of data to a document. Let’s come back to our studying example. My wife is taking an Anatomy & Physiology class and has a test coming up. She has out her text book, flash cards, a notebook and a reading guide. While going over her notes, she might want to refer back to the source text for some additional information. She has to find the right page, then find the right paragraph and look for context.

Now, let’s say Apple or some inventive fellow builds an iPad application meant for studying. You can download your textbook and, as you read, tap on a paragraph to open up a modal dialog for taking notes. Or maybe you just select some text and copy the text into your notebook. Next time you go through the book, you’ll see a little speech bubble, like the Django book example, alongside the text. When it’s time to study, click the ‘View notes’ button and you’ll see a version of just the text you’ve highlighted and your notes. Back to the book. If something you’re reading is confusing, selecting text could let you define or Google it. If that doesn’t pan out, you can add a public note. Your friends in the class would be notified and can answer your question. The answer will show up in context. Taking the social element further, being able to view your study partner’s notes overlaid on your page could answer questions you didn’t know you had.

Below are some design explorations I put together to illustrate the example.

These types of interaction could be carried over to a work of literature. If you’re in a book club, the reading questions could come be visible at relevant point. You could make notes in the margin that the rest of your book club could see. There’s also an opportunity for authors to provide something like a director’s commentary. When you find out SPOILER ALERT that Bella choses Edward over Jacob, Stephenie Meyer could put in a note explaining that it took her months to make this decision and it was only after talking to a bellhop at the Paris in Las Vegas that she made her decision. Or, possibly more interesting to some of you, how Malcolm Gladwell did his research about Hush Puppies.

As a final example, adding a touch interface to films, means one of my personal dreams can be fulfilled. When you want to know more about an actor, pause the movie and tap his face. Using iPhoto’s facial recognition software and a partnership with iMDB, the actor’s name and his last 5 films will pop up in a modal dialog. They’ll also be a link to any relevant extras that include that actor.

What We’ve Learned

There is nothing wrong with the old way of studying or reading, so long as you have all of your information around you. The challenge of bringing a comparable or better experience to the iPad is finding a way to improve portability without sacrificing accessibility.

Using modal dialogues and layering data lets you display ancillary content without taking away from the source text. Since that’s why people are coming to your content, that should have the focus. Providing the rest of the data should be seamless, but natural. Finding that balance will lead to an engaging (and hopefully unforgettable) experience.

Presentation Slides

Update (4/2/10): Video!

SVA has kindly posted a video of my talk online. Please enjoy, if you prefer moving pictures:

Blog Shortcuts: Navigate with your Keyboard

Posted March 3, 2010

A couple of weeks ago, Frank Chimero announced a refresh of a site he helped build called Thinking for a Living. The site is beautifully designed and includes a novel and intuitive navigation system. In place of using your mouse, you can control nearly every aspect of the site via the keyboard. Seeing this and using Gmail keyboard shortcuts for years made me wonder why we don’t have a standardized way to access a blog via keyboard shortcuts.

Inspired by these examples, I’ve begun a new project to develop a set of standard keyboard shortcuts for your blog. I’m calling it Blog Shortcuts (try not to be blown away by my creative naming). Before I get to my plans for developing and releasing it, you should give it a whirl. I’ll explain each of the shortcuts, but if you press ? right now, you’ll see all of the options available to you.

Available Shortcuts

I tried to pick out shortcuts that would apply to any blog, but this first set are tailored to my site. You can navigate up and down a list of entries, like The Big Picture and access sections of the site via particular keys (e.g., H for home). My favorite feature is the ability to load a particular tag by pressing g+t. Here is the full list:

  • Scroll to the next entry: n or j
  • Scroll to the previous entry: p or k
  • Load the newer entry on permalink: N or J
  • Load the older entry on permalink: P or K
  • Go to the homepage: H
  • Go to reviews: r
  • Go to archives: A
  • Go to about: a
  • Focus on search: s
  • Go to top: t
  • Show the tag input window: g+t
  • See all available shortcuts: ?

Development and Release

The project is currently up on Github, but is obviously in its infancy. I’ve outlined a set of to-dos in the README file that I hope to tackle over the coming weeks. If you want to get it running today, feel free to download the v0.1 release and play with the Javascript. If you would like to help out in any way — cleaning up my messy Javascript, offering opinions on shortcut keys — I’d love to collaborate.

Update (3/3/10): Found a bug in FF 3.5.x and wanted to add some basic styles, so we’re already up to v0.2. Progress!

Determining an Article's Length

Posted March 1, 2010


One of the tenets of the GTD philosophy is pushing anything you can’t do in a couple minutes into a queue. It’s one of the few pieces of advice that’s really stuck with me. As a result, I’ve grown accustomed to estimating an article’s length based on a quick glance.

Unfortunately, this is difficult to do without some scrolling. The easiest method is to look at the scroll bar to determine the length, but this is not reliable. There’s no way to know the number of comments or how long a sidebar might be. To the right, you can see an illustration of what I mean. The top screenshot shows the site as it is now. Below it are a version that hides comments and then sidebar items.

I have no answer, just a wish.

This is the point in the post where you would normally expect to find a wonderfully crafted solution, but I don’t have one. I’ve considered JS bookmarklets that would automagically show an indicator next to the scroll bar that marks the end of the article, but there would be a ton of edge cases. It also doesn’t handle page counts.

The best case scenario is the universal adoption of the HTML5 article element. And while I’m dreaming big, I’d love some metadata as parameters: character count, number of pages, etc. (and a coal-burning pizza oven, please).

In the end, I’ve outsourced my standardization of content and read articles via Instapaper on my iPhone. It standardizes article layout, making it easy to determine length (the scroll bar works perfectly here). If they started displaying word counts on the website, I’d squee. Thusly, I’m really looking forward to Marco’s iPad version of Instapaper. It’s going to solve all of my problems.

What's Not to Like?

Posted December 23, 2009

There a number of gestural ways for readers to indicate interest in content on the web. They all go by different names and representations, which makes it difficult to determine the right solution for your community. Below is an examination of the available options and, hopefully, answers to all of your burning questions.

Earlier this week, I was reading Gothamist and became engulfed in an article about EMTs letting a pregnant lady die. It’s an insane story and there are a ton of comments. There are also three “likes”. This disparity—one amongst many that exist on the internet—shows that there’s something broken with “liking” content.

When you find a piece of content that excites you, you probably want to do one of these things:

  • Respond to the article with a comment of your own
  • Bookmark the article for later
  • Share the article with someone else
  • Let the author know that you enjoyed the content

When a user “likes” a piece of content, they could be doing any of the final three actions, depending on the service. In the case of Gothamist, my instinct is that people “like” content because they want to tell the author and other readers that it was interesting and that they’d like to see more like it. Assuming this, why didn’t more people “like” this entry?

Before I answer that question, it’s worth noting that these gestural responses are very different from other reactions to content. Commenting, replying, sharing and even reblogging all involve content creation, which is a higher level of engagement and worthy of its own discussion. I also won’t really touch on flagging (e.g., spam, offensive content) or ratings.

Language Matters

Gothamist, as well as another small site called Facebook, use the word “like” as a way to note enjoyment, but it’s conflicting for a person to “like” an article that’s about a pregnant lady dying. Am I saying I like the article or that I like killing pregnant women and their fetuses? It’s clearly not the best phrase here, even though it works in most contexts.

There are certainly other options. Here are the ones I’ve seen the most and what they might imply. These are illustrative examples that cover many, but certainly not all, use cases (if a service has a word and a symbol, I just mentioned the word).

Type Services Definition
Like icon Facebook, Vimeo, Google Reader As discussed, it can either mean I liked reading the content or I agree with the content. Essentially, I feel happy after reading this. It’s more often used as encouragement than as a bookmark.
Favorite icon YouTube, TypePad, Posterous Similarly, this is something I enjoyed reading, but it tends to lean more towards a bookmark.
Recommend icon Movable Type, NYT I enjoyed reading this and I think you should enjoy reading it too.
[Up/Down] icon Reddit This is essentially recommend and not recommend.
[Star] icon Twitter, Google Reader This is mostly synonymous with “favorite”, but because there are no words it’s more open to interpretation.
This is good icon Vox I’ve only seen this on Vox, but I love it so I’m including it. This is back to a happy feeling and closest to “like”.
[Heart] icon Tumblr Very similar to “This is Good”.

The interpretations may give you some insight into what is appropriate for your context. In the case of the Gothamist article, “recommend” may be the best phrase since they use this data to calculate their popular article rankings. This isn’t everyone’s goal, though.

What To Do

There’s certainly no magic bullet, but how you implement this feature should depend on what you want to get out of the data. In the end, most publishers are looking for increased page views, but the path there relies on added value for the site’s community. If you’re keeping them engaged, they’ll keep coming back, which leads us to our final list. These are the benefits of using favorites:

  • A list of popular content: In addition to comments, page views, etc., you can use this to determine what content is most read on your site. This is an example of data that the publisher parses to add extra value (as opposed to the user).
  • A measure for the success of your articles: You can use this metric to refine the type of content on your site and gauge the success of your writers. This is another example of publisher-driven data.
  • A curation tool for users: People often just want a way to bookmark content, but it’s more often used as a way to represent who you are. There are millions of Facebook users whose identity is based solely on the items they “like” and share. This is an example where the community is making use of the data.

Really, all three use cases are valuable to publishers and users, just in different ways. The first and third are most valuable to sites that rely on user-generated content and the first two are more valuable for editorially-driven content. In the end, you should focus your efforts on what will improve the quality of and access to your content, because that’s why people visit your site.

Some Additional Notes

If your site is very upfront about its purpose, the language becomes less important. For sites where the homepage is a list of most popular content (e.g., Digg, Reddit), most users will click the button with the intention of promoting content to that list.

It’s also worth mentioning that sites often have two ways to provide gestural feedback, which can cause confusion and frustration. If you look at Twitter’s new retweet functionality, the inability to add your own comment essentially turns this into another way to favorite. It may show up in your user stream instead of a separate page, but it’s the same feature. Google Reader has two gestural responses: like and star (in addition to share and share with note). It seems like they’re just throwing the kitchen sink at the problem.

Finally, there’s the issue of site-specific jargon. Digg is the only site I can think of that does this with any success. Creating a new verb is not worth the overhead I would never recommend this unless your name is Kevin Rose.

I encourage you to comment with additional use cases and examples of usage in various services. I’d love to see as many examples as possible.

Recent Entries