Forum Discussion
Storyline: Flip Card Do’s and Don’ts
Do’s and don’ts are an easy-to-understand framework for guiding behavior. But how you share that advice matters, too. A step up from traditional lists, this example presents do’s and don’ts as eye-catching flip cards. The design draws learners’ attention and breaks up recommendations into more manageable chunks.
Storyline 360 makes creating this kind of interaction easier than you might think. You can kickstart development by creating your tip cards in an existing Content Library 360 tabs template. Or, you can design the interaction from scratch with the Trigger Wizard. Take advantage of the in-app access to Content Library 360 to find all the icons you need quickly. And then use entrance and exit animations to make your cards slide in and spin around.
So, with just a few minutes worth of work, you can transform a dry do’s and don’ts list into an attractive interaction.
Want to try building something similar in Storyline 360 but don’t have Articulate 360? Start a free 30-day trial.
12 Replies
- Nice design, Ridvan!
- Thank you, Ekaterina. Glad to hear that you like it :)
- I like this quite a bit! Will have to use!
- I would love to see your version, Kelly :)
- Great template! Is this available to download?
- This is really interesting! I'm curious how this design would work with accessibility software - how well does it interact with a screen reader?
- I love the look and feel of this interaction! But I have the same questions as Stephanie Hunter on Accessibility. With our courses we add a full transcript, but would love to empower this to function with a screen reader while pressing TAB and SPACEBAR to select each.
- After Stephanie's question, I tested it with different screen readers. Unfortunately, it doesn't work since the cards are saved as png. I am trying to find a different approach to keep the design and make it work with the screen readers. If anyone wants to give it a try here you can download the file; https://bit.ly/3Ql1HW1
- Ridvan,
Check out my version. I used shapes in SL.
I don't know how to upload my Story file. It could be the company firewall that stops me.
- I made an attempt at this. How can I share my template? I don't quite have the animation right.
I created my card for Do and a layer for Don't.
The Do card uses the Fly-In from the Right animation. I tried the Swivel animation on exit, but it doesn't look as good as the example.
Then I added a trigger to the Do card to show the Don't layer on click. The Don't card enters using the Swivel animation.
I am very open to advice. Thanks
This is my attempt. https://360.articulate.com/review/content/0a10837d-87c9-4134-bc03-421df1c21267/review - How did you set the cards to animate on transition between states?
- You may wish to consider changing the wording of the 'Don't' cards.
e.g. 'Do consider what's behind you' is followed by 'Don't avoid fluorescent lights'
