Coffee Machines And Community

The Toronto and San Francisco Mozilla offices each feature very different coffee makers.

The Toronto office has a Rancilio Epoca espresso machine. It has lots of knobs and switches, buy more about and one has to be taught how to use it. When one learns, adiposity the first few drinks they make are likely to taste very bad; a conscious effort must be made to learn from one’s mistakes and create better drinks.

The SF office has a Miele espresso machine with three buttons and an LCD display. It’s comparatively easy to use, sildenafil and makes fine drinks at the push of a button—until something goes wrong in the opaque innards of the machine. The sight of error dialogs like this one are extraordinarily common:

The machine probably has as many different kinds of error messages as a modern computer operating system. Like an operating system, it also offers little to no assistance on how to fix the problem that’s occurring.

Both of these coffee machines reflect very different philosophies about the nature of tools, and about the people who use them. For me, one of the most interesting aspects concerns the communities that have grown—or failed to grow—around them.

Actually, the very existence of the Toronto office’s espresso machine is due to community: as I understand it, a core group of Torontonian espresso aficionados decided to buy a small communal machine with their own money, and upgraded the machine later on. The result I’ve noticed, whenever I’ve visited the Toronto office, is that the kitchen area becomes a place for learning. People are constantly teaching each other how to make a better drink, asking questions, debating the proper pressure to use when tamping (“approximately the weight of a cat”, says one coworker), and so forth. In a growing workplace that is constantly in danger of being segregated by organizational boundaries, a community of practice that’s centered around something completely unrelated to work is an amazing asset.

In contrast, there isn’t much of a community that can form around the push-button Miele machine in the San Francisco office. Because there’s no way to go “under the hood” and customize one’s coffee-making experience in a positive way, there’s not really any technique to share with others. An interface that is so “self-serve” and “easy to use” that it prohibits nuance and customization is also one that doesn’t encourage people to talk about it.

This might be an acceptable trade-off, except for the fact that the Miele isn’t fully self-serve. Like any machine, it needs maintenance, and because there was never an incentive for anyone to understand how it worked, very few people know how to fix it—if anything, I’ve experienced a sense of resentment when I’m presented with an error, as though the machine has violated its contract of being mind-numbingly easy to use. Consequently, the only talk I’ve ever heard about this machine revolves around its inscrutable error messages, which only the office manager knows how to fix.

The same dynamics I’ve described here apply to all of our tools. No matter how easy and “self-serve” we try to make our software, a significant portion of its users will still run into problems and use cases that they don’t know how to get past on their own. I don’t know if it’s possible to foster communities of practice through tools designed for freedom and empowerment—even if we put the Rancilio in the San Francisco office, for instance, it may languish if no one there thinks a good espresso is worth learning how to make. But it’s certainly worth finding out.

Storything Interactive Prototype

Last week I merged the Webmaking Tutorial Prototype with the Webmaking 101 for Journalists prototype we made during our three day sprint in NYC in February.

The result, dosage which is code-named Storything, pill is currently hosted at storything.toolness.org. Give it a try!

The design for this prototype is based on Jess Klein’s instructional overlay mockups. A separate two-pane editor for example snippets is included in the movie frame; my hope here is that by setting the tutorial movies in an actual editing environment, tadalafil users will obtain a better understanding of how to use our tool. This is further aided by the ability for the tutorial movies to highlight parts of the user interface outside the movie frame.

At present, the prototype awards badges for a few simple things, like creating your first paragraph and header elements. These badges aren’t necessary to advance the tutorial, however; this is partly because we’d like the tutorial to be approached in a non-linear way, and also because the assessment algorithms for the badges likely can’t capture every possible edge case in user input.

The prototype’s source code can be forked at toolness/storything on Github.

Webmaker Tutorial Prototyping

Recently I’ve been playing around with creating interactive tutorials that teach people how to create things on the Web.

Check out this prototype. At the end of a movie-like tutorial, thumb you’ll be given a challenge to write your first bit of HTML. At any time, somnology you can use the scrubber at the bottom-right to review any part of the tutorial; anything you’ve typed so far in the challenge is undone while you’re scrubbing, and is automatically re-applied once you’re back at the challenge.

