INSTRUCTIONAL DESIGN JMA 503

Objectives 1. Flowcharts and storyboards Flowcharts and storyboards 2. Project Eval Project Eval 3. Toolbook (Data) Toolbook (Data)

Important Dates | Announcements  March 28 Team project - program

Phase III Develop & Implement Phase I Analysis Phase II Design Evaluate & Revise Start Models

Analysis

Analysis: Understanding problem 1. You’ve examined: 1. Problem | Need | Learning context | Environment 2. Learners 3. Tasks 4. Goals and objectives

Bloom’s Taxonomy Comprehension Application Analysis Synthesis Evaluation Knowledge

Learning objectives Components of an objective:  Audience  Behavior: description of terminal behavior.  Condition: description of conditions of demonstration of action.  Degree: description of the standard or criterion.

Analysis: Understanding problem 1. You’ve examined: 1. Problem | Need | Learning context | Environment 2. Learners 3. Tasks 4. Goals and objectives 2. You’ve thought about instructional strategies: 1. Events of instruction 2. Sequence of instruction 3. Presentation, questioning, practice, discovery, etc. 3. Begin to design

Instructional Strategy Instruction strategies include presentation of knowledge, practice activities, learner guidance, questioning…

Instructional Strategy Gagne’s Events of Instruction: 1. Gain attention 2. Inform learner of objectives 3. Stimulate recall 4. Present material 5. Provide guidance 6. Elicit performance 7. Assess performance 8. Enhance retention and transfer Blackboard Instructional Strategy (7) pages

From Analysis/ Problem Space Conceptualizing design space Source:

Conceptualizing design space From Analysis/problem space to design space:  A thorough analysis or good understanding of the problem space helps inform the design space  e.g., what kind of interface, strategies, functionality to provide

Flowchart symbols Source: Hannafin & Peck Blueprint/specifications

Sample Flowchart Terminator Input Decision Operation/ Presentation

Macro Flowchart

WireFrame

Plan site Make wireframes  Help in planning structure of pages  Serve as blueprints for development  Should include placement and measurement of elements in pixels  Wireframe Example Wireframe Example

Storyboards  Storyboard -  a hard-copy or digital mock-up of the series of screens a learner will see in the completed e-learning piece.

Storyboards Notes for designers/artists, programmers, interaction designers Low Level Prototypes

Storyboards Low Level Prototypes

Storyboards  The logic of storyboards –  Look at sketches of screen designs  Read annotation of what is to happen  Look at interaction proposed, and feedback  Determine the events likely to achieve the defined learning outcomes.

Storyboards  Functional prototypes (High Level Prototypes) –  Everyone can see interactions, timing, feedback, etc.  Prototypes must be generated quickly – minutes to hours not weeks.

Storyboards 1. Draw your design on paper  Show them to a potential users & get feedback.  Ask user how he/she would approach tasks using the paper prototype. 2. Refine paper prototypes. 3. Make digital with graphic program (Photoshop | Illustrator )  Get user feedback 4. Develop functional prototype with ToolBook  Get user feedback

Paper prototypeHigh level prototype High level | Functional prototype

SCREEN TYPES Storyboarding

Orientation

Orientation: Objectives

Content Presentation

Questions

Results

DESIGN ISSUES

Attention scarcity  Often designers of information systems wrongly perceive a design problem as information scarcity instead of attention scarcity.  They build systems that excel at supplying more and more information to people but what is needed are systems that filter out unimportant information (Herbert Simon, 1996).

Design Three things you must communicate in your program: 1. Where am I? 2. What can I do? 3. What is here?

Where am I? What is here? Where can I go? On the Web

Where am I? What is here & Most important? Where can I go?

Major Category Information: Animals Sub category: Dogs Page information If the executive process doesn’t work right, the results can be catastrophic. Cognitive - memory, judgment, and reasoning. Cognitive - the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. NextPrevQuitMapGlossaryHelp Where am I? Where can I go and what can I do? What is here?

Help users understand  Create a clear visual hierarchy on each page  Take advantage of convention  Break screen up into clearly defined areas  Make it obvious what is clickable and what is content  Minimize noise Krug, 2000, p. 31

Help users understand  The more important = the more prominent  Things related logically = also related visually.  Things nested visually to show what’s part of what Krug, 2000, p

Major Category Information: Animals Sub category: Dogs Page information If the executive process doesn’t work right, the results can be catastrophic. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. NextPrevQuitMapGlossaryHelp The more prominent = The more important

Major Category Information: Animals Sub category: Dogs Page information If the executive process doesn’t work right, the results can be catastrophic. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. NextPrevQuitMapGlossaryHelp Things related logically = also related visually.

If the executive process doesn’t work right, the results can be catastrophic. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Major Category Information: Animals Sub category: Dogs Page information NextPrevQuitMapGlossaryHelp Things related logically = also related visually.

