Jackie Van Nice

How I Dolled Up Storyline’s Sliders

September 28, 2014 By Jackie Van Nice 20 Comments

Select Image to Launch Demo

If you’re a Storyline fan you probably know its latest release features sliders, and this week’s challenge is to make things slide all over the place.

The Idea

I’d originally used the paper doll try-different-outfits inspiration in a drag and drop challenge at a time I was doing uniform and safety gear training. Revisiting it with sliders sounded like fun, but this time I chucked the serious gear so I could just play with dolls.

The Images

Visual Design

I went with vintage paper doll images I found, then got busy removing the background and cutting them apart in PowerPoint.

To set the scene I used a modern house with vintage style. The interior background is a girl’s bedroom. Vintage candy shapes (root beer barrels, peppermints, and lemon drops) on the sliders also set the tone.

Three Sliders

Slider Design Steps

I created three sliders – one each for hats, outfits, and toys – all engineered the same way. This is how I did it in 8 pretty simple steps:

1. Added the slider: Insert > Controls > Slider. I chose the slimmest track style.

2. Added candy images to the thumb: Right click on the thumb > Format Shape > Picture or Texture Fill, then choose your image. The images will come in very small, but before clicking on anything else select Format > Size and increase the height and width as needed.

3. Formatted the tracks: With the slider selected, go to Slider Tools > Format and choose colors for your track fill and track border, then adjust the colors on your slider track hover states, if needed.

4. Set up the controls: With the slider selected, go to Slider Tools > Design. Here I renamed the default variable to “outfit_slider” and selected my preferred Update style. I wanted 5 slider positions: 0, 1, 2, 3, and 4 – which is why my Start selection says 0 and End says 4. The candy thumb is at the default position of 0, outfit one is at position 1, etc., and you progress between them in increments of 1 as indicated in the Step field.

5. Added slider images, states, and animation: I gave each image a state called Chosen, and for that state added the additional images I wanted to appear on the right, such as a dress on the little girl. I also added entrance and exit animations for those images on the Chosen state.

Trigger One: Display Chosen State

Trigger Two: Return to Normal State

6. Added slider triggers: For each slider item I created two triggers. One to display the Chosen state at the position I wanted it to appear, and one to return it to its Normal state.

Trigger for Sliding Sound Effect

7. Added a sliding sound effect: I wanted a sliding sound as you move between each item on the slider, so I added the audio file and created one trigger per slider.

Trigger for Incidental Sound Effects

8. Added incidental sound effects: For the puppy sound, for example, I simply added a trigger that fires when the state of that image is Chosen.

Time to Play!

If you’d like to put together a few nice outfits, have your audio ready and try the demo right here.

Select Image to Launch Demo

When Gate Screens & Yodeling Collide

September 25, 2014 By Jackie Van Nice 7 Comments

Select Image to Launch Demo

This Articulate challenge is to create a two-slide interaction that includes a content screen and a gate screen. Gate screens give learners some control and a chance to interact with the course, so they’re a nice touch.

The Idea

I wanted to use a gate screen to be sure the learner is ready for a final quiz.

Four-Quadrant Menu

The Design

I wanted one screen that was a tight title slide/main menu combo. As soon as I started playing with basic layouts I realized I had a big cross in the middle that looked like the Swiss flag, so that worked. And since travel in Switzerland is spectacular, I thought that should be the topic.

I was after a menu that made good use of hover states and the entire screen – so I split it into four quadrants and created three course sections and a final quiz.

Gate Screen In Use

Gate Screen Completed

The Gate Screen

One way to see if someone’s ready for a quiz is to remind them of what it’s going to cover, so that’s what I did.

Once the learner has checked off each item to confirm they’ve adequately reviewed it, the option to take the quiz becomes available. They’re also given the option to return to the main menu at any time.

See It!

I don’t know why I’m so fond of this one. Maybe my Swiss grandparents would have been proud? Who knows, but I like the compact, responsive design. It’s kind of like those little German (and Italian and French) cars that zip up and down the Alps.

Success!

Regardless, if you’d like to see it, it’s right here!

