Computer Science Major Minor in Marketing Sarjana Komputer Thesis Semester Even year 2008

  

BINUS UNIVERSITY INTERNATIONAL

BINUS UNIVERSITY

  Computer Science Major Minor in Marketing

  Sarjana Komputer Thesis Semester Even year 2008

  

Street Skateboarding Theory Simulation:

A User Interface Design to learn street skateboarding

  

I Gde Made Krisna Aditya - 0800779995

Abstract

  The objective of this thesis is to analyze the current skateboarding scheme that is happening nowadays and build a user interface for the street skateboarding simulations to deliver a new and good media to learn skateboard tricks as an alternative way. The intention is that to make a street skateboarding as a media to teach about skateboarding tricks and things we need to do for being prepared. The teachings are delivered by written texts, audible voice, and also 3-D animation video for each of the tricks.

  The analysis of current skateboarding scheme will be made by observing the skaters around the famous cities which are Bandung, Denpasar (legian), and also Jakarta where skaters can be found in some of the good skate spots and skate parks. The analysis is also done by giving questionnaires to some skaters and non-skaters to distinguish and predict what they need as if they want to learn and improve more on their skateboarding tricks. Interviews with the pro skaters in Indonesia were also conducted for their suggestions and some solutions of which kind of way for the teachings are right and understandable for the users.

  The result of this thesis is a Street Skateboarding Simulation which makes a breakthrough on Medias for guiding and learning skateboarding and also invent a new alternative media that could ease up the learning method and also broaden the knowledge of skateboarding among the enthusiasts.

  To conclude, The Street Skateboarding Simulation is aimed to convince more people to learn skateboarding, create a new way of learning it, and also increase the effectiveness in acknowledging the basics of street skateboarding which is dedicated mostly for beginners, and some skaters who are in the progress of improving their tricks.

ACKNOWLEDGEMENT

  First of all, I would like to thank God because without His Will, I might never make it this far up to the very end until I almost graduate from College studies in Bina Nusantara University. Secondly I surely like to thank my parents for their support in any kind of things during my studies at the university. I’ve taken all this major studies to make them proud and also a privilege for myself to start a new life and also other things that I will take in the future. This might be my last piece work before I take other studies based on foreign languages which I have been dreamed of for a long time. After all, I really want to be good at some foreign languages instead of just English as my second one. So this study that I have made so far is dedicated to them and to show them the relationships between my past activities and the computer knowledge that I’ve learned to be related at each other, hopefully this can be useful for good street skateboard learning.

  I would also like to thank all the lecturers of Bina Nusantara International University who have taught me many important knowledge and skills in these 4 years of study. I would like to gratitude my supervisor, Mr. Erwin Adi, for all the guidance, helps, corrections and suggestions that are really helpful in completing my thesis project.

  I would never stop to thank my partner, Meriyana Citrawati, who have fully supported me during the first semester of college until the very end and also helped me building and realizing the street skateboarding simulation learning multimedia, without the 3-D modeling and animations, my User Interface will be nothing.

  Last but not least, as part of this Street Skateboarding Project, I would also want to express appreciation for my old skate friends in Paris, where ever you guys are in parts of the world right now, mainly; Kantapon Kaributra(Gap), Hajime Nakano, Oliver Martineau, SooBin Song and especially Victor Tora Isurugi who convinced and inspired me to skate back in 2002. I missed all of the things that we have done in high school times and this creation is dedicated as an appreciation of what we learned back in the past days. Even though some of us, including me, have stopped skating, but that won’t stop the spirit of skateboarding and also its lifestyles. At last, I would like to thank Daniel Jensen and Angelo Schneider, alumni of Bandung International School and also amateur skaters who helped me in finding the skaters for my survey respondents also making arrangements to meet the pro skaters. Much thanks to the pro skater, Firman Boesly, who gave us a suggestion and told us what kind of good resources to be found that is useful for our development phases. And also all of those who support my ideas I would say thank you for everything. Hopefully this simulation can pass on among skaters so that it can be useful for supporting their skating activity.

  

