The central idea of this resource was the virtual salon, based on a panoramic photo I took of the Shine salon:
Using sliders to pan the photo
- Slider 1 has the panoramic photo as the slider button ‘fill texture’
- Slider 2 is visible to the learner and is used to pan the photo
I scaled the photo so it was the correct height to fit my design for the 960px x 720px (px = pixel) slide; so the height is 342px and width is 2048px. In fact I resized all images to minimise the bandwidth required by the resource.
Storyline objects are layered, and I added a copy of the background image with a transparent window (600 x 342 px). This acts as a frame that overlays the photo so that only a 600px width slice of the photo is visible at any one time.
The blue bar behind the photo in this image is the Storyline slider 1. I needed to calculate the width of the slider so that it matched the width of the photo. If the photo is panned hard left, then the hidden part is (2048-600)=1448px wide. Ditto if panned hard right. The total width of slider must allow for 1448px on each side of the 600px width central window; so width = 1448 + 600 + 1448 = 3496px.
This was set on the Slider Design tab, along with parameters to centre the photo when the learners arrive in the virtual salon. I also set the slider to move in 100 discrete steps; this looks visually smooth and enabled me to easily use the value of variable Slider 1 for triggers that control the visibility of other layers on this slide.
Variable=Slider1, Start=0, End=100, Initial=50, Step=1
Slider 2 is a regular slider whose Variable is also set to Slider1 – so moving this slider also moves the other one with the photo. Of course moving this slider left also moves the photo left, which looks like you are panning right, so I fixed this by reversing the Start and End values for Slider 2:
Variable=Slider1, Start=100, End=0, Initial=50, Step=1
Areas of Interest markers on the panorama
I wanted the learners to search the virtual salon for areas of interest, but didn’t want to use mouse-over as that technique does not work on mobile devices. Instead, I chose to have markers appear when the photo was panned to a specific value. I added triggers to Slider1 which showed a layer with the marker if the value of Slider1 was between two values, and hid it if it wasn’t. For example:
Show layer loc1 when the slider moves if Slider1 is Greater than or equal to 94 AND Slider 1 is Less than or equal to 96
Hide layer loc1 when the slider moves if Slider1 is Less than 94 OR Slider 1 is Greater than 96
Using a range of valid values (94, 95 and 96 in the example above) made it easier for learners to pan the slider and spot the markers; a single value (e.g. 95) was too difficult.
Returning to the virtual salon
The value of variable Slider1 is stored, so the virtual salon photo is automatically panned to the same point as it was when the learner last saw it when they return to the slide.
I wanted areas which learners had already visited to be visually indicated, so I created versions of the marker for each of these states:
The variable loc1 is set to TRUE when learners view the area of interest and is used by a Slide trigger to change the appearance (state) of the Button_loc1 on layer loc1:
Change state of Button_loc1 to Visited when the timeline starts IF loc1 is equal to TRUE
I also added triggers to the frame image to make sure the correct layer was visible when learners return to this slide (i.e. when the timeline starts as the slide is redisplayed):
Show layer loc1 when the timeline starts IF Slider1 is Greater than or equal to 94 AND Less than or equal to 96 AND loc1 is equal to TRUE
You can see that with 10 locations to find, this slide already had 40 triggers – and there were another 10 or more to add… but I’ll talk about some of those in the next article.
With approval to go ahead with development, the next step was to start preparations in detail. All of these activities proceeded in parallel:
- Creating the content– writing the text and finding the images for each topic
- Calculating the data – the energy, water and money savings for each topic.
- Liaising with businesses – suppliers of hairdressing products and a local salon.
- Coding prototypes – learning exercises using Storyline to test my ideas.
- Documentation – a necessary evil.
The challenge was to write just two or three sentences about each topic that conveyed its environmental impact and sold its benefits in ordinary, non-technical language. For example, for low-flow aerator taps:
Aerators introduce bubbles into the water and help it feel soft. They also reduce the amount of water used — and save energy as you need less hot water.
They are inexpensive, simple to fit and the payback period is typically just a couple of weeks.
It may be an obvious point, but getting the script right is essential; if it isn’t then no amount of flashy multimedia interaction will compensate for that.
Photos from Shutterstock were chosen to accompany each topic, and a careful record was kept to ensure it was easy and quick to cite them correctly when the credits slide was created much later in the project.
Other researchers on the project had already obtained information about environmental benefits; for example “Low-flow aerators can save money. Fitting a tap aerator at a cost of £5/tap could result in water savings of £13/tap/year (*based on tap being used 20 times a day for 15 seconds Source: Envirowise info sheet, 2007)”.
Tap aerator – image © Shutterstock.com/infausto
My idea was to translate the costs and savings for each topic into a standard format that would give the energy, water and money savings each year if adopted by a small four-seat salon. As learners worked their way through the training, a running total could therefore be kept of the savings from all the ideas where they clicked the Like button, so they could easily see the amount saved and scale that up for their own salon if required. I suspected that although the energy and water savings would be seen as a good thing, it would be the substantial money savings that would really gain their attention.
I developed a fairly complex Excel spreadsheet for the calculations; luckily my engineering background meant I wasn’t phased by having to use the specific heat of water to calculate the number of Megajoules used to heat 1000 litres by 20 degrees and then convert that to kWh so that the annual cost savings from a low-flow aerator tap could be calculated. A maths-free version of my calculations is included in the training, hidden behind a ‘How we calculated this’ link. I didn’t think that many learners would chose to view these, but thought that it was important that we were able to justify the savings we claimed; for example:
Assume standard tap flow rate is 5 litres per minute and aerator tap flow rate is 3 litres per minute.
Assume standard tap is used for 20 minutes each day, for a total of 30,000 litres each year.
The aerator tap saves 12,000 litres a year = £60
It also avoids heating that water, saving 420 kWh and £59.
The total saving is £119
Liaison with businesses
We wanted to include images of a few specific products, such as the Gamma Piu energy-saving hairdryer, and Enki one-use towels. I emailed their distributors and made sure we had written permission to use the images they provided.
We also worked with Shine, our on-campus hair salon, who kindly agreed to allow us to use their salon as the basis for the ‘virtual salon’ photo at the heart of the training. We also used it as a location for the introductory video with Dr. Denise Baden. I made sure that we got all the location and personal release forms required, including some from clients who appeared in the photos.
I built several rough prototypes to learn about variables and to verify that my ideas were achievable. There were also two key features I needed to develop:
SCORM data: As mentioned in the first article, this work was funded by a research project which wanted to identify topics ‘liked’ by the learners. For example, with modern shampoos there is no need for two applications, and shampooing once saves time, water, energy and money – as well as reducing water pollution. Were the learners persuaded by these arguments?
It was agreed that the training resource would be hosted on SCORM Cloud, which would enable data tracking. I built a prototype to learn about how the system worked and interacted with a resource created using Storyline and published using its SCORM output options.
Scrolling panoramas: I wanted to create a ‘virtual salon’ for learners to explore and find areas of interest. I used my camera to take a 180-degree photo of the salon, and then talked to colleagues and searched the excellent Articulate user forums for advice. I found an article by Glenn Simsek that was exactly what I was looking for, and spent some time experimenting with that to get it right. It may even be the subject of the next article in this series!
Painful experience has taught me the value of documenting projects as you go:
- an accurate timesheet to help me more accurately cost future projects;
- a record/store of meetings, emails, decisions, sign-offs and so on;
- a record of all resources used and their source;
- notes about the coding developed, which makes it easier to understand what you did and why when you return to it months later to make changes.
This account makes it seem like I prepared everything in advance, but of course the reality was messier; the script was amended as the project developed, a few new topics were added, most of the data calculation happened during the development phase, and almost all the images were chosen and edited as the relevant topic was created.
In the next article I’ll start discussing the nitty-gritty as the resource begins to be developed.
This is the first in a short series of articles that describe the journey from client request to finished product for an interactive online educational resource created using Articulate Storyline. This was my first real project using Storyline, and my aim is to document and reflect on that process in the hope that other novice designers will find it useful.
In November last year I was contacted by Dr Denise Baden from our Business School and asked if ILIaD could develop some online training for hairdressers. The aim was to inform them about environmental issues and encourage them to adopt sustainable business practices that used less energy and water and created less waste. This would be part of a wider ESRC-funded project, so gathering data about their use of the training was a requirement.
My first step was to scope the project so I could develop a proposal and give a first estimate of the likely cost. I looked at the PowerPoint slides they used for their half-day face-to-face training sessions and structured the content as a mind map using MindMeister:
My initial proposal was to have a photo of a real salon with activity areas, such as a client having their hair washed, that would highlight when the learner pointed at them. Clicking would show a close-up of the activity and some questions/options. Selecting these would increase or decrease the learner’s ‘Eco Score’ and show feedback about their choices.
Denise liked this idea, but wanted to a) stress the importance of the sustainable advice hairdressers provided to their clients and b) ensure that all of the feedback related to the impact of their choices on the key topics: energy, water and pollution. There were also five ‘big ideas’ to communicate – for example ‘One Planet Living’.
I refined my proposal in the following email, which I’ve included in full as it encapsulates some key design ideas:
You’re quite right – I thought that the impacts would be linked to from multiple points – so for example with the low-flow aerator tap the info could have a ‘Why should I care?’ button that would lead to a page about water scarcity – and that page could also be reached from (e.g.) the washing machine info etc. Alternatively we might need a set of icons for savings (money/water/energy-carbon/pollution/waste) so that it is easy to apply several to one item (e.g. low-flow aerator saves money, energy and water)
It may be that these big themes could be introduced at the start – a photo of the outside of the salon with image buttons that lead to brief info about the five impact themes. These probably should be videos – for the target audience I suspect that TL;DR is an important factor (if you’ve not come across that acronym before, please google it! ) – and the user has to view these (and maybe even take a fun quiz) before they can enter the salon.
In my view the overall key design objective is to create a resource that will educate, inform and entertain so as to persuade these hairdressers that going green is the best, sensible and professional thing to do that will deliver benefits for them, their salon, their customers and the planet. We should use positive words like ‘savings’ and avoid bombarding them with stats/figures/graphs where possible – I suspect that most of them find ‘maths’ both scary and incomprehensible. At the end of the course what three things do we want/expect them to remember? My ideal would be:
1. know that salon activities have an impact on the environment
2. know that their choices can reduce that impact, save money and benefit customers
3. think that they can and should make the right choices
But I wouldn’t expect them to remember anything about gigatonnes of carbon, temperature rise curves and so on – except to know that the climate is changing, the human and environmental impacts are very serious and that their actions really do count – especially if they also persuade their customers to do the right thing as well.
This set some important project parameters; the objective was to educate and motivate the learners, to provide a positive message about savings, and to minimise the amount of text.
I then created a rough mock-up in PowerPoint that showed how the interactivity might work; this helped my thinking as well as enabling me to more easily discuss it with Denise. Together with the mind-map, it formed my storyboard for the project – as shown in this video:
The final part of this phase was the project documentation, which provided a high-level description of what ILIaD would create, the milestones and their dates, and my best guess at the time required and the total cost. Given this was my first Storyline project, would that guess be sufficiently accurate? Only time would tell…
Denise approved the storyline, project documentation and budget and so I moved into the production phase.
My colleague James Wilson has been using a technique called Forum Theatre since 2004 to help engage Health Science students in complex issues around the lived experience of people with mental health problems, in particular their interactions with the health care system. He works with other staff and students to devise a short improvised play that exposes the issues, which they then perform in class. The audience can interrupt the play at any point and suggest alternative courses of action; the cast improvise to show how that might affect the outcome. The play is usually run several times during the session to explore the various choices and consequences.
James has also experimented with using in-class voting using Turning Point clickers to allow the whole class to suggest alternative courses of action. At specific points a voting slide is displayed and the students chose which option they favour; the play proceeds based on the most popular choice. This also simplifies rehearsal since the play is now a branching scenario with a small set of fixed decision points, although much of the script is still improvised.
Although this technique is highly effective and gets great feedback, it does require a good deal of rehearsal time and a cast prepared to improvise in front of an audience. I wondered if a slide-based scenario using in-class polling could provide similar educational benefits, and have developed a small demo to show how it might work. A key principle is that students should discuss the choices in small groups (e.g. ‘turn to your neighbours’, so this would work with large cohorts in a tiered lecture theatre) before voting individually.
I believe this approach has applications in many disciplines, from health sciences and medicine to engineering, business studies, environmental studies, languages – in fact any topic where the tutor can imagine a learning scenario.
Creating an interactive scenario
The first step is to sketch out the scenario, using pencil and paper or a tool like Visio. The scenario comprises a collection of nodes linked by choices. In the planning stage, each node is just a short description (e.g. “get on train”). Make sure your nodes are initially widely spaced so you can easily add extra nodes between them as the scenario develops. Longer scenario should be structured into distinct segments that are connected by just one or two choices. I think that all the Fighting Fantasy adventure game books by Ian Livingstone that I played when I was young were great training for this style of writing!
I then created an template slide with areas for the story text, an image and the choices; with a bit more thought I would have used a Slide Master for this. I copied the template to create one PowerPoint slide for each node, each with a descriptive title (e.g. “Catch the first train”). Images were used to help make the scenario seem more ‘real’.
Each node should not have more than a couple of short paragraphs; if students need to view detailed information about the scenario, make it available online or on paper. The writing is perhaps the most challenging part; it needs to be authentic, concise and carry the story along. The choices should guide student discussion that supports the learning outcomes, and it should not be trivial to identify the ‘correct’ choice.
Both Turning Point and Meetoo make it easy to convert a numbered list of choices into a polling question. For technical reasons this needs to be done before the next step, which is to link each choice to the relevant slide. In PowerPoint, select the choice’s text, right-click and choose Hyperlink > Place in this document > target slide title. Good descriptive titles for each slide greatly assist this process and also contribute to the storytelling of that node by setting the context.
The final step is testing; making sure that all the links work correctly and that the scenario guides the students to the discussions you want them to have. You may want to add extra links that make it easy to jump back from a node that describes a poor outcome to an earlier node so that students can make a different choice.
MeeToo is designed as a business tool to support meetings and conferences, but provides some strong educational features. Its overall design is clean and modern, and I found the user interface simple to understand and quick to use. The messaging feature in particular offers some interesting new ways to communicate with the class, get comments/questions/feedback from them and make it easy for students to indicate which of these they agree with. The free PowerPoint add-in offers similar ease-of-use to TurningPoint and really integrates the questions into your slides.
Meetings: A collection of poll questions are called a Meeting, which are named (e.g. MANG1001 week 1) and have a defined start and end date/time. Each meeting has a unique nine-digit ID (eg 121-284-301) which students will use to access the questions and vote. An Invite button makes it simple to send an email with the key details, including a link to the iOS and Android apps. Students can also vote using any modern web browser.
Messages: If enabled (default is ON), Messages can be sent by the Host (tutor) to all students, and students can send messages which again everyone can read. The Host can edit or manually hide any message. The Host can also activate Moderation (default is OFF) which means that all new messages are stored in an area called Needs Review. The Host can then drag these to another area; Reviewed, Published or Hidden. This enables the Host to select which messages students see in a very controlled way.
A ‘thumbs-up’ icon next to each published message enables students to quickly indicate their agreement, and provides another way to gauge opinion and conduct quick polls based on student suggestions. In a lecture it would also enable students to easily provide feedback to the tutor about which questions (from other students) they would most like the tutor to address.
A neat feature for the Host is the ability to activate a ‘Projector’ mode that opens a new browser window that just shows the messages in a chosen area (e.g Reviewed) as well as the number of ‘likes’ each is receiving. It looks like this will work best for say 5 or 6 chosen messages without scrolling.
Polls: All questions are simple multiple choice or multiple response with a set number of allowed selections. Results can be shown as number of votes, % of votes, or both. To create a question the tutor just types the question text and the answer choices (one per line). There is no support for formatting, maths or images. The interface makes it easy to duplicate, delete or edit questions. Polls can be individually opened and closed by the Host, and student votes are immediately shown on the tutor’s screen. Again there is a ‘Projector’ mode that opens in a new browser window and shows the current question and answer choices, but not the live polling results. When polling is closed the tutor can push the results to the ‘projector’ and to the students’ screens.
PowerPoint Add-in: this free download for Windows PowerPoint (only) uses Microsoft’s .NET framework, which may require an additional download depending on your version of Windows. It adds the MeeToo ribbon to PowerPoint which makes it easy to add questions to new or existing presentations. Standard slides that have the question as the slide title and the options as a bulleted list can be automatically converted to a question slide. It is also possible to add Analysis slides that either a) show the results of up to six polls on the same screen, b) recall the results of a previous poll or c) total the results of up to six polls. Options a) and c) require all polls to have the same number of answer options. Display options include the ability to hide the results, show a countdown clock, play sounds during and at the end of polling, and (very neatly) select chart elements so they can be easily formatted and styled to match the rest of the presentation. All of these are ‘per slide’ – there is no way to apply these choices to all slides. A ‘sample results’ button simplifies testing of questions if required.
The tutor needs to access their MeeToo account in advance to set up the Meeting, since the meeting ID (as well as their username and password) is required to connect PowerPoint. A button on the toolbar then provides instant access to the MeeToo web dashboard. Questions created in PowerPoint are copied to the dashboard when the questions are displayed.
During the presentation, question slides are initially displayed with polling disabled and the tutor must press Enter to start polling (and the countdown timer if used) and Enter again to stop polling and display the results (unless hidden by choice).
Cost: MeeToo offers a free educational licence for up to 100 students/lecture. Annual licences are available for 500 students (£845) and 1000 students (£1495) but this is for a single user (tutor) and although this might be awkwardly sharable between a programme team, there is no multi-tutor site licence available.
The idea underpinning skeleton notes (also called guided notes) is a simple one; students are provided with a set of lecture notes that has gaps where selected key details and formulae should be, and fill in these gaps during the lecture. There might also be charts, graphs, diagrams and maps which need lines drawn, axes labelled, data values added etc.
The aim is to scaffold students’ ability to create well-structured notes that contain an appropriate level of detail and to reduce the amount of time (and therefore attention) they need to write the notes, while at the same time helping them to maintain attention during the lecture. Far too many students try to write everything down, making it difficult for them to actually process what is being said and creating notes that are difficult to use as revision aids.
Skeleton notes are also good for dyslexic students, since they greatly reduce the amount of text that needs to be written and so make it possible for them to take their own notes during a lecture. They would also work well for a student who missed a lecture and caught up using a recording – they could take their own notes instead of copying a friends.
A useful paper is Do Guided Notes Improve Student Performance? by John Morrow (2012) which provides a good introduction to guided notes, a literature review and a study which reveals some surprising results:
“It is interesting to note that while there was no significant difference in performance between students in the two semesters, the majority felt that guided notes were extremely beneficial to their success in the class. With respect to the in-class benefits, 82% responded that they were better able to pay attention to the presentation while using guided notes and 73% reported that guided notes helped them retain more of the material because they used guided notes. Additionally, 76% preferred using guided notes over taking their own notes, stating that guided notes better organized the material. Regarding the usefulness of guided notes for test preparation, 88% stated that guided notes helped them prepare for exams.”
So lots of benefits, but none of them translated into improved exam performance! That said, this is only one study, and others he cites did show improvements.
A quick green-ink rant about the awfulness of 3-slides-per-sheet PowerPoint printouts. Many tutors put too much text on their slides (slides are not substitute lecture notes!) so the text is unreadably small – and these printouts ‘excuse’ students from taking their own notes, which we all know are a key way for them to identify key details, organise that information and link it to previous knowledge.
Tags: clickers, Poll Everywhere
Monday saw the first meeting of the UK HE/FE Poll Everywhere user group, held at Regent’s University London in an oasis of green at the heart of that city. The attendance of around 35 people shows the level of interest in Poll Everywhere, a system which has its roots in education.
Dani Arama, PE’s education support manager, had flown in from San Fransico, and gave us an quick tour of new features and a heads-up of others still in development – for example an attendance tool. She was also able to clarify some of our questions about licencing and it was reassuring to hear that if (for example) you paid for 2000 licences, there was no hard ‘cut off’ and that there would just be a discussion with PE about moving to a more suitable plan. In addition, she said that with prior negotiation some exceptional uses could be taken into account, such as use at a one-off big conference. This is clearly a different model to that we have with ResponseWare, where I’ve had to set up a shared calendar to help tutors ensure that we don’t exceed our licence limit (250) to avoid some students not being able to vote.
There were three presentations from current users:
Jorge Freire from City University London outlined their pilot project to evaluate and compare Poll Everywhere and ResponseWare. Areas of interest include integration with their VLE, analytics and reports, account management, authentication and ease of use in practice. They will also be exploring tutor’s concerns about the use of mobile phones in class and the increased potential for distraction.
Darren Gash from the University of Surrey discussed their move from Turning Point clickers available through library loans to Poll Everywhere. Some students were reluctant to borrow and use the clickers as their ws a £50 fine if they lost it, and in a survey 87% of 149 students preferred using own device to clickers, and 93% of 150 found PE easy to use. He also introduced two case studies – in one, students studying a ‘Pyschology and Education’ module discussed a topic in class then typed their individual 100-150 response into an open text question. The tutor downloaded all the responses, gave each brief feedback and uploaded that as a single document to the VLE the following day. Initially student answers were shorter and the tutor feedback longer, but as the weeks went on that reversed – they provided better, more detailed answers and less feedback was required.
Denis Duret from the University of Liverpool shared the outcomes of a comparative study between card Communicubes, Turning Point clickers and Poll Everywhere; 62% of students preferred PE. The clickers were seen as more reliable and less distracting than phones, but students didn’t like cost. Again, their were staff concerns about the use of mobile phones in class.
The user group also discussed ideas for activities and meetings; the preference was for regular webinars plus an annual face-to-face event.
Yesterday I was pleased to be able to help my friend and colleague Dr Denise Baden run an X-Factor style gala event at which five groups of young people from schools and colleges performed their own songs about Fidel Castro and the Cuban revolution. The aim is to ‘crowd-source’ a complete musical, and the first performance will hopefully take place in Southampton later this year.
My role was to manage the audience voting using TurningPoint and clickers, so I worked with Denise to design the slides provided technical support at the event. I suggested that the voting slides used 1-5 stars instead of rating each song from ‘very good’ to ‘not good’ and I wasn’t happy with the middle ‘neutral’ choice… what does it mean to be neutral about a piece of music?
The event was thoroughly enyoyable… and quite stressful! I had my fair share of technical problems with the audio (from the laptop to the PA system), Turning Point (despite prior testing) and the data projector (which wouldn’t show the whole screen, so I had to re-design the slides). However, the five performances were fantastic and in the end ‘it all went alright on the night’. The audience votes (around 240) were hurriedly combined with those from the expert musical panel and the winner’s certificates presented. The clickers were also used to quickly gather research data from the audience to help evaluate the impact of the project – we all need to ‘show impact’ these days!
Tags: green, JPEG, photos
I like to think that I take quite a good photo, and on rainy lunchtimes I will often while away some time on the Digital Photography Review website to gain inspiration and keep up to date. Today I read an article about an improved method of compressing standard JPEG images that can lead to reductions in file size from 20-40% for typical web-page images up to 50-80% for full resolution camera images. And the technology, JPEGmini by BEAMR, is available now as a stand-alone program, a plug-in, a server or a web service, and claims to be able to make these reductions with no perceptible loss in visual quality. There is a free trial version for both Windows and Mac PCs, or you can use the free web service.
For me, the appeal would be to significantly reduce the space taken by my iPhoto library (currently around 15,000 photos) without reducing image quality. And of course backing up those images to cloud storage or uploading them to the Photobox print service I use would be significantly quicker. The $20 stand-alone app will do batch conversion, so it won’t take me much effort either.
This quote by the developer, Dror Gill (whose father Aaron Gill was one of the chief scientists who worked on the original JPEG standard in the 1980s) caught my eye:
“There are a lot of terabytes wasted by files that are larger than they need to be. There is no point using bytes and bits that are not visible to humans. The industry is doing it all the time. Maybe we should calculate how many exabytes are being wasted every day – the inefficiency of normal JPEG compression pollutes the environment.”
And the point here is that the storage and transmission of images has a real cost; disk storage and network transmission consume energy – a lot of energy when you consider the billions of images taken, uploaded, stored and viewed on the internet every day. Social media users upload and share around 2 billion images per day. In 2013 it was estimated that the internet used 10% of the world’s energy supply, more than aviation! So a simple technology that minimises the storage required for images and the bandwith needed to transmit them could really make a significant impact on global energy use. But not as much as more efficient video and audio compression methods…