timoni.org

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

Read more about her here, or follow her on Twitter, Flickr, or other places around the internet.

Posts about ui
February 11th, 2010

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

February 5th, 2010
This is very simple to use… So if you can’t figure it out, well… That really sucks for you.

http://tumblrcloud.icodeforlove.com/

Why make your own web products? Because you get to write copy like this.

February 2nd, 2010

I enjoy iPad speculation as much as anyone, but this isn’t written as if it were speculation. Posts with titles like this—and there have been a lot of them—really shouldn’t be written until people have had a chance to try out their iPad for at least a week or two, if not longer. They muddy the discussion, and will make it harder for the community to review the iPad with a fresh perspective when they arrive.

(Why yes! I am a user-centered designer.)

February 1st, 2010
Think of and look at your work as though it were done by your enemy. If you look at it to admire it, you are lost.

— Samuel Butler, via boranikolic.com

Indeed. It’s much easier to fix your designs when you let them sit for a while, and come back disagreeing with them.

January 25th, 2010

from Idea du Jour, a nice write-up of a very inexperienced internet user’s first time trying out Twitter (in this case, the author’s mother). (via lauraglu)

My mistake: scanned first, read the description of the user later.

January 19th, 2010

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

November 17th, 2009
Last week I tossed a coin a hundred times. 49 heads. Then I changed into a red t-shirt and tossed the same coin another hundred times. 51 heads. From this, I conclude that wearing a red shirt gives a 4.1% increase in conversion in throwing heads.
November 4th, 2009
Maintain a coherent vision of the user interface architecture. Create the initial vision during a “sprint zero” period — before any implementation has started — and maintain it through annual (or semi-annual) design vision sprints. You can’t just design individual features; they have to fit together into a coherent whole — a whole that must be designed as well. Bottom-up user interface design equals a confused total user experience (the Linux syndrome).

Agile User Experience Projects, Jakob Nielsen’s Alertbox

In my experience, maintaining UI fidelity is the hardest part of working with agile programming. I find it surprising that Nielsen’s only advice is to “decide it all in advance.”

October 1st, 2009

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

April 25th, 2009

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

January 30th, 2009
The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.” … It didn’t need to be a complex message. All we did was change a button.

[ The $300 Million Button ]

Getting rid of one button and replacing it with another button does not change fuctionality or user flows, and both of these would have had to change in order for the users to checkout with having to register. I’m not sure if Spool assumed his readers would know this was an integral (but not noteworthy?) part of the process. The bombastic title indicates he’s deliberately simplifying this example; unfortunately, now the anecdote doesn’t make sense.

January 22nd, 2009
It’s easy to design usable interfaces that enable people to complete tasks. It’s much more interesting and challenging to design things that make people want to perform those tasks. Truly achieving that can take a lot of work, but it’s usually work worth doing.
July 20th, 2007

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 man himself, signing a book

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

June 24th, 2007

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

1 of 1 pages. You can browse the Archives