According to the website WorldMusic , the accordion was invented in the early 1800s in Europe and came to America by way of traveling German merchants. If you want to see someone really “rock” the accordion, check out Alpenrebellen – Rock Mi (Offizielles Video) here. It’s a nice way to start your day! If you want to learn more about accordions and eLearning, then read on.
In the eLearning world and in this week’s challenge “Accordion Interactions in E-Learning #147“, accordion interactions provide you with a great way to group a large amount of related content into a single slide. The use of vertical and horizontal content layouts allow you to explore lots of content more efficiently. Although accordion interactions work on both desktop and mobile systems, I think they are most useful on mobile devices which is why I used a mobile approach to this week’s challenge design. By using the accordion design element, I can use the small screen space more effectively.
Behind the Scenes Design Notes
The design took about 1 1/2 hours to build from start to finish and uses a photo I took during a recent trip to our local zoo. As I penciled out the idea, I decided, “Wouldn’t it be nice to have a smart phone app that allowed me to look up each animal at the zoo and learn more about them?”
This design consists of 6 layers (Overview, Conservation Threats, Diet Behavior, Habitat, and Menu). As this is just a simple demo, I did not build out additional animals beyond the Blue and Gold Macaw. Clicking each option (Overview, Conservation & Threats, etc.), triggers a Move Animation that exposes the text content. The ANIMALS icon in the upper left takes you to a menu where you can search for other animals.
Please be aware, this is just a prototype. If this were to be built out further, I would design a new title slide, explore adding audio to allow someone to hear the sounds the animal makes, maybe even consider adding a tag that could be scanned at locations throughout the zoo which would interact with the smart phone app! Okay, enough dreaming, click the image to see the sample which was created to fit a Samsung Galaxy.