Embedded Files
The interactivity note is the instruction to the integrator on type of page layout and interactivities. The interactivity notes are only on page-level interactivity and not on GUI-level. In interactivity note the layout specs, interactivity type and targets, and pop-up locations are identified.
The “Roll-over” (including “Alt-Text” and “ToolTip”) interactivity is used when image hotspots are required. The locational preferences of pop-up layer should be specified.
The “Roll-over” interactivity notes are written for three types of interactivity such as:
Simple
ToolTip
Caption-Type
Simple Notes
Simple Notes
For writing roll-over interaction notes, the horizontal layout is chosen as there’s less OST and a wide image.
Example
Example
The following example demonstrates how to correctly write “Simple” roll-over interactivity notes.
Input
Input
Most of the food chains have four levels starting with plant life and ending with an animal.
Point to each level on the image to learn more.
Producers >> Produce food from the light energy of the sun
Consumers >> Cannot make their own food
Omnivores >> Eat both animals and plants
Decomposers >> Feed on decaying matter
Output
Output
Integration Notes
Horizontal layout; Rollover-interactivity on hotspots on each level on the image; Pop-ups open in image area to the right side of the image; each pop-up appears besides its hotspot.
In this example, the layout specs, interactivity type and targets; and pop-up locations are identified. Also a “horizontal layout” is chosen because there’s less OST and a wide image.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example
Non-Example
The following non-example demonstrates how not to write “Simple” rollover interactivity notes.
Input
Input
Most of the food chains have four levels starting with plant life and ending with an animal.
Point to each level on the image to learn more.
Producers >> Produce food from the light energy of the sun
Consumers >> Cannot make their own food
Omnivores >> Eat both animals and plants
Decomposers >> Feed on decaying matter
Output
Output
Integration Notes
Horizontal layout; Roll-over interactivity on hotspots on each level on the image; Pop-ups open in image area, below the image; Each pop-up appears beside its hotspot.
In this non-example, layout specs and interactivity type and targets are provided. Each pop-up appears besides its hotpot, but it opens below the image, in the image area.
ToolTip Notes
ToolTip Notes
As per standards, ToolTips are specified for non-labeled targets.
Example
Example
The following example demonstrates how to correctly write “ToolTip” rollover interactivity notes.
Input
Input
One of the goals set at United Nations Millennium Summit in 2000, aims at universal primary education by 2015. The latest statistics released in September on primary school enrollment rates can be viewed on the world map.
Point to each region on the map to learn more.
Developed Countries >> Male = 96%; Female = 95.1%
Commonwealth States >> Male = 89.7%; Female = 89.4%
Oceania >> Male = 86.8%; Female = 85.5%
Eastern Asia >> Male = 98.8; Female = 98.4%
Output
Output
Integration Notes
Vertical layout; Rollover-interactivity on hotspots on each region on the image; ToolTip for regions - “Developed Countries”, “Commonwealth States”, “Oceania”, and “Eastern Asia”; Pop-ups open in image area beside the corresponding hotspots.
In this example, layout specs, interactivity type and targets; and pop-up locations are identified. The image of the world map is provided without label. ToolTips are provided for each need level.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example
Non-Example
The following non-example demonstrates how not to write “ToolTip” rollover interactivity notes.
Input
Input
One of the goals set at United Nations Millennium Summit in 2000, aims at universal primary education by 2015. The latest statistics released in September on primary school enrollment rates can be viewed on the world map.
Point to each region on the map to learn more.
Developed Countries >> Male = 96%; Female = 95.1%
Commonwealth States >> Male = 89.7%; Female = 89.4%
Oceania >> Male = 86.8%; Female = 85.5%
Eastern Asia >> Male = 98.8; Female = 98.4%
Output
Output
Integration Notes
Vertical layout; Rollover-interactivity on hotspots ; ToolTip for regions - “Developed Countries”, “Commonwealth States”, “Oceania”, and “Eastern Asia”; Pop-ups open in image area beside the corresponding hotspots.
In this non-example, layout specs are specified. Notes for ToolTips are also provided. But, the target for rollover-interactivity on hotspots, that is, on each region on the image, is not specified.
Caption-Type Notes
Caption-Type Notes
The tabs are provided when special conditions, such as interactivity and presentation sequences are specified.
Example
Example
The following example demonstrates how to correctly write “Caption-Type” rollover interactivity notes.
Input
Input
Maslow's hierarchy of needs is often depicted as a pyramid consisting of five levels.
Point to each level to view the needs that fall under it.
Physiological needs >> Need to breathe; need to drink water; need for sleep; need to eat
Safety needs >> Security of employment; family security; security of health; safety from violence; security of personal property against crime
Love/ Social needs >> Friendship; supportive and communicative family
Self-esteem needs >> Need to be respected; enjoy self-respect; feel accepted
Self-actualization >> To make most of their abilities, to strive to be the best; to reach one’s fullest potential
Output
Output
Integration Notes
Horizontal layout; Rollover-interactivity on hotspots on each decade label along the timeline on the image; Pop-ups open in image area to the right side of the image.
In this example, layout specs, interactivity type and targets; and pop-up locations are identified. The sequences for the presentation and interactivity are specified.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example
Non-Example
The following non-example demonstrates how not to write “Caption-Type” interactivity notes.
Input
Input
Maslow's hierarchy of needs is often depicted as a pyramid consisting of five levels.
Point to each level to view the needs that fall under it.
Physiological needs >> Need to breathe; need to drink water; need for sleep; need to eat
Safety needs >> Security of employment; family security; security of health; safety from violence; security of personal property against crime
Love/ Social needs >> Friendship; supportive and communicative family
Self-esteem needs >> Need to be respected; enjoy self-respect; feel accepted
Self-actualization >> To make most of their abilities, to strive to be the best; to reach one’s fullest potential
Output
Output
Integration Notes
Horizontal layout; Rollover-interactivity on hotspots on each need label on the image; Pop-ups open in image area beside the corresponding hotspots.
In this non-example, the layout specs, interactivity type and targets are specified. However, the pop-ups do not open in the image area beside the corresponding hotspots but at the same place.
Page updated
Google Sites
Report abuse