Tuesday, 15 March 2011

Coming soon...

Pie chart interaction




Blooms taxonomy revisited


Posted by at 2 comments:

PPP - Scenario with timeline

Project background


Lead SME’s comment, “I wish we had as much interaction in the Secondary product as we do in the Primary one”.

The Primary Pedagogy Pack (3P) was the successful younger sister product to the Secondary Pedagogy Pack (2P). Both required extracting and modifying volumes of legacy printed materials (the ‘Ped Pack’) into cohesive eLearning and web-based materials for teachers graded by OFSTED as Satisfactory where their target is Good. The content combined basic pedagogy with phase-specific methods of enhancing their planning and teaching including modules on group work, questioning technique, and individual tuition.

Vaishali owned the Secondary product while I owned the Primary, which was to follow the Secondary design and themes. This required my input to the Secondary product to defend the Primary range and some tenacity to inject new interactions with which to lift the Primary product to better suit its audience.

Story telling


The product risked presenting all of its eLearning as simple text-and-graphic after the SMEs rejected almost any hint of interaction, simulation, or activity at initial and subsequent scoping meetings. Something needed done to win back their confidence after we'd shocked them into their bunkers with the word, "game".

I looked to story telling and to sequencing information as cartoons do. 'Cartoon', I found quickly, is a dirty word among the more mature eLearning professionals so Vaishali, Mark, and I agreed to term my cartoons as 'illustrations' - and sequences of 'illustrations' as 'animations'. We made great mileage out of this in-joke :)

In any case, to be sure Kathryn and SMEs would buy in to the strategy I mocked up some PowerPoint slides to convey the idea of sequencing characters and their dialogue; changing 'tell'-mode explanations into more engaging and provocative conversations between teachers with whom learners could empathise.

Evolution of the scenario screen where selecting a speech bubble prompts the nest bubble or change of scene, etc.


The concept grew and was developed by Ian Parkins, one of our developers who picked up on my plan to give learners the ability to easily navigate through the scenarios with a timeline and added, "we could add a scrubber". You could have heard a pin-drop if it wasn't for me getting very excited and interrogating the feasibility with Ian, who exchanged pained expressions of apology with the lead developer on the project, Chris Burgess.

Early scenario timeline using tabs as navigation for review and visualisation of the scope of the screen.


The timeline scrubber just added to the convenience of the timeline, which was intended in my mind to offer the learner what most carousels do, only turbo-charged:

  • Depth of content in a restricted screen real estate

  • Visualisation of the scope of the interaction - how much is coming

  • An alternative navigation to more usual carousel direction arrow controls

  • A breadcrumb

  • A navigation device for review / 'instant replay'

  • And in the case of the scrubber and cartoon - er, building animation - a rapid 'play' device that might be useful if the sequences are planned to be seen quickly to build frame by frame into a animated sequence


Ian quickly threw in a low fidelity Flash prototype of the scrubber device. It was genius in my eyes, and opened a whole can of worms about how much content should be put in a single screen!

Is a screen a discrete learning container or a part of a sequence of screens that form an outcome? Is a screen with a carousel or 'more' click-to-reveals not just a way to put more content in a screen than can fit at once to maintain its relevance within the screen before implying completion of an outcome by selecting, 'Next'?

My argument was that a screen could now be as deep as one wanted as there was the scrubber and timeline to navigate by - on-hover tooltips or other label devices signifying what's where, just like a sub-menu: that multi-media and learning strategies could be combined almost infinitely offering a voyage of discovery through a topic without the false sense of clumping information that oughtn't or ought to be clumped. Perhaps I was a little naive.

Anyway, it seemed each new 'page' or 'scene' in the scenario would count as a single screen's development time. (The argument was never fully closed, by the way).

The upshot was that the scenarios could be of any length but once Mark had scoped out how many thumbnails (acting at visual navigation points) could fit across a screen this pretty much limited their march into infinity.

