BGM 203 - Assignment 1 Final

Project Proposal Prepared for: Assignment 1 of BGM 203 - Multimedia Authoring and Development Prepared by: Tirta AlinTitle: English+ - Interactive Media Exercise for Secondary School March 10, 2015

BGM 203 - Assignment 1 ! 1

ENGLISH+

EXECUTIVE SUMMARY

Objective Languages has became a main part of a way to communicate to each others. In communication, languages are specified as verbal communication. Languages is like a bridge that connects people. People can understand what the other people say through alphabet that becomes word, word that becomes sentence. There are roughly 6,500 spoken language in this world. However, about 2,000 of those languages have fewer than 1,000 speakers. The most popular language in the world is Mandarin Chinese, but there is one language that become a global language that is really important to learn. English it is. English is probably one of many languages that is easy to learn. English has a complex and easy-to-understand grammar compare to the other European language like German language (Deutsch). Although of the easiness of learning english, there are always some people that having difficulties in process of learning it. There are many fun and great way in learning languages, watching movies, listening to music for instance. Year 2000 is 15 years ago. Now, we live in the millennium era where all the stuff is optimised with technology. People, young people in the school specifically, tend to learn languages in their old-classic-boring way, with technology invade us, we can actually change those old-classic-boring way to fun-fascinating-entertaining way to learn. Using a little piece of technology I know, I want to create an Interactive English Language Media Exercise specifically design for secondary school. This multimedia product allows people learn english in much easier way. There will be 10 topics covered in which all of those topic will be blended when the user wants to test their knowledge through “Test My Knowledge” section and at the end there will be a score given to measure their knowledge level. Learning through this multimedia exercise gives people a different experience to exercise their english knowledge. As the result, people will know where mostly their mistakes are.

Goals There are a lot of advantages gained when having a good english. Please remain that english is a global language, and with Open Market is just around the corner, having a good english is not an exception. There are no bad thing about rising your self value.

Solution English+ is designed specifically for secondary school. I know, for them, the need of exercising their english is so important. A lot of questions and topics will be present in English+, and those question and topics present with a reason. The reason is to get people exercised and exercised with it. I believe that with a constant effort on exercising english using English+, people will be able to rise their english knowledge to a whole new level.


ENGLISH+

STATEMENT GOAL OF THE SYSTEM

Project Goals By developing this multimedia learning exercise product, I want the accomplish several goals for those who will use this product, in this case, the user is secondary school students. In SEA, (South East Asia) almost all of the country does not use english as their first languages, except Singapore, which use Singaporean English. So, we can assume that they are not that great in english. Thus, that is why English+ present, English+ is here to help.

English+ goals is as described:

• Increasing user’s english knowledge as they learn from the mistake (if they did) that English+ provide at the end of the session when answering the questions.

• Let the user know the common english mistakes and understand why it is a mistake.

• Let the user know how certain word pronounced as they hear it in the listening topic.

• To create a relaxing yet entertaining atmosphere at the same time when answering questions provided.

At the end, I always want the user always exercise, exercise and exercise using English+ in addition to have a wider english knowledge.


ENGLISH+

CHARACTERISTIC OF THE INTENDED USERS The Intended Users As I mention earlier, English+ is specifically designed for the secondary school students in which the intended users are obviously the secondary school students itself. In Malaysia, the secondary school student is at range of 13 year-old until 18 year-old which I assume their english level is at intermediate at average.

Characteristics of First User The first user is the lower secondary school. Lower secondary school students is emotionally unstable, from a expert point of view, secondary school students is in growth of puberty level. there are many characteristics which is stand out in this age, those are:

• Emotionally unstable.

• Start to develop a standard and hope of their behaviour that suit with the society.

• Tend to compare rules and ethical values or norms with the reality that occurs in their daily life.

• The tendency of their interest if somewhat clearer than before.

Characteristics of Second User While the first user is the lower secondary school students, the second user is the upper secondary school students. The upper secondary school students has age in range from 15 to 18 which obviously they are more mature than those who are in the lower secondary school. We can describe them as a teenager. Adolescence is a transitional period between their child’s life to something that is more mature, which is adult life. In this period, they are in search of what is actually they are. Characteristics of upper secondary school students are:

• Accept physical state and is able to use effectively.

• Start to choose and prepare their career that they want to start according to their skills and interests.

• Socially responsible on their behaviour.

• Achieving a mature relationship with their friends.

