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. 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. ____________________ Name of candidate Faculty of Information Technology Multimedia University Date: DD: MM: YYYY .

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

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

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

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

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

1 Participant‟s number of years using the computer Table 3.5 Similarity and Differences for Media Storyboard and ELearning Storyboard Table 2.1 Major activities of Instructional Designer Table 2.2 Advantage of using Systematic Instructional Design Table 2.7.1 Software tools/ devices for GUI /design purpose Table 2.11 Advantages of Storyboard Tools 1.4 Table 2.4 Tasks & Roles for Storyboard Designers and Reviewer Table 2.3 People who involved in Instructional Design Table 2.16: Comparisons among Storyboard Tools Table 3.3 The participants feedback on communication between team members Table 3.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 .10 Advantages of DEMAIS Table 2.2 Participant‟s number of years surfing the internet Table 3.02 Table 2.91 Table 2.15: Advantages of Anecdote Table 2.6 Elements in E-learning Storyboard 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.8 Storyboard Authoring Tools Comparisons Table 2.9 Advantages of Raptivity Table 2.13 Advantages of MockupScreens 4.12 Advantages of Springboard 0.7 Comparison templates Table 2.14 Advantages of DENIM Table 2.

12 Participant‟s feedback on dateline of the storyboard Table 3.2 Test results of User Management module functionality Table 6.13 Participant‟s feedback on production turnaround time Table 3.8 Participant‟s feedback on application ease of use Table 3.7 Participant‟s feedback on various components Table 3.5 Test results of Reviewer module functionality Table 6.14 Participant‟s feedback on production costs Table 3.3 Test results of Instructional Design module functionality Table 6.11 Participant‟s feedback on practice and tests by SME Table 3.15 Participant‟s feedback on using the application at work Table 3.9 Participant‟s feedback on dealing with clients or SME Table 3.16 Participant‟s feedback on recommending the application Table 6.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.10 Participant‟s feedback on understanding of SME 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 .5 Participant‟s feedback on output produces Table 3.4 Test results of Subject Matter Expert module functionality Table 6.6 Participant‟s feedback on content template storyboarding Table 3.1 Test results of User Access module functionality Table 6.

Reviewer.2.1. Screenshot for the Storyboard Tools 1.9.13. Screenshot for the Springboard 0. Figure 2.10.1.4. ID. Use case for Instructional Designer (ID) Figure 4. The narration (voice script) editor. The DEMAIS Storyboard Editor Figure 2. The Content Manager Figure 2.3.6. What is your highest tertiary education level? Figure 3. SME and Proof Read Figure 2.5. Class diagrams for Administrator. Figure 4. An Instructional Design Process Model Figure 2.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.2.7. Total Questionnaire Participants Figure 3.02 tool Figure 2. Screenshot for the Anecdote tool Figure 3.1. How many years of experience do you have in relation to the job scope stated above? Figure 3.3. Flip Book (before open) Figure 2.11. Screenshot for the MockupScreens 4. Flip Book (During Open) Figure 2. Radial Diagrams Figure 2.3. Participant‟s overall rating of this application.7.1. 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 . Screenshot for the DENIM Figure 2.91 tool Figure 2.4.2.8. Component of Storyboard Figure 3.5. Comparison Chart Figure 2.4 Figure 2. Use case for Subject Matter Expert (SME) Figure 4.12.

Proof Read Login page Figure 5.3. SME Change Password page Figure 5. Admin Login page Figure 5.11.4. View Analysis Documents Figure 5.2. SME Edit Profile page Figure 5. Class Diagram for a Storyboard System Figure 4.9. Index page Figure 5. Use case for Administrator Figure 4.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.8. Admin Main page Figure 5.8. Proof Read Main page Figure 5. Reviewer Main page Figure 5.15.5.4.12. Use case for Proof Read Figure 4.6.13. System Architecture for Storyboard System Figure 4. Add Screen page Figure 5. Gantt chart for Phase 2 Figure 5.5. Sequence Diagram for a Storyboard System Figure 4.11.10. Reviewer Login page Figure 5.9. 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 . Gantt chart for Phase 1 Figure 4.7.1. SME login page Figure 5. SME Main page Figure 5. Activity Diagram for a Storyboard System Figure 4.7.14. Analysis Documents page Figure 5.10.6.

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 .

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

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

