What is user engagement anyway? (part 2)

May 19, 2010 - Lorraine

My colleague Jordan Willm's put his thoughts into words on user engagement in an earlier blog post. That inspired me to do the same.

About a year ago, I decided to challenge myself to take a deep dive into the world of web analytics. But because user experience design is at the heart of my practice, and not number crunching, I wanted the numbers to make me a smarter designer.

Fluid Web Typography - SXSWi 2010

April 06, 2010 - Jordan Willms

FIX CS4 Crash on Launch – Error 150:30

November 08, 2009 - Jesse Korzan

CS4 Crashing on Launch?

Slowly starting to migrate to CS4, started with Flash and then Photoshop ended the party.

Every attempt to fire up a CS4 product after installing Photoshop, I got this dreaded licensing issue... ERROR 150:30

Double take on user experience

October 23, 2009 - Lorraine

A few weeks back I was casually visiting my brother, and we got to talking about email. He'd just finished off his Master's Degree in Leadership, a program he completed about 80% online in a distance learning program. Alex's thesis on leadership in community gardening involved a lot of interchange with his adviser over the internet. He's a very social guy, and reasonably technically savvy. He has a problem. Turns out that with his email completed he was going to need another email account because the university account would eventually expire. He does have email for his day job, but he needs a personal one. I offer a simple solution... why don't you sign up for a gmail account? This is when he says, "I NEVER sign up for anything online".

Tools for Engagement: User Experience Offerings at Work at Play

September 22, 2009 - Lorraine

At Work at Play we offer services that may not be top of mind when you think about designing or redesigning your site, but are key to maximizing your investment. We know that all great web sites offer both something valuable to users and a solid return on investment to your business. To achieve this value, our design team applies a well-honed skill set to craft experiences that motivate and involve your customers, fans, and site visitors. This approach supports your success through focused and productive online engagement for your customers.

Friday Link Bomb

August 07, 2009 - Jesse Korzan

The end of my Friday is usually sorting through open browser tabs, bookmarks, Twitter favorites and scribbled URLs in my notebooks. Thought I'd drop a Friday afternoon link bomb for our Work at Play fans of a few things that grabbed my attention this week.

Thoughts on Design and Fly Fishing

July 31, 2009 - Jesse Korzan

Lately I've been spending more time in the rivers near my house. As I endeavour to get my line out, trying not to hook myself, there have been moments when I feel like I am finally "getting it".

Konigi : Tools and content curator for UX designers

July 09, 2009 - Jesse Korzan

Konigi is a great website for UX professionals and those involved in the design of websites.

We love the Konigi OmniGraffle tools at our office; they are an indispensable tool in my bag of tricks.

Not your ordinary design gallery

I am a big fan of the showcase and blog. They find unique and compelling aspects that deal with all sorts of design problems. It's fast become a daily stop and a resource I'll flag for almost any new project.

Since we use Drupal a lot (like this blog), we noticed it's a fine Drupal install. I appreciate the subtle details, especially enjoying how the tagging is done, nice big images in the postings, and the home page design.

And it's very encouraging to see our own work in the showcase.

Our website is being "flattered": Should we open source it?

June 30, 2009 - Jordan Willms

Lately, the Work at Play website has been getting plenty of kudos and "inspiring" plenty of interesting imitation, including a couple of sites from India and Turkey. We believe imitation is the purest form of flattery, so actually everyone in the office is quite flattered.

WorkAtPlay.com How It Was Made: The Flip and Scale Effect

May 29, 2009 - James Andres

There has been great reception to the Work at Play website design and effects. We have received several emails from intrepid geeks wondering how we pulled off all that cool jQuery eye-candy. After writing a few of these "how it was made" emails I think a blog post is in order. Without further delay, here is the behind the scenes story on WorkAtPlay.com!

The Flip and Scale Effect

On the WorkAtPlay.com homepage we use the jQuery Flip! plug-in in combination with some custom animations to give the "Flip & Scale" effect. This is a little more complicated than one might think, and deserves some explanation:

• User clicks on a work sample tile image.
• The click is caught using a standard jQuery $(elem).click() handler.
• Due to how the Flip! plug-in works it isn't possible to just flip the work sample tile directly. Instead we replace the tile with an empty div of the same colour and perform the flip on that new div. We call the new empty div the "flip_side" because it will actually become the flip-side of the work sample tile.
• The flip_side div is placed using absolute positioning directly on top of the work sample tile. The work sample tile is then hidden with CSS to keep it out of the way.
• Now, finally, the Flip! plug-in is triggered on the flip_side div.
• When the flip_side div is finished flipping the Flip! onEnd call-back is triggered. We use the onEnd call-back to insert the content for the work sample's "flipped side". This content is cleverly ready and waiting inside a hidden part of the original work sample tile (view source on the WorkAtPlay.com home-page to see for yourself). Oh, we insert the content with a basic $(flip_side).html(flip_content.html())
• Ok, so far we've got a div called flip_side that contains the right content. But it's still really small and the content is all scrunched up. How do we make it bigger? The scale effect is solved by the jQuery $(elem).animate() method plus some handy CSS positioning
• The tricky part of the scale effect is figuring out how big it should scale and to what X and Y pixel co-ordinates it should move to. This is accomplished by the following formulas:
  • flipped_side.top = $('#work-page .wrapper').offset().top
  • flipped_side.left = $('#work-page .wrapper').offset().left
  • flipped_side.width = $('#work-page .wrapper').width() + 1
  • flipped_side.height = Math.ceil($('.work-sample').length / NUM_WORK_SAMPLE_COLS) * $('.work-sample:first').height()
  jQuery handles the actual animation for us, awesome!