Show Your Work

Navigating a Tasty Circular Menu

April 22, 2018 By Jackie Van Nice 8 Comments

Select Image to Launch Demo

This week’s Articulate ELH challenge is to create a circular navigation menu to mimic the sorts of menus used in mobile apps, save screen real estate, and give the design a sleeker look.

The Idea

I thought I’d use the navigation menu to explore a food menu. Leaning into the circular theme led me to selecting a big round plate and all of the round dishes that ended up on it.

The Design

Building the Menu

My circular menu: Note that Pasta stays selected even after the menu has been closed and reopened.

A sample Storyline file was offered as a challenge resource, but I find it easier to dig in and build things from scratch. It takes longer but it’s soooooo much easier to wrap my head around what I build on my own, plus I love the challenge of figuring it all out.

The menu items are inserted shapes nested under the main menu, which is also an inserted shape. I added two motion paths to each one – the first to move outward when the menu is selected, and second to return to the original position.

By the way, working with motion paths in Storyline is so much easier now. Being able to name the paths is helpful, but being able to align and snap motion path items is a thing of beauty. I’d have loved to have had those features when I created my Fontcracker Suite and Faces of the Ebola Response challenge entries!

The other thing I wanted to add was a “selected” menu item state AND have it retain that state even after the menu has been closed and re-opened. I think it’s helpful when a menu tells you where you are. That upped my trigger count, but I really like the result.

The food items are activated to appear when the user clicks a menu item and the state of a transparent shape on top of the plate changes to display the selected dish.

The behind-the-scenes food states for the transparent rectangle that covers the plate.

The Images

All images are from the 360 Content Library, including the main menu’s “hamburger” and X icons. The food options were dictated by how possible it was to remove the background from each one so I could put it on the plate and have it look plausible.

I used the Format > Remove Background tool in PowerPoint, which worked like a charm.

Pasta Before Removing Background

Pasta After Removing Background

Pie Before Removing Background

Pie After Removing Background

Oranges Before Removing Background

Oranges After Removing Background

The Result

After that there’s nothing left to do but choose what you’d like on the menu! You can try it out here or by selecting the image below. Buon appetito!

Select Image to Launch Demo

Dining Out in Italy: Do It For the Progress Bars and Badges

April 17, 2018 By Jackie Van Nice Leave a Comment

Select Image to See Demo

This week’s ELH Challenge is to show how to use badges, awards, and achievements in e-learning. I don’t always use a ton of these in my client projects, so this was a nice chance to play.

The Idea

Since showing progress and achievements for their own sake doesn’t do much to connect with learner motivation, I wanted an end goal that would be motivating to achieve and a learning goal that would enable the learner to achieve it.

I decided on a simple language learning demo that puts you in the position of having to use enough Italian to navigate dining out in Italy. Learner gotta eat.

The Design

I wanted this to be simple and intuitive, so I didn’t use any written or audio instructions (with the exception of “Try Again”) or try to flesh out restaurant scenes or interactions in any detail. The focus is on the language and the related progress and achievements.

Italian flag colors

Color-wise I thought about including an Italian flag somewhere, but it seemed like an overused and unnecessary indicator. Instead I grabbed the RGB and hex codes for the Italian flag and used those colors on a largely monochromatic stage throughout.

The Reinforcing Progress Bar

Though I’ve used beer mugs, mountains, mai tai glasses, scoreboards, typography states, and I-don’t-even-know-what-else to show progress – I’ve never designed a standard progress bar. So I thought I’d give it a shot.

Somewhere in David Anderson’s suggested resources this week (I’d point to it but have lost it in the shuffle), Tom Kuhlmann was giving the basics of progress meters. I took away that putting them on master slides isn’t a bad idea and that indicating chunks of progress can be quite simple, which was very helpful and enough to get going.

I have 4 quiz questions in this demo, each equating to 25% progress on the bar. Each question focuses on one small bit of vocabulary. For reinforcement, I embedded that bit of vocabulary directly into the progress bar once it had been used correctly.

The Badges

I added what are basically earned badges alongside the progress bar. Since they’re images that illustrate the target vocabulary in that section, it seemed like another good bit of reinforcement.

My progress bar with embedded target vocabulary and corresponding badge awarded for achievement.

Feedback

There are four ways to figure out whether your answer was correct or not: The look on the server’s face, what he’s saying in Italian, your progress (or lack of it) shown via the progress bar and badges, and whether or not you see the Try Again button.

Since this is more about exposure to vocabulary in context and not every word is meant to be understood, there’s more value to mulling over and playing with the options rather than simply counting something as wrong and moving on. That’s why each question is set to let you play/guess/answer as many times as you’d like.

The Result

Ready to see if you can navigate going out to dinner in Italian? You can give it a try right here. Buon appetito!

Pantone’s Ultra Violet: Best Worn With Sunscreen

April 15, 2018 By Jackie Van Nice 6 Comments

Select Image to See Demo

This week’s Articulate ELH Challenge is to design a template or interaction featuring Pantone’s color of the year: Ultra Violet.

The Idea

The name, of course, made me think of ultraviolet (UV) light, and since it’s part of the light spectrum, a slider interaction to explore it seemed like a good way to go.

