Learn. Show. Repeat.

Tag: Working out loud

  • My Experience as a Design Thinking Newbie (part 1)

    This is the first in a series of posts documenting how I’m applying a design thinking approach to a project I’m working on.

    “Design thinking is a problem-solving methodology that focuses heavily on involving users of a solution in its design” (Boller and Fletcher, 2020).

    This definition comes from the book ‘Design Thinking for Training and Development’ by Sharon Boller and Laura Fletcher. It’s the first (that I know of) that frames design thinking in the context of learning and development. It’s a valuable source of ideas and templates and if you’d like to incorporate design thinking into your projects, get your hands on a copy of this book. The overarching framework that’s used tweaks the ‘traditional’ design thinking model.

    Why use a design thinking approach?

    There are two things that attract me to using design thinking for L&D projects. Firstly, it’s user or human-centred, meaning that the needs of end users are the focus. The aim is to create solutions that solve a problem they are having. Some would say that this is what L&D should always be doing but sadly many learning teams are focussed on content. Secondly, solutions are developed based on research and data and in an iterative way with end users. It’s the opposite of the ‘order taking’ role that many learning departments are stuck in.

    My experience with design thinking

    I’ve been aware of the practice of design thinking for a few years now. I’ve read about it and watched videos on it. But knowing about something and using in the real world are two different things. For this reason, I’m a newbie to the application of design thinking tools and techniques. This project is the first time that I’ve been given the freedom and support to use an approach like this for a L&D project. I’m using the book as a guide as I move through the various stages in the approach.

    The request

    The initial request for this project was to improve the onboarding experience for new starters and their managers. Rather than coming up with ideas up front, the design thinking approach means to come at the project from a place of curiosity. I need to uncover the problems being experienced which will show what needs improving. This involves asking lots of questions. The one which is guiding this part of the project is: What is the current onboarding experience for new starters and managers?

    Getting perspective

    In the ‘traditional’ design thinking approach the first step is to empathise with end users but Boller and Fletcher refer to this as ‘getting perspective’. I like this phrasing because it emphasises finding out other points of view in order to see a bigger picture.

    There are three essential questions to consider at the beginning:

    What problems are we trying to solve? | What does success look like? | How will we measure success?

    For this project, the answers to these will come once we have more perspective.

    First steps

    In my organisation, we have people spread across all areas of mainland Australia. Some of our workforce is office based, others are mostly in the field, some are a combination of these. Many people are still mostly working from home. To reach people and to find out more, I created a survey.

    Now I know surveys can be problematic (this was even mentioned in the book). But I tried to minimise this by having a good mix of ‘free text’ questions where respondents can provide more detailed information. I used Microsoft Forms as the survey tool with an option for people to leave their name so that I can contact them to discuss their experience further. The purpose of these ‘interviews’ is to flesh out survey responses in more detail and help to create new starter and manager personas.

    In the next post, I’ll discuss more about my approach to data gathering, conducting interviews and creating personas.

    Photo by Anika Huizinga on Unsplash

  • Working with Images in eLearning (part 1)

    As eLearning developers we regularly work with images in our projects and while we aren’t all graphic designers, it helps to have a basic knowledge of the terminology around image properties and file types which is what this post is about.

    A ‘pixel’ is the unit of measurement used for digital images and when you see the size of an image, let’s say 450 x 300, the first number is always the width and the second is the height:

    width then height

    The resolution of an image is different and is usually expressed as pixels per inch (ppi) or dots per inch (dpi) and this describes how many pixels there are in a liner inch. When sourcing images from a photo website I look for a high ppi or dpi number:

    In this example I’d choose the medium (or maybe the large) over the small as it would be a higher quality and better for resizing.

    There’s two main categories of images – Bitmap and Vector – and here’s the difference between the two:

    Bitmap images are made up of pixels of different colours, they often have large file sizes and when you resize a bitmap graphic larger than the original, it tends to lose quality and become grainy or pixelated.

    Vector images use mathematical expressions to represent the image, they tend to have small file sizes and are scalable so when you resize them larger, which means that they don’t lose quality. However, vector images typically require software to create and edit. You may be able to edit the vector image in PowerPoint as Tom Kuhlmann describes here.

    It’s also handy to know the differences between the most common image file formats so that you’ll be able to use the right type depending on your purpose.

    Types of bitmap image formats:

    JPEG or JPG (stands for Joint Photographic Experts Group) – supports millions of colours and are used for displaying digital photos in a compressed format. You can’t have a transparent background with a JPEG and they tend to lose quality the more times you edit and save them.

    PNG (Portable Network Graphics) – an alternative to GIF images and can support millions of colours as well as transparent backgrounds.

    GIF (Graphics Interchange Format) – only supports 256 colours but they can have a transparent background (one colour can be transparent) and can also be used for creating simple animations.

    TIFF (Tagged Image File Format) – great for when you want to display high quality images for printed documents.

    Types of vector image formats:

    EPS (stands for Encapsulated PostScript) – this format supports both bitmap and vector images and are created with drawing programs like Photoshop.

    WMF (Windows Metafile) – also supports bitmap and vector images and was used for Microsoft Clip Art. These files can be edited in PowerPoint.

    SVG (Scalable Vector Graphics) – this is a newer format for web graphics that support interactivity on newer web browsers and is also good for animations.

    So that’s a brief overview of image terminology and file formats. If you’re interested in learning more about image formats as well as visual design, Connie Malamed has a great book called ‘Visual Design Solutions’ which I referred to in putting this post together. In part 2 of working with images, I’ll share some tips (and a video) that I’ve found useful when working with images in Storyline.

  • 4 Ideas for Combining Text and Images in eLearning

    E-Learning Heroes Challenge #152 – Combining Text and Images in E-Learning. The brief: This week, your challenge is to share an example to demonstrate how text and images can be used in e-learning.

    For this challenge I shared four simple ideas that were all created within Storyline. Click the image below to see what I shared for the challenge:

    Click to view demo

     

    Slide 1: Text coming out of the image

    For the title page, I wanted the text to look like it was coming out of the skyline and to create this effect, there’s actually two of the same images placed exactly on top of each other. However, the image at the front has been cropped:

    Cropped image

    In the timeline, the complete image is at the bottom and the cropped at the top:

    timeline

    Placing the text box in the middle creates the effect that it’s coming out from behind the buildings but really it’s just coming out from behind the cropped image. There’s a ‘Fly In’ animation on the text with the duration set to 3.5 seconds and coming in from the bottom (set in Effect Options).

    Slide 2: Text overlay 1

    This slide full screen image with a rectangle shape containing some text) placed to the right. The shape has a ‘Fly In’ animation (1 sec duration and coming in from the right). I also made the shape slightly transparent by right-clicking on it, selecting ‘Format Shape’ and adjusting the transparency to 25%.

    Slide 3: Text overlay 2

    On this slide, I coloured the background pale grey, and positioned my image at the top of the slide. Then I added a rectangle that slightly covered the image and didn’t completely fill the space at the bottom. The text itself sits in a text box on top of the shape and I applied a fade animation (1 sec duration). From the ‘Effect Options’ dropdown I chose ‘By Paragraph’ which makes each paragraph of text appear separately.

    Slide 4: Question

    This slide wasn’t built using a quiz slide (but it could be) which meant I needed to create everything from scratch. I started with my background image and added two new states – a correct and incorrect:

    correct and incorrect states for background image

    For each of the new states, I went to the ‘Format’ tab and increased the brightness by 10% and recoloured the images:

    format tab

    Then I added four rectangles, one for the question and one for each answer. For the demo, Option C is the correct answer, so I also created a state for each option:

    answer states

    Lastly, I added a layer that contains a button to replay the demo (the trigger is to jump to the first slide when the button is clicked) and also prevents another answer being selected (go to ‘Layer Properties’ and tick the box next to ‘Prevent the user from clicking on the base layer’).

    Then I needed to add triggers to each answer option to make it all work:

    answer triggers

    So that’s how I created each of my slides for this challenge. There were lots of other creative ideas shared by community members in this challenge and you if have ideas, please share them in the comments area below.

    All images used in this demo came from Death to the Stock Photo.

  • How I created a Custom Quiz-style Interaction in Storyline 2

    Recently a friend of mine contacted me as he had an idea for an interaction he wanted to create in Storyline 2 and needed some help with building it.

    He wanted the interaction to work like this:

    • A question with five answer options.
    • Two of the five answers were correct.
    • Only a maximum of two answers could be selected.

     

    He also wanted a ‘submit’ button and once clicked, then he wanted:

    • Feedback for each answer to be shown.
    • An indication of which two answers were correct.
    • To still see which two answers were originally selected.

     

    With a bit of experimentation and a few prototypes I was able to create something that met his needs and this post is about how I got there.

    Originally I thought about using a freeform question slide but as I didn’t need to worry about scoring so I went with a regular slide.

    I started by inserting a place for the question and the five answer options on a slide and I also created a ‘selected’ state for each answer option. Next I created a submit button and set the initial state to hidden – my idea was to change it to normal when two answers are picked (or become selected). I’d also need to make the other three un-selected answers become inactive once the second answer had been chosen. I abandoned this idea when I realised all the triggers I’d need to make it work.

    My next idea was to create a layer and place the submit button on this own layer. The reason I did this was because I remembered that in the layer properties there’s a setting where you can prevent the use from clicking on the base layer (click in the box to turn on the setting):

    Slide layer propertiesUsing this setting would take away the need to come up with triggers for making the un-selected answers not work as once this layer is showing nothing on the base could be clicked on. But I did need to figure out triggers to make this layer show – which was after the second answer was selected – based around the state of my answer options. So with 5 answer options there’s the following 10 selection combinations:

    1 and 2, 1 and 3, 1 and 4, 1 and 5, 2 and 3, 2 and 4, 2 and 5, 3 and 4, 3 and 5, 4 and 5.

    So my 10 triggers to show the layer with the submit button on it (based on the state of the answers) were variations of this:

    Show layer trigger

    Note: In this trigger, the order the answers are chosen doesn’t matter so choosing answer 1 then answer 2 is the same as choosing answer 2 and then answer 1.

    Once the layer with the submit button is showing, users are not able to click on the base layer and select any other answers (in hindsight, the way interaction is set-up means that you can’t change your answers once you’ve picked two). The trigger on the submit button is to show another layer that contains the feedback, which answers are correct/incorrect and it still shows the selected answers on the base. I positioned the answers on this layer showing which are correct/incorrect directly over the answer options on the base which means the selected state showing.

    As this is a prototype I haven’t focused on the slide design, it was more about seeing if I could achieve the functionality he wanted. Click on the image below to see a demo and if you’d like to download the .story file click here.

    quiz style interaction demo

  • Learning About Screencasting

    A few months ago David Anderson started a new type of E-Learning Hero Challenge – creating screencasts (which are short ‘how-to’ video clips). I mentioned in an earlier blog post that one of the areas I wanted to build knowledge and skills in was screencasting so these new challenges would be a great opportunity to get started.

    Another reason why these challenges appealed to me is that most of my role at B Online Learning is about teaching others – how to use Storyline 2 and the process of creating an eLearning module – so the challenges also seemed like a good fit in that regard just a different way of teaching and sharing what I know and a way to help develop my communication skills.

    Creating these short how-to videos is something new for me so these early ones were a bit rough but I figure they’ll get better over time. Anyway, here’s a few of things I’ve learned so far when creating my screencasts:

    Planning

    I’ve found that the recording works better if you plan what you’re going to record and have a run through to make sure that things work the way you want them to and you know where you want to click. I don’t have a word for word script but I like to think through what I’m going to say as I do the practice. I tried off-the-cuff but it didn’t work for me.

    Sound quality

    I record my screencasts in my office at home and I shut the door and window to reduce any background noise. Initially I found the audio still wasn’t that great but I was using an old headset with a mic. I do have a USB microphone (Audio Technica) but when I tried it, it seemed to pick up ambient noise. So, I went to JB Hi-Fi and I found a Skype Headset (it has a USB connection and a noise cancelling microphone) and I’m much happier with the quality.

    Recording Window Size

    I use Articulate Replay to record my screencasts as it came with my SL2 licence and meant that I didn’t have to buy another program. It’s easy to use and I’m happy with the output. When you open up Replay you can set the size of the recording window to whatever size you need and initially I was recording at about 1000 x 700 but I found that when I looked at the recording on a larger monitor that it became a bit blurry and I think it was because the recording was being enlarged to fit on a bigger screen? Anyway, I asked my friend Veronica (another regular screencaster) what size she used and she said was using around 1430 x 860. Hers looked cleaner so I increased the recording size and it seems to have helped in the latest recording – ‘Using Master Slides’. So I’ll keep experimenting.

    Click on the image below to see my most recent screencast and you can see all the recording that I’ve created in the Videos section of this site. Let me know what you think.

    Screencasting

    If you’re wondering about the circle animation that you see in my recordings, it’s a setting on your computer. Go to the Control Panel > Mouse > Pointer Options tab > select Show location of pointer when I press the CTRL key > Ok. That’s it!

    To see all of the screencast challenge topics, click here.

    If you’ve done any screen recording before please share any tips you have in the comments below.