Timoni West is a web designer in San Francisco.
This is her blog.

The most important page on Flickr

Is this one: http://www.flickr.com/photos/friends/

(I am a designer at Flickr. This post is largely taken from a proposed redesign I sent out last year.)

Virtually every time someone asks if I’ve seen a new photo on Flickr, I first cringe a bit, then reluctantly say no—it’s always no, because the page dedicated to showing new photos on Flickr, Contacts > Uploads, makes it impossible to easily browse those new photos.

There are a lot of problems with this page. For brevity’s sake, I’ll mention the big ones.

• Users have to rely on memory to figure out where the most recent batch of new photos end, and old photos begin.
• There’s no way to see all, and only all, recent uploads from a member.
• There’s no way to see all of the recent uploads from all of your contacts.
• The Friends & Family filter is basically hidden, which means it’s also basically useless.
• There’s no way to change the thumbnail size.
• Users have to go to a member’s photostream if they want to be sure they’ve seen all recent photos.

And remember, these are just the biggest problems. The page fails on a fundamental level—it’s supposed to be where you find out what’s happened on Flickr while you were away. The current design, unfortunately, encourages random clicking, not informed exploration.

The page isn’t just outdated, it’s actively hurting Flickr, as members’ social graphs on the site become increasingly out of sync with real life. Old users forget to visit the site, new sign ups are never roped in, and Flickr, who increased member sign-ups substantially in 2010, will forego months of solid work when new members don’t come back.

The ideal redesign would, at a minimum:

• Add context: for example, a summary at the top mentions roughly how many photos have been uploaded since one’s last visit.
• Include new sort options, including:
  • uploads by day
  • recent uploads by contact
  • recent interesting photos from one’s contacts, and so on.
• Include options to view photos at various sizes, small to large.
• Include infinite scrolling, keyboard shortcuts, and/or toggles to allow seamless navigation.

For the TL;DRers, every suggested improvement supports these two goals: clear context, and easy navigation. Users want to know what* they’re looking at, and then easily go wherever they want to go next.*

Flickr can have a serious competitive advantage if they make photo uploads easy to see and navigate: everybody likes photos, and likes seeing themselves in photos, and it’s even nicer to see photos all arranged on a page without visual cruft like status interruptions and article links. It’s also crucial to have different ways of viewing the photos: chronological is important, but so are groupings by date and contact type.

In other words, Flickr still has the ability to kick ass in this arena. They just have to build it.

*By which I mean what, who, where, when, and who else, usually in that order.
*Usually scrolling down to look at more photos, to be honest.

—Timoni

read write where

Yesterday ReadWriteWeb’s post on Facebook Connect was, for a while, a top google hit for “facebook login” and as a result of this—combined with RWW’s Facebook Connect button—the site got a lot of negative comments* from confused Facebook users who thought they were looking at the new Facebook redesign.

There’s been a lot of discussion about the whys and whats and wherewithals, and ReadWriteWeb wrote a summary of things they had taken away from the experience. It’s unfortunately easy to extrapolate beyond what actually happened (“Users don’t read your copy or look at your branding”, for example), but we can take away some really fascinating truths from this debacle**:

1. Facebook did a great job annoucing their redesign. Almost every confused commenter knew that Facebook was redesigning and had clearly been expecting it.
2. These users don’t trust Facebook to maintain any UI consistency. This is the part that I find truly mind-boggling: aside from ignoring the ReadWriteWeb logo in the corner, aside from commenting on how much they didn’t like the red, most confused commenters genuinely thought that the changes they saw were the result of the redesign. Their expectations for brand consistency were so low that they didn’t realize they were on a completely different site even though quite a few of them had clearly clicked around in a fruitless attempt to ‘log in’.
3. Perhaps less surprising to those who have come across this user mistake before: URLs mean nothing to certain types of users—specifically, any user that mistakenly commented on ReadWriteWeb today. It’s impossible to tell how they all came to RWW, but Google seems to be the most common path—which means they didn’t use desktop shortcuts, browser bookmarks, or address bar autocompletes.
   One of my coworkers anecdotally mentioned that his mother had accidentally removed the address bar from Safari, and had been happily (and obliviously) using the search box for everything for the better part of a year. This is not entirely surprising, since address bars and search box often look alike and can be used exactly the same way in a lot of browsers.