Fontcracker Suite: Teaching Typography

September 22, 2014 By Jackie Van Nice 16 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to teach some typography by creating a game or interaction. I dove in – excited that I could finally use Storyline’s new features out in the real world!

The Idea: Motion Paths & Dance

Motion paths are a huge plus in Storyline, so I wanted to feature them. Looking at proper typographic form got me thinking of proper human form, which got me to ballet, which led me to letters dancing to ballet music. Dancing letters using Storyline’s motion paths it would be!

Typography as the Star

The Typography

Many explanations of typographic anatomy use the word “Typography” as their example. I chose “very good form” so I could demo the concepts and stick with my theme.

Visual focus is on the typography throughout and it’s used on every screen. It engages the learner, introduces the concepts, acts as a progress meter, provides feedback, and wraps things up. I used one serif font (Book Antiqua) and one script font (Dancing Script). After settling on 12 typography terms to teach, I forged ahead.

Minimal Design

Minimal Visual Design

Rather than running wild with the theme by adding dancers, Christmas trees, snow, costumes, and scenes from the ballet I kept it simple – guided by the simplicity of the typography.

The main images are a ballet stage as the background and some ballet shoe ribbons. Rather than showing snow, I implied it on the opening screen by having each half of the word “good” fall gently into place.

Learner Control

The Interaction

Rather than announcing itself as an interaction where you’ll learn typographic terms, it starts with a fun bit of music and animation that sets the mood, theme, and topic before a small button appears that says “Teach me some terms”. Nothing is forced; you’re enticed to explore.

Feedback and Options

The learner also has enough options and information to feel they’re in control. If you choose “Challenge me!” for example, a message lays out clear expectations by letting you know what’s needed to succeed and gives you your options. Feedback is clear. If you make an incorrect choice you receive correction and can choose to review or continue.

Slider as Ballet Barre for Review

Best Slider Barre None

I used another of my favorite Storyline features – the slider – to create a ballet barre to review terms. (It features a lovely relative motion path, too!) It gives the learner full control and lets them focus on one item at a time.

Enjoy the Show!

If you have your audio ready, here’s the interaction in all of its very good form.

Select Image to Launch Demo

My Multidimensional (Yet Flat) Desk

September 17, 2014 By Jackie Van Nice 16 Comments

Select Image to Launch Demo

This week’s Articulate challenge is to render your work space in simple flat-style images.

Oddly enough, it coincides with my move from a standard desk to a standing/walking/kneeling/sitting desk, so that’s what I illustrated in my entry.

The Problem and The Solution

I’d never seriously thought about doing this before, but I happened to glimpse an article on Facebook that was talking about standing desks. (Here’s the article. It has lots of good info including both high-end and very simple, inexpensive options.)

If you know me even a little bit, you’ve gathered I spend an insane amount of ’round-the-clock time at my desk. Leaving the house to move involves a 40 to 60 minute round-trip drive (more sitting) to go somewhere I can bike, take a walk, or go to a gym. When you’re in the middle of work you love, that’s a big disincentive to take a break.

The Walking Desk

When I lived in Chicago and Portland I could roll out my front door every day and walk for miles or go to a nearby gym. In Europe I’d go for walks or run errands on foot every day and it was fantastic. Where I am now makes me insane and my body is going to stop speaking to me completely if I don’t do something.

So the standing desk idea resonated with me, and once I delved into the topic I realized that making it into a walking desk (plus a kneeling desk), and a sitting desk were just what the doctor would order if I made it to the doctor before I gave out completely.

The Images and Interaction

The Kneeling Desk

Some of the pieces and parts of my new setup are still in transit, so I rendered the scene as I expect it to be. Much of it is already in place, so those things are pretty spot-on.

Since the whole scheme hinges on the desk raising and lowering to specific heights, that’s what I focused on in the interaction. I put in a flat person to illustrate, but also animate them out so you can just see the room. All you do to morph the desk is push a button to move it to a preset height, so that’s what I have the user do in the demo. It’s quick and simple to illustrate the concept.

Try It! (+ My Setup Details)

Select Image to Launch Demo

