Back at the beginning of the year I had an idea called Babybook. It was the spawn of not being able to find a good digital baby book for my newborn son. At the time I thought it was a 15 year plan to cannibalize Facebook users. (fascinating if you ask me) but as time and life with a newborn went on the idea sat.

Facebook Timeline realized the idea. The future is going to be a very interesting place.

Here is a transcript of the conversation I had with a friend…..

FEBRUARY 1, 2011 11:13 AM

11:13:20 AM Chad Vavra: Facebook app called babybook. Literally a digital version of a baby book. First haircut, first dump, etc… but as children grow so does it. It becomes the timeline of your life, started by your parents and eventually finished by you

11:14:10 AM Chad Vavra: best part is that when you are 13 you get the option to export everything and come over to the Babybook website

11:14:16 AM SH: i like it. i would extend it to

11:14:22 AM SH: oh, i was going to say, a full web site

11:14:23 AM Chad Vavra: it canabalizes facebook subscriptions

11:14:36 AM Chad Vavra: it’s a 15 year plan to overthrow facebook

11:14:44 AM SH: i was thinking a full site, but one that integrates really well into fb

11:14:47 AM SH: that’s very interesting

11:14:56 AM Chad Vavra: yeah. that is basically what it is

11:15:13 AM SH: and it would be great to tie into all the custom publishing where you can print your book when it’s “don” or at any point

11:15:21 AM Chad Vavra: yep.

11:15:26 AM Chad Vavra: story of your life

11:15:30 AM Chad Vavra: vol. 1

11:15:32 AM Chad Vavra: vol. 2

11:15:33 AM Chad Vavra: etc

11:16:00 AM SH: not sure about whether kids would want to take over their book. i see this as mainly towards the parents. thoughts?

11:16:33 AM Chad Vavra: I think the idea is that the book kind of takes over them

11:16:44 AM Chad Vavra: they just enter what they enter

11:16:48 AM Chad Vavra: the book aggregates it

11:17:03 AM Chad Vavra: they don’t really take over anything… it just is there

11:17:29 AM SH: so what’s getting the kids to really take part in it? (just playing a friendly devil’s advocate here)

11:17:37 AM SH: from the parent’s point of view, i think it’s gold

11:18:06 AM Chad Vavra: so what happens is that until the kids are 13 they technically can’t have a facebook account

11:18:40 AM Chad Vavra: so parents start a facebook acount for their infants and post updates to it

11:18:58 AM Chad Vavra: they sign up for the app and the app aggregates those posts into events

11:19:11 AM SH: i like that

11:19:14 AM Chad Vavra: it can query for input, but mostly it’s invisible

11:19:28 AM SH: you’d have to be very tight on security

11:19:31 AM Chad Vavra: eventually the kid becomes 13 and takes over the account

11:19:46 AM Chad Vavra: and just naturally the book evolves

11:19:55 AM Chad Vavra: the kids post updates and the book listens

11:20:22 AM Chad Vavra: the better the visualizations of events, the more people will participate

11:20:24 AM SH: okay, i see now, as you said, the kid doesn’t take over anything. the app just keeps grabbing content

11:20:32 AM Chad Vavra: yeah

11:21:11 AM Chad Vavra: and if the kid opens their own account later on, the book sees that posts stopped on the one account and it sends out a query allowing a new account to be linked to it

11:21:30 AM Chad Vavra: I wonder though, what if a person wants to delete their account

11:21:50 AM Chad Vavra: can the book keep the info it stored or does it have to delete that too

11:22:23 AM SH: hmm, i would say the data would always be stored, or backed up, one way or another

11:22:39 AM SH: i don’t know if there are any legalities on cancelled services

11:22:58 AM Chad Vavra: yeah. that can be figured out later though

11:23:03 AM SH: right.

I recently spent the weekend with some friends whose teenage daughter has lost all but a shred of her vision. It is very likely that eventually she will be totally blind. I was amazed to see how well she adapts to a sighted world but still couldn’t help but reflect on the designs I create and wonder whether she can experience them fully.

Around the time of the last internet boom, bubble and burst the discussions I remember weren’t about web standards, but web accessibility. Flash was extremely popular but because it was a plugin that didn’t expose it’s code structure to the browser, screen readers for the blind couldn’t make any sense of it. As far as they were concerned a Flash object was no different than a single static image.

Today I am shocked to find that many of the younger designers I talk to aren’t aware that the ‘alt’ tag assigned to images in HTML was created so that screen readers could describe the image to vision impaired users. It seems to be thought of as another place to add marketing. A branded opportunity for when the mouse hovers an image.

Now in the wake of CSS3, HTML5, and closer browser alignment to standards the notion of ‘responsive web design’ seems to be the discussion of choice. I’ve even blogged about it. Responsive design is a great thing as it brings accessibility issues to the forefront. Specifically the accessibility of smaller screens, but combined with the latest coding practices the environment for visually or auditory impaired users is now at it’s greatest.

