Mobile Apps

Mohamed Hafidz Mohamed Hanippon • Ruslan A Rahim • Azhar Abd Jamil

PROMOTING MALAY TRADITIONAL MUSICAL INSTRUMENT THROUGH MOBILE APPS

CASE STUDY: KOMPANG

Mohamed Hafidz Mohamed Hanippon • Ruslan A Rahim • Azhar Abd Jamil

PROMOTING MALAY TRADITIONAL MUSICAL INSTRUMENT THROUGH MOBILE APPS

CASE STUDY: KOMPANG

For The articales and photographs reproduced in this book, the Publisher would like to thank the following : National Design Center, Malaysia Post Graduate Studies Faculty of Art & Design, Universiti Teknologi MARA TWITTER

Mc Donalds Malaysia Golden Arches Restaurants Sdn Bhd, Sunway Pyramid Shopping Mall Pavillion Shopping Mall Sunway Lagoon

Sunway College Berjaya College KTM Mid Valley & KL Sentral EON Banks

Parkson KLCC Published by: UPENA, UiTM Press, Universiti Teknologi MARA, 40450 Shah Alam, Selangor, Malaysia. http://penerbit.uitm.edu.my/ Design and Visual Development: Azhar Abd Jamil, Fuad Misbah Text Fonts: Helvetica 10pt Copyright © 2012 National Design Center, Universiti Teknologi MARA, Petaling Jaya, Selangor.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form of by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior permission of the prublisher.

Library of Congress cataloging-in-Publication Data Digital signage - Layout Design and Integration of social Network Twitter / Hijjaz Hamidi Bin Abdul Aziz / Ruslan A Rahim / Azhar Abd Jamil

ISBN 000-000-00000-0-0 1. Digital signage. 2. Layout Design. 3. Twitter. 4. Social Network.

5. Coursework Project. 6. Integration with twitter.

Printed by :

Printing Technology Department Faculty of Art & Design Universiti Teknologi MARA Tel: +603 5544 4001 Fax: +603 5544 4002

Mohamed Hafidz Mohamed Hanippon • Ruslan A Rahim • Azhar Abd Jamil

PROMOTING MALAY TRADITIONAL MUSICAL INSTRUMENT THROUGH MOBILE APPS

CASE STUDY: KOMPANG

Abstract Table of Content ABSTRACT INTRODUCTION LITERATURE REVIEW ANALYSIS & DEVELOPMENT TESTING & EVALUATION DISCUSSION OF FINDINGS CONCLUSION RECOMMENDATION REFERENCES

6

This research is to find the new alternative to promote Malay traditional musical instrument base on new media technology. Nowadays, have many new media technologies that people can use to deliver the message like an example interactive website, blog, mobile application and, etc. Besides that with the new technology is very good to help people to manage their life from work to their family business. People easy to get information about something like business, sport and others just click the button, and they can get the information from variety source. Unfortunately, with the advance technologies development people always forget about their traditional culture. They are more exposed to outside cultural development because it is easier to get it from their own culture. Lack of variety information source will be a biggest challenge to promote traditional information to people, especially teenagers. So with development of mobile application it hopes will help to promote Malay traditional musical instrument to the world. Significant of study will affect the teenagers and gadget fans usually live in urban area or city. To collect information in this research, the researcher will use a variety of research method. The method that used by the researcher is the qualitative and quantitative technique.

Finding that researcher get from this research is people easy to adapt with the new technology.

7

Introduction

Nowadays new media technology is becoming more popular around the world.

The technology of new media becomes the latest phenomena and inspires many people from children to adult. It is because new media technology is related in all area like education, medical, entertainment and many more. They adapted all technology from interactive website, video, mobile applications and etc to help our life to become easier and more comfortable. With the impact of new media technology, everybody believes it is the good medium to help people to introduce and promote their culture to other people around the world.

With the current technology situation the researcher decided to explore the new media technology to educate and promote Malaysian culture. The Researcher will develop a mobile application and the research title is Promoting Malay traditional music instrument through mobile application. The case study is kompang.

This research will explore the mobile application to promote the Malay traditional music instrument.

8

There are many reasons why mobile application has been chosen by the researcher. One of the reasons is that mobile application has a big impact and influence to people especially in Malaysia because the mobile user is increasing every day. Based on Nation Master.com statistic entitled Mobile phones (most recent) by country, Malaysia ranked number 33 from 43 country in the world. From the report 34.88 percent from 100 people in Malaysia use mobile phones. That shows the important of the mobile application in the market today. The target population that has been selected is in Klang valley. Klang valley has been selected due to the reason that 34.4 percent mobile phone users are in this area.

Generally the target user for this research is people that use a smartphone (iPhone).

9

The problem statement is lack of other electronic medium to promote the traditional music instrument except television, website and book. The teenagers are more expose with the modern musical instrument like example electric guitar; keyboard and etc. so with this new technology it hopes will bring awareness to the public, especially teenagers. This study will be an alternative platform or media to promote traditional musical instrument to people especially teenagers. It also hoped to promote Malay traditional music instrument to the outside community, especially foreign tourists because mobile application can be downloaded from anywhere without any boundaries.

Problem Statement

10

The first aim for this thesis research is to develop/ design mobile application for Malay traditional music instrument. The application will help to promote Malay traditional music instrument to Malaysia people especially to target audience that is teenagers. Researcher also hopes the application will help to promote Malaysia music heritage to the tourist around the world. The other aim is to create awareness about Malay Traditional music instrument using new media.

The main objective of this research is to increase awareness and educate people especially teenagers about Malay Traditional music instrument. To promote Malay traditional music instrument to people especially teenagers. The last objective is to add more variety source information about Music instrument.

Aims & objectives

11

The limitation on this research is the researcher will not touch other Malay music heritage like music, traditional dance and other. The second limitation is the researcher also will not touch about the type of Malaysia Folk song.

The example of the Malaysia folk song is like keroncong, langgam and etc.