Here’s the quick interaction if you’d like to see it. Also, since some people have asked for the details of my setup, I’ve shared them below.

Desk: I chose the UpLiftDesk 900, 80″ wide – enough to accommodate both a treadmill and sitting/standing station below; though 72″ wide might be enough. Unlike other desks, you can decide when you put it together how far apart you want the legs. I chose the white top and white base to go with my other office furniture.

This desk had good reviews for its smooth lift motors, which are housed inside of the legs, and sturdiness. I believe there are four presets you can customize for different heights.

I didn’t choose to go with a keyboard tray for now, but if you want one on a regular full-sized slide you can get the 920 desk model instead. I thought the 900 might be a bit sturdier and knew I could use a half-track keyboard tray with it if I really wanted to.

I also chose the 12-year extended warranty. The last thing I want to figure out 10 years from now is where and how to get the motors in my desk legs repaired!

Treadmill: I chose the LifeSpan TR1200-DT3 Under Desk Treadmill. Seems to be the go-to choice. Several desk companies, including UpLiftDesk, sell this same treadmill for the same price if you want to buy from them – but all of the advice I found said to order from LifeSpan directly for ease of dealing with any warranty issues, etc. I went with the extended warranty on this, too.

Standing/Sitting Mat: I chose the UpLift Sit-Stand Desk Mat (an option you can choose when you order the desk) in the 3′ x 5′ size so it’s large enough to place a chair on it.

Monitor Arm: Since you want your monitors to swing to whichever side of the desk you’re working on you probably want them on arms like this. I went with the UpLift Single Monitor Arm (an option you can choose when you order the desk) for my regular monitor, but I’m hesitant to be swinging my iMac around on an arm! (Plus I’d have to find one that fits.) It’s just as easy for me to slide the iMac over from one side to the other, so that’s my plan for now.

Kneeling Chair: I already have the Jobri Jazzy Kneeling Chair; though I got it a few years ago and offhand don’t remember who I ordered it from. I like switching off between it and my regular office chair.

Regular Office Chair: I’ll give a shout-out to my chair since I’ve used it incessantly for an unbelievable 17 years now. It’s put up with lots of grief and it’s still a complete champ. I believe it’s Via’s Terra Low-Back chair. I bought it at a furniture store in Portland and they let me customize the fabric.

More Info & Videos: I think that’s it for my setup – but the UpLift site has some nice videos to give you a better look at how all of this works together, plus a whole lot more.

Let me know if you decide to revamp your desk in a similar way. I’d love to hear about it!

And the Winner Is…

September 10, 2014 By Jackie Van Nice 22 Comments

Click to Visit the First-Year Wrap-Up — (Image: David Anderson)

The first year of Articulate’s E-Learning Heroes challenges has just wrapped up, and David Anderson asked us to nominate our fellow challengees for their achievements. Since that feels nearly impossible (if I nominate one person for “most humorous” I’m leaving out 20 others who were hilarious) – I’m going to focus on the participants I most appreciated and why.

Most Appreciated

Though I may be forgetting some, here’s my best shot:

Richard Watson: Richard joined us when the challenge was to create a game using my German drinking game template, so I had to like him from the start. Since then he has created a diverse and inspiring body of challenges that I admire. I always learn from him and I’m inspired by everything he produces. He’s also endlessly supportive, encouraging, and the first guy to ever put my picture on the side of a semi. Thanks Richard!

Nick Russell: Not only is Nick unfailingly supportive, but his work leaves me speechless. Once I regain my senses after seeing it I’m always stammering “How did he DO that??” Though I can only aspire to reach his level of creativity, design, technical expertise, and hilarity – I’m incredibly grateful that he’s there to inspire and encourage me and everyone else. Thank you so much, Nick.

Daniel Adeboye: Though Daniel is new to e-learning design and is currently limited to developing in PowerPoint, he fearlessly plunged himself into the challenges and instantly became an inspiration. His innovation, unfailing willingness to learn, and unflagging support and encouragement makes him a pretty great fellow challenge participant. Thank you, Daniel!

