Ways to communicate with me that are more effective than leaving a voicemail

6 May 2014
11:15 PM

  • text message
  • email
  • postal mail
  • Twitter direct message
  • pager
  • skywriting
  • interpretive dance
  • smoke signals
  • drunk carrier pigeon
  • singing telegram
  • sports arena jumbotron
  • tell Suzy to tell Rachel to tell Bill to tell me
  • message in a bottle thrown into ocean
  • give me a telling look
  • send a taxi to pick me up and drive me to the coast where a crewman aboard a ship signals using flag semaphore
  • Western Union
  • telepathy

Expanded from the condensed version. Hat-tip to @ravi and @av.

Arrangement in Hefeweizen No. 1

24 February 2013
2:49 PM

Yesterday afternoon I was out with some friends, having a beer at Jupiter, a restaurant in Downtown Berkeley. As I took a drink, I saw a beautiful colorscape at the bottom of my glass.

Spash of color in a beer glass, #1

I looked up and realized the color was a reflection of a billboard on the side of the building, advertising the very hefeweizen I was drinking.

Jupiter Hefeweizen billboard

I tilted my glass and tried to get a better shot.

Spash of color in a beer glass, #2

This one is almost unrecognizable as a glass of beer, but I love the colors.

The most dangerous part of flying

23 January 2013
9:05 AM

1 Comment

Pilots will tell you that the most dangerous part of flying is takeoff and landing. This is correct, though it’s most dangerous for people who aren’t busy flying the plane. Shortly before takeoff the doors to the aircraft are closed. From this point on the FAA requires passengers to shut off their electronic devices—the primary means of entertaining oneself in the 21st century—until the aircraft has reached its cruising altitude. Your Kindle off, there’s nothing to read. Your iPad off, there are no angry birds to avenge. Your eyes drift towards the seatback pocket, the only remaining source of entertainment until 10,000 feet. Safety card? Boring. Motion sickness bag? Gross. Oh, hello there, SkyMall.

There and back again

24 June 2012
1:37 PM

1 Comment

This is the story of how I stole my bike.

In 2008 I moved to Berkeley, California to start grad school. There are a lot of things that are nice about Berkeley, but driving is not one of them. The city makes having a car painful. Finding parking downtown is a nightmare and enforcement officers can spot an expired meter 2 miles away. Comparatively, biking is glorious. There are racks for parking everywhere. The city has designated certain streets Bicycle Boulevards, which run parallel to major streets, just a block removed from heavy traffic.

Even though I was on a student budget, I knew I wanted a bike to get around. Eventually I found my new steed, a Kona Dew Deluxe. After tax it set me back $706.86, which is a lot of money but I justified the price to myself because my last bike lasted almost 10 years.

For 36 days, life was good.

3.0 kilotweets

27 February 2012
9:17 AM

In 2007 I created my Twitter account in an Internet cafe in Santiago, Chile because I read on some blog that it was a big deal at SXSW. I spent some time deliberating between the username @ryangreenberg (which I use on a number of other services) and @greenberg. Eventually I decided on @greenberg because it seemed like being short was a big deal on Twitter. Just a few minutes ago I posted my 3,000th tweet on Twitter. Four years and a few thousand tweets later, not only am I still tweeting, but along the way I somehow ended up working for the company. What a ride.

Profile card on Twitter at 3,000 tweets

Here’s a Harper’s Index-style look at my first 3,000 tweets:

  • Number of tweets I sent between July 10, 2007 and February 27, 2012: 3,000
  • Number of words written: 53,066
  • Kilobytes of text: 302
  • Median time between tweets: 6 hours, 43 minutes
  • Average time between tweets: 13 hours, 32 minutes
  • Longest time between two tweets: 84 days between tweet #1 (“Finally signing up with Twitter.”) and tweet #2 (“Wondering if there is something ironic about Superman bandaids.”)
  • Most tweets in a single day: 13 on January 2, 2010, a top ten list of the best years of the decade
  • Retrospectively, do I wish I sounded less whiny sometimes: a little.
  • Number of URLs posted: 571
  • Number of hashtags used in tweets: 155
  • Number of @mentions used in tweets: 768
  • Most frequently mentioned people: @MIGreenberg (40), @npdoty (36), @caitearly (21), @michaelischool (20), and @kevinweil (16).
  • Number of OHs and quotes: 211

Tweet Length

