Siti Hasmah Digital Library

A STORYBOARD SYSTEM TO FACILITATE TASKS IN E-LEARNING

NUR FARHANA BT AHMAD DEMAN HURI ZARITH ROSHAHIVA BINTI KUSHAIRI
SESSION 2009/2010

FACULTY OF INFORMATION TECHNOLOGY MULTIMEDIA UNIVERSITY APRIL 2010

Siti Hasmah Digital Library

A STORYBOARD SYSTEM TO FACILITATE TASKS IN E-LEARNING
BY

Siti Hasmah Digital Library

NUR FARHANA BT AHMAD DEMAN HURI ZARITH ROSHAHIVA BINTI KUSHAIRI
SESSION 2009/2010

THE PROJECT REPORT IS PREPARED FOR FACULTY OF INFORMATION TECHNOLOGY MULTIMEDIA UNIVERSITY IN PARTIAL FULFILLMENT FOR

BACHELOR OF INFORMATION TECHNOLOGY B.IT (HONS) MULTIMEDIA TECHNOLOGY MANAGEMENT B.IT (HONS) MULTIMEDIA TECHNOLOGY MANAGEMENT

FACULTY OF INFORMATION TECHNOLOGY

MULTIMEDIA UNIVERSITY
APRIL 2010

Siti Hasmah Digital Library

The copyright of this thesis belongs to the author under the terms of the Copyright Act 1987 as qualified by Regulation 4(1) of the Multimedia University Intellectual Property Regulations. Due acknowledgement shall always be made of the use of any material contained in, or derived from, this thesis.
© Nur Farhana Bt Ahmad Deman Huri & Zarith Roshahiva Binti Kushairi, 2010 All rights reserved

Siti Hasmah Digital Library DECLARATION We hereby declare that the work have been done by ourselves and no portion of the work contained in this thesis has been submitted in support of any application for any other degree or qualification of this or any other university or institute of learning. ____________________ Name of candidate Faculty of Information Technology Multimedia University Date: DD: MM: YYYY . DECLARATION I hereby declare that the work have been done by myself and no portion of the work contained in this thesis has been submitted in support of any application for any other degree or qualification of this or any other university or institute of learning. ____________________ Nur Farhana Bt Ahmad Deman Huri Faculty of Information Technology Multimedia University Date: 14:04:2010 ____________________ Zarith Roshahiva Binti Kushairi Faculty of Information Technology Multimedia University Date: 14:04:2010 Use the declaration below if your project is done solely by yourself.

Miss Nor‟ain Mohd Yusoff for her invaluable guidance. We are also grateful to our siblings for their support. we would like to express our sincere gratitude to our supervisor. we would like end our chain of gratitude by acknowledging our parents who persuaded us to continue this degree. To all others who help us one way or another. We do not think there is anything we could ever do to repay the both of them. The contribution of many people towards the realization of this research project is gratefully acknowledged. Grateful thanks are also acknowledged to our friends for their generous help during the study. We would also like to convey our appreciation to the Instructional Designer‟s of Multimedia Production Unit.A Storyboard System To Facilitate Tasks In E-Learning ACKNOWLEGMENT Siti Hasmah Digital Library In the name of Allah. understanding and never ending love. our sincere thanks. close co-operation and participate in this project research. most Merciful. which have strengthened us in carrying out this research project. encouragement and constructive criticism throughout the course of this research project. Last but not least. First of all. namely Miss Melor Bin Abd Rahman and her team members for their kind advice. most Gracious. 1 . We can never thank them enough. We attribute all of our success to their moral support and prayers.

..................................................6 Limitation of Systematic Instructional design ............2......................................1 Similarity & Differences for Media Storyboard and E-Learning Storyboard ..........7 Scope of Study ..... 34 2. ..................................................8..................................................................2 Comparison Templates............................................2 A Brief History of Instructional Design ..... 28 2................................................................ ..................................................2............. 36 2.................................................................................. 23 2....1 Introduction ................ 37 2.................................2 DEMAIS............1 Major Elements in E-Learning Storyboard..6 The E-Learning Storyboard ............2...................1 Advantages of Raptivity ........ 6 List of Figure ......................................... 37 2...........2...............................8.........................................................8 Task & Roles for Storyboard Designer & Reviewer ...........................4 The Instructional Design Model .............................................................2 Problem Statements ..................................................................................5 Research Methodology .............................................3 The Instructional Design Process .......1 Raptivity .................. 23 2......8..............................2. 41 2...2 Disadvantages of DEMAIS...............................................2 Instructional Design ...........................................4 A Brief History of Storyboard ........................................................................................................... 22 Chapter 2: Literature Review .............................1.............. 30 2.......3 Research Objectives ................................................................ 34 2.... 29 2.... .........................9 Compentencies............ 35 2....... 17 1........................................ 38 2................ 18 1............................................... 21 1..1 Introduction ....................2............... ...... 26 2........... 10 Abbreviations ................................3 Definition of Storyboard ............................................ 25 2.........................................5 Media in Storyboard VS E-Learning Storyboard ............. 8 List of Appendices ......8..... 17 1..........8.......................................................................................................8.............2....................................... 5 List of Tables ..........................2 Disadvantages of Raptivity......6 Significant of Study ................... 12 1........and Ethics of Instructional Designer ............................................. 23 2...1...................................... 24 2...........2............ 33 2............................ 28 2....................................1 Advantages of DEMAIS ....................................................................................... 33 2....A Storyboard System To Facilitate Tasks In E-Learning TABLE OF CONTENTS Management Summary ...................................6........................... 39 2.......2............... 32 2.... 15 1..........................5 Advantages of Using Systematic Instructional Design ................................. 23 2................... 23 2......................4 Research Questions ............................ 11 Chapter 1: Introduction .......................7 Storyboard Authoring Tools ................................ 12 1..................................................................... 41 2 Siti Hasmah Digital Library ............................................................................................2.......... 39 2.........8 Different Types of Storyboard Tools .......................... 31 2........................2............................................1 What is Instructional Design ..5............................................................6.....................................7 People Who do Instructional Design ...............................................Standards...

........................................................7...........2..................3...................4.....................91...2 Background of ID‟s Group ..........................2 Disadvantages of Springboard 0.......................8...9 Didactic Design in Storyboard ... 43 2.................................2...............................................................11 Conclusion.................................................................4..4 Collaboration .................................................................................................2 Disadvantages of Anecdote...........................................................02.................. 63 3.............................................................1 Advantages of Storyboard Tools 1......3... 44 2.4 ..................... 43 2..........1 Introduction ..................................02 ............. 54 3............................8.............2 Participant‟s Background .......................8.................................2 Background of the interview ...............7........ 65 3.3 Application Functionality .. 49 2....................................1 Executive Summary ..... 54 3.................4...................8.............6 Open Ended Question..3 Questionnaires Objectives . 60 3...5 MockupScreens 4..............................................................5 Summary of Findings..........5 Opinion .....2....................................8............ 44 2.. 51 2.......... 63 3......................... 56 3........ 54 3.................. 49 2..........91 .......... .........................4............ 53 Chapter 3: Research Methodology and Requirements Gathering ..............4..........3 Storyboard Tools 1.....................4 Interview questions Organization...............................................4....3....................................... 42 2...4 Data Analysis .......... 78 3......8......A Storyboard System To Facilitate Tasks In E-Learning 2.91............ 44 2.......... 47 2......7......... 57 3............. 68 3..........8. 72 3............................ 55 3............................ 66 3...................1 Introduction ............... 45 2...5 Interview findings on Section A...................... 79 Chapter 4: System Architecture ............................... ..3.............................3 Questionnaires .............2 Disadvantages of Storyboard Tools 1....................................8.......... 74 3....................1 Advantages of Anecdote ................... 48 2............7 Anecdote.4...........8 Summarization of Interview Findings ...........02....................................8...... ....................................... 54 3.8................... .........................................2................................................................6..................6 Interview findings on Section B ................................ ............... 54 3....................................3......................2 Disadvantages of DENIM.............4 Springboard 0............................................5.4...........................2........................................................... 46 2.................... 65 3.........2 Interview ..........2........................8...........................................8.... .....................................4 Questionnaires Organization .......................3 Interview Objectives ............................................................................................7 Interview findings on Section C .................... 63 3.......... 63 3................................. 80 3 Siti Hasmah Digital Library .............6 DENIM..........................2.................................................................................1 Total Questionnaires Participants ............... 55 3.................4...... 50 2. 62 3.................... 64 3.......... ...........8.................... 45 2....................3.....8...8.............................................10 Data Analysis .......6..........................................................1 Advantages of MockupScreens 4... ..................7............................................4....................................................1 Advantages of Springboard 0.................... .................................7........................1 Instrumentation.. 80 4...............5........................................2.1 Advantages of DENIM.. 42 2.........2 Disadvantages of MockupScreens 4.................. 46 2....

................................................3 Admin Screen .......... 106 Chapter 6: Testing/Evaluation of Findings ............................3............... 114 REFERENCES ....................................................................................................................................3...........................4..................................................................................................................3.. 93 4.... 109 6...........................................6 Limitations ....3 Functional Test Design ........ 109 6.............3 Difficulties Encountered & Solution Applied ................................................................................................................................................................................... 100 5............................................4.................... 121 Siti Hasmah Digital Library 4 .......................2 Web Design Tools ............. 108 6...............7 Project Develpment Team .......... 90 4......................................4..........................................2.................................A Storyboard System To Facilitate Tasks In E-Learning 4.................................1 Introduction .........................................................................................................................................................................................4 User Interface Design .. 94 4.........................................6 Design Model Explanation ............ 97 4...................................................................................2 System Test ....1 Overview ............... 108 6.............. 82 4........................................................................4 Test Result ....................................................1 Functionality of the system........................................................................................... 99 5.....................................4....... 91 4............................................................................................3.................................2...............................................................................................................................4..4 Project Management Methodology .......................... 89 4...........2 Activity Diagram ..... 95 4..........................2 Storyboard Screen ...........................1 Login Screen ..............7 Future Enhancement ............................................................3.......... 81 4...2....................... 115 APPENDICES ................. 82 4......................................................3 Analytical Model: Class Diagram ....................................................................1 Use Case ..................................3................... 98 Chapter 5: System Application ................8 System Architecture Explanation .................... 104 5...........................3 System Design ...... 88 4................................ 93 4..4.............................6 Solution for Difficulties Encountered for the Above Matter .............................................2 Screenshots of the system ....................4 Analytical Model Explanation .................. 99 5.....4...... 81 4.................................. 87 4............5 Difficulties Encountered ........................................2 System Analysis ................... 100 5.. 97 4....................................................... 108 6................................................ 86 4............5 Design Model: Sequence Diagram ..1 Requirement Specifications........ 113 Chapter 7: Conclusion .............. 111 6......................................... 93 4...3.......7 System Architecture ..............................5 Problem Encountered ................ 112 6......3.............. 92 4...........................2.....

The project concluded that the e-Learning Storyboard system (De-ELSS) could develop to replace the lowfidelity and didactic issue in storyboarding. Existing storyboard systems are analyzed. The project presents a system framework to enhance a storyboard system in Multimedia Learning System. Reviewer and Proof Reader. teachers. De-ELSS System is an application that assisting the SME to construct E-learning in order to improve communication problem between SME and ID. trainers. instructional designers. and people from various other areas of expertise come together in order to serve a community of learners. technicians. The importance of instructional design and design process are discussed to explore the issue of designers‟ tasks and communication among Designers. multimedia.A Storyboard System To Facilitate Tasks In E-Learning MANAGEMENT SUMMARY E-learning is perceived as a group effort. Siti Hasmah Digital Library 5 . Subject Matter Experts (SME). database administrators. where content authors.

8 Storyboard Authoring Tools Comparisons Table 2.2 Advantage of using Systematic Instructional Design Table 2.7 Comparison templates Table 2.02 Table 2.1 Software tools/ devices for GUI /design purpose Table 2.4 Tasks & Roles for Storyboard Designers and Reviewer Table 2.4 Participants feedback on content of the storyboard PAGE 20 25 26 28 29 33 34 35 36 38 41 42 44 45 47 49 51 67 67 68 69 6 .13 Advantages of MockupScreens 4.1 Major activities of Instructional Designer Table 2.5 Similarity and Differences for Media Storyboard and ELearning Storyboard Table 2.6 Elements in E-learning Storyboard Table 2.7.1 Participant‟s number of years using the computer Table 3.16: Comparisons among Storyboard Tools Table 3.9 Advantages of Raptivity Table 2.4 Table 2.12 Advantages of Springboard 0.3 The participants feedback on communication between team members Table 3.91 Table 2.3 People who involved in Instructional Design Table 2.A Storyboard System To Facilitate Tasks In E-Learning LIST OF TABLES Siti Hasmah Digital Library TITLE 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Table 1.11 Advantages of Storyboard Tools 1.15: Advantages of Anecdote Table 2.10 Advantages of DEMAIS Table 2.2 Participant‟s number of years surfing the internet Table 3.14 Advantages of DENIM Table 2.

16 Participant‟s feedback on recommending the application Table 6.9 Participant‟s feedback on dealing with clients or SME Table 3.13 Participant‟s feedback on production turnaround time Table 3.8 Participant‟s feedback on application ease of use Table 3.12 Participant‟s feedback on dateline of the storyboard Table 3.2 Test results of User Management module functionality Table 6.15 Participant‟s feedback on using the application at work Table 3.6 Test results of Proof Read module functionality 69 70 71 71 72 73 73 74 75 76 76 77 109 110 110 110 111 111 Siti Hasmah Digital Library 7 .4 Test results of Subject Matter Expert module functionality Table 6.5 Test results of Reviewer module functionality Table 6.7 Participant‟s feedback on various components Table 3.11 Participant‟s feedback on practice and tests by SME Table 3.10 Participant‟s feedback on understanding of SME Table 3.6 Participant‟s feedback on content template storyboarding Table 3.A Storyboard System To Facilitate Tasks In E-Learning 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 Table 3.1 Test results of User Access module functionality Table 6.5 Participant‟s feedback on output produces Table 3.14 Participant‟s feedback on production costs Table 3.3 Test results of Instructional Design module functionality Table 6.