Using speech bubble 'stubs' as primary navigation, which initiated dialogue or media slides / scenes, breadcrumbed by the secondary navigation in the thumbnails (PowerPoint P3 prototype so thumbnails don't 'develop' here.)


Now we had:
  • The story / scenario strategy

  • The rescripting of texts into dialogues

  • The primary navigation device (speech bubble stubs)

  • The secondary navigation device in the timeline thumbnails

  • A breadcrumb (highlighted thumbnails)

  • Teaser text for each scene as a roll-over tooltip on hovering over each thumbnail

  • An automated event handler to initiate further activity hints on the screen (such as the learning log hint).


All that was missing was the 'scrubber' / slide control. Where'd it gone? Well, I'd been on leave and during my time away there was no one to argue for it except Ian and he was out-gunned by schedule and sceptics alike. Shame. I missed the sucker - but I still have great designs on it in the future!

Here's a video of how the scenario-with-timeline eventually looked.

The scenario with timeline presenting a dialogic story and completing with the automated expansion of the learning log activity hint.


Of course, it didn't stop there. It developed further to tell stories that had been presented as text-based dialogues. Here, the magnet characters came to the fore to allow quite abstract series of scenes unfold to illustrate otherwise bland scenarios.

Developing the story telling capability (cartoon?)


Summary


The scenario with timeline is a development of the click-to-reveal or carousel screen type that enhances usability and the learners' access to its information at their control, decreasing their need to remember, enabling review, and potentially delivering powerful formative interactions, media, and summative assessment. Their's great potential here. It demands exploring further - and it demands the scrubber! (Sorry guys - still banging on that drum :)

Find the products at:


Course details


Course materials Crown Copyright 2010, produced by The National Strategies for the Department for Education.
Objective: To improve 'satisfactory' Secondary and Primary teachers' pedagogical practice to 'good' or better.

Production team


Posted by at No comments:

Monday, 14 February 2011

PPP - Secondary to Primary phase

Project background


Lead SME’s comment, “I wish we had as much interaction in the Secondary product as we do in the Primary one”.

The Primary Pedagogy Pack (3P) was the successful younger sister product to the Secondary Pedagogy Pack (2P). Both required extracting and modifying volumes of legacy printed materials (the ‘Ped Pack’) into cohesive eLearning and web-based materials for teachers graded by OFSTED as Satisfactory where their target is Good. The content combined basic pedagogy with phase-specific methods of enhancing their planning and teaching including modules on group work, questioning technique, and individual tuition.

Vaishali owned the Secondary product while I owned the Primary, which was to follow the Secondary design and themes. This required my input to the Secondary product to defend the Primary range and some tenacity to inject new interactions with which to lift the Primary product to better suit its audience.

In the beginning


After a quite thorough user / learner analysis, Vaishali and I spent time organising how the blend of web and eLearning would compile into a cohesive product for both 2P and 3P. At the specification stage I illustrated how the Primary product would fit on the National Strategies web area and outlined the structure of the eLearning modules.

Showing how most product structures would be presented at specification.

Specifying the model for each module throughout 2P and 3P.


Building the products


Early SME input during scoping negated the ‘blue-sky’ interactions I was given license to create by my producer, Kathryn. This risked both products becoming a series of static screens of text with graphic. We were all a little deflated; keen to develop an exciting product with the talent of our internal team.

One of the simulation concepts thrown out by the SMEs.


As the Secondary product took shape I kept contact with its design process to keep an eye on what my Primary product (the 3P) would need to follow in visual and interaction design. Using my product's situation as caveat I often needed to fight its case within a product that was not my own, but Vaishali was frustrated with the cutting of some of the more exciting ideas and welcomed my interference to feed her own battles. It may sound dramatic, but was in effect a close collaborative effort.

Some scheduling issues resulted in Vaishali and I needing to pull word counts and GUI direction from thin air. We were loosing interaction designer Mark Kobylanski and welcoming Mark Stanfield. There was a short period of turbulence as Mark settled and put his own authority on the art direction and screen real estate. The result was SMEs writing to screen counts far in excess the real estate Mark provided, requiring a little additional work re-scripting to fit.

Issues and problems aside, 2P progressed to maturity while 3P was still being wet-nursed by the SMEs.

2P Screens vs. 3P screens


As I was busy working on 3P some 2P developments went by without my feedback. A case in point is the menu screens in which there permeated some errors in design that were too far in development to be changed by the time I picked up on them during 3P development.

2P issues


  • The menu button roll-overs opened over the buttons above obscuring these from view

  • The teacher's introduction text opened over the buttons, too forcing the user to close the bubble before determining a button to select; an unnecessary control over their navigation.

  • The speech bubble text exactly followed the recorded audio. This could cause latency / redundancy effect in readers also listening to the audio, which can over burden the learner and impair comprehension of either media.

In the 3P product, I fixed these issues although there were some compromises to be made where it still needed to follow 2P's lead. Changes had to be subtle.

3P solutions


You can see:
  • The menu rollovers are moved right to avoid obscuring the vision of there being buttons beneath

  • Speech text has been removed and placed in a transcript, which opens in a MS Word document on the learner's choice.

Subtle, but all the difference when comparing the two versions on screen.

Photography


The National Strategies had a huge photo library of children and pupils in school settings but almost nothing that would lend to scenarios. I wrote a guidance on the taking of photos that directed different poses and settings for each child to participate in, which worked for the Secondary DLITT project but too late for this one. There was no budget for more photography.

Can do, will do, I offered to take photographs at my childrens' school - entirely plausable having scoped the idea with the head teacher only recently before due to my frustration at the paucity of suitable (and of good quality_ photography in the organisation.Unfortunately this met resistance for being out of schedule, scope, and likley to take time to ratify with DFE. It was a major frustration.

Early prototype requiring images of 3 pupils / children to summarise their benefits from their teachers' improved performance.


Eventually, Mark and I began discussing 'cartoon' characters, which evolved for Mark into sketches on the wipe baord, and for me into cyt-out magnets; a part of a set of props available to the teachers sharing CPD throughout the scripted dialogues.

Damien Street (Team B's interaction designer) was pretty slick with his illustrations so he mocked up a version each of the sketches and magnets. The sketches were too woolly for me and I resisted them quite fiercely - the magnets seeming more likley in the environment than stuff beautifully sketched by busy teachers on the wipe-board. Having worked a great deal in simulation learning I knew the 'suspension of disbelief' would carry the magnets - that any teacher could employ - compared to the sketches it is doubtful all teachers could draw to the same quality or ability.

Thankfully I managed to influence the team's swing toward the magnets.


The difference in illustrative style between 2P and 3P. The 'magnet' characters were a last ditch effort to keep some 'Primary teacher' flavour in an otherwise very adult-themed product (as requested by my SME)


Developing story strategies through prototyping


How to break up blocks of text?

The simplest strategy to improve the readability and digest of large explanatory (tell) texts was to turn these into stories by breaking them down into conversations and sequencing these as would a cartoon. 'Cartoon' is a dirty word among professionals so scenario will take its place here ;)

Some iterations of the PowerPoint scenario prototypes.


First, I developed the context of teachers grouped in CPD sessions discussing the strategies and their experience of them. I created a sage, a moderate, and a novice initially. The idea of a 'narrator' in 3P to guide the learner and the characters (involving the learner in the story and thus any challenges) was washed away by my SME who just could not get the strain on reality this gave her.

It was a shame we gave in to the SME, as later that very strategy would have been very useful to control the learners' experience in some of the activities. The scenarios worked well all the same. Once the prototypes were seen and understood, most of the potential pit-falls and reality boundaries were quickly sorted out at each iteration.

Early prototyping really does save time later!

Summary


These are just a handful of experiences I enjoyed during the 2P and 3P projects and hopefully this gives a flavour of the team's work that goes in to developing even the simplest screens - where time allows. There could be improvements, but the end result is a pair of great looking products - one of which is a little richer, but both of which delivered what our customer required and at times demanded. Job well done.

I'm particularly proud of some elements of 3P that allowed me to 'come of age' as an eLearning learning designer.

Interactions to brag about:

    Scenario with and without timeline
    Decibel meter
    Pie chart
    Bloom’s taxonomy
    Matching exercise with instant feedback
    Pause-action video
    Discarded interaction ideas


Find the products at:


Course details


Course materials Crown Copyright 2010, produced by The National Strategies for the Department for Education.
Objective: To improve 'satisfactory' Secondary and Primary teachers' pedagogical practice to 'good' or better.

Production team


Posted by at No comments:

Sunday, 30 January 2011

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



Posted by at No comments:

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




 
Posted by at No comments:

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



Posted by at No comments:

Friday, 28 January 2011

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



Posted by at No comments:
Subscribe to: Posts (Atom)