TABLE OF CONTENTS

COVER PAGE ................................................................................................................. I

TITLE PAGE ..................................................................................................................II

CERTIFICATE OF APPROVAL ............................................................................... III

STATEMENT OF BOARD OF EXAMINER............................................................ IV

ABSTRACT..................................................................................................................... V

ACKNOWLEDGEMENT............................................................................................ VI  

TABLE OF CONTENTS .......................................................................................... VIII  

LIST OF FIGURES ..................................................................................................... XV  

  

CHAPTER 1 ....................................................ERROR! BOOKMARK NOT DEFINED.  

INTRODUCTION...........................................ERROR! BOOKMARK NOT DEFINED.   ACKGROUND RROR OOKMARK NOT DEFINED

  1.1 B ............................................................. E ! B .  COPE

  RROR OOKMARK NOT DEFINED

  1.2 S .......................................................................... E ! B . 

  1.2.1 Assumption .................................................................... Error! Bookmark not defined. 

  1.2.2 Constraints .................................................................... Error! Bookmark not defined. 

  IMS AND ENEFITS RROR OOKMARK NOT DEFINED

  1.3 A B ................................................... E ! B . 

  1.4 S TRUCTURE ................................................................. E RROR ! B OOKMARK NOT DEFINED . 

  

CHAPTER 2 ....................................................ERROR! BOOKMARK NOT DEFINED.  

THEORETICAL FOUNDATION ................ERROR! BOOKMARK NOT DEFINED.  

  2.1  S

  2.2.5 Bearings ........................................................................ Error! Bookmark not defined.  2.3  S

  2.5.1.1  Ollie ............................................................................Error! Bookmark not defined.  2.5.1.2  Manual ........................................................................Error! Bookmark not defined.  2.5.1.3  Braking .......................................................................Error! Bookmark not defined.  2.5.1.3.1  By foot (one foot on the ground) ...........................Error! Bookmark not defined. 

  .  2.5.1  Name of tricks ........................................................... Error! Bookmark not defined. 

  

.................................... E

RROR ! B OOKMARK NOT DEFINED

  

2.4  S KATEBOARDING S TANCES ................................. E RROR ! B OOKMARK NOT DEFINED . 

2.5  S KATEBOARDING T RICKS

  RROR ! B OOKMARK NOT DEFINED . 

  AFETY P ARTS ..................................................... E

  2.2.4 Wheels ........................................................................... Error! Bookmark not defined. 

  IMULATION ........................................................ E RROR ! B OOKMARK NOT DEFINED

  2.2.3 Trucks ............................................................................ Error! Bookmark not defined. 

  2.2.2 Grip Tapes..................................................................... Error! Bookmark not defined. 

  2.2.1 Decks ............................................................................. Error! Bookmark not defined. 

  2.1.3 Constructive Simulation ................................................ Error! Bookmark not defined. 

2.2  S KATEBOARD ...................................................... E RROR ! B OOKMARK NOT DEFINED . 

  2.1.2 Virtual Simulation ......................................................... Error! Bookmark not defined. 

  2.1.1 Live Simulation.............................................................. Error! Bookmark not defined. 

  . 

  2.5.1.3.2  By board: power slide ............................................Error! Bookmark not defined.  2.5.1.4  Roll in or Pushing in ...................................................Error! Bookmark not defined.  2.5.1.5  Carving .......................................................................Error! Bookmark not defined.  2.5.1.6  Switch or Revert .........................................................Error! Bookmark not defined.  2.5.1.7  Kickturns ....................................................................Error! Bookmark not defined.  2.5.1.8  Shove it .......................................................................Error! Bookmark not defined.  2.5.1.9  Pop Shove it................................................................Error! Bookmark not defined.  2.5.1.10  Kick Flip .....................................................................Error! Bookmark not defined. 

  2.5.1.11  Heel Flip .....................................................................Error! Bookmark not defined.  2.5.1.12  Nose Slide...................................................................Error! Bookmark not defined.  2.5.1.13  50-50 Grind.................................................................Error! Bookmark not defined.  2.5.1.14  Board Slide .................................................................Error! Bookmark not defined.  2.5.1.15  Nollie ..........................................................................Error! Bookmark not defined.  2.5.1.16  5-0 Grind ....................................................................Error! Bookmark not defined. 

  2.5.2  List of skateboarding venues ..................................... Error! Bookmark not defined.  2.6  U SER

  I NTERFACE ................................................. E RROR ! B OOKMARK NOT DEFINED .  2.6.1  User Interface Design Principles.............................. Error! Bookmark not defined.  2.6.2  Graphical User Interface (GUI) ............................... Error! Bookmark not defined. 

  