Graph of distribution of tweet length
  • Number of tweets that are exactly 140 chars: 133 (about 4% of them)

Punctuation

  • Periods: 4,705
  • Single quotes, apostrophes: 1,839
  • Double quotes: 1,618
  • Commas: 1,560
  • Colons: 1,421
  • Ellipses: 143
  • Em dashes: 110
  • Semicolons: 71
  • En dashes: 14

Topics

  • Tweets that mention the New Yorker: 18
  • Tweets that mention the Apple or OS X: 47
  • Tweets that mention Twitter: 102

And here are a few of my favorites.

My shortest tweet—four characters—is how I let friends and family know my then-girlfriend’s response when I asked her to marry me:

And the next year when we tied the knot:

A couple graduations:

And starting work at Twitter:

I’m looking forward to the next kilotweet. If you are too, follow @greenberg over on Twitter.

FBI seizes MegaUpload, loses opportunity

23 January 2012
11:24 PM

Last week the FBI seized the file exchange site MegaUpload through a court order. Previously, users could exchange files too large to email through the service. Now visitors to the site see this message:

Screenshot of FBI notice at MegaUpload.com

The significance of a website seized by law enforcement is heightened in light of the controversial SOPA and PIPA legislation currently being considered in Congress. Given the high stakes—the open exchange of information in a free society, government interference with the Internet—I feel compelled to let the people at the FBI know what I think.

Guys, this is embarrassing. Really amateur hour. Seriously, look at this again:

Close-up of FBI takedown notice

Where have I seen a better looking image? I mean, other than every movie ever made that shows a computer screen?

I don’t even know where to start. Fine, the seals. Any one of these seals by itself is like starting the drive from your own five-yard line. The three together is handing the ball to the other team and carrying them into the end zone. You’re not into football metaphors? OK, a seal crammed full of text like “National Intellectual Rights Coordination Center” is the design equivalent of dividing by zero. All three is taking the limit of bad design as it approaches zero and it evaluates to negative infinity. Math isn’t your thing? No sweat—what I said doesn’t make sense anyway. The point is, the seals are ugly.

But they’re your logos, you say? I feel badly saying this, but they look like someone just slapped them together at 4PM on Friday after a lunchtime happy hour. Take the right one. It says, “Protection is our trademark.” I’m not a IP genius, but it seems to me like if protection really is your trademark, and you want people to take it seriously, you need to use that symbol. Like “Protection is our trademark™” or maybe “PROTECTION™”. But since you’re not actually selling anything or engaging in trade, maybe it would be more accurate to say that protection is your service mark. You don’t see that little SM enough.

As if the seals weren’t texty enough already, someone put “FBI ANTI-PIRACY WARNING” on top of the middle one. Is that part of the seal? Operating under the dubious assumption that there’s any design merit to this logo in the first place, the last thing you want to do is cover up your logo. Can you imagine Nike labeling clothes with its swoosh but then covering half of it up with “GARMENT CARE INSTRUCTIONS”?

Who picked the color scheme for the background? Had this person eaten a hot dog recently? That’s the only way I can figure it out. You can’t even read the complete word “seized” once in this tiled background.

The cited list of alleged crimes at the bottom is a nice touch, but, guys, what are we doing with the typography here? A big block of bold, italic, centered text. I read the first line and I think, “This is heavy stuff—they’re being changed with Conspiracy to Commit” and then I get confused until I realize that it’s Conspiracy to Commit … Copyright Infringement (18 U.S.C. § 371). I know how to continue reading on the next line, but you’re taking some serious liberties with awkward line breaks.

Let’s check out the source of the page:

<html>
<title>NOTICE</title>
<body>
<img src="banner.jpg"/>
</body>
</html>

No JavaScript. No AJAX. No CSS. Not even any tables. The image doesn’t have ALT tags. Maybe you’re not worried about Google indexing this page, or visually impaired people being able to read it, but I hope you realize you are just flushing the last 8 years of the Internet down the toilet. Interestingly, you went with the trailing slash that closes empty elements in XHTML but the DOCTYPE is…nothing. Whatever—this stuff is for nerds.

What we need to focus on is what a colossal missed opportunity this is for you. MegaUpload is down and the notice on the site is getting tons of exposure and when you go there it’s like you’re stuck watching the beginning of a movie forever, or at least that’s what it seems like for those people who paid for the movie and have to watch the FBI reminder to pay for the movie.