it used to facilitate communication between team members and provides a through visual representation of the final instruction. 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. 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.A Storyboard System To Facilitate Tasks In E-Learning functions. 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. Siti Hasmah Digital Library A storyboard can be defined as one of the important magic arrows in eLearning. the first animated cartoon feature. It contains a detailed description of the visual elements such as text. With Storyboard. 14 . This method is still used in the movie industry today. graphics. Leonardo da Vinci was the first person to use storyboard. video and animation and also programming instruction. Walt Disney and his artists created the storyboard with the making of steamboat Willie. providing an easy and flexible interaction suited to catch students' interest. In 1929. yet their interface should hide their complexity.

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

A lack of attention to this milieu could result in non-acceptance of the instructional designer as a change agent or ineffective learning design.A Storyboard System To Facilitate Tasks In E-Learning something into the storyboard. 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. The size of the paper based storyboard is fixed and cannot be change. 16 . In order to make it easier for the SME to generate an e-learning content storyboard. A project will not be successful if the SME has irregular contact with the instructional designer and development team. 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.  Lack of suitable application that would expedite development process. there need to be an application to assist them in this conquest. 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. This is another contributing factor to the slow cycle of generating content storyboard.  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. However.

developers and those who will implement the instruction.4 Research Questions The research aims to answer the following questions: 1. To facilitates diffusion/ dissemination/ adoption. 3. 3.3 Research Objectives This research project will attain the following objectives: 1. To encourages advocacy of the learner. 4. To supports development for alternate embodiments or delivery systems. Siti Hasmah Digital Library 1. 2. 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 . and assessment.A Storyboard System To Facilitate Tasks In E-Learning 1. 2. 6. 4. activities. To provides a systematic framework for dealing with learning problems. To facilitates congruence among objectives. 7. efficient. 5. and appealing instruction. To supports coordination among designers. To supports effective.

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. Science Direct.A Storyboard System To Facilitate Tasks In E-Learning 1. and Springer Database. Besides that. Siti Hasmah Digital Library 18 .  System architecture System architecture is divided by two parts which is conceptual design and physical design. Francis and Taylor Database. Examples of E-database are such ACM Portal. Other ways to gathered information is based on journal. There are few ways of gathering information for this final year project. This journal can be found at the Institute for Postgraduate Studies (IPS) that is under the Research and Development Division in Multimedia University Cyberjaya. The first way is gathered an information from the books at the Siti Hasmah Digital Library which is in Multimedia University Cyberjaya.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. This design statement is expressed in the context of the solution users and describes what the solution will do to support their activities. IEEE Portal. the information shall be derived from the internet searching. doing interview with peoples that related to this project and distribute the questionnaires. E-database also provides a function in finding the information. In order to get more accurate information.

class diagram and other information. and the relationships between them. Figure 1. and how it is displayed as output. which comprise software components. Reviewer. SME and Proof Read. the externally visible properties of those components. Reviewer. ID. SME and Proof Read 19 . This software architecture for this final year project research requires data. ID.A Storyboard System To Facilitate Tasks In E-Learning The Physical Design relates to the actual input and output processes of the system.1: Class diagrams for Administrator.  Software architecture The software architecture of a program or computing system is the structure or structures 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. Below are the class diagrams for Administrator.