1. Screenshot for the Storyboard Tools 1. ID.A Storyboard System To Facilitate Tasks In E-Learning LIST OF FIGURES TITLE 1 2 3 4 5 6 7 8 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Figure 1.1.2.9. Use case for Reviewer PAGE 19 25 37 37 38 38 40 40 40 42 43 45 46 48 58 65 66 66 77 82 83 83 Siti Hasmah Digital Library 8 . The DEMAIS Storyboard Editor Figure 2. Participant‟s overall rating of this application.4. Figure 2. The Content Manager Figure 2. Class diagrams for Administrator.5.6. Use case for Instructional Designer (ID) Figure 4.3.1.2. Flip Book (During Open) Figure 2.2.4. Total Questionnaire Participants Figure 3. Radial Diagrams Figure 2.11.13. An Instructional Design Process Model Figure 2. Screenshot for the Springboard 0.3.91 tool Figure 2. Figure 4. Component of Storyboard Figure 3. Screenshot for the MockupScreens 4. The narration (voice script) editor.02 tool Figure 2. Flip Book (before open) Figure 2.4 Figure 2.7. Reviewer. Screenshot for the DENIM Figure 2. What is your highest tertiary education level? Figure 3. Comparison Chart Figure 2.5. Use case for Subject Matter Expert (SME) Figure 4. SME and Proof Read Figure 2. How many years of experience do you have in relation to the job scope stated above? Figure 3.8.7. Screenshot for the Anecdote tool Figure 3.1.12.3.10.

8.11.8. Gantt chart for Phase 1 Figure 4. Use case for Administrator Figure 4.2.14.10. Gantt chart for Phase 2 Figure 5.9. Proof Read Login page Figure 5.11. Admin Login page Figure 5.13. System Architecture for Storyboard System Figure 4. Add Screen page Figure 5.6. Activity Diagram for a Storyboard System Figure 4. Reviewer Main page Figure 5.6. View Analysis Documents Figure 5.4.5. SME Edit Profile page Figure 5.7. Reviewer Login page Figure 5.3.12. View SME members‟ page 84 85 Siti Hasmah Digital Library 9 86 87 89 91 95 96 100 100 101 102 102 103 103 104 104 105 105 106 106 107 107 . SME Main page Figure 5. Index page Figure 5. Proof Read Main page Figure 5. SME Change Password page Figure 5.A Storyboard System To Facilitate Tasks In E-Learning 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 Figure 4. Class Diagram for a Storyboard System Figure 4. Sequence Diagram for a Storyboard System Figure 4.1. SME login page Figure 5.4. Analysis Documents page Figure 5. Admin Main page Figure 5.10.7.9. Use case for Proof Read Figure 4.5.15.

A Storyboard System To Facilitate Tasks In E-Learning LIST OF APPENDICES Siti Hasmah Digital Library TITLE Appendix 1: FYP Meeting Logs 1 Contributions Appendix 2: Questionnaires Interview Questions 2 Screenshots of the system Research Paper Conference Paperwork 10 .

A Storyboard System To Facilitate Tasks In E-Learning ABBREVIATIONS Siti Hasmah Digital Library ABBREVIATION ACM De-ELSS DEMAIS DENIM GUI HCI ID IEEE IPS LMS MMLS MPU NEA PHP RW SD SME SOP UML DESCRIPTION Association for Computing Machinery The E-Learning Storyboard System Designing Multimedia applications with Interactive Storyboards Design Environment for Navigation & Information Model Graphical User Interface Human-Computer Interaction Instructional Designer Institute of Electrical & Electronic Engineer Institute for Postgraduate Studies Learning Management System Multimedia Learning System Multimedia Production Unit National Education Association Hypertext Preprocessor Reviewer Storyboard Designer Subject Matter Expert Standard or Operation Unified Modeling Language 11 .

Learning Management System (LMS) have been described as a web based technology or software package that used to plan.1 Introduction E-learning is a learning process that is enabled or supported by the use of digital tools and content. Datuk Seri Dr. learners are not bounded by the time constraints and they can learn at their desired pace. which may include online interaction between the learner and their teacher or peers. implement. E-learning strategies have been introduced into public universities since 1996. Multimedia University has developed their multimedia learning system (MMLS) to be used for the pilot study among others LMS Universities. though other technologies such as CD-ROM are also used. INTRODUCTION Siti Hasmah Digital Library 1. Mahathir bin Mohamad was introduced E-Learning in Malaysian when he announced vision 2020. E-learning opportunities are usually accessed via the internet. With e-learning.A Storyboard System To Facilitate Tasks In E-Learning 1. E-learning is introduced widely and is encouraged to be implemented in organizations and education. For this reason E-learning has been established in 1996 by the Multimedia Super Corridor. It typically involves some form of interactivity. and assess a specific learning process. 12 . video conferencing and threaded discussions. It provides an instructor to create and delivery of learning content. LMS also provide students with the ability to use interactive features such as discussion forums. (Ministry of Education 2004:1) In 1990s. For example. Since then.

for this reason. and training. it should be designed considering Human-Computer Interaction (HCI) and usability concepts and Siti Hasmah Digital Library methodologies. For example. Research in HCI has been spectacularly successful and has fundamentally changed computing. It is interface improvements more than anything else that triggered this explosive growth. how the computer‟s actions are controlled and monitored. it will lead to effective E-learning systems that should include sophisticated and advanced 13 . devices and screens and is fundamentally interactive and. and evaluate user interfaces. HCI has been introduce new interaction techniques for supporting user tasks. and the processes that developers follow when creating interfaces. E-learning is based on computers. and creating more powerful forms of communication. build. organizations. virtually all software written today employs user interface toolkits and interface builders. HCI introduced applying hypertext technology to browsers allows one to traverse a link across the world with a click of the mouse due to the growths of World Wide Web. how information is presented and requested. and society. HCI offers a core of concepts and methodologies that constitute a step ahead in the design of interactive systems. providing better access to information. test. the tools used to design. HCI is the study of how people design. HCI becomes the key element in the design of interactive e-learning systems that take into account user needs and characteristics. With HCI. documentation.A Storyboard System To Facilitate Tasks In E-Learning As E-learning systems grow and more people are accessing them. It includes input and output devices and the interaction techniques that use them. implement. and use interactive computer systems and how computers affect individuals. all forms of help.

Leonardo da Vinci was the first person to use storyboard. It contains a detailed description of the visual elements such as text. the first animated cartoon feature. providing an easy and flexible interaction suited to catch students' interest.A Storyboard System To Facilitate Tasks In E-Learning functions. graphics. Walt Disney and his artists created the storyboard with the making of steamboat Willie. This method is still used in the movie industry today. In 1929. With Storyboard. yet their interface should hide their complexity. The storyboard provides the details from the instructional designers (ID) that are needed by the Subject Matter Experts (SME) in order to produce an effective e-Learning. Siti Hasmah Digital Library A storyboard can be defined as one of the important magic arrows in eLearning. The storyboarding process was developed at the Walt Disney studio during the late 1920s after years of similar processes being used at other animation studios. This final year project is conducted to develop storyboard for enhancing the learning object environment with audio and animation in order to produce an interactive distance learning lessons. 14 . video and animation and also programming instruction. it used to facilitate communication between team members and provides a through visual representation of the final instruction.

there is limited opportunity to apply many of its principles and procedures.A Storyboard System To Facilitate Tasks In E-Learning 1. video or multimedia and will not be useful for E-learning work.  No particular goals of developing storyboard contents are identified to the SME. In such cases.  Storyboard Templates which are not suitable for e-learning The current storyboard template are not standardize and not suitable for Elearning. The existing standard or operation (SOP) indicates that SMEs lack of training and thus unable to identify the purpose of developing storyboard contents for eLearning. meaning here the SMEs still using the paper based storyboard. Many of the storyboard templates only relate to film. In the existing system. because there is no “lead time” to the education. The templates of the storyboard will only be suitable for frame-based E-learning. the SMEs have to comply with a lot of principles and procedures to meet the datelines of storyboard submission. which in turn is mainly suitable for declarative (factual) or canonical (right/wrong) knowledge.2 Problem Statement The research is carried out to identify the following issues:  Learning goals cannot be identified in advance. This is more difficult when they arrive at adding Siti Hasmah Digital Library 15 . The storyboard that they used is never change. and since reflection and planning are central to instructional design.

there are available for creating e-learning content storyboard that caters for SME as their target user. but the system does not cater the application to facilitate between the team members. A project will not be successful if the SME has irregular contact with the instructional designer and development team. This is another contributing factor to the slow cycle of generating content storyboard.A Storyboard System To Facilitate Tasks In E-Learning something into the storyboard. The size of the paper based storyboard is fixed and cannot be change. However. it would be very difficult to set a common schedule for these two parties to congregate and collaborate on their content development effort. For instance the SME may not understand that they need to be constantly involved with a project. Siti Hasmah Digital Library  Lack of communication between IDs and SMEs Instructional designers need to account for nuances of the community of practice when interacting with the subject matter expert. 16 . A lack of attention to this milieu could result in non-acceptance of the instructional designer as a change agent or ineffective learning design.  Time Constraint that cause of Slow turnaround time Since the ID and SME are two different groups of people being pulled together to work on a content project. there need to be an application to assist them in this conquest. In order to make it easier for the SME to generate an e-learning content storyboard.  Lack of suitable application that would expedite development process.

5. 2. efficient. To facilitates congruence among objectives. To supports effective. To encourages advocacy of the learner. 4. developers and those who will implement the instruction. How to develop a good storyboard for e-learning? What are the problems faces by the team members in storyboarding? How to facilitate a good communication in storyboarding? How to conduct the usability study of the storyboard design? 17 . 7.A Storyboard System To Facilitate Tasks In E-Learning 1. To provides a systematic framework for dealing with learning problems. and appealing instruction. 3. 3. 2. and assessment. To supports development for alternate embodiments or delivery systems. Siti Hasmah Digital Library 1. 6. To facilitates diffusion/ dissemination/ adoption. 4. activities.4 Research Questions The research aims to answer the following questions: 1.3 Research Objectives This research project will attain the following objectives: 1. To supports coordination among designers.

In order to get more accurate information. The first way is gathered an information from the books at the Siti Hasmah Digital Library which is in Multimedia University Cyberjaya.A Storyboard System To Facilitate Tasks In E-Learning 1.  System architecture System architecture is divided by two parts which is conceptual design and physical design. Siti Hasmah Digital Library 18 . Francis and Taylor Database. IEEE Portal. and Springer Database. Other ways to gathered information is based on journal. The Conceptual Design is a strategic statement of how the solution will provide value to the collection of usage scenarios which is describes all the participants and activities within any environment that require a solution. This design statement is expressed in the context of the solution users and describes what the solution will do to support their activities. Besides that. There are few ways of gathering information for this final year project. the information shall be derived from the internet searching. doing interview with peoples that related to this project and distribute the questionnaires. This journal can be found at the Institute for Postgraduate Studies (IPS) that is under the Research and Development Division in Multimedia University Cyberjaya. Science Direct. E-database also provides a function in finding the information.5 Research Methodology  Information Gathering The application must be built before it could be used by the sample group to test its usability and effectiveness. Examples of E-database are such ACM Portal.

and how it is displayed as output.1: Class diagrams for Administrator. ID. Reviewer. Below are the class diagrams for Administrator. ID. and the relationships between them. SME and Proof Read 19 .  Software architecture The software architecture of a program or computing system is the structure or structures of the system. Reviewer. the externally visible properties of those components. SME and Proof Read. class diagram and other information. Figure 1.A Storyboard System To Facilitate Tasks In E-Learning The Physical Design relates to the actual input and output processes of the system. This is laid down in terms of how data is inputted into a system. how it is Siti Hasmah Digital Library verified or authenticated. how it is processed. which comprise software components. This software architecture for this final year project research requires data.