2.7  D EFINITION OF M ULTIMEDIA .............................. E RROR ! B OOKMARK NOT DEFINED . 

2.7.1  Interaction Design..................................................... Error! Bookmark not defined.  2.7.2  Definition for usability .............................................. Error! Bookmark not defined.  2.7.3  Interaction Model...................................................... Error! Bookmark not defined.  2.7.4  Screen Layout Designing .......................................... Error! Bookmark not defined. 

  2.8  M ACROMEDIA F LASH

  .......................................... E RROR ! B OOKMARK NOT DEFINED

  .  2.8.1  Menu.......................................................................... Error! Bookmark not defined.  2.8.2  Button ........................................................................ Error! Bookmark not defined.  2.8.3  Icon............................................................................ Error! Bookmark not defined.  2.8.4  Page or Window........................................................ Error! Bookmark not defined.  2.8.5  Voice Play ................................................................. Error! Bookmark not defined.  2.8.6  Animation .................................................................. Error! Bookmark not defined.  2.8.7  Output File (.swf, .fla, .flv) ........................................ Error! Bookmark not defined. 

  2.9  A DOBE P HOTOSHOP ............................................. E RROR ! B OOKMARK NOT DEFINED

  . 

2.10  F LOW C HART ....................................................... E RROR ! B OOKMARK NOT DEFINED . 

2.11  S

  PIRAL D EVELOPMENT L

  IFE C YCLE .................... E

  RROR ! B OOKMARK NOT DEFINED . 

  2.11.1  Advantages of the Spiral Model............................ Error! Bookmark not defined.  2.11.2  Disadvantages of the Spiral Model....................... Error! Bookmark not defined. 

  

CHAPTER 3 ....................................................ERROR! BOOKMARK NOT DEFINED.  

PROBLEM ANALYSIS .................................ERROR! BOOKMARK NOT DEFINED.   URRENT KATEBOARDING CHEME RROR OOKMARK NOT DEFINED

  3.1 C S S ......................... E ! B . 

  3.2 T ARGET U SERS ........................................................... E RROR ! B OOKMARK NOT DEFINED .  OOD SER NTERFACE ESIGN RROR ! B OOKMARK NOT DEFINED . 

  3.3 G U

  I D ................................ E

  3.3.1 The Three Pillars of Design .......................................... Error! Bookmark not defined. 

  3.3.2 The Eight Golden Rules Principles ............................... Error! Bookmark not defined. 

  3.4 G ETTING THE USER ’ S ATTENTION ............................... E RROR ! B OOKMARK NOT DEFINED .  SER NTERFACE OFTWARE OOLS RROR OOKMARK NOT DEFINED

  3.5 U

  I S T .......................... E ! B . 

  XPERT EVIEW AND SABILITY ESTING RROR OOKMARK NOT DEFINED

  3.6 E R U T ................ E ! B . 

  3.7 G ENERATING

  I DEAS .................................................... E RROR ! B OOKMARK NOT DEFINED . 

  3.7.1 Ideas from technology ................................................... Error! Bookmark not defined. 

  3.7.2 Ideas from user tasks..................................................... Error! Bookmark not defined. 

  3.7.3 Supporting idea creation ............................................... Error! Bookmark not defined. 

  3.7.4 It is never that perfect.................................................... Error! Bookmark not defined. 

  