(MySQL.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.( Adobe Dreamweaver. http://www. It is an open-source server-side scripting language that was first introduced in 1994. Rational Rose is software that helps in creating an UML (Unified Modeling Language).netcraft. Below are the software tools or devices that will be used in this final year project. MySQL Adobe Dreamweaver Wamp Microsoft Visio Rational Rose 20 .1: Software tools/ devices for GUI /design purpose Application Web Description PHP is a recursive acronym for PHP: Hypertext Pre-processor. Table 1. 2010) Is a web development application originally created by Macromedia. and is now developed by Adobe Systems. which acquired Macromedia in 2005. 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. and have become important commercial products. (WAMP. Many of these tools have demonstrated significant productivity gains for programmers. MySQL is a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. 2010) Microsoft Visio is a diagramming program that uses a vector graphics to create diagrams such as the flowchart diagrams. 2010) Wanp are packages of independently-created programs installed on computers that use a Microsoft Windows operating system. 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.com/survey/).

A Storyboard System To Facilitate Tasks In E-Learning 1. Eventually. Performance. (Smith and Ragan. it could improve the low fidelity prototyping from the sketch based that still uses traditional method. 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. or even perform some real tasks with it. 2005) 21 . This will lead changes to high fidelity prototyping that are fully interactive. simulating much of the functionality in the storyboard. users can operate on the prototype. this study is deemed significant because if such the storyboard in Elearning could be built and prove to be effective. 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.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. The De-ELSS follows the set of competencies for instructional designers developed by International Board of Standards for Training. With Storyboard. For example. and Instruction (IBSTPI).

 This study will come out with expected deliverable by develop an interactive multimedia syllabus that can be used by SME and reviewer.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.Multimedia Technology & Application and another subject. 22 . Not animation and films and games. For usability.  To introduce MMLS as a pilot study among other LMS that created by other universities.A Storyboard System To Facilitate Tasks In E-Learning 1.  For sampling purpose .

published journals and some online references. instruction is the intentional arrangement of experiences.2 Instructional Design 2. Instruction is the international facilitation of learning toward identified learning goals. The sources for the literature are collected from some articles. and evaluation”. This chapter will focus on the Instructional Design and its concepts. LITERATURE REVIEW 2. information resources.2 A brief history of Instructional Design Instructional Design is the combination of the word instruction and design itself. Siti Hasmah Digital Library 2. 23 . In both definitions. and further discuss detailed of the storyboard. 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”. leading to learners acquiring particular capabilities.2. 2. academic research papers. activities.1 Introduction This chapter examines previous literature or studies conducted with the Elearning storyboard.2.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.A Storyboard System To Facilitate Tasks In E-Learning 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.3 The Instructional Design process There are many interpretations that described the term „instructional design‟. When projects become complex. Design is related to planning.1. According to (Mager.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. 1987). 24 .2. According to (Schon. Another way to define instructional design is to describe the process involved in the systematic planning of instruction. at some point the term “planning” no longer fits and “design” becomes a better descriptor. a student of effective professional practice has been described design as a process of “reflective conversation with the materials of a given situation. 1984). 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”.” 2.

the research modified Smith and Ragan (2005)‟s simple model of design to accommodate with the De-ELSS.A Storyboard System To Facilitate Tasks In E-Learning Table 2. Develop an instructional strategy to determine “how we‟ll get there.4 Instructional Design Models According to Andrews and Goodson (1980) have described forty such models for systematic design of instruction. In these analysis.” 2. Gustafson and Branch (1997) provide a more extensive analysis of fourteen models.1 shows the modified Smith and Ragan (2005)‟s simple model of design.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”. Figure 2.” Develop and conduct an evaluation to determine “how we‟ll know when we‟re there. In the other hand.1: An Instructional Design Process Model 25 .2. Figure 2.

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

and assessment. Facilitates congruence among objectives. Frequently. have developed an instructional approach that gives reason to believe that the problem can be solved and the learning goals will be met. 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. 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.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Supports development for alternate embodiments or delivery systems. Much of the work that goes into an instructional design project is independent of the specific form that finished product takes (such as print. computer. 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. or video). creative individuals not trained in systematic instructional design will develop ingenious approaches to instruction that are rather like “solutions looking for a problem”. 27 . The innovations that are generally appealing are those that have clarified the problem into a learning goal. web. activities. Provides a systematic framework for dealing with learning problems.

government and private agencies. and since reflection and planning are central to ID. there is limited opportunity to apply many of its principles and procedures. observation. In addition.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. SME also select or develop ways to assess learners‟ progress toward reaching goals.2.A Storyboard System To Facilitate Tasks In E-Learning 2. Multimedia Designer and also proof read. The development of engaging activities seems to be a particular strength of practicing SME. Teachers as Designers Other Designers 28 . oral questioning and a variety of other techniques for assessing learning. These assessment approaches may include written tests. Some trainers are experts in their skill or subject area. SME select or develop activities and information sources that will assist learners in reaching these goals. Graphic Designer. industry. Many instructional designers who are involved in training design have developed additional competencies in more inclusive specialty that is termed “performance technology”. ID are sometimes called upon to make contributions in the visual metaphors which may underlie a simulation. who are either permanently or temporarily assigned to conduct training in that area. Not all trainers are instructional designers. 2. because there is no “lead time” to the education.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.7 People who do Instructional Design The following people that are listed below are involved in instructional design: Table 2. In such cases. SME will be a teacher as Designers in E-learning.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. performance tests. micro world.

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

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

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

It Indicates to the learner what they will be able to do.6 The E-learning Storyboard Siti Hasmah Digital Library E-learning storyboard is a screen-by-screen description of what students will see. Textual content on a storyboard is to match the exact text as seen by the learner during the module. headings & proper fonts.A Storyboard System To Facilitate Tasks In E-Learning 2. and do when running the program. (Kruse. n. For example. It provides a more complete picture of what the final program will look like. 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. 2.) Has been listed out the following 8 Major elements: Table 2. 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. or a sketch. hear.d. unit/lesson title. curriculum title. 34 Objectives Audio/Narration     Video Clips Graphics On-Screen Text Navigation& Interactivity .1 Major Elements in E-learning Storyboard.6: Elements in E-learning Storyboard Elements Project Information Description Storyboards should contain identifying information about the project such as client name. E-Learning storyboards must connect not only content and images but also programming instructions. Learning objectives are included in the storyboard as on-screen text. Navigation Storyboard screens should have chronological display depicting the exact display of the intended module. date.6. It helps visually to enhance the learning and to captures learners attention. draft/version number and storyboard frame number. text should adhere to proper design and formatting principles.

Animations. Storyboards use notes to clarify and describe elements that are not visually represented. their inclusion in a storyboard is not possible. Hyperlinks. Therefore.7: Comparison templates Free Freebies Studio 1151 U. For example: Graphics.6. Video. 2004) Table 2.2 Comparison templates Below is the table for comparison templates for free or commercial storyboard templates. (Brandon. and Audio etc. Notes give team members verbal details for complicated visuals Siti Hasmah Digital Library 2.S Department Of Justice Horton E-learning Designer‟s Edge      Commercial 35 .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.

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

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

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

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

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

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

4.7.3. A "visualiser" program lets you view images in sequence. In addition.4 is an organizational tool. Web page Drawing tool 42 .A Storyboard System To Facilitate Tasks In E-Learning 2. primarily of interest to film directors.4 Siti Hasmah Digital Library Storyboard Tools 1.9 shows the screenshot for the storyboard tools 1.3 Storyboard Tools 1.4 (Storyboard Tools 1. Figure 2.7. and play around with a number of editing effects including fades and dissolves.4 Table 2. Figure 2.7.4 2. 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. storyboard artists and film-makers generally.7.11: Advantages of Storyboard Tools 1.9: Screenshot for the Storyboard Tools 1.1 Advantages of 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.8. 2009).7. 2009) Features Text Description Storyboard Tools stores text along with the images.4.7.4.7.7. Storyboard Tools has its own drawing tool with specialized features for storyboarding.8.

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

4. special effects Use a multi-layer model to productively reuse content.4.1 Advantages of Springboard 0.11 shows the screenshot of MockupScreens 4.2 Disadvantages of Springboard 0.91 also have a disadvantages. this Springboard 0.91. 2. draw the storyboards with both tools Import or copy and paste text and graphics from other applications Add annotation layers to show camera moves. The disadvantages are as follows:  Users had trouble creating navigational links between pages that they had initially drawn far apart on the canvas. while the coding hasn't even started yet. MockupScreens main design goals are ease of use and productivity (MockupScreens. and quickly create wireframe of your application.91(Storyboard 0.8.12: Advantages of Springboard 0. Figure 2.02 MockupScreens 4.91 Same as other storyboard tools.02 helps you to sketch screen mockups of your application and organize them in scenarios.91 are unavailable 2. 44 . 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.A Storyboard System To Facilitate Tasks In E-Learning 2.91 Siti Hasmah Digital Library Table 2. 2009).8.02. With MockupScreens you can experiment interactively with your clients.5 MockupScreens 4.8. and easily edit graphics.  Some features in springboard 0.

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

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

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

to represent the content of the media data to be created.7 Anecdote Siti Hasmah Digital Library Harada et al. Surrogate media is a type of media. Figure 2.A Storyboard System To Facilitate Tasks In E-Learning 2.8. (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. It can be used to simulate the execution of the scenario and can serve as the specification of the media data to be created. and helps them to create the final application seamlessly from the prototype scenario. Figure 2. such as sketches.13: Screenshot for the Anecdote tool 48 .13 shows the screenshots for Anecdote tool. Anecdote employs the concept of surrogate media. Anecdote allows authors to edit the different aspects of the scenario using multiple editing views.

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

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

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.4 Text Web page Springboard MockupScreens 0. draw sketches and type text annotations 51 . Table 2.91 4.16 will analyze and compare the features. copy. advantages and disadvantages among Storyboard Tools discussed in the literatures.7.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 2. 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. 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.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.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. sketch and narrations A designer sketches behavioral ink strokes between objects or multiview editor Storyboard Tools 1.10 Data Analysis Table 2. Import.

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.91 are unavailable Because of the experiment interactively. 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. 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. It does not check for consistency among behavior definitions. 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. 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. 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 .

53 . Based on this comparison and literature review. Mostly the systems that have been compared are having a difference in kind of features.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. more features can be added to the storyboard system in order to make it more efficient. flexible and easy to use. advantages and disadvantages.A Storyboard System To Facilitate Tasks In E-Learning 2.

2.2 Background of the interview The interviews were conducted at ID‟s work premise. That venue was chosen at the request of the IDs as most of their materials and documentations are kept at their office.1 Introduction This chapter describes the research methodology used in detail. 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). sincere opinions and point of views in an impulsive and immediate manner.A Storyboard System To Facilitate Tasks In E-Learning 3. Siti Hasmah Digital Library 3. 54 . The research for this research project is divided into two parts.2 Interview 3. Research Methodology and Requirements Gathering 3.1 Introduction Interview is used as the main instrument in researching this research project. Interview is also an excellent method to obtain tacit information. It is a direct way of getting the required information and interviewees could be probe further into giving out details. 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.2. 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. 3.

2. academic qualifications and professional resume.4 55 . 3. 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. storyboarding process in e-learning and collaboration procedures.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. 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. The criteria of the background such as years of experience.A Storyboard System To Facilitate Tasks In E-Learning 3.2. Instructional Designer‟s background. The interview question can be seen at appendix. 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.

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.A Storyboard System To Facilitate Tasks In E-Learning 3.5 Interview findings on Section A (Instructional Designer’s background) Siti Hasmah Digital Library Name: Melor A. This proves that the interviewee has both 56 . 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.2. it was found that the IDs have 5 years of professional experience in the field of instructional design. This also means that the interviewee has the necessary theoretical foundation on education learning theories. institutions of higher learning and corporate banking as well. 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. 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.

the interviewee belonged to an organization that has proper development process in place. 3.1 shows the storyboard template from the interviewee. 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. Figure 3.2. guidelines in content creation have also been established within the organization and put in place to ensure speedy development process and minimize faulty output. 57 . Question 4: Have you conducted any training on Instructional Design? The interviewee also often conducts instructional design workshops.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. Therefore.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.

58 . 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.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). The storyboard contents audio/voice over column. SCO titles and number also includes in the storyboard. 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. The training includes the storyboard format so that they become familiar with the content structure.

