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

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

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

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

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

where content authors. Reviewer and Proof Reader. trainers. The importance of instructional design and design process are discussed to explore the issue of designers‟ tasks and communication among Designers. 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. De-ELSS System is an application that assisting the SME to construct E-learning in order to improve communication problem between SME and ID. multimedia. teachers. Siti Hasmah Digital Library 5 . instructional designers. technicians.A Storyboard System To Facilitate Tasks In E-Learning MANAGEMENT SUMMARY E-learning is perceived as a group effort. database administrators. The project presents a system framework to enhance a storyboard system in Multimedia Learning System. and people from various other areas of expertise come together in order to serve a community of learners.

4 Tasks & Roles for Storyboard Designers and Reviewer Table 2.10 Advantages of DEMAIS Table 2.9 Advantages of Raptivity Table 2.15: Advantages of Anecdote Table 2.11 Advantages of Storyboard Tools 1.1 Major activities of Instructional Designer Table 2.5 Similarity and Differences for Media Storyboard and ELearning Storyboard Table 2.7.02 Table 2.3 People who involved in Instructional Design Table 2.4 Table 2.12 Advantages of Springboard 0.14 Advantages of DENIM Table 2.1 Participant‟s number of years using the computer Table 3.16: Comparisons among Storyboard Tools Table 3.3 The participants feedback on communication between team members Table 3.2 Advantage of using Systematic Instructional Design Table 2.91 Table 2.8 Storyboard Authoring Tools Comparisons Table 2.2 Participant‟s number of years surfing the internet Table 3.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.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 .1 Software tools/ devices for GUI /design purpose Table 2.7 Comparison templates Table 2.13 Advantages of MockupScreens 4.6 Elements in E-learning Storyboard Table 2.

15 Participant‟s feedback on using the application at work Table 3.16 Participant‟s feedback on recommending the application Table 6.5 Test results of Reviewer module functionality Table 6.6 Participant‟s feedback on content template storyboarding Table 3.7 Participant‟s feedback on various components Table 3.3 Test results of Instructional Design module functionality Table 6.8 Participant‟s feedback on application ease of use Table 3.A Storyboard System To Facilitate Tasks In E-Learning 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 Table 3.1 Test results of User Access module functionality Table 6.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 .13 Participant‟s feedback on production turnaround time Table 3.4 Test results of Subject Matter Expert module functionality Table 6.2 Test results of User Management module functionality Table 6.10 Participant‟s feedback on understanding of SME Table 3.12 Participant‟s feedback on dateline of the storyboard Table 3.9 Participant‟s feedback on dealing with clients or SME Table 3.5 Participant‟s feedback on output produces Table 3.11 Participant‟s feedback on practice and tests by SME Table 3.14 Participant‟s feedback on production costs Table 3.

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

7.6.11.1.10. Analysis Documents page Figure 5. Reviewer Main page Figure 5.3. SME login page Figure 5. View Analysis Documents Figure 5.13.12. Admin Main page Figure 5. Proof Read Login page Figure 5.8. SME Change Password page Figure 5. Index page Figure 5. System Architecture for Storyboard System Figure 4. Sequence Diagram for a Storyboard System Figure 4.5. SME Main page Figure 5.10. Add Screen page Figure 5.11. Reviewer Login page Figure 5.8.6.9. Gantt chart for Phase 1 Figure 4.2. Admin Login page Figure 5. Activity Diagram for a Storyboard System Figure 4.7. Use case for Administrator Figure 4.4.14. Use case for Proof Read Figure 4. SME Edit Profile page Figure 5.5. Proof Read Main page Figure 5.15.4. Class Diagram for a Storyboard System 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. 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 2 Figure 5.9.

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 .

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

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

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