How They Will Be Attracted To The Multimedia System English+ is designed to be attractive. Loaded with tons of animation that will make English+ really attractive. The basic design of English+ is adopting the current trend design of the world of design, which is Flat UI. The beautiful flat UI matched with pastel-like colour will make English+ more eye catching. While the user think about the answer of the question given, there will be a relaxing music in the background that stimulates the user to think even more relaxed.


ENGLISH+

CONTENT SPECIFICATIONS List of Media Elements In developing a multimedia project, It should be contains media element to make it attractive. The word “Multimedia” itself actually describe what is should be in the multimedia project. English+ uses five media elements, those elements will be describe in the table below.

Naming Convention for Files


ENGLISH+

Media Elements Description

TextIt may be an easy content type to forget when considering multimedia systems, but text content is by far the most common media type in computing applications. Most multimedia systems use a combination of text and other media to deliver functionality.

ImagesA digital photograph will be displayed in the “Fun with Pictures” topic. Besides of that, English+ also uses images that completely created by myself in Photoshop, that will interact as a button.

AudioAudio files and streams play a major role in some multimedia systems. English+ uses audio as the background music that will give the user a relaxation feeling so the user can concentrate even more in answering the provided question.

VideoDigital video appears in many multimedia applications. In English+, the video will be appear in “Listening” topic. Typically the user watch the video while at the end, there will be a question provided related to the video.

Animation

Animated components are common within both Web and desktop multimedia applications. Animations can also include interactive effects, allowing users to engage with the animation action using their mouse and keyboard. English+ uses animation to translate from one screen to another.


Images

C:\Users\Alin\Desktop\Photoshop Document\Assignment\English+.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Back.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Home.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Mute.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Unmute.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Topic.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Score.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\Test Me!.png C:\Users\Alin\Desktop\Photoshop Document\Assignment\About.png C:\Users\Alin\Download\p_streamlight_75500.png C:\Users\Alin\Download\month_at_a_glance.png C:\Users\Alin\Download\page-3-img-2.jpg C:\Users\Alin\Download\dreamstime_l_18327587.jpg C:\Users\Alin\Download\Silhouette-Photography-GenCept.jpg

Technical Specification English+ is a simple multimedia project that does not need much resources to operates. Mostly, almost all of the Windows computer nowadays will runs English+ well. Even with 5 year-old netbook that was released in 2010, English+ will run just fine. Thus, to be more detailed, the computer’s minimum requirements specification that is needed to run English+ is explained in the table below:

Delivery Platform English+ will be developed for Windows running machine and will operate well in Windows. Mostly the workstation and the computer labs on the school around the world uses Windows as their operating system of choice, because it is easy to use and a lot of customisation can be applied. English+ needs Windows running machine to run well and can be operate in PC, netbook, and laptop.


ENGLISH+

Computer’s Minimum Requirements

Processor 1.6Ghz or faster processor for PC

Sound Card 32-bit

Memory 512MB or 1GB for PC

Graphic Card 128MB

Storage 500MB

Operating System Windows XP 32bit

I/O Devices Headphones or Speaker (Optional)

Video

C:\Users\Alin\Download\Royale_With_Cheese.mp4 C:\Users\Alin\Download\Ezekiel_25:17.mp4 C:\Users\Alin\Download\Marsellus_Gets_Medieval.mp4 C:\Users\Alin\Download\I_Shot_Marvin_in_the_Face.mp4 C:\Users\Alin\Download\The_Gold_Watch.mp4

SoundC:\Users\Alin\Desktop\Sound\BGM_Track1.mp3 C:\Users\Alin\Desktop\Sound\BGM_Track2.mp3 C:\Users\Alin\Desktop\Sound\BGM_Track3.mp3C:\Users\Alin\Desktop\Sound\Button_Click.mp3

FUNCTIONAL SPECIFICATION System Design The user interface of the English+ is based on the Flat UI design. Flat UI design is currently trending in the world of design. Many big company, for example Google, Apple, Microsoft and several good app developers applied the Flat UI elements both on their applications and their web. If we look closely, the Flat UI design is very minimalistic, minimal influence of 3D elements. Thus, those factors make the Flat UI is unique, compare to the other, Skeuomorphism for example. The images below shows the Menu Screen of the English+ that applied Flat UI elements to the design.

The design itself is very minimalistic, combined with pastel like colour, it makes the UI even more eye-catching. Please ignore the red dot with number inside it, it will be completely explained later in the Storyboard section.