Dan Sweigert: Dan is another fearless inspiration. Whether trotting out imaginary friends or creating the most extraordinary games, he has a vision and he makes it happen. Combine that determination with his natural creativity, humor, and musical gifts and you have quite the challenge powerhouse. Thanks for everything, Dan!

Matt Guyan: Matt always comes up with fresh approaches to challenges I would never have thought of, and he shows me new things I can learn every time. His curiosity, enthusiasm, and unfailing support and encouragement are refreshing and always welcome. Thank you, Matt!

Gerard Friel: Though new to the challenges, Gerard is one of the people who encouraged me as I worked my way through the older ones. It’s a lonely road back there, and he was always kind and generous – PLUS I love his remarkable work and can’t wait to see much more from him in the challenges. Thank you, Gerard!

Charles Hamper: Charles’ entries always make me want to spend the day trying to somehow imitate the fantastic animations he’s created. They’re unfailingly elegant and look completely effortless. The fact that he then shares his secrets with us is pretty amazing. Thank you so much, Charles!

Gemma Henderson: To say Gemma has a flair for creative design and imagery is an understatement. You never know what she’ll come up with next, but you know it will be funny, beautiful, and/or strange (in the best possible way). Her work is an inspiration. Thanks, Gemma!

Ashley Chiasson: You can always count on Ashley to come up with an entry that is beautifully done, and that may or may not include a cat or duvet cover. She’s creative, clever, and always supportive of her fellow challengees. Thank you so much, Ashley!

Jeff Kortenbosch: Having now visited the farthest reaches of the challenge archives, I know that Jeff has been a dedicated and enthusiastic challenge participant throughout. His contributions have not been just his terrific work, but also his encouragement and support of others and of the challenges themselves. Thank you, Jeff!

Bruce Graham: When Bruce is able to fit a challenge into his schedule, it’s worth the wait. It’s also ironic that he’s a guy who knows good e-learning; yet his challenge entry that always makes me happy is his example of rotten e-learning. Thanks, Bruce!

Paul Alders: Paul always has terrific ideas and creates challenge entries I can learn from. He’s also enthusiastic and supportive when it comes to the challenges and his fellow participants, and somehow he brings a breath of fresh air to the proceedings. Thank you, Paul!

Montse Anderson: Montse’s technical precision and beautiful designs are always an inspiration. If ever I get organized enough to start including my color palettes with my posts (just one example of the meticulous care she takes with her designs), it will be because of her stellar example. Thank you, Montse!

Allison Nederveld: Allison’s refreshing style and carefully crafted entries are always inspiring. She’s generous with her knowledge – and her templates! – and is a wonderful fellow challenge participant. Thank you, Allison!

Dianne Hope: Dianne’s work is always surprising. Whether she’s exploring making coffee, instructional design theory, or the Outback – she has a fresh approach and beautiful style. She’s also unfailingly supportive and encouraging and it’s a pleasure to be in the challenges with her. Thank you, Dianne!

Nancy Woinoski: Nancy’s entries are invariably beautiful, creative, innovative, and often funny. They always inspire me to push myself to do more, and for that I am truly grateful. Thank you, Nancy!

Becky Fleisch Cordeiro: Whenever Becky gets a chance to create an entry, I always learn from it. She uses her expertise to come up with entries that are innovative and intriguing – plus she’s terrific at helping and encouraging the rest of us. Thank you so much, Becky!

Who’s The Winner?

As painfully obvious as this is – the winner is me and every other person who has participated. I win because I get to grow in my work and as a member of a community with people like these who are unfailing in their helpfulness and generosity. I also get to have fun creating the silliest things and having all of these nice people (and many others) be kind enough to not only look at them, but to be supportive and encouraging to create even more. Without them, and without David Anderson’s leadership, I’d never in a million years have thought of making a German drinking game or Kid vs. Cop spelling bee or a lyrical and romantic approach to filling out a passport application.

Thank You!

So a HUGE “thank you” to all of you who participated and (equally importantly!) supported and encouraged all of the challenge participants. I’m excited to see what this new year of challenges (and new challenge participants) will bring!