You must plan these operations, right? I mean, it’s not like you just randomly seize private property on a whim. This is a failure of project management. You can’t just bring in a designer at the last minute and expect them to polish your design turd. This is your chance to shine. Go wild. Animation, maybe a Matrix-style flow of numbers in the background. Ominous type. Here are some ideas:

  • The user goes to MegaUpload. The site looks normal. Suddenly, the eagles from your logos swoop in and the cool one with the arrows in its feet starts attacking the site while the other one hangs a banner over it that says “Seized by the FBI” and then jail bars drop down over the entire site.
  • The user goes to MegaUpload. The screen is filled with static like an old television. Then it looks like the screen is flipping through different TV channels. They’re all static. Finally, you get to a channel with a retro-looking message: “Seized by the FBI”. The retro part here probably plays to your design strengths.
  • The user goes to MegaUpload. The site is covered with sheets of brushed aluminum that look very heavy duty. Etched into the aluminum is the message: “Seized by the FBI”.
  • The user goes to MegaUpload. It says “HTTP Error 460” (this doesn’t exist—you would be making it up): “Seized by the FBI”.
  • The user goes to MegaUpload. A video of Rick Astley singing “Never Going To Give You Up” starts playing. When the video finishes, it fades out and is replaced by the text “Seized by the FBI”.
  • The user goes to MegaUpload. Suddenly, a S.W.A.T truck drives onto the screen. Fighter jets fly overhead. Missiles, bombs—BOOM—the screen explodes. DOM elements lie in a heap at the bottom of the screen. Smokes rises from the ashes and all of a sudden you realize it’s forming words: “Seized by the F.B.I.”

There are probably jQuery plugins that do all these effects already and you could use those as framework to build on. So dust off your copy of Photoshop. Use the mosaic filter. Add some lens flares. Watch Sneakers and Hackers and The Net and The Matrix and Tron and WarGames. Stay away from Papyrus. Then go and take down MegaUpload and put up something amazing. This is your moment: seize it.

Seen through the lens

13 September 2011
9:11 PM

I took this photo of a red panda at the San Diego zoo last month. Notice anything funny about it?

Red Panda at San Diego Zoo

Every person looking at the panda, this photographer included, is seeing it through the lens of a camera. Or on a smartphone LCD screen. It makes you wonder why we are so intent on capturing a moment for posterity that we may never have really seen in person.

Best of Chile

4 July 2011
12:07 PM

So you know how some musicians won’t have any new good songs in awhile and then they’ll release a greatest hits album just to cash in? Anyway, no reason.

Last week yet another friend told me he’s traveling to Chile, news that makes me simultaneously jealous but excited that he’ll get to experience one of my favorite places. Whenever I hear about someone visiting Chile I want to dispense all of the peculiar observations and advice—much of which is probably now outdated—that I accumulated in the years that I was there. I’ve written a bunch of one-off emails with shameless linking to my blog, so I thought I might as well collect those links here.

Destinations

Owing to the country’s slim figure, traveling in Chile is mostly movement along a single axis: north or south. Busses run up and down the country in three classes, normal, semi-cama, and cama, with increasing prices and degrees of seat recline-ability. I wasn’t living in Chile to travel, but I was fortunate to end up seeing many destinations anyway. Here are a few I wrote about:

  • Chiloé. A magical island at the end of the Pan American highway, well known for its seafood.
  • Elqui Valley. A agricultural valley that is the source of most of Chile’s pisco and the resting place of Chile’s first Nobel Laureate, Gabriela Mistral.
  • La Serena. A charming city in the Norte Chico with more than two dozen churches and a moai from Easter Island.
  • Torres del Paine. A national park deep in Patagonia, at the far southern tip of the country.
  • Valparaiso. The San Francisco of Chile.

Many people also rave about San Pedro de Atacama, a small town by the Valle de la Luna in the Norte Grande.

Culture

  • The Dieciocho. Chile’s national holiday is September 18, just as the cold winter is departing. See also a description from 2006.
  • Music. A collection of songs from Chile’s folklore tradition including groups like Inti-Illimani, Los Jaivas, and Illapu. My favorite is Lejos Del Amor.
  • Pisco sours. Pisco is the national liquor, pisco sours are the national cocktail. Also common is a piscola: pisco + Coca-cola.
  • English in Chile. The proliferation of English in Chile manifests itself in funny ways.
  • Currency. $100 for an ice cream cone, $200 for the city bus, $1,500 for lunch, and $20,000 for a pair of pants?
  • September 11. Many years before September 11 became the day of the 9-11 attacks in the U.S., it marked the military coup in Chile that lead to Pinochet’s dictatorship.
  • Pinochet’s death. Chile’s former military dictator died while I was living there.

