I kind of agree with him, but his formulation makes my head hurt.

Apple’s design strategy is to work behind closed doors to build kick ass products that blow you away. They make design choices (like killing sub-par projects) that would make other companies cringe. By working behind closed doors, they are counting on their own design and vision instead of letting the market do the design. Sometimes, they succeed (iPhone) and sometimes they fail (AppleTV so far). When they get it right, they build stuff that is so desirable that people cannot believe their eyes.

The lean startups approach is to build the minimal thing that can possibly sell, get it out there, and then to iterate quickly. The lean startups philosophy says that no central planner can ever outsmart the market, so it’s dangerous to try to design behind closed doors. Instead of wasting time trying to build the perfect product, lean startups get it out there quickly and spend their time listening to the market and iterating.

Both approaches make sense. And it makes sense to ask what one approach might learn from the other. However, the middle ground between Apple’s approach of building the “most desirable product” and the lean startups approach of building a “minimal product” is not to build a “minimal desirable product.” That formulation doesn’t even make sense. So I should only somewhat kick ass? Or minimally kick ass? Could the iPhone have been “desirable” without animation? Probably. Would it have been as successful? Probably not.

Why is “minimal” important?

Building minimal products is important because product teams are notoriously bad at building good products.

Featuritis: Given more resources, a team will typically add more features instead of polishing the features they already have, on the theory that more features = more market share. “Hey! We have more time so let’s make our microwave play CDs. People like to listen to music while cooking, right?”

Listening to customers is hard: You must listen to your customers to understand what their problems are, but you absolutely cannot trust them to tell you how to design a solution for it. They’ll tell you that your product should automatically scan their inbox, and when you build exactly what they told you to build, they’ll hate it.

Killer features are counterintuitive: When we were working on Dreamweaver, we got some things really right and some things really wrong. Round trip HTML was really important. Layout Table view wasn’t popular, and we spent a lot of time on it. It’s really hard to distinguish between killer features and phantom killer features that look good on paper but don’t end up being killer features after all.

You may have the wrong market in mind: When doing design in a closed room, you have a specific market in mind. Meanwhile, your product idea may be best suited to a slightly different market. Spending months and months refining and adding to a product with the first market hypothesis in mind may actually put you behind the eight ball in pivoting to your actual market.

Minimal products means quicker iteration: This is an obvious statement, but this is one of the most important benefits of building a minimal product. Large products with lots of features are like battleships, and while there is a time and place for battleships, they are hard to steer. Smaller, more nimble products may outrun you.

Why is “minimal” dangerous?

Starting with a minimal product and iterating have a lot of advantages, but this approach also has a few disadvantages.

The MVP -> iterate process may not lead to joy: When you play with a well designed product, you are filled with a sense of joy. The whole mindset around minimal+iterate may lead to that sense of joy, but more likely than not, it leads to prioritizing function over design. Capability over joy.

Minimal products may not be a good test of the market: Sometimes, doing something minimal is the best way to dip your toe into a market. And sometimes, you may get a false negative because the thing you build “minimally” tells you that the market isn’t there.

You may end up cutting corners you wish you hadn’t Best summarized here.

Proper minimal design: Build half a product, not a half-assed product

This advice, of course, is from 37 Signals. It seems like just yesterday that these guys were the supposed gurus on building great products and now it’s other people who are the gurus. We should take everyone’s advice with a grain of salt, of course, but in this case, I think the 37 Signals guys have it right.

Focusing on design is not right for every lean startup. It really depends on the market you’re going after and the problem you’re trying to solve. But if you do need to focus on design, then I think it’s even more important to focus on the core essence of what you have and discard everything else. Be ruthless in cutting functionality to boil your product down to its core essence (no cut and paste in iPhone, right?) but then hone and polish and rethink the crap out what’s left until it elicits joy. And then follow the lean startup model to find customer fit.

Making a small product is hard (“I would have written less if I had more time”) but polishing a small product is easier than polishing a big product with a bunch of extraneous features. And when you get it right, you will have a thing of beauty.

We’re at the point where we need design help, and we need help with everything: branding / identity, usability / UX, CSS / HTML production, etc. As a side effect of looking for great designers, we’ve gotten an interesting look into the state of the design economy.

