1. INSTRUCTIONAL DESIGN JMA 503

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

3. Important Dates | Announcements  March 28 Team project - program

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

5. Analysis

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

7. Bloom’s Taxonomy Comprehension Application Analysis Synthesis Evaluation Knowledge

8. 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.

9. 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

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

11. 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 114-122.

12. From Analysis/ Problem Space Conceptualizing design space Source: www.theaterxtremeseattle.com/

13. 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

14. Flowchart symbols Source: Hannafin & Peck Blueprint/specifications

15. Sample Flowchart Terminator Input Decision Operation/ Presentation

16. Macro Flowchart

17. WireFrame

18. 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

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

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

21. Storyboards Low Level Prototypes

22. 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.

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

24. 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

25. Paper prototypeHigh level prototype High level | Functional prototype

26. SCREEN TYPES Storyboarding

27. Orientation

28. Orientation: Objectives

29. Content Presentation

30. Questions

31. Results

32. DESIGN ISSUES

33. 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).

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

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

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

38. 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?

39. 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

40. 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. 31-32

41. 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

42. 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.

43. 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.

44. 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.

45. 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

46. 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

47. 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

48. Proximity

49. 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

52. 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

53. Gestalt Principles of Perception  Proximity - Adobe PhotoShop Preferences Dialog

54. Example: a page that can be improved..

55. Using proximity to group related things

56. Similarity

57. 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

59. 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

60. Example: can you use similarity to improve this page?

61. Make the buttons the same size:

62. 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

63. Visually similar things = related

64. 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

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

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

67. 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.

68. 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.

69. 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

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

71. Lines on the previous slide show how to use horizontal alignment

72. Left-align both columns to get vertical alignment also

73. 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

74. Hello World

75. Hello world Navigation Section Headings Navigation SEARCH

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

77. 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

78. 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.

79. 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)

80. 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

81. 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

83. 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.

84. Help users understand

85. 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?

86. Create a visual hierarchy

87. Section ID Book types Computer Books Perl scripting made easy

93. 1 2 3 4

94. 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