It‟s easy for the SME that requires minimal computer skills to do it. All multimedia inserted must serve the purpose. Behaviorism learning approach may have different template from constructivism approach.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. 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. 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. 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. Ex. The interviewee need 59 . Question 7: Even after you have been doing ID for years.

there are certain of team members not able to come during the meetings due to a clash of timing between team members.2.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. Otherwise the rest of the team member only gets hold the storyboard when it is deemed ready for the production. The other team members such as graphic designers. 60 . 3. However. 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. Meetings and ad-hoc discussions are the methods of getting all the team members to get together and discuss certain raising issues. 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. 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.

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

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

The rest are made up of seven participants from Graphic Designers and one from the multimedia programmer.1 Total Questionnaires Participants Figure 3. In total. 3. 65 . From this figure. The questionnaires can be seen in the appendix.2: Total Questionnaire Participants Figure 3. only one is Instructional Designer.2 above show the total number of the participants from Multimedia Production Unit (MPU).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. there are nine participants that participate in this questionnaire.4. The following results of the questionnaires findings will be discussed below: 3.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.

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

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

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

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.5: Participant‟s feedback on output produces.2 100.1 100.2 55.0 Valid Percent 11.1 55.2 55.8 100.3 88. as shown in table 3.A Storyboard System To Facilitate Tasks In E-Learning Table 3.2% of the participants agreed with the output produce in word/power point. The rest of the participants are strongly disagreed and disagreed.0 The existing storyboard that has been used by the MPU unit comes out with word or power point output.0 Cumulative Percent 11.1 33.0 Cumulative Percent 11.6 22.6 11.6 22.6% of the participants averaged followed by 22.1 22.2 100.0 Valid Percent 11.9 100.1 100. 55. Table 3.1 22.1 55.2 77.5.1 11.1 22.1 11.0 69 . The format used in the word/ power point output is easily understandable by the multimedia development team. However.6 11. Frequency Valid disagree average agree strongly agree Total 1 2 5 1 9 Percent 11.4: Participants feedback on content of the storyboard.

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