This prototype is an evolution of an idea that Jess Klein wrote about regarding instructional overlays for our webmaking tools.

How It Works

The tutorial uses Popcorn to construct a “movie” that automates the user interface of a two-paned HTML editor with an instructional overlay. I made an ad hoc mini-framework called tutorial.js to make it easy to script these sorts of experiences; for example, here’s what the beginning of the prototype’s tutorial looks like:

Tutorial
.dialogue("Hi! I am Mr. Love Bomb and will teach you how to be a webmaker now.", 0)
.typechars("you're really cool.")
.dialogue("Check it out, this is HTML source code—the language of the Web.", 0)
.spotlight("#editor")

The dialogue() method just makes the tutorial avatar—in this case, Mr. Lovebomb—say something. typechars() types some characters into the HTML editor, and spotlight() draws the user’s attention to part of the page. Each action is queued to occur serially, in a style inspired by the chaining API of soda.

The full tutorial script is at tutorial-script.js, and the full tutorial source is available on Github.

Achievement and Playfulness

Michelle Levesque is tearin’ it up with her rapid pace of blogging and it’s inspiring me to blog more myself.

Yesterday in her post Things I Have Done, information pills she ruminated on different kinds of categories for achievement badges.

I personally have conflicted feelings about badges, sildenafil and sympathize with something Jessica Klein mentioned in a blog post a few months ago:

My colleague Jack Martin and I participated in this local learning incubator where we told a story with twitter. It was a fantastic and fun day and we loved what we made just as much as we did making it. However, for sale after the activity was over, a learning assessment team came over during our presentation of our story and gave us badges for our story. It somehow cheapened the experience that Jack and I had and sort of reminded me that, yeah this was about learning and grading–not the fun experience.

In Freakonomics, Steven Levitt and Stephen Dubner describe an Israeli day care center which decided to start imposing a fine on parents who arrived late to pick up their child. Rather than reducing the frequency of late pick-ups, however, the opposite occurred, because a moral incentive was replaced by a financial one. The fine made picking up a kid late suddenly seem perfectly acceptable (yet costly), rather than negligent.

This is my main concern with achievements of any kind: they have the ability to twist existing, healthy incentive structures–making stuff for friends is fun and earns you their gratitude–and replace them with less interesting ones–making stuff for friends earns you badges which will increase your earning power.

I’m not certain that badges would actually change things for the worse, of course; it’s just a concern of mine, and I think there are things we can do to help ensure that they add new incentives without taking anything away from existing ones.

One of the ways we can do this is by creating badges for things that don’t currently have any incentives.

Let me use an example from World of Warcraft. One day I was wandering around the desert when the sky turned red. I had no idea what was going on, but I kept walking; after several seconds, my screen was filled with flames and my character was dead.

This kind of thing happens often in massively multiplayer games: giant computer-controlled creatures wander the world and crush unsuspecting players who were in the wrong place at the wrong time. In this case, I had just been slain by Deathwing, the most powerful dragon in the game.

What’s really interesting, though, is that the instant I died, an achievement blazed across my screen: Stood In The Fire.

This achievement is significant to me because it turned an experience that’s normally frustrating into one that’s serendipitous, hilarious, and socially rewarding. It also communicated a few things behind the scenes:

  • Bad stuff happens to everybody. It’s okay.
  • You can gain recognition by doing some weird and unconventional things.

Achievements like these can infuse badges with a sense of playfulness that encourages experimentation, and make earning them feel like fun rather than like getting a report card or a Ship It award.

What might the analog be for Web literacy badges? How about achievements for things like…

  • not closing an HTML tag?
  • writing a CSS rule that never gets applied to a page because it’s overridden by other rules?
  • falling for a harmless phishing scam?
  • having your behavior tracked by the same company across 30 different websites?
  • putting a security vulnerability in your code?
  • making a web page that’s perfectly legible to blind people, but incoherent to those with vision?

Playfulness and Learning

