Entries tagged “100px”

An interesting infographic trend: Square blocks of color are now being used to represent percentage-based statistics instead of the traditional pie chart. Some recent examples are shown here.

The chart on the left is from a NY Times story on atheism and the afterlife, making its choice of colors seem a little weird. And is that empty white block in the center supposed to represent the empty hole in our souls? On the right, a detail from a Wired story on how much Americans spend on gadgets. Charles M. Blow created the graphic for the Times; Arno Ghelfi did the honors for Wired.

This switch raises some interesting questions.

• Is the square format more familiar to readers now because of the preponderance of the pixel in pop culture?
• There's a lot of leeway in choosing the shape of individual regions, since the only constraint is that they use the proper number of squares -- what are the best practices here?
• Finally, a productive use of all that time spent playing Tetris?
• How come it took so long to figure out that pie charts are pretty hard to actually glean data from?
• Was there a "Designing For Print" conference somewhere six months ago where a speaker made a particularly compelling case for squares over circles?

Somewhat obliquely related, my series of posts last year on 100 Perfect Pixels, featuring Nike Plus, Amazon's Gold Box and Vox's Neighborhood.

This is the third post in a series where I'm pointing out some nice little touches that take up less than a 100×100 pixel square on a screen. Today's is from the Vox Neighborhood page.

Sure, Vox is still in preview. Sure, I work for the company that makes it. There's still one little detail that absolutely bears pointing out for being an extremely thoughtful touch.

Vox carries on two well-established traditions for networked communications sites. The first is representing users with a small, changeable icon next to their name, as most of us are familiar with the concept of an avatar or profile picture. Then there's the ability to aggregate all of your friends' posts into a single view, which is an innovation that LiveJournal helped popularize years ago.

The combination of those two things makes my Neighborhood a very personal, human space for me to read about what's going on in people's lives. But the small touch that really made the page work, to me, was that there were four tiny profile pictures in the corner.

Where so many services would have had a generic "network" icon, maybe with a globe or a sphere indicating this was my world of friends, I was really pleased to see the Vox team put the faces of my actual friends in the page to illustrate where I am. It even updates the people to reflect whomever's posted most recently.

That's what 100 Perfect Pixels is all about, a little touch that takes something from sufficient to really delightful. And the Vox Neighborhood is exactly what inspired me to start this series of posts in the first place.

Resources

• Naturally, you can take a look at my Vox neighborhood.
• Not a Vox member yet? Ask for an invite.
• Vox also inspired me to write about Making Something Meaningful.
• See the other posts in this series of 100 Perfect Pixels: Amazon's Gold Box, and Nike Plus

This is the second post in a series where I'm pointing out some nice little touches that take up less than a 100×100 pixel square on a screen. Today's is the Amazon Gold Box.

It's been four years since the introduction of Amazon's Gold Box, and there's still almost nothing like it on the web.

One of the frequent criticisms of web navigation is that it eliminates serendipity, or that it makes it difficult to stumble across a "find" in the way that you might while browsing a physical space. The Gold Box was introduced in 2002 and helped solve that problem by introducing some randomness into the Amazon shopping experience. Of course, it did so by focusing on items that they were trying to clear out of their warehouses, but that's a tactic as old as retail itself.

Best of all, the combination of a whimsical name, a home page icon that was animated with a little shake, and the urgency of having to beat the clock to choose your items all combined to introduce a sense of play into what could have been a simple trip to the bookstore. It's a remarkable enough archievement that even today, four years later, almost no one has come up with something similar on a commerce site on the web.

Resources:

Updated: Web Archive links for the posts referenced below have been added. It's amazing how many links rot after four years.

• Jane Pinckard had a great open letter to Jeff Bezos (original, defunct link) about the ridiculousness of the Gold Box's original suggestions. I'd linked to it on my own site back in the day. Web Archive link is forthcoming.

• Lia also showed off how funny the Gold Box could be back in 2002, complete with a mention of the then-little-known Hilton sisters. She mentions Rael's poem, which is worth the read. (original, defunct link)

• I posted a notice when Amazon started explaining the feature, and suggested that Amazon's addition of feeds should have included the Gold Box as well.

This is the first post in a series where I'm pointing out some nice little touches that take up less than a 100×100 pixel square on a screen. Today's is the Nike Plus site.

Nike Plus is the product of Apple's partnership with Nike to produce an accessory aimed at those who listen to music on an iPod while they run. With that kind of pedigree, you'd expect nothing less than an excellent, aesthetically exceptional experience, and Nike+Apple definitely deliver.

The physical hardware is reasonably attractive, given its focus on pure functionality. You get a little fob that sits in a custom slot in the Nike shoes, and it can be attached to any brand of shoe if you're creative enough. There's a dongle for your iPod Nano, and then the rest of the magic happens when you sync up your iPod to your computer. It's not perfect, of course; The whole system locks in your running data in a way that's not entirely surprising given Apple's history of DRM advocacy. It's inexplicable why they won't let you export your own info.

On balance, the product is pretty good. But what's remarkable in the execution of the Nike Plus (or "Nike+"; the site and product are referred to both ways) is that it's not just pretty, it's practical for people who are actually runners. My wife and many of my closest friends are all runners, and several of them are in marathon training right now. And all of the runners I've talked to have described the tracking, reporting, and community functionality of the Nike Plus site as top notch. There's also a smart integration of music features, letting you pick a "Power Song" in case you need a boost while running. For someone like me, though, I'd need a way to keep motivated and to reward my competitive nature.

That's where the 100 Perfect Pixels of the Nike Plus site come in. You'll see highlighted here the My Records link, which offers access to a all your running records. You can set goals, challenges, milestones, and events, all designed to help you compete against the most difficult competitor: yourself. That kind of design touch shows some smart thinking and beautiful execution, so it's a shoe-in (pun!) for being the first example of 100 Perfect Pixels.

Some Resources:

• You'll need an iPod nano to play with the system. Nike would also prefer you buy some Nike Plus shoes to go with it, though that's actually optional. It works with any sneaker, as Alaina has documented.

• Once you've got the first $400 worth of gear together, you've only got one more item to buy: Nike + iPod Sport Kit is the actual doohickey that makes your shoe talk to the fob that talks to the dongle that talks to the nano that talks to your computer that talks to the website that makes all the charts and graphs light up.

• In the iTunes Music Store, Athlete Inspirations is a bunch of playlists and podcasts for runners by athletes. I had figured everyone was just listening to Eminem's "Lose Yourself" as their Power Song, but apparently not.

• And finally, yeah, I know that 100×100 pixels is actually 10,000 Perfect Pixels. That name kinda sucks, so this post and all the future ones are going to be called 100 Perfect Pixels and tagged with "100px". Deal with it.