Simple prototyping techniques allow designers to test early ideas before spending significant time on implementation. Prototyping involves creating primitive representations of designs, such as paper prototypes, PowerPoint slides, or storyboards, to get feedback from potential learners. This helps ensure the final product meets learners' needs. Prototyping is especially useful for software design since it reduces recoding. Common prototyping methods include paper prototypes to test interfaces, PowerPoint to explore visual representations, and storyboards to illustrate intended workflows. Feedback from prototyping helps produce final designs that are intuitive for users.

1. Simple prototyping techniques
Diana Laurillard for OLDSMOOC
1

2. Design-Based Research
We can locate the process of learning design in the context of design-
based research, which has a long tradition in educational research,
going back to Ann Brown’s work in the US in the 90s.
This article provides a broad background and notes the importance
and value of prototyping in the section describing the iterative
approach of design practice (p17). Once the intervention, or software,
or learning design begins to be implemented there is endless scope
for iterative improvement. But that process will take less time if there
is good prototyping at the start, to find out as much as possible about
what learners really need.
Reading: Anderson, T., & Shattuck, J. (2012). Design-Based
Research : A Decade of Progress in Education Research?
Educational Researcher, 41, 16-25.
2

3. Prototyping design ideas
• Prototyping means creating a primitive form of the design, so that you can
find out how well the basic design idea fits learners’ needs before you
spend too much time on making it.
• This is especially valuable when you’re making software because it takes a
lot of time to code and test and recode, and if it’s not presented the way
learners need, then it’s going to take an awful lot of coding to get it right.
• Learning designs are quite difficult to test as prototypes, because a
learner does not yet know what they need until they’ve gone through it
properly. You can test basic properties like readability, or look and feel, or
ease of navigation, but you can’t really test learnability except by getting
someone to learn from it, and then it’s the thing itself, or part of it, not
really a prototype.
• But we do what we can. The following slides give some examples, and
some activities to try out.
• The rule is, the more time you spend on designing the less time you spend
on coding, and recoding, and recoding, and recoding….
3

4. Testing design ideas
• A prototype can be something like a storyboard illustrating the sequence
of tasks a learner might go through, or a sketch of what the overview
screen looks like.
• Once you have the prototype then you can test it with potential learners.
The form it takes will depend on what aspect of the learning design you’re
testing.
• Here we look at the following examples, to test :
How learners want to interact with the functionality Paper prototype
The visual intelligibility of a representation Powerpoint
Whether the functionality fits what they need Storyboard
4

5. Sketching: Paper prototyping
• The context here is a project to develop a learning design system.
• Prior work had been done on a user needs analysis with 12 informant
practitioners who were very experienced in designing pedagogy for
conventional and online teaching and learning. This had established the
kinds of concepts they used for planning and designing, and the
sequence of activities they went through.
• The paper prototype was produced by taking a screen shot of an
almost blank screen with just a few navigation elements on it. This was
printed onto large pieces of paper for users to work on.
• They also had stickies with standard concepts and activity types written
on them, and blank stickies to write on their own terms.
• Users were given the task of creating an outline of a learning design for
a session, using the screen pane, and the stickies – where would they
put them, when would they want each one to appear, what would they
do…
5

6. A Paper prototype
Users move
stickies
representing
learning design
elements around
to screen to
decide where they
would like them to
be listed
6

7. A Paper prototype
Users write in
some concepts
not on offer, and
draw in the way
they expect them
to move around
7

8. A Paper prototype
Users write in the
kind of text they
would want to be
able to add to an
element
8

9. A Paper prototype
Users move
stickies to show
how menus
should be
arranged
9

10. From paper prototype to screen design
The end result – designed from the user outputs,
ready for active testing
10

11. Prototyping with Powerpoint
• Powerpoint is a versatile drawing and animation tool, useful for
testing how users might react to certain types of visual design,
basic functionality, and program response.
• Here we show how the project tackled the issue of displaying a
visual representation of a learning design. A list view was one form
– rather like a standard lesson plan, a vertical arrangement of the
sequence of activities and resources used. Others more graphical
forms were also tested – the next slide shows one example.
11

12. Visual representations of a learning design
This shows one of
the Powerpoint
representations for
a learning design.
Users liked the
design but it proved
impractical for the
detailed
representation that
was needed to go
deeper into the
design.
12