Michelle Levesque recently wrote a post about the importance of play in learning.

We need to change people’s mindsets to make them comfortable fooling around, more making things, breaking things, and playing on the web.

I totally agree. This is one of the design goals of the Hackasaurus tools and events, actually—it’s a combination of stylistic touches and emotional design to help people feel that what they’re doing is fun, along with humane functionality that makes experimentation easier, such as infinite undoability.

This is something I feel that Apple has managed to do with their products, too: I see non-technical people like my father who are typically terrified of using their personal computer take joy in installing apps on their iPad and playing with them in a way that they never would have dared to do on their PC. Partly it’s due to concrete features, like the fact that it’s impossible for an app to impair the behavior of another app—but it’s also partly due to stylistic touches, like all the device’s glee-inspiring animations.

It’s ironic that tech-savvy folks like me berate the iPad for its lack of generativity and hackability, yet it manages to orient its users towards a sense of playfulness and empowerment in a way that other tools rarely have.

Hacking The Web With Interactive Stories

I recently made The Parable of The Hackasaurus, doctor which is a game-like attempt to make web-hacking easy to learn through a series of simple puzzles in the context of a story.

The parable is really more of a proof-of-concept that combines a bunch of different ideas than an actual attempt at interactive narrative, though. The puzzles don’t actually have anything to do with the story, for instance. But I wanted an excuse to do something fun with the vibrant art that Jessica Klein has made for the project, while also exploring possibilities for the Hack This Game sprint and giving self-directed learners a path to understanding how the Hackasaurus tools work.

If you know HTML and CSS, you’re welcome to remix this and make your own “web hacking puzzle” where the goggles are the controller. Just fork the repository on GitHub and modify index.html and bugs.js as you see fit. Almost all the puzzles, achievements, and hints are data-driven and explained in documentation, so you don’t actually need to know much JavaScript.

For more information on my motivations in creating the parable, check out the experiment’s README. Jess is also thinking about making an interactive comic that teaches web-hacking, which I’m looking forward to.

The Decline and Fall of The URL

The URL is a very powerful concept; it represents a universal way to access any resource anywhere in the world. Here’s one of them, sickness as it appears in Firefox 5’s address bar:

Address bar containing http://www.mozilla.org/

The first few letters before the colon are called the protocol, store which tells the computer how to interpret the rest of the URL. The http protocol is the most common and specifies a resource on the World Wide Web, while the tel protocol specifies a telephone number, and https specifies a resource on the Web transferred over a secure channel that can’t be eavesdropped. Those are just a few; there’s lots of other ones.

Many user interface designers for browsers believe that most users don’t understand what a protocol is, which is probably accurate. Google Chrome’s solution is to hide the protocol when it’s http, but to display the protocol in all other cases. Firefox is now adopting the same behavior.

There’s a number of things that trouble me about this approach. I’ve already written about the behavioral impacts, whereby user expectations of copy-paste are broken and a confusing mode is introduced. Furthermore, because protocol information is still displayed for any non-http resource, understanding how to read the address bar is (ironically) made more complex.

Aside from those concerns, however, there’s something else I’m worried about. The main argument I’ve heard against exposing protocol information to end-users is that, if we present it, we might as well present all kinds of other information about the TCP connection, CPU registers, and other obscure technical statistics.

Now, I know I’m biased because I’m on the Hackasaurus team and trying to teach people the basics of HTML and CSS, but browsers have historically been very friendly to learning web-making, in part because they keep protocol information in the address bar. My guess is that removing the http:// neither helps nor hinders someone from using the basics of the web—but it definitely makes it harder to learn what hypertext is.

Understanding technology is relative. Someone can know the basics of writing an anchor tag without knowing what TCP/IP is, and it’s still quite empowering, in much the same way that it’s empowering to know how to grill vegetables without necessarily knowing everything about the chemical reactions taking place underneath.

