“Agile” software development is something I have used in limited forms for a number years. Agile has always made sense to me: it puts control in the hands of developers, reduces conflicts in an organization, and is eminently practical for small organizations.

Now that I’m at Samasource.org, I’ve had a chance to implement an Agile development process for an organization that really needs it (we’re small, growing fast, and with many competing priorities.)

Below are some brief thoughts on Agile, but the real point of this post is to explain how we’re using Basecamp to conduct an Agile development process. Enjoy!

Read the rest of this entry »

A few months ago, I helped my friend Erik Walker get his company’s portfolio site up and running: Binzen&Walker Photography. Binzen&Walker create beautiful panoramic photographs that, in contrast to mechanized techniques (e.g. GigaPan) are hand-shot and hand-stitched for artistic effect.

It’s a basic and relatively clean Wordpress site, based on an existing theme. Aside from a bunch of CSS changes, my contribution was mashing up a couple Wordpress plugins to create a nice interface for exploring examples of their panoramic photographs. Showcasing such huge images online is difficult because of very limited resolution of computer displays. In real life, a print of one of Binzen&Walker’s prints could easily cover twelve feet of a gallery wall. Online, a zooming and panning interface was needed.

To get this working, I did a simple combination of two existing plugins: Flexible Lightbox and YD-Zoomify. I’m calling it Flexible Zoomify. You can see a screenshot below or click on the images in this portfolio gallery to try it out.

I’ve been puzzled for some time as to why Prototype doesn’t allow us to set and get values from checkboxes and radio buttons. I finally needed this functionality at work and, with none of this obvious bit of functionality in the 1.6.1 release, I wrote my own extensions.

You can find them on GitHub. I added a bit of example code that you can check out here, too.

Here’s a little sketch I made using Processing. It’s based on a standard flocking program that Benjamin and Mary F. were playing around with; I added a second flock, some randomness in their coloring, and the concept of “weight.” Heavier boids move slower, turn slower, beat their wings slower and are more pudgy in shape. I also gave them all trails, using a simple transparent rectangle placed between frames (a very computationally cheap way to do this.)

Below is a screenshot of the Processing sketch. Click to load the applet in your browser window and see it in motion. That link also has the source code for the sketch.

Note: Apologies for those who got spam in their RSS readers from this entry. After some Wordpress upgrades and removal of some suspicious files and users, I’m hoping that I have the spam kicked.

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 »

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 »