The main delimitation of this research is it will only cover for Iphone mobile application. The development of the prototype also covers for the Iphone application. The second delimitation is it will cover about the music instrument that calls “Kompang�. The area of researches only covers for Klang Valley area.

Limitation & delimitation

The hypothesis is to Mobile application can be alternative source of information to introduce the Malay traditional music instrument. In this research will study mobile application as the alternative source of information to introduce the musical instrument.

12

13

Literature Review There are many reasons why people should care to prevent and promote the traditional music instrument. This can be proven by statement

by Malaysian Traditional Orchestra conductor (OTM), Mohd. Yazid Zakaria. In the article entitled “Nafas muzik tradisional Malaysia”, Mohd. Yazid Zakaria has told the importance of Malaysia traditional music instrument.

“Saya percaya sudah tiba masanya, peralatan muzik tradisional kita mendapat pengiktirafan yang sewajarnya. Dan ini akan membolehkan pengaruhnya untuk terus kekal walaupun untuk seratus tahun lagi. Generasi baru sepatutnya diberi kesedaran tentang asal-usul peralatan muzik tradisional Malaysia.

“Gendang boleh digunakan sebagai alat komunikasi tanpa lisan bagi meyampaikan mesej kepada penonton atau orang ramai.

Komunikasi Lisan pula disampaikan melalui Lagumereka, gendang pula sebagai komunikasi Tanpa Lisan yang digunakan bagi menjelaskansesuatu mesej tersebut dan menaikkan semangat..”

“Peralatan ini semuanya harta yang tak ternilai harganya, satu warisan yang kita harus lindungi daripada kepupusan.”

Abdul Latiff Abu Bakar (2000)

The traditional musical instrument is also very important to people because it can be a medium to deliver the important message from other to each other. This has been explained by Abdul Latiff Abu Bakar in his writing “Idea dan Gagasan Gendang Nusantara Sebagai Alat Media dan Seni Rumpun Melayu”. According to Abdul Latiff Abu Bakar:

14

15

Musical instruments have divided into a seversl categories. Based on http:// malaysiana.pnm.my/kesenian/Index. htm five categories are idionofon, kordofon, erofon, free erofon and the last is membranophone. Definition of Idiofon is the musical instrument that produces sound through the reaction in the framework of the resonating body.

Example is Gong. Kordofan means is musical instrument that produces sound as the vibration of the rope is tensed.

Example is the guitar. The next category is erofon which mean musical instrument that produces sound through the air hole.

Examples for erofon instrument are flutes.

Free erofon is the traditional musical instrument that produces or makes sound using temporary material such as wood leaves, palm leaves and others. The last categories are membranophone.

The meanings of membranophone are Instrument that produces sound through the skin or membrane that stretchy and beat.

However in 1989 Mohamed Ghouse Nasaruddin also has categories the Malaysian musical instruments into four class base on Sach-Hornbostel (1914) the group that has been categories by Mohamed Ghouse Nasaruddin is:

16

17

In this case study, Malay musical instrument Kompang has been selected as the subject to promote it to user. According to journal written by Aswati Ismail, Salina Abd Samad, Aini Hussain, Che Husna Azhari and Mohd Ridzuwary Mohd Zainal in journal title “Analysis of the Sound of the Kompang for Computer Music Synthesis�

18

19

Kompang is the Malay traditional musical instrument. It’s usually plays similarly like the tambourine style. The standard size of kompang is 40 cm in a diameter. The diameter frame is called “balos”. Kompang frame usually made from the dried wood of balau trees and the center of the frame is covered by goat hide skin and the hallow around the frame usually three inches deep.

Kompang “The kompang is classed as a membranophone which means that the sound is generated from a kompang by a vibrating membrane.”

However, to avoid the “baluh” from cracking or breaking kompang are entwined with a nylon string around the “bibir”. Kompang is normally played in a big ensemble with various rhythmic strokes or heat. The basic stroke groups are called Melalu, Menyilang and Meningkah.

Every basic group is very important produce the harmonic sound. Melalu stroke is the group which play the basic rhythm. Menyilang group plays rhythm beat up. The player has divided by small group base on the basic strokes. But for the Meningkah rhythm beat is played between the Melalu and Menyilang rhythm beats.

There are various sizes of kompang, the biggest size is 14 inches follow by 13 inch, 12inch, 10 inches and the smaller is 8 inches. Kompang usually plays at Malay wedding ceremony, opening ceremony, and, etc.

(Aswati Ismail, Salina Abd. Samad, Aini Hussain, Che Husna Azhari and Mohd Ridzuwary Mohd Zainal,2006)

20

21

Mobile phone Applications Mobile phone applications is also known as mobile apps. Mobile application is term that clarifies or describes a software that runs on the Smartphone and mobile phone. The example of the popular Smartphone nowadays is iPhone, HTC Sense, Blackberry, Motorola Q and many other brands in the market. There are many reasons for developers to design mobile apps, especially for Smartphone user. The main purpose to design the apps is to educate, entertain, or assist mobile phone users in their daily lives. The popular developer and supplier for mobile apps are Iphone that used iOS system operation. There are more than 350,000 mobile applications available for iPhone users to download. Besides that their twelve type apps that available for them. Example of apps type is apps for cook, great outdoor apps, apps for a student, apps for music and, etc.

There are many reasons why iPhone has chosen as the medium to deliver message for the subject in this research. The prominent reason is iPhone is a special Smartphone that has a good specification for a multimedia application.

The requirement that provided by Apple as the developer of the phone is, retina display, 3.5 inch wide screen multi touch display, 960 by 640 pixel resolution and other. Besides that Iphone is the number one phone in the market right now. This is explained further by Greg Tozian in his article “Does Your Brand Need a Mobile Application? iPhone, Blackberry, Window mobile, Android and Beyond A white paper:

22

“Strictly speaking, a mobile application (app), is software that runs on a handheld device. The hottest things going today, of course, are mobile apps running on smartphones — and the iPhone app, with more than iterations that also work on the iPod touch, owns more than 75 percent of the market.”

