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)