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

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

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

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

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

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

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

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

3 Test results of Instructional Design module functionality Table 6.16 Participant‟s feedback on recommending the application 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 .9 Participant‟s feedback on dealing with clients or SME 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.14 Participant‟s feedback on production costs Table 3.12 Participant‟s feedback on dateline of the storyboard Table 3.6 Participant‟s feedback on content template storyboarding Table 3.15 Participant‟s feedback on using the application at work Table 3.11 Participant‟s feedback on practice and tests by SME Table 3.13 Participant‟s feedback on production turnaround time Table 3.5 Participant‟s feedback on output produces Table 3.10 Participant‟s feedback on understanding of SME Table 3.5 Test results of Reviewer module functionality Table 6.8 Participant‟s feedback on application ease of use Table 3.4 Test results of Subject Matter Expert module functionality Table 6.7 Participant‟s feedback on various components Table 3.2 Test results of User Management module functionality Table 6.

3. Screenshot for the DENIM Figure 2. Use case for Subject Matter Expert (SME) Figure 4.11.6.5. Component of Storyboard Figure 3. Flip Book (before open) Figure 2. Screenshot for the Storyboard Tools 1.91 tool Figure 2.2.1.4. Comparison Chart Figure 2.4 Figure 2.1.12. Reviewer. The Content Manager Figure 2.4. SME and Proof Read Figure 2. Total Questionnaire Participants Figure 3. Screenshot for the Anecdote tool Figure 3.13.1. Radial Diagrams Figure 2. Screenshot for the Springboard 0.7.3.2.9. The narration (voice script) editor.10. Figure 4.3.02 tool Figure 2. What is your highest tertiary education level? Figure 3. 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 . ID.2.5. An Instructional Design Process Model Figure 2.7. Participant‟s overall rating of this application. Screenshot for the MockupScreens 4.1. How many years of experience do you have in relation to the job scope stated above? Figure 3.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. Use case for Instructional Designer (ID) Figure 4. The DEMAIS Storyboard Editor Figure 2. Class diagrams for Administrator.8. Figure 2.

6.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. Activity Diagram for a Storyboard System Figure 4. Admin Login page Figure 5. SME Main page Figure 5.11. SME Edit Profile page Figure 5.7. Proof Read Login page Figure 5. SME Change Password page Figure 5.14. View Analysis Documents Figure 5.4. SME login page Figure 5.5.12. Admin Main page Figure 5. Sequence Diagram for a Storyboard System Figure 4.2. Reviewer Main page Figure 5. Add Screen page Figure 5.8. 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 . Reviewer Login page Figure 5.5.11.7. Index page Figure 5.10.4.9. Use case for Administrator Figure 4. Gantt chart for Phase 1 Figure 4. Gantt chart for Phase 2 Figure 5.1.6. Proof Read Main page Figure 5.10.8.9.3. System Architecture for Storyboard System Figure 4. Use case for Proof Read Figure 4.13. Analysis Documents page Figure 5. Class Diagram for a Storyboard System Figure 4.15.

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

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

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

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

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

Many of the storyboard templates only relate to film. the SMEs have to comply with a lot of principles and procedures to meet the datelines of storyboard submission. The storyboard that they used is never change. This is more difficult when they arrive at adding Siti Hasmah Digital Library 15 . video or multimedia and will not be useful for E-learning work. and since reflection and planning are central to instructional design. The templates of the storyboard will only be suitable for frame-based E-learning. In such cases. In the existing system.  Storyboard Templates which are not suitable for e-learning The current storyboard template are not standardize and not suitable for Elearning. meaning here the SMEs still using the paper based storyboard. there is limited opportunity to apply many of its principles and procedures. because there is no “lead time” to the education.  No particular goals of developing storyboard contents are identified to the SME.A Storyboard System To Facilitate Tasks In E-Learning 1. which in turn is mainly suitable for declarative (factual) or canonical (right/wrong) knowledge. 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 need to be an application to assist them in this conquest. but the system does not cater the application to facilitate between the team members. 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.  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. 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. However. A project will not be successful if the SME has irregular contact with the instructional designer and development team. This is another contributing factor to the slow cycle of generating content storyboard. there are available for creating e-learning content storyboard that caters for SME as their target user. 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. it would be very difficult to set a common schedule for these two parties to congregate and collaborate on their content development effort. The size of the paper based storyboard is fixed and cannot be change.A Storyboard System To Facilitate Tasks In E-Learning something into the storyboard. In order to make it easier for the SME to generate an e-learning content storyboard.

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

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

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

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

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

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

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

