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).
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.
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.
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.