If the executive process doesn’t work right, the results can be catastrophic. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Major Category Information: Animals Sub category: Dogs Page information NextPrevQuitMapGlossaryHelp Things related logically = also related visually.

If the executive process doesn’t work right, the results can be catastrophic. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Major Category Information: Animals Sub category: Dogs Page information NextPrevQuitMapGlossaryHelp Nested visually to show what’s part of what

Gestalt Principles of Perception  Gestalt Principles of Perception  Gestalt psychology strives to explain the factors involved in the way we group things  At the heart of Gestalt psychology is the idea that we strive to find the simplest solutions to incomplete visual information

Principles  Humans organize things into meaningful units using:  Proximity: we group by distance or location  Similarity: we group by type  Symmetry: we group by meaning  Continuity: we group by flow of lines (alignment)  Closure: we perceive shapes that are not (completely) there

Proximity

1-49 Gestalt Principles of Perception  Proximity Principle – Objects that are close to each other will be seen as belonging together Equidistant Horizontal Proximity Vertical Proximity

The executive process doesn’t work right… Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Menu NextPrev Quit

Gestalt Principles of Perception  Proximity - Adobe PhotoShop Preferences Dialog

Example: a page that can be improved..

Using proximity to group related things

Similarity

1-57 Gestalt Principles of Perception  Similarity Principle – Objects that have similar visual characteristics, such as size, shape or color will be seen as a group and therefore related Rows of Similar ObjectsColumns of Similar ObjectsGrouped Columns

1-59 Gestalt Principles of Perception  Property Pane from Dreamweaver  Our eyes pick up all of the text boxes because of the strong blue squares and the white areas that they have in common

Example: can you use similarity to improve this page?

Make the buttons the same size:

executive process doesn’t work right Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Menu NextPrev Quit Logo Topic 1Topic 2Topic 3 Visually similar things = related NextPrev

Visually similar things = related

executive process doesn’t work right Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Menu NextPrev Logo Topic 1Topic 2Topic 3 Visually similar things = related

Symmetry: we use our experience and expectations to make groups of things We see two triangles. We see three groups of paired square brackets.

1-66 Gestalt Principles of Perception  Symmetry Principle – Symmetrical areas tend to be seen as complete figures that form around their middle TranslationReflection Rotation

Executive process | Mental processes Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort.

Executive process | Mental processes Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort.

Continuity: flow, or alignment We see curves AB and CD, not AC and DB, and not AD and BC We see two rows of circles, not two L-shaped groups

Can you use alignment (one form of continuity) to improve this page?

Lines on the previous slide show how to use horizontal alignment

Left-align both columns to get vertical alignment also

Major Category Information: Animals Sub category: Dogs Page information If the executive process doesn’t work right, the results can be catastrophic. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. NextPrevQuitMapGlossaryHelp

Hello World

Hello world Navigation Section Headings Navigation SEARCH

Hello world Navigation Section Headings Navigation It is easier to perceive a structured layout. SEARCH

executive process doesn’t work right Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Menu Next Logo Topic 1Topic 2Topic 3 Visually similar things = related

Executive process | Mental processes Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort. Cognitive - pertaining to the mental processes of perception, memory, judgment, and reasoning. Productivity - having the power to produce, generate, and create a productive effort. Productivity - having the power to produce, generate, and create a productive effort.

1-79 Gestalt Principles of Perception  The Area Principle – Objects with small area tend to be seen as the figure, not the ground (also called the smallness principle)

1-80 Gestalt Principles of Perception  Surroundedness Principle – An area that is surrounded will be seen as the figure and the area that surrounds will be seen as the ground

Other Principles of Perception – Proportion  Proportion can be used to represent logical hierarchies Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

1.Divide screen into rows and columns 2.Identify elements that are common throughout 3.Essential and common elements are made to fit within the grid 4.Group related elements together 5.Create sample and get feedback. Gives a coherent visual structure. Reduces clutter and provides users visual cues to follow.

Help users understand

Divide pages up based on the following guide:  User should be able to glance around and point to different areas of the screen and say: 1. What is the section? 2. What topic am I in (page name)?/ Where am I? 3. What are the major sections (local navigation) 4. Things I can do. 5. Content to be studied. 6. Practice or assessment. 7. Getting Help or support resources. 8. Navigation to get to the rest of the program. 9. How do I get out?

Create a visual hierarchy

Section ID Book types Computer Books Perl scripting made easy

Major Category Information: Animals Sub category: Dogs Page information Text textText textText text text textText textText textText textText textText textText textText textText textText text text textText textText textText textText textText textText text Text textText textText text text textText textText textText textText textText textText text Text textText textText text text textText textText textText textText textText textText texttextText textText textText textText text Text textText textText text text textText textText textText textText textText Animals in other parts of the world Text textText textText text text textText textText textText textText textText texttextText textText NextPrevQuitMapGlossaryHelp