video or multimedia and will not be useful for E-learning work.  Storyboard Templates which are not suitable for e-learning The current storyboard template are not standardize and not suitable for Elearning. because there is no “lead time” to the education. The storyboard that they used is never change.  No particular goals of developing storyboard contents are identified to the SME. In the existing system. In such cases. 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.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. which in turn is mainly suitable for declarative (factual) or canonical (right/wrong) knowledge. The templates of the storyboard will only be suitable for frame-based E-learning. Many of the storyboard templates only relate to film. This is more difficult when they arrive at adding Siti Hasmah Digital Library 15 .A Storyboard System To Facilitate Tasks In E-Learning 1. and since reflection and planning are central to instructional design. 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 another contributing factor to the slow cycle of generating content storyboard. 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. However. there are available for creating e-learning content storyboard that caters for SME as their target user. it would be very difficult to set a common schedule for these two parties to congregate and collaborate on their content development effort. 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.  Time Constraint that cause of Slow turnaround time Since the ID and SME are two different groups of people being pulled together to work on a content project. there need to be an application to assist them in this conquest. In order to make it easier for the SME to generate an e-learning content storyboard.A Storyboard System To Facilitate Tasks In E-Learning something into the storyboard. 16 . A lack of attention to this milieu could result in non-acceptance of the instructional designer as a change agent or ineffective learning design. For instance the SME may not understand that they need to be constantly involved with a project.  Lack of suitable application that would expedite development process. A project will not be successful if the SME has irregular contact with the instructional designer and development team.

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

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

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

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

Performance. 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. 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. With Storyboard.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. users can operate on the prototype. and Instruction (IBSTPI). Eventually. For example. This will lead changes to high fidelity prototyping that are fully interactive. or even perform some real tasks with it. 2005) 21 . simulating much of the functionality in the storyboard.A Storyboard System To Facilitate Tasks In E-Learning 1. (Smith and Ragan. The De-ELSS follows the set of competencies for instructional designers developed by International Board of Standards for Training.

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

23 .A Storyboard System To Facilitate Tasks In E-Learning 2. 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”.2. and further discuss detailed of the storyboard. The sources for the literature are collected from some articles. instruction is the intentional arrangement of experiences.1 Introduction This chapter examines previous literature or studies conducted with the Elearning storyboard. and evaluation”.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. Instruction is the international facilitation of learning toward identified learning goals. This chapter will focus on the Instructional Design and its concepts. Siti Hasmah Digital Library 2. leading to learners acquiring particular capabilities. activities. LITERATURE REVIEW 2. published journals and some online references.2. information resources.2 A brief history of Instructional Design Instructional Design is the combination of the word instruction and design itself. academic research papers.2 Instructional Design 2. 2. In both definitions.

” 2. 1987). at some point the term “planning” no longer fits and “design” becomes a better descriptor.3 The Instructional Design process There are many interpretations that described the term „instructional design‟. 24 . According to (Mager. 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”. 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. According to (Schon. When projects become complex. Design is related to planning.2.A Storyboard System To Facilitate Tasks In E-Learning Design is an activity or process that people engage in that improves the quality of Siti Hasmah Digital Library their subsequent creations.1. a student of effective professional practice has been described design as a process of “reflective conversation with the materials of a given situation. Another way to define instructional design is to describe the process involved in the systematic planning of instruction.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.7.7. primarily of interest to film directors.4 Siti Hasmah Digital Library Storyboard Tools 1.7.4.4 Table 2.1 Advantages of Storyboard Tools 1.4 is an organizational tool.3 Storyboard Tools 1. storyboard artists and film-makers generally. Once a project is complete this text can be used to automatically generate tables of information which may use when filming.4 (Storyboard Tools 1.3. Storyboard Tools has its own drawing tool with specialized features for storyboarding. 2009). Figure 2.7. a web page can be generated from the project at the click of a button. Web page Drawing tool 42 . Figure 2. A "visualiser" program lets you view images in sequence.A Storyboard System To Facilitate Tasks In E-Learning 2.7.7. and play around with a number of editing effects including fades and dissolves. 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.4.9: Screenshot for the Storyboard Tools 1.4 2.9 shows the screenshot for the storyboard tools 1.4. 2009) Features Text Description Storyboard Tools stores text along with the images. In addition.8.7.8.11: Advantages of Storyboard Tools 1.

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

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

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

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

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

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

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

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

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

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. 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 .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. but these notes cannot be interpreted by the system. 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. 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. 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.91 are unavailable Because of the experiment interactively. and easily edit graphics Users had trouble creating navigational links between pages Some features in springboard 0. It does not check for consistency among behavior definitions.

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

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

The final section is on collaboration procedures.2. 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.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 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.2. 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.A Storyboard System To Facilitate Tasks In E-Learning 3. storyboarding process in e-learning and collaboration procedures. Instructional Designer‟s background.4 55 . academic qualifications and professional resume. 3. The interview question can be seen at appendix.

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

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.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. Therefore. the interviewee belonged to an organization that has proper development process in place. 57 . Question 2: How does your storyboard template look like? Storyboard template is design to suit the organization needs. 3. Figure 3.6 Interview findings on Section B (storyboarding process in e-learning) Question 1: Does your organization have a clear guideline on content writing? Like most established firms dealing with e-learning content development. Question 4: Have you conducted any training on Instructional Design? The interviewee also often conducts instructional design workshops.1 shows the storyboard template from the interviewee.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.

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. SCO titles and number also includes in the storyboard. screen area (for the content) and instruction for the developers. The storyboard contents audio/voice over column.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). 58 .A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 3.