CHAPTER 4 ....................................................ERROR! BOOKMARK NOT DEFINED.  

 

SOLUTION DESIGN .....................................ERROR! BOOKMARK NOT DEFINED.

  EARNING

  VERVIEW RROR OOKMARK NOT DEFINED

  4.1 L O ................................................ E ! B . 

  4.1.1 Research Result ............................................................. Error! Bookmark not defined. 

  4.1.2 Tools overview .............................................................. Error! Bookmark not defined. 

  4.1.3 Description of the planned User Interface .................... Error! Bookmark not defined. 

  4.2 S KETCH

  4.8 S OLUTION D ESIGN D ECISION ...................................... E RROR ! B OOKMARK NOT DEFINED . 

  4.7.1 Capitalization in titles and headings............................. Error! Bookmark not defined. 

  4.7.2 Layout............................................................................ Error! Bookmark not defined. 

  4.7.3 Color ............................................................................. Error! Bookmark not defined. 

  4.7.4 Buttons........................................................................... Error! Bookmark not defined. 

  4.7.4 Sound............................................................................. Error! Bookmark not defined. 

  4.7.5 Video and animation ..................................................... Error! Bookmark not defined. 

  

CHAPTER 5 ....................................................ERROR! BOOKMARK NOT DEFINED.  

TESTING AND IMPLEMENTATION ........ERROR! BOOKMARK NOT DEFINED.

  4.6.6 Video-mode page........................................................... Error! Bookmark not defined. 

   

  5.1 T ESTING M ETHOD

  ....................................................... E RROR ! B OOKMARK NOT DEFINED

  . 

  5.2 A LPHA T ESTING .......................................................... E RROR ! B OOKMARK NOT DEFINED . 

  5.3 B ETA T ESTING

  ............................................................ E RROR ! B OOKMARK NOT DEFINED

  4.7 T EXT AND INTERACTION ............................................. E RROR ! B OOKMARK NOT DEFINED . 

  4.6.5 Instruction page ............................................................ Error! Bookmark not defined. 

  I DEA G ENERATION ........................................ E RROR ! B OOKMARK NOT DEFINED

  . 

  . 

  4.3 D

  IGITAL

  I DEA G ENERATION ....................................... E RROR ! B OOKMARK NOT DEFINED . 

  4.4 C ONCEPT S ELECTION

  .................................................. E RROR ! B OOKMARK NOT DEFINED

  4.5 F

  4.6.4 About Us page ............................................................... Error! Bookmark not defined. 

  INAL F LOW C HART ................................................... E

  RROR ! B OOKMARK NOT DEFINED . 

  4.6 F

  INAL D ESIGN M ODELING .......................................... E RROR ! B OOKMARK NOT DEFINED . 

  4.6.1 Home page .................................................................... Error! Bookmark not defined. 

  4.6.2 Rules and regulation page............................................. Error! Bookmark not defined. 

  4.6.3 Tutorial Page ................................................................ Error! Bookmark not defined. 

  . 

  RROR OOKMARK NOT DEFINED

  5.4 T ESTING R ESULT ........................................................ E ! B . 

  5.4.1 Question 1 ..................................................................... Error! Bookmark not defined. 

  5.4.2 Question 2 ..................................................................... Error! Bookmark not defined. 

  5.4.3 Question 3 ..................................................................... Error! Bookmark not defined. 

  5.4.4 Question 4 ..................................................................... Error! Bookmark not defined. 

  5.4.5 Question 5 ..................................................................... Error! Bookmark not defined. 

  5.4.6 Question 6 ..................................................................... Error! Bookmark not defined. 

  5.4.7 Question 7 ..................................................................... Error! Bookmark not defined. 

  5.4.8 Question 8 ..................................................................... Error! Bookmark not defined. 

  5.4.9 Question 9 ..................................................................... Error! Bookmark not defined. 

  5.4.10 Question 10 ................................................................. Error! Bookmark not defined. 

  5.4.11 Question 11 ................................................................. Error! Bookmark not defined. 

  5.4.12 Question 12 ................................................................. Error! Bookmark not defined. 

  5.4.13 Question 13 ................................................................. Error! Bookmark not defined. 

  5.4.14 Question 14 ................................................................. Error! Bookmark not defined. 

  

