Screen Design for Instructional Designers
Module Running Time 2:30 (2 hours 30 minutes with 15 minute break)
Syllabus
Module Rationale: Effective screen design is one of the most critical elements necessary for successful development of computer or video based interactive instructional media. Demystifying the process of designing effective screens requires a thorough background in several key areas of screen design. This class will attempt to provide the basics of screen design in a manner that will be both entertaining and educational.
Target Population: This module is designed for implementation
within the Instructional Systems Development Masters Program at U.M.B.C.
It is also suitable for populations with participants possessing the following
minimum prerequisites:
• Graduate level educational psychology course (EDUC 601)
• Basic understanding of I.S.D. principles or experiential equivalent
(EDUC 602, 603)
• Graduate level ISD-based computer course (EDUC 610, 620, or
640)
Terminal Objectives: After completing this module, the Screen
Design for Instructional Designers participant should be able to:
· Identify the two major elements of screen design
· Identify the three major types of frames
· Describe the importance of functional zones
· Explain the purpose of frame and procedural protocols
· Describe how the ISD process is involved in effective
screen design
· Demonstrate the proper use of screen design theory by
preparing at least one separate screen for each of the
three major types of frames involved in interactive instructional media.
Pre-class Check List
• Arrive at least 30 minutes before class starting time.
• Check to make sure that you have the following A/V equipment and that
it works properly:
Overhead projector
Screen
• Check participant materials:
Handouts
Markers
Blank transparencies
• Check instructional materials:
Overheads
Dry erase markers
Chalk
Element One - Gaining Attention
Time 00:03 - Running Time 00:03
· Check to make sure that everyone is present and begin the module
In your own words...
Screen design presents instructional designers with both tremendous challenges and opportunities. This paradox exists because there are no universally accepted rules for designing and developing interactive instructional media. But that doesn’t mean that there aren’t guidelines that can’t adapted for most situations designers face in the real world.
In the next several hours we are going to explore the basics of screen design as it impacts on designing effective instructional media. We will also be looking at ways to incorporate solid I.S.D. methodology into the process of screen design for this medium.
The concepts presented in this module are relatively basic and
learners with more advanced skill sets should participate with the idea
of assisting other learners with less experience or fewer courses taken
in the ISD program.
Element Two - Stating Objectives
Time 00:05 - Running Time 00:08
Show Overhead # 2-1
In your own words...
At the end of this module you should be able to perform the following
objectives:
· Identify the two major elements of screen design
· Identify the three major types of frames
· Describe the importance of functional zones
· Explain the purpose of frame and procedural protocols
· Describe how the ISD process is involved in effective
screen design
· Demonstrate the proper use of screen design theory by
preparing at least one separate screen for each of the
three major types of frames involved in interactive instructional media.
· Solicit any questions and comments.
Element Three - Recall of Prior
Learning
Time 00:10 - Running Time 00:18
Show Overhead # 3-1
In your own words...
In the first several weeks of this Message Design class we have covered the basics of communications theory, message design theory, writing objectives, domains of objectives, performance agreement, instructional methods, and touched on analysis, and evaluation.
We are now going to apply many of the concepts and principles we have learned to the process of screen design of interactive instructional technologies.
In our first class we defined the term MESSAGE. Does anyone remember our definition of the term?
· Solicit answers and provide feedback until the proper definition is given.
Show Overhead # 3-2
Review the definition of MESSAGE used in the class.
In your own words...
In our first class we also talked about the ten types of INSTRUCTIONAL METHODS used to facilitate the learners in meeting objectives or internalizing the content of a message.
Show Overhead # 3-3
· Review the ten INSTRUCTIONAL METHODS on the overhead.
In your own words...
Now that we have reviewed the concepts of messages and instructional
procedures, it is necessary to revisit the term MEDIUM.
Show Overhead # 3-4
· Review the definition of the term MEDIUM.
· Ask participants how they think using the medium of interactive instructional media affects the MESSAGE and METHODS when designing instructional materials.
Element Four - New Ideas
Time 00:52 - Running Time 01:10
In your own words...
Screen design depends on a number of elements to successful. However, there are two major elements that I think must be taken into account during all phases of screen design, they are: Usability and Aesthetics
Show Overhead # 4-1
· Define USABILITY as it appears on the overhead.
· Define AESTHETICS as it appears on the overhead.
· Ask participants for examples of how usability and aesthetics are essential elements of screen design.
In your own words..
Both of these elements are considered separately, however they are interrelated. For example, screens that are pleasing aesthetically may soon frustrate a learner if it is impossible to navigate. Likewise, an aesthetically unpleasant screen will be useless regardless of the information.
We have talked about the importance of objectives in designing curriculum and there are no less important when we speak of screen design issues.
Show Overhead # 4-2
In the book The Design, Development, and Evaluation of Instructional Software, by Hannafin and Peck, it is said that “The ability to write sound instructional objectives may be the designer’s most valuable tool.”
Most objectives written for CAI are in the cognitive domain at one of six possible levels.
Show Overhead # 4-3
· Review overhead # 4-3 containing the six levels of objectives
within the cognitive domain that are most closely aligned with
screen design for CAI.
Knowledge: focused on recall
Comprehension: paraphrase or summarize
Application: generalization to novel situations
Analysis: breaking down into components and describe organization
of the info
Synthesis: assembling pieces into functional units
Evaluation: making judgments on value and importance of info
· Make the point that once you have written effective learning objectives, the process of designing screens for CAI becomes much easier because learning hierarchies and evaluation methodologies help guide screen design.
In your own words...
We have just looked at how learning objectives are critical to effective screen design and perhaps it isn’t clear to you how objectives fit into the process of designing screens. To help with that concept, lets look at the three major types of instructional frames used in screen design.
Show Overhead # 4-4
· Review the three major types of frames: transitional, instructional, question.
· Explain that as we look at the elements of each of these three types of frames we will begin to see how objectives and screen design fit together.
Show Overhead # 4-5
· Review the definition of transitional frames:
they are used to tie together different aspects of a lesson
used to support lesson flow
they provide contextual or procedural support but not substantive
support.
Show Overhead # 4-6
· Review the types of transitional frames: orientation,
bridge, feedback, directions and instructions, performance
report.
Show Overhead # 4-7
· Review the use of orientation frames:
prepare users for information to be presented
use to state objectives
provide advance organizers
· Ask for examples of orientation frames
Show Overhead # 4-8
· Review the use of bridge frames:
alerts user to shift from heavy prompting to minimal prompting
· Ask for examples of bridge frames
Show Overhead # 4-9
· Review the use of feedback frames:
used to inform the user of correctness, error, or quality of
responses
supports already presented information
· Ask for examples of feedback frames
Show Overhead # 4-10
· Review the use direction and instruction frames:
to present navigational information
to provide help during a lesson
· Ask for examples of direction and instruction frames
Show Overhead # 4-11
· Review the use of performance report frames:
informs user of performance
are not response-specific
· Ask for examples of performance report frames
Show Overhead # 4-12
· Review the definition of instructional frames:
provides information designed to support learning
Show Overhead # 4-13
· Review the types of instructional frames: prerequisite,
definition, example, and rule.
Show Overhead # 4-14
· Review the use of prerequisite frames:
communicates skills needed prior to beginning lesson
identifies relationships between prior learning and current
learning
mixes current information with existing knowledge
· Ask for examples of prerequisite frames
Show Overhead # 4-15
· Review the use of definition frames:
provides understanding of key words and phrases in a lesson
focuses user’s attention away from distracting information
· Ask for examples of definition frames
Show Overhead # 4-16
· Review the use of example frames:
provides support for new material
clarifies complex and abstract concepts
used to illustrate applications
· Ask for examples of example frames
Show Overhead # 4-17
· Review the use of rule frames:
display rule-governed information
display computational information
displays troubleshooting materials
· Ask for examples of rule frames
Show Overhead # 4-18
· Review the types of question frames: true-false, yes-no,
multiple choice, completion - short answer, constructed
response - open ended.
Show Overhead # 4-19
• Review the Directing Leaner Attention overhead and promote discussion.
· Inform participants that you are going to distribute an exercise for them to work through on their own.
Distribute Handout # 4-1
· Ask participants to match the types of frames with the corresponding elements of Gagne’s nine events of instruction.
· Give participants several minutes to complete the handout.
· Solicit answers and discussion.
In your own words...
Now we are going to look at several handouts that will provide some assistance with screen design. The first is 20 Rules for Arranging Text on a Screen.
Distribute Handout # 4-2
Show Overhead # 4-20
• Review handout using overhead.
In your own words...
Now we are going to look at several Rules of Thumb for Screen Designers.
Distribute Handout # 4-3
Show Overhead # 4-21
• Review handout using overhead.
• Refer learners to page 88 in Instructional Media for another list of suggestions for screen design.
• Solicit question and discussion.
• Inform learners that after the break they will begin designing their
own screens
Take Fifteen Minute Break
Time 00:15 - Running Time 01:25
Element Five - Guided Learning
Time 00:20 - Running Time 01:45
Divide the class into groups of threes.
In your own words...
We are now going to work in teams as we explore in more detail
the practical application of good screen design techniques. The first
thing I want each group to do is decide among yourselves the following
questions for the purpose of working on this project:
program’s subject matter
target audience
delivery system
· Make sure that each group has chosen all three elements
• Have each group then prepare terminal objectives for their module
In your own words...
One of the most important aspects of screen design is the concept of protocols. Frame protocols refers to the consistent placement of specific zones of a frame used for various purposes. Lets consider how the concept of screen protocols is used in screen design.
Show Overhead # 5-1
Each frame of a CAI has a particular purpose. The placement of those zones should be consistent within any frame of the same type within a project or lesson.
· Point out the functional zones shown in the overhead
lesson-orientation zone
lesson-direction zone
lesson-option zone
new-information zone
In your own words...
Another important aspect of screen design is procedural protocol.
Procedural protocol provides for consistent conventions for procedures
that involve the learners navigation of the program, learner input, availability
of optional procedures, and help features.
One example of a bad use of procedural protocol would be to use
the cursor keys to facilitate movement within the program and then suddenly
require use of the space bar or mouse input.
· Ask for questions and comments
In your own words...
One last area to cover before we begin to design our own screens is the way that the learners use their eyes to scan the screen.
Show Overhead # 5-2
Research shows that most learners start scanning in the upper left corner of the screen and then move across the screen from there. If you divide the screen into thirds, you can see how researchers believe the eye moves as expressed in percentages for each area.
There are also suggestions that layouts should follow a specific pattern such as the letter Z or O.
Show Overhead # 5-3
While these screen designs have some merit for CAI, you must be sure to be consistent with your design.
Show Overhead # 5-4
• Review Evaluating Screen Design overhead.
Show Overhead # 5-5
• Review Improving Screen Designs overhead
Handout Storyboards & Acetates
· Handout blank storyboard sheets and acetates
· Explain that learners are now going to practice designing
several types of screen interfaces
Show Overhead # 5-6
· Explain that the storyboard is the practice field for screen design
· Ask each group to consult and then design a transitional
frame for directions and
instructions
· Check with each group and make sure they are on the right track
· Ask groups to share their designs with the class.
Element Six - Eliciting Performance
Time 00:15 - Running Time 02:00
· Ask each group to design both an instructional frame, transitional frame and a question frame for the same lesson
· Handout all of the supplemental materials that you have prepared
· Circulate among the groups and offer suggestions and answer questions
Element Seven - Providing Feedback
Time 00:25 - Running Time 02:25
· Have each group present their screens to the class and explain what they did
· Provide feedback and encourage others learners to do the same
Element Eight - Assessing Performance
Time 00:00 - Running Time 02:25
• Determine if learners have met the six objectives using the
exercises in element seven.
• Perform additional evaluation as necessary to assure mastery.
• Provide additional instruction or remediation as necessary
to assure that all participants meet the six objectives.
Element Nine - Enhancing Retention
Time 00:05 - Running Time 02:30
In your own words...
We have now completed a very brief excursion into screen design basics for computer-based instructional methods.
When we started we had six objectives:
· Identify the two major elements of screen design
· Identify the three major types of frames
· Describe the importance of functional zones
· Explain the purpose of frame and procedural protocols
· Describe how the ISD process is involved in effective
screen design
· Demonstrate the proper use of screen design theory by
preparing at least one separate screen for each of the
three major types of frames involved in interactive instructional media.
· Ask learners if they feel they have met the objectives
· Solicit questions and comments
• Inform learners that next week we will be discussing multimedia and expanding on the concepts discussed this week.
· Close the class