(Greg Tozian, VP of Strategic Planning, 2009)

23

Other than that according to statistics released by Nielsen Company 1st December 2010, iPhone is the number one smartphone in the market. Iphone gets 27.9 % from the market share, and it follow by RIM Blackberry 27.4% (see figure 2.2). This is the reason why an iPhone had selected as the medium in this thesis.

Problems in multimedia INTERFACE USABILITY INTERACTIVITY FUNCTIONALITY NAVIGATION

24

25

INTERFACE USABILITY INTERACTIVITY FUNCTIONALITY NAVIGATION Interface in mobile application interface is a combination of various media. All media including the multimedia interface is text, graphic, sound and video. Interface in multimedia is important because it will present the information of the application to user. Usually nowadays the multimedia designers follow the design guidelines from expert like Allen, 1974; Arens, Hovy, & Vossers, 1993; Feiner & McKeown, 1990, 1991; Reiser & Gagne, 1982.

The interface design is the important because to attract the user to buy or use the application.

There are important thing that developer should consider when they design the interface. First are the displays size of the mobile phone devices are very limited. That means the display of mobile devices is a small size, low resolution, less color from the common desktop computer. Second is the developer should understand the design goal.

To understand the design goal the developer needs to know the three design issues. Three design issues are the developer must know is the target 26

user of GUI. Developer should research the demographic of the user like example age, gender and, etc. Second issues are the function of the GUI. Next issue is the developer should know the use of the GUI. The developer should understand the specification and requirement of the application. Example if developer designs Football game application the developer should design interface that has the similar environment with the reality football game. Developer can create an icon using football ball design so a user can feel more exciting to use the application. The simplicity of the interface design also is an important aspect to a developer consider if the design of the interface is too crowded it can make the user confuse when they use the application.

INTERFACE USABILITY INTERACTIVITY FUNCTIONALITY NAVIGATION Usability is a standard giving guidance on the usability on requirements for visual display terminal as the extent to which a product can be used by the specified user to achieve specific goals. In the simple word, the meaning of usability is an attribute of the way in which a person and system interact. The International Standard (ISO) defines usability as the effectiveness, affiance and satisfaction with which specified users can achieve specified goals, in particular, environment (ISO DIS 92411-11). Other than that according to Eeva Kangas and Timo Kinnunen usability is, “The most important aspect of the design process is to provide the user with the real usage content.

For mobile phones this means users need to be able to touch the buttons and see software that feels like it is actually working�

(COMMUNICATIONS OF THE ACM July 2005/Vol.48 No.7)

The specific goal is dividing by three categories. First is effectiveness it followed by efficiency and satisfaction. If the multimedia application not achieves the three important for usability it will create a problem to user interacts with the multimedia application. To avoid the problem happen the multimedia developer must use or follow the guidelines of usability in multimedia.

The usability guidelines are the developer must create a very simple design. That means the interfaces of multimedia should be simple as possible. The developer must plan the interface properly. The developer must remove unnecessary features to avoid user to get confuse with the system. The best way multimedia developer should design and put the important features for user concentrate went to their use the multimedia application.

27

INTERFACE USABILITY INTERACTIVITY FUNCTIONALITY NAVIGATION Interactivity is the important part to make the best mobile application.

The interactivity is synonymy with user interaction or user input. Base on the Encyclopedia of Multimedia write by Borko Furht, “Interactivity is set of possible action a user can do to change the state of a multimedia system, e.g., the course of a multimed1a document’s playback” (Borko Furht, Encyclopedia of Multimedia) There are several tips that developer should consider to create a good application base on the interactivity aspect. Base on Shneiderman developer must follow the golden rules. The rule is the application must offer an informative feedback. Example if something happens to the application when the user uses the application, it must be capable to generated feedbacks or error message for user information. Another rules that described by expert are the designer must provide users with feedback to 28

let them know that they must wait when significant time delays are required for the program to access information and let them know they are making the progress. Other tips are the multimedia designer must arrange information in a non threading manner so that users are not overwhelmed by the amount of information contained in a program.

“To accomplish this consider setting up information with an overview of a topic that acts as a top layer of information. As users need more information they can move progressively deeper through the layers of information. Moving through the layers of information could be done through the use of pop-up menus, buttons, or hot text”.

(Jones, 1989)

INTERFACE USABILITY INTERACTIVITY FUNCTIONALITY NAVIGATION The mobile apps developer also should consider about the functionality of the mobile application. The definition of functionality referred by answer.com it means a useful function within a computer application or program. In this case, the functionality will cover about the touch screen and the feature function in the application. The developer should develop or make a simple feature. If too complex, it wills make user confuse. So the developer can’t achieve the target to develop user friendly application.

“Full touch screen based mobile phones have become increasingly popular in Korea. However, it is hard to display the entire list of menu items on the whole screen of mobile phones because the number of menu items usually bigger than the lines on the screen.”

(Jae Gon Kim, Jun-Dong Cho, ICACT2010)

29

INTERFACE USABILITY INTERACTIVITY FUNCTIONALITY NAVIGATION Navigation is the most important thing in the application. It will help to direct user in the application. Base on the journal Research of Iphone application UI Design based on Children Cognition Feature, it gives several tips need to follow to make a good navigation. First is the interaction manner. Developer should develop the navigation system smooth and simple interaction procedure. The parallel task in the operation procedure can be to complex it will make the user confuse when they use the mobile application.

So the best application is when the user can interact with application smoothly as possible.

Other than that designer also should think when designing the navigation for mobile application is the size of the screen. Because of the screen size of mobile phone is a very small designer should avoid using difficult input or menu like the drop down menu or small icon for user click. Jakob Nielsen in his article has explained: “Awkward input, especially for typing. It’s hard to operate GUI widgets without a mouse: menus, buttons, hypertext links, and scrolling all take longer time and are 30

more error-prone, whether they’re touch-activated or manipulated with a teensy trackball. Text entry is particularly slow and littered with typos, even on devices with dedicated mini-keyboards.”