For UX and identity, we started by looking for the designers we really want to work with (mostly high end) and going down the list. These guys are busy! Every firm we’ve contacted is working at capacity, and if anything, they are looking to staff up in order to deal with the workload. Even though that makes our job harder, I like the fact that these guys are busy.

For CSS / HTML production, we went the opposite route. Because of the nature of our product, we will probably need to work with multiple designers of this type and we put out an open call for submissions on Craigslist. After posting last night (at around 9pm) I found my inbox filled with seventy responses. Some of them were terrible, but some of them were great.

It’s been a while since I’ve posted a Craigslist job listing, so I don’t have a good baseline. Is getting 70 responses overnight for a design gig typical? And what’s the best explanation for the disparity between how busy theUX and branding guys were vs. the HTML / CSS guys? Is it the difference between looking at high end firms vs. doing a craigslist ad? (probably). Or is it that these two design disciplines have different economics?

http://www.developmentarc.com/site/2009/10/flash-player-internals-101-recap-part-one/

I’ve actually done quite a bit of performance work in my life, but not with JavaScript, so I though I’d take some notes along the way.

Firebug is your friend

In my mind, there are really three ways to a significant dent in performance:

1. Find bad algorithms and replace them with fast ones
2. Find code that doesn’t actually have to be called and skip it.
3. Optimize the code that gets called most often

And you really can’t do any of the three without a profiler. You might think you know what the problem is, but you won’t know until you profile it. In my case, I started out thinking that I had event listeners hanging around that weren’t letting go of their events, but the profiler (in this case, Firebug) told me I was completely wrong.

To get started profiling in Firebug, go to the console tab, press the ‘profile’ button, do some stuff, and hit the ‘profile’ button again. That’s it.

You’ll then be presented with data that looks like this:

For my money, the two most important columns are ‘own time’ and ‘time’. ‘time’ is the total time spent in a function including any functions that are called by that function, and ‘own time’ is the same thing minus the time taken up by other functions.

Problem: $$(’.class’) can be SLOW!

I created a test where I did the same UI gesture 8 times, and this is what I discovered. Looking at ‘own time’ told me that most of my time was going to DOM traversal via the $$ function.

Looking at ‘time’ told me that the methods responsible for calling $$ were all central functions that were called in many places throughout my code, so it was worth making them as efficient as possible before figuring out whether there was a way to avoid calling some of them altogether.

Phase 1 — replacing traversals of the entire DOM tree (via $$) with smaller traversals

Roughly speaking, this corresponds to strategy (3).

Along the way, I tried all sorts of other optimizations, but none of them yielded much benefit. Now that I was reaching the point of diminishing returns, it was time to see if there were chunks of code I could safely skip.

Phase 2 — skipping handler functions when possible

I knew that there was almost certainly code I was running that could be skipped (strategy 2). Why?

I find that when writing UI code, it is often easier to use brute force to make sure that everything is working consistently. For example, if an AJAX call updates a certain part of the screen, it is often easier to blow away all event handlers from everything and re-add them where needed, rather than just patching up event handlers for the portion of the screen that was updating.

My rationale is that you can always fix this at the end. And well, it was now time to pay the piper.

My test case involved doing the same UI gesture 8 times. And most of the time was going to the following functions:


add_panel_handlers_if_needed(): 8 times
add_content_handlers(): 16 times
add_panel_handlers(): 8 times
actually_do_drag_cleanup(): 8 times
remove_content_handlers(): 24 times
fix_detail_handlers(): 8 times
handle_click(): 8 times
fix_toggle_rte_handlers(): 8 times
add_drag_handlers_and_start(): 8 times
add_insert_handlers(): 8 times


You can see that some functions are being called 8 times and some were being called 24 times. As it turns out, this was just due to programmer laziness. By adding a few checks, some of those redundant calls could be safely avoided.

The other thing that was causing extra work is that only certain interactions caused screen updates that needed event handlers to be reattached. By writing some code to check for that, I was able to avoid many of these calls altogether.

(P.S. there is some small part of my brain that tells me that instead of manually worrying about these event handlers, I should just bite the bullet and switch to JQuery. But I’m not there yet.)

Summary

So, what’s the moral? First off, doing $$(’.class’) is slow. Second, large performance boosts usually come from a combination of skipping code that doesn’t have to run and optimizing the code that does. This was no exception.