Beyond that, there’s not a lot of points we can glean that aren’t speculative or specious. Here’s an excellent point from filthylightthief:

Even at work, around people who use computers every day for their jobs, get beyond the basic functions and it’s a foreign language. Follow the steps you normally take, and you’ll get to the end. The path doesn’t matter. But I think the same can be said about anything that is sufficiently complex: if you can make it work for your normal tasks, most people will be content with getting from A to B, even if it takes you past Q and Z. Computers just have a lot more options for detours.

*Example: “Can we log into face book? This is crazy I want to get all my info off and be done with this. I recently moved from MN to SC Myrtle Beach and facebook was a great way to keep in touch with family and friends but this is getting to be to difficult.”
**This hilarious, hilarious debacle.

—Timoni

product design philosophies: user-focused versus metrics

…Posterous is an engineered product, while Tumblr is a designed product.

…everything about Tumblr is better designed. I used the landing page as one example, but there are tons of features where Tumblr shines by its gorgeous design.

Meanwhile Posterous is typical of the Silicon Valley engineering mindset where everything is measured, ranked, weighted. It’s like Google. And having terrible design like Google is great if you have a technology edge. But if you’re in a market where what matters is design edge, that’s not enough. There needs to be great design, by which I don’t mean looks (though they’re important), but how it works for the end user.

Meanwhile, Tumblr is typical of the new New York startups, that have great engineering talent, but care about design, UI and UX.

—Why Tumblr is kicking Posterous’s ass, by PEG on Tech, via Daring Fireball

I don’t necessarily agree with Pascal-Emmanuel Gobry that the divide between engineering and design is strictly SF/NYC, but I do agree that the there certainly are two different philosophies for product design that are as immediately apparent, looking at a website, as comparing the difference between Apple and Dell hardware.

Scribd (my last company) is a very engineering-based company, and I am a very user-focused designer. Both focuses are legitimate ways to build a product, but as you can imagine, working for a company or hiring employees whose product-building philosophies don’t match your own is usually frustrating. Compare this random Scribd doc page to my proposed redesigns and you’ll see what I mean.

Gobry’s closing remarks:

…for consumer web apps today, design matters more than technology. Much has been written about how the cloud, accessible web frameworks, etc. have dramatically lowered the cost of getting a startup to market, and that’s certainly true, but it also means that since everyone is on EC2 and Ruby on Rails, technology is no longer what differentiates most consumer web apps. What does is design. UI/UX design. Social design…To be sure, technology is and always will be very important. I don’t want to go back to the startup where the MBA bosses around engineers. And some of the best designers will be engineers (like David Karp, or Mark Zuckerberg). But you can’t just engineer anymore. You have to design.

This is absolutely true, but he doesn’t mention the major trump card of social media sharing sites: having the most content. I don’t know anyone that really loves YouTube or considers it a favorite site. It is, frankly, way too ugly to love. But it is tremendously popular, and has an extraordinarily high brand recognition, because it has the most good content. In terms of design, Vimeo blows YouTube out of the water, but because Vimeo has chosen to focus on higher-quality indie videos, YouTube is still the first place people think of when they want to watch kittens falling asleep in hilarious ways.

—Timoni

Improve Quick Look

via superamit, via minimalmac, via chrisbowler, via finermac, via Ben Ward:

“$ defaults write com.apple.finder QLEnableXRayFolders 1”

— macosxhints.com: See folder content previews in Quick Look in 10.5 and 10.6 

I did this earlier today, too. It is totally awesome.

—Timoni

Realization

The way I use search on the internet has changed. I used to go to Google for everything, but now, when I want to search for something useful and design-specific, I don’t search Google: I search Google Reader.

—Timoni

On Seeing Tufte

Today I went to a course by Edward Tufte, the Yale professor and information organizer extraordinaire, at the Grand Hyatt in downtown San Francisco. Despite the prohibitive price tag ($380 for six hours), I was really excited: he has beautiful work, and you get fine hard-cover editions of most of his publications besides. I knew some of his work, but had never read the books. They are gorgeous and worth every penny.

Tufte is lean and small and academic, with pleated slacks and wire-rimmed glasses. The only jarring things were the massive rings on his fingers (six: four on his right hand, two on his left) and his occasional bursts of irritation at the current administration—otherwise, the whole day turned out to be a plain ol’ college lecture, where we calmly got out our books and turned to this-or-that-a-page and patiently took notes on pads provided by the hotel. Odd sidenote for the techie bunch: I turned check about three times, but never saw a laptop open in the crowd. One person unfortunate enough to be checking his phone after lunch was duly chastened: “Don’t look at your cell phone right now—we’re talking about Galileo. Geez.”