24 . 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”.1. at some point the term “planning” no longer fits and “design” becomes a better descriptor. When projects become complex. Another way to define instructional design is to describe the process involved in the systematic planning of instruction.2. the instructional designer‟s job is to answer the following three major questions:   Where are we going? (What are the goals of the instruction?) How will we get there? (What are the instructional strategy and the instructional medium?)  How will we know when we have arrived? (What should our tests look like? How will we evaluate and revise the instructional materials?) These three questions can be stated as major activities that an instructional designer completes during the design and development process as shown in Table 2. Design is related to planning.3 The Instructional Design process There are many interpretations that described the term „instructional design‟. According to (Mager. 1984). 1987).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. a student of effective professional practice has been described design as a process of “reflective conversation with the materials of a given situation. According to (Schon.” 2.

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

distributed. developers and those who will implement the instruction. and analysis of task) and the written products that are results of instructional design efforts assist the process of review and revision of work in progress in a coordinated team effort. and acceptable solutions to the instructional problems that there are designed to solve. Information about learners should take precedence over other factors that might drive design decisions. The systematic process and resulting written documentation allow for communication and coordination among individuals involved designing. because design and development have employed information about the learners and setting. and appealing instruction. In their constant querying of a subject matter expert for clarification. and used in the field. efficient. duplicated. It allows for common language and general procedure. Efficiency is particularly facilitated by the process of instructional analysis in which appropriated strategies promotes the appeal of instruction. Supports effective. All of these factors are considered indicators for success. description of target audience. and appealing. efficient. Designers spend a great deal of effort during the beginning stages of a design project trying to find out about the learner. producing and delivering instruction. In addition. The process of design itself focuses on effective instruction.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 2. Because the products of systematic instructional designer are in fact physical “products”. there may be Facilitates diffusion/ dissemination/ adoption. including the content itself.2.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 process of formative evaluation provides the opportunity to revise instruction to make it more effective. Often the designer is not a content expert. workable. 26 . Supports coordination among designers. the learner is the focus of instruction. products will have a high likelihood of being practical. The written plans (goals. designers are standing in the place of the learner.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. 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. have developed an instructional approach that gives reason to believe that the problem can be solved and the learning goals will be met. Facilitates congruence among objectives. The innovations that are generally appealing are those that have clarified the problem into a learning goal. Provides a systematic framework for dealing with learning problems. or video).A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library Supports development for alternate embodiments or delivery systems. and assessment. Frequently. activities. computer. 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. web. 27 . creative individuals not trained in systematic instructional design will develop ingenious approaches to instruction that are rather like “solutions looking for a problem”. 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.

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

A Storyboard System To Facilitate Tasks In E-Learning

2.2.8 Tasks & Roles for Storyboard Designer and Reviewer

Siti Hasmah Digital Library

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

     

Reviewer

29

A Storyboard System To Facilitate Tasks In E-Learning

2.2.9 Competencies, Standards, and Ethics of Instructional Designers

Siti Hasmah Digital Library

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

A Storyboard System To Facilitate Tasks In E-Learning

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

Siti Hasmah Digital Library

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

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

31

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

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

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

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

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

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

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

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

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

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

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

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

91(Storyboard 0.91.A Storyboard System To Facilitate Tasks In E-Learning 2.8.02. and quickly create wireframe of your application. Figure 2. 2009).4. The disadvantages are as follows:  Users had trouble creating navigational links between pages that they had initially drawn far apart on the canvas.11 shows the screenshot of MockupScreens 4.91 Siti Hasmah Digital Library Table 2.91 Same as other storyboard tools. while the coding hasn't even started yet. MockupScreens main design goals are ease of use and productivity (MockupScreens. With MockupScreens you can experiment interactively with your clients.8.2 Disadvantages of Springboard 0.12: Advantages of Springboard 0. special effects Use a multi-layer model to productively reuse content. 44 .91 also have a disadvantages. 2.5 MockupScreens 4.02 MockupScreens 4.91 are unavailable 2.1 Advantages of Springboard 0. this Springboard 0. and easily edit graphics.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.4.  Some features in springboard 0.8. 2009) Features Natural-media and vector tools Text and graphics Layers Multi-layer model Description This tools will help in outline the story to organize the work.

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

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

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

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

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

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

