Kevin Cheng  

Redesigning the OK/Cancel Experience

April 1st, 2005 by Kevin Cheng :: see related comic

__Update:__ _Yes, this article, along with the terrible redesign we had, was an April Fool’s joke. We can safely say this has taught us definitively that design indeed does matter. If you think your eyes bled, I had to look at this for hours while I built it._

_The other interesting note are those who felt this design process was potentially serious. This, I must say, worries me somewhat but I’m sure it was a momentary lapse of judgement. Thanks for playing along with us everyone! We certainly have enough screenshots, from every browser possible!_

_If you missed the fun or are feeling masochistic, you can view the April Fool’s design. Just refresh to bring back the normal one._

After many months of work, we’ve finally managed to put together a redesign that we’re happy with. We realize that we only just finished a redesign a few weeks ago but as you probably could tell, it was a little too similar to our old one from way back. It was meant as a temporary fixture until we could roll out the design you’re seeing now.

As an exercise, we decided to do tackle this design with all the right process steps. This method had numerous benefits, not the least of which is the final product you’re experiencing - and I use _experiencing_ rather than using because that was our goal. One other major benefit was that by going through this rigorous process, we can rehash the steps we took and share them with our readers in hopes that others can learn from it.

##Brainstorming
Our process began with idea generation. Recently, we have been exposed to some excellent techniques for this phase. We began by doing some user research, holding focus groups consisting of some of our loyal readers and asking them questions like, “what colours do you like?” and “is this a good place for the comic?”. Different from the traditional focus groups however, is our approach to the data collection. While most use the outdated method of acting on common answers, we chose to give each participant a real say in the design. To accomplish this, we took one idea from each participant and combined it to form our initial design ideas.

One technique that’s been bantered about lately, particular last week by [Jeff Veen][1] is one on “method acting”. So Jeff showed us how by taking us to a comic store where we proceeded to “method act” the role of how comic readers read comics. The exercise was incredibly insightful, although I am still unclear of the timeline for Superman and how it works with the different realities.

##Information Architecture
When we completed our initial brainstorming, we continued onto the IA. Here, we recruited [Thomas Vander Wal][2], credited for inventing the term “folksonomy” to help us create a new navigation structure. The result is a nav structure that was based off of the most common tags used to describe items. Thus, “Home” became “Me”, “About” became “That”, “Archives” became “2005″, “Features” became “Thingie”, “Store” became “Orange”, “Resources” became “Resorces” and of course, “Jobs” became “Money”.

However, before we implemented this, we got a second opinion from Peter Merholz, who thinks we’re simply wasting our time creating any user experience at all and that we might as well just [go and die][3]. Or perhaps we misunderstood.

##Design
In a bold move towards more fluid design cycles, we skipped past wireframing straight to the design process. We were lucky enough to get assistance from [Doug Bowman][4] in the visual aesthetics. He encouraged us to utilize the subtle nature of drop shadows and gradients and we took his advice to heart.

We got addtional feedback from the ever gracious [Dave Shea][8] on typography. “Go with the theme,” he said, “you’re a comic site and you don’t use Comic Sans MS? What are you thinking?”

##Testing
Ever since our [Usability Gang War][5], we’ve been able to talk to some of the people we featured. So who better to ask to do usability testing than Jakob Nielsen himself? And a good thing we did do testing, too. While we had some really solid people doing our designs up to this point, it seemed we were severely wrong in one or two areas. In particular, Nielsen revealed to us that the text font we were using was entirely too appealing and that we should stick to more common fonts that people are accustomed to seeing. Further, our link colours and cues were apparently insufficient - some things like our comic navigation didn’t have any underlines to show they are links. Luckily, with the usage of stylesheets, we were able to quickly adjust the text colour and size.

No redesign would be complete without some input on accessibility so who better to consult than [Matt May][6]. Matt’s W3C experience was invaluable in this project. He explained the importance of high contrast text against background to aid the visually impaired. We think the colour selection implemented here would even get the thumbs up from [Joe Clark][7].