2010) Microsoft Visio is a diagramming program that uses a vector graphics to create diagrams such as the flowchart diagrams. The Unified Modeling Language (UML) offers standard semantics and notation for describing object structure and behavior and has emerged as the design medium of choice for developing large-scale distributed object applications.( Adobe Dreamweaver. Since then it had become the most popular open-source web based programming language used by over 6 million domains with a monthly growth rate of 15% (according to Netcraft. 2010) Wanp are packages of independently-created programs installed on computers that use a Microsoft Windows operating system. Table 1.netcraft.com/survey/). Rational Rose is software that helps in creating an UML (Unified Modeling Language). Many of these tools have demonstrated significant productivity gains for programmers. MySQL Adobe Dreamweaver Wamp Microsoft Visio Rational Rose 20 . and is now developed by Adobe Systems. and have become important commercial products. (WAMP. 2010) Is a web development application originally created by Macromedia. MySQL is a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. Below are the software tools or devices that will be used in this final year project. It is an open-source server-side scripting language that was first introduced in 1994. (MySQL. which acquired Macromedia in 2005.A Storyboard System To Facilitate Tasks In E-Learning  Software tools/ devices for GUI /design purpose There have been special software systems and tools to help design and Siti Hasmah Digital Library implement the user interface software.1: Software tools/ devices for GUI /design purpose Application Web Description PHP is a recursive acronym for PHP: Hypertext Pre-processor. http://www.

this study is deemed significant because if such the storyboard in Elearning could be built and prove to be effective. This will lead changes to high fidelity prototyping that are fully interactive. (Smith and Ragan. it would not only benefit the E-learning system in Multimedia University but also to improve the e-learning industry in Malaysia that has been proposed by the government as well. it could improve the low fidelity prototyping from the sketch based that still uses traditional method. 2005) 21 . Eventually.A Storyboard System To Facilitate Tasks In E-Learning 1. For example. or even perform some real tasks with it. users can operate on the prototype. simulating much of the functionality in the storyboard. The De-ELSS follows the set of competencies for instructional designers developed by International Board of Standards for Training.6 Significance of Study Siti Hasmah Digital Library This study aimed to improve an existing E-learning by developing a storyboard system for assisting the SME to construct E-learning and also can improve the communication problem between SME and ID. With Storyboard. and Instruction (IBSTPI). The research also used the ethics guideline provided by the National Education Association (NEA) which focuses on commitments to students and to the profession of education. Performance.

 This study will come out with expected deliverable by develop an interactive multimedia syllabus that can be used by SME and reviewer. Not animation and films and games. 22 .A Storyboard System To Facilitate Tasks In E-Learning 1.7 Scope of Study Siti Hasmah Digital Library Below are the scopes of the study for this final year project:  The scope of this study focus on storyboarding in the E-learning. For usability.Multimedia Technology & Application and another subject.  For sampling purpose .  To introduce MMLS as a pilot study among other LMS that created by other universities.

LITERATURE REVIEW 2. 2.A Storyboard System To Facilitate Tasks In E-Learning 2. In both definitions.2 Instructional Design 2. information resources. Discroll (2000) has defined instruction from a similar perspective as follows: “the deliberate arrangement of learning conditions to promote the attainment of some intended goal”.1 What is Instructional Design? Smith and Ragan (2005) defined Instructional Design as “the systematic and reflective process of translating principles of learning and instruction into plans for instructional materials. published journals and some online references.2 A brief history of Instructional Design Instructional Design is the combination of the word instruction and design itself. instruction is the intentional arrangement of experiences. The sources for the literature are collected from some articles. Siti Hasmah Digital Library 2.1 Introduction This chapter examines previous literature or studies conducted with the Elearning storyboard. This chapter will focus on the Instructional Design and its concepts. and further discuss detailed of the storyboard. academic research papers. Instruction is the international facilitation of learning toward identified learning goals. 23 . and evaluation”. activities. leading to learners acquiring particular capabilities.2.2.

the instructional designer‟s job is to answer the following three major questions:   Where are we going? (What are the goals of the instruction?) How will we get there? (What are the instructional strategy and the instructional medium?)  How will we know when we have arrived? (What should our tests look like? How will we evaluate and revise the instructional materials?) These three questions can be stated as major activities that an instructional designer completes during the design and development process as shown in Table 2. a student of effective professional practice has been described design as a process of “reflective conversation with the materials of a given situation. 1987). 1984). 24 . When projects become complex.A Storyboard System To Facilitate Tasks In E-Learning Design is an activity or process that people engage in that improves the quality of Siti Hasmah Digital Library their subsequent creations.1. the differences being that once that expertise and care with which planning is conducted reaches a certain point that begin to refer to the activity as “design”. According to (Mager. Design is related to planning.3 The Instructional Design process There are many interpretations that described the term „instructional design‟. According to (Schon.” 2. Another way to define instructional design is to describe the process involved in the systematic planning of instruction.2. at some point the term “planning” no longer fits and “design” becomes a better descriptor.

Develop an instructional strategy to determine “how we‟ll get there. Figure 2.4 Instructional Design Models According to Andrews and Goodson (1980) have described forty such models for systematic design of instruction.” 2.1: An Instructional Design Process Model 25 .1: Major activities of Instructional Designer Siti Hasmah Digital Library Design Process Analysis Strategy Evaluation Descriptions Perform an instructional analysis to determine “where we‟re going”.A Storyboard System To Facilitate Tasks In E-Learning Table 2. In the other hand.1 shows the modified Smith and Ragan (2005)‟s simple model of design.2.” Develop and conduct an evaluation to determine “how we‟ll know when we‟re there. Gustafson and Branch (1997) provide a more extensive analysis of fourteen models. In these analysis. the research modified Smith and Ragan (2005)‟s simple model of design to accommodate with the De-ELSS. Figure 2.

The written plans (goals. because design and development have employed information about the learners and setting.2: Advantage of using Systematic Instructional Design (excerpts from Smith and Ragan (2005)) Advantages Encourages advocacy of the learner Descriptions To a very large degree. designers are standing in the place of the learner. The process of design itself focuses on effective instruction. the learner is the focus of instruction. The systematic process and resulting written documentation allow for communication and coordination among individuals involved designing. efficient. and appealing instruction. products will have a high likelihood of being practical. It allows for common language and general procedure. efficient. there may be Facilitates diffusion/ dissemination/ adoption. Supports effective. distributed. and acceptable solutions to the instructional problems that there are designed to solve. developers and those who will implement the instruction. In addition.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 2. producing and delivering instruction. and analysis of task) and the written products that are results of instructional design efforts assist the process of review and revision of work in progress in a coordinated team effort. 26 . workable.5 Advantage of using systematic Instructional Design The advantages of systematic instructional design are listed as follows: Table 2. Often the designer is not a content expert. Supports coordination among designers. Because the products of systematic instructional designer are in fact physical “products”. duplicated. including the content itself. description of target audience. Information about learners should take precedence over other factors that might drive design decisions. trying to obtain information to make the content clearer to the learner.2. In their constant querying of a subject matter expert for clarification. Efficiency is particularly facilitated by the process of instructional analysis in which appropriated strategies promotes the appeal of instruction. The process of formative evaluation provides the opportunity to revise instruction to make it more effective. All of these factors are considered indicators for success. Designers spend a great deal of effort during the beginning stages of a design project trying to find out about the learner. and appealing. and used in the field.

Facilitates congruence among objectives. The systematic approach to instructional design helps ensure that what is taught is what is needed for learners to achieve stated goals for learning and that evaluation will be accurate and appropriate. Much of the work that goes into an instructional design project is independent of the specific form that finished product takes (such as print. and assessment. and has a well-constructed plan for gathering evidence to determine whether the approach has solved the initial problem and what undesirable effects it might have. Provides a systematic framework for dealing with learning problems. activities. The innovations that are generally appealing are those that have clarified the problem into a learning goal.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Supports development for alternate embodiments or delivery systems. Frequently. computer. or video). web. creative individuals not trained in systematic instructional design will develop ingenious approaches to instruction that are rather like “solutions looking for a problem”. 27 . have developed an instructional approach that gives reason to believe that the problem can be solved and the learning goals will be met. The front-end analysis and consideration of instructional strategies will be valid beginning points for projects that result in embodiments other than those used by the original project.

there is limited opportunity to apply many of its principles and procedures. SME will be a teacher as Designers in E-learning.A Storyboard System To Facilitate Tasks In E-Learning 2.6 Limitation Of Systematic Instructional Design Siti Hasmah Digital Library ID has limited applicability to educational experiences which is learning goals cannot be identified in advance and no particular goals are identified. The development of engaging activities seems to be a particular strength of practicing SME. Multimedia Designer and also proof read. Teachers as Designers Other Designers 28 . These assessment approaches may include written tests. In such cases. who are either permanently or temporarily assigned to conduct training in that area.2. oral questioning and a variety of other techniques for assessing learning. and since reflection and planning are central to ID. In addition. Graphic Designer. ID are sometimes called upon to make contributions in the visual metaphors which may underlie a simulation. SME select or develop activities and information sources that will assist learners in reaching these goals. industry. observation. because there is no “lead time” to the education. Many instructional designers who are involved in training design have developed additional competencies in more inclusive specialty that is termed “performance technology”.3: People who involved in ID (excerpts from Smith and Ragan (2005)) People Training Designers Description The most identifiable group of individuals who practice instructional design is trainers of adults in business. SME also select or develop ways to assess learners‟ progress toward reaching goals. performance tests. government and private agencies. Some trainers are experts in their skill or subject area. micro world.7 People who do Instructional Design The following people that are listed below are involved in instructional design: Table 2. 2. virtual reality or exploratory learning environment may benefit from the contributions of an instructional designer who possesses a high proficiency in visual literacy skills in addition to core instructional design competencies. Not all trainers are instructional designers.2.

A Storyboard System To Facilitate Tasks In E-Learning

2.2.8 Tasks & Roles for Storyboard Designer and Reviewer

Siti Hasmah Digital Library

Melor, (2007) developed the major list tasks that need to be accomplished by the Storyboard Designers (SD), and Reviewer (RW) in order to develop the storyboard in Elearning. Table 2.4: Tasks & Roles for Storyboard Designers and Reviewer
Roles Storyboard Designer      Tasks To plan and create course contents (Lesson, Sco) to meet the learning objectives. Provide storyboard within the deadline. To review and update the content and storyboard together with the Instructional Designer. To ensure the correctness of the subject matter as well as grammar and spelling. Storyboard Designer is also responsible for the correctness of voice–over and pronunciation. If there are mistakes, the Storyboard Designer will have to inform the Instructional Designer or the Multimedia Designer/ Graphic Designer to make the necessary changes. Specify and select relevant materials such as images, videos, animations and voice-over scripts. The Multimedia Designer/ Graphic Designer will assist to draw the images, animate the objects and record the voice-over. To be responsible for the copyright issues of the content, images, videos or other materials provided by the lecturer. To test the completed courseware with the Instructional Designer to verify the correctness of the completed courseware and if necessary provide feedback for improvement. Review all storyboards prepared by the storyboard designer and submits a review report once completed. Suggest or comment to improve the content, text, images, diagram and chart. Give feedback if any extra information should be including in the content. Review the completed courseware (final product) and submits a review report once completed.

     

Reviewer

29

A Storyboard System To Facilitate Tasks In E-Learning

2.2.9 Competencies, Standards, and Ethics of Instructional Designers

Siti Hasmah Digital Library

Below are the competencies, standards, and ethics of Instructional Designers  Competencies One of the more widely used set of competencies for IDs is that developed by International Board of Standards for Training, Performance, and Instruction (IBSTPI). Another useful set of competencies is that developed by the American Society for Training and Development (ASTD). The ASTD competencies are directed toward human resource development and performance improvement in corporate contexts. In addition, Analysis & Technology, Inc. also has developed a set of competencies.  Standards Fields and his associates (Fields, Foxton, & Richey, 2001) elaborated the IBSTPI competencies with training standards as well as providing a description of common specializations and uses of standards by various subgroups. In addition, the Association for Educational Communications and Technology (AECT) has developed the standards used by the National Council for Accreditation of Teacher Education (NCATE) to support for accrediting of both the technology component of undergraduate programs in instructional design and technology.  Ethics Like competencies and standards, professional codes of ethic provide guidance for a good practice. Ethics provide a different insight from that provided by performance standards which is a moral compass. National Education Association (NEA) has
30

A Storyboard System To Facilitate Tasks In E-Learning

developed a short but useful statement of ethics for educators which focus on

Siti Hasmah Digital Library

commitments to students and to the profession of education. According to (Welliver, 2001) has been edited a volume for AECT on ethics for educational communications and technology professionals.

2.3 Definition of Storyboard
There are many ways to describe „storyboard‟. The storyboard in E-learning development “process” originally comes from combination of the film, video world, software engineering and education. This common history with media design and production creates confusion at times. There are some common terms that are used in different ways, and not all of the lessons learned in producing other media apply to eLearning. Therefore, this research project is to identify which definition to use in order to avoid confusion and misinterpretation of the term. Bill Brandon (2004) defined storyboard as “the magic arrow in E-learning which transports a project from design to development.” According to the U.S. Department of Justice Office for Domestic Preparedness says, “Storyboards are the blueprints of an interactive courseware design and development process.” Orr et al. (1993) claims storyboard is the documentation for interactive multimedia production that contains instructions for programming, an audio script, and a detailed description of the visual elements such as text, video, graphics, and animation.

31

William Cameron Menzies. 32 . Hitchcock‟s graphic designer on the film. Other directors rely on storyboards to communicate their ideas and objectives to the rest of the production team. The storyboard contains series of sketches and notes on the paper in order to covering the key shot in sequence. The next part will discuss further difference between Media Storyboard and E-learning storyboard. drew each of those shots on a storyboard in advance. One of the first live action films to be completely storyboarded was Gone with the Wind. the study of storyboard will continue to grow and progress as the storyboard method also is useful for educational content than scripts. the film‟s production designer. the shower murder in “Psycho. a twentieth century director of psychological thrillers has been used the exacting storyboard in details the scenes could be precisely shot even he will not present on the set. There is a famous scene. According to Alfred Hitchcoock. was hired by David Selznick to design every shot of the film. it uses how the writers and directors plan out the sequence of camera shots and connect them to the script. the storyboard becomes popular in making movies. cartoons and other visual media that use the traditional way in a written script to specify the exact content.” that required dozens of individual shots. Undoubtedly.A Storyboard System To Facilitate Tasks In E-Learning 2. The existing storyboard will help to facilitate tasks in E-learning. involving an actress and a stand-in.4 A brief history of Storyboard Siti Hasmah Digital Library In early 1940s. Saul Bass. made over a period of several days. During preproduction.

2004 ) Provide a through visual representation of the final instruction (Kruse. based on learner responses that each learner may experience a different path through a course. E-learning is created in order to obtain particular business goals as the result of people developing new skills or knowledge.5: Similarity and Differences for Media Storyboard and E-Learning Storyboard Media Storyboard Similarities Team Production Both involve production with a team. interactive. There is a feedback from the learners. and practice.) Way of Interaction Most multimedia and all video Interactive because E-learning is and film products are non.1 Similarity and Differences for Media Storyboard and E-learning Storyboard According to (Brandon. there are similarities and differences between media storyboard and E-learning: Table 2. Purpose 33 . n.A Storyboard System To Facilitate Tasks In E-Learning 2. E-learning Storyboard Visual elements Both involve production of visual elements and audio. (Brandon. 2004).5 Media Storyboard VS E-learning Storyboard Siti Hasmah Digital Library 2. /audio production Creativity Expensive Linear Both are important in creativity. 2004 ) Facilitates Communication between team members (Leonard.5.d. Mistakes in either one are expensive to fix. Differences One thing always follows another Most E-learning involves branching in a fixed sequence. Most multimedia and a lot of video and film are made for the purpose of creating awareness and interest via a clearly communicated message.defined by questions.

or a sketch.6 The E-learning Storyboard Siti Hasmah Digital Library E-learning storyboard is a screen-by-screen description of what students will see. text should adhere to proper design and formatting principles. For example. It Indicates to the learner what they will be able to do.A Storyboard System To Facilitate Tasks In E-Learning 2. curriculum title. unit/lesson title. say and/or write after instruction In Audio/Narration should include the following: Audio Scripts Instruction Feedback Male and female narration voices indicated Videos are great for visual learners and help them achieve their objectives Graphics are provided in the script as a verbal description of what should appear on screen. It provides a more complete picture of what the final program will look like. 34 Objectives Audio/Narration     Video Clips Graphics On-Screen Text Navigation& Interactivity .6. Textual content on a storyboard is to match the exact text as seen by the learner during the module.1 Major Elements in E-learning Storyboard. hear.d. Navigation Storyboard screens should have chronological display depicting the exact display of the intended module. date. and do when running the program. n.) Has been listed out the following 8 Major elements: Table 2. It would need to be verified by the SME and gives other team members an idea of what their multimedia creations are intended to supplement In addition. Learning objectives are included in the storyboard as on-screen text. (Kruse. It helps visually to enhance the learning and to captures learners attention. headings & proper fonts. 2.6: Elements in E-learning Storyboard Elements Project Information Description Storyboards should contain identifying information about the project such as client name. draft/version number and storyboard frame number. E-Learning storyboards must connect not only content and images but also programming instructions.

2004) Table 2. For example: Graphics. their inclusion in a storyboard is not possible. Video. Storyboards use notes to clarify and describe elements that are not visually represented. Animations.S Department Of Justice Horton E-learning Designer‟s Edge      Commercial 35 .7: Comparison templates Free Freebies Studio 1151 U.2 Comparison templates Below is the table for comparison templates for free or commercial storyboard templates. Hyperlinks. and Audio etc.A Storyboard System To Facilitate Tasks In E-Learning Relevant Notes Interactivity One Rule: NO Interactive Elements Included in a Storyboard Two reasons:  Interactivity crowds an already detailed presentation  Those who create such interactive elements are the ones to whom the SB is being presented. Therefore. (Brandon. Notes give team members verbal details for complicated visuals Siti Hasmah Digital Library 2.6.

(2005) introduced an AR Storyboard: An Augmented Reality based Interactive Storyboard Authoring Tool Microsoft PowerPoint (Microsoft PowerPoint. Microsoft Word (Microsoft Word. and trainers to present an information. Name of Storyboard Shin et al. Adobe Illustrator (Adobe Illustrator. PowerPoint presentations consist of a number of individual pages or slides. exit or move. and provides intuitive interface for scene composition and camera pose/motion control. 2009) 4. movies. It can be used to do the documentation and create small storyboards using the tools in the Microsoft Word. which may be arranged freely on the slide. It can contain text. Custom animation can be used to create small storyboards by animating pictures to enter. and other objects.7 Storyboard Authoring Tools Siti Hasmah Digital Library Storyboard Authoring Tools is a tool that helps designer‟s to create and design a storyboard based on the need and requirements. graphics. educators. 36 . Table 2. students. Below are the comparisons between the authoring tools. It is flexible and powerful and allows defining a precise background grid. It is a presentation program that widely used by business people. nonexperienced users may compose 3D scenes for a storyboard using interfaces in his/her real environments. 2. 2009) Description Proposed tool is easy-touse. 1.2009) Adobe Illustrator is a vector graphics editor.8: Storyboard Authoring Tools Comparisons No. Microsoft Word is a word processor designed by Microsoft.A Storyboard System To Facilitate Tasks In E-Learning 2. 3. Functions Using an AR Storyboard.

1 Raptivity The white paper (Raptivity Software Makes Interactive Learning Easy. It enables trainers. Figure 2. This e-learning storyboard does not contain the communication issues.2: Comparison Chart Figure 2. Raptivity is at the forefront of rapid interactivity technology.3: Flip Book (before open) 37 . educators and subject matter experts to create instructionally sound. customized and trackable Adobe Flash interactions quickly and easily without Flash programming.8 Different Types of Storyboard Tools Siti Hasmah Digital Library 2. Below are the screen shot in raptivity for the only e-learning storyboards that serve the interactivity purpose. 2008) stated that Raptivity is a scalable and extremely affordable tool that makes learning both challenging and enjoyable.A Storyboard System To Facilitate Tasks In E-Learning 2. With its patent-pending technology and open architecture.8.

Gagne‟s Nine Events. a product web site. games. saving the time and effort required for communication. 200 simulations and numerous other interaction models.5: Radial Diagrams 2.8. Table 2. Raptivity maps the available interactions to a variety of instructional design Numerous methodologies. such as a PowerPoint presentation. and other functions. and reuse it elsewhere. an online meeting or a help file. making program changes. options such as Bloom‟s Taxonomy.1. and map Raptivity interactions to each step in the methodology. and Keller‟s ARCS Model. Designers can select the learning theory they have been using. 2008) provides the features that help making Raptivity an indispensable tool for courseware developer.1 Advantages of Raptivity (Raptivity Software Makes Interactive Learning Easy. they can employ MyRaptivity to create variations of those interactions capabilities and also can leverage the Raptivity user base within their organizations. fixing bugs. After they have developed interaction logic using expands Flash. MyRaptivity Developers can create their own interaction models with a unique and simple new tool call MyRaptivity.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 2.9: Advantages of Raptivity Advantages Easily used with other tools Description The interactivity created using Raptivity can easily be embedded into eLearning content through favored authoring tools. available It also allows course creators to fashion their own instructional design methodology. Course creators can also take an interaction created or customized using Raptivity. Each can be customized by interactions users to create an unlimited number of variations. videos.4: Flip Book (during open) Figure 2. They include 3D. 38 . far more than other tools. More than Raptivity provides a pre-built library of 200-plus rapidly-customizable interaction models.

and entertaining multimedia application. Figure 2. 39 . It is only provide the flash file output.8. our tool facilitates the creation of a more effective. Figure 2.1.8.  The cross-platform use of Raptivity does cause some portability problem.6.A Storyboard System To Facilitate Tasks In E-Learning 2.2 DEMAIS Bailey et al. Below are the congruent or disadvantages of it:  Raptivity does not offer a print out records to users.7 and Figure 2. facilitating experience-based exploration (exploring an idea through a working example). By operationalizing this vocabulary. interactive multimedia storyboard tool that uses a designer‟s ink strokes and textual annotations as an input design vocabulary. By enabling a designer to explore and communicate behavioral design ideas using working examples early in the design process. the tool transforms an otherwise static sketch into a working example. The behavioral sketch can be quickly edited using gestures and an expressive visual language. (2005) of systematic Instructional Design. (2001) state that DEMAIS is a sketch-based.8 show the screenshots from the DEMAIS (Designing Multimedia Applications with Interactive Storyboards). 2. compelling.2 Disadvantages of Raptivity Siti Hasmah Digital Library Raptivity does not congruent with the Smith and Ragan.

7: The narration (voice script) editor.6: The DEMAIS Storyboard Editor Figure 2.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 2. Figure 2.8: The Content Manager 40 .

A designer can always use the stylus to scribble written notes. By adjusting layers. strokes between objects in the storyboard or multiview editor.2.8. then so are all the ink strokes and text objects contained within it. Visual Language Icons.  It does not check for consistency among behavior definitions. The multi-view editor enables a designer to Narration Editors simultaneously view multiple storyboards and narrations and sketch behavior among them.2 Disadvantages of DEMAIS According to Bailey et al. possibly causing unwanted results when that behavior is operationalized. and recognized objects and text that have a display action attached to them. To explore behavioral design ideas. Operationalizing A designer aperationalizes a design by selecting the play button. The disadvantages of DEMAIS are as follows:  A designer must enter interpretable text onto a storyboard canvas using the keyboard as opposed the stylus.10: Advantages of DEMAIS Features Description Designing Content: The In DEMAIS. (2001).1 Advantages of DEMAIS Siti Hasmah Digital Library Based on Bailey et al. the system on displays the behavioral ink strokes and icons. causing them to behave as a group. annotations.A Storyboard System To Facilitate Tasks In E-Learning 2. When Content and Behavior a design is operationalized. If a recognized object is to be undisplayed.2. edits the Annotations. or enters Multi-View Editor textual annotations in the storyboard editor. there are a few disadvantages of DEMAIS.8.  Although DEMAIS does support layers internally. but these notes cannot be interpreted by the system. and the visual language icons attached to a behavioral ink stroke. a designer can manipulate the overlap among sketched content. a designer sketches behavioral ink Behavioral Ink Strokes. (2001). Table 2. below are the advantages of DEMAIS. 2. a designer designs content using the storyboard and Storyboard and narration editors. 41 . it does not yet provide a designer with a mechanism for adjusting the layer in which sketched content is drawn.

A "visualiser" program lets you view images in sequence. Figure 2.7. primarily of interest to film directors.4 Siti Hasmah Digital Library Storyboard Tools 1. In addition.9 shows the screenshot for the storyboard tools 1. a web page can be generated from the project at the click of a button. Once a project is complete this text can be used to automatically generate tables of information which may use when filming.4 2.4.7.3 Storyboard Tools 1.4.4 is an organizational tool. and play around with a number of editing effects including fades and dissolves.11: Advantages of Storyboard Tools 1.4 (Storyboard Tools 1. storyboard artists and film-makers generally.7.8. Figure 2.4.A Storyboard System To Facilitate Tasks In E-Learning 2.7.4 Table 2.7.7. 2009). Storyboard Tools has its own drawing tool with specialized features for storyboarding. 2009) Features Text Description Storyboard Tools stores text along with the images.8.3. Web page Drawing tool 42 .9: Screenshot for the Storyboard Tools 1. Images from various sources may be used to build up an entire storyboard project on the computer screen which may then be printed in a form portable enough to be taken on set (Storyboard Tools 1.7.7.1 Advantages of Storyboard Tools 1.

91 tool 43 .4 Siti Hasmah Digital Library Disadvantages of the Storyboard Tools 1. This buttons sometimes make a confusing to the users 2.A Storyboard System To Facilitate Tasks In E-Learning 2.91 is a fast.8. video.2 Disadvantages of Storyboard Tools 1.4 is as follows:  Storyboard Tools is just for film-makers.4 Springboard 0.10: Screenshot for the Springboard 0.91 Springboard 0.91 tool. or other dynamic media (Storyboard 0. 2009). light.8. directors & storyboard artists who want to storyboard a movie on a personal computer only  The interface of these tools provides so many buttons.10 shows the screenshot for Springboard 0. animation. Figure 2.91.7. easy-to-use Windows application for easily and quickly sketching and annotating your storyboard ideas for film. Figure 2.3.7.

draw the storyboards with both tools Import or copy and paste text and graphics from other applications Add annotation layers to show camera moves. and quickly create wireframe of your application.  Some features in springboard 0.2 Disadvantages of Springboard 0.8.12: Advantages of Springboard 0. 2009) Features Natural-media and vector tools Text and graphics Layers Multi-layer model Description This tools will help in outline the story to organize the work. With MockupScreens you can experiment interactively with your clients.91(Storyboard 0.8.91.02. while the coding hasn't even started yet. MockupScreens main design goals are ease of use and productivity (MockupScreens.11 shows the screenshot of MockupScreens 4. and easily edit graphics.91 are unavailable 2. 2009). Figure 2.02 helps you to sketch screen mockups of your application and organize them in scenarios. The disadvantages are as follows:  Users had trouble creating navigational links between pages that they had initially drawn far apart on the canvas. 44 .1 Advantages of Springboard 0.8. special effects Use a multi-layer model to productively reuse content.02 MockupScreens 4.4.91 also have a disadvantages.91 Siti Hasmah Digital Library Table 2.4.91 Same as other storyboard tools.A Storyboard System To Facilitate Tasks In E-Learning 2. this Springboard 0. 2.5 MockupScreens 4.

MockupScreen 4. (MockupScreens.5. 2009) Advantages Easy to use Clickable prototype Description MockupScreens is very easy to use. and quickly create wireframe of your application. Below listed the disadvantages of this MockupScreen 4. You need no documentation whatsoever to prepare your first design. A nice feature.02:  Because of the experiment interactively.11: Screenshot for the MockupScreens 4.13: Advantages of MockupScreens 4. Experiment interactively 2. 45 .02 Besides advantages. is users can create a usage flow of application they design mapping buttons on one screen with another.8.2 Disadvantages of MockupScreen 4. clients will expect that the application is totally finished  The buttons on the MockupScreen tools are not organized in the sequence order. while the coding hasn't even started yet.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 2.02 tool 2.1 Advantages of MockupScreen 4. This way creating a clickable GUI prototype is very easy. especially for presentations.5. With MockupScreens you can experiment interactively with your clients.02 Table 2.02 also comes with the disadvantages.02.8.

(2001).6. Table 2.12: Screenshot for the DENIM 2. (2001). and interact with them in a run mode. and interaction design. Figure 2.12 shows the screenshot for DENIM. navigation. create links among them.1 Advantages of DENIM Based on Lin et al.8. view them at different levels of detail. DENIM is a system to assist designers of web sites in the early stages of information.8. It is an informal pen-based system that allows designers to quickly sketch web pages.14 is the advantages that listed by Lin and his friends: 46 .A Storyboard System To Facilitate Tasks In E-Learning 2. DENIM was designed and implemented a prototyping tool to assist designers in the early stages of website design.6 DENIM Siti Hasmah Digital Library According to Lin et al. Figure 2.

The disadvantages are as follows:  DENIM is intended for prototyping in the early stages of design. the user either drags the slider's elevator or clicks directly on one of the icons. 2.A Storyboard System To Facilitate Tasks In E-Learning Table 2. so that they are always readable.6.2 Disadvantages of DENIM Lin et al.  DENIM does not attempt to recognize most of what users write or sketch. but does not want to fill in the details at this time.14: Advantages of DENIM Siti Hasmah Digital Library Advantages Creating And Editing Pages Zooming Arrows Run Mode Description In DENIM. Navigational links are links in the HTML sense: they represent the reference from an item on one page to another page.  Users had trouble creating navigational links between pages that they had initially drawn far apart on the canvas. and lines drawn between two pages that are treated as links between those pages. The exceptions are the small set of gestures. To change the zoom level. it does not output finished HTML pages.  47 . web pages are accompanied by a label that represents the name or description of the page. The center point for a zoom operation can be set by tapping on the background of the canvas. but not for the creation of finished websites. We provide navigational and organizational links. With Run mode.8. An arrow between two pages represents a relationship between those pages. designers can test the interaction with a site that they are designing without having to create a full-fledged prototype. Organizational links are used to represent a conceptual link between two pages. Changing the zoom level initiates an animated transition from the current zoom level to the desired zoom level. The labels remain the same size throughout all the zoom levels. (2001) also list down the disadvantages of the DENIM tool. For example. that is. the designer eventually wants to make a navigational link from one page to another. words written directly on the canvas in site map view that are interpreted as new page labels.

8. such as sketches.13 shows the screenshots for Anecdote tool. Figure 2.7 Anecdote Siti Hasmah Digital Library Harada et al. and helps them to create the final application seamlessly from the prototype scenario. to represent the content of the media data to be created. Figure 2. Anecdote employs the concept of surrogate media.A Storyboard System To Facilitate Tasks In E-Learning 2. It can be used to simulate the execution of the scenario and can serve as the specification of the media data to be created. Surrogate media is a type of media. (1996) have developed an authoring system called Anecdote in order to support the early-design phase as well as the whole development process of multimedia applications. Anecdote allows authors to edit the different aspects of the scenario using multiple editing views.13: Screenshot for the Anecdote tool 48 .

Each scene represents a state of scenario execution and is defined as a set of slots. Editing views The Anecdote Storyboarding System provides five editing views. 2.1 Advantages of Anecdote Siti Hasmah Digital Library Harada et al. namely the Scene View. the application is constructed as a hierarchy of scenes. An object called group scene can be used to modularize the lower levels of scenes and other group scenes.15: Advantages of Anecdote Advantages Scenario structure Description With Anecdote. From within any of the views. authors can choose “Play” menu to execute the scenario being edited.  Rigid input format and lack of scenario structuring support  Lack of early-stage feedback to meet size limitations 49 . Authoring process with Authors can create a slot. or cast members.A Storyboard System To Facilitate Tasks In E-Learning 2. to be presented. Timeline View. and then draw sketches and type text Anecdote annotations in order to describe the contents of the cast member.8. (1996) list down advantages of Anecdote as follows: Table 2. Link View.2 Disadvantages of Anecdote Harada et al.7. Outline View and Cast View. (1996) list down the disadvantages of Anecdote are as below:  Problems of current authoring design process.8.7. which are the place-holders for the media data.

50 .” The authors‟ have proposed a modeling concept for didactic knowledge that content storyboards.A Storyboard System To Facilitate Tasks In E-Learning 2. Didactic design becomes explicit an issue of quality assurance in e-learning. Jantke et. Currently. Flechsig (1996) has been described didactic design as the anticipation of those communication processes and storyboards may provide the expressive power suitable to the design and implementation of learning processes. In addition. al ( 2005 ) has been published an article of “Didactic design through storyboarding: standard concepts for standard tools. According to (Ballstaedt. 1997) didactic design encompasses the development of learning environments from conception to evaluation. the authors‟ suggested a standard tool to develop and process such models which is Visio. e-learning systems as well as learning environments are still suffering from a lack of explicit and adaptable didactic design.9 Didactic design in Storyboard Siti Hasmah Digital Library K.-H.

4 Text Web page Springboard MockupScreens 0.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 2. advantages and disadvantages among Storyboard Tools discussed in the literatures.16: Comparisons among Storyboard Tools Raptivity Easily used with other tools More than 200 interactions Numerous options available Expands capabilities Can easily be embedded into eLearning content Provides a prebuilt library of 200 DEMAIS Designing Content Exploring Behavior Operationalizing Content and Behavior Designs content using the storyboard and narration editors Enables a designer to view multiple storyboards. Table 2. Web page can be generated from the project Has its own drawing tool with specialized features Authoring process with Anecdote An application as a hierarchy of scenes Advantages Maps the available interactions to a variety of ID methodologies An arrow between two pages represents a relationship The Anecdote Storyboarding System provides five editing views Authors can create a slot.91 4.16 will analyze and compare the features. copy.10 Data Analysis Table 2. draw sketches and type text annotations 51 . Import.02 Naturalmedia Easy to use vector tools Text and Clickable graphics prototype Layers Experiment interactively Multi-layer model Help in Need no outline the documentation at story first design.7. and create wireframe of the application DENIM Creating and Editing Pages Zooming Arrows Run Mode Web pages has a label that represents the name page Changing the zoom level Anecdote Scenario structure Editing views Features Drawing tool Stores text along with the images. sketch and narrations A designer sketches behavioral ink strokes between objects or multiview editor Storyboard Tools 1. paste text and graphics from other applications Add layers to show camera moves and special effect Users can create a usage flow of application on one screen with another Can experiment interactively with clients.

clients will expect that the application is totally finished The buttons on the MockupScreen tools are not organized in the sequence order Designers can test the interaction with a site without having to create a fullfledged prototype Intended for prototyping in the early stages.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Can create their own interaction models with a unique and simple new tool call MyRaptivity A designer aperationalizes a design by selecting the play button Disadvantages Does not offer a print out records to users. It is only provide the flash file output The crossplatform use of Raptivity does cause some portability problem A designer can use the stylus to scribble written notes.91 are unavailable Because of the experiment interactively. but these notes cannot be interpreted by the system. not for the creation of finished websites Does not recognize most of what users write or sketch Problems of current authoring design process Users had trouble creating navigational links between pages Rigid input format and lack of scenario structuring support Lack of earlystage feedback to meet size limitations 52 . possibly causing unwanted results It does not provide a designer with a mechanism for adjusting the layer in which sketched content is drawn Just for filmmakers. It does not check for consistency among behavior definitions. and easily edit graphics Users had trouble creating navigational links between pages Some features in springboard 0. directors & storyboard artists So many buttons not in sequence manner and make a confusing to the users Use a multilayer model to productively reuse content.

Mostly the systems that have been compared are having a difference in kind of features.A Storyboard System To Facilitate Tasks In E-Learning 2. 53 . advantages and disadvantages. more features can be added to the storyboard system in order to make it more efficient. Based on this comparison and literature review. flexible and easy to use.11 Conclusion Siti Hasmah Digital Library This chapter is basically done to compare and see the previous system with the storyboard system which is the current system that has to build.

2 Interview 3.1 Introduction This chapter describes the research methodology used in detail. As the main objective of the research project is to determine whether the storyboard system could be used to expedite storyboard content in E-learning. The research for this research project is divided into two parts. Research Methodology and Requirements Gathering 3.A Storyboard System To Facilitate Tasks In E-Learning 3. That venue was chosen at the request of the IDs as most of their materials and documentations are kept at their office.1 Introduction Interview is used as the main instrument in researching this research project. Interview is also an excellent method to obtain tacit information. the first part involves one to one evaluation which is interview and the second part is distributed questionnaires to gather data from the participants in Multimedia Production Unit (MPU). It is a direct way of getting the required information and interviewees could be probe further into giving out details.2. sincere opinions and point of views in an impulsive and immediate manner.2.2 Background of the interview The interviews were conducted at ID‟s work premise. 54 . On top of that the researcher was also able to take advantage to conduct minor first hand observation into the working process of conducting storyboards. Siti Hasmah Digital Library 3. 3.

academic qualifications and professional resume.4 55 . The questions here were designed to get an understanding on how the organization manages the collaboration effort between all parties that are involved in content storyboard.A Storyboard System To Facilitate Tasks In E-Learning 3.2. The criteria of the background such as years of experience.2. 3. The interview question can be seen at appendix. Instructional Designer‟s background.3 Interview Objectives Siti Hasmah Digital Library The objectives of the interview were as follows:  To validate the findings from the literature review based on the ID‟s professional experience   To get insight on the storyboarding template To validate the analysis documents Interview questions organization The interview questions were divided into three sections. storyboarding process in e-learning and collaboration procedures. The first section (Instructional Designer‟s background) looked into the background of the interviewee and was meant to establish the interviewee credibility as an ID. The final section is on collaboration procedures. The second section (storyboarding process in e-learning) tried to get an in depth understanding of the organization‟s working process in creating the content of the storyboard.

This also means that the interviewee has the necessary theoretical foundation on education learning theories. With experience come wisdom and the amount of years that has been put in by the interviewee show that she is very well versed in the subject of instructional design. Question 3: How many instructional design project have you successfully commissioned? The interviewee has successfully commissioned more than 6 projects for various industries such as government departments. Rahman Position: Instructional Designer Company /Cost center: Multimedia Production Unit Question 1: How many years of experience do you have as an ID? From the interview conducted. institutions of higher learning and corporate banking as well.5 Interview findings on Section A (Instructional Designer’s background) Siti Hasmah Digital Library Name: Melor A. it was found that the IDs have 5 years of professional experience in the field of instructional design. Question 2: What qualifications do you posses to quantify you as a credible ID? The interviewee holds a BMM Multimedia Innovation and attended workshop for Instructional Design Theory and Practical.A Storyboard System To Facilitate Tasks In E-Learning 3.2. This proves that the interviewee has both 56 .

Being able to conduct training means that the IDs are able to transfer their knowledge onto others and this capability is particularly useful as it shows that the interviewee will be able to pass on their knowledge onto this research. 57 .1 shows the storyboard template from the interviewee.A Storyboard System To Facilitate Tasks In E-Learning the theoretical and the practical knowledge on applying the instructional design Siti Hasmah Digital Library knowledge. Question 2: How does your storyboard template look like? Storyboard template is design to suit the organization needs. Question 4: Have you conducted any training on Instructional Design? The interviewee also often conducts instructional design workshops. Therefore. Figure 3. the interviewee belonged to an organization that has proper development process in place. guidelines in content creation have also been established within the organization and put in place to ensure speedy development process and minimize faulty output. 3.6 Interview findings on Section B (storyboarding process in e-learning) Question 1: Does your organization have a clear guideline on content writing? Like most established firms dealing with e-learning content development.2.

The storyboard contents audio/voice over column. 58 . The training includes the storyboard format so that they become familiar with the content structure.1: Components of storyboard Question 3: What is the organization of your storyboard like? Do you adopt the LO/SCO approach? Each storyboard produced usually represents one Sharable Content Object (SCO). Question 4: Are your implementation team able to understand the storyboard in order to develop the multimedia content? Most of the team members have undergone orientation or hands-on training in the organization content development process. screen area (for the content) and instruction for the developers.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 3. SCO titles and number also includes in the storyboard.

Behaviorism learning approach may have different template from constructivism approach. Question 7: Even after you have been doing ID for years. The interviewee need 59 .A Storyboard System To Facilitate Tasks In E-Learning Question 5: What tools do you normally use to create content storyboard? Do Siti Hasmah Digital Library find these tools to be practical? Simple and easy that only uses words or power point. Ex. It‟s easy for the SME that requires minimal computer skills to do it. Question 6: Could you recommend the storyboard template design for the application? No specific template to recommend but a storyboard template must have a flexibility that can amend according to their needs and to suit the learning theory used for that particular courseware. Discussion with SME is important to make sure learning process take place with the assistance of animation and audio. All multimedia inserted must serve the purpose. The SME will provide the content and materials then ID will assist to make the interactivity and insert multimedia elements in the storyboard before the ID pass the storyboards to the developers. do you agree that once in a while Storyboard Designer (SME) do need to be reminded on how to write content? The interviewee had adequate practice in writing content to the extent that the process has become a natural process in the work.

7 Interview findings on Section C (collaboration procedures) Question 1: How people are usually involved in the storyboarding process? There are only ID and SME that are currently active that will involved in content storyboarding. Question2: What are exact roles of the people who involved in the storyboarding process? All of the storyboard team members have their own roles in develop the storyboard content. 60 . there are certain of team members not able to come during the meetings due to a clash of timing between team members. Otherwise the rest of the team member only gets hold the storyboard when it is deemed ready for the production. Meetings and ad-hoc discussions are the methods of getting all the team members to get together and discuss certain raising issues. Question 3: How do you manage the collaboration effort between all the parties? Collaborating between all parties involved in the development of storyboard is not easy. However. animators and programmers are usually called for opinions and consultation only when they feel the need arise.A Storyboard System To Facilitate Tasks In E-Learning reminders on how to write unless the interviewee is taken out of the job scope for Siti Hasmah Digital Library a long period of time. The other team members such as graphic designers. 3.2.

A Storyboard System To Facilitate Tasks In E-Learning

Matters are worse should external parties are involved in the content

Siti Hasmah Digital Library

project. Projects are often delayed or stretched because of the inability to conduct meetings due to differences in work schedule. Question 4: How would you recommend the collaboration platform be designed? A suggestion was made for the platform to be similar to the online forum concept. This way team members express their views and have their comments documented on the platform without having to wait to the others to be present at the same time. Question 5: Do you agree that dealing with clients or SME is one of the most challenging tasks of an ID? A resounding „yes‟ was the response given by the interviewee. Question 6: Do the SME understand the instruction? A resounding „yes‟ was the response given by the interviewee. Question 7: Do SME know what to do during the practice and tests? Not involve with the practice and test. Question 8: Can SME interpret graphics in the text? A resounding „no‟ was the response given by the interviewee.

61

A Storyboard System To Facilitate Tasks In E-Learning

Question 9: Can the SME read all of the textual materials (i.e. the Storyboard

Siti Hasmah Digital Library

Manuals)? A resounding „yes‟ was the response given by the interviewee. Question 10: Do SME, Reviewer and Proof Reader aware of the datelines of the Storyboard contents? The ID will always be their reminder to aware of the datelines in the storyboard contents. 3.2.8 Summarization of Interview Findings Data collected from the interviews showed a correlation with the findings from the literature review. Therefore the data that were used to construct the system requirements can be assumed as correct and fits the end user requirements.

62

A Storyboard System To Facilitate Tasks In E-Learning

3.3 Questionnaires

Siti Hasmah Digital Library

3.3.1

Instrumentation To gauge the applications of De-Elss, a set of questionnaire has been distributed

to a group of ID, Graphic Designer and Multimedia Programmer at Multimedia Production Unit (MPU) which consists of 9 people, which located at FCM building of MMU. To document their views, a quantitative approach was used. Questionnaire was the chosen instrument for data collection and SPSS was used to analyze the collected data. 3.3.2 Background of ID’s group The ID, Graphic Designer and Multimedia Programmer who participates in this project were of a professional background and from degree and diploma graduated. The groups were selected to improve the application of De-Elss system on storyboard development process for effective use in e-learning. 3.3.3 Questionnaires Objectives

The objectives of the survey were as follows:  To determine if the application was useful in helping IDs to monitor storyboard development process.  To determine if the De-Elss system could help the turnaround time to generate content storyboard.  To get opinion on how to enhance the application for better use in E-learning.
63

This part also contains their experiences in e-learning. The first section (Participant‟s Background) was intended to get an idea of the participant‟s background with regards to their knowledge in E-learning and their IT Proficiency level. The questions were categorized into 4 sub-sections.  Application functionality Questions were designed to capture the participant‟s level of comfort or the participant‟s experience with the application. Answers are based on a five point likert scales where 1 denotes strongly „disagree‟ and 5 denotes a strongly „Agree‟.  Opinion Opinion is intended in this questionnaire to obtain opinion from the participant‟s regarding the future storyboard system.A Storyboard System To Facilitate Tasks In E-Learning 3. Answers are based on a five point likert scales where 1 denotes strongly „disagree‟ and 5 denotes a strongly „Agree‟. 64 . Answers are based on a five point likert scales where 1 denotes strongly „disagree‟ and 5 denotes a strongly „Agree‟. The second section (Assessment on Application Usage) is aimed to get the participant‟s opinion on the application of storyboard in e-learning.  Collaboration Questions were design in these questionnaires to gauge the usefulness of the collaboration platform provided by the application.4 Questionnaires Organization Siti Hasmah Digital Library The survey questionnaires have been divided into two sections.3. Participants Background and Assessment on application usage.

4. 3. there are nine participants that participate in this questionnaire. The questionnaires can be seen in the appendix. The following results of the questionnaires findings will be discussed below: 3. From this figure.2: Total Questionnaire Participants Figure 3. only one is Instructional Designer.4 Data Analysis The results of the questionnaires will answer the research question in Chapter 1 and to determine the research objective that has been met.1 Total Questionnaires Participants Figure 3.2 above show the total number of the participants from Multimedia Production Unit (MPU).A Storyboard System To Facilitate Tasks In E-Learning  Open ended question Siti Hasmah Digital Library The questionnaires are aimed to get feedback and comments from participant‟s regarding the application and how to improve the application‟s functionality and usability. In total. 65 . The rest are made up of seven participants from Graphic Designers and one from the multimedia programmer.

A Storyboard System To Facilitate Tasks In E-Learning 3.2 Participant’s Background Siti Hasmah Digital Library From this result. Figure 3.3: How many years of experience do you have in relation to the job scope stated above? Out of the nine participants.5 experiences and other two persons have more than 10 years. Two persons are from degree level and the rest are from diploma level.4. only one person obtain none education level. shows that most of the participants have 5 to 10 years experiences followed by two persons have 2 .4: What is your highest tertiary education level? 66 . Figure 3.

67 . Frequency Valid 5-10 years > 10 years Total 3 6 9 Percent 33.7 100. This shows that participants should have no problems in operating the computer. With that kind experience explore to the internet.A Storyboard System To Facilitate Tasks In E-Learning In terms of IT Proficiency level. 55. Table 3. almost all of the participants have been using Siti Hasmah Digital Library the computer for more than 10 years.4 100. The rest of participants had more than 10 year‟s experiences using the computer.7 100.6% had 5 to 10 years experience surfing the World Wide Web while the other had more than 10 years worth. all the participants were assumed to be professional with through navigating the internet by using a typical web browser.3 100. (See table 3.6 44.3 66.0 Cumulative Percent 55.0 33.1 and 3.0 Cumulative Percent 33.6 44.3% of the participants had been using the computer for 5 to10 years.2) Table 3.2: Participant‟s number of years surfing the internet.0 Valid Percent 55. and has been surfing the World Wide Web for more than 5 years.0 Valid Percent 33.4 100.6 100.3 66.1: Participant‟s number of years using the computer. Frequency Valid 5-10 years > 10 years Total 5 4 9 Percent 55.0 Out of the 9 participants.

3 shows that most of the participants are strongly agree with the application that makes communication easier between team members. The application makes it easier to facilitate communication between team members.4. Only 11.0 Cumulative Percent 11.2 55. Table 3.4 100. a huge majority of the participants understand the content of the storyboard that has developed by SME.1 33. 68 .3 Application Functionality Siti Hasmah Digital Library The results below show that on how participants answer the likert scales of application functionality.A Storyboard System To Facilitate Tasks In E-Learning 3. Only 1 person shows strongly disagree and agree in understanding the content of the storyboard.1 11.3 44.4.1 33.1 22.3 44. Based on the statistics in table 3.3: The participants feedback on communication between team members.4 100.0 Valid Percent 11.1% of the participants show that strongly disagree and disagree. Frequency Valid strongly disagree disagree average strongly agree Total 1 1 3 4 9 Percent 11.6 100.1 11.0 The results in table 3.

1 11.2 55.2 55.3 88. Table 3.5.A Storyboard System To Facilitate Tasks In E-Learning Table 3. as shown in table 3.1 22.6 11. The format used in the word/ power point output is easily understandable by the multimedia development team. However.1 22.2 77. 55.4: Participants feedback on content of the storyboard.6 22.9 100. Siti Hasmah Digital Library Do you understand the content of the storyboard that has developed by SME? Frequency Valid strongly disagree disagree average agree Total 1 1 5 2 9 Percent 11.0 Cumulative Percent 11.0 Valid Percent 11.6% of the participants averaged followed by 22.2% of the participants agreed with the output produce in word/power point.0 69 .1 100.0 Cumulative Percent 11.1 11.1 22.0 The existing storyboard that has been used by the MPU unit comes out with word or power point output.1 55.8 100.5: Participant‟s feedback on output produces.1 33. The rest of the participants are strongly disagreed and disagreed.2 100.1 100.2 100.6 11. Frequency Valid disagree average agree strongly agree Total 1 2 5 1 9 Percent 11.6 22.1 55.0 Valid Percent 11.

1 100.1 11.1 11. Frequency Valid strongly disagree average agree strongly agree Total 1 1 6 1 9 Percent 11. Table 3.0 Cumulative Percent 11. 70 .7 11.2 88.1 66.1% in strongly disagreed averaged and strongly agreed.7 11. A majority of the participants found that the application does help them in e-learning with 66. The rest of the participant‟s show the same percentage with 11.6: Participant‟s feedback on content template storyboarding.7% of the participants agreed with SWF files are easy to Siti Hasmah Digital Library develop.A Storyboard System To Facilitate Tasks In E-Learning Table 3.1 100.7% participants agreed to this term while another 22.2% average to it.1 66.6 shows that 66.0 With Participants feedback on various components in table 3. The SWF file is easy to develop based on understanding of the storyboard template.0 Valid Percent 11.9 100.7. only 11.1% were unsure if the application had made them aware of intended in e-learning.1 22.

1 22.8: Participant‟s feedback on application ease of use.1 22.0 Valid Percent 11.0 The result in table 3.2 66.8 100.4 22. Siti Hasmah Digital Library Does the application make you aware of the various components of the intended Elearning? Frequency Valid strongly disagree average agree Total 1 2 6 9 Percent 11.2 100. do you think the application was easy to use? Frequency Valid strongly disagree average agree strongly agree Total 1 2 4 2 9 Percent 11.2 100.1 22.1 33. Only 1 person shows strongly disagree with the application.0 71 .7: Participant‟s feedback on various components. Overall.4 22.2 66.A Storyboard System To Facilitate Tasks In E-Learning Table 3.1 22.0 Valid Percent 11.0 Cumulative Percent 11.8 shows that most of the participants agreed with the application were easy to use in navigating through the content of storyboard in elearning.1 33.7 100.7 100. Table 3.3 77.2 44.2 44.3 100.0 Cumulative Percent 11.

7 100.3% of the participants agreed and strongly agreed.0 All of the participants were expected that SME will understand the instruction.1 33. The rest of the participants were strongly disagreeing and disagree with 11.9 shows that 33.1% disagree.1 11.1 33. Table 3. The following table 3.2 33. The table 3.9: Participant‟s feedback on dealing with clients or SME. this section will looks at the impact of the collaboration had on the participants.2% agreed and 11. In addition.4 Collaboration Siti Hasmah Digital Library The results in this section show the usefulness and the effectiveness of the collaboration.3 33.A Storyboard System To Facilitate Tasks In E-Learning 3. The main purpose of the application is to assists SMEs to develop content storyboard independently while being monitored by the IDs.3 100.1 11.3 66.1% of it.1 11. 72 . Do you agree that dealing with clients or SME is one of the most challenging tasks of an ID? Frequency Valid strongly disagree disagree average agree strongly agree Total 1 1 1 3 3 9 Percent 11.4.1 22.3 100.0 Cumulative Percent 11.0 Valid Percent 11.1 11.3 33.10 below shows that the majority of the participants averaged with it while the others obtain 22.

1 77.1 88.2 100. the table 3.11: Participant‟s feedback on practice and tests by SME.7 22.1 88. Siti Hasmah Digital Library Do the SME understand the instruction? Frequency Valid disagree average agree Total 1 6 2 9 Percent 11.9% participants averaged followed by 11. The rest of the participants with 22.1% strongly disagreed.0 Valid Percent 11.2% agreed and 11. Table 3.0 Valid Percent 11.1 100.A Storyboard System To Facilitate Tasks In E-Learning Table 3.0 Cumulative Percent 11. 73 .9 100.0 Table 3.0 Cumulative Percent 11.10: Participant‟s feedback on understanding of SME.11 shows that 88.1 66.2 100.9 100.7 22.0 In terms of the participants feedback on practice and test by SME.1% disagreed to this term as well.12 shows the majority of the participants averaged with the awareness of the dateline of the storyboard contents.8 100. Do the SME know what to do during the practice and tests? Frequency Valid disagree average Total 1 8 9 Percent 11.1 66.

2 100.2 100.2% is disagreed on this term as well. Other 22.A Storyboard System To Facilitate Tasks In E-Learning Table 3. Reviewer and Proof Reader aware of the dateline of the Storyboard contents? Frequency Valid strongly disagree average agree Total 1 6 2 9 Percent 11.5 Opinion In this section. 11.4% of the participants agreed that the application could reduce the storyboarding lifecycle.0 Cumulative Percent 11.7 22.0 3.8 100.0 Valid Percent 11. 74 . averaged and strongly agreed with it.12: Participant‟s feedback on dateline of the storyboard. Siti Hasmah Digital Library Do SME.4. Table 3.1 66.1 77.1% of the participants were strongly disagreed.7 22.1 66. opinion from the participants shows in the following table.13 shows 44.

75 .1 100. Other 11.1% of the participants gave strongly „disagreed‟ and „agreed‟ to this term as well.3% of the participants agreed as shown in the table 3. The same percentage of 22.1 22.9 100.2 11.0 When the participants were asked if they would consider using the application will be able to lower the cost of content production.2 11.13: Participant‟s feedback on production turnaround time.4 11.0 Valid Percent 11.4 11.14.0 Cumulative Percent 11.1% gave disagreed and averaged.A Storyboard System To Facilitate Tasks In E-Learning Table 3. 33.1 44. Siti Hasmah Digital Library Do you think using the application could reduce the amount of time it usually takes to produce content storyboards? Frequency Valid strongly disagree disagree average agree strongly agree Total 1 2 1 4 1 9 Percent 11.1 22.4 88.3 44.1 100.1 44.1 33.

15: Participant‟s feedback on using the application at work.3 22.2 22.9 100.3 11.3%) of the participants consider using this application in their professional work. Would you consider using this application in your professional work? Frequency Valid disagree average agree strongly agree Total 2 2 3 2 9 Percent 22.0 Valid Percent 22.15 below shows that a huge majority (33.0 Cumulative Percent 22.A Storyboard System To Facilitate Tasks In E-Learning Table 3.1 33.2 22.8 100. Table 3.0 Cumulative Percent 11.1 100.1 100.1 22.0 76 .1 22.2 100.3 11. The rest of the application shows the same percent with 22.3 22.0 Valid Percent 11.2 33.2% disagreed.3 55. averaged and strongly disagreed with it. Siti Hasmah Digital Library Do you think such an application will be able to lower the cost of content production? Frequency Valid strongly disagree disagree average agree strongly agree Total 1 2 2 3 1 9 Percent 11.2 22.6 88.2 33.14: Participant‟s feedback on production costs.2 22.0 Table 3.2 33.2 44.4 77.2 100.2 33.

5: Participant‟s overall rating of this application.2 33.3 44. only 1 participants rate the application is very bad.16 shows that 44.16: Participant‟s feedback on recommending the application Would you recommend this application to other organization? Frequency Valid disagree average strongly agree Total 2 3 4 9 Percent 22.0 Figure 3.2 33. 77 . Figure 3.4% of the participants strongly agreed with Siti Hasmah Digital Library recommending this application to other organization.3 44.0 Valid Percent 22. Out of 9 participants.A Storyboard System To Facilitate Tasks In E-Learning The table 3.2 55. This is another strong indication of the usefulness and effectiveness in helping participants to create storyboard in elearning.4 100. This shows that the participants were confidence with this application. The rest of the participant‟s rate moderate while 3 persons rate good.0 Cumulative Percent 22.6 100.4 100. Table 3.5 above show the overall participant‟s rate this application.

Comments are important in the questionnaire to get a general feedback and reaction from the participants towards the application. After analyzing the questionnaires. 1. the following recommendation given by the participants were thought to help the application functionality and usability further. The date for dateline should include in the application.A Storyboard System To Facilitate Tasks In E-Learning 3. One recommendation given was for the application to provide a sharing system to share documents amongst each other. However. 3. there are no comments by the participants. The participants are also asked to give comments on the application. 2. 78 .6 Open ended Question Siti Hasmah Digital Library This open ended question allows the participants to give feedback on recommendation and comments on this application.4. The application should offer diagram to suit the learning concept.

The ID will be able to monitor SME effectively. The application does help the storyboarding life cycle in e-learning. 5. Application need to have sharing system to share documents amongst each other.A Storyboard System To Facilitate Tasks In E-Learning 3. The application could reduce the turnaround time of the storyboard development process.5 Summary of Findings Siti Hasmah Digital Library The results of findings could be summarized as follows: 1. 3. 6. 7. 4. 79 . The application can be use professionally at work and many would recommend the application to other organizations. The application helps to facilitate communication between team members. 2. The application was easy to use.

A storyboard system is a storyboard tools that help ID to edit and do the sketches for e-learning by using this tools in order to fulfill the SME requirements. This storyboard system has to be reliable.A Storyboard System To Facilitate Tasks In E-Learning 4. delivering. maintaining. planning. testing. Developer team will be responsible for the development of the system which includes requirement gathering from all parties. integrating.1 Executive Summary This project is pleased to develop a storyboard system for enhancing learning task in e-learning. implementing. scaleable. Such advantages are possible as the system will demonstrate the following features:       Short learning curve for users Reliable and efficient system Scalable and portable system Robust functionality Ease of maintenance On-time and on-budget implementation Siti Hasmah Digital Library 80 . managing. System Architecture 4. efficient and easy to use. as well as providing consultation for the system. designing.

They also can view storyboard and give a feedback or comment to Instructional Designer and SME to edit back the contents.A Storyboard System To Facilitate Tasks In E-Learning 4. Task of the proof read is to do a checking for all the system and then give a comment about all the flow and contents of the system. “ID”. “Reviewer” and “Proof Read”.2 System Analysis Siti Hasmah Digital Library 4. Reviewer and Proof Read in doing their tasks for e-learning. Four roles exist in the system. 81 . Besides that. create storyboard content and participate in comment between SME. ID. The SME is able to give the material of the subject to the ID.2. Reviewer and Proof Read and also re-arrange the storyboard content. Reviewer and Proof Read. The last roles exist in this storyboard system is Proof Read. participate in comment between ID. The ID is able to initiate storyboard content.1 Requirement Specification A storyboard system for enhancing learning task in e-learning has the capability in helping SME. The Reviewer also known as Expert than Expert or moderator can use this storyboard tools in order to test it. ID. they also able to create storyboard content. The tasks are classified into roles which the user is being assigned to. They are “SME”.

Below are the use cases for storyboard tools. 82 . What ID can do to the system is login into the system. review analysis documents. submit reminder.1: Use case for Instructional Designer (ID) This diagram shows the behavior or functionality of a system which is consists of a set of possible sequences of interactions between a system and an ID in a particular environment that is related to a particular goal. Figure 4. clarify.A Storyboard System To Facilitate Tasks In E-Learning 4. The use case technique is used to capture a system's behavioral requirements by detailing scenario-driven threads through the functional requirements. edit profile. and organize system requirements. and add comments and logout from the system.1 Use Case A use case is a methodology used in system design to identify. review storyboard. change password.3.3 System Design Siti Hasmah Digital Library 4.

create analysis documents.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 4.2: Use case for Subject Matter Expert (SME) This diagram shows the behavior or functionality of a system which is consists of a set of possible sequences of interactions between a system and Subject Matter Experts in a particular environment that is related to a particular goal. edit profile. What Subject Matter Experts can do to the system is login into the system. and add comments and logout from the system. change the password. Figure 4. create storyboard.3: Use case for Reviewer 83 .

What Reviewer can do to the system is login into the system.A Storyboard System To Facilitate Tasks In E-Learning This diagram shows the behavior or functionality of a system which is consists of Siti Hasmah Digital Library a set of possible sequences of interactions between a system and Reviewer in a particular environment that is related to a particular goal. 84 . edit profile. edit profile. change password. view storyboard. view analysis documents.4: Use case for Proof Read This diagram shows the behavior or functionality of a system which is consists of a set of possible sequences of interactions between a system and Proof Read in a particular environment that is related to a particular goal. view storyboard. Figure 4. change password. and add comments and logout from the system. and add comments and logout from the system. What Proof Read can do to the system is login into the system. view analysis documents.

85 . add users.5 shows the behavior or functionality of a system which is consists of a set of possible sequences of interactions between a system and Administrator in a particular environment that is related to a particular goal. What Administrator can do to the system is login into the system. view users. delete users and logout.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 4.5: Use case for Administrator Figure 4.

3.6: Activity Diagram for a Storyboard System (modified Standard Operating Procedure (SOP) for IBDP Content Development) 86 .2 Activity Diagram for a Storyboard System Figure 4.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 4.

3.3 Analytical Model (Class Diagram) Siti Hasmah Digital Library Figure 4.A Storyboard System To Facilitate Tasks In E-Learning 4.7: Class Diagram for a Storyboard System 87 .

add user. Reviewer. and add comments and logout.4 Analytical Model Explanation Siti Hasmah Digital Library This storyboard system consists of five classes namely Instructional Designer. view storyboard. edit profile. The Review class represents five functions which is login. view analysis document. The SME class deals with instructional designer where they have to work together to complete the process of system architecture. The main class of this system is the Instructional Designer class which is focus on doing more tasks than others. and add comments and logout. The Proof Read class provides a login. delete user. and add comments and logout. edit profile. edit profile. change password. The ID class represents eight functions. The Administrator class handles all actions or tasks performed by administrator itself. The review class will deal with proof read class. view user. view analysis document. submit reminder. change password. and logout. review storyboard. change password. 88 . The actions include login. review analysis document. Each SME have to login. view storyboard. and add comment and logout.A Storyboard System To Facilitate Tasks In E-Learning 4. edit profile. Subject Matter Expert.3. The functions of this class were login. create storyboard. create analysis document. change password. Proof Read and Administrator.

A Storyboard System To Facilitate Tasks In E-Learning 4.5 Design Model : Sequence Diagram Siti Hasmah Digital Library Figure 4.8: Sequence Diagram for a Storyboard System 89 .3.

create storyboard and add comments before they logout. Reviewer then can view analysis document. Firstly the users has to login into the system after the admin register their username and password. create an analysis documents. submit reminder and add comments. review storyboard. view storyboard and add comments. Instructional Designer then tries to review analysis document that had been done by the SME.3. view analysis. change password. Subject Matter Expert then can edit their profile.6 Design Model Explanation Siti Hasmah Digital Library The sequence diagram shows the interactions among the various classes in the storyboard system. view storyboard and add comments. Proof Read then can edit profile. They also can edit profile. 90 . change their password. change password.A Storyboard System To Facilitate Tasks In E-Learning 4.

A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 4.3.9: System Architecture for Storyboard System 91 .7 System Architecture for a Storyboard System Figure 4.

8 System Architecture Explanation Siti Hasmah Digital Library The diagram above (figure 4. Subject Matter Experts The SME are able to transcribe their tacit knowledge into an explicit form. review and provide feedback about script or storyboards and gather feedback from other content reviewers if needed. They also work with ID to meet project schedule. They will give a comment on the language and check the grammar.A Storyboard System To Facilitate Tasks In E-Learning 4. They are the main users that will be using this system to create the content for storyboard. SME also will decide how the learning process will be handled. Instructional Designer The Instructional Designer provides overview of development project tasks. 3. It also shows five groups of users. 2.9) shows the overview of the system architecture for storyboard system.3. Review The Review will help in doing a review on storyboard then submit it to Proof Read. 4. Besides that. 92 . Proof Read The Proof Read will help in give a comment after the reviewer review and submit storyboard to them. They will review the analysis document and review the storyboard before they submit the reminder to SME. The users that have been mention above are: 1.

4. view users.2 Web Design Tools Web design tools such as Adobe Dreamweaver are used to create the system. Administrator Siti Hasmah Digital Library The Administrator are able on login. It also allows easy addition of elements onto web pages and made creating interactive rollover images possible within a few clicks. It is used to create icons and graphics to enhance the outlook of the system. The content of the storyboard data then will save and store in the database.4 User Interface Design 4. It is also help in assist the learning task for storyboard designers. instructional designers and reviewer to do their jobs.4. Wamp is a packages of independently-created programs installed on computers that use a Microsoft 93 . add users. The main tool that will be used to develop this storyboard system is the wamp and MySQL. 4.A Storyboard System To Facilitate Tasks In E-Learning 5. Other tool that is used in the development is Adobe Photoshop. This storyboard system was developing in order to enhance and implement e-learning in MMLS to be efficiently. delete users and logout. This tool provides a design and code editor in one tool.1 Overview The storyboard system interface is designed as a tools application.4. This tools application can be run on a Windows system.

94 . it enhances the application functionality and improves developer productivity. The downside to Visual Basic . The applications also working on windows operating system and it also required more memory space to install because of the graphical components that need more space. the language is never going to be quite as quick as something that made in C/C++. However. 4. and better data access and synchronization. with Adobe Dreamweaver and phpmyadmin.NET.NET is the framework must be installed and it‟s becoming a default install on servers. Besides that. include easier design integration.A Storyboard System To Facilitate Tasks In E-Learning Windows operating system while MySQL is a relational database management system Siti Hasmah Digital Library (RDBMS) that runs as a server providing multi-user access to a number of databases . expanded deployment options. the storyboard system is built on Visual Basic .4. However. the implementation of this storyboard system will used an Adobe Dreamweaver and Wamp that include a phpmyadmin. it has a downside in using this tool.3 Difficulties Encountered And Solution Applied At first. Because of the difficulties encountered.

4.4 Project Management Methodology Figure 4.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 4.10: Gantt chart for Phase 1 95 .

11: Gantt chart for Phase 2 96 .A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 4.

4. Every member in the team put in the extra effort to ensure that all the deliverables are handed in on time. No particular goals of developing storyboard contents are identified to the SME 3. 2. Short development time given 4. 97 . Learning goals cannot be identified in advance 2. Lack of communication between IDs and SMEs 4. Multiple meeting between ID and SME is made to ensure that the critical areas of the system are captured.4. SMEs should attend a training and briefing and thus will make them able to identify the purpose of developing storyboard contents for e-Learning.6 Solution for Difficulties Encountered for the Above Matter The following cite the resolution taken to overcome the difficulties encountered: 1. Standardize the principles and procedures so that SME can comply with it to meet the datelines of storyboard submission.4. 3. Because of the goal cannot be identified.A Storyboard System To Facilitate Tasks In E-Learning 4.5 Difficulties Encountered Siti Hasmah Digital Library The difficulties encountered during the development of the entire system include the following: 1.

A Storyboard System To Facilitate Tasks In E-Learning

4.4.7

Project Development Team

Siti Hasmah Digital Library

The development team for this storyboard system consists of two members who are currently undergraduates belonging to the Multimedia University. All the members are currently majoring in Multimedia Technology Management. The roles played by each individual member during implementation are cited below:

Programmer

1. Nur Farhana Bt Ahmad Deman Huri 2. Zarith Roshahiva Bt Kushairi

Data Architecture Coordinator User Interface Designer

1. Nur Farhana Bt Ahmad Deman Huri 1. Nur Farhana Bt Ahmad Deman Huri 2. Zarith Roshahiva Bt Kushairi

Documentation/Report

1. Nur Farhana Bt Ahmad Deman Huri 2. Zarith Roshahiva Bt Kushairi

System Analysis

1. Zarith Roshahiva Bt Kushairi

98

A Storyboard System To Facilitate Tasks In E-Learning

5. System Application
5.1 Functionality of the system
System is a set of detailed methods, procedures, and routines established or formulated to carry out a specific activity, perform a duty or solve a problem. Functionality is the actions or operations, capabilities and usefulness of something such as a software application. This sub chapter is detailed out the functionality of the De-Elss system as well as explains the function that is included in the De-Elss. The functions that want to be discuss here is for SME function, storyboard function and admin function. In this system application, Subject Matter Expert is one of the main users among others. SME will use the storyboard function in order to insert the content of the learning object. They have to insert the correct content in the template so that the learners will understand what they try to explain. Admin also is the main character in this system application. Admin will give a username and password to those members that is involve in the creating a storyboard content. They are also able to view, edit or delete the members.

Siti Hasmah Digital Library

99

A Storyboard System To Facilitate Tasks In E-Learning

5.2 Screenshots of the system

Siti Hasmah Digital Library

5.2.1 Login Screen

Figure 5.1: Index page This is the first page of the system. There are four button displays in the index page which SME, ID, Proof Read and Reviewer. The users should click on the right button before they can proceed to the next step.

Figure 5.2: SME login page
100

3: SME Main page Upon successful login. SME will be taken to the main screen (Figure 5.2 is the page for SME to login. storyboard and logout. The username and password are created by the system administrator and they will be able to change their password once they have logged in.A Storyboard System To Facilitate Tasks In E-Learning Figure 5. analysis document. profile setting.3) which will display the application menu on the upper side. They are required to login in order to use Siti Hasmah Digital Library the application. The visibility of the function that is available on the application menu is home. 101 . Figure 5.

4: Reviewer Login page The figure above shows the Reviewer login page. Figure 5. Reviewer will go to the main page as shown in figure above. Reviewer need to login in order to use this system application.5: Reviewer Main page Upon successful login.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 5. 102 .

7: Proof Read Main page 103 .A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 5. Figure 5.6: Proof Read Login page Figure 5. they will be taken to the main page as shown in figure 5. Upon successfully login.7.6 above shows the login page for the Proof Read.

After edit the profile. SME are able to edit their profile once they have login successfully.A Storyboard System To Facilitate Tasks In E-Learning 5.8 above shows a SME Edit Profile page.9: SME Change Password page The figure above shows the SME Change Password page. Figure 5. 104 .8: SME Edit Profile page Figure 5. SME also able to changed their password from old password to the new password.2 Storyboard Screen Siti Hasmah Digital Library Figure 5.2.

10 for SME to fill. After it has been initiated.11: View Analysis Documents page By clicking on the submit button (as shown in Figure 5.11).10: Analysis Documents page This is the Analysis Documents (content template) page. the system will provide the content template as shown in figure 5. Figure 5.10). This page could only be initiated by a SME only. the system will display or view the details of the content template that have been filled before this in the Analysis Documents (as shown in Figure 5.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 5. 105 .

5.2.13 shows an Admin Login page. 106 .13: Admin Login page Figure 5.12: Add Screen page Figure 5. Admin have to login in order to view the users or members that use this system application.3 Admin Screen Figure 5.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 5.12 above shows the Add Screen page for the storyboard function. SME need to fill the storyboard where the actual content or knowledge is being presented to the learner.

15: View SME members‟ page Admin are able to click on the view SME and view the members that use the system.14: Admin Main page This is the main page of admin after they have successfully login. Figure 5. 107 .A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 5.

W. analysis document and storyboard content. It also gives the assurance that the system has met it expectation and able to produce its desired outcome. Therefore. evaluate and present the results of the survey findings on the application review by the sample group of users. Even with the use of the most meticulous and sophisticated application design approach.A. The major part tested was login part for users. An application that has undergone a system test will garner greater user confidence in the system‟s quality and reliability. Testing/Evaluation of Findings 6.2 System Test Human beings are susceptible to making mistakes.1 Introduction This chapter aims to test the system. 1991). 2007).A Storyboard System To Facilitate Tasks In E-Learning 6. Siti Hasmah Digital Library 6. Jazayeri & Mandrioli. Functional tests are conducted to ensure the functional feature provided by the application works in a manner that it is suppose to (Wan Hassan. The result of the survey will answer the research question posted in Chapter 1 and help determine if the research objectives has been met. the final product must always be verified to ensure its usability and functions acts accordingly against the intended requirement. erroneous results can never be avoided (Ghezzi.R. Therefore. 108 . the content storyboard application was tested on its system‟s functionality.

There is no knowledge of the test object's internal structure (Black box testing. The output was then checked for its correctness (Wan Hassan. though usually functional. Table 6. W. In order to prove this functional testing. 6. 2010). The black box methods allows test case to be derived from the requirements specifications.1: Test results of User Access module functionality. the black box method was used. It was based on the aggregated results taken from assessor.A. These tests can be functional or non-functional. By using this method. 2007).4 Test Result The final result of the application functional test results are shown in Table 3.A Storyboard System To Facilitate Tasks In E-Learning 6.R. The test designer selects valid and invalid inputs and determines the correct output.3 Functional Test Design Siti Hasmah Digital Library The goal of functional testing is to prove that the software performs in conformance with its specification and specific requirements. Each module‟s functionality was tested with regards to its specifications (requirements) and its context (events). Functionality To ensure access to authorized user To deny access to unauthorized user To terminate user session upon logout Pass    Fail 109 . it takes an external perspective of the test object to derive test cases.17 below.

A Storyboard System To Facilitate Tasks In E-Learning Table 6. Functionality Login Edit Profile Change Password Create Analysis Doc Create Storyboard Add Comments Logout Pass        Fail 110 .3: Test results of Instructional Design module functionality. Siti Hasmah Digital Library Functionality Login Create new user Delete existing users Display list of existing application users Logout Pass      Fail Table 6. Functionality Login Edit Profile Change Password Review Analysis Doc Review Storyboard Submit Reminder Add Comments Logout Pass         Fail Table 6.4: Test results of Subject Matter Expert module functionality.2: Test results of User Management module functionality.

we are not able to apply extra features into this system application. 111 .5: Test results of Reviewer module functionality. Functionality Login Edit Profile Change Password View Analysis Doc View Storyboard Add Comments Logout Pass        Fail 6. We believe we had tried our best to develop this project and applied all that we had learnt during our study in this university.5 Problem encountered Since we are lacking in knowledge of PHP and some other software.A Storyboard System To Facilitate Tasks In E-Learning Table 6. Siti Hasmah Digital Library Functionality Login Edit Profile Change Password View Analysis Doc View Storyboard Add Comments Logout Pass        Fail Table 6.6: Test results of Proof Read module functionality.

and Rational Rose. We learn and study it by ourselves and sometimes ask friends on how it can be adapted to our system. Our system is not left out in this substance regarding the problems that occur during our implementation of the system. in order to focus on the system implementation we have to balance out our work and maintain our group works for example PHP.6 Limitations Siti Hasmah Digital Library Each system implemented will definitely have some problems in it. 112 . But still we have to figure out the solution to the problems occur. MySQL. In this system we used numerous coding to make sure the system works and has security. Essentially. At this juncture we address some of the matters that have been bothering us while we carry out our system. Adobe Dreamweaver. The system we developed only able to perform basic function such as login. We appreciate our supervisor who gave us suggestions and comments for us to add interactive elements into this project.A Storyboard System To Facilitate Tasks In E-Learning 6. analysis document and storyboard.

doc format and it also can be print out from the format. we would like to make a view or display part to be display in . interesting and easy to use and valuable for everybody that uses this system.7 Future Enhancement Siti Hasmah Digital Library For future enhancements. We also would like to enhance the interface of the system and make it more attractive.PDF format or .A Storyboard System To Facilitate Tasks In E-Learning 6. 113 .

The e-Learning Storyboard System follows the set of competencies for instructional designers developed by International Board of Standards for Training. Conclusion This study aimed to develop an effective system for assisting the SME to construct E-learning that will improve an existing E-learning development process.A Storyboard System To Facilitate Tasks In E-Learning 7. Performance. 2005). or even perform some real tasks in De-ELSS. For example. users can operate on the prototype. simulating much of the functionality in the storyboard. The E-learning Storyboard System (De-ELSS) will develop to improve the communication issues between SME and ID. Siti Hasmah Digital Library 114 . This system proposed a high fidelity prototyping that are fully interactive. and Instruction (IBSTPI) (Smith and Ragan. The system also incorporates the ethical guideline provided by the Ministry of Higher Education Malaysia (MOHE) which focuses on commitments to students and to the profession of education. This study contributes to the development of storyboard in E-learning system in Multimedia University and towards the e-learning industry in Malaysia. It also could improve the low fidelity prototyping from the sketch based which previously applied the traditional method.

B. and Carlis. 11 (3). and Goodson L.A Storyboard System To Facilitate Tasks In E-Learning REFERENCES [1] Andrews. Psychology of Learning for Instruction (2nd) Needham Heights. M. Survey of Instructional Development Models. Journal of Instructional Development. B (2000). J. M. 391–398.pdf [6] Discroll. K. (September 30-October 5. R. B.A. D. pp. 241-250. Journal of Educational Psychology.. Konstan.M. [7] Gustafson.V. Storyboards tailored to you: Do-it-yourself magic arrows. Pp 2-16. J. (2004).P (2000). 2001. A Comparative Analysis of Models of Instructional Design. Canada). pp25–40 [3] Bailey. The E-learning Developer‟s Journal.elearningguild. Multimedia Learning Systems: a Future Interactive Educational Tool.A: Allyn & Bacon. Kevin Lock Teng Lowb. In the Proceedings of the Ninth ACM International Conference on Multimedia. Voon Chet Koo (2003). H. Ottawa. (3rd Ed).P. [5] Brandon. [2] Andy Lock Yen Lowa. Retrieved on 10th October 2009 from the World Wide Web: http://www. (2001) DEMAIS: Designing Multimedia Applications with Interactive Storyboards.. Problem solving in video-based microworlds: Collaborative and Individual Outcomes of High-Achieving Sixth-grade Students. 92(2). IR-103 115 Siti Hasmah Digital Library . [4] Barron.L and Branch.(1997).com/pdf/2/050304des. Syracuse: ERIC Clearinghouse on Information and Technology.A (1980). The Internet and Higher Education 6..

Knauf. 2005).). Didactic Design Through Siti Hasmah Digital Library Storyboarding: Standard Concepts for Standard Tools. M. (2000). Madsen. In S. [13] Madsen. Andriole (Ed.A. M.. Flechsig (1996) Kleines Handbuch didaktischer Modelle. Ed. The Hague.06. (2005). In Seventh IEEE International Conference on Advanced Learning Technologies Nigata: Japan (pp. A. [9] [10] K. Toward making didactics a subject of knowledge engineering. K. A. K.-H. Storyboard 116 . Dohi. Hong. J. S. 2000. 2005. 92. K. 1996. ACM International Conference Proceeding Series.A Storyboard System To Facilitate Tasks In E-Learning [8] Jantke. Sakurai. Neuland. January 03 . B. Sketching storyboards to illustrate interface behaviors. 193-194. New York. J. pp. ACM. 20-25. vol. 510-517. South Africa..Madsen & Aiken (1991) [11] Landay. and Landay. A. R. P. Canada. NY. In Conference Companion on Human Factors in Computing Systems: Common Ground (Vancouver. The Netherlands)... P. J. Newman. (April 1-6. April 13 18. J. (2007). In the Proceedings of ACM Conference on Human Factors in Computing Systems: CHI 2000.I. and Myers.. Trinity College Dublin. DENIM: Finding a Tighter Fit Between Tools and Practice for Web Site Design. (1991).. In Proceedings of the 4th international Symposium on information and Communication Technologies (Cape Town. Tsuruta. S. R. 1996). 788–792).. [12] Lin. P. & Aiken. & Aiken. (1991). Y. J. J. 1996.W. Gonzalez.. British Columbia. CHI '96. and Knauf.. Tauber. Cooperative interactive storyboard prototyping.

). NY. [18] Schon.28.com/view.4. Manual for Storyboard Designer (SD) and Reviewer (RW). Inc. John Wiley & Sons.com/storyboard-tools-download-30850. MA: QED Information Sciences. Instructional Design (3rd Edition). K. and Abowd.. Siti Hasmah Digital Library Wellesley. Wiley Joseey-Bass Education. Educating the Reflective Practitioner.91. USA [17] Raptivity Software Makes Interactive Learning Easy.com/. D. G. [20] Storyboard Tools 1. ACM. 2008.brothersoft. URL: http://www. San Francisco: JosseyBass. 12-21. (2007). Ragan (2005). D (1987). [21] Truong.html.raptivity. 2006).7. 117 . In Proceedings of the 6th Conference on Designing interactive Systems (University Park. [14] Melor Abdul Rahman. Storyboard Design Process. PA. June 26 .A Storyboard System To Facilitate Tasks In E-Learning prototyping: A New Approach to User Requirements Analysis (2nd ed. [19] Springboard 0.filetransit. R.php?id=63040. Retrieved on 20th November 2009 from the World Wide Web:http://www. Retrieved Date: 20th November 2009.02.com. Retrieved on 20th November 2009 from the World Wide Web: http://www.mockupscreens. Hayes. (21st May 2001) [15] MockupScreens 4.. [16] Patricia Smith and Tillman J. New York. Storyboarding: an empirical determination of best practices and effective guidelines. DIS '06. USA. G. 2006. N. Retrieved on 20th November 2009 from the World Wide Web: http://www.

L.E. Program Comprehension. 118 .. [28] Thronesbery. Acoustics. (ICASSP '01)..1412 vol. [25] Christel. B. and Signal Processing.. [27] Barakat. E. Molin. Symposium on Mixed and Augmented Reality.S. Park.3. D. Proceedings.. [26] Beyer. 2001.. A. M. 2001 IEEE International Conference on Volume 3. R. 3-10 March 2007 Page(s):1-8. Tanaka. and Hara. Issue 1.G. 14th IEEE International Conference on 0-0 0 Page(s):248-251. 1996. Y... ACM SIGGRAPH ASIA 2008 educators programmed. Hassan. 2007 IEEE. International Conference on Computer Graphics and Interactive Techniques. Professional Communication. Speech. D. [23] Harada. A. 2006. A. pp.. Singapore.. ICPC 2006.A.. K. AR Storyboard: An Augmented Reality Based Interactive Storyboard Authoring Tool. Frank Suarez and Xiaobo Lu. C.A Storyboard System To Facilitate Tasks In E-Learning [22] Hui Zhu.. IEEE Transactions on Volume 32. J. Comparison of animation Siti Hasmah Digital Library storyboard education in China and the United States. [24] Shin. 7-11 May 2001 Page(s):1409 . Anecdote: A Multimedia Storyboarding System with Seamless Authoring Support. Kim. (2005). Proceedings of the 4th IEEE/ACM International Symposium on Mixed and Augmented Reality. in ACM Multimedia ‟96 Proceedings. March 1989 Page(s):20-25. 2008. 198-199. Aerospace Conference. R.. Schreckenghost. Warmack. Ogawa. M...

Schreiber.org/wiki/ASP. [34] Assoc. Issue 3.. Retrieved on 20th November 2009 from the World Wide Web: http://en.techterms. Volume 51. [32] ASP..A. An Application For Creating E-Learning Content Storyboard Based On Instructional Design Principle. Pages 1353-1364. John Wiley & Sons. Inc. L.org/wiki/Microsoft_Visual_Studio [36] Visual Basic . W. Retrieved on 20th November 2009 from the World Wide Web: http://en.A Storyboard System To Facilitate Tasks In E-Learning [29] Ian Jones. [30] Hodis. [31] L. (2007). (2005). Volume 32. Retrieved on 20th November 2009 from the World Wide Web: http://en.NET. May 2007. Trends in Biochemical Sciences. J. Sussman. Rother. [33] ASP. K.NET.).wikipedia. Instructional Designer (3rd ed.com/definition/aspnet. T. (Dr. J.NET.org/wiki/VB. University Malaya.wikipedia.NET#Criticism [37] Wan Hassan. E. Warehouse Management System. Prof. Retrieved on 20th November 2009 from the World Wide Web: http://www. Pages 199-204. Computers & Education. eMovie: a storyboardbased tool for making molecular movies... Ragan.R. P.) Peter Loh.Smith. Kuala Lumpur 119 . Storyboarding: A method for bootstrapping the design of computer- Siti Hasmah Digital Library based educational tasks. November 2008.NET..wikipedia. Nanyang Technological University [35] Microsoft Visual Studio.. G. Issue 5.

Retrieved on 11th April 2010 from the World Wide Web: http://en.org/wiki/Adobe_Dreamweaver [42] Wamp.org/wiki/WAMP [43] MySQL..A Storyboard System To Facilitate Tasks In E-Learning [38] Microsoft PowerPoint. Retrieved on 12th April 2010 from the World Wide Web: http://en.wikipedia. Fundamentals of Software Engineering. Retrieved on 11th April 2010 from the World Wide Web: http://en. Retrieved on 20th November 2009 from the World Wide Web: http://en.. Inc.wikipedia. [45] Black-box testing.com/TERM/B/Black_Box_Testing. Jazayeri. (1991).webopedia.wikipedia.org/wiki/Black-box_testing [46] Black-box testing.org/wiki/Adobe_Illustrator [41] Adobe Dreamweaver. M.wikipedia. C. & Mandrioli. D.wikipedia.org/wiki/MySQL [44] Ghezzi.html 120 . Prentice-Hall.wikipedia.wikipedia. Retrieved on 20th November 2009 from the World Wide Siti Hasmah Digital Library Web: http://en. Retrieved on 11th April 2010 from the World Wide Web: http://en.org/wiki/Microsoft_word [40] Adobe Illustrator. Retrieved on 20th November 2009 from the World Wide Web: http://en.org/wiki/Microsoft_PowerPoint [39] Microsoft Word. Retrieved on 12th April 2010 from the World Wide Web: http://www.

A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 121 APPENDICES .

Sign up to vote on this title
UsefulNot useful