One more thing. I just have to say that Firebug is amazing. I expected it to have trouble giving useful timings in the face of inconsistent UI gestures and garbage collection, but it did the “right thing”, which many desktop profilers don’t manage to do. If I had one wish, I wish I could get it to bundle up calls from specified library files and allocate the time spent in them to the calling function.

Ok. Back to more optimizing.

Yes, the movie had faults, but it’s hard to imagine how those faults could have been corrected without major departures from the source material, which would have been devastating in its own way. Rock, meet hard place.

Now, for my take. I’ll try not to cover ground that has been beaten to death elsewhere. (mild spoilers ahead)

A mystery without clues

The narrative heart of the Watchmen is a detective story. It starts out with Rorschach literally playing detective, and the mystery unfolds from there. “Who killed the Comedian” turns into “Who is killing the Watchmen” to “What the f*ck is going on?” In making the jump from comic to movie, I feel that the Watchmen lost the driving force of the core detective story.

In the comic, the mystery was fueled by clues scattered throughout the comic: in pieces of paper lying on the street, in extra bonus material, and in tiny bits of dialogue.

Watching the movie, I was left with the feeling that the question was posed (”Who killed the Comedian?”) but the rest of the movie didn’t follow through in keeping the mystery alive. Where were the clues leading you to suspect one person or the other? Sure, there were scenes of Rorschach beating people up and asking questions (”what is Pyramid Transnational?”) but did that really cause anyone to be drawn into the mystery? Was anyone sitting in the movie theater trying to figure out “whodunit?”

Central premise, part 1 – costumed heroes

The central premise of the Watchmen is this: “What would the world be like if superheroes were real?” Part 1 of this premise has to do with costumed heroes. What kind of people dress up and beat people up at night?

As in the book, the movie portrays costumed heroes as, shall we say, less than perfect. Ok. They’re mostly psychopaths. In some cases, that was done brilliantly, as in Rorschach, who I thought was portrayed almost perfectly. In other cases, I wish there were a bit more gray instead of black and white. Yes, the Comedian is an A-hole, but what about showing us some heroics in a flashback scene to before hitting us with the fact that he is an A-hole?

Without the gray area, the costumed heroes seem like lawless thugs, and the Keene act seems like a really good idea, as opposed to a difficult moral question that would inspire actual political tension.

As for the over-the-top action, I am a fan. Sure, it makes absolutely no sense whatsoever that Adrian Veidt could crack a marble countertop with the Comedian’s head, but hey… it’s a movie.

Central premise, part 2 – actual superheroes

Part 2 of the “what if superheroes were real” question concerns actual superheroes with actual powers, aka Dr. Manhattan.

Watching Dr. Manhattan on a movie screen was a revelation to me. In the comic, for some reason, the idea of a near-omnipotent being becoming detached from humanity seemed, well, plausible but not believable, if that makes sense. I couldn’t get into Dr. Manhattan’s head because he’s not supposed to be all that human.

Meanwhile, seeing Dr. Manhattan on the movie screen, rotating CGI-generated widgets around in the air and talking in his “I can barely remember what it’s like to be human” voice made that omnipotence seem all that much more real to me. I could imagine what it would be like to live in a world that had a Dr. Manhattan in it, and it was kind of scary.

There were other aspects that didn’t work so well — how could anyone fall in love with something so alien? — but overall, it deepened my appreciation for this character.

Central premise, part 3 – political ramifications

The third part of the “what if superheroes were real” question has to do with politics and the world as a whole.

In the comic, America has morphed into something only barely recognizable. Tricky Dick is still in power running a quasi-totalitarian version of the US government (shades of Philip K Dick?) and there are lots of specific details about modern life that are just, well, different. Blimps and curry, anyone?

In the movie, the same elements are there, but it just doesn’t provide the same mindf*ck as the comic. The main reason for the discrepancy, I think, is that the comic was set in the 80s and published in the 80s, while the movie was set in the 80s and released over 20 years later.

If you were one of those folks who read the comic in the 80s, you found yourself tripping out over little ways in which the world of the Watchmen was different than your world, and it was interesting to think about how the people in that world dealt with contemporary issues like the possibility of nuclear holocaust.