7.16: Comparisons among Storyboard Tools Raptivity Easily used with other tools More than 200 interactions Numerous options available Expands capabilities Can easily be embedded into eLearning content Provides a prebuilt library of 200 DEMAIS Designing Content Exploring Behavior Operationalizing Content and Behavior Designs content using the storyboard and narration editors Enables a designer to view multiple storyboards. Table 2.91 4. 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. sketch and narrations A designer sketches behavioral ink strokes between objects or multiview editor Storyboard Tools 1. advantages and disadvantages among Storyboard Tools discussed in the literatures.A Storyboard System To Facilitate Tasks In E-Learning Siti Hasmah Digital Library 2. draw sketches and type text annotations 51 .4 Text Web page Springboard MockupScreens 0. 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. copy.10 Data Analysis Table 2. Import. 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.02 Naturalmedia Easy to use vector tools Text and Clickable graphics prototype Layers Experiment interactively Multi-layer model Help in Need no outline the documentation at story first design.16 will analyze and compare the features.

but these notes cannot be interpreted by the system. It does not check for consistency among behavior definitions. 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. directors & storyboard artists So many buttons not in sequence manner and make a confusing to the users Use a multilayer model to productively reuse content. It 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. 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 . and easily edit graphics Users had trouble creating navigational links between pages Some features in springboard 0.91 are unavailable Because of the experiment interactively.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.

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

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

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.2.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. The interview question can be seen at appendix. 3. Instructional Designer‟s background. The criteria of the background such as years of experience. The final section is on collaboration procedures. The first section (Instructional Designer‟s background) looked into the background of the interviewee and was meant to establish the interviewee credibility as an ID.4 55 .2. storyboarding process in e-learning and collaboration procedures. academic qualifications and professional resume.A Storyboard System To Facilitate Tasks In E-Learning 3.

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.5 Interview findings on Section A (Instructional Designer’s background) Siti Hasmah Digital Library Name: Melor A. institutions of higher learning and corporate banking as well. it was found that the IDs have 5 years of professional experience in the field of instructional design. Question 3: How many instructional design project have you successfully commissioned? The interviewee has successfully commissioned more than 6 projects for various industries such as government departments. This proves that the interviewee has both 56 . 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. This also means that the interviewee has the necessary theoretical foundation on education learning theories. Question 2: What qualifications do you posses to quantify you as a credible ID? The interviewee holds a BMM Multimedia Innovation and attended workshop for Instructional Design Theory and Practical.A Storyboard System To Facilitate Tasks In E-Learning 3.2.

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. the interviewee belonged to an organization that has proper development process in place. Therefore.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.2. Question 2: How does your storyboard template look like? Storyboard template is design to suit the organization needs. 3. 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. 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. guidelines in content creation have also been established within the organization and put in place to ensure speedy development process and minimize faulty output. 57 . Figure 3.

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

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

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.2. 60 . However. 3. Meetings and ad-hoc discussions are the methods of getting all the team members to get together and discuss certain raising issues. 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. The other team members such as graphic designers.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. 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. 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.

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

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

65 . In total.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.4. there are nine participants that participate in this questionnaire.1 Total Questionnaires Participants Figure 3. 3.2 above show the total number of the participants from Multimedia Production Unit (MPU). The following results of the questionnaires findings will be discussed below: 3.A Storyboard System To Facilitate Tasks In E-Learning  Open ended question Siti Hasmah Digital Library The questionnaires are aimed to get feedback and comments from participant‟s regarding the application and how to improve the application‟s functionality and usability. From this figure. The questionnaires can be seen in the appendix. only one is Instructional Designer.

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

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

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

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

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