1 22.0 Valid Percent 11.2 100.2 100.2 44.0 The result in table 3.0 Cumulative Percent 11.A Storyboard System To Facilitate Tasks In E-Learning Table 3.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 22.4 22.8: Participant‟s feedback on application ease of use.2 66.0 Valid Percent 11.3 77. 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. Table 3.1 33. Only 1 person shows strongly disagree with the application.1 22.8 100.7 100.3 100.7 100.1 22.0 Cumulative Percent 11.0 71 .7: Participant‟s feedback on various components. Overall.2 66.2 44.1 33.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.

1 33.3% of the participants agreed and strongly agreed.3 66.1% of it.1 11.4. In addition. The rest of the participants were strongly disagreeing and disagree with 11. The main purpose of the application is to assists SMEs to develop content storyboard independently while being monitored by the IDs. this section will looks at the impact of the collaboration had on the participants.1 11. Table 3. 72 .9: Participant‟s feedback on dealing with clients or SME.1% disagree.3 100.1 11. 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.1 22.9 shows that 33.2% agreed and 11.3 33.3 33.2 33. The table 3.A Storyboard System To Facilitate Tasks In E-Learning 3.0 All of the participants were expected that SME will understand the instruction. The following table 3.10 below shows that the majority of the participants averaged with it while the others obtain 22.1 33.0 Valid Percent 11.7 100.0 Cumulative Percent 11.4 Collaboration Siti Hasmah Digital Library The results in this section show the usefulness and the effectiveness of the collaboration.3 100.1 11.

