The confusion of mixing positives/negatives
People say using double negatives in the English language confuses the reader, but mixing positives and negatives in messages and interfaces is just as confusing as well. Here are some examples I've seen out and about:

The "OFF" button for the A/C in a car. Turning "ON" an "OFF" button seems counterintuitive. Should it have been an "ON" button that the user turns "OFF"? Perhaps the design decision was due to the fact that most people these days always have the A/C on, and having any button be turned on the "ON" position might be annoying. A sign promoting the sustainability of farmed seafood at Whole Foods. It compares the Whole Foods and other competitors on typical characteristics of farmed seafood, which are listed on the left column. Farmed seafood generally has a bad rap, so you'd expect the list on the left to be bad characteristics, which is it, but only for the first 5, after which it switches to good characteristics for the last 3. On a cursory look, you could assume that Whole Foods actually possesses a few of these "bad" characteristics with farmed seafood, which is not their intention. One solution could be inverting the bad characteristics so the list can be all good. "Added preservatives" would then be "No added preservatives."

Making your interfaces more modular
When people talk about modular design, they usually refer to systems with physical pieces, with smaller parts that can be used for different purposes. I like to refer something called "web modularity", where certain parts of an interface can be switched out for different purposes.

Here's an example of an interface that we've made more contextually modular. On Kongregate.com, there is a registration lightbox for people who register from the game page. This is the old version - nothing noteworthy except it is a right-aligned form layout* (with the space in the rightmost column available for real-time error handling).

We redesigned them to be contextually modular so that we could swap in different messaging for why you should register, based on how you called the registration lightbox. It opens up a lot of opportunities to deliver relevant messages in context with the user's last action. It's also important to keep the design consistent to not confuse the user between the variations of the registration form.

For example, this is the default message guests will see, describing the benefits of creating an account:

If the guest calls the registration lightbox from a recommended games unit, they'll see a version upselling personalized game recommendations:

Contextual information with a consistent design provides the guest users with less friction when signing up for your site. Content is directly relevant to the last intended action of the user, giving them a strong reason to register.

*By the way, if you are not familiar with Luke Wroblewski or any of his research on web forms and usability, do so now. This PDF has a lot of useful juicy data on user behavior on forms, from his book Web Form Design.

When I look to hire designers for our team,
I always notice that a lot of hopeful candidates can't quite get their applications in a presentable state. There's a really great post on Design Staff on how to review designer portfolios that I think is pretty much spot on, and even if you're applying for a designer position, it's a good read to get a sense of what employers are looking for.

Here are some of my own notes when I read applications:

  • First impressions matter. Make sure there are no spelling and grammatical errors. Is the font size hard to read? Is it hard to access your portfolio or your resume?
  • A lot of times portfolios look great and are visually appealing, but it has to be well designed as well. Do you make it easy to navigate and showcase your work? You have complete reign over your portfolio, so make it represent you as a designer.
  • It helps to read about your role in the projects in your portfolio and how you tackle each design problem. If you don't have a lot experience yet, you can write up a case study of a project you were involved with to send over. I'm looking for a sample of your work and the thought process that went with it.
  • Saying you are a rockstar won't say much about you, so don't say it. Prove it.
  • Do you articulate well? Can you convey your ideas and stand behind your decisions? Having good communication skills is not a plus as a designer, it's a must.
  • A huge plus (to me) if you've built your portfolio site yourself. And if it is, make sure it's clean and well written.
  • Lastly, a little personality goes a long way. Employers value culture fit more than ever, so make sure your personality shows through.

Emotional Design. Recently, I've been thinking about the role that emotion plays in brand and design. Aarron Walter wrote a book on the subject based on his work and experiences at MailChimp. At Kongregate, we're constantly tweaking the exact moment you have leveled up or earned a badge. We want make you feel positively rewarded for the time and effort you just spent on our site, so that you'll come back.

Here's a comparison - watch these two commercials for the 2012 season from the Bay Area's two baseball teams - the Oakland A's and the San Francisco Giants. Which one are you more drawn to?

The Oakland A's are known for using humor in their commercials, and in fact, this commercial is pretty funny. But is that enough to get fans (and more importantly, non-fans), to go to A's games?

2010 was a great year for the Giants, obviously, after winning the World Series. 2011 was led by many setbacks through the season, including injuries and an underperforming offense. The main intent of the commercial is to show that the team has put the 2011 season behind them, working hard to train for a new season. Additionally, they really pull you in by connecting the fans with the players themselves, that we are just as much as part of the team, like Pablo Sandoval or Buster Posey. By going to the games, and supporting and cheering for the team, we can contribute to something big, and everyone together can accomplish great things for the season.

Of course, their slogan, in three words, already does everything I just described. "Together we're giant."

Love what you do. Don't be afraid to fail. Credit: Jessica Hagy
You know when your advertising is successful when people are putting your branded terms in headlines and articles.

When Kongregate was looking to redesign its homepage, one change that I wanted to include at the same time was how our site navigation worked. The first version of Kongregate had five simple navigation buttons across the top - Home, Games, Upload, Community, and Forums.

As the site grew, we expanded to a horizontal layout for both the global and sub-navigation links. There were a couple main reasons we did this - we were trying to avoid a vertical menu dropdown that would overlap the game swf on a gamepage (issues were both technical and UI related). Having a horizontal sub-navigation would also mean that we would be able to to keep subnav links persistent on any given page.

We started looking at mega drop-down menus when very few of us at Kongregate were using the horizontal navigation. In fact, I was often typing in the URL in the browser to get to the page I wanted instead of using the navigation. Seems pretty backwards, doesn't it? Because the site now had so many pages, it was necessary to have a clear content hierarchy and categorization of the pages on our site.

You can also see we were able decrease the height of the header/navigation to pull content higher on the page.

We designed the new navigation and homepage together, but handled it as two separate engineering projects, with the navigation going out first.

What was most interesting was the user response. Everyone complained. Ok, that's not true. But there were a lot of grievances. People talk about how when you redesign stuff on your site, people always complain because they like to. But honestly, through all the product changes that we've done in the past few years, there are times when no one complains and actually praise the changes that you done (amazing). When we added a leaderboard ad unit on the homepage, one of the first prominent ad units to go up on our site, to our surprise, our users didn't even blink. You get used to ignoring the language of the outlandish responses, but you can't ignore the volume of negative reaction.

We listened to their suggestions and implemented the best of them in the next set of iterations and split tests, but the responses never really settled. But then something magical happened. A couple months later, we rolled out the full homepage redesign, and complaints finally subsided.

Our users started saying that the navigation now makes more sense in context with the new homepage, and asked why we didn't roll both out at the same time. At the time, I thought it was quite astute for them to notice that, but why shouldn't they? The opinionated ones are usually the ones most active on your site. Even if they are not familiar with the ins and outs of web design, they know when something is off.

tl;dr Never underestimate your audience.

My Desktop. The calendar is from RePrint Calendars - it's free!

@font-face and performance by Steve Souders

Referred back to this super informative article when deciding if we should use @font-face for certain headers on Kongregate's homepage redesign.

I received a Kindle 3 for Christmas -- this past year…and I absolutely love it and carry it with me always.

One thing I did find lacking was the variety of Kindle covers available, especially compared to the number and variety of covers for the iPad. I spent a long time figuring out which one I should get; I preferred a canvas or linen cover (aka - not leather), and something that was thin. The Dodocase cover is super cool, but I did't like the frame that went around the device. The Moleskine cover would have been good too, but I didn't care for the notepad (I don't usually take notes when I read), and they don't make it for the new generation of Kindles. I would have love the cover by Acme Made, but they did not make them for the newest Kindle model.

I ended up getting the Kaddy Nylon Folio cover by Incipio. It's made out of Nylon but feels like canvas, and it's pretty thin. The front cover folds all the way back if you want to hold it with one hand.

While I was in this cover searching process, I needed a temporary case so my Kindle didn't get banged up. I went into the drawer and pulled out a plain 'ol padded envelope; it's practically the right size. I had one that was made of rough kraft paper, but any bubble mailers will do.

It really worked great. It was slightly big but was still a good fit, and it only costs $2. If you'd like to get a bit fancier, The Container Store has a great selection. Of course it has its downsides (not completely enclosed, easily subjected to wear-and-tear), but it is a really affordable alternative to spending $30+ on a "real" cover.

Jumping for joy. 1) NL West  2-4) NLCS  5-6) World Series

The San Francisco Giants are World Champions.

IE bugs are the bane to every front-end developer's existence. Fortunately, there's a wealth of resources out there from awesome people who have been able to figure out most of these bugs, or at least how to deal with them! Here are some recent gems involving CSS:

  • For id/class combined selectors (#id.class), IE6 only understands the first instance in the stylesheet and ignores all subsequent combinations using the same id. This also applies for multiple class selectors (.class.class). It makes things more difficult when used with the IE6 bug that only recognizes the last class listed when multiple classes are combined. For example, IE6 reads .class1.class2.class3 {rules} as only .class3 {rules}
  • IE6 only accepts display:inline-block for naturally inline elements.
  • Empty tags creates extra space in IE. Place comments inside the tags to remove them.
    <div class="clear"><!-- --></div>

You've probably heard of using CSS sprites as a way to reduce the number of HTTP requests your site makes to the server, but I haven't heard a lot of talk about combining different animated loading GIFs into one sprite. Your site probably shouldn't be using too many of these GIFs in the first place, though at one point, we were using as many as 7!

So to make the sprite, we first needed to decide how many spinners to include in one sprite. We decided on combining 4 into 1 - one for white backgrounds, one for light gray backgrounds, one for dark gray backgrounds, and a bigger one for more stand-only purposes.

The trickiest part is that all your GIFs need to have the same number of frames and the same framerate. Since this is not super fancy animation, it's not too hard to find or alter any existing GIFs. You just need an app that allow you to create or edit frames. There's a pixel-image editor for Macs called Pixen that's free and no-frills. I will also use Photoshop as well (it's at "Animation" under the "Windows" menu option), though I think you can only use it to create, not edit.

I pick what will be shown at which frame, and voilà! I have a spinner sprite (see it in action). Although it increased my overall filesize from 6KB to 8.5KB (sprites usually decrease in filesize), it is well worth the server requests it saves.

We've been acquired by Gamestop!
Watch a video message from our CEO regarding the details of the acquisition and read some press coverage here, here, and here.

So what does this mean for Kongregate exactly? Well, here are some main points:

  • Kongregate will operate as an independent, wholly-owned subsidiary.
  • Our CEO will report directly to the president of Gamestop. In other words, the CEO of our team of currently 22 people will report to the president of Gamestop, currently of about 55,000 people.
  • Gamestop shares the same vision for Kongregate as we do; otherwise, this deal would not have happened. They need our help to lead them into a digital strategy that'll expand beyond their brick-and-mortar stores (think Blockbuster and Tower Records), and we need their help with additional resources to achieve our own goals.

I have been with Kongregate for about 3 1/2 years out of its 4 year existence, and it's been truly a privilege working at a great company and with such a bright team on building a successful product.

Website launched! After many, many revisions, the newest version of this website has finally (soft) launched! More to come in this 'Thoughts' section, as well as more complete Portfolio and About Me sections.