Turbo Charged Tabbed Interactions Design

I “stole” the name for this blog post from a fellow Articulate e-Learning Heroes community member, Jackie Van Nice who used this term when referring to this tabbed interaction design I entered in one of the weekly challenges (click on the image below to view the demo).

tabbed interaction
Click on the image to view the interactive demo

I’m sure at some point we’ve all developed the standard tabbed interaction with no bells and whistles (or animation) because that’s what the client wanted, or that’s what suited the topic or learning solution – but for me this sometimes gets a little boring and I like to jazz things up a bit, even if it’s just to challenge myself to re-create something I’ve seen.

This brings me to an interesting question – where do you seek inspiration for your designs?

When I’m designing, I seek inspiration from a number of sources. Sometimes I’m not even looking for it and it appears! Other times I’m looking for something completely different and see something that I want to use as inspiration for a design.

That’s what happened with this tabbed interaction design (below) – I just had to see if I could work out how to develop this after coming across the categories side-bar on this website blog page.

This is what the sidebar looked like.

And this is my second design for the #199 Tabs Navigation challenge, which I hadn’t planned, but was inspired to share.

tabbed interaction animated design
Click on the image to view the interactive demo

The Process and the Design

I only spent a few minutes setting this up in Storyline 360, then a few minutes more to fine-tune the design and animations.

Each tab has three sections, with the centre and clickable section having a hover state (with the tab colour and a wipe from the left animation) and a selected state (the solid tab colour).

The tab content area is on a separate layer with a trigger to show the layer when the tab is selected. Of course, the tabs are all part of a button set so only one can be selected at a time.

The Conclusion

This effect was pretty simple to re-create really – except working out how to incorporate the animation where the selected tab animates back to the left when you hover over another tab may take me another few minutes…

I’d be interested in hearing from anyone who has any thoughts on how much animation is too much in a design like this one.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s