0 Cumulative Percent 11.1 22.2 66.3 100.0 71 .4 22.1 22. Overall.0 Valid Percent 11.1 33.2 100.2 44.0 Cumulative Percent 11. Table 3. 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. 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.7 100.8 100.1 22.7: Participant‟s feedback on various components.A Storyboard System To Facilitate Tasks In E-Learning Table 3.7 100.8: Participant‟s feedback on application ease of use. Only 1 person shows strongly disagree with the application.8 shows that most of the participants agreed with the application were easy to use in navigating through the content of storyboard in elearning.0 The result in table 3.0 Valid Percent 11.3 77.4 22.2 44.1 33.2 100.1 22.2 66.

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

1% strongly disagreed.A Storyboard System To Facilitate Tasks In E-Learning Table 3. 73 .12 shows the majority of the participants averaged with the awareness of the dateline of the storyboard contents.9 100. Do the SME know what to do during the practice and tests? Frequency Valid disagree average Total 1 8 9 Percent 11. the table 3.2% agreed and 11.1 66.9% participants averaged followed by 11.11 shows that 88.1 88.9 100.11: Participant‟s feedback on practice and tests by SME.0 Cumulative Percent 11. The rest of the participants with 22.2 100. Table 3.2 100.1% disagreed to this term as well.1 77.7 22.0 Cumulative Percent 11.0 In terms of the participants feedback on practice and test by SME.1 66.1 88.10: Participant‟s feedback on understanding of SME.0 Table 3.8 100.0 Valid Percent 11.1 100. Siti Hasmah Digital Library Do the SME understand the instruction? Frequency Valid disagree average agree Total 1 6 2 9 Percent 11.7 22.0 Valid Percent 11.

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

Other 11.1 100.14. 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.0 When the participants were asked if they would consider using the application will be able to lower the cost of content production.2 11.4 11.9 100.1 100.3 44.1 22.4 11.3% of the participants agreed as shown in the table 3.A Storyboard System To Facilitate Tasks In E-Learning Table 3.0 Valid Percent 11.1 44.1% gave disagreed and averaged.1% of the participants gave strongly „disagreed‟ and „agreed‟ to this term as well.0 Cumulative Percent 11.1 44. 33.13: Participant‟s feedback on production turnaround time. The same percentage of 22.1 33.2 11. 75 .1 22.4 88.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

This tools application can be run on a Windows system. 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. Administrator Siti Hasmah Digital Library The Administrator are able on login. instructional designers and reviewer to do their jobs.2 Web Design Tools Web design tools such as Adobe Dreamweaver are used to create the system. 4. This tool provides a design and code editor in one tool.A Storyboard System To Facilitate Tasks In E-Learning 5. Other tool that is used in the development is Adobe Photoshop. It also allows easy addition of elements onto web pages and made creating interactive rollover images possible within a few clicks. delete users and logout. It is used to create icons and graphics to enhance the outlook of the system.4. It is also help in assist the learning task for storyboard designers.4. view users.4 User Interface Design 4. 4. This storyboard system was developing in order to enhance and implement e-learning in MMLS to be efficiently. add users.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.

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

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

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

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

A Storyboard System To Facilitate Tasks In E-Learning

4.4.7

Project Development Team

Siti Hasmah Digital Library

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

Programmer

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

Data Architecture Coordinator User Interface Designer

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

Documentation/Report

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

System Analysis

1. Zarith Roshahiva Bt Kushairi

98

A Storyboard System To Facilitate Tasks In E-Learning

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

Siti Hasmah Digital Library

99

A Storyboard System To Facilitate Tasks In E-Learning

5.2 Screenshots of the system

Siti Hasmah Digital Library

5.2.1 Login Screen

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

Figure 5.2: SME login page
100

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

102 .5: Reviewer Main page Upon successful login. Reviewer will go to the main page as shown in figure above. Figure 5. Reviewer need to login in order to use this system application.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.

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

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

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

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

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

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

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

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

A Storyboard System To Facilitate Tasks In E-Learning Table 6. 111 .5 Problem encountered Since we are lacking in knowledge of PHP and some other software. 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.5: Test results of Reviewer module functionality. We believe we had tried our best to develop this project and applied all that we had learnt during our study in this university.6: Test results of Proof Read module functionality. we are not able to apply extra features into this system application.

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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful