Teaching Reading – Developing click to reveals

Project background

I was invited to assist in the Teaching Reading project, which had increased beyond the scope of one learning designer to manage amid a busy schedule, and to add some interactivity to a rather text-filled content map.

I printed out my allocated parts of the content map PowerPoint at 6-slides per page; cut them out, sequenced them, stuck them in a 'scrap book', and then made my design notes around them: re-sequencing and grouping where necessary.  This paper prototyping gave a clear view of the content and how it all related and a great advantage in speed, time, and effort in the overall learning and interaction design.

Teaching Reading – a text analysis

This simple click-to-reveal screen is included here as it works. It's not an excuse to hide voluminous texts that otherwise don't fit on the screen, but is a useful application of the reveal technology.

[text analysis]

It builds on on the preceding screen (see it in this portfolio at the struggling reader) demonstrating what those struggles are caused by.

[sketch]

The general layout and dot-with-line device was my own. I wanted the dots and the text boxes to be selectable but had to conceede to just the boxes being selectable. As ever, Damien made it not only work as an interaction but made it look smart, too – ensuring the dots did not look selectable as I felt they were logically going to be perceived.

[image with feedback]

We had more fun with the template than shows in the final product. Damien knocked up a Quinton Blake styled librarian character who would trot up and down his trolley-ladders, his hand following the mouse and animating on selection of a hotspot in a library-based screen. It looked crazy here, but the fun intended didn't survive the first presentation of the idea anyway.

Sometimes I think we miss fun opportunities trying to think how adults couldn't possibly live with a laugh. Given the current resurgence in comedy in the media and bleak times for all, I can't help feel the odd unnecessary laugh isn't a benefit to learners sat in what can otherwise be a very dry eLearning environment. Especially trapped in a SCO box.

Teaching Reading – the carousel

The 7-levels of reading was destined to be a passive carousel (slide show) right from the outset. This was almost certain before I joined the production team.

Damien's graphic treatment of the slideshow.

There seemed little to do to change it where the knowledge was not of sufficient priority to give it a scenario-lead formative treatment. The paper prototype was therefore already constrained by product scope. This was a little depressing.

Paper prototyping looking at a simple 'graphic reveal' of 6: a 7th reveal required a slideshow strategy.

I take a bleak view of click-to-reveals, and the carousel is one variant I've seen employed rather badly by our suppliers. However, Damien again stepped up to the breach and delivered a good looking variant.

Further carousel developments

Mark Kobylanski, my own team's former interaction designer spent some time on the presentation of the carousel and came up with some neat modifications to the controls that at least made the thing easy to use. (It was a fight to get the suppliers to see it that way, though).

From: Gifted and Talented e-learning modules for leading teachers, Module 2.

What we did with the Gifted and Talented course was to remove the classic small control arrows and use much larger hit areas to make the operation easier. I didn't like the right control being against the image as the text only supported the text, which would have visually formed a more integral part of the slide having the right control on the text's right. A small bitch, but hey, that's the compromise required of collaboration.

Later still, we introduced slide numbering to act as breadcrumbs and review navigation. This was making the carousel more useful for combining learning sequences over multiple 'slides' (read screens) without seemingly completing a discrete section implied by using a Next button. We were hauled in a little however, as screen development cost would be the the same for 10 slides as 10 screens...I still like this idea of continuity, however.

Since then, Ian Parkins and I exploited the carousel's learning design further by adding a time-line control, originally (to Ian's specification) with a draggable navigation to speed through the 'slides' to areas you wish to view / review.

I created a prototype in PowerPoint, which built up the speech texts as the 'slideshow' progressed.

A proof of concept using PowerPoint showing that the dialogues would spread across scenes within a slideshow.

This prototype fed the idea of using potential speech bubbles (later known as 'stubs') to execute the appearance of each bubble in sequence. I was pleased with the idea.

Speech bubbles were originally thought to build up in sequence.

However, the idea was initailly strongly resisted but survived as there was no other logical way to present the sequenced texts on learner demand so texts appeared to their timing.

For the Secondary and Primary Pedagogy Pack project, Mark Stanfield further skinned the interaction but sadly the sliding control was negated by schedule.

Early high-fidelity prototype in Powerpoint using screen grabs from Mark's concept art.

The carousels still look pretty much as intended though and navigational GUI is only a thought away from being near perfect. Mark boostedthe simple timeline idea with thumbnails designed to visuall remind learners of who was speaking, or in what context should they wish to review the piece. Recognition is a powerful part of memory, after all.

The multi-media opportunities were out of product scope this time, but looking out to the future there is some exciting mileage to come from this yet. We still managed to utilise MCQ, video, audio, animation, and other minor interactions, so I can't complain.

Mark added tool tips to the thumbnail icons. This has been used extensively in the Primary Pedagogy product where we needed to lift 'text-and-graphic' but build more engagement than the standard carousel can offer.

For Teaching Reading, however, we were not so fortunate to have the time-line device available to us, but still the presentation of the carousel is well treated and needs commending for beginning to point the team toward the creation of what is now a far superiorly device than anything we'd produced before – and knocked spots off the terse strategies often offered by our suppliers.