(Jakob Nielsen,2009) Besides that other thing, that designer should think when design or develop a mobile application is always thought to make a user friendly application for user. It’s important to attract the user to buy and use the application frequently.

This is explained by Jun Gong and Peter Tarasewich in his article “Guidelines for handheld mobile device interface design”. Arccording to Jun Gong and Peter Tarasewich:

Preliminary Case Studies TRADITIONAL MUSICAL INSTRUMENT IN MOBILE APPLICATION

“As the frequency of use increases, so does a user’s desires to reduce the number of interactions and to increase the pace of interaction.

Because time is often more critical to a mobile device user. Reducing the number of operations needed to perform regular (i.e., repetitive) tasks is a key factor in the ease of use of mobile devices.”

(Jun Gong and Peter Tarasewich,2009)

31

Main interface for Ikoto application is very attractive. The developer uses a combination color that can attract the user when they see the application. The designer also applies the elements of traditional Japanese. The traditional Japanese element applied in the application is the Japanese word using the Japanese font. Another Japanese element used in the interface design is sakura flower. For the musical instrument design, the designer tries to design the application same with the original/reality Koto. The next strength in the application is the button or icon. The icon in this application is very simple and user can understand when they see the icon. But the weakness for the icon is in the instrument interface because the designer used Japanese font to shows each string. If the user don’t know about Japanese word is difficult for them to play it. The setting menu for the application is easy to understand. The designer has created a simple interface for the setting menu. They use the common symbol as an icon so every use can understand every function in setting menu.

In this website Apple store has divided in the certain categories. The application categories are like work, great outdoors, music, apps for a student, travelling and many more mobile application users can download to their mobile phones. First example of the traditional music instrument application is Ikoto. Ikoto is the traditional music instrument come from Japan.

Ikoto is a musical instrument under category Kordofan.

Plates 2.2: Ikoto apps interface. The application is develop for Iphone

32

Â

33

The third application is “123 Guzheng”. ““123 Guzheng” has developed and design by FFpower. “123 Guzheng” is a musical instrument under category Kordofan.

The interface for “123 Guzheng” is beautiful and very attractive. Same with Ikoto the developer also applies the Chinese traditional design elements. The designer also used an attractive font to present the word Guzheng. The art of Chinese’s painting also applies in the interface design. In the main menu designer has applied the user friendly element. They use the simple button and use and include help page to guide user for use the application. For the instrument interface the designer use QWERTY keyboard as a medium for user plays the instrument. It makes use easy to play the application.

Plates 2.4: 123 Guzheng apps interface.

Plates 2.3: Real Piano Pro apps interface. The application is develop for Iphone

The second application that brought a theme of musical instrument is “Real Piano Pro”. “Real Piano Pro” has developed and design by Armin Heinrich. “Real Piano Pro” is a musical instrument under category idionofon.

The interface for Real Piano Pro developer has created simple design. Designer has developed design same like the real piano. So the user can feel like they play a real piano but using their mobile phone. Developer also has applied the user friendly function in the application. The designer applies the information about the music instrument so the novice user also can enjoy the application.

34

35

Research Methodology Research methodology is the important part in a process to develop an application. In research methodology stage have two types of a research process. The first to the research process is quantitative data collection. Another research process is qualitative data collection.

After done the quantitative and qualitative data collection the researcher will get the primary data. Secondary data collection also involves in research methodology stage. Secondary data is very important to support data and information that researcher can’t get from the primary data.

The secondary data that use in these studies is book, journal, and information from websites.

36

37

Other than that researcher also use survey to get the primary data. In this research, the researcher has use the online survey to gather the information. Polldaddy.com has been used as the base for gather or collect data for online survey. Twelve questions have been asked for the respondent answers. A result for the survey has been record in Polldaddy.com. The answer and result is “Which music instrument that you want to know?”

For primary data, the researcher use interview, observation and survey to gets the information or data. In the interview, the researcher has interviewed two people to get information and data about the music instrument Kompang. The first person is Mr. Roslan b. Idris the kompang instructor and Community member of Kelab Setia Remaja. Their several input that researcher gets from Mr. Roslan is why the teenager today not interested to play the instrument. Other inputs that researcher got is the basic stroke of kompang and the note of kompang. Furthermore, the important input that researcher gets is known that often requires the presentation ceremony kompang and basic of kompang to the new player to play kompang to apply in application that will develop.

Second interview and observation at Kompleks Kraftangan Kuala Lumpur with the representative from Perusahaan Baki the music instrument maker. The important input that researcher gets is typed of Malay Traditional music instrument (in membranophone categories) like the example Kompang, rebana, jidor and, etc. other information that researcher gets to know is the characteristic and the making of Kompang to apply in the application.

Plates 3.1 & 3.2 Picture from observation in Kompleks Kraftangan Malaysia

38

39

The researcher also conducted the visual research to analysis the application available in the market.

All examples of the application are the base on “iphone” platform.

The first simple is “Bongo Lite” developed

by Feel Every Yummy. “Bongo Lite” contains features is including with three songs, and user can download more lately. There have a tutorial section for user know more information about Bongo instrument and how to play the game.

User can view the score at the scoreboard section and in the setting area user can set up the beat, volume and other setting.

40

Second application is “Hand Drums” developed

by Cody Rotwein. The feature offered in this application is user can choose variety drums to play. Example like bongo, drum and, etc.

Same like another application user can set up the drum instrument at setting section. Other features are user can record sound when they play the instrument. Interface design is simple and minimalist for user easy to play. The music instrument is design is same with the reality instrument. The limitation of the instrument is user just only can play with the music instrument no guide provided for user. Delimitation is the music instrument is only for membranophone type.

Plates 3.2: Process of usability research for Bongo Lite

Plates 3.3: Process of usability research for Hand drums

41

The third application is “Pocket Drums” developed by “Cody Rotwein”. The attraction for user plays this music instrument application is they can play with the popular song. User also can set position of drums for easy they play the application. Other features in this application are user can record sound when they play the instrument. The design for interface is user can choose a variety background theme for adjusted to the mood of the song. The drums design also is realistic like the real instrument.

The application also has special feature from another instrument because it is so interactive. It is because when the user plays the application has simple animation and effect on drums. The limitation same with Hand drums apps and the delimitation is it also design for music instrument membranophone type.

Plates 3.4: Process of usability research for Pocket drums

Congo drums are developed by Cody Rotwein. The features that contain in this application are user can choose to play with 2/3 or four congo drum.

User also can record the drum sound when they play the application. Congo drums interface is simple and realistic with the real instrument. The special feature in Congo drums is having simple animation on drums when the user beat the drums. Interface design for the application is simple not many buttons easy to control. The limitation it is the apps only for play the instrument and the delimitation is it also design for music instrument membranophone type.

Plates 3.6: Process of usability research for Itimbales

42

Plates 3.5: Process of usability research for Conga drums

Itimbales are developed by Out Of The Bit ltd & Leo Di Angilla.

The platform of the application is for Iphone mobile. The features that include in this application are user can save, load and restore of volumes from the mixer screen. User also can see what they have played on the screen during the playback.

The interface design is simple and the drum design is realistic like real instrument. The limitation user only can play the instrument without a guide so difficult for users who don’t have knowledge in music. Delimitation is it also designs for music instrument membranophone type but the user can choose another type of drum.

43

Name of IJanggu is come from Janggu. Janggu musical instrument is come from Korea. Using this application user also can record and replay the sound. The interface design of the application is simple and realistic with the real drum. Another special input of this application is user can play both drum rights and left face of drum.

Plates 3.7: Process of usability research for Ijanggu

Â

Usability Research Next research that has been conducted is the usability research. The step to do the usability research is using grid analysis and formula to calculate the width percentages. The formula is total box = total width box x Total height box and to get the percentage this formula has been used Percent = (Number of box / total ox) x 100%. The six interfaces that have been selected are Conga drums, Hand drums, Ijanggu, Pocket drums, Itimbales and Bongo Lite. The entire interface has been research using five criteria. Five criteria are the navigation, interactivity, unused space, image and operation system.

44

45

From the usability research, the important information to developer knows is the interactivity part.

Interactivity part is the main part in the interface design. Second part that designer should consider is unused space. These show users want the simple design for their easy to play the instrument. After that another part that designer should consider is the navigation, image and the system operation.

46

47

Design & Development There several steps that researcher did in the design process. First researcher have made is brainstorm session to get an idea. The next researcher has made research about the idea.

Primary data and secondary data will use for the research. After that researcher will plan the content and feature for the application. In this stage also application flow needs to be plan. Before design interface in the computer researcher drawing the sketches on paper the researcher also needed to draw interface design page by page. After finish in the sketch area researcher needs to choose suitable software to develop the design. After complete the design process researcher will start the project development stage.

48

The target user for the mobile application is teenagers so the design concept should follow the target user requirement. Concept design must be simple for user easy to control and mange the application. The color should be nice and can attract users when they see the application.

Application flow structure is most important because it will determine the navigation of the application. To gets the best result for the application flow researcher have research three best music application based on Iphone mobile apps. The three apps are Ikoto apps, Guzheng apps and Itimbales apps.

49

The result from the research based on application flow study. The splash screen will appears for the first interface. The main menu will show the button to go to another page. In about kompang user will know information about kompang like the short history. In tutorial page, it will explain and shows how to play kompang. While the help button will help use when their need guide to control in this application.

50

51

Design Sketches

Plates 4.2: Rough sketches for the Splash screen Plates 4.3 & 4.4: Rough sketches for the Interface screen Plates 4.5 & 4.6: Rough sketches for the icon

52

Plates 4.7 & 4.8: Sketches for the Interface screen

53

There are two main sounds can be produced by Kompang. One is “Pak” and second is “Pung”.

Below a picture that described the sound that can produce by Kompang based research by Aswati Ismail, Salina Abd. Samad, Aini Hussain, Che Husna Azhari and Mohd Ridzuwary Mohd Zainal Department of Electrical, Electronic, and Systems Engineering Faculty of Engineering, Universiti Kebangsaan Malaysia in Journal Analysis of the Sound of the Kompang for Computer Music Synthesis.

The software that used by researchers is Adobe Illustrator and Adobe Flash CS5. Adobe Illustrator has chosen because it allows the designer to create a design in vector.

For the solution, researcher has dividing the two segment that player can touch to produce the sound.

The selection of the font also is a challenging aspect to researchers. The font face must be easy for user read. It also is an identity to the application. In this application, the researcher should choose the font that easy to read at the same time can be an identity for the application.

To animate and make it interactive the researcher will use Adobe Flash CS5. The screen setting for the interface is 640px x 960px. Action script 2 will use in this prototype.

54

55

Splash interface is the first page in the application. The designs page is simple. There are three parts of design in this page, first are the title. The picture will animated to make it more dynamic and the instruction will ask the user to tap the screen to enter to the main page.

Pre-test

SPLASH SCREEN LAYOUT MAIN MENU LAYOUT KOMPANG LAYOUT ABOUT KOMPANG LAYOUT TUTORIAL LAYOUT SETTING LAYOUT ICONS & BUTTON TITLE PAGE & LAYOUT

56

Â

Â

Plates 4.15: Splash screen interface (pretest application).

Main page is important part that shown a user the content icons that linked to the other page in this application. There are two parts of design in this lay out. First is title and second is the icon button.

There four icons that user will see in main menu interface. Kompang icon will link to the kompang music instrument. About kompang page for user know more detail about kompang. Tutorial icon will linked to tutorial page when the user needs help or setting icon will linked to setting area in this application. These icons will be designed with a design that related with kompang. The purposes are for users easy to understand when they see it first time.

57

Kompang page is the page that user can play the instrument. This page will cover the fourpart designs, first is a banner top of the page.