CHAPTER 6 ....................................................ERROR! BOOKMARK NOT DEFINED.  

EVALUATION ...............................................ERROR! BOOKMARK NOT DEFINED.   HE INAL URVEY RROR OOKMARK NOT DEFINED 6.1  T F S ............................................. E ! B . 

  6.1.1  Text and interaction .................................................. Error! Bookmark not defined.  6.1.2  Layout........................................................................ Error! Bookmark not defined.  6.1.3  Color ......................................................................... Error! Bookmark not defined.  6.1.4  Audio ......................................................................... Error! Bookmark not defined.  6.1.5  Video and Animation................................................. Error! Bookmark not defined. 

  VERALL ESULT RROR OOKMARK NOT DEFINED 6.2  O R ............................................... E ! B . 

  RROR

6.3  C OMPARISON TO THE SKATE VIDEO AND REAL PERSON TEACHINGS ................. E !

B OOKMARK NOT DEFINED . 

  

CHAPTER 7 ....................................................ERROR! BOOKMARK NOT DEFINED.  

CONCLUSION AND RECOMMENDATION ...............ERROR! BOOKMARK NOT DEFINED.  

REFERENCES................................................ERROR! BOOKMARK NOT DEFINED.  

CURRICULUM VITAE.................................ERROR! BOOKMARK NOT DEFINED.  

APPENDIX A ..................................................ERROR! BOOKMARK NOT DEFINED.  

PRE-DEVELOPMENT QUESTIONNAIRES................ERROR! BOOKMARK NOT

DEFINED.  

APPENDIX B ..................................................ERROR! BOOKMARK NOT DEFINED.  

AFTER- DEVELOPMENT QUESTIONNAIRES .........ERROR! BOOKMARK NOT

DEFINED.  

APPENDIX C ..................................................ERROR! BOOKMARK NOT DEFINED.  

PRE-DEVELOPMENT QUESTIONNAIRES RESULTS .....ERROR! BOOKMARK

NOT DEFINED.  

APPENDIX D ..................................................ERROR! BOOKMARK NOT DEFINED.  

AFTER-DEVELOPMENT QUESTIONNAIRES RESULTS ERROR! BOOKMARK

NOT DEFINED.  

APPENDIX E ..................................................ERROR! BOOKMARK NOT DEFINED.  

  

FLOW CHART ...............................................ERROR! BOOKMARK NOT DEFINED.  

  

