Simple prototyping techniques

1

Diana Laurillard for OLDSMOOC

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

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

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 prototypeThe visual intelligibility of a representation PowerpointWhether the functionality fits what they need Storyboard

4

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

A Paper prototype

Users move stickies representing learning design elements around to screen to decide where they would like them to be listed

6

A Paper prototype

Users write in some concepts not on offer, and draw in the way they expect them to move around

7

A Paper prototype

Users write in the kind of text they would want to be able to add to an element

8

A Paper prototype

Users move stickies to show how menus should be arranged

9

From paper prototype to screen design

The end result – designed from the user outputs, ready for active testing

10

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

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.

Visual representations of a learning design

12

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

Collaborating to agree their planStudents work in groups of 3 to creating your own lesson plan, you could search for and refer to lesson plans with similar topics within the tool. This would be very convenient especially for teachers who are inexperienced in certain topics.

Collaborating to agree their planStudents work in groups of 3 to creating your own lesson plan, you could search for and refer to lesson plans with similar topics within the tool. This would be very convenient especially for teachers who are inexperienced in certain topics.

Group work on their planGroup work on their plan

Activity details

Resource based individual activity

Activity notes

Group size

Duration (mins)

3 3

1515

Reading, listening

Investigating

Discussing

Practicing

Producing

Learning through Briefing Experimenting Negotiating CollaboraCollaboratin

Resources

www.tinyurl.com/PPCMoodlewww.tinyurl.com/PPCMoodle

Visual representations of a learning design

One of the Powerpoint representations for a timeline view of a learning design.

When these were tested with users they were asked to describe what they thought the visual represented – could they interpret it?

Notice that it is made up of ppt drawing elements.

14

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

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

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

17

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

18

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?

Learning elementsLearning elements

My LAMS Sequence05.10.2009

Another LAMS Sequence03.11.2007

http://www.howstuffworks.com02.19.08

x

my field recording.mp310.18.09

student comments.mp305.1.08

Notes from field work.txt03.16.09

Electoral college.avi02.03.2007

Web pages Sound clips Video clips

Activity sequences

Add more… Cancel

http://www.wikipedia.org03.03.09

Notes

Handouts.pdf03.16.09

Search

My SessionsMy Sessions

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

19

Learning elementsLearning elements

My LAMS Sequence05.10.2009

Another LAMS Sequence03.11.2007

http://www.howstuffworks.com02.19.08

x

my field recording.mp310.18.09

student comments.mp305.1.08

Notes from field work.txt03.16.09

Electoral college.avi02.03.2007

Web pages Sound clips Video clips

Activity sequences

Add more… Cancel

http://www.wikipedia.org03.03.09

Notes

Handouts.pdf03.16.09

Search

My SessionsMy Sessions

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

20

Questions (asked in the notes section)1.Is this a useful format for visualising your content about a learning design?2.If yes what aspects do you find useful?3.If no how would you like to see content organised and displayed?4.Do you have a particular way you currently organised your content?5.How do you decide how to organise particular content?6.When searching how do you go about this?7.What are the visual queues that are helpful?8.What are distracting?