The banner will shows the title and main menu button. Second is the selection menu that will ask the users if they need tutorial first before the user playing the music instrument if the user wants to see tutorial first they will choose yes.

Plates 4.16: Main menu interface (pretest application).

Plates 4.17: Kompang screen interface (pretest application).

58

About Kompang page contains the informations about kompang. This part will contain five parts of design. In top banner will show the title and main menu button. At the bottom of the layout will appear the icon will act as a quick link for users to go to another page without going to the main menu interface.

Plates 4.18: About kompang interface (pre-test application).

59

Tutorial page will contains the tutorial that will help user to use the application. This interface will contain three essential elements of design.

In top banner will show the title and main menu button. Bottom of the layout will appear the icon will act as a quick link for users to go to another page without going to the main menu interface.

Setting interface will contains the slider buttons to user use to set volume, bass sound and other setting. This interface will contain five important parts of design. In top banner will show the title and main menu button. Next is picture that will be animated. At the bottom of the layout will appear the icon will act as a quick link for users to go to another page without going to the main menu interface. There are four slider menu that can be used by the user.

60

Plates 4.19: Tutorial interface (pre-test application).

Icon and button are the important parts when design and develop the mobile application. To design an icon and button in mobile application the designer or researcher must consider a feature matter or aspect. The aspect that designer or researcher should consider is size, color, shape and other. Base on the Iphone mobile interface guidelines the icon size is 58px X 58px. There four main button that will use in the application. Four buttons are play, about kompang, tutorial and setting. Below are the samples of the button that use in the application.

Plates 4.20: Setting interface (pre-test application).

Plates 4.21: Icon design and development process

61

Post-test After collecting all data from pre-test, the researcher has to improve the application based on the pre-test results. First all the data and result from the pre-test have been filtered by researchers from design aspect, interactivity, interface, usability and other aspects.

Plates 4.22: Title page for application

Â

Title page is other components that designer/ researcher should think and consider when develop a mobile application. The title page will tell the user the page that position of the pages where they belong. In the title page, it can combine with the button or icon. The aspect in the title design that designer/researcher should think is the color size and typeface.

62

63

Other changes or improvement in this application are in record function, button tool tips and learning function.

Testing & Evaluation Plates 4.23 for the improvement for post test application development

64

There are two methods used in the testing stage.

The first test is Pre test. In these stage twenty respondents has been selected to do the test. The location of test is in Petaling Jaya. Respondents are required to test or use applications that are available. Next after used the application the user must answer the questionnaire question.

The questions in the survey were divided in several sections. In section A, the question will cover about the information of the respondent like age, gender, race and, etc. Section B will cover question about the understanding respondent about mobile phone application. The importance question is in section C. in section C the question has been divided in several parts like interface, interactivity, Usability, navigation and functionality. Twenty questions have provided for the respondent answers. Below is the result from the survey that has been conduct.

65

General Questions First question is “Do you know anything about mobile application?”. The purposes for this question are to know if the respondent knows about the mobile application. The result for these is 95% has answered yes and other has chosen “no” as the answer.

Second question, “Do you has experience used any mobile application before”. The purposes for this question are to know the experience of respondents about mobile application. The result that can find is 85% of the respondents are having experience used the mobile application. Otherwise of 15% did not have experience using applications.

Third question in this section is “Do you know an existing traditional music application”. The purposes for this question are to know the experience and understanding of respondents about existing traditional musical apps using mobile phone. The result that can find is 65% of the respondents are having experience used the mobile application.

Otherwise of 35% did not have experience using applications.

66

Interface The second part should be answered by respondents is the interface section.

This section will examine the extent to which respondents understanding of the interface of the application “Ikompang”.

First question that respondents should answer is “Do you think the font is suitable and easy to read?”. All respondents agreed that the font used in this application is easy to read and seen.

Second question is “Do you think the color of the menu button is suitable?”.

Majority from the respondents has chosen the answer yes and only 4% respondents choose no.

Next question in interface section is “Do you think the size button is suitable for user?”. 90% from respondents has to choose yes as the answer. 10% from respondents has chosen no as the answer.

67

The other question that asked to respondents is “which button do you prefer “Icon” or “text” button. The purpose of this question is to know which button more suitable to use in application base on respondent opinion. From the analysis 90% respondents have responded to the icon button is more suitable for mobile application interface. Otherwise 10% respondents answer text button more suitable for mobile application.

The last question in interface section is “Do you think the page title is suitable to be place at the top of the page?”. 90% believes that page title is suitable at the top page and 10% of respondents say it unsuitable at the top page.

Usability The third parts that should be answered by respondents are the usability section. This section will examine the extent to which respondents understanding of usability of the application “Ikompang”. The one question that asked to respondents is “The navigation is easy to understand”.

The purpose of this question is to know the understanding of respondents about the usability of the application base on respondent opinion. The form of questions is matrix or ranking answers. Number one representing very poor, number two represent poor, three represent normal, number four represent good and number 5 also represent the answer very good.

The finding that researcher gets from the result is the majority respondents answer the navigation is easy to understand and followed by very good representing 30%.

25% respondents have an opinion the navigation is normal. No participants who answered for poor and very poor.

68

69

Functionality

In this section also respondents also asked questions about “Do you think this mobile app is easy to use?”. Overall result 65% respondents have chosen good as the answer. It follows by normal 20% and 15% choose very good as the answer.

Respondents are also asked questions about the content. The next question is “The content is suitable and easy to understand?”. The result is 55% from respondents chose good as the answer, its follow by 30% respondents answer very good and 15% are choosing normal or ok as the answer.

For functionality section the researcher has asked to respondent question “Do you know how to use the menu” to know the understanding of the respondent about the functionality of this application.

Same with “Usability” question the form of the question is the matrix or ranking answer. Number one representing very poor, number two represent poor, three represent normal, number four represent good and number 5 also represent the answer very good. The majority from the respondent answered “good” that represent 50%. It follows by 25% respondents answered “very good” and “normal” for the question.

Another question is “Does the application helps you to know and play Kompang?”.