In order to update the “feeling” of those comics to the world of today, imagine a comic about an alternate world in which Ronald Regan was still president for a sixth term when 9/11 happened, and how people in that world used a government controlled version of Microsoft Windows to spy on civilians.

Having those contemporary touchpoints (e.g., 9/11 and Microsoft Windows in my analogy) was essential, I think, to the feeling of vertigo you got in reading a comic about an alternate universe in which certain things were just different.

In watching a faithful movie 20+ years later, I found that the “real” cultural touchpoints (e.g., the birth of MTV, 3 1/4″ floppy disks, and nuclear armageddon) were almost as alien to me as the supposedly “trippy” weird stuff (e.g., Gunga Diner)

Perhaps this is just an unsolvable problem. I don’t think I would want to see a Watchmen movie set in 2009 unless Alan Moore was doing the rewrite. Still, the fact that the movie version of Watchmen was set in a foreign land (the 80s) meant that a lot of the political and cultural questions just didn’t feel relevant.

The ending

Meh. I was actually not a huge fan of the ending in the comic to begin with. It just didn’t feel plausible to me. The ending in the movie was in exactly the same spirit as the comic, and felt slightly more plausible, but not really. (Everlasting peace? Because these cities got destroyed? Really?) There are perhaps some slightly more interesting questions raised in the movie version of the ending (is fear of Dr. Manhattan akin to fear of God?) but only barely.

So the ending is fine. Meh.

In a nutshell

Like I said originally, this is probably the best movie that could have been made, given the circumstances. I’m a huge fan of the Watchmen (as if that weren’t already obvious) and it’s gratifying to see the story be told on a big screen with big production values. I loved the portrayal of Rorschach and the movie Dr. Manhattan was actually better for me than the one in the comic book. The movie didn’t stray too far from the comic book, and I think that was a good thing.

In my heart of hearts, when I go to a movie like this, I want it to blow my brains out. I want to leave the movie theater in a bit of a daze, my head full of a thousand thoughts, and my eyes not quite sure if the world around me has changed in some subtle way that I can’t quite perceive. The first Matrix movie did that for me. Mulholland Drive did that for me. This movie didn’t do that for me, but I wasn’t expecting it to. Like I said, I enjoyed it for what it is.

The issue for me is that the Watchmen was a moment in time, and that moment can’t ever be recaptured.

For me, reading the Watchmen was an intensely social experience, much like watching the first season of Twin Peaks or the first season of Lost. As each issue came out, friends would gather and pore over every frame, trying to find clues to what was “really going on.” As the pace of the issues slowed down toward the end, the wait was agonizing.

My memory of Watchmen has much more to do with how I felt as each issue came out and much less to do with the actual story.

For those youngsters (or late adopters) who read the Watchmen as a single graphic novel, the experience must have been very different. I’m sure that the latecomers can still appreciate it, but there is just no way that the experience of reading the whole thing from end to end is in any way similar to the experience of waiting a month between each issue. And the experience of watching the movie will be even less like my memory of the experience of reading the comic.

So that’s it in a nutshell. In fact, I’m so afraid of seeing this movie that I even considered not seeing it. We’ll see if I made the right choice.

The good

JavaScript performance. I’m curious to know how they accomplished this (JIT compiler?) but I’m happy it’s here. More and more, client-side JavaScript is becoming something that can do heavy lifting.

Tabbed browsing. The weird tab/title bar doesn’t appeal to me, but I can see its value. To me, the window needs to feel like it’s a container, and the tabs just screw that up for me. But the space savings is nice.

Better keyboard navigation. Greatly appreciated by those of us who fill out forms on the web. Which is to say everyone. turns out they had this in Safari 3.

Better hints for location bar. Much better! The hints now work kind of like spotlight. Type stuff into the URL bar, and Safari will do its best to find a matching URL from any source it can think of (history, bookmarks, etc). The best guess is shown first (like Spotlight) and the rest are categorized. Problems: The location bar doesn’t seem to handle page titles, which is a shame. Also, if you mistype a URL and get a 404 or other error, it still shows up in history and can end up as the “top hit”. Uh… whoops!

Embedded web fonts. It’s great that Safari is doing this. However, to be realistic (a) more browsers need to support this, and (b) someone needs to sort through all the legal issues having to do with font embedding.

