May 06, 2006 3 (Controversial) Techniques to Improve Usability
Usability is king. If you can help people accomplish something valuable, you'll succeed. But you already know this; the software industry has come a long way since the late-80s and early-90s. Other industries from grocery stores to snowshoes are also focused on building usable products and services.
There are many conferences, associations, and courses designed to help people learn how to build usable products. Hearing from people's real-life experience also helps, so here are three techniques that may seem counter-intuitive or controversial, but will greatly increase your chances of building a more usable product.
1. Embrace Ugliness
Subtle changes to color, typeface and layout can greatly affect usability. For this reason many people will spend a fair amount of time focusing on fine tuning the user interface to their product prior to its release. If you're working on the 10th iteration to Photoshop (which really should pick up the visual style of After Effects 7.0 by the way), this is reasonable. Photoshop is over a decade old and doing a face-lift to improve readability and increase the smoothness of the interface is well worth it.
That said, if you're working on a new product or a larger redesign, you must embrace ugliness. Do not spend a lot of time perfecting and fine-tuning the interface because you will only get attached to it. In the same way the designers at IDEO will make crude prototypes with cardboard and hot glue so that they can test 10 or 15 prototypes before deciding on one, you too must do this with your digital product. If you make something too pretty, too refined, it will take you longer to build it and longer to change it. It may kill your chances of success.
2. Skip the Lab Tests
Let's go back to Adobe once more. Adobe spends a lot of money on lab tests. They recruit people to come down to headquarters in San Jose, sit in a room with cameras and two-way mirrors, and go through detailed task analysis. All this is a big investment of time and money. For a multi-billion dollar company it's not particularly prohibitive but for a startup it can be a costly process that may not necessarily be the best way to improve usability.
Instead of sinking time and money in to doing lab tests, spend that time and money to instrument your product so that you can learn what real users and doing on their own machines in their own homes. Imagine if Photoshop had a plug-in that volunteers could install that would report back to Adobe how people were using the product--not just 6 people in a usability test, but thousands of people. Think of it as a Nielsen rating system, except for your product. On the web this is even easier because you can even fork your traffic to go through different interfaces and test in real-time which is doing the best.
The advantage of doing this is that unlike lab tests where there will always be debates about exactly how to change things, when the product is instrumented you can see a more direct link to changes and outcomes because the sample size is larger and you don't need to spend a lot of time screening and recruiting people to come to your office at night so you can watch over their shoulder.
3. Don't use Features as a Crutch
No matter what you build it seems like there's always a list a million items long of bells and whistles that people want you to add. In many cases people say they can't (or won't) use what you have unless those things are added. Especially with a new product, there are typically huge holes that have to be patched up in order to make it usable.
There is a trap here, however. A lot of times the core of the product is not what people want, but they try to make you feel better by enumerating a list of things they think you should shoe-horn in to make it less terrible.
If you've built something that no one is using, it is rare that adding enhancement features will get people to adopt it. Typically there is a core problem that has to be addressed. You've got a pig and people try to help you by suggesting you add lipstick, earrings, a scarf, and spray the thing down with Chanel No. 5. The problem is that you'll keep sinking time and money in to this pig until you've driven your company in to the ground. "If we could get another round of financing, we would paint the toe-nails, and I'm sure we'll have a hit on our hands!" you may be thinking.
Posted by johnnie at 11:09 PM | Comments (0)
February 18, 2006 South by Southwest
Next month I will be attending South by Southwest Interactive. Most people know of South by Southwest because of the music festival, but there is also a film and interactive festival that precedes the music one.
I will be speaking at a Web Hacks panel run by my co-worker/homeboy Sergio Villareal. Other people on the panel are Kevin Gibbs, Aaron Boodman and Glenda Bautista.
The panel coincides with a number of presentations on web standards, yet tries to argue the benefits of breaking the rules:
"Standards are not the end-all be-all of web methodologies. For years, people have been hacking together ugly, daunting, proprietary, but perfectly functional code. Hear the reasons and learn the tricks from the renegade side of the fence."
I'll go in to more depth on this topic later.
By the way, Slide was nominated for a SXSW Web Award for Technical Achievement. (Vote for us!)
Posted by johnnie at 01:30 AM | Comments (0)
December 12, 2005 9rules Content Direct to Your Website or Desktop
Mashups. Remix. How six months ago? The terms are not particularly new, but the underlying concepts don't seem to be faddish. The idea of aggregating content and providing filters (social, spatial, temporal) is something that embraces the promise of the Internet in ways that were hard to imagine 20 years ago.
RSS has had a significant influence as well, since people are opening up their vaults and making it easier to access content that was previously buried. The publisher gives up some control, but in return they get access to an audience they would have never met. Of course, it's never easy to let go.
I belong to the 9rules Network which attempts to "highlight the very best web content in the world and package it in a nice bow for you to unwrap." This works through an aggregation process--by having various blog website join the network, and by building the 9rules.com site to help people filter through the content.
To help provide a new visualization of the data, I set up a 9rules Network Slide Show using Slide, which aggregates the feeds of all (well, almost, I still need to add some of the new sites) of the sites in the Network. Any images in the posts are placed in to a ticker (we've been described as Flickr meets the marquee tag):
(Click on a photo to visit the site that posted the article)
If you like, you can get this 9rules Network Slide Show for your website or desktop at Slide.com. Instructions for choosing between horizontal or vertical, and modifying the size are on the site.
One of the beauties of the emerging trends in web publishing, syndication and community-based filtering is that there is no "solution" that needs to be found in a scientific sense. Rather, it's an opportunity for a wide variety of people and companies to help people visualize and give context to the vast amounts of data that fill the world's server racks.
It may start with a marquee tag, but there is no shame in that.
P.S. You may have caught Om Malik's post on Slide for the Mac. It's looking really nice, and integrates tightly with the Slide.com website. Email mac at slide dot com if you want to join the beta program.
Posted by johnnie at 11:43 PM | Comments (5) | TrackBack
October 10, 2005 Burrito is the New Black
A little while ago Max told Sergio and I that he felt the ideal user interface for Slide would be like a burrito: satisfying, but not overly sophisticated. I suspect there is a widespread fear that a website that feels "designed" won't appeal to a consumer market. Tapan Bhat--formerly a Director of Product Management at Adobe, now at Yahoo!--once told me "Don't be afraid to be ugly. People like ugly." This is the essence of burrito design.
Many companies have been successful without paying much attention to design. Indeed, many embrace the notion of anti-design. They're proud of their ugly, busy websites.
If Myspace
wanted the typographic elegance Eris Free is able to acheive
it could hire her to help them (okay, technically she's at Apple now, but there are other people they could hire). But that's not what they're interested in.
That said, I believe Max is wrong. Giving away burritos is great, until a competitor comes along giving out filet mignon.
As Jeffrey McManus, who works at Yahoo!, describes from a session he attended at Web 2.0 called "What Teens Want":
"None of them use Yahoo for much of anything (not for IM, not for search, not for shopping, not for mail) except as a sort of second-chance search when Google didn't give them what they wanted. They hate the Yahoo home page because it's busy and weighed down with ads, no surprise there."
By the way, if you're interested in helping Sergio and I at Slide figure out how to make the filet mignon, please get in touch with one of us. We need someone full-time in San Francisco. It would help if you were good with JavaScript and were interested in techniques like those in Donovan's LivePage.
Posted by johnnie at 12:30 AM | Comments (7)
September 01, 2005 Want to Work with Me?
Posted: 8/03/2005
Updated: 9/01/2005
I recently left Adobe to join Max Levchin in his latest quest to create useful applications/services. Max was a co-founder of PayPal, and left after he sold PayPal to EBay. At this point I am the only designer, which means that I am about to bottleneck a growing gang of talented Python programmers.
If you enjoy coding/designing websites that conform to web standards, know that tables are meant for tabular data, aren't afraid of Cheetah, want to push the limits on what is possible on the web, are not afraid to stay up all night to get the job done, and want to work in downtown San Francisco, send me an email.
P.S. If you're a crazy Win32/GDI+ hacker, Mac developer, or QA ninja, you can also contact me and I will put you in touch with the proper authorities. Or just solve this puzzle.
Update:
[trumpets playing] Sergio Villarreal (of overcaffeinated.net and a fellow 9rules member) is joining us at Slide. This means that 1) my head will not explode from juggling too much work, and 2) we will have a very talented designer/programmer to push the interactivity and richness of the website.
I've been very particular about the slide.com front-end. I wanted it to be clean and straightforward, but I wanted it architected properly. I want to show that we can conform to web standards (XHTML 1.0 Strict, CSS 2.0, WCAG) without having to sacrifice aesthetics or do away with the seductive, rich features that one associates with non-compliant websites. Sergio is motivated by a similar vision (or maybe he's just good at faking it?), which is why I'm so excited to work with him.
(Sergio also comes highly recommended by Andrei Herasimchuk, and those who know Andrei know he is not easily impressed.)
Posted by johnnie at 12:03 AM | Comments (7)
July 11, 2005 Asking the Right Questions
John Maeda: "What is Design?"
Paul Rand: "Design is the method of putting form and content together. Design, just as art, has multiple definitions, there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated."
This excerpt is taken from a conversation between John Maeda and Paul Rand. I reflected back on this conversation after I had a discussion about design with Paul Rademacher.
Part of the process of working with form and content involves asking questions. I would prefer to work with people who ask the right questions and offer no answers, rather than those with many answers to the wrong questions.
In the field on interface design there are a number of easy answers that are best pushed aside in order to make room for better questions. What if a Windows application had no application menu? No Save command. What if it had no modal dialog boxes? What if it had no context menus? Asking the questions frames the problems to be solved in new ways. What begins as questions focused on limitations can become an opportunity for thinking more broadly about the problem.
What if you could only use gestures? Would your design become a morass of obfuscation?
Posted by johnnie at 01:47 AM | Comments (0)
May 11, 2005 Ajax: 99% Bad
What is Ajax?
Ajax was coined by Mr Garrett of Adaptive Path in his essay Ajax: A New Approach to Web Applications. This was on February 18, 2005, and even though it's only been under three months, the term has spread quickly.
Before defining Ajax in detail, Mr Garret described two examples: "Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web."
So as not to be left without specifics, Mr Garrett goes on to describe the components of Ajax in detail: "standards-based presentation using XHTML and CSS; dynamic display and interaction using the Document Object Model; data interchange and manipulation using XML and XSLT; asynchronous data retrieval using XMLHttpRequest; and JavaScript binding everything together." It's certainly a mouthful, which is why having a nice, friendly name like Ajax is so helpful. So what's the problem?
99% Bad?
In part, I'm being facetious. The title of this post is an allusion to Jakob Nielsen's famous post from October 29, 2000 called Flash: 99% Bad. In the article, Mr Nielsen says: "Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web's fundamental interaction style, and it consumes resources that would be better spent enhancing a site's core value."
I love Flash, so when I originally read his article, I thought he was off-base. That said, I did see where his resentment came from. Flash was a great tool, but in the wrong hands it was making a mess of otherwise reasonable websites. Interestingly, the three complaints Mr Nielsen had about Flash are directly applicable to Ajax. Because the data is delivered without a reloading of the page, the URL is not descriptive of the contents on the page. This was one of the biggest complaints about all-Flash websites.
Popularizing the use of Ajax also has the problems of popularizing Flash. Although Flash is well-suited for behavioral and programmatic animations, many unscrupulous designers would simply use it to present a canned introduction to the site, along with the perennially despised "Skip Intro" link. Likewise, JavaScript presents the unscrupulous designer with a similar metaphorical rope with which to hang himself.
Take, for example, the design of the Designing User Experience (DUX) 2005 website. It's a nice looking site, as one would expect from a conference of user experience design, yet clicking on the links reveals a deeper problem. The content is replaced using JavaScript, and thus the URL of the page remains fixed even as the content changes. This prevents someone from bookmarking or sending a link to a certain piece of content to someone else. The people of Zago Design have ingeniously replicated the same poor design from their own website here for the DUX conference.
All these issues are not inherent to using JavaScript, nor are they inherent to using a full Ajax approach. Indeed, the DUX 2005 website is not written using XMLHttpRequest at all, even though it does rely on XHTML+CSS, DOM, and JavaScript. Why then do I claim the Ajax is 99% bad?
The Rabbit Hole
In addition to the reason that popularizing Ajax is giving unscrupulous designers rope to hang themselves, there is one other fundamental point that erks me.
First, the two examples that Mr Garrett points to do not qualify as Ajax. Google Suggest doesn't use XML/XSLT for data interchange and manipulation. It uses JavaScript arrays. Why did Mr Gibbs choose JavaScript arrays over XML/XSLT? Because it's a better approach. Does Google Suggest use XHTML? No. Why not? None of the Google sites save Blogger rely on XHTML code. So for someone to point to Google Suggest as the canonical example of their newly coined term, when in fact it doesn't match two of the five criteria is not only incorrect, it's a misrepresentation.
Adaptive Path is looking to sell a service. Telling people "this is how we build things, which is almost like how Google does it, but they use a slightly different approach 20% of the time" is much more complex than saying "Google does Ajax, and so do we." Unfortunately, this is, at worst, a lie and, at best a stretch.
1% Good
What's really going on here? Well, despite my complaints, I do want to give Adaptive Path credit. They have started a dialog around these architectural issues, and that is a great thing. It's gotten a lot of people eager to try some of these techniques out.
37 Signals put it best when they said: "As with anything, it’s not the technology that matters, it’s the proper application and the execution of that technology that counts. And most of all it’s how well we hide the technology."
I believe this is part of the reason for Google's success. Instead of writing a paper on the five technologies you need to make a cool website, they hired Chris Wetherell and Aaron Boodman and got to work.
Part of me wishes the Adaptive Path article had simply stated: Google has been writing madd JavaScript, and we think that's cool.
Posted by johnnie at 12:04 AM | Comments (19) | TrackBack
May 05, 2005 9rules Network
I'm now a member of the 9rules Network. What is it? It's a group of designers, bloggers and... people with websites... like me. How did I get in? I read 9rules regularly and I noticed a post on Whitespace that said they wanted to grow the network and were accepting submissions for sites for a limited time.
Some people currently in the 9rules Network include:
The man behind this whole operation: Mr Paul Scrivens of CSS Vault and other operations; a wine site Corkforce.com; nerdery sites like Forever Geek, Insert 25 and The UberGeeks; artist/Designer Erik Sagen; designer Mark Boulton; students like Mike Rundle; marketers like James Archer of Forty Media and their site The Return of Design; and of course the design site Whitespace.
What do I hope to get out of this? I don't know. It just felt right to me. I believe the internet is a social platform and this was a good opportunity to be... social.
Posted by johnnie at 01:56 AM | Comments (1) | TrackBack
March 06, 2005 The discHub
The Product Design division at Stanford University is a rare and wonderful program. In combination with one of the world's best student machine shops, it gives students the tools and support to build pretty much anything they can think up.
Alex de Rouvray built a CD storage solution for his senior project in 2001. Stanford emphasizes finding a unique point of view, and for him it was figuring out what to do about the temporary storage problem: those CDs stacked around the computer or stereo because the person needs quick access to them. The discHub was born.
I've been using the discHub for about a year now, and it's handy to have around. With the number of discs burned off of a spindle, having some place to put them so that they don't get scratched before they're moved to a book sleeve is convenient.
Jon Bruck worked with Alex to bring this product to market. They have a website where you can buy one for around $12. You can also get one for free if you sign up for Netflix through the website.
There are competing products but one thing that's interesting about the discHub, in addition to the product design, is how it's being marketed.
It's tapping in to the power of the blog community: site's like Josh
Rubin's Cool Hunting, Gizmodo, Engadget and others. With the help of RSS tools like Bloglines, blogs are becoming a more common way to find out about relevant news and products. Now if I could just get a strong collaborative filter, I'd be all set.
Posted by johnnie at 09:08 PM | Comments (0)
February 01, 2005 Steve vs. Bill
Steve vs. Bill: Click here to play.
The game is written using JavaScript, XHTML and CSS. I would normally do something like this with Flash. It's essentially a self-contained entity in that it doesn't interact with the rest of the page elements. But there's nothing like the joys of JavaScript: fighting with the pseudo-science that we call object detection and the disgrace of wasting valuable seconds of my life dealing with the bug ridden mess that is Internet Explorer on the Mac.
Posted by johnnie at 11:14 PM | Comments (0)
January 29, 2005 Akash K: Aesthetic Minimalist?
Original Post: 04 Jan 2005
Updated: 27 Jan 2005
Updated (no date change) to remove last name
"Good artists copy, great artists steal." This quote is widely attributed to Pablo Picasso. Only someone as familiar with the ethos of postmodernism as Picasso could say something like that and have it make sense. What does this have to do with our friend Akash? Well, it seems that he has taken the words of Picasso a bit too literally. Here we see Akash's site on the left, and mine on the right:
Akash and I seem to have a lot in common. Not only are we stylistically similar, but his XHTML and CSS code is identical in structure to my own. Perhaps imitation is the sincerest form of flattery? But if imitation is so sincere, then why does his website circumvent any mention of this act of kindness? There are many reasons to pull up a context menu and choose the convenient Save Page As... option. You may be curious to see how someone accomplished a particular design. You may be a student and not know any better (although this is a bit of stretch if you attend MIT as Akash does). Or you may be too busy to be burdened by doing the work yourself, and just decide to steal it outright from someone who's already accomplished what you want.
I don't fault people who aren't web designers for wanting to borrow a fully fleshed out website design from someone who's already worked through the details. What I don't understand is the desire to then pass off what you've created as something homegrown, novel, and worthy of admiration, as Akash’s About page does:
"As for the visual structure of this website, I will reiterate my appreciation of aesthetic minimalism. I have always been attracted to the understated power and elegance of simple websites. I will hold my website to the same high standard, and to that end, will attempt to keep all unnecessary clutter away."
Being an aesthetic minimalist such as myself, my recommendation to Akash would be to wrap the script code on his index page with p tags so that the page will validate correctly as XHTML 1.0 Strict. If you're going to steal my stuff, at least don't muck it up.
Update:
Akash contacted me a while back (I was in Brasil and didn't have a chance to respond until now) to apologize. He's taken down his site. He informed me that he was sorry if his actions were construed as nefarious; he was simply using the source code as a way to get introduced to XHTML and CSS layout.
What happened is actually quite common. Greg had a similar experience just the other day.
I told Akash that I hope he gets a chance to do a revision to his website, and to drop the "training wheels" code he was using. I'm even willing to help out. In the end it's important to keep a perspective on all this. In the words of Greg: "Life is too important to waste it trying to understand design and how it relates to intellectual property law." It's time to move on.
Posted by johnnie at 09:23 AM | Comments (1)
November 30, 2004 Simplicity
Over the past year I've been thinking a lot about complexity. Adobe software is highly complex and requires a significant investment of time and resources to fully make use of its power. The products, even the consumer line, were not designed to be used by a computer novice.
But what I've been thinking about isn't necessarily around changing that. It's not about taking Photoshop and making it a three-button application. Solving the problem of complexity is not necessarily about simplification. If you take Photoshop and make it in to a three-button application it is more simple, but it's not a better solution to the problem.
To really solve the complexity problem you need to go through an exercise of distillation. Tackling it from the perspective of a economy of means. Part of the success of the iPod (which is now bringing in 23% of Apple's overall revenue) is that they've limited themselves to just a wheel and five buttons. That economy allows them to think carefully about how things work and relate to each other.
In the software world it is quite difficult to limit yourself to four buttons and wheel. It's just too easy to add another button, add another menu. Google has been trying hard to do this, and for the most part they've been successful. They only have 20-something words on the google.com page, so they must be successful at this. Or are they? Have you clicked the More link off the main page at Google.com? Is that economy of means? Is that distillation? You can sweep things under the rug and most people won't notice, but that's not ideally what you want to be doing.
So why do we do it? Why is a company like Google who began so meticulously at first with the goal of the uncluttered, focused interface now pumping out Froogle, Picasa, Gmail, Orkut, all with inconsistent, unraveling interfaces? Is it really that superficial? Is it really about just having a clean introductory page, and then pushing the complicated mess out to another area? This is a solvable problem, but I suspect the tools we need to solve it are different than the ones we've employed so far.
Software design as a discipline has yet to figure how to keep its greatest asset, the "soft" part of software, from barfing a sea of indescript icons, countless modal dialog boxes and a myriad of Don't Show Again checkboxes all over the place.
Posted by johnnie at 11:28 AM | Comments (0)