Observations and Oddities

  • Waiting in line. Not all countries treat lines with the respect they deserve.
  • The triple caja. The Chilean system for making purchases in three easy steps. It’s in use at the Casa Royale.
  • Ice cream. The Chilean summer practically force you to subsist on ice cream.
  • Shopping on busses. No need to go shopping in Chile—just get on a bus.
  • Chile is for lovers. The bar for acceptable public display of affection is rather lofty.
  • Calefóns. Instant water heaters are more common in Chile than the U.S.
  • Street graffiti. Where else can you see stenciled art featuring Mr. Spock, Twiggy, and Waldo?

Spanish Lessons

If you are planning on visiting Chile for more than a few weeks and you speak Spanish, you absolutely must get a copy of How to Survive in the Chilean Jungle. It’s the definitive guide to the cornucopia of Chilean slang and expressions.

These aren’t real language lessons. They’re just my screw-ups. Maybe they’ll make you feel better about your own. Whatever you do, no matter how old you are, remember that you only have one ano.

If you’re going to Chile, I hope you find something interesting here to get your excited for your trip.

"Unboxing the iPad Data," Deconstructed

10 April 2010
2:11 AM

2 Comments

Yesterday John Gruber linked to an infographic, “Unboxing the iPad Data” by John Kumahara and Johnathan Bonnell. In terms of graphic design it’s visually pleasing, but it falls short in a few areas and highlights common challenges in designing infographics. These are problems that occur all the time in visualizations, so let’s see what we can learn from this example.

I know it’s easy to misinterpret criticism, so I want to emphasize that these are comments about this particular graphic, not about the authors’ skills or ability.

Numbers

People understand numbers. So when you are evaluating a visualization one of the most important questions is whether the graphic is better than just the numbers. The most successful visualizations show trends, outliers, and insights that a table of numbers wouldn’t.

In some places “Unboxing the iPad Data” clearly shows the numbers of interest. In others, it obscures them for the sake of design.

Display of numbers: 3,122 apps in the store, 300,000 devices sold, 1 million apps sold

The fact that Apple sold 300,000 devices and 1,000,000 applications in the first weekend is a big deal—so these should be big numbers. Instead you have to read the fine print to see that 1 actually means 1 million.

Equally large are numbers that few people care about, like the number of respondents or the specifics of the Likert scale used.

7 point scale, 2,176 audience polled

When the numbers speak for themselves, rely on them without decoration. Clearly show what is important.

Colors

Certain aspects of color are a subjective matter. One designer thinks this shade of red is the right choice; another thinks it’s ugly. But there is a science to the perception of color. We know that some colors catch people’s eyes more than others. I would argue that these pie charts would be more readily perceptible if the colors were swapped.

Small pie chart

The intense saturation of the light blue makes it look like it is highlighting something. Here the portion of interest is the small white wedge representing 15%, but the white is overpowered by the blue.

(There is the separate question of whether these pie charts help us understand the difference between the 8% and 15% range represented in the left-most column. The small pie charts are attractive, but does this small multiples grid of pie charts help the viewer understand this dataset better than a table of these numbers alone?)

A similar issue affects the bar chart. Here the viewer must compare between likely (represented by white) and unlikely (represented by blue). Again, the blue stands out and draws the user’s attention.

Number of tweets about the iPad

A minor detail in the bar chart is the orientation of the text. In the U.S., we are more comfortable turning our heads right to read things instead of left. Think of a bookshelf—how do you turn your head to read the books’ titles? My preference (preference!) would be to rotate the labels on this bar chart 180°.

Meaning

Designers must be careful that their infographics accurately depict meaningful information. Here, for example, we see that the peak rate of tweets about the iPad was 26,668 in an hour.

Number of tweets about the iPad

The depiction juxtaposes this number against a timeline that suggests the peak occurred between 11:00am and 12:00pm. If this is the case, then the segment should be labeled so that the viewer can learn this readily. On other hand, if we don’t know the time of the peak, then this illustration is misleading because it implies a fact where there is ambiguity.