##Wrap Up
This entire process was approximately two months from start to finish. That may seem rather exhaustive but we got to work with some of the best people in the industry. We think the end result was so successful, in fact, that we’ve already started another cycle so that we can bring you another design in a couple of months. In the meantime, we’d appreciate any feedback you might have on our brand new design!

[1]: http://www.veen.com/jeff/archives/000707.html “Method Acting User Research”
[2]: http://www.vanderwal.net/random/entrysel.php?blog=1651 “Vander Wal”
[3]: http://www.peterme.com/archives/000467.html “User Experience is Dead”
[4]: http://www.stopdesign.com/ “Stopdesign”
[5]: http://www.ok-cancel.com/comic/21.html “Nothin’ but a UCD Thand”
[6]: http://www.bestkungfu.com “Best Kung Fu”
[7]: http://joeclark.org/ “Joe Clark”
[8]: http://www.mezzoblue.com “Dave Shea”

66 Responses to “Redesigning the OK/Cancel Experience”
Molly E. Holzschlag wrote:

Kevin, this is sheer genius! The colors are so - colorful. And the typography, my goodness. The right alignment and clear body text is such a step up from your old design. I could go on, but I know others will have many other wonderful things to say. Great work! You’re hired!

Andre R. Rochon wrote:

What? No Flash Intro?

Pfff… :-)

Joe McBride wrote:

This is a crappy design!

What were you guys thinking when you used pink for your background. You should have used something more dignified… like purple.

Peter Cooper wrote:

My browser apparently cached your CSS, so I had no idea what you were talking about until I happened to hit Refresh. It looked quite normal to me.

Mike Rundle wrote:

Ohhh baby! Looks good guys!

Looks like a damn easter egg exploded :)

Bob Baxley wrote:

So nice to see that right-aligned text is finally gaining the recognition it deserves. Combined with MS Comic it is so incredibly legible that I can almost read it without my glasses.

jeanette wrote:

april fools… right?

Ariel wrote:

Oh man, can I use some of your ideas for my site? The right alignment is really helpful, and love the way you’ve really bucked convention with menus that hide depending on which page you’re on. That’s INNOVATIVE! Way to think out of the box.

Ariel wrote:

One negative though: Why isn’t there any sound? I want everyone in my office to know that I’m looking at a hip cool site. Can you add some Ace of Base at high volume, at least on the home page?

vanderwal wrote:

The user testing must have been a huge success.

BlueSkyRanger wrote:

Ha - ya got me! :)

Only one problem: your site looks pretty much the same in different browsers. You really should fix that. There’s plenty of incompatible CSS out there - the *experience* would be so much more fun if it rendered unpredictably in Firefox or Netscape.

Matthew Oliphant wrote:

I say leave it like this for a while. You’ve got great content, great traffic with many repeat visitors… Let’s see if visual design really does matter!

Also, I am sad there is no blink.

chicwithtamborine wrote:

happy belated easter?!

eamonn wrote:

sorry guys you should view this in AOL browser it doesn’t look that good

eamonn wrote:

In firefox it looks better but still it won’t fit on on page had to use the scroll bars to see it all.

White Rabbit wrote:

I thought the horizontal scrollbar was a nice touch. Very artistic.

Tom Chi wrote:

Oh man, I like how when you click to an article page and click back to main, the comic *disappears*. That is funny in so many ways — or how on the archive page, the archive navigation appears *under* the advertising! Way to drive revenue :) ! This is awesome.

eamonn wrote:

In Netscape guys it looks better after the front page that still looks a bit funny.

Kevin Cheng wrote:

The goal of the horizontal scrolling was to evoke a comic strip feel where the viewer traverses from left to right. Each scroll is like a “panel” in a comic.

eamonn wrote:

In IE all the panels are overlaid on top of each other so they obscure some of the content. I don’t mind horizontal scroll bars if I can see all the content.

X wrote:

Next year, please, maybe just a made-up HCI innovation referenced in the article? My eyes hurt now and I think having looked at this page long enough to type this comment has caused my brain to start leaking…

Jakob Nielsen wrote:

I am glad that you are following the usability guideline to optimize the homepage for the screen size your users have. I have an 2048x1536 monitor and it’s unpleasantly rare to come across websites that require the full width of my screen to look good. Your site is proof that I didn’t waste my money.