The result is 40% respondents choose good as the answer, and it follows by 30% choose normal as the answer while 25% answer very good and 5% answer poor in the question.

Another question, “Does the application meet your expectation?”.

60% respondents choose good as the answer, and it follows by 35% choose normal and only 5% choose very good as the answer.

70

71

In this pre test, respondents also were asked their suggestion to improve the application. Below this the suggestion gives by the respondent: • Learn function to guide player/user when they play the mobile apps.

• Add more pictures & info about kompang • Add tool tips for the icon button • Add function record • Use a various color

72

The improvement of the product will do based on the pre test. Besides that the opinion and the suggestion from the respondents also have been taken for the application improvement. The location of post test is in Petaling Jaya and Selayang. Same with the pre-test, in the post test the researcher also used the questionnaire to test the understanding of the respondent for the application.

The questions in the survey were divided in several sections. In section A the question will cover about the information of the respondent like age, gender, race and, etc. Section B will cover question about the understanding of respondents about mobile phone application. The importance question is in section C. in section C the question has been divided in several parts like interface, interactivity, Usability, navigation and functionality. Twenty one questions have provided for respondents answer. The respondents demographic that have selected in the post test are a person that had done the pre-test and second is the respondents who first time using the application. The most purposes of this post test is to examine the understanding of respondents about the application. Below is the result from the survey that has been conducted.

73

General Questions First question that need answers by respondents in Post test is “Do you know anything about the mobile application.

The result is the majority from respondents knows about mobile application and 25 % from the respondent is don’t know anything about mobile application.

Second question in Post test is “Do you had experience used any mobile application before?”. The result is 75% had experience used any mobile application before this. 25% of the respondents didn’t have any experience used any mobile application before.

Third question in post test is “Do you know an existing traditional music application?”.

Different with a question before this the result is, the majority of respondents are do not know anything about any traditional musical instrument using mobile application. 75% respondents answer no and 25% respondents have answered yes they know about traditional music instrument.

Interface The question in interface section is “Do you think the background color and design compatible with the apps?”. The result for this question is the majority from the respondents answer yes that represent 85% while 15% were of the respondents answered no to this question.

Next question in interface design is “Do you think the size and color button is suitable for apps?”. For the result for this question is 15% from the respondents have answered no and 85% from the respondents have answered yes.

74

75

Usability The next question in this post test is Usability question. The aim for the usability question is to know if the user can achieve the goal or understand to use the application. The question format in this section is in a matrix or rated type question. The first question in usability section is “Do you think this mobile app is easy to use?”. The result that answered by respondents is the majority have answered good. It follows by 15% that represent normal or its ok and 10% from respondents have answered very good.

The last aspect that had asked to respondents in the questionnaire is the interactivity question. First question is “Do You know how to use record function?”.

The data or result that can find in this question is 55% answer good. 40% answer normal and 5% answer very good.

The next question in usability section is “Do you know and understand how to use learn tutorial for this mobile apps?”. Result for this question is the majority from the respondent answer good and it follows by 5% from respondent has answered very good.

76

Navigation The next question that asked in the questionnaire is the navigation question.

First question is “The navigation is easy to understand?”.The result from this question is 80% from the respondents have answered good. It follows by 15% respondents answer very good and 5% answer normal or ok.

Next question is “Do you know and understand how to navigate one page to another in this mobile apps?”. Majority of respondents answers good that represent 60%. It followed by normal that represent 30% and 10% respondent choose very good as their answer.

77

Functionality Next section in the post test questionnaire is the functionality aspect. First question in this section is “Do you understand the content in “About kompang” and “Tutorial?”. The result can get from the test is 75% answered good. It follows by 15% answer normal and 10% has answered very good for this question.

Second question in this section is “Do you know how to use the menu?”. The result that research can get from this question is majority respondents answered good that represent 70%. 20% from respondent has answered “very good” and 10% from the respondent have answered normal or ok.

Third question is “Does the application help you to know and play Kompang”.

The answer for this question is 60% have chosen good as the answer. It follows by very good that represent 25% and 15% answer normal.

78

Interactivity First question is “Do you know how to use record function?”. The result is 55% answered good as the answer. It follows by 40% from respondents answered normal and 5% have answered very good.

Second question is “Do you feel the transaction animation is needed for this mobile app? “. The result for this question is 70% answer normal, and it follows by 25% answer good. 5% from respondents answer poor in the question.

The last question in this questionnaire is “Does the application meet your expectation”. The result from this question is 75% have answered good and it follows by 15% answer normal or ok. Other than that have answered very good.

79

Discussion of Findings Based on research and testing and evaluation, majority respondents know and have experience used any mobile application. Unfortunately, the majority of respondents did not know anything about mobile applications on traditional instruments.

From the test result in pre test and post test, the finding that researcher gets is the designer should develop a good design in various aspects like example interface, interactivity, functionality, navigation and usability. The first finding that researcher got in interface section is the designer should use the suitable font in the application. The typeface should be easy for readable, and it also helps to be the great element and identity of a mobile application.

Example of a traditional mobile application would be more interesting if the font design has traditional features. All respondents agreed that the font used in the application “IKompang� is appropriate and easy to read

80

Second finding in interface section are majority respondents preferring an icon from the text button. Icon button is preferred because it easily understands by all ages; with only see the icon image user will be able to use the application. Another finding and result that researcher gets from the pre test and post test is the size and color of the button should be suitable with the application. Besides that the respondents also feel compatible with background color and design.

81

In usability section the finding, that researcher gets from the pre test and post test is majority respondents think and believe that the mobile application is easy to use. Respondents also believe the content in this application is easy to understand. So the designer should consider the simplicity concept when they developing the mobile application.

An overall respondent believes the function in this application will help user to know more about Kompang. So the designer should offer a good function or features to make the user to interest to use the application.