9% participants averaged followed by 11.0 Table 3.7 22.1 100.2% agreed and 11.7 22.A Storyboard System To Facilitate Tasks In E-Learning Table 3. The rest of the participants with 22.1% strongly disagreed.1 66.1 88.12 shows the majority of the participants averaged with the awareness of the dateline of the storyboard contents.1% disagreed to this term as well.9 100.2 100. 73 .0 Valid Percent 11.1 88.0 In terms of the participants feedback on practice and test by SME.1 66.0 Cumulative Percent 11.0 Cumulative Percent 11. the table 3.1 77.11: Participant‟s feedback on practice and tests by SME.0 Valid Percent 11.8 100.2 100.11 shows that 88.10: Participant‟s feedback on understanding of SME. Siti Hasmah Digital Library Do the SME understand the instruction? Frequency Valid disagree average agree Total 1 6 2 9 Percent 11. Table 3.9 100. Do the SME know what to do during the practice and tests? Frequency Valid disagree average Total 1 8 9 Percent 11.

A Storyboard System To Facilitate Tasks In E-Learning Table 3. Other 22.2 100.1% of the participants were strongly disagreed.7 22.0 3. Table 3.13 shows 44.4% of the participants agreed that the application could reduce the storyboarding lifecycle. 74 .8 100.2% is disagreed on this term as well. 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. averaged and strongly agreed with it. 11.1 66.0 Valid Percent 11. Siti Hasmah Digital Library Do SME.4.12: Participant‟s feedback on dateline of the storyboard. opinion from the participants shows in the following table.2 100.7 22.1 66.0 Cumulative Percent 11.5 Opinion In this section.1 77.

