Re: My last post on the benefits of mocking up UIs, here is a great example of a low-fi mockup actually being used as the final marketing for a product:

The major features of Google Reader are covered in about a minute, all with cute pasted paper cutouts and without once saying “RSS.” Obviously, this is a a polished video, but you could imagine that some version of these paper cutouts could have been used very early on to validate the concept of Google Reader with test users.

Workshop Title
Fake It Till You Make It: Rapid Prototyping Using Flash

Presenter
Philip Fierlinger (Xero)

This was one of the most fun presentations of the conference, mostly it addressed a task that I want to like, but find to be a pain: mocking up interfaces. Usually I just do this on paper, and don’t iterate much. Fierlinger showed off how he could effortlessly and visually throw together UIs in Flash. He’d do dozens of iterations a day, sometimes in the middle of user testing. It struck me as incredibly agile.

Interestingly, Fierlinger was barely using Flash at all: He was basically using it as a drawing tool with a timeline. The sweet spot he settled on between interaction and static mockups are what he calls “screenflows.” These are scripted interactions where the viewer is guided through the interaction. These are useful for testing the expectations of users, as requirements documentation for engineering, and as the first pass of a testing plan.

Click through to see the full notes on how he came to this process and all the places in the development cycles that it pays dividends.

Read the rest of this entry »

This post isn’t really a set of notes. I was working during the keynotes with only one ear open to the talks. My ears perked up now and again during Tim O’Reilly’s talks. Here are little decontextualized nuggets that caught my attention:

• Tim uses the term “information shadows,” to refer to the unique identifiers and metadata around things in the world. The virtual side of Bruce Sterling’s “splimes.”
• Owning a namespace (@nagutron) is super powerful. Interesting that this convention actually came from the users. Contrast to the long facebook profile URL with id string; people don’t really feel like they own those.
• Clever bit of data harvesting: Power spikes when appliances start up have signatures that can actually identify make and model (AMEE, power monitoring startup in UK, discovered this.)
• “Antigenic cartography” is the term for 2d and 3d visualizations of genetic traits of related organisms. Used for flu virus mutation drift tracking.
• We are beginning to develop a “planetary skin” of sensor data. Tracking every bit of the planet’s health and human behavior. It’s still low-res, but just the beginning. Web 2.0 + World = “Web Squared”
• The Power of Less – Moore’s Law applied to world problems. Change the mindset to exponentially increasing efficiency.
• Gov 2.0 Summit

Workshop Title
Even Faster Websites

Presenter
Steve Souders (Google)

This was the third year in a row that Souders has presented his findings at Web 2.0. Here are my posts from year 1 and year 2. As usual, Souders has been hard at work running experiments on the performance of every part of the web browser, from initiating HTTP requests to rendering CSS. His central nugget of wisdom is that the vast majority of a user’s perceived wait time can be attributed to the frontend. This was an unconventional idea when he debuted it several years ago, but it’s common knowledge now and has only become more true over time. We frontend engineers are writing richer and richer browser-side code, nowadays.

However, my impression of this particular talk was that much of today’s research into frontend optimization is achieving diminishing returns. Instructables benefited greatly from Souders’ first talk, back in 2007, but the CSS optimizations introduced in this talk would shave very little off a user’s wait time. I was reminded, however, that I should install YSlow, which is an open-source plugin that will automatically identify performance bottlenecks on Instructables. I’m pretty sure there is plenty low-hanging fruit that we haven’t harvested, performance-wise.

Practicality aside, Souder’s talk was very interesting. The fact that CSS rules are parsed right-to-left was an eye-opener. I’m not going to go back and optimize all Instructables’ CSS, but this one nugget will allow me to avoid writing any egregiously slow selectors in the future.

You can find full notes and a link to the slides after the jump.

Read the rest of this entry »

Time lapse taken out of my window with a new webcam (I got it for an Alchemy project) and Gawker, out my office window. The camera autofocus freaks out now and again, but image quality is otherwise quite good.

Workshop Title
Designing Social Websites

Presenter
Christina Wodtke (Boxes and Arrows)

It’s true. I attended two workshops pretty much on the same topic. The information presented in each was quite different, though, so it was good to have absorbed both.

Instructables has implemented a hodge-podge of social features, many of which have increased user engagement. But it’s hard to know how to move forward: How do we tie these together? What’s the full set of user behaviors we’re ultimately aiming to support?

The prior workshop (my last post) went into detail on a comprehensive set of social software design patterns. What problems can be addressed, what behaviors encouraged, and how? Christina Wodtke’s talk delved deeper into the theory of social software. What is the case for doing it in the first place?

In this workshop, Instructables was used as a case study at several points in small groups and by the whole room. I gleaned a lot of insight from these conversations on why social features would improve Instructables, and how. More importantly, I’m recognizing now that a number of buzz-worthy features won’t actually benefit us much.

Detailed notes, links, images, and the full slide deck can be found after the jump.

Note: By the way, I’ve noticed upon reading over my notes that it can be unclear what parts are the speaker’s thoughts and which are my comments. Sometimes my interjections are bolded, sometimes they are in brackets, and sometimes neither. I hope it can be inferred from context, but I apologize for any confusion.

Read the rest of this entry »

Workshop Title
Designing Social Interfaces: Principles, Best Practices and Patterns for Designing the Social Web

Presenters
Erin Malone (Tangible UX) and Christian Crumlish (Yahoo!)

This was the first workshop I attended this week, on Tuesday. Malone and Crumlish have done a ton of work assembling a comprehensive set of design patterns that can be applied to social software. In their workshop, they ran through a number of scenarios, each showing how various patterns might be applied.

What’s interesting here is that each pattern codifies not only the justification for its application, but also the pitfalls that can be associated with each. One example of many: Letting users form an identity through your software forces them behave as there is now something at stake. Give them a reputation system that incentivizes too much competition, however, and your networks will break down.

Detailed notes, links, images, and the full slide deck can be found after the jump.

Note: I mention Christina Wodtke’s presentation a number of times in my notes. This was a workshop on the same topic that I attended later that day. Those notes will come my next post.

Read the rest of this entry »

This is a first post of notes from this year’s Web 2.0 conference. I only attended a handful of sessions, but I cherry-picked sessions relevant to my work at Instructables and a couple ones of personal interest.

Session Title
Order from Chaos: The Future of the Web

Presenter
Aza Raskin

Raskin‘s talk was on — well, not quite the future of the web — but rather the future of web clients. He had a slew of interesting ideas and demos of experiments that Mozilla Labs is doing to update the things our software agents do for us. He also had many thoughts on the nature of browser competition.

I’ve edited my notes down substantially. You can read the key points after the jump.

Read the rest of this entry »