The lecture started off with a nice visual representation of one of Chopin’s lullabies, while Tufte gave an equally nice overview of the levels of information being described: time (past, present, future), spacial representation of tone, color, and so on. Thereafter my notes usually devolved into quotes, which reflect his general themes of data quality, credibility, and simplicity.

When you start to strip detail from your presentation, you lose credibility.

To clarify, add detail.

Document your stuff, and provide reasons to believe.

You’re trying to evoke a content response, not a design review.

Tufte had a passionate aside about “chart junk” and how you should question the intent, nay, the integrity of the organization who would present data with bright blue gradients. On a practical level, he mentioned twice that cartography is a good reference point when trying to display data that overlays other figures. In fact he recommended stealing and copying whenever possible:

Look for excellent conventional displays, in most cases.

The idea in analytical design is—don’t be original, do it right. Steal from good examples. Find a good metaphor.

For those who would decry large and complicated tables as an efficient way of displaying data, he mentioned stock charts and sports statistics. I love this; so often in web design I hear that things need to be dumbed down in order to be digested by the masses. I’ve often wondered what the real benefit is: less customer service?—is that the goal of a site? Nielsen notes users will put up with a lot of irritation before they’ll leave a site, and Norman adds that users will actually blame themselves when things are poorly designed. Clearly life should be better, and design can improve everyday irritations substantially. Nonetheless Tufte puts an emphasis on taste and quality over accessibility, and this is refreshing.

It seems there is a misplaced egalitarianism about design that I’ve noticed in many a dull meeting: something like, “Ten-point Hoelfer Text may be all well and good for you design types, but fourteen-point Arial will be understood by those people who [somehow] cannot read or understand anything else. Nevermind that people visiting the website/reading the article/looking at the sign will have overcome many a better-designed obstacle to get where they are, looking at our material; when it comes to us, concessions must be made.” Tufte does not hold with such nonsense. About page three, my notes summed up the general theme “…He continually reminds you that your audience is not stupid, and is in fact as capable as you are.” But here are a few direct quotes:

Think of your audience as busy, not stupid.

People aren’t going to get any more confused than you are.

(And how to avoid confusion in general? “Annotate everything,” and a reminder that in most cases, with tabular data, “This is a solved problem.” Additionally his love for sidenotes matches my own, and makes me wish I’d found a reasonable sidenote solution for this blog with CSS. If anybody knows how to do it without absolute positioning, let me know.)

The last few paragraphs are not to indicate that Tufte prefers design to usability. In fact quite the opposite. There is no mercy for those who would “put lipstick on a pig,” that is, dress up otherwise useless information. Tufte actually prefers annotations to a lot of usually unobjectionable cartographical conventions: “…codes, legends, and other fooling-around are impediments to learning.” This is an uncharacteristically website-friendly point of view, where the static position of a legend leads to a lot of useless scrolling. Frankly, it’s clear that legends can be useful, when they are useful and easy to memorize; Tufte’s examples of their failings were all print, and involved awkward page breaks. But there’s a lot to be said for describing visual verbs, like arrows: just adding a bit of descriptive text can make up for any number of awkward map keys.

---

After lunch, I was hoping for more in-depth practical examples, and maybe some guidelines, about the visual problems Tufte had described earlier. Since I’d arrived ten minutes before the course started, I hadn’t realized (unlike this attendee) that a lot of what he was saying aloud was quoting verbatim from his books. I did, however, already knew about sparklines, and was disappointed to find that was all Tufted had slated to talk about for the next hour. Sparklines are tiny little fever graphs, the height and width of regular words, designed to be used inline with text as a tidy visual of whatever data you’re interested in, and they are super neat. Their practicality is obvious and the idea is really easy to grasp. In short, they are so fabulously intuitive they do not warrant an hour’s worth of explanation.

Tufte ended the day with (a) a long analysis of why Powerpoint, and more generally shallow outlines, totally suck (and can lead to death), (b) how to glean the correct information, or at least know what you should be looking for in a meeting; and (c) how to shorten up your presentations.

