1. INSTRUCTIONAL DESIGN JMA 503

2. 1. Review Principle Review Principle 2. Toolbook (Data) Toolbook (Data) 3. M-Learning M-Learning Objectives

3. Analysis

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

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

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

7. PROTOTYPE | MODEL

8. Prototyping and construction Different kinds of prototyping low fidelity high fidelity Compromises in prototyping vertical horizontal

9. Macro Flowchart vertical

10. Macro Flowchart Horizontal

11. Flowchart Horizontal

12. Site Map Horizontal Vertical

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

14. Low-fidelity Prototype Source: Heim, S. (2008), p. 188

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

16. Prototypes Wireframe (web)

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

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

19. PRINCIPLES

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

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

22. CT T E Context is important

23. Users see what they expect to see  We interpret the letters as two meaningful words that go together rather than meaningless characters.  Why not : TAECHT  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)

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

25. Proximity Similarity Continuity Closure People look for patterns to make sense of things.

26. Hello World

27. Hello world Navigation Section Headings Page 1 of 54 Navigation

28. Hello world Navigation Section Headings Page 1 of 54 Navigation It is easier to perceive a structured layout.

29. Hello World

31. 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 ToolsMain content More content Navigation

33. Remember: Help users understand Divide 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.

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

35. Colors  http://kuler.adobe.com/#create/fromacolor http://kuler.adobe.com/#create/fromacolor