As interaction designers, coders, and creatives we need to be aware of everyone who may want to use our designs. We need to consider smaller screens, the elderly who rely on hearing devices, and a blind teenager who one day wants to be a writer and ask ourselves, is this design good enough for them? Am I being a dick?

Don’t be a dick.

Metaphors are everywhere in interaction design. The desktop, like a desk, is where you keep all your frequently accessed stuff. Buttons, like the physical buttons on our remote controls and lesser remembered devices. (car radios, appliances, etc) Folders that hold files and so on and so forth.

These are acceptable metaphors of physical objects for digital replacements. They use previously learned interaction patterns to improve our interaction with digital technology. (in the case of the examples, paths and directories)

Then there are things like the page-curl. You’ve all seen it. Maybe in a eBook reader or on a web site. It’s that 3D looking dog-eared corner suggesting another layer of content below. The metaphor is that of a book. A linear flow through pages, bound by a spine….. and it’s bullshit. The page-curl is nothing more than a button and it does nothing for our improved interaction with technology today. It is a metaphor gone bad for being too late to the party.

So use metaphors to improve interaction, just don’t abuse them for the sake of being ‘cute’.

Calm down internets. I know that “Storytelling” might be almost as cliched as the page-curl but I can’t think of a better way to name the concept, so bear with me. Besides, Principle 5 just doesn’t work as well without it, and I’m all about expectations. [read: Principle 1]

In the traditional sense stories include a setting, characters, dramatic tension, and resolution. That is fine if you’re writing a novel, but in the case of interaction design it doesn’t have to be so structured. Storytelling in interaction design is all about Principle 1, patterns and users expectations.

Think of it from the users perspective. Maybe I need to find the closest post-office so I search “post office locator”. As a designer you need to meet my expectation so tell the story that solves my problem.

Pretty easy to design it, right?

Next up, Principle 5; Metaphors (don’t abuse them)

Sometimes the projects we are asked to design seem so overwhelming that there is no logical place to start. In some cases they probably are so big that there isn’t any logic involved. Chalk it up to why they hired someone else to do it.

When you have to start but don’t know how, pick two things.

To steal a metaphor from E. L. Doctorow “[Interaction design] is like driving a car at night. You can only see as far as the headlights, but you can still get to your destination.”

When a design seems too big, establish a relationship between two things, let’s say a page and a button, and design their interaction. Once that is done create a new relationship with something else and design the next interaction. Don’t worry about the rest of everything that has to exist and how it’s all going to work together. Just start with two things and grow from there.

You will be surprised how well the overwhelming thing comes together. This method benefits from our brain’s natural ability to spatially model the world. It’s really hard to completely waste your time doing this.

*Interesting note. Pixar has been known to write stories this way. Start with two characters’ relationship, add another character and tell that story, add another, and so on and so forth.

This concludes the first 3 interaction design principles that I have come to use in my career.
#1. Patterns and Prediction
#2. Trick People
#3. Pick Two Things

To be continued…

Technology isn’t perfect. A lot of times it’s slow, annoyingly slow and equally annoying are impatient users. They quickly become distracted and press the back button or switch to some other task. Sometimes there are technical ways to make things faster, like reducing images on a page or reducing the number of items returned by a search. Other times it’s not enough to just reduce and that is when the principle of tricking people comes into play.

Remember that people are easily distracted and use it to your favor. Remember that first principle: Patterns and Prediction. To apply that here, predict when users expect instant results and manage them with distractions. If you know that something is going to take more than half a second to react, design a trick. This can be as simple as a unique click-state on a button, like a drop-down closing in stages or as complex as a mini-game to play while content loads in the background.

This post marks the first in an ongoing series of interaction design principles. The intent of the series is to pull back the blinds on interaction design, remove the shrouds of secrecy behind the secret art of design and hopefully shed some light on the process I’ve learned in the past 10 years.

Jason Toth makes the argument that ‘simplification’ has “negative connotation and misapplication of exercises associated with simplification often put UX designers in a defensive position with clients and content writers.” An argument with which I don’t disagree. Jason goes on to suggest methods for curating (typically by pairing) content to achieve the same, but universally less aggressive outcome.

My recent work with responsive web design has led me down the same path of thought. Currently responsive design is mostly focused on resolution of multiple devices and managing the display of content as the resolution changes. I propose that responsive design can add to what Jason is proposing by taking a larger look at the users purpose than device resolution.

For instance, if a user is known to spend an low amount of time on the site show them headlines and a single image to maximize their uptake of content. Users who are known to bail on the homepage should get a big beautiful image sucking them in. Users only watch video, give them a grid of video instead.

“Responsive Curation” is the future of keeping simple stupid.