Other than that researcher also asked respondents about the suggestion and recommendation to improve the application in pre test stage. Many suggestions given by respondents to develop a better application, the suggestion including for interface respondent want the designer to use and experiment with various colors for the layout. Respondents also want tool tips for the icon button. Respondents also believe the application should offer more features like learning function to guide user when they play the mobile apps. Another feature that suggested by respondent is record function and more pictures in the gallery section. The finding that researcher gets from the suggestion and recommendation by respondents is user usually attract with design that had various colors.

Respondents also attract and like with more features like the record, learning tutorial and, etc.

82

Conclusion & Recommendation Based on the study, research and finding researcher are able to understand that new media are the latest technology. The new media technology example is like an interactive website. Mobile apps and others are the powerful technology that can help people in every aspect of their life. In this research has described the necessary to develop and design the good mobile application. The development of mobile application must consider all aspects of mobile design like interface, interactivity, usability, navigation and functionality of the application.

83

As the conclusion the hypotheses have been answered. Overall of the respondents believe the mobile application that name “iKompang� meet their expectation. Respondent also believes the application will help people, especially teenagers to know and more understand about kompang.

The new knowledge is that researcher can get is to develop good mobile application designer should consider about this aspect. The important aspect is interfaced, interactivity, usability, navigation and functionality. In interface design designer should design something simple but interesting to attract users to use the application.

It should be simple because the space or size of a mobile phone screen is very small. Interactivity in the mobile phone application should design in the right way so users not wait for a long time to get respond from the application. Other than that the developer also should give or offer good features to attract users to use the application.

Mobile phone application also is the best medium nowadays to deliver information to each other because the potential of the mobile phone market is increased day by day.

There are two important parts that researcher wants to share in recommendation section.

The first part is the recommendation for other researchers that has an interest to study the same topic about traditional musical instrument using new media technology. Second part is in the technical aspect that can be divided into several sections.

Recommendations for other researchers, in Malaysia have many types of traditional musical instrument from many races and states. So many benefit that Malaysia can get from the variety of the instrument, so hope other researchers will research another potential musical instrument like gambus, seruling and, etc. For future research and development also hope the researcher or designer can offer more features in the mobile application for traditional musical instrument.

Other than that in the future researcher can do the test (pre test and post test) in the big number of respondents.

84

85

In technical aspect like interface, interactivity, navigation, usability and functionality, there are several recommendations that researcher wants to give or deliver to other researchers in the future study. In interface aspect should design the simple but attractive interface design for the mobile apps. The designer should brave to use and experiment with the variety of color and pattern design. They also should use the suitable typeface or font in the design.

In interactivity criteria the researcher or designer should use animation to avoid the application to be static apps. Developer or designer also should use an appropriate sound effect to make the apps more dynamic. Usability aspect the researcher should consider carefully because for mobile apps have many limitations that user will face when they use the apps like the screen size and, etc. so the designer or developer should design wise and carefully to make sure the mobile applications is user friendly to the user.

Other than that researcher also can consider promoting the traditional musical instruments with another technology and medium. In the future the other researcher can use Ipad as the medium to promote the application. Other researchers also can develop the application using other operating systems like android, RIM Blackberry OS, Symbian OS and, etc. Besides that the researcher or developer also can explore the hologram technology to promote the traditional musical more widely around the world.

86

87

References (2010) “U.S. Smartphone Battle Heats Up: Which is the “Most Desired”Operating System?”. from nielsen. com/…/us-smartphone-battle.

(2010) Gartner Says Consumers Will Spend $6.2 Billion in Mobile Application Stores in 2010.

(2010) Bila Rebab Mengalunkan ‘Phantom Of The Opera’.

ABDULLAH, M. H. (2004). “Idiosyncratic Aspects of Malaysian Music: The Roles of the Kompang in Malay Society.”

Amanz (2011) Hampir 20% Pengguna Malaysia Menggunakan Telefon Pintar.

Bhuiyan, S. I. (September 5, 2006). “Impact of new media technology on society.” from http://www. asiamedia.ucla.edu/article.asp?parentid=52164.

Chen Yumiao, X. J., Yang Zhong liang (2010).

“Culture-adapted User Interface Design Method for Mobile Phone: Correlation between User Knowledge and Icon.”

KARIM, O. H. (11 Mac 2010) Bukan mudah tubuhkan OTM. Najjar, L. J. (1992). “Multimedia User Interface Design Guidelines.”

Nielsen’s, J. (July 20, 2009:). “Mobile Usability.” from http://www.useit.com/alertbox/mobileusability.html.

Nigel chapman, J. C. (2009). Digital multimedia, John Wiley& Sons,Ltd. Pan, X. (2010). “Research of Iphone Application VI Design Based on Children Cognition Feature.” qiuhui, W. (2008). “The Effects of Interface Design about Mobile Phones on Older Adults’ Usage.”

Glaser, C. k. J. (2009). Diagrams Innovative Solutions for Graphic Designers, RotoVision 9.

Sohaimi, S. S. a. I. S. (2008). “An Investigation to Obtain a Simple Mobile Phone Interface for Older Adults.”

Herzog, U. (2010) Mobile applications – More than a hype. Mobile applications

Strand, J. (2010) Apple’s App Store and beyond.

8

Hoyoung Kim, J. K. a. Y. L. (2005). “An Empirical Study of Use Contexts in the Mobile Internet,Focusing on the Usability of Information Architec.”

Vitor Sequeira, E. B., Joao G.M. Gonqalves (1999). “Internet Based Multimedia Interface for the Control and Navigation of a Mobile Platform.”

Jae Gon Kim, J.-D. C. (2010). “Huffman User Interface for Full Touch Screen Based Mobile Phones.”

Jakob Nielsen, M. T. (2001). Homepage Usability: 50 Websites Deconstructed, New Riders Publishing.

88

Jun Gong and P. Tarasewich (2009).

“GUIDELINES FOR HANDHELD MOBILE DEVICE INTERFACE DESIGN.”

Yonghai YU, J. H. (2010). “An analysis of users’ cognitive factors towards icon in interactive interface.”

89

90

91

92

93

94

95