Using Accordion Interactions to Group Related Content in E-Learning #227

Hi Karyn

I see you're a fellow Melburnian!!

Welcome to this amazing community and well done on your accordion interaction entry.

I joined this community more than 5 years ago and have learnt a lot from other community members here as well by entering challenges and asking for feedback and help - so you're definitely on the right track. Most members are very helpful and kind, I've found!

I can give you a couple of specific tips that might help you with this entry design:

1. It's probably a good idea to start with an overview screen that explains what your subject matter is and how users should interact with your design (although I do get a bit bored with having to spell out that users should click on the tabs!!) - so this would mean not having any of the tab content showing on the initial screen. You can see what I mean by this if you look at my entry above.

2. Having a bit more of a play with the Storyline transitions would help your design. I'm probably (no, definitely) set in my ways here, but if they're asking for "accordion" tabs I think of the tab flying from one side of the screen (usually from the right) to the other (or from the bottom to the top / top to the bottom if it's a horizontal design) to reveal the content relevant to that tab. I know others are not so particular about these details - but each to their own.

Sometimes you can find an example on a web page that will help you understand a particular design - here's a good one for accordions: https://parafix.com/company/history/ I quite often take inspiration from something I've come across on a website such as my turbo-charged tabs: https://hopedianne.com/2018/05/01/turbo-charged-tabbed-interactions-design/ The trouble with this is, when I come across something I like, I spend way too much time trying to replicate it - but I'm getting faster at this!

I think for your design you could just change the transition from fade to fly-in and you would notice a big difference, although this depends how you've set this up. I actually duplicate the tabs on layers (then hide the original base layer tabs on these layers) so I can work with the transitions to get a better effect. This isn't as time-consuming as it sounds, really!

3. You have a lot of screen real estate that is not being utilised in your design. Screen real estate is gold in e-Learning! I would suggest getting rid of the orange areas above and below your interaction and using space this for the content, or if you really want to keep the orange, just have a very small border all the way around.

There is lots of stuff that you could read to help you with the visual/graphic design side of things - such as CRAP and the elements of visual design. I gave a brief overview of these in one of my blog posts here https://hopedianne.com/portfolio/what-no-colour/ and I often go back to this as a reference - it's kind of embedded in my mind now and most of it is second nature, but I always think it never hurts to revisit something that you found useful once.

Apart from that, a lot of design is personal preference, so I won't comment any further!!

Don't hesitate to reach out to me if you need more help with this - accordions take a bit of getting your head around if you want to do them well and as with most things in Storyline, there's more than one way you can develop them.

You might also find it useful to read my write-up on my last accordion interaction - back in the days when I obviously had a lot more time to spend on this kind of stuff: https://hopedianne.com/portfolio/accordion-interactions/

Anyway, I hope this was useful.

Cheers