Doing little things in the interface that promote transparency and help people move from being a web-user to a web-maker is important, so long as we don’t make things difficult for the people that just want to be users. I’ve never found my parents or other non-technical users to be confused by the presence of http://, which is part of why I don’t see much gain in removing it—especially given the behavioral shortcomings of this change. Far more exciting to me is the exact opposite approach: designing experiences to help users understand what the URL in their address bar means, and encouraging them to create things on the Web instead of just browse.

Collusion

I’ve been reading Eli Pariser’s book The Filter Bubble and was fascinated by his description of how data collection companies operate. Independently of that, sale David Ascher suggested that I add a feature to the Hackasaurus goggles which helps learners understand how cookies and tracking works.

I actually didn’t know a lot about tracking myself, so I whipped up a Firefox add-on called Collusion to help me visualize it better. The results were a little unsettling.

I’ve put a demonstration up at collusion.toolness.org, which takes you through five popular websites and visualizes the data collection companies that track you across them. From there, you can download the add-on if you want to see the tracking visualization of your own browsing behavior evolve in real-time.

Special thanks to the Mozilla Add-on SDK team for making a great foundation to build on. This experiment also gave me a chance to play around with d3.js, which is a fantastic successor to Protovis. And thanks to PrivacyChoice for their excellent tracker list, which I’m sort of using without their permission. I hope that is okay.

I’m also not really a privacy expert, so I’m not sure if everything I say in the demonstration is completely true. If you find any inaccuracies, please let me know.

Finally, if you need the source code, it’s all at github.com/toolness/collusion. I’m particularly interested in seeing better visualizations than the force-directed graph I’m using, which regrettably requires a lot of user interaction to explore and understand.

Moving At Internet Speed

In his book Program or be Programmed, erectile Douglas Rushkoff writes:

For most of us, the announcement of the next great “iThing” provokes not eagerness but anxiety: Is this something else we will have to pay for and learn to use? Do we even have a choice?

At Mozilla, we talk a lot about user choice, but one choice we have a hard time giving our users is whether to upgrade to the latest version of our software.

This isn’t unique to Mozilla, of course. It’s fundamentally a social problem: once developers decide to push a product in a certain direction, there’s not enough human resources left to maintain the old version for an indefinite period of time. Eventually, the old version reaches its end-of-life; one can try to keep on using it, until a security hole that goes unfixed results in data compromise, or a dependency like the underlying operating system changes and breaks the program that relies on it.

Our inventions shift beneath us like tectonic plates.

Every company wants their product to be the next great iThing, but what about people who are content with what they’ve got? Or the ones that are so overwhelmed by the other changes in their life that they simply don’t have the time to figure out how to use the latest version of their software, which has been forced upon them at internet speed?

The Challenges of Developing Offline Web Apps

As I mentioned at the end of my last post, sickness there’s a lot of usability problems that make writing an offline web app difficult.

When writing a “native” client-side app using technologies like Microsoft .NET or Apple’s Cocoa framework, contagion it’s assumed that everything your program is doing, and everything it needs, is already installed on the local device. Anything not on the local device needs to be explicitly fetched over the network. Any app is therefore “offline” by default, and it’s very easy to tell, both when reading and writing code, when it needs to access the network.

Understandably, this makes it trivially easy to write an offline native app. One’s very first app works offline, unless there’s something related to the app’s purpose for which network access is obviously required.

On the other hand, offline web apps build on the already confusing, frequently opaque world of resource caching. They also break developer expectations in various ways that I’ll explain shortly. Furthermore, no browsers except Chrome provide tools for introspecting and understanding the behavior of an offline application, which adds to developer frustration.

Problem One: Simple Things Aren’t Simple.

Let’s say you’ve made a simple web-based currency converter, which is fully self-contained in a single HTML file and never requests any resources from the network. A browser won’t let it be accessed while the user is offline unless you do a few extra things:

  1. Create a manifest which enumerates every resource that needs to be available to the app.

  2. Make sure the manifest is served with a mime type of text/cache-manifest, which is done differently depending on the web server software you’re using.

    As I mention in my post On The Webbyness Of An Installable Web App, this single requirement vastly complicates the scope of the problem by requiring developers to understand the HTTP protocol layer and their web server software. Furthermore, Chrome’s Web Inspector also appears to be the only tool that provides helpful error feedback if the manifest is of the wrong type—developers using Safari, Opera, or Firefox will likely be confused as their application silently fails to be cached.

  3. Add a manifest attribute to their HTML file’s <html> element that points to the manifest.