ENGLISH+

Interactive Capabilities Multimedia project without animation is just plain slide. I do not want English+ to be like that. English+ has some nice animations in the system. The animation is created in Adobe® Flash Professional CS6. Let’s take an example of the screen that will be loaded with animation.

This screen is topic screen where user has the capability select questions by topic they want. In this screen, it has a lot of card-like field that form to be a list. Those 10 cards will be animated as the first five cards come from the upper part of the screen, while the rest of the card will come up from the bottom part of the screen. The animation itself gives the user a nice user experience. It will please the user as they use English+.


ENGLISH+

Use of Multimedia Elements Multimedia project should be use multimedia elements like text, images, audio, video, and animation. Without any of them, it is just like any other plain text. It feels less than a multimedia, it could not be called as multimedia anymore. English+ uses five media elements, which I will describe in the table below.

The list is the same like the list of multimedia elements that has been described in the “List of Multimedia Elements” on the Content Specification.

Why Use Those Five Elements? The using of those five multimedia elements is not without a reason, Every decision I make have a reason, in this case the used elements has a major factor to create the word “Multimedia”. The elements itself defined English+ as a multimedia exercise. Text is obviously selected as a elements because without text, it seems to be impossible to create a multimedia exercise, especially the content that related to languages. Images is important, image give the visual look on what several item should looks like. In English+, images is used as a object that later become a question. Audio, is blended in English+. The background music (BGM) will use MP3 audio. I also decided to use video elements in English+ because video seems to be a nice media that gives a visual look and sound at the same time. It will be used in listening section in English+. Last but not least elements, is animation. Animation gives a nice user experience to the user when they use it. It will pleased their eyes when they see the animation by themselves.

Thus, that is why I use the complete five elements of multimedia. Every element has chosen with a reason, and the reason has already explained above.


ENGLISH+


TextIt may be an easy content type to forget when considering multimedia systems, but text content is by far the most common media type in computing applications. Most multimedia systems use a combination of text and other media to deliver functionality.

ImagesA digital photograph will be displayed in the “Fun with Pictures” topic. Besides of that, English+ also uses images that completely created by myself in Photoshop, that will interact as a button.

AudioAudio files and streams play a major role in some multimedia systems. English+ uses audio as the background music that will give the user a relaxation feeling so the user can concentrate even more in answering the provided question.

VideoDigital video appears in many multimedia applications. In English+, the video will be appear in “Listening” topic. Typically the user watch the video while at the end, there will be a question provided related to the video.

Animation

Animated components are common within both Web and desktop multimedia applications. Animations can also include interactive effects, allowing users to engage with the animation action using their mouse and keyboard. English+ uses animation to translate from one screen to another.

STORYBOARDS Welcome Screen The welcome screen is here, the welcome screen is also functioned as Home Screen. This is what the user get when first time they try to open the English+. The design is really minimalistic with only 3 button showing on. The big English+ logo is actually a button if you wonder, and that is where all the menu hidden. By clicking big English+ logo, The user actually taken to the menu button. In addition to make an easier way to explaining the screen section, I decided to gives every button and important elements of the screen a number.

1. The Big English+ Logo Button This logo is actually a button that if clicked, the user will taken to the menu screen.

2. About ButtonIf the about button clicked, there will be a a very short about screen displayed.

3. Speaker Buttonthe function of the speaker button has only 2, to mute and unmute the BGM and SFX.


ENGLISH+

Menu Screen After the user clicked the big English+ logo, the user will taken to this screen. There are 6 buttons that each has a different action if clicked.

1. Back ButtonBack button is placed in the upper right corner for a easier use. It takes the user back to the home screen.

2. Speaker ButtonSpeaker button has the same action than before, what is different is only the position.

3. Topic ButtonIf it clicked, the user will taken to the topic screen where user can browse questions by topic the want.

4. Score ButtonIt displayed the last score that the user got along with the mistakes they did.

5. Test Me! ButtonWhenever the user click this button, they will taken to a question screen with a random question.

6. Text Explanation Whenever the user hover the mouse to a specific button, the text explanation will appear and give a brief explanation on what that specific button do. In this case, the button is hovered on the topic button.


ENGLISH+

Topic Screen The topic screen will appear when the user click it through the menu button. It gives the user an possibility to browse a specific question that the user want to exercise in. In every topic, there will be 10 questions given. User can browse the a topic start from Simple Tenses until the last topic which is Listening. In topic screen, the design is very minimalistic with only a selection of the topic and back and speaker button which remain present. The design of the topic selection is borrowed from a famous “Material Design” elements that can be found on Android Lollipop. The card-like design gives the user an easy way to browse topic that they want to choose.