Course details

Course materials Crown Copyright 2010, produced by The National Strategies for the Department for Education.

Objective: For teachers to develop their understanding of the struggling reader and that their role includes teaching literacy and reading skills regardless of the prime subject matter.

Production team

• Khaleem Bhati  (Team B production manager)


• Damien Street (Team B interaction designer)


• Jill Fosness (Team B learning designer)

Teaching Reading – Blending or segmenting

Project background

I was invited to assist in the Teaching Reading project, which had increased beyond the scope of one learning designer to manage amid a busy schedule, and to add some interactivity to a rather text-filled content map.

I printed out my allocated parts of the content map PowerPoint at 6-slides per page; cut them out, sequenced them, stuck them in a 'scrap book', and then made my design notes around them: re-sequencing and grouping where necessary.  This paper prototyping gave a clear view of the content and how it all related and a great advantage in speed, time, and effort in the overall learning and interaction design.

Teaching Reading – Blending or segmenting

The course content map (a long PowerPoint submitted by the SME) referred to a list of words written as graphemes to demonstrate how readers blend, and writers segment words by sound (phoneme) and letter icon groups (graphemes).



Having already considered a sliding time line for the Gulliver's travels extract in Struggling readers it again seemed suitable here. It just needed organising, so I spoke with Damien, the product's interaction designer.



The referred words were Primary children level rather than for the Secondary pupils taught by the target learners (Secondary teachers) so I needed to come up with a selection. 'Education' has been my favourite word (not the meaning per se, just the word since I was about 4 years old) so I indulged.



I quickly visualised how to play the spoken words and display the graphemes, and to play the phonemes that created each word. This would give a multimedia dimension that also enabled learning if sound is not a preference. I also played with making it a more formative exercise - but my instinct returned me to an exploratory learning sequence rather than a forced one.



Heuristically, we developed a cunning strategy to have the graphemes display as the media-playing time line was navigated by the user, each phoneme audio playing as each is passed. On dragging the slider quickly, the phonemes would combine and the complete word play. Nice. Then all we needed to do was place these 3 examples within their own mini slide show / carousel. Damien visually treated the page similarly to the 7-levels of reading graphics. This tied things in nicely with the rest of the product.



Once I had the words sorted, we recorded me speaking them out and making the individual component phonetic sounds. This was fine for early high-fidelity prototyping but my Son provided the final audio. He didn't get paid but due to his being a genuinely struggling reader, he deserved something more for all the time he spent learning new words and spelling them out in an unfamiliar way. Thanks, Son!

I think this is one of Damien's and my own favourites from the program. It's only a shame that the vendors developing the product didn't treat the audio with the finesse we achieved at prototype. For this reason, the final version just doesn't quite cut it by comparison.

Course details

Course materials Crown Copyright 2010, produced by The National Strategies for the Department for Education.

Objective: For teachers to develop their understanding of the struggling reader and that their role includes teaching literacy and reading skills regardless of the prime subject matter.

Production team

• Khaleem Bhati [+]  (Team B production manager)


• Damien Street (Team B interaction designer)


• Jill Fosness Team B learning designer

 

Teaching Reading - Struggling reader

Project background

I was invited to assist in the Teaching Reading project, which had increased beyond the scope of one learning designer to manage amid a busy schedule, and to add some interactivity to a rather text-filled content map.

I printed out my allocated parts of the content map PowerPoint at 6-slides per page; cut them out, sequenced them, stuck them in a 'scrap book', and then made my design notes around them: re-sequencing and grouping where necessary. This paper prototyping gave a clear view of the content and how it all related and a great advantage in speed, time, and effort in the overall learning and interaction design.

Teaching Reading - Struggling reader

The course content map (a long PowerPoint submitted by the SME) attempted to describe the recognisable range of difficulties demonstrated by a struggling reader.  The strategy included reviewing a separate document asset.  It all seemed rather clumsy and too much effort was required from the learner.

As phonemes are represented visually by graphemes it seemed fair to use graphemes to represent a struggling reader’s speech.  I needed a speech.

Audio tracks were logical, but how to capture learning for accessibility or learners without sound enabled on their IT?



The product’s visual style was being developed by Damien (the interaction designer) to convey popular children’s literature: characters, illustrations, and places.  I had recently bought a Ladybird book Gulliver’s Travels for my Son to read and I knew the original novel was far more adult in language and context so I found some ‘shocking’ extracts on line to use as a reading extract.  The bits about breasts seemed inappropriate but one passage from Lilliput read in as complex an English as required.



My Son then read the passage to me and I segmented the words to match his own struggles with the text (the audio he recorded actually made it to the final product, too).  So, now I had two texts: one as written and one as read by my own struggling reader.  Now, how to present them?

Having used Flash and XHTML/CSS I knew I could employ layers that could switch over one another but I really wanted the transition to be smooth and progressive so the difference could be explored instantaneously with the learner’s listening to the audio.  An automated animation was too controlled – I wanted the learner to have freedom in their activity. Some form of control was necessary that gave a feeling of space / time: a slide-bar was ideal.