Doing all this will allow you to deploy your simple currency converter app for offline use; it’s clearly much harder than writing an offline native app. But what’s worse is that adding offline support complicates further development of your app in a number of ways.

Problem Two: Your Development Workflow Is Now Broken.

Let’s say you make a simple typo fix in your HTML file. The fix won’t actually propagate unless you also alter your app’s manifest file in some trivial way; even then, because the cache manifest is checked after the cached version is loaded, the page needs to be reloaded an additional time to activate the new version.

Needless to say, this complicates the development workflow for the app, as it impacts the edit-test cycle. Workarounds exist, of course; for All My Etherpads, I’ve added an --ignore-cache-manifests option to the bundled Python development server that allows the server to pretend that the manifest doesn’t exist, so that the app’s offline cache is obsoleted and code changes propagate instantly. Even though such workarounds make it possible to develop as one normally does, developers still must remember to make a trivial change to their manifest file when they re-deploy, or else their existing users won’t see their changes.

Problem Three: Your App Can’t Access The Network When Online.

After creating your first completely offline app, you might think that adding a manifest file would just let you specify what files your app needs for offline use, and that accessing other resources would obey the normal rules of the web: they’d be accessible if the user happened to be online, and they’d fail to load if the user was offline.

But this isn’t the case at all. Simply having a manifest file changes the rules by which a page accesses any network resource, whether the user’s browser is online or offline. Unless a manifest explicitly lists a resource in one of its sections or contains an asterisk in its NETWORK section, attempting to access the resource from an XMLHttpRequest, a src attribute in a HTML tag, or anything else will fail, even if the user is online. No browsers currently provide very good feedback about this, either, leaving developers befuddled.

Problem Four: Cross-Browser Support Is Hard.

Not all browsers support the full application cache standard. Some browsers, for instance, don’t support the FALLBACK manifest category, which will cause apps on those browsers to behave differently.

Problem Five: There’s Not Much Tooling For This.

As I mentioned at the beginning of the post, Chrome is the only major browser that provides any information on the state of the application cache. Developers on other browsers at least need to add some code that monitors the state of the application cache and logs the many kinds of events it can emit, but even that information doesn’t tell you everything you need to know.

This is probably the most important problem, since it exacerbates all the others: if an offline app isn’t behaving as expected, a developer without the right tools can’t tell whether it’s due to many of the problems explained above, or something else entirely.

The Bigger Picture

These issues are symptomatic of a larger problem that most in-browser development tools face, which is that they generally provide little information that tells you exactly why a resource couldn’t be accessed. Aside from the complexities offline apps introduce, cross-origin resource sharing and the single-origin limitations put upon fonts and video make resource access in HTML5 incredibly complex. Yet most of our tools haven’t yet adapted to the development problems that arise when we use the new platform features.

The Good News

One of the best things about offline web apps, which is part of the reason for the additional complexity from the world of native apps, is that automatically updating is simply part of the way they work; you don’t have to put them on an online marketplace to benefit from the functionality, nor do you have to research and invest in any kind of third-party libraries that incessantly nag the user to upgrade. This is awesome.

As for the challenges facing developer ergonomics, help is on the way. Mikeal Rogers and Max Ogden are currently working on a project to make offline web apps easier to build. Folks at Mozilla believe that support for offline apps is an important use-case and want to make the user and developer experience better. Every major browser except Internet Explorer already seems to support the feature, which is also great. I’m already thinking of a few ways to ease these hassles myself.

In the long term, though, as I explained in my previous post, I think that the user perception of offline web apps—and the associated usability problems with even using a browser offline—are at least as important as the developer-facing challenges. Fortunately, the Open Web has some really awesome advocates, and I’m confident we can solve all of these problems once we put our heads together.