1. Back ButtonSame like the previous menu screen, the back button is still here with the same action it has.

2. Speaker ButtonThe speaker button also present, gives the user ability to mute and unmute the BGM and SFX easily with only a single click. In this case, the grey colour of the button indicates that the BGM and SFX is muted.

3. Topic Selection FieldThe topic selection field gives the user ability to choose the topic that they want to exercise in. There are 10 topics displayed on the screen, started from Present Tenses until Listening topic.


ENGLISH+

Question Screen The question screen can be launched through 2 different way, the first way is when the user click a topic from topic selection screen, and the second one is from “Test Me!” button.

1. Back ButtonThe back button is here to give the user ability to back to the previous screen. When the user has answered a question, and user wants to back to change the answer, it can be completed by back button.

2. Speaker ButtonThe speaker button has the same action than before, to mute and unmute the BGM and SFX.

3. Topic PositionIt gives the user ability to know from what topic the question came from

4. Question Field It displayed the question given.

5. Answer FieldAnswer field is the field that the answer of the given questions are appeared. There are 4 choices of the answer and one of them will be the right answer.


ENGLISH+

Score Screen The score screen will be appeared after the user finish answering all question. It can be access also through the “Score” button on the main menu.

1. Home Button The existence of the back button is replaced with home button. It takes the user back to the main menu

2. Speaker ButtonSpeaker button remain present. Has the same ability than before.

3. Score Field This is where the overall score will be displayed. in this case the score displayed is 10 out of 100.

4. Motivational Message Field This field displays a different message based on the score that the user get.

5. Correct FieldThis field displayed the amount of correct answer answered.

6. Mistake Field this field displayed the amount of mistake the user did.


ENGLISH+

About Screen In about screen, It displays the creator of this multimedia, in this case is me, along with the social media contact where the creator can be contacted.

1. Back ButtonThe back button is here, when pressed, the user is taken back to the Welcome Screen.

2. Speaker ButtonThe speaker button is here, but with a different colour, the orange pastel-like colour indicates that the sound is not muted.

3. English+ LogoThere is a English+ logo here, unlike the logo in the Welcome Screen, this time the logo is just a plain picture with no action.

4. Facebook LinkThis will takes the user to the Facebook of the creator of English+

5. Twitter LinkThis will takes the user to the Twitter of the creator of English+

Both Facebook and Twitter can be use to give feedback to the creator for a better English+


ENGLISH+

BENEFITS OF USING ENGLISH+ The Benefits It is often claimed that multimedia technology offers a more stimulating and motivating learning environment than that associated with traditional teaching methods. The validity of this claim is examined in relation to some established motivation theories. English+ is a multimedia based application that help user exercise their english knowledge. Through relaxing, animated contents that will pleased every user that use English+. In the other hand, to make the user easier to know the benefits of using English+, There will be a list to describe it.

• English+ uses 5 different elements of media in which combined and blended in a beautiful way.

• Completely contains more than 90 different question to exercise with.

• Relaxing background music gives a relaxed atmosphere to make the user more concentrate in answering the provided questions.

• Animated contents that will pleased every user that use English+

Why English+ Better Than Others In today’s application design, The other english interactive multimedia exercise tend to be a bit boring in term of the design. Skeuomorphism is outdated. In 2015, the design lead to be flat, with a bit element borrowed from 3D like a long shadow element. English+ user interface applied Flat UI design as the basic design. Why Flat UI? simply because flat UI is elegant yet beautiful at the same time with its simplicity.

Multimedia exercise is not yet complete when there are no animations inside. English+ content animation will be created in Adobe® Flash Professional CS6. It gives a thousand of possibility to create great animation. With animations in English+, user will be motivated even more in exercising their English.

English+ has an interactive listening topic. Interactive listening topic in English+ will use video rather than only an audio like most of the other. The advantage of using video rather than audio is the user can get a visual perspective of what is going on in the audio itself.

English+ contains 10 different topics and every topic will contains 10 different questions, except for the “Fun with Picture” and “Listening” section that only has 5 questions. If combined, there will be 90 different question from English+. I do not think that the other english interactive multimedia exercise have that amount of question provided.


ENGLISH+

Documents

BGM 203 - Assignment 1 Final