Along with most people in the audience, I already hate Powerpoint, not to mention any designer has a burning desire to destroy any program that only allows nudges in inch increments and has a native resolution of 180 x 200px—so Tufte’s explanations added fuel to the fire, but did not really change anybody’s mind. As for meetings, I’ll duly write what he prescribed, but I’ve never been in charge of a dull presentation, and aim to never be in charge of one. Here are the tips:

• Only show full-sized, useful pages and videos during presentations. Otherwise:
• Write up an executive summary, about two hundred words or so, and
• Then outline the rest in a nice tabloid-sized paper, printed on both sides, which costs very little, and can hold an amazing sum of data, which is useful because
• The person you’re presenting to is quite busy, and can read a lot faster than you can talk, especially with those ridiculous Powerpoint slides*

*I added that last bit.

More importantly, he added a few key things to remember if you are ever an Important Person getting information from a Powerpoint or other badly organized presentation:

1. What is their story?
2. Can you believe them? What’s their credibility?
3. What is the domain specification? (In other words, to what, exactly, is this relevant?)
4. What do you really need to know? (And this last question should get you out of the room.)

A lot of the second half of the lecture was so transparent that I can’t wholly recommend the course to interested designers. It’s worth getting the books, but once you have them, the data overlaps too much to justify the price tag. Having said all that, Tufte is interesting and charming, and a good speaker. I’ll leave you with a few last quotes on creating interesting information graphics:

Analytical design is content-based, which in turn leads to elegant but transparent architectures.

The idea is to create interesting comparisons. The question is always, “Compared to what?”

Compared to what? That’s always a good question.

—Timoni

On the confusion between creation and instinct

I have been reading Designing Visual Interfaces: Communication Oriented Techniques for the last few days and have been charmed by the UI examples (cira 1995, or earlier), and the authors’ assertions about the uselessness of of “simulated brushed aluminum buttons” and “gratuitous dimensionality” in interface design. I’ve also found the book to be incredibly useful in detailing what later books take to be common knowledge about the graphic aspects of user interface design. Their positive attitude about how proper design techniques can be learned is reassuring, too, especially when it comes to basic things most would consider innate talent: “With practice, your eye will become trained to recognize exactly how much space is needed to achieve the proper balance between figure and ground,” and so on. Well, hooray!

From the cover

On page 89, they remark on purposefully organizing information, and why:

Organized structure does not occur naturally in man-made artifacts, so it must be consciously induced by establishing relationships among the components of the design. Effective use of structure allows individual elements to work in concert without being diminished in their own right.

But this lack of faith in humanity’s ability to organize is followed with:

The eye craves structure and will seek to impose its own organization onto a design whose structure is not readily apparent. This breakdown threatens communication, since the designer is no longer in control of the message.

So the immediate question is: why does your eye (or mine, or anybody’s) want to impose structure on visual elements it can’t naturally organize? Is the problem at the end, when there are too many paths and variables, and people can’t remember how they decided to organize things? Categorization via tags is a nice solution, allowing a significant number of paths to be recorded very quickly and retrieved just as quickly. Nonetheless the dichotomy between organizing information and imposing organization itself is curious. It’s clear that people want data to be organized, to the point of overwriting whatever faint attempts at aesthetics the light-handed designer might attempt. This is considered bad design, obviously: making the viewer work too hard only leads to confusion. Good design strives towards absolute clarity (attractive absolute clarity, really, because not everybody likes International Typographic design as much as designers do), but oddly there are already standard rules and regulations of good design, things that can be written down like a list:

• Take care with the mixing of typefaces
• Obey thee the rules of hierarchy when organizing important bits
• A pica in the middle means a pica all around

And so on, but somehow these are ignored or otherwise not apparent when it comes time for the untutored to fire up Word and make a flyer. It’s clear from the prevalence of bad music, bad art and bad film in this world that just because people want things to be a certain way doesn’t mean they can sit down and make them that way. Nonetheless when people listen to bad music or look at bad art, they’re only disgruntled. With design, people try their best; they look, they look again, they’re irritated, they use rulers or eyeglasses or their fingers as markers; they write things down a different way, and reorganize information until it makes sense to them. People instinctively want to organize their data in simple and practical ways. If the basic rules of design are the answer, and so clear they can be summarized in a page or two, why do they need to be written down at all? Why aren’t they instinctual during the creative phase?

—Timoni