BJ wrote:

… this redesign is a joke, right!? :)

straight wrote:

I LOVE horizontal scrolling almost as much as I love Comic Sans MS not much :-]
But yeah, site redesign is beautiful. But I guess that sad thing is that some places would actually consider a site like this an upgrade (www.greenville.k12.pa.us)!

BJ wrote:

Today it’s April 1st… This is a joke, right!… please tell me this is a joke!

BJ wrote:

I’m fading…. like the pope!…
(please excuse my dark religious humour)

David Heller wrote:

Guys, there is nothing blinking, moving, and there is no sound … I’m sorry, you didnt’ meet my user requirements so that I’d be twitching when I’m done viewing your site.

Seriously though there are some things I DO like about this. But I’ll plead the 5th. ;)

jeanette wrote:

hey, comic sans ms (eww!) is not to joke about. i think that was the kicker…

Dustin wrote:

i don’t know why it took me so long to figure out this was a joke.

Carolyn Snyder wrote:

Having the article title be a link to the same page is a nice touch. Good for users who appreciate that extra bit of reassurance that this is indeed the page they’re on.

Sarah Brodwall wrote:

What, no blink tag? 1 Th0Ugh+ J00 9uY5 W3r3 133T!!!!!!!111

Shipra Kayan wrote:

happy april first

Shipra Kayan wrote:

happy april first

Adriana wrote:

Oh dear! you guys REALLY scared me…
Happy April’s fools!!!

Chris McEvoy wrote:

This design is soooooooooo yesterday man.

Chris McEvoy wrote:

That last comment fell a bit flat as it is actually “2 Apr 2005 08:35am” in the UK.

Kevin Cheng wrote:

i got the joke, chris =) but we’re gonna keep it up a bit past the weekend since it went up late so the asia and euro people can check it out.

maybe we’ll just keep it ;)

Cindy Lu wrote:

I think the process you took is a great demonstration of usability process. I two suggestions:
- Create a persona for your site a typical scenario and let that persona to experience your site.
- Pick up a user who visits your site very often and watch that person using your site.

I am sure you will learn something new.

I have a comment on your writing:
“We took one idea from each participant and combined it to form our initial design ideas”
Is this a joke? Maybe the ideas from everyone happened to form a cohesive design that just fits your goal?

Problem report: My browser cannot render the home page well. I need to scroll the page horizontally. I think it is a technical problem in your site.

Jim McCusker wrote:

I’m not sure I like this design. The comments block seems to stick out from the beige block, but not at any proportion that looks right. It just looks misaligned, rather than jaunty and overlappy. The google ads overlap the site logo (there should be a decent buffer between them), and the copyright notice in turn overlaps the google ads. Also, on the main page, the copyright notice overlaps the comic itself, and the lead in to the latest commentary is so far on the right that I have to scroll horizontally to it on my wide screen powerbook!

Personally, I find the color blocks distracting, and a throwback to the early 90’s when fashion designers started to knock off Mondrian onto everything, except here it’s done in 80’s pastels.

Really, I love the comic, and love your commentary.

Jim McCusker wrote:

God, I read this on Saturday. Completely forgot…

katie wrote:

genius.

Elly wrote:

… my head hurts now.

little miss demosthenes wrote:

