instructional design jma 503. 1. review principle review principle 2. toolbook (data) toolbook...

INSTRUCTIONAL DESIGN JMA 503

1. Review Principle

2. Toolbook (Data)

3. M-Learning

Objectives

Analysis

Analysis: Understanding problem1. You’ve examined:

1. Problem | Need | Learning context | Environment2. Learners3. Tasks4. Goals and objectives

2. You’ve thought about instructional strategies:

1. Events of instruction2. Sequence of instruction3. Presentation, questioning, practice, discovery,

etc.

3. Begin to design

From Analysis/Problem Space

Conceptualizing design space

Source: www.theaterxtremeseattle.com/

Flowchart symbols

Source: Hannafin & Peck

Blueprint/specifications

PROTOTYPE | MODEL

Prototyping and construction •Different kinds of prototyping

low fidelityhigh fidelity

•Compromises in prototypingvertical horizontal

Macro Flowchart vertical

Lesson 1

Begin Lesson

Lesson Menu 1 - 6

Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6No No No No No

Begin Lesson 1 Begin Lesson 2 Begin Lesson 3 Begin Lesson 4 Begin Lesson 5 Begin Lesson 6

Present 1

Question 1

Correct ?

Lesson Menu

Negative Feedback

Yes Yes Yes Yes Yes Yes

Etc. Etc. Etc. Etc. Etc.

Present 2

No

Yes

Glossary

Quit

End Program

No

Yes

Macro Flowchart

Horizontal

Lesson 1

Begin Lesson

Lesson Menu 1 - 6

Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6No No No No No

Begin Lesson 1 Begin Lesson 2 Begin Lesson 3 Begin Lesson 4 Begin Lesson 5 Begin Lesson 6

Present 1

Question 1

Correct ?

Lesson Menu

Negative Feedback

Yes Yes Yes Yes Yes Yes

Etc. Etc. Etc. Etc. Etc.

Present 2

No

Yes

Glossary

Quit

End Program

No

Yes

Flowchart Horizontal

Site Map

Horizontal

Vertic

al

Low-fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g. paper, cardboard

• Is quick, cheap and easily changed

• Examples:• Sketches of screens, task sequences, etc.• Post-it notes• Storyboards

Low-fidelity Prototype

Source: Heim, S. (2008), p. 188

Prototypes Wireframe (web)

• Sketches of basic screen design and layout.

• Sketches of how users might progress through a task.

• Developed from flowcharts and low-fidelity prototypes

• Illustrator, PowerPoint, etc.

Prototypes Wireframe (web)

Source: Heim, S. (2008), p. 190

Wireframes

High-fidelity prototyping

• Uses materials that may be in final product.

• More like final system than low-fidelity.

• For a high-fidelity prototype, common

environments include Adobe Director, Flash.

ToolBook, and Visual Basic, Dreamweaver.

PRINCIPLES

Users | Design Issues

Users see what they expect to see. Users have difficulty focusing on more

than one activity at a time. It is easier to perceive a structured

layout. It is easier to recognize something than

to recall it. For the interface (not content) recognition is

better than recall Context is important.

It is easier to recognize something than to recall it. Who was the second president of the US?

____________

OR

Who was the second president of the US? Thomas Jefferson John Adams Abraham Lincoln Ulysses S. Grant

C T

T E

Context is important

Users see what they expect to see We interpret the letters as two meaningful words that go

together rather than meaningless characters.

Why not : TAE CHT

The context of the other characters with our prior knowledge enables us to interpret the middle letter as “A” and “H”.

Prior knowledge of the world helps us to make sense of it.

We are not very good at handling unexpected situations. (Stone, et al., 2005, p. 91)

Users see what they expect to see Principle of consistency: Since users find it

difficult to handle the unexpected, it is important to be consistent throughout the interface.

Principle of exploiting prior knowledge: As the user perceives the screen using their prior knowledge, it provides user opportunity to draw on their prior knowledge. (i.e., calculator) to make sense of environment.

Proximity

Similarity

Continuity

Closure

People look for patterns to make sense of things.

Hello World

Hello world

Navigation

Section Headings

Page 1 of 54

Navigation

Hello world

Navigation

Section Headings

Page 1 of 54

Navigation

It is easier to perceive a structured layout.

Hello World

Hello World

Remember: Design based on a grid layout.

1. Divide screen into rows and columns

2. Divide screen into functional regions

3. Identify elements that are common throughout

4. Essential and common elements are made to fit within the grid

5. Group related elements together

6. Create sample and get feedback.

Orientation

Navigation

Tools Main content More content

Navigation

Remember: Help users understandDivide screen up based on the following guide:

User should be able to glance around and point to different areas of the page and say:

1. Things I can do.2. Where am I or my location in the program

is?3. Important content.4. What is here or I can see what is available.5. Navigation or I can see how I can get to the

rest of the program.

•http://www.miniusa.com/#/MINIUSA.COM-m

Gutenberg Diagram

• Eyes tend to move from upper left to bottom –right• Top left = Primary Optical Area• Bottom right = Terminal anchor• Layouts that support diagonal balance - considered examples of good design.

Colors

http://kuler.adobe.com/#create/fromacolor