Challenge 02: Tab Interaction

This post is in response to an E-Learning Challenge — a weekly challenge presented by Articulate’s E-Learning Heroes Community.  The goal of these challenges is to “learn, share, and build your e-learning portfolio.”

The Challenge:

Challenge 02 asks users to “show and share your best out-of-the-box ideas for an innovative tabs interaction.”  The criteria was to create a 5-tab interaction (whoops…only made 4 – easy to add a 5th though), the tabs had to be on the left or right, and they had to be persistent over slides or layers.

The Process:

Looking back at what I learned from my first challenge, I wanted to come up with an idea before just throwing things up on a slide and trying to figure it out.  I decided to go with a subject matter I am familiar with (poker) and felt that a listing of different poker hands displayed on various tabs would work well.  What took me the longest was trying to determine what I would use as the tabs themselves.  I like to build around a central theme and incorporate as much detail as I can, so I wanted to use something poker-related.  I eventually landed on the back side of a playing card, with a hover effect that resembles someone lifting up the corner of their card – a frequent move in a poker game.

My card “tabs” in a normal and hover state.

The hover state was achieved in Photoshop using the Transform > Warp feature.  If I had spent a little more time on this challenge, I would have removed the red from the underside of the card.  I also included a felt background, a font that had a poker feel to it, and some playing cards to display the actual hands.  The final result turned out alright.

My Submission:

You can view my final submission here: Challenge 02: Tab Interaction

What Worked and What Didn’t?

For starters, I didn’t read the challenge closely enough otherwise I would have used 5 tabs instead of 4.  I think what I came up with is fine, and it looks nice, but there’s nothing super “innovative” or “out-of-the-box” in this design.  Solid, but not the best I could do.  On the positive side, I do like the hover-state of the playing cards.  The “peeking” effect turned out nice and fits in well with the theme.