14.3 44.1% gave disagreed and averaged.9 100.2 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.1 22.0 When the participants were asked if they would consider using the application will be able to lower the cost of content production.4 11.1 33.13: Participant‟s feedback on production turnaround time.0 Valid Percent 11. 33.4 88.1 44.0 Cumulative Percent 11.1 100.1 100. 75 .1 44. Other 11.2 11.A Storyboard System To Facilitate Tasks In E-Learning Table 3.4 11. 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. The same percentage of 22.

8 100.1 100.3 11.0 Cumulative Percent 11.0 Table 3.3 11. 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. The rest of the application shows the same percent with 22.6 88.3%) of the participants consider using this application in their professional work.1 22.2 22.1 33.0 Cumulative Percent 22.3 55.1 100.0 Valid Percent 11. Table 3.2 100.A Storyboard System To Facilitate Tasks In E-Learning Table 3.15: Participant‟s feedback on using the application at work.2 100. averaged and strongly disagreed with it.3 22.1 22.2 44.2 33.2 33.15 below shows that a huge majority (33.0 Valid Percent 22.2% disagreed.0 76 .2 22.4 77. 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.9 100.2 33.14: Participant‟s feedback on production costs.2 22.3 22.2 33.2 22.

0 Valid Percent 22.A Storyboard System To Facilitate Tasks In E-Learning The table 3. This shows that the participants were confidence with this application.0 Figure 3.2 33.4 100.5: Participant‟s overall rating of this application.4% of the participants strongly agreed with Siti Hasmah Digital Library recommending this application to other organization.16 shows that 44.5 above show the overall participant‟s rate this application. Figure 3.2 33.2 55.4 100.3 44. 77 . This is another strong indication of the usefulness and effectiveness in helping participants to create storyboard in elearning. only 1 participants rate the application is very bad. The rest of the participant‟s rate moderate while 3 persons rate good.3 44. Out of 9 participants. Table 3.6 100.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 Cumulative Percent 22.

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. there are no comments by the participants. Comments are important in the questionnaire to get a general feedback and reaction from the participants towards the application. The application should offer diagram to suit the learning concept. 1. 78 . 2. After analyzing the questionnaires. One recommendation given was for the application to provide a sharing system to share documents amongst each other. The participants are also asked to give comments on the application. The date for dateline should include in the application.A Storyboard System To Facilitate Tasks In E-Learning 3. the following recommendation given by the participants were thought to help the application functionality and usability further. 3.4. However.

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

maintaining. 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 . System Architecture 4. designing. This storyboard system has to be reliable. testing.1 Executive Summary This project is pleased to develop a storyboard system for enhancing learning task in e-learning. Developer team will be responsible for the development of the system which includes requirement gathering from all parties. managing. scaleable.A Storyboard System To Facilitate Tasks In E-Learning 4. implementing. planning. integrating. 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. efficient and easy to use. delivering. as well as providing consultation for the system.

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

and add comments and logout from the system. Figure 4. Below are the use cases for storyboard tools. edit profile. review storyboard. 82 .A Storyboard System To Facilitate Tasks In E-Learning 4.3. review analysis documents. and organize system requirements. submit reminder.1 Use Case A use case is a methodology used in system design to identify. The use case technique is used to capture a system's behavioral requirements by detailing scenario-driven threads through the functional requirements. What ID can do to the system is login into the system. change password.3 System Design Siti Hasmah Digital Library 4.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. clarify.

3: Use case for Reviewer 83 . create analysis documents. edit profile. change the password.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. and add comments and logout from the system. Figure 4. create storyboard. What Subject Matter Experts can do to the system is login into the system.

84 . view analysis documents. view storyboard.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. and add comments and logout from the system. and add comments and logout from the system. view storyboard. What Reviewer can do to the system is login into the system. edit profile. 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. Figure 4. edit profile. change password. What Proof Read can do to the system is login into the system. change password.

A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 4. add users. What Administrator can do to the system is login into the system. delete users and logout.5: Use case for Administrator Figure 4. 85 . view 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.

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

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

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

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

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

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

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

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

expanded deployment options. Because of the difficulties encountered.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 .3 Difficulties Encountered And Solution Applied At first. include easier design integration. it enhances the application functionality and improves developer productivity.NET is the framework must be installed and it‟s becoming a default install on servers. 4. However. The downside to Visual Basic . 94 . the storyboard system is built on Visual Basic .NET. and better data access and synchronization. it has a downside in using this tool. Besides that. with Adobe Dreamweaver and phpmyadmin. However. the implementation of this storyboard system will used an Adobe Dreamweaver and Wamp that include a phpmyadmin. 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.4. the language is never going to be quite as quick as something that made in C/C++.

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

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

2. Because of the goal cannot be identified. 3.4. 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. No particular goals of developing storyboard contents are identified to the SME 3. Multiple meeting between ID and SME is made to ensure that the critical areas of the system are captured. Every member in the team put in the extra effort to ensure that all the deliverables are handed in on time. 97 .6 Solution for Difficulties Encountered for the Above Matter The following cite the resolution taken to overcome the difficulties encountered: 1. Short development time given 4. Learning goals cannot be identified in advance 2. Standardize the principles and procedures so that SME can comply with it to meet the datelines of storyboard submission.4.A Storyboard System To Facilitate Tasks In E-Learning 4. Lack of communication between IDs and SMEs 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

2 is the page for SME to login. SME will be taken to the main screen (Figure 5. The visibility of the function that is available on the application menu is home. Figure 5. 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.3: SME Main page Upon successful login. 101 .3) which will display the application menu on the upper side. analysis document. profile setting. They are required to login in order to use Siti Hasmah Digital Library the application.

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

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

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

10 for SME to fill.10: Analysis Documents page This is the Analysis Documents (content template) page. Figure 5. the system will provide the content template as shown in figure 5. After it has been initiated.10). This page could only be initiated by a SME only. 105 .11). 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.11: View Analysis Documents page By clicking on the submit button (as shown in Figure 5.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 5.

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

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

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

A Storyboard System To Facilitate Tasks In E-Learning 6. 6. In order to prove this functional testing. The test designer selects valid and invalid inputs and determines the correct output. By using this method. though usually functional. There is no knowledge of the test object's internal structure (Black box testing.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. W.4 Test Result The final result of the application functional test results are shown in Table 3.1: Test results of User Access module functionality.R. The black box methods allows test case to be derived from the requirements specifications. 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. Each module‟s functionality was tested with regards to its specifications (requirements) and its context (events). Table 6. it takes an external perspective of the test object to derive test cases. 2007).17 below. The output was then checked for its correctness (Wan Hassan. Functionality To ensure access to authorized user To deny access to unauthorized user To terminate user session upon logout Pass    Fail 109 . 2010).

2: Test results of User Management module functionality. Functionality Login Edit Profile Change Password Create Analysis Doc Create Storyboard Add Comments Logout Pass        Fail 110 . 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.A Storyboard System To Facilitate Tasks In E-Learning Table 6.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.

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

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

PDF format or . 113 . We also would like to enhance the interface of the system and make it more attractive.A Storyboard System To Facilitate Tasks In E-Learning 6. 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.doc format and it also can be print out from the format.7 Future Enhancement Siti Hasmah Digital Library For future enhancements.

The e-Learning Storyboard System follows the set of competencies for instructional designers developed by International Board of Standards for Training. users can operate on the prototype. This system proposed a high fidelity prototyping that are fully interactive. 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. For example. simulating much of the functionality in the storyboard. and Instruction (IBSTPI) (Smith and Ragan. 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. This study contributes to the development of storyboard in E-learning system in Multimedia University and towards the e-learning industry in Malaysia. Siti Hasmah Digital Library 114 .A Storyboard System To Facilitate Tasks In E-Learning 7. 2005). or even perform some real tasks in De-ELSS. It also could improve the low fidelity prototyping from the sketch based which previously applied the traditional method. The E-learning Storyboard System (De-ELSS) will develop to improve the communication issues between SME and ID. Performance.

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful