[IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung,...

5
2012 IEEE Conference on Control, Systems and Industrial Informatics (ICCSII) Bandung, Indonesia, September 23-26, 2012 A Method to Build Usable Directory System Using 3D Web-Based Simulation and Directory Mode Lienny Natalia Lioe School of Computer Science, Binus Inteational-Binus University Jakarta I0270-Indonesia keroLien[email protected] Abstract- A directory system is an indispensable and inseparable facility for a campus building. Numerous studies have been conducted on developing a building directory system for public visitors, however, to the best of our knowledge, little is known on a directory system for a campus building using 3D web-based simulation technology. This research paper presents a method to develop a building directory system which adopted 3D web-based simulation and conventional directory mode for each user interface. The system was developed using the user-center system design method which comprises of some iterative cyclesthat are aimed to achieved a usable design from user perspective. Although the system was primarily built based on the Joseph Wibowo Center Campus building as the model, the adopted technique is applicable to meet requirement of the various target building. The usability evaluation conformance test has shown promising results that the model was accepted by potential users. Keywords: 3D web, 3D web-based simulation, directo system I. INTRODUCTION A directory system is a facility to guide new visitors to find the location of interest in the area/building quickly. Cuently, a directory system has become a standard facilities in many public areas such as airport, bus/train station, hospital, school, shopping malls, etc. The aim of a directory system is high usability system. According to the ISO/IEC 9126-1 standard, usability is defined as "the capabili of the software product to be understood, learned, used and attractive to the user, when used under specied conditions." [1]. The definition above clearly stated some requirements of a system to be categorized as a usable system. In the past ten years, usability has become the required property of a soſtware system which is characterized by its ability to attract users to use. In addition, it is easy to understand, lea, and use by the its users. Various approaches have been adopted to build a directory system ranging om physical directory mounted on a building or pole to electronic directory implemented in a dedicated electronic device located in a public location. Following the study reported in [2,3], many directories in the last decade have 978-1-4673-1023-9/12/$31.00 ©2012 IEEE 235 Yaya Heryadi School of Computer Science, Binus Inteational-Binus University Jakarta 10270-Indonesia [email protected] adopted pictorial-based infoation rather than text-based information representation. Those directory system are typically built using various physical media or dedicated electronic devices. The advantages of such directories are easy to make. However, the main drawback of these approach is lack of usability. For example, a visitor of such directory system should takes enough time to understand, lea, and used the system. The most important requirement is the user should physically come to the directory location to get the necessary information. Vredenburg et al. [4] viewed usability as a user-centered design tool to develop system that considers the time to lea, perfoance speed, rate of errors, retention over time, and a subjective satisfaction evaluation. The rther study by Abadi and Feng [5] has described various factors should be considered in order to achieve high usability system. In related to usability, the study reported in [6,7] argued that a system which adopted the 3d-based technology tends to have high usability. Despite many published work on usability concepts and 3D web application, little has been said on directory system that links usability and 3D web technologies in one application. The purpose of this paper is to develop an application to guide a new visitor to the Joseph Wibowo Center Campus which adopts 3D web technologies for its user interface. The structure of the paper is as follows. Chapter 2 explains system implementation. Chapter 3 exposes the evaluation result toward the built system. Finally, chapter 4 describes the conclusion and ture works. II. SYSTEM DEVELOPMENT METHODOLO GY The soſtware development approach to build the directory system was the user-centered system design which can be illustrated using the following diagram.

Transcript of [IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung,...

Page 1: [IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung, Indonesia (2012.09.23-2012.09.26)] 2012 IEEE Conference on Control, Systems & Industrial

2012 IEEE Conference on Control, Systems and Industrial Informatics (ICCSII) Bandung, Indonesia, September 23-26, 2012

A Method to Build Usable Directory System Using

3D Web-Based Simulation and Directory Mode

Lienny Natalia Lioe School of Computer Science,

Binus International-Binus University Jakarta I0270-Indonesia [email protected]

Abstract- A directory system is an indispensable and inseparable facility for a campus building. Numerous studies have been conducted on developing a building directory system for public visitors, however, to the best of our knowledge, little is known on a directory system for a campus building using 3D web-based simulation technology. This research paper presents a method to develop a building directory system which adopted 3D web-based simulation and conventional directory mode for each user interface. The system was developed using the user-center system design method which comprises of some iterative cyclesthat are aimed to achieved a usable design from user perspective. Although the system was primarily built based on the Joseph Wibowo Center Campus building as the model, the adopted technique is applicable to meet requirement of the various target building. The usability evaluation conformance test has shown promising results that the model was accepted by potential users.

Keywords: 3D web, 3D web-based simulation, directory system

I. INTRODUCTION

A directory system is a facility to guide new visitors to find the location of interest in the area/building quickly. Currently, a directory system has become a standard facilities in many public areas such as airport, bus/train station, hospital, school, shopping malls, etc. The aim of a directory system is high usability system. According to the ISO/IEC 9126-1 standard, usability is defined as "the capability of the software product to be understood, learned, used and attractive to the user, when used under specified conditions." [1]. The definition above clearly stated some requirements of a system to be categorized as a usable system. In the past ten years, usability has become the required property of a software system which is characterized by its ability to attract users to use. In addition, it is easy to understand, learn, and use by the its users.

Various approaches have been adopted to build a directory system ranging from physical directory mounted on a building or pole to electronic directory implemented in a dedicated electronic device located in a public location. Following the study reported in [2,3], many directories in the last decade have

978-1-4673-1023-9/12/$31.00 ©2012 IEEE 235

Yaya Heryadi School of Computer Science,

Binus International-Binus University Jakarta 10270-Indonesia [email protected]

adopted pictorial-based information rather than text-based information representation.

Those directory system are typically built using various physical media or dedicated electronic devices. The advantages of such directories are easy to make. However, the main drawback of these approach is lack of usability. For example, a visitor of such directory system should takes enough time to understand, learn, and used the system. The most important requirement is the user should physically come to the directory location to get the necessary information.

Vredenburg et al. [4] viewed usability as a user-centered design tool to develop system that considers the time to learn, performance speed, rate of errors, retention over time, and a subjective satisfaction evaluation.

The further study by Abadi and Feng [5] has described various factors should be considered in order to achieve high usability system.

In related to usability, the study reported in [6,7] argued that a system which adopted the 3d-based technology tends to have high usability. Despite many published work on usability concepts and 3D web application, little has been said on directory system that links usability and 3D web technologies in one application.

The purpose of this paper is to develop an application to guide a new visitor to the Joseph Wibowo Center Campus which adopts 3D web technologies for its user interface.

The structure of the paper is as follows. Chapter 2 explains system implementation. Chapter 3 exposes the evaluation result toward the built system. Finally, chapter 4 describes the conclusion and future works.

II. SYSTEM DEVELOPMENT METHODOLO GY

The software development approach to build the directory system was the user-centered system design which can be illustrated using the following diagram.

Page 2: [IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung, Indonesia (2012.09.23-2012.09.26)] 2012 IEEE Conference on Control, Systems & Industrial

Usability guidelines & heuristics

Technical & legal etc. constraints

Problem statement

Observation of existing systems

HTA

Requiremem statement Functional NOll-functional

Storyboard

PrOlotype

Transcript & eva1uation report

Final implememalion

Figure 1. Framework of Directory System Development

The framework forms a cycle started from: task analysis, requirement gathering, design and storyboarding, prototype implementation, evaluation and installation.

Task analysis find out the problems and analyze similar works, requirement gathering is where information of the system functionalities and user requirements are put together.

The design and story boarding step comes next and require developer to create a storyboard of the system based on the user interface design developed. In this phase, several storyboards were developed to capture user requirements. Examples of storyboard was presented in figure 2 below.

1'11Io�1on g.g,= , .......... l �,g,= JJ,""" ... . �,

J._o.:w ..

DDD camel Move, ",emd;ng to

�mouse_ eventsinputs ...

��

D Figure 2. Storyboard 1 view 1 (left) and view 6 (right).

Another milestone was system implementation. System architecture of the developed system can be represented using the following figure.

236

r--

! - - �[=-[ -P IIIOduIt - ...... � ....... � III<IIME�1.s I "'mtr� t

'-

-

0 U t p u t

-

Figure 3. System Architecture of the Directory System

Components of the system architecture are as follows. (1) Inputs are the range of devices that are used to trigger an

events in the system, in this case, a mouse. (2) User Input module is responsible for the functions which

will get the input information and translate it into the system.

(3) The system logic module is the one responsible for changing the state of actors in the system world, cameras and moving objects.

(4) Graphics module is responsible for the process and logic of rendering the states onto the display.

(5) Output is the result of the 3D graphics and images that is shown in the monitor for the users.

sJmplified versJon of Slate dJagram(versJon2)

Svstemfum::tionalities Syslemluntlonsand evenl s and events

These slales are able 10 be accessed alany llmelromany slaleolthe syslem. For the Mchoose conlrol modeM It cannot be accesed from Infonnallon cenler

Figure 4. Simplified State Diagram of the Directory System

In the final design, the user interface of the directory system lets the users to choose floor of the building to be explored. The control options is provided to let user choose either simulation or directory control modes. The later mode is provided as a transition to the former mode particularly for those users who are still used to 2D Media and websites and are less exposed to applications which utilizes 3D environment. Information of current schedules and events happening will also be available for the audiences.

Finally, in order to gain feedback on usability aspect, a usability evaluation was conducted several times. The aim of the

Page 3: [IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung, Indonesia (2012.09.23-2012.09.26)] 2012 IEEE Conference on Control, Systems & Industrial

evaluation was to gain feedback from potential users about the system usability of the proposed design.

The target audiences for this system, when it is fully installed will consist of college students, faculty staff, and other potential visitors or fresh applicants. Other than a directory and simulation system which is targeted to any visitors to the college, the system is also designed with a timetable and event schedules layout, to assist the students with their schedules location or time changes and also for the faculty members to broadcast the current schedules and events available for both students and visitors.

Therefore the testing and evaluation processes are carried out on 10 people that consist of current college students, faculty staffs and also visitors to the college to provide feedback on the usability of the system design. This design process iterated several times.

Final system design was implemented after the design was considered stable from these selected users' perspective.

Most of the functions used for the mouse controls in simulation mode are easily available from the library used by the author system. Below is some of the function used to trigger the events mentioned.

The language that was used to create the webGL based 3D directory system is JavaScript, and the library utilized were THREE.js and jQuery.js and the interface was shaped by Cascading Style Sheet.

Iladd buttons Floor2.addEventListener("c1ick", _lobby, false); lito floor 2(moving between floors) Function _ floor2() { Camera.position.set(x,y,z); Camera.rotation.y=y; Camera.lookAt(x,y,z); } Iisimulation mode If (simulationMode) { updateRender controls.update(timer) } IlinfoBox events Ilwaypoints/setting Ilwaypoint controls I trigger function waypoint_back_2010{

if( camera. position.x !=waypointback20 1 [way Index].x ) { came ra.position.x+=( waypointback20 1 [wayIndex ].x camera.position.x ) I 10;}

if( camera.rotation.y != waypointback20 1 [way Index].y ){ camera.rotati on.y += ( waypointback201[wayIndex].y - camera.rotation.y ) I 30;}

237

if( camera.position.z!=waypoint[ wayIndex] .z) { ca mera.position.z+=(waypoint[wayIndex].z - camera.position.z ) I 1O;}

vardistanceX =waypoint[ way Index].x - camera. position.x; var rotationY = waypoint[wayIndex].y - camera.rotation.y;

var distanceZ=waypoint [way Index].z - camera.position.z;

if( distanceX < 0.1 && rotation Y < 0.1 && distanceZ <

0.1 ){ wayIndex++; if( way Index == waypointback20 l.length){ wp_back_201 = false;}}}

Ilmouse controls (available from lib) Iidirectory simulation switch tab If( directory Mode ) {directoryMode = true;simulationMode=false;} If(simulationMode) {simulationMode true;directoryMode=false;control. update( time)}

'I 1 '"

Figure 9. Flow Chart of system

Evaluation process was where results were gathered and evaluated, details will be explained in the next section.

Installation process is the last step of the system design methodology. In this process the system that is fully developed will be installed and ready for public use. This process is not yet carried out in the current system as the system have yet to be fully developed.

Page 4: [IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung, Indonesia (2012.09.23-2012.09.26)] 2012 IEEE Conference on Control, Systems & Industrial

III. SYSTEM RESULT AND Ev ALUATlON

The directory system which adopted the 3D web-based technologies can be presented using the following captured screen shoots.

Figure 5. Screenshot of Directory System in 3D environment

Figure 6. Screenshot ofInformation in Simulation Mode

Figure 7. Screenshot ofInformation in Directory Mode

Figure 8. Screenshot of Events and Schedule Panel

The first evaluation performed comes in a form of surveys, followed by interview and user evaluation testing. The user evaluation test was conducted more than once. Surveys were conducted to find out whether or not users are familiar with the technology and their basic view of it.

238

The interview process was to find out how the user feels about introduction to this technology and also to reconfirm the previous survey questions, since the first survey also required users to describe their views, some of the questions are left with either very short sentence, or blanks. User testing and feedbacks were then conducted after the first 2

evaluations were done and a sample prototype was ready to be tested, and receive the proper feedbacks from the users. User testing processes focus on whether or not the users feel the need to fix the interface, if system's navigation functionality and view is uncomfortable, or difficulty in understanding the user interface. Another point which also was included in the user evaluation test was the accuracy of the 3D environment as compared to the real one.

Some qualitative results from usabilility evaluation can be summarized as follows.

(1) Majority of audiences tested were initially not familiar with the concept of 3D website.

(2) Audiences requested on creating the prototype first as they are unable to visualise and provide accurate inputs based on the storyboard only

(3) First user evaluation test shows that users were not satisfied at all with the current storyboard and requested many changes especially in its consistency of layout positions.

(4) Second user evaluation test conducted shows that after the first session of feedbacks and renew UI design, the previous audiences and additional audiences were both able to locate the buttons and navigate through the system easily. Additional audiences were added as testers to allow more accurate results, since the previous audiences were already aware of what the system was supposed to do and the overall 3D environment layouts.

(5) Details of the 3D objects and environment was also complimented by the audiences and considered by them as accurate.

Some qualitative results from System Implementation can be summarized as follows. (1) Users were able to navigate through the buildings with no

difficulties. (2) Floors choices are available for the audiences to choose and

move to, from any other floor. (3) Simulation control mode is implemented by the use of

mouse clicks events and enables the audience to move freely through the 3D vicinity.

a) Left button: move forward b) Right Button: move back c) Cursor position: rotation direction and speed.

Page 5: [IEEE 2012 IEEE Conference on Control, Systems & Industrial Informatics (ICCSII) - Bandung, Indonesia (2012.09.23-2012.09.26)] 2012 IEEE Conference on Control, Systems & Industrial

(4) Directory control mode is implemented by the use of directory map image and an overlaying button on the top of the map. Upon button click, the audience's view will be automatically animated to the selected area by following a pre-determined path. This restricts the controls available for the users but enable easier control as well.

(5) Switch function is implemented to enable the audience to move from simulation control mode, to directory control mode and vice versa, whenever the audiences want to.

(6) Additional panel which shows current schedule and events are also available. This feature is just an additional feature to display events related to the buildings.

(7) On simulation modes, information of the location will show up when audiences are near to the location and disappear again when they move away.

(8) On directory mode, the title of each location can be clicked to show the information.

IV. CONCLUSION AND FUTURE WORKS

In general, the research was the base conformance testing of the full system development to find out if the system prototype met the standard usability requirements of the audiences. The research results supported the claim that 3D web-based technologies could contribute to high usability and a more robust interactions capability of a software system. Despite many users were not initially familiar with the 3D technologies, the evaluation results showed that the respective users could learn and used the system in a reasonable learning pace. One common critic to the system is aesthetic aspect of of the user-interface layout design. Those aspect will become the next agenda of this research. Adding on to this factor, the research will also be further required to gather additional volunteers for a more

239

accurate result on the user evaluations and analyze the factors that were emphasized most by the audiences of the system.

ACKNOWLEDGMENT

Both authors would also like to thank to various peoples who has contributed their ideas during the development process of this system. Special thank goes to Resa Yogya, Fendy Heryanto and Salman Arthadi for their constant feedbacks and comments to this research. In particular, both authors would like to thank Management of the Binus International who has been very supportive to let us used the Joseph Wibowo Center Campus building for the research.

REFERENCES

[1] Bevan, N. "International standards for HCI and usability," in Int. J. Human-Computer Studies, vol. 55, pp. 533-552,2001.

[2] Kellner, D. "Critical Perspectives on Visual Imagery in Media and Cyberculture." Journal of Visual Literacy, vol. 22(1), pp. 81-90, 2002.

[3] Keegan, S. N. "Importance of Visual Images in Lectures: Case Study on Tourism Management Students." Journal of Hospitality, Leisure, Sport and Tourism Education, vol 6( I), 2007.

[4] K. Vredenburg, YJ. Mao, W.P. Smith, and T. Carey, "A survey of user­centered design practice," ACM, In Proc. of CHI, pp. 471-478, 2002. 2002.

[5] Abadi, H.G. N. and L. Y. Feng. "Culture as the main source in 'User­centered design' Using 'user-defined', 'guessability', and 'usability' study in generating gestures for touchscreen mobile devices," in Proceeding of the 2nd International Conference on E-Learning & Knowledge Management Technologies (ICEKMT 2012),2012.

[6] Bamford, A. "LiFE: Learning in Future Education. Evaluation of Innovations in Emerging Learning Technologies ", 20 II.

[7] DLP Texas Instrument. "Boulder Valley School District Adopts II DLP ® Technology to Bring Superior Classroom Projection In 3D - for Today and Tomorrow Boulder Valley School case study." DLP Case Evaluation, Texas Instrument, 2010.