pure genius, guys. i thought i had it when i did my gerbil paper (http://b-con.us/demie/paper.html) but i guess i’ll just have to admit defeat, eh…?

/me sulks in a corner

there’s always next year. yes, next year. *taps fingers maliciously*

Brendon J. Wilson wrote:

My eyes! My beautiful, previously gamut-corrected eyes!

Dan Alonso wrote:

This ig great.. It fits perfectly in my 800x600 screen

Andi Haswidi wrote:

err.. genius?
i suppose it takes one to know one ~:>
watch out for bird-flu guys

BOB wrote:

MY EYES ARE BLEEDING!!!!

Wendy wrote:

You know, it is sad that you had to compromise the visual design so much for the usabillity on this site. We usability people can be so demanding sometimes…

Bob Salmon wrote:

KC, if you go ahead with your threat to keep this splendid design I will send all my children over to you (wherever you are in the world) and let them loose on your computers and then those of your hosting company. I will let them play with your back-up media as well (you do back up, right? too bad).

My five year old will use at least one in his attempt at world domination. Unfortunately for him I haven’t finished training him yet, so MI6 will find out so oops! you will be spending an extended time at her majesty’s pleasure.

My three year old really likes pouring things, so before I pack him onto the flight I’ll make sure he has a few tins of baked beans and golden syrup.

My one year old needs no help, as she’s perfectly good at bashing and trying to put into her mouth. Her feeding experiments are coming along well, so maybe I will give her some help with something like mashed banana (you do like sticky keyboards, don’t you?)

You have been warned. Wacky site designs might be good for half a day, but incarceration on terrorism charges is for life (if the UK/US governments have anything to do with it).

Tom Chi wrote:

Yeah man. I actually needed to look up an OKC article and dreaded coming back because of the design. The madness must stop! Now where did we put that backup CSS file? …

Tomas wrote:

I’m glad that at least the comic strip showed in Safari and Firefox on the mac ;)

shaon wrote:

cool way to fool all!

thelearner wrote:

Niiceeeeeeeeeeeeeeeeee.

Now get back to noooooooooooooooooormal. Dddddddddddddddddo u hear meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee?

Lokesh Sapre wrote:

Somebody pls tell me its a April Fool joke. Right?

Gerard wrote:

Apperantly the site wasn’t tested with (my;-) 1024 picel laptop running Firefox. The homepage doesn’t fit on my screen and the copyright notice is over some more important other text.

On other pages there are also some strange things happening in Firefox.

I’m not sure how it was with the previous site, but why change?

eitanko wrote:

Hi, is this some kind of April fool’s joke??????
Im actually experiencing some kind of sickness (no offence guys, Literally I feel dizzy)
I cant read the small fonts, my eyes are going all over the place trying to focus on some safe color.
I Hope you still have the old design.
Im Leaving now.
bye

Moi wrote:

Hmm. Maybe after April 1st you should have changed it back…

Bob Salmon wrote:

Have you considered doing something for CSS Zen Garden? I’m sure they’d love this design to be preserved via their site. (Anywhere but here? Please?)

Luís wrote:

ok…. it was a nice joke, now put back your true version!!! PLEASE!

Rich wrote:

Isn’t it bad luck to leave the April fools joke running?

Kevin Cheng wrote:

It’s hard to only leave it up for half a day when we have so many different timezones. Because we posted at noon PST, this meant many people in London onwards probably wouldn’t see it until Monday morning so we kept it up until now. It’s finally gone though. Phew.

Tom Chi wrote:

To answer Matt Oliphant: it looks like design *does* matter. After the second day, I could hardly bear to look at the site anymore.

Tomer Chachamu wrote:

(Please notify people when you delete theit posts.)

OK, so they aren’t trying to fool us any more, so why not leave it for this comic? At least take a screenshot for commemorating it!

Irek Jozwiak wrote:

I suffer from a daltonism. What’s this quarrel all about??? :)

Transom Flyer wrote:

Your real design has a CSS rule that sets the body font size to 70%. Why not let users decide what font size they want? For me, 70% of my preferred browser size is too small for me to read comfortably. I think web sites should assume that “medium” is the right size for the main text of the site (articles, etc.).

Kevin Cheng wrote:

By setting 70% instead of say, 10px, we are giving the readers the choice. Letting users choose font sizes doesn’t mean we shouldn’t try to design at all. In general, “medium” is interpreted too differently and inconsistently to be used. My view of CSS is I can say “here’s my design of the site, and here’s how the bulk text looks and how the headers look, etc. if you don’t like it, you can change the sizes or even completely put your own stylesheet over it and that’s fine.”


Leave a Reply


OK/Cancel is a comic strip collaboration co-written and co-illustrated by Kevin Cheng and Tom Chi. Our subject matter focuses on interfaces, good and bad and the people behind the industry of building interfaces - usability specialists, interaction designers, human-computer interaction (HCI) experts, industrial designers, etc. (Who Links Here) ?