LIST OF FIGURES

  Figure 1 Skateboard [1]. .................................................. Error! Bookmark not defined.   Figure 2 Skateboard parts [2]........................................... Error! Bookmark not defined.   Figure 3 Plain deck [5]..................................................... Error! Bookmark not defined.   Figure 4 Grip tape [7]. ..................................................... Error! Bookmark not defined.   Figure 5 skateboard’s trucks [10]. ................................... Error! Bookmark not defined.

    Figure 6 wheels set [12]. .................................................. Error! Bookmark not defined.  

  Figure 7 bearings [14]. ..................................................... Error! Bookmark not defined.   Figure 8 bearings inside [15]. .......................................... Error! Bookmark not defined.   Figure 9 : skate shoes [16]. .............................................. Error! Bookmark not defined.   Figure 10 : helmet [16]. ................................................... Error! Bookmark not defined.   Figure 11 : knee pad [16]. ................................................ Error! Bookmark not defined.   Figure 12 : elbow pad [16]............................................... Error! Bookmark not defined.   Figure 13 : padded pants and shorts [16]. ........................ Error! Bookmark not defined.

    Figure 14 : Spiral Development Life Cycle [18]. ............ Error! Bookmark not defined.  

  Figure 15 : Three Pillars of Design [19]. ......................... Error! Bookmark not defined.   Figure 16: gender pie chart .............................................. Error! Bookmark not defined.   Figure 17: age pie chart.................................................... Error! Bookmark not defined.   Figure 18: skater category pie chart................................. Error! Bookmark not defined.   Figure 19: layout scratch : main page .............................. Error! Bookmark not defined.   Figure 20: layout scratch : tricks chooser page................ Error! Bookmark not defined.   Figure 21: layout scratch : trick instructions page ........... Error! Bookmark not defined.

   

  Figure 22: layout scratch : video-mode page ................... Error! Bookmark not defined.   Figure 23: layout design 1 : main page ............................ Error! Bookmark not defined.  

  Figure 24: layout design 2 : instruction page................... Error! Bookmark not defined.   Figure 25: layout design 1 : video-mode page................. Error! Bookmark not defined.   Figure 26: Flow chart part 1............................................. Error! Bookmark not defined.   Figure 27: Flow chart part 2............................................. Error! Bookmark not defined.   Figure 28: layout design final : main page....................... Error! Bookmark not defined.   Figure 29: layout design final : Rules and regulation page ............Error! Bookmark not

  defined.  

  Figure 30: layout design final : tutorial page ................... Error! Bookmark not defined.   Figure 31: layout design final : about us page ................. Error! Bookmark not defined.   Figure 32: layout design final : trick instructions page.... Error! Bookmark not defined.   Figure 33: layout design final : video-mode page............ Error! Bookmark not defined.   Figure 34: The order of importance of the four corners of the screen/page [20]..... Error!

  Bookmark not defined.   Figure 35: Tutorial button ................................................ Error! Bookmark not defined.

    Figure 36: Kickflip button ............................................... Error! Bookmark not defined.  

  Figure 37: voice play button ............................................ Error! Bookmark not defined.   Figure 38: play simulation button .................................... Error! Bookmark not defined.   Figure 39: next angle button ............................................ Error! Bookmark not defined.   Figure 40: slow motion button ......................................... Error! Bookmark not defined.   Figure 41: back button ..................................................... Error! Bookmark not defined.   Figure 42: Question 1 pie chart........................................ Error! Bookmark not defined.   Figure 43: Question 2 pie chart........................................ Error! Bookmark not defined.

    Figure 44: Question 3 pie chart........................................ Error! Bookmark not defined.  

  Figure 45: Question 4 pie chart........................................ Error! Bookmark not defined.   Figure 46: Question 5 pie chart........................................ Error! Bookmark not defined.  

  Figure 47: Question 6 pie chart........................................ Error! Bookmark not defined.   Figure 48: Question 7 pie chart........................................ Error! Bookmark not defined.   Figure 49: Question 8 pie chart........................................ Error! Bookmark not defined.   Figure 50: Question 9 pie chart........................................ Error! Bookmark not defined.   Figure 51: Question 10 pie chart...................................... Error! Bookmark not defined.   Figure 52: Question 11 pie chart...................................... Error! Bookmark not defined.  

    Figure 53: Question 12 pie chart...................................... Error! Bookmark not defined.

  Figure 54: Question 13 pie chart...................................... Error! Bookmark not defined.   Figure 55: Question 14 pie chart...................................... Error! Bookmark not defined.   Figure 56: random skater respondents conducting the user testing Error! Bookmark not

  defined.  

  Figure 57: The indication point while the speaker must explain the steps clearly and brief .................................................................................. Error! Bookmark not defined.