13. Prototyping with Powerpoint
• An alternative view is the timeline, which is another standard
way of viewing a sequence of activities. The next slide shows a
Powerpoint mock-up for testing with users. It was clear from
user reactions that the timeline would need to be long…
• There are available online examples of ‘timeline widgets’ that
allow users to pan back and forth, and also zoom in and out to
see the timeline at different levels of description – by year, by
week, by hour, etc. Reference to these helped users see how a
timeline might work.
13

14. Visual representations of a learning design
One of the Learning through Briefing Experimenting Collaboratin Negotiating Collabora
Powerpoint Reading, listening
representations for Investigating
a timeline view of a Discussing
learning design. Practicing
Producing
When these were
tested with users Activity details Activity notes
they were asked to Resource based individual activity Collaborating to agree their plan
Collaborating to agree their plan
Students work in groups of 33 to creating your
Students work in groups of to creating your
describe what they Group work on their plan
Group work on their plan own lesson plan, you could search for and refer
own lesson plan, you could search for and refer
thought the visual Group size 33
to lesson plans with similar topics within the
to lesson plans with similar topics within the
tool. This would be very convenient especially
tool. This would be very convenient especially
represented – could for teachers who are inexperienced in certain
for teachers who are inexperienced in certain
Duration (mins) 15
15
they interpret it? topics.
topics.
Resources
Notice that it is www.tinyurl.com/PPC
www.tinyurl.com/PPC
Moodle
made up of ppt Moodle
drawing elements.
14

15. From Powerpoint to screen design
The end result.
The design went
through further
iterations with users
before this, the
current form.
A scroll bar has
been added so that
users can scroll
forward and back
along the timeline –
a requirement that
became apparent
from the testing
15

16. Storyboarding functionality
• A storyboard for a film sketches out the sequence of shots for a
scene, so that the team can discuss the narrative flow and the
movement of characters to make sure they make sense to a viewer.
• Software is more complex because the actual sequence depends on
what the user does. The storyboard is not just a linear narrative.
• The idea of representing stages in the workflow for a program is still
useful, however, because it is a way of both testing an idea for a
design functionality, and of finding out user expectations.
• The next two slides show how a type of functionality can be
presented to a user, with questions about their reactions posed in the
Notes pages below. To see this best you will need to view the slides in
‘Presenter’ view. As users step through the slides they record their
reactions in each Notes page. For convenience here the questions are
also superimposed on additional copies of the slides.
16

17. Testing user reactions to functionality design, for responses in Notes page
17

18. Testing user reactions to functionality design, for responses in Notes page
Questions (asked in the notes section)
1.If you were to think about learning
design how would you like to link up
these parts of your design? Which would
you start with first? And why?
2.How would you like to see a visual
representation of this relationship? Can
you give a reason for your preference?
18

19. Testing user reactions to functionality design, for responses in Notes page
x
Search
Learning elements
Learning elements
Web pages Sound clips Video clips
http://www.howstuffworks.com my field recording.mp3 Electoral college.avi
02.19.08 10.18.09 02.03.2007
http://www.wikipedia.org student comments.mp3
03.03.09 05.1.08
Activity sequences Notes
My LAMS Sequence Notes from field work.txt
05.10.2009 03.16.09
Another LAMS Sequence Handouts.pdf
03.11.2007 03.16.09
My Sessions
My Sessions Add more… Cancel
19

20. Testing user reactions to functionality design, for responses in Notes page
x
Search
Learning elements
Learning elements
Web pages Sound clips Video clips
http://www.howstuffworks.com my field recording.mp3 Electoral college.avi
02.19.08 Questions (asked in the notes section)
10.18.09 02.03.2007
1.Is this a useful format for visualising your
http://www.wikipedia.org content about a learning design?
student comments.mp3
03.03.09 05.1.08
2.If yes what aspects do you find useful?
3.If no how would you like to see content
Activity sequences
organised and displayed?
Notes
My LAMS Sequence 4.Do you have awork.txt
Notes from field particular way you currently
05.10.2009
organised your content?
03.16.09
5.How do you decide how to organise particular
Another LAMS Sequence
03.11.2007 content? Handouts.pdf
03.16.09
6.When searching how do you go about this?
7. What are the visual queues that are helpful?
8.What are distracting?
My Sessions
My Sessions Add more… Cancel
20