The Design

Attitude: One of Pantone’s suggested color palettes to use with Ultra Violet, and the one I used

The Colors

I used Ultra Violet for the titles, labels, other text, and everything in the UV section – but after that I was going to need a range of colors to create a whole light spectrum.

To the rescue came Pantone’s Attitude palette, which had a color I liked for the sun (Citrus), one I could use for the infrared spectrum (Raspberry), and other brights I could use in the visible spectrum.

For the UV spectrum I put Ultra Violet in the middle and used one Ultra Violet shade darker and one Ultra Violet tint lighter on either end.

The Slider

After inserting a sun icon from Storyline 360’s Content Library (love that so much), I colored it using a Pantone Citrus fill, then also used it as the thumb image on the slider.

Ultraviolet details revealed in Ultra Violet

Other than that, it’s a simple slider with light spectrum details I built on layers that are revealed as you slide the sun icon to each section. I also decided to make the larger sun’s arrow “rays” disappear when you’re viewing the layers to give it a cleaner look.

I added an Ultra Violet slider prompt using an arrow marker that shows up after a few seconds. Once you move the slider it’s programmed to remain hidden.

The Result

In the end it seems the ultraviolet spectrum is all about sunscreen for us, but you can view this Ultra Violet result just as well in the shade.

Clowning Around With Adaptive Learning

April 13, 2018 By Jackie Van Nice Leave a Comment

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to design an example of an adaptive learning path. A random search for subject matter led me down the path to clowning.

An ATD Adaptive Learning Screen

The Idea

I’ve seen ATD’s use of adaptive e-learning in their Learning Portal courses, and beyond asking assessment questions to customize course content, they also ask the learner how confident they are in each response.

This makes the learner stop to think a bit more, and it gives you as the designer more information to help refine the learner’s path through the course. So an adaptive path that uses confidence levels is what I thought I’d try building.

The Design

The Adaptive Path

To keep this simple, I started with 3 assessment questions. If the learner gets them all correct (with full confidence) they’re essentially allowed to test out of the first course module, but have the option to review that content if they’d like. If the learner doesn’t get them all correct (with full confidence) they are only allowed to go to the first module.

For incorrect answers, feedback indicates the correct one.

After selecting your answer, you then indicate how confident you are in your answer.

After selecting an answer, you then indicate how confident you are in your answer.

The Assessments

As part of his introduction to this challenge, David Anderson shared a demo of how to build a branching path in Storyline that takes advantage of scoring answers by choice, rather than by question, and using the built-in results slide variables.

I couldn’t figure out a simple way to make that work with the added confidence levels, but without them I’d have used that approach.

As it is, I based the score for each question on both the answer to the question and the learner’s self-reported confidence using number variables. In the end, the total score determines the path.

Quick Visuals

Articulate 360 Content Library Clown

To keep this as time-efficient as possible, I again used as many resources available in Storyline 360 as possible. I used a couple of template screens as a starting point and customized from there. The photos, icons, and video are also from the Content Library; though I had to procure the banana image elsewhere.

The Result

As with all of life, in the end we attend the clown college we’re most ready for. That’s pretty much what happens here, too. Feel free to check out my adaptive clown demo!

E-Learning Avatars and Super Powers

March 18, 2018 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

This week’s Articulate ELH Challenge is to show ways learners can select avatars to personalize a course, plus show how an avatar is carried over from a selection screen to a content screen.

Storyline 360 Eggplant

The Idea

I wanted to do something quick and easy by only using readily-available assets in Storyline 360. That led to playing with Storyline’s built-in characters (and an eggplant with character), then adding some customer service super powers for a bit more interest.

The Design

Visual Design

After playing with different characters and background images, I eventually arrived at a combo that gave me a color scheme I liked (purple, green, and orange), which I then used to create the rest of the screen elements. Oh – and the idea of mixing up character styles and species seemed way more interesting than pulling from one style.

Creating an Avatar Button Set

Avatar Selection Design

First, I placed the avatars in the visual context they’ll be seen in for the rest of the course. Being able to see their environment (a restaurant), and knowing the topic (customer service) helps inform the learner’s selection.

Then I used Storyline’s button set feature to make my avatars act like buttons. To create a button set, highlight the images you want to make into buttons, then right click and choose Button Set. When the learner clicks on an avatar after it’s been buttonized, it’ll automatically display a selected state, and only one can be selected at a time.

A Gentle Reminder

To give the learner a chance to play with their selections I added a Done button that lets them move forward when they’re ready. If they select Done before making a selection, a prompt pops up (built on a layer) as a reminder.

Carried-Over Avatar States

Avatar Carry-Over Design

To carry the avatar selection to the next screen I:

Created a true/false variable for each avatar. The initial value is false.
Added a trigger to the selection screen’s Done button to adjust the avatar’s variable to true if the state of the avatar is selected.
Created one image with a state for each avatar on the following screen. A trigger on this image changes its state to display the image of whichever avatar’s variable is true.

I designed the super power selection and carry-over in the same way.

Ready to Personalize Your Avatar and Super Power?

You can check it out right here.

Select Image to Launch Demo