Discussion with SME is important to make sure learning process take place with the assistance of animation and audio. The interviewee need 59 . 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. Ex. The SME will provide the content and materials then ID will assist to make the interactivity and insert multimedia elements in the storyboard before the ID pass the storyboards to the developers. do you agree that once in a while Storyboard Designer (SME) do need to be reminded on how to write content? The interviewee had adequate practice in writing content to the extent that the process has become a natural process in the work. All multimedia inserted must serve the purpose. It‟s easy for the SME that requires minimal computer skills to do it.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 7: Even after you have been doing ID for years. Behaviorism learning approach may have different template from constructivism approach.

Meetings and ad-hoc discussions are the methods of getting all the team members to get together and discuss certain raising issues.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. there are certain of team members not able to come during the meetings due to a clash of timing between team members. Question 3: How do you manage the collaboration effort between all the parties? Collaborating between all parties involved in the development of storyboard is not easy. However. 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.2. 60 . animators and programmers are usually called for opinions and consultation only when they feel the need arise. Otherwise the rest of the team member only gets hold the storyboard when it is deemed ready for the production.A Storyboard System To Facilitate Tasks In E-Learning reminders on how to write unless the interviewee is taken out of the job scope for Siti Hasmah Digital Library a long period of time. The other team members such as graphic designers. 3.

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

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

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

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

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.4 100. almost all of the participants have been using Siti Hasmah Digital Library the computer for more than 10 years.0 Valid Percent 55. Frequency Valid 5-10 years > 10 years Total 5 4 9 Percent 55. all the participants were assumed to be professional with through navigating the internet by using a typical web browser.0 Valid Percent 33. With that kind experience explore to the internet. 67 .3 100. The rest of participants had more than 10 year‟s experiences using the computer.2) Table 3. Frequency Valid 5-10 years > 10 years Total 3 6 9 Percent 33. (See table 3.0 33. 55.7 100.7 100.6 44.2: Participant‟s number of years surfing the internet.1: Participant‟s number of years using the computer.6 100.3 66.0 Cumulative Percent 33. Table 3.6% had 5 to 10 years experience surfing the World Wide Web while the other had more than 10 years worth.0 Cumulative Percent 55.3% of the participants had been using the computer for 5 to10 years.6 44. This shows that participants should have no problems in operating the computer.3 66.4 100.1 and 3.0 Out of the 9 participants.

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

5: Participant‟s feedback on output produces.1 22.2% of the participants agreed with the output produce in word/power point.2 77.1 33.0 The existing storyboard that has been used by the MPU unit comes out with word or power point output.1 22. The format used in the word/ power point output is easily understandable by the multimedia development team.1 100.4: Participants feedback on content of the storyboard. The rest of the participants are strongly disagreed and disagreed.6 11.1 55.9 100.2 100.5.6 11.8 100.0 69 .6 22.0 Valid Percent 11. 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.1 100.6 22.1 11.2 55.1 22.3 88. Table 3.0 Valid Percent 11.1 11. 55. Frequency Valid disagree average agree strongly agree Total 1 2 5 1 9 Percent 11. as shown in table 3.0 Cumulative Percent 11. However.A Storyboard System To Facilitate Tasks In E-Learning Table 3.0 Cumulative Percent 11.1 55.2 55.6% of the participants averaged followed by 22.2 100.

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

Only 1 person shows strongly disagree with the application.2 100.0 Valid Percent 11.7 100.1 33.7: Participant‟s feedback on various components. Table 3.4 22.8 100.1 22.1 22.0 71 . 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 22.3 77.8 shows that most of the participants agreed with the application were easy to use in navigating through the content of storyboard in elearning. 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.4 22.0 Valid Percent 11.2 100.2 44.1 22.A Storyboard System To Facilitate Tasks In E-Learning Table 3.2 66.3 100.1 33.0 Cumulative Percent 11. Overall.8: Participant‟s feedback on application ease of use.0 The result in table 3.7 100.2 66.0 Cumulative Percent 11.2 44.

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

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

1% of the participants were strongly disagreed.2% is disagreed on this term as well.5 Opinion In this section.12: Participant‟s feedback on dateline of the storyboard.13 shows 44.7 22.0 3. Table 3.8 100.0 Valid Percent 11.2 100. Other 22. 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.7 22. Siti Hasmah Digital Library Do SME. 74 .0 Cumulative Percent 11. 11. averaged and strongly agreed with it.4.A Storyboard System To Facilitate Tasks In E-Learning Table 3.4% of the participants agreed that the application could reduce the storyboarding lifecycle.1 66. opinion from the participants shows in the following table.1 66.1 77.2 100.

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.3 44.4 11. 75 .0 When the participants were asked if they would consider using the application will be able to lower the cost of content production.3% of the participants agreed as shown in the table 3.0 Valid Percent 11. Other 11.1% gave disagreed and averaged.1 44.2 11.1 100.2 11.4 11.A Storyboard System To Facilitate Tasks In E-Learning Table 3.1 33.1 100.1 44.13: Participant‟s feedback on production turnaround time. 33.1 22.9 100.1% of the participants gave strongly „disagreed‟ and „agreed‟ to this term as well.1 22.0 Cumulative Percent 11. The same percentage of 22.14.4 88.

0 Table 3. The rest of the application shows the same percent with 22.2 100.3 11.3 22. Siti Hasmah Digital Library Do you think such an application will be able to lower the cost of content production? Frequency Valid strongly disagree disagree average agree strongly agree Total 1 2 2 3 1 9 Percent 11.2% disagreed.14: Participant‟s feedback on production costs.0 Cumulative Percent 11.1 22.2 100.15 below shows that a huge majority (33.2 33.3 55.4 77.3 11. 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.1 100.3%) of the participants consider using this application in their professional work.0 Valid Percent 11.8 100.0 Valid Percent 22.2 22.0 Cumulative Percent 22.15: Participant‟s feedback on using the application at work.0 76 .2 33.2 22.1 22.2 44.1 33.6 88.2 22.2 22. averaged and strongly disagreed with it.3 22.1 100.2 33.A Storyboard System To Facilitate Tasks In E-Learning Table 3.9 100.2 33. Table 3.

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

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

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

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

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

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

edit profile. and add comments and logout from the system. create analysis documents. Figure 4.3: Use case for Reviewer 83 . What Subject Matter Experts can do to the system is login into the system.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. create storyboard. change the password.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Figure 4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4: Test results of Subject Matter Expert 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.3: Test results of Instructional Design module functionality.A Storyboard System To Facilitate Tasks In E-Learning Table 6.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.

5 Problem encountered Since we are lacking in knowledge of PHP and some other software. we are not able to apply extra features into this system application.6: Test results of Proof Read 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. Functionality Login Edit Profile Change Password View Analysis Doc View Storyboard Add Comments Logout Pass        Fail 6. Siti Hasmah Digital Library Functionality Login Edit Profile Change Password View Analysis Doc View Storyboard Add Comments Logout Pass        Fail Table 6.A Storyboard System To Facilitate Tasks In E-Learning Table 6. 111 .5: Test results of Reviewer module functionality.

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful