You are currently browsing the monthly archive for January 2010.

I like documenting the previous work that I’ve done, so I’m posting some of the pages from PlayFirst.com that I worked on. Much credit needs to go to Colin Felton, Karen Chu, and Maria Waters, the designers at PlayFirst, for the exceptionally attractive designs they came up with. Sadly, pictures don’t do justice to the full experience since much of a UI is how it reacts as you using it, but I don’t feeling like doing a video, and the site is already changing, so I’m a little late.

Front Page of PlayFirst (Dec 2009)
The global nav, which includes the left sidebar, was all coded up by myself. Not shown is that there could be a popup when hitting this page that would display a marketing video to users who hadn’t seen it. Big game launches would use this feature, but since it was slightly intrusive (as popups are), we only used it for promoting the best quality games.
Front Page of PlayFirst (Dec 2009)

All Games Page
The All Games page listed, of course, all the games for sale. There was a feature to include an image with a link at the top of the page for promotions. This could be a rotating set of images that would change each time you hit the page. Next to the front page, this was the second most hit page, and that kind of exposure could drive traffic for important new releases.
All Games Page (no hover)

The fun feature I built on this page was a pop over for the game images. It would seamlessly display more information over top of an image that you hovered over. This could include game description, pricing, buy/download buttons. These would open as you hovered over an image, and go away as you hovered away. As you might notice between this and the above image, the popup image was perfectly aligned with the main page image giving it neat effect when it faded and out.
All Games Page (with image hover)

There were a number of things to consider while doing this feature. First, you only want one loading and opeing at at time, and you don’t want one opening if you scroll and hover over while scrolling. Popup placement was a changing target too if you scrolled any as the popover still needs to render perfectly over top of the image even if it moved a little. On performance, when you’re tracking hundreds of potential target images to activate the effect, that’s an event that can drag on performance if done without consideration (one key to the solution being event delegation). For this page, I had to make performance adjustments as there were over 700 game images on the page, and even though the popup was an AJAX created popup (created on hover), the hover over and off effects needed to immediately load and reloading each time perfect on top of the image even after scrolling some.

Another feature that you can’t see on this page without using it is partial image loading. The 700+ games are in a table that is filtered with javascript as you select categories on the left sidebar, or type in a title in the title filter at the top. The page needed to re-render the images instantaneously, but also only load the minimum number of images for the viewport. As you’re seeing only 12 or so of the 700+ possible images at any one time, I’d only load those plus a few extra for when you scrolled. And then, as you scrolled, new images would populate themselves just outside of the viewport, so you’d always see something, but the page wouldn’t get slowed by trying to render so many images, including when you filtered them by category, title, or some other criteria. (Obviously, people with javascript wouldn’t see these features, but the page would still work).

Detail Page
The game detail page was completely redesign and I did all of the implementation work for this very important page. There’s a slideshow of game images, and possibly a link to a game trailer. The buttons, try it, buy it, buy with PlayPass, would change depending on the game’s status (pre-release, in beta, live, etc.), and the user’s membership status with the site. The tab selection would change as not all games would have all the tabs. I made the tabs with AJAX enabled content loading. For SEO purposes, there were uniques pages with URL for each tab view, but if you had javascript on, then the content would fade in place of the content for the previous tab.
Game Detail Page

Another view of the detail page. This time with a non-PlayFirst game.
Game Detail Page (non-PlayFirst game)

Not all of the pages that I touched, or features I worked on, but these were the key ones that I had a lot of impact on. Overall, I helped reduce page load times by up to 45%. Average load time for the site dropped from ~6 seconds to ~4 seconds. The main reason for this was optimization of the thousands of images used on the site. Use of sprites for buttons and other elements helped smooth over interactions and such. Lots of fun, but I’ve moved on.

Advertisements