Damien’s own developing Flash skills were far superior to my own and so we sat down for a heuristic exploration of how to present the interaction.  In no time at all - admittedly with some graft and input from Damien (notably to slide up and down rather than across), we had a working prototype combining a sweeping slide control, media player, and visual transition between the two texts.  Spot on.



There were compromises – as there always seem to be. We had to separate the audio player from the slide bar control, which would have been nifty but difficult to plan the audio for requiring each reading to run at the same speed – impossible between a skilled and struggling reader. Besides, the vendors didn't seem able to develop it without significant hike in price. But overall, I'm pleased with the outcome although the audio is far more compressed than submitted.

Later, after the product’s release, Damien played with this again and really polished it up a treat.  It will remain a favourite in my arsenal of novel interactions for a long time.

Course details

Course materials Crown Copyright 2010, produced by The National Strategies for the Department for Education.

Objective: For teachers to develop their understanding of the struggling reader and that their role includes teaching literacy and reading skills regardless of the prime subject matter.

Production team

• Khaleem Bhati  (Team B production manager)


• Damien Street (Team B interaction designer)


• ” target=”_blank”>Jill Fosness Team B learning designer

Teaching Reading - Simple view of reading

Project background

I was invited to assist in the Teaching Reading project, which had increased beyond the scope of one learning designer to manage amid a busy schedule, and to add some interactivity to a rather text-filled content map.

The simple view of reading (SVOR)

This screen was to use a graphic from existing publications depicting the SVOR.

Simply presenting a text and graphic screen wouldn’t ‘teach’ much so I planned to add an interactive learning element by combining a ‘click to reveal’ allocated to the following screen's content chunk listing the attributes demonstrated by each of 3 typical readers. It was an opportunity to create a formative assessment using a micro-scenario.

My initial sketches and paper prototyping illustrated the combined strategy and alerted us to the requirement of a brand new template. Jill (the owner learning designer) found another two screens for the template’s application so the go-ahead was eventually agreed.



The sketches conveyed the screen design to Damien: already working up illustration cues based on popular literature styles. It didn’t quite fit at first but Damien quickly got to grips with it and mocked up a visual prototype based on my low-fidelity paper interaction prototypes and heuristic work live at his desk. This collaborative approach developed a satisfying outcome very rapidly.



On selection of the confirmatory button (here, 'Submit' - another house style) the tiles animatedly re-arrange from the learner's performance to the 'correct' locations when the learner is invited to select the tiles once more to learn why their position is as it is.

I prefer formative to summative assessments during the learning: feedback that is timely, accurate, and relevant rather than the house style of the time stating, “You’re wrong, bozo”. Whether the learner is correct or not they should have their learning confirmed. This also benefits the developers where there is no necessity for complex ‘IF – ELSE’ programming. The learner (drivers, preferences and styles unknown) benefits from not being patronised or demoralised!

There were of course some compromises between my intentions and the developed product but it does a fair job of lifting a benign graphic off a printed page and explaining it progressively on the screen.

Course details

Course materials Crown Copyright 2010, produced by The National Strategies for the Department for Education.

Objective: For teachers to develop their understanding of the struggling reader and that their role includes teaching literacy and reading skills regardless of the prime subject matter.

Production team

• Khaleem Bhati (Team B production manager)


• Damien Street (Team B interaction designer)


• Jill Fosness Team B learning designer

Clip art

Microsoft's PowerPoint is not only a mode of transforming a keen and attentative audience into a group of dazed idiots with a combined IQ of an ameba, it is a very powerful vector art programme. No. Really. It is.

It lacks any finesse but at a pinch, for example working in a role that, "doesn't require" its designers to produce art work it can produce JPEG and PNG graphics for buttons and other graphic user interface (GUI) components that near equal those created by Adobe's breed of graphic tools. I said, "near equal".



With a little thought to how images are built up in layers quite smooth effects can be created. The orange peel has had a texture applied - although in reality it's a pattern fill that looks like a texture in this instance.

Illustrations

With PowerPoint's vector advantages and a little thought, quite complex and realistic illustrations can be compiled.

The following are a couple from my working with HP network server equipment, which resulted from a quiet period doodling; being seen, and then directed to produce a suite of the things. They're the most expensive things I've every drawn - for my customer ;)



The grill on this UPS (above) was produced as a separate PNG file so can be removed.



This is a componenttaken from a larger device (the back of the UPS above). The power of vector graphics is being able to scale them without loosing detail.



The NAS system component was a joy to draw in trying to capture the shape and light of its contours where most of these are black. Using a lighter shade of grey than expected produced not only pleasing but clear results that now form a backbone of illustrations used in the current project. The DVD ROM was slightly rushed but each logo needed creating quickly to meet the schedule. I have time to revisit this later.

Other components

However, back to GUI. These gels aren't so bad, are they? They can be improved upon, but there's no need to removed them from PowerPoint to do so and what many people forget is that PowerPoint can save images to scale.



These gels are pretty basic but form a key part of the layering strategy used in the HP product illustrations above.

Cartoons

I'm known for some of my cartoons created in PowerPoint. Here's an example.


From: Sump by Pat Godfrey 2004 This was also one of my earliest web sites.