The segment of this infographic that depicts the cost of apps for the iPhone and iPad is less clear still.

The accompanying text reads:

The other notable difference between the iPad and the iPhone, are the app prices. The average price of the initial iPad apps ran around $4.99 (according to Mobclix) while the iPhone apps averaged a steady $1.99.

I’ve looked at this pie chart for some time and I can’t figure out what it is showing. The ratio of average app price to the total average app price? Even if that were the case, 5/7 is 71% and this chart is split into 60% and 40% segments.

Area

There are a variety of visual variables a designer can use to encode a given set of data. Among these are length, position, angle, area, color, lightness, and others. Some of these are better suited to certain kinds of data than others, and some are more readily perceptible than others (see Cleveland and McGill’s “Graphical Perception” for extensive details and experiments).

Sales map

Look at this area comparison of percentage of iPads sold. Before we even consider the accuracy, look at these two circles and ask yourself how much bigger is circle B than circle A? Go ahead, just type your guess in the box.

Two circles

The circle on the right is times bigger than the one on the left.

The area of the circle on the left is 1075 pixels (d = 37, r = 18.5, A = 1075 px) and the circle on the right is 7390 pixels (d = 97, r = 48.5, A = 7390). That’s 6.8 times bigger.

People are much better at comparing length and position than comparing area. This is a very common mistake (one I’ve made myself). Before you represent a variable with area, you should consider that you may be handicapping people’s ability to compare the data.

Area is hard to understand, but it’s hard for designers to get it right as well. Consider the legend for this map:

Area Legend

Are these circles the right size? Let’s construct a table and find out:

Nominal Size Diameter Radius Area × 1%
1% 22 11 380 1
5% 70 35 3848 10
10% 102 51 8171 21.5
20% 160 80 20106 53

The rightmost column shows the area of the circle compared with the area of the 1% circle. It turns out that the area of the 20% circle is 53 times bigger than the area of the 1% circle—more than 2.5 times bigger than it should be. Comparing areas is hard; it’s harder with an inaccurate legend. The difficulty of accurately representing area is another reason to avoid using it.

Maps

Maps are such a common form of visualization that we use them even when they are not helpful. On top of that, they’re hard. Maps’ static nature make it hard to show important dimensions of data.

The size of maps is fixed, which can be at odds with what your are trying to communicate. In the map shown above much of the interesting data is crammed into the northeast because that’s where those states are located. Meanwhile, a bunch of sparsely populated states in the northwest of the map use up space without communicating anything.

Data on maps is constrained by realities the map itself cannot express. There’s no convenient way to show population data. Does California have a giant circle because Californians buy more iPads than their counterparts across the country? Or is it because California has more people than any other state?

Here the map isn’t clearly better than just the numbers. A table listing the sales numbers for each state, possibly along with the per capita sales per state, would express the point with greater clarity and more succinctly. In the end, that’s the goal, right?

Greasemonkey & jQuery

23 March 2010
4:13 PM

7 Comments

I taught a class this past fall where we used Greasemonkey as a tool for building prototypes of new browser functionality. We also used jQuery extensively to make JavaScript in the browser simpler. There are some tricks to getting the two to work together that I’ve been meaning to share.

Loading jQuery in a Greasemonkey script

Simply loading jQuery within Greasemonkey hasn’t always been straightforward. I think they should just bundle jQuery with the Greasemonkey package since just about everyone is using it already, but that’s a separate issue.

The old way to include jQuery in your Greasemonkey scripts was to add a <script> tag to every page you visit linking to the jQuery library. Although this works, it’s a clunky solution. It introduces timing issues: since you can’t be sure when the script would load, you have to poll continually, checking to see if jQuery has downloaded yet. Once you detect that jQuery is available, you can run your script. This approach also might clobber other JavaScript running on the main page (like the Prototype library) before you have a chance to call jQuery.noConflict.

Fortunately, later versions of Greasemonkey made this hack unnecessary by adding the @require attribute to scripts. When you install a Greasemonkey script that has an @require statement, the listed resource is downloaded once and included in the script as if it were pasted directly into the document. Unfortunately, there’s a small stumbling block for people testing their scripts: the @require statement is only executed when you install a script. This means that if you create a new Greasemonkey script in Firefox, add the @require line, and save your file nothing will happen. You have to uninstall your script and reinstall it because @require is only processed at installation. Once you do this, you can use jQuery all you want in your script. Except for…