The meh

CSS animations. Back in 97, I was one of the folks working on the first version of Dreamweaver. At that point in time, the Netscape folks were coming up with new tags all the time.

When we told the Netscape folks that we were going to add a timeline to Dreamweaver to take advantage of the <layer> tag, they were surprised and happy. You see, the inspiration for the <layer> tag was this question: “how can we have the browser do the things that the Shockwave plugin does?” Fast forward to 2009 and replace “layer” with “CSS animations” or “canvas” and replace “Shockwave” with “Flash”.

My opinion on all this? Meh. If you want to do everything that Flash does, use Flash. Or invent something radically new that blows HTML out of the water. Don’t bother bolting that stuff onto HTML/CSS.

In fact, if you’re going to bolt stuff onto CSS, focus on getting the basics of static presentation right. CSS layout is still incredibly difficult (way harder than tables were). You have to do hours of Google research just to get a usable two column layout.

Top Sites. The top sites UI feels overly glitzy to me, and for no good reason. The slightly curved appearance implies (to my eye) that I should be able to rotate my view to the left and the right to see more sites. Which you can’t do, as far as I can tell.

Bookmark Sidebar / Cover Flow. I like Cover Flow, but it’s getting to the point where I can’t tell the Apple apps apart. iTunes has a sidebar on the left, a list of stuff on the right, which can include a Cover Flow view and a list below. Same with the Finder. Same with the browser. Same with…

Maybe I’m just thinking about this too abstractly, but it bothers me that so many of the Apple apps are starting to feel the same as each other. Not so long ago, iTunes was different than the Finder, which was different than iPhoto. Now, you have cover flow in the Finder and with Quick Look, you can play the song right from there.

So I don’t know. I’m kind of torn. Consistency is nice, but too much consistency leads to every single thing looking exactly the same. It feels a little bit like MS Windows UI right around when XP came out. Tree views were pretty general, and a lot of applications fit into the pattern of “tree view on left, detail view on right”, so that’s what everyone did.

Maybe it will grow on me. Or maybe they’ll iron out the kinks. (single clicking on a bookmark in the sidebar doesn’t navigate you to the page. It shows you a “category” with a single bookmark in it. Double clicking on the bookmark in the sidebar lets you rename the bookmark. The only way to navigate to that bookmark, as far as I can tell, is to click on the bookmark, and then click on the image of the website in cover flow, or else double click on the bookmark in the bottom pane below cover flow. I mean… cover flow is pretty, but isn’t single clicking a bookmark more important?)

The WTF?

Color profile support. They claim to be the first only one to support this, but doesn’t Firefox already do this? Is the issue that it is turned off by default? Or does Safari handle colors in a significantly better way than Firefox?

As it turns out, Google docs honors https urls, even though it doesn’t force you to use them. I use Firefox for most of my day-to-day browsing, and by doing the following, it was easy for me to always use the https version of the urls.

1) View your browser history and remove all occurances of google docs.
2) Remove any bookmarks you may have that point to google docs.
3) Type “https://docs.google.com” into your URL bar to visit Google Docs securely.
4) Recreate any bookmarks you may have had to point to the https version of the URL.

Everyone uses browsers differently, but the way I get to Google Docs is to type cmd-L to get to the URL bar, and then type “doc” or something like that, at which point I use Firefox’s autocompletion to pick Google Docs. Now that the history has been purged of the non-https versions of the URLs, I always end up visiting the site through a secure protocol.

Why this matters

By going over https, all the data that moves back and forth between the browser and the Google server is encrypted. That means that the content of my documents, spreadsheets, etc., can’t be viewed by someone snooping on the wifi transmission, or anywhere else on the network.

Is this paranoid? Sure. Does this make Google Docs secure enough to store highly sensitive information? Probably not. But this trick only took five minutes to do, and now there is one less way for people to snoop on my sensitive information, so I consider that a win.

The toolkit is fairly complete now, so we’re sharing it with the world. You can use it to create your own mockups of iPhone apps.

All items in the file have been redrawn as vectors for easy editing. You can read more about it and download it at the post on Blogspark.

Screenshots and a long, rambling discussion about the design of one of the features can be found at Blog*spark.