1. INSTRUCTIONAL DESIGN JMA 503

2. 1. Review Principle Review Principle 2. Flowcharts and storyboards Flowcharts and storyboards 3. Project evaluation (Morae) Project evaluation (Morae) 4. Toolbook (Data) Toolbook (Data) Objectives

3. Important Dates  March 20 Evaluations of team project

4. Analysis

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

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

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

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

9. Flowcharts  Visio  PowerPoint

10. PROTOTYPE | MODEL

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

12. Macro Flowchart vertical

13. Macro Flowchart Horizontal

14. Flowchart Horizontal

15. Site Map Horizontal Vertical

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

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

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

19. Prototypes Wireframe (web)

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

21. 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 and Visual Basic, Dreamweaver.

22. PRINCIPLES

23. Psychological principles  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.  Context is important.

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

25. CT T E Context is important

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

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

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

29. Hello World

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

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

32. Align navigation and content in a grid layout. 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.

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

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

36. Design Three things a you must communicate in your program: 1.Things I can do. 2.Where am I. 3.Important content. 4.What is here. 5.Navigation to get to the rest of the program.

37. 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 textText text NextPrevQuitMapGlossaryHelp Where am I? Where can I go and what can I do? What is here?/Important content

38. MORE PRINCIPLES

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

40. Proximity

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

42. Using proximity to group related things

43. Text textText textText text text textText textText textText textText textText textText text 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 Menu NextPrev Quit

44. Similarity

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

46. Make the buttons the same size:

47. Text textText textText text text textText textText textText textText textText textText text 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 Menu NextPrev Quit Logo Topic 1Topic 2Topic 3 Visually similar things = related NextPrev Back

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

49. Hello World

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

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

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

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

55. 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 textText text NextPrevQuitMapGlossaryHelp

56. http://www.miniusa.com/#/MINIUSA.COM-m Closure 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.

57. NAVIGATION

58. Navigation: Your screens should answer these questions. Good navigation design shows me:  What screen I am on (screen title).  What are the major sections (local navigation).  Where I am in the program.  How to get where I want to go.

59. Navigation: Conventions  It is predictable and makes people feel comfortable exploring the program.  Doesn’t need to be studied or memorized.  Reflects users’ impression of how information should be represented in digital space. Navigation is in same location on every screen.

60.  You have a mass of content that you want your users to be able to find Scheme and structure Fact 1 Fact 13 Fact 12 Fact 11 Fact 10 Fact 9 Fact 8 Fact 5 Fact 7 Fact 6 Fact 3 Fact 4 Fact 2 Fact 14 Fact 15 Fact 16 Fact 17 Fact 18 Fact 19 Fact 20

61. Scheme and structure  Group related things, forming the groups in terms of the way users think. Fact 13 Fact 8 Fact 14 Fact 15 Fact 19 Fact 10 Fact 2 Fact 17 Fact 12 Fact 5 Fact 3 Fact 4 Fact 1 Fact 11 Fact 9 Fact 7 Fact 6 Fact 16 Fact 18 Fact 20

62. Organizational scheme  Give names to groups, or have users do that Fact 13 Fact 8 Fact 14 Fact 15 Fact 19 Fact 10 Fact 2 Fact 17 Fact 12 Fact 5 Fact 3 Fact 4 Fact 1 Fact 11 Fact 9 Fact 7 Fact 6 Fact 16 Fact 18 Fact 20 Group D Group C Group A Group B Group E

63. Which items are related & Why?  Houses  Birds  Dogs  People  Cars  Red  Green  Purple  People  Big  Small  Medium Hierarchy Proximity Things in close proximity = related

64. How should we group these?  Individual Accounts  Order Shipping Supplies  New Customers benefits  Small Business Center  Track a Package  Schedule a Pickup  e-Commerce Support  Open an Account

65. It’s worth analyzing for objects and actions (nouns and verbs). Actions often lend themselves to a task-oriented organization.

66. Card Sorting 1. Identify set of keywords/topics/questions. 2. Write each item on an index card (number the cards). 3. Shuffle cards and ask users to organize cards into piles. 4. After piles are created, user gives each pile a meaningful name. 5. Collect and analyze the groupings to identify commonalities. The high frequency items = how you can group the information Obtained from: http://www.cardzort.com/cardzort/cardsorting.htm http://www.cardzort.com/cardzort/cardsorting.htm