!
!
TUGAS AKHIR - RD141558
PERANCANGAN APLIKASI INTERAKTIF FISIKA CAHAYA DAN ALAT OPTIK SEBAGAI MEDIA PENDUKUNG PEMBELAJARAN SISWA SMP
VIRNANDA RAYANDINI NRP. 3412100176 DOSEN PEMBIMBING Rahmatsyam Lakoro, S.Sn., MT. NIP. 19760907 2001121 001
PROGRAM STUDI DESAIN KOMUNIKASI VISUAL JURUSAN DESAIN PRODUK INDUSTRI FAKULTAS TEKNIK SIPIL DAN PERENCANAAN INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA 2017
!
i!
! ! ! ! ! ! ! TUGAS AKHIR – RD141558
PERANCANGAN APLIKASI INTERAKTIF FISIKA CAHAYA DAN ALAT OPTIK SEBAGAI MEDIA PENDUKUNG PEMBELAJARAN SISWA SMP
VIRNANDA RAYANDINI NRP. 3412100176
Dosen Pembimbing Rahmatsyam Lakoro, S.Sn., MT. NIP. 19760907200121001
PROGRAM STUDI DESAIN KOMUNIKASI VISUAL JURUSAN DESAIN PRODUK INDUSTRI FAKULTAS TEKNIK SIPIL DAN PERENCANAAN INSTITUT TEKNOLOGI SEPULUH NOPEMBER SURABAYA 2017
! ii!
! ! ! ! ! ! ! ! FINAL PROJECT – RD141558
LIGHT AND OPTIC PHYSICS INTERACTIVE APPLICATION DESIGN AS LEARNING SUPPORTER FOR JUNIOR HIGH SCHOOL STUDENTS
VIRNANDA RAYANDINI NRP. 3412100176
Supervisor Rahmatsyam Lakoro, S.Sn., MT. NIP. 19760907200121001
VISUAL COMMUNICATION DESIGN DEPARTEMENT OF INDUSTRIAL PRODUCT DESIGN FACULTY OF CIVIL ENGINEERING AND PLANNING SEPULUH NOPEMBER INSTITUTE OF TECHNOLOGY SURABAYA 2017
!
i!
!
i!
!
i!
KATA PENGANTAR ! Dengan mengucap puji syukur kehadirat Tuhan Yang maha Esa, karena atas ridho dan hidayahNya, penulis dapat menyelesaikan Tugas Akhir ini.
Tugas Akhir dengan judul “Perancangan Aplikasi Interaktif Fisika Cahaya dan Alat Optik sebagai Media Pendukung Pembelajaran untuk Siswa SMP” ini diajukan untuk memenuhi persyaratan kelulusan program studi strata satu pada jurusan Desain Komunikasi Visual di Institiut Teknologi Sepuluh Nopember. Selain itu, penulis juga dapat menerapkan pengetahuan yang telah diperoleh di bangku kuliah dengan kenyataan dalam ruang lingkup pekerjaan.
Menyadari penyusunan laporan ini tidak lepas dari berbagai pihak, maka pada kesempatan kali ini Penulis ingin mengucapkan terima kasih kepada:
1) Alm. Raymond Irawan Panambunan selaku ayah dari penulis yang telah memberikan doa, dukungan moril dan materil, serta kasih sayang yang begitu besar terhadap penulis sehingga penulis termotivasi untuk menyelesaikan tugas akhir ini. 2) Bapak Rahmatsyam Lakoro, S.Sn,MT. sebagai dosen pembimbing yang telah bersedia menyediakan waktu untuk membimbing, memeriksa, serta memberikan petunjuk dan nasihat, serta saran dalam penyusunan laporan ini. 3) Bapak Ir. Baroto Tavip Indrojarwo M.si. sebagai dosen penguji yang telah bersedia meluangkan waktu untuk memberikan kritik dan saran yang membangun dalam laporan ini. 4) Ibu Senja Aprela Agustin, S.T., M.Ds. sebagai dosen penguji yang telah bersedia meluangkan waktu untuk memberikan kritik dan saran yang membangun dalam laporan ini. 5) Bapak Nugrahadi Ramadhani S.sn., MT. sebagai dosen penguji yang telah bersedia meluangkan waktu untuk memberikan kritik dan saran yang membangun dalam laporan ini. 6) Seluruh staf pengajar Desain Komunikasi Visual Institut Teknologi Sepuluh Noopember yang telah memberikan bimbingan dan materi perkuliahan kepada penulis.
!
i!
7) Ibu Dra. Hj. Titik Sudarti, M.Pd. selaku Kepala Sekolah SMPN 1 Surabaya yang bersedia memberikan izin kepada penulis untuk melaksanakan proses riset di SMPN 1 Surabaya. 8) Ibu Purwanita dan Ibu Wahyu selaku guru IPA SMPN 1 Surabaya yang telah meluangkan waktunya untuk memberikan informasi tentang kurikulum IPA 2013, serta menjelaskan proses belajar-mengajar yang telah dilakukan terhadap siswa SMPN 1 Surabaya 9) Seluruh staf pengajar dan siswa/i SMPN 1 Surabaya yang telah embantu penulis dalam kegiatan wawancara, observas, dan FGD demi kelancaran penyusunan laporan ini. 10) Ibu (Yuliandri Puspitasari) dan adik(Clarissa Audya), yang selalu memberikan dukungan dan doa, baik secara moril maupun materil, demi memotivasi penulis dalam menyelesaikan proses Tugas Akhir ini. 11) Dody Danindra dan keluarga, serta Anita Kusuma Wardani dan keluarga selaku paman dan tante dari penulis yang telah memberikan dukungan moril maupun materil, demi kelancaran proses Tugas Akhir ini. 12) Altair Alva Edison selaku partner dan desainer konsultan dalam perancangan tugas akhir ini yang telah
meluangkan banyak waktu, kasih sayang dan
tenaganya dalam memotivasi dan membantu penulis dalam menyelesaikan proses Tugas Akhir ini. 13) Sahabat-sahabat di kampus dan sekolah, Jossua, Sheilanda, Aisya, Molivia, Nadia, Zaskia, Ayu, Sarita, Afifah, Melia, Nadine, Bani, mas Abet, mba Achintya, dan mas Andre yang memberikan motivasi, doa, dan dukungan bagi penulis untuk menyelesaikan Tugas Akhir ini. 14) Serta semua pihak yang tidak bisa disebutkan satu per satu.
Penulis merasa bahwa dalam menyusun laporan ini masih ada beberapa kekurangan dan masih jauh dari sempurna, maka dari itu penulis mengaharapkan kritik dan saran yang membangun dai semua pihak. Akhir kata semoga laporan ini bermanfaat bagi kita semua. Surabaya, 24 Januari 2017
Virnanda Rayandini
! ii!
PERANCANGAN APLIKASI INTERAKTIF FISIKA CAHAYA & ALAT OPTIK SEBAGAI MEDIA PENDUKUNG PEMBELAJARAN UNTUK SISWA SMP
Oleh
: Virnanda Rayandini
NRP
: 3412100176
ABSTRAK
IPA merupakan ilmu yang menjadi landasan teknologi bagi suatu negara. Oleh karena itu, IPA menjadi tolak ukur untuk masuk ke perguruan tinggi di Indonesia dan bahkan di dunia. Fisika merupakan salah satu cabang ilmu pengetahuan alam (IPA) . Namun, pemahaman konsep dalam fisika sangat rumit sehingga membuat ilmu tersebut terkesan sulit dan membosankan. Hal ini menyebabkan menurunnya minat dalam mempelajari fisika yang berdampak pada rendahnya nilai pelajaran IPA. Hal ini memunculkan urgensi untuk meningkatkan minat siswa untuk mempelajari fisika melalui media pendukung pembelajaran fisika yang mampu membimbing mereka sejak tingkat awal, yaitu tingkat SMP. Perancangan media aplikasi ini dilakukan dengan metode observasi ke sekolah menengah pertama untuk mengamati proses pengajaran yang dilakukan oleh guru, dan proses siswa dalam menerima ilmu yang diberikan. Observasi juga dilakukan terhadap media pendukung pembelajaran fisika yang sudah ada. Depth Interview terhadap guru dan FGD terhadap pengguna dilakukan untuk mendapatkan konten media yang sesuai dengan target pasar. Studi literatur tentang ilmu fisika dasar dan pemahaman konsep fisika yang terdapat pada bukubuku yang sesuai dengan kurikulum pembelajaran tahun 2013 untuk mendapatkan konten media. Seluruh hasil penelitian dianalisa untuk mendapatkan hasil perancangan yang menyeluruh dan terhubung, sehingga didapatkan konsep desain berupa interaksi visual prinsip dasar fisika sebagai dasar dari perancangan media aplikasi ini. Aplikasi ini berisikan tentang sifat-sifat cahaya dan pembentukan bayangannya dalam kehidupan sehari-hari, serta bagian-bagian dan cara kerja alat optik pada kehidupan sehari-hari. Pembahasan konten tersebut dikemas dengan interaksi visual dan animasi sederhana. Perancangan aplikasi ini diharapkan dapat membantu siswa dalam memahami konsep-konsep fisika dengan lebih mudah dan menyenangkan. Kata kunci : aplikasi, fisika, media interaktif, SMP.
!
i!
Halaman sengaja dikosongkan
! ii!
PHYSICS INTERACTIVE APPLICATION DESIGN AS SUPPORTIVE EDUCATIONAL MEDIA FOR JUNIOR HIGH SCHOOL GRADER
By
: Virnanda Rayandini
NRP
: 3412100176
ABSTRACT
Science is the studies that become basis technology of a country. Therefore science has become benchmark to determine someone’s intellectual to get in to a college in Indonesia or even all over the country. Physics is one of the hardest studies that included in science. However in the physics studies, basic concept understanding is needed before we could learn the next stage of the concept. But, thus are really complicated that makes it looks hard and boring. This has led to the decrease of student’s interest for learning this subject that impact the low grade in science. This gave rise to the urgency for increasing student’s interest to learn physics through physics supportive educational media, which can help to guide them from the first step, Junior High School. The research design of this application is doing by observation in the middle school to observe teaching process that has been doing by the teacher, and the understanding process of the students from receiving the subject education. The observation also doing have on the existing supportive physics education. Depth Interview have on teacher and focus group discussion on user are doing to get the suitable content for user. Literature studies about physics basic concept have on books, websites, videos that suitable with current curriculum for the content media. The result of all research were analyzed to get a whole and connected research, so that basic physics visual interactive concept formed as the base of this design. This app contains with fundamental light’s behaviors and its shadow’s formation in everyday life, and also it is explains about the parts of the optical tools and how it works in everyday life. The contents are explained with visual interaction and simple animation. This app design hopefully could help the students to understand physics concept with easier and excited way. Keywords : application, physics, interactive media, Junior High School.
!
iii!
Halaman ini sengaja dikosongkan
! iv!
DAFTAR ISI ABSTRAK .............................................................................................................. i ABSTRACT .......................................................................................................... iii DAFTAR ISI .......................................................................................................... v DAFTAR GAMBAR .......................................................................................... viii DAFTAR TABEL................................................................................................. xi DAFTAR BAGAN ............................................................................................... xii BAB 1 PENDAHULUAN ..................................................................................... 1 1.1. Latar Belakang ...................................................................................................... 1 1.2. Identifikasi Masalah .............................................................................................. 5 1.3. Batasan Masalah .................................................................................................... 5 1.4. Rumusan Masalah ................................................................................................. 6 1.5. Ruang Lingkup ...................................................................................................... 6 1.5.1.
Ruang Lingkup Studi .................................................................................... 6
1.5.2.
Output ........................................................................................................... 7
1.6. Tujuan Perancangan ............................................................................................. 7 1.7. Manfaat Perancangan ........................................................................................... 7 1.8. Metode Perancangan ............................................................................................. 8
BAB 2 KAJIAN PUSTAKA ............................................................................... 11 2.1. Studi Desain Terdahulu ...................................................................................... 11 2.1.1 Aplikasi Edukasi ............................................................................................. 11 2.2. Studi Desain Aplikasi Interaktif Mobile ............................................................ 20 2.2.1 Graphic User Interface dan User Experience .................................................. 20 2.3. Sistem Pembelajaran Fisika ............................................................................... 37 2.3.1 Media Pembelajaran Visual ............................................................................ 38 2.4. Karakteristik Target Segmentasi ....................................................................... 39
BAB 3 METODOLOGI RISET DAN DESAIN ............................................... 41 3.1. Proses Desain ........................................................................................................ 41 3.1.1 Riset ................................................................................................................. 41 3.1.2 Proses Desain .................................................................................................. 42
!
v!
3.2 Protokol Riset ........................................................................................................ 43 3.2.1 Studi Literatur (Sekunder) ............................................................................... 43 3.2.2 Studi Eksperimental ......................................................................................... 43 3.2.3 Focus Group Discussion .................................................................................. 44 3.2.4 Depth Interview ............................................................................................... 45
BAB 4 PEMBAHASAN ANALISIS HASIL RISET ........................................ 47 4.1. Hasil Riset ............................................................................................................. 47 4.1.1 Studi Literatur .................................................................................................. 47 4.1.2 Studi Eksperimental ......................................................................................... 50 4.1.3 Observasi ......................................................................................................... 54 4.1.4 Focus Group Discussion .................................................................................. 55 4.1.5 Depth Interview I ............................................................................................. 57 4.1.6 Depth Interview II ........................................................................................... 59 4.2 Analisa Hasil Riset ................................................................................................ 62 4.2.1 Analisa Konten Aplikasi .................................................................................. 63 4.2.2 Analisa Desain ................................................................................................. 63
BAB 5 KONSEP DESAIN .................................................................................. 65 5.1 Konsep Dasar dan Kriteria Desain ..................................................................... 65 5.1.1 Deskripsi Perancangan .................................................................................... 65 5.1.2 Output Perancangan ......................................................................................... 65 5.1.3 Keyword .......................................................................................................... 66 5.1.4 Makna Denotasi Keyword ............................................................................... 67 5.1.5 Makna Konotasi Keyword ............................................................................... 68 5.2 Kriteria Desain ...................................................................................................... 68 5.2.1 Arsitektur Informasi ........................................................................................ 70 5.2.2 Gaya Bahasa ................................................................................................... 77 5.2.3 User Experience ............................................................................................... 77 5.2.4 Kriteria Gadget ................................................................................................ 87 5.2.5 Branding .......................................................................................................... 88 5.2.6 Proses Desain ................................................................................................... 90 5.2.5 Kriteria Konten ................................................................................................ 94 5.3 Implementasi Desain ............................................................................................. 96
BAB 6 KESIMPULAN DAN SARAN ............................................................. 101
! vi!
6.1 Kesimpulan .......................................................................................................... 101 6.2 Saran .................................................................................................................... 102
!
!
vii!
DAFTAR GAMBAR
Gambar 2.1 Aplikasi Tinybop ........................................................................ 11 Gambar 2.2 Konten Aplikasi Organ Tubuh Tinybop ..................................... 11 Gambar 2.3 Left Hidden Menu Tinubop ......................................................... 13 Gambar 2.4 Konten Aplikasi Space Tinybop ................................................. 14 Gambar 2.5 Aplikasi Thix .............................................................................. 15 Gambar 2.6 Fitur Aplikasi Thix ..................................................................... 16 Gambar 2.7 Aplikasi Exploriment .................................................................. 17 Gambar 2.8 Fitur Aplikasi Exploriment ......................................................... 18 Gambar 2.9 Seri Aplikasi HSVPL .................................................................. 18 Gambar 2.10 Fitur Aplikasi HSVPL .............................................................. 19 Gambar 2.11 Ide UI I ...................................................................................... 22 Gambar 2.12 Ide UI II .................................................................................... 23 Gambar 2.13 Ide UI III ................................................................................... 23 Gambar 2.14 Ide UI IV ................................................................................... 23 Gambar 2.15 Ide UI V .................................................................................... 23 Gambar 2.16 Ide UI VI ................................................................................... 24 Gambar 2.17 Ide UI VII ................................................................................. 24 Gambar 2.18 Perbandingan flat desain dan flat desain 2.0 ............................ 25 Gambar 2.19 Gaya Visual pada aplikasi edukasi ........................................... 25 Gambar 2.20 Flat Design 2.0 pada aplikasi .................................................. 25 Gambar 2.21 Swiss International Design pada app ........................................ 26 Gambar 2.22 Warna Merah Pada Website ..................................................... 27 Gambar 2.23 Warna Lime pada Website........................................................ 27 Gambar 2.24 Warna Biru pada Website ......................................................... 28 Gambar 2.25 Contrast Color Wheel ............................................................... 29 Gambar 2.26 Font Sans Serif dan Serif .......................................................... 30 Gambar 2.27 Kindle’s Font Justification ....................................................... 30 Gambar 2.28 Typeface pada Aplikasi ............................................................. 31 Gambar 2.29 Userflow .................................................................................... 31
!viii!
Gambar 2.30 Contoh Direct Manipulation .................................................... 33 Gambar 2.31 Interaksi Direct Manipulation pada Ipad ................................. 33 Gambar 2.32 Navigasi Slider pada Uber App ................................................ 34 Gambar 2.33 Navigasi Pictorial Icon pada Aplikasi ..................................... 35 Gambar 2.34 Navigasi Card Grid pada Aplikasi ........................................... 35 Gambar 2.35 Navigasi Spinner Wheel pada Aplikasi .................................... 36 Gambar 2.36 Navigasi Full Screen pada Aplikasi ........................................ 36 Gambar 4.1 Buku Saku IPA ........................................................................... 48 Gambar 4.2 Aplikasi Pembentukan Cahaya................................................... 50 Gambar 4.3 Aplikasi Fisika Cahaya............................................................... 51 Gambar 4.4 Potongan Video Penejalasan Mata Manusia .............................. 52 Gambar 4.5 Potongan Video Penjelasan Kelainan Mata Manusia ................ 52 Gambar 4.6 Pembentukan Bayangan pada Lup ............................................. 53 Gambar 4.7 Pembentukan Bayangan pada Teropong Bintang ...................... 53 Gambar 4.8 Pembentukan Bayangan pada Mikroskop .................................. 53 Gambar 4.9 Pembentukan Bayangan Pada Periskop ..................................... 54 Gambar 4.10 Suasana Kelas SMPN 1 Surabaya saat belajar fisika ............... 54 Gambar 4.11 FGD SMPN 1 Surabaya ........................................................... 56 Gambar 5.1 Sistematika Pembahasan Konten Cahaya .................................. 75 Gambar 5.2 Sistematika Pembahasan Konten Alat Optik ............................. 76 Gambar 5.3 Anatarmuka Home...................................................................... 77 Gambar 5.4 Antarmuka Submenu Cahaya ..................................................... 78 Gambar 5.5 Antarmuka Submenu Alat optik ................................................. 78 Gambar 5.6 Antarmuka Menu Selection ........................................................ 79 Gambar 5.7 Antarmuka Layar Interaksi......................................................... 80 Gambar 5.8 Tipografi Judul Menu ................................................................. 80 Gambar 5.9 Tipografi Jjudul pada Layar ....................................................... 81 Gambar 5.10 Tipografi Penjelasan pada Layar .............................................. 82 Gambar 5.11 Tombol pada Layar Menu ........................................................ 83 Gambar 5.12 Tombol dan Ikon Pada Layar Interaksi .................................... 84 Gambar 5.13 Tone Warna Aplikasi ............................................................... 85
!
ix!
Gambar 5.14 Tonal Warna Aplikasi ............................................................... 86 Gambar 5.15 Animasi dan Interaksi ............................................................... 86 Gambar 5.16 Elemen Visual dan Interaksi pada Kehidupan Sehari-hari ....... 86 Gambar 5.17 Kriteria Ukuran Layar Smartphone .......................................... 87 Gambar 5.18 Kriteria Ukuran Layar Tablet ................................................... 87 Gambar 5.19 Jenis-jenis Aplikasi Visics ........................................................ 88 Gambar 5.20 Aplikasi pada Appstore............................................................. 89 Gambar 5.21 Website Interface Visics ........................................................... 89 Gambar 5.22 (Proses Desain I) Rangka struktur informasi aplikasi .............. 90 Gambar 5.23 (Proses Desain II) Elemen Visual pada Aplikasi ...................... 91 Gambar 5.24 (Proses Desain II) Elemen Visual pada Aplikasi ...................... 92 Gambar 5.25 (Proses Desain III) Animasi Cahaya......................................... 93 Gambar 5.26 (Proses Desain III) Animasi Alat Optik.................................... 93 Gambar 5.27 (Proses Desain III) Interaksi Pembentukan Bayangan ............. 94 Gambar 5.28 Pengaplikasian Warna pada Cahaya ......................................... 94 Gambar 5.29 Pengaplikasian Warna pada Alat Optik .................................... 94 Gambar 5.30 Struktur Aplikasi Cahaya dan Alat Optik ................................. 96 Gambar 5.31 Struktur Aplikasi pada Menu Cahaya ....................................... 97 Gambar 5.32 Struktur Aplikasi Menu Alat Optik .......................................... 98 Gambar 5.33 Menu Awal Aplikasi ................................................................. 99 Gambar 5.34 Layar Penjelas Alat Optik ....................................................... 100 Gambar 5.36 Teks Informasi pada Konten Aplikasi .................................... 100
! x!
DAFTAR TABEL
Tabel 1.1 Rata-rata Ujian Nasional SMP 2015 ................................................ 2 Tabel 1.2 Rata-rata Ujian Nasional SMA 2015 ............................................... 3 Tabel 2.1 Penggunaaan Kata pada Aplikasi ................................................... 31 Tabel 3.1 Protokol Riset FGD ........................................................................ 44 Tabel 3.2 Protokol Riset DI Guru .................................................................. 45 Tabel 3.3 Protokol Riset DI Programmer ...................................................... 46 Tabel 5.1 Sistematika Konten Cahaya ........................................................... 73 Tabel 5.2 Sistematika Konten Alat Optik ...................................................... 74
!
xi!
DAFTAR BAGAN
Bagan 3.1 Diagram Penelitian ........................................................................ 41 Bagan 4.1 Peta Konsep Cahaya pada Kurikulum 2009 .................................. 47 Bagan 4.1 Peta Konsep Alat Optik pada Kurikulum 2009 ............................. 48 Bagan 4.3 Konten Aplikasi Cahaya ................................................................ 57 Bagan 4.4 Konten Aplikasi Alat Optik ........................................................... 58 Bagan 4.5 Contoh Naskah .............................................................................. 59 Bagan 4.6 Strukrur Aplikasi Cahaya .............................................................. 60 Bagan 4.7 Struktur Aplikasi Alat Optik ......................................................... 61 Bagan 4.8 Wireframing Aplikasi .................................................................... 62 Bagan 5.1 Keyword Aplikasi.......................................................................... 66 Bagan 5.2 Kriteria Desain Aplikasi ................................................................ 68 Bagan 5.3 Arsitektur Informasi Aplikasi ........................................................ 70 Bagan 5.4 Home Aplikasi ............................................................................... 71 Bagan 5.5 Menu Cahaya ................................................................................. 71 Bagan 5.6 Submenu Cahaya ........................................................................... 71 Bagan 5.7 Menu Alat Optik ............................................................................ 72 Bagan 5.8 Submenu Alat Optik ...................................................................... 72
!xii!
BAB 1 PENDAHULUAN
1.1. Latar Belakang MIPA (Matematika dan Ilmu Pengetahuan Alam) adalah salah satu landasan pengembangan teknologi untuk meningkatkan daya saing suatu bangsa. Dari pertanyaan tersebut terdapat asumsi bahwa teknologi menentukan indikator majunya suatu bangsa, Sementara IPA merupakan dasar dari teknologi. Sains pada umumnya dan khususnya fisika berkaitan dengan mencari tahu tentang alam secara sistematis, bukan hanya pengumpulan fakta-fakta, konsep-konsep prinsipprinsip saja tetapi juga proses penemuan1. Oleh karena itu fisika menjadi ilmu yang penting untuk dipelajari, dan menjadi acuan dalam bidang pendidikan sebagai penentu kualitas pemikiran seseorang di Indonesia bahkan dunia. Sistem pembelajaran IPA di Inodnesia disusun secara sistematis dan diperkenalkan sejak sekolah dasar. Pada SD kelas I, II, dan III muatan sains disajikan pada mata pelajaran bahasa Indonesia, sedangkan pada kelas IV, V, dan VI IPA menjadi mata pelajaran yang berdiri sendiri dengan materi tematik terpadu. Mata pelajaran IPA pada
SMP/MTs menerapkan pembelajaran sains terpadu, dimana siswa
mulai diperkenalkan dengan cabang ilmu pengetahuan alam yang lebih spesifik yaitu fisika, kimia, dan biologi dalam satu mata pelajaran IPA. Pada SMA/MA ilmu pengetahuan disajikan dengan lebih spesifik yang terbagi dalam mata pelajaran fisika, kimia, dan biologi dengan tingkatan ilmu yang lebih kompleks berdasarkan konsep dasar yang telah diajarkan pada SMP/MTs. Sistem pembelajaran tersebut diterapakan untuk memudahkan para siswa dalam mempelajari IPA. Namun demikian, hal itu tidak meningkatkan minat siswa terhadap pelajaran IPA khususnya fisika. Data statistik pada website pendidikan (Tabel 1.1) menunjukan bahwa nilai UN IPA SMP/MTs 2014/2015 memiliki ratarata nasional terendah kedua setelah matematika yaitu 59.88, dan 67.43 pada nilai rata rata nasional UN fisika SMA/MA 2014/2015 (Tabel 1.2) yang masih !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
1!Endin!Kamiludin,!Upaya%Peningkatan%Keterampilan%Proses%dan%Pemahaman%Konsep%
IPA(Fisika)%Melalui%Pendekatan%Guided%Discovery%Iquiry%Laboratory%Lesson%Siswa%Kelas%VIII%
!
1!
2!
tergolong rendah. Beberapa faktor yang menyebabkan hal tersebut adalah, metode belajar yang telah dilakukan oleh siswa kurang dapat membantu mereka dalam memahami konsep fisika dan juga rendahnya minat siswa dalam mempelajari IPA khususnya fisika. Untuk meningkatkan minat siswa dalam mempelajari fisika ialah dengan cara menanamkan kepada siswa bahwa fisika itu mudah dan menyenangkan. Untuk memudahkan siswa memahami konsep fisika, diharuskan untuk mengerti prinsip dasar bagaimana konsep tersebut dapat terbentuk yaitu pada jenjang SMP. Oleh karena itu, pada tahapan ini sebaiknya pemahaman konsep fisika pada siswa harus lebih dioptimalkan. Tabel 1.1 Rata-rata ujian nasional SMP 2014/2015
(Sumber: websitependidikan.com)
!
3!
Tabel 1.2 Rata-rata ujian nasional SMA 2014/2015
(Sumber: websitependidikan.com) Berdasarkan tahap perkembangan Piaget, peserta didik SMP berada pada tahap perkembangan operasional formal (umur 11/12-18 tahun), ciri pokok anak pada tahap ini adalah dimana mereka sudah dapat berpikir abstrak dan logis. Pada tingkat inilah cabang ilmu IPA mulai terbagi menjadi fisika, kimia dan biologi. Pada tahap ini juga siswa mulai diperkenalkan dengan konsep dasar ilmu fisika yang akan menjadi bekal mereka pada tingkatan selanjutnya. Namun, metode pembelajaran yang telah dilakukan siswa pada tahap ini masih kurang mampu untuk membekali mereka dalam menghadapi tingkat selanjutnya, terkendala dengan waktu dan fasilitas yang masih kurang dalam mendukung proses pemahaman konsep fisika tersebut. Pemfasilitasan bagi siswa sebenarnya telah dilakukan berbagai sekolah, seperti ruang praktikum dan sebagainya. Tetapi tidak semua sekolah memiliki fasilitas yang sama, dan tidak semua konsep fisika dapat didemonstrasikan secara nyata melalui praktikum.
!
4!
Fasilitas pendukung pembelajaran fisika sebenarnya sudah banyak ditemui, baik melalui media internet, aplikasi, maupun media cetak. Namun, penyampaian konten dan materi kurang sesuai dengan apa yang mereka telah pelajari di sekolah karena target pasarnya terlalu luas dan kontennya juga hanya sebatas sebagai pendamping, bukan pemahaman lebih dalam. Aplikasi fisika yang sudah ada hanya berisikan konten daftar rumus-rumus dari tiap konsep fisika tetapi luas cakupannya dan lebih kompleks untuk siswa SMP. Website pembelajaran fisika pun sudah tersedia tetapi tidak semua siswa dapat mengakses website tersebut dikarenakan harus berlangganan, buku pendukung pembelajaran fisikapun banyak dijual dengan berbagai versi, tetapi masih dirasa kurang sebagai media pendukung pembelajaran fisika. Selain itu fisika bukanlah satu satunya pelajaran yang harus dipahami oleh siswa sehingga keterbatasan waktu juga menjadi kendala dalam hal ini. Seharusnya disediakan fasilitas yang sesuai dengan kebutuhan dan aktifitas siswa. Berdasarkan dengan tingginya aktifitas siswa dalam menggunakan telfon genggam, dapat dijadikan peluang untuk membuat suatu media yang dapat menjadi solusi mengenai fasilitas media pendukung pembelajaran fisika SMP. Aplikasi interaktif pada smart phone dapa dijadikan media pendukung pembelajaran fisika bagi siswa SMP untuk pemahaman konsep dasar pada fisika. Melalui media aplikasi interaktif, siswa akan lebih mudah untuk memahami konsep fisika yang ada dengan menggunakan animasi interaktif yang terdapat pada fitur aplikasi tersebut. Siswa juga dapat menggunakan aplikasi ini dengan waktu yang tak terbatas sesuai dengan keinginan mereka. Aplikasi interaktif konsep fisika ini akan dirancang menjadi lima belas aplikasi berdasarkan kurikulum pendidikan SMP yang akan terintergrasi berdasarkan kurikulum yang sedang berjalan. Dalam perancangan kali ini perancang memfokuskan pada konsep cahaya dan alat optik dimana, konsep tersebut merupakan konsep dalam fisika yang paling sulit dimengerti oleh siswa. perancangan media aplikasi ini diharapkan mampu membantu siswa dalam memahami konsep dasar fisika, dan dapat menjadi bekal mereka untuk mengahadapi jenjang selanjutnya.
!
5!
1.2. Identifikasi Masalah Dalam perancangan media pendukung pembelajaran fisika dengan konsep visual interaktif, ditemukan beberapa masalah yang mendasari penulis untuk mengangkat judul ini sebagai perancangan tugas akhir. Adapun permasalahan yang membutuhkan penyelesaian desain sebagai berikut : 1.
Siswa SMP mengalami kesulitan dalam memahami konsep fisika, karena pada tahapan ini siswa diajarkan ilmu fisika dengan tingkatan yang lebih tinggi dan lebih rumit.
2.
Metode pembelajaran yang sudah ada belum cukup membantu siswa dalam memahami konsep dasar fisika.
3.
Siswa tidak memiliki cukup banyak waktu untuk memahami mata pelajaran fisika, karena padatnya aktifitas dan mata pelajaran lain yang harus dipelajari.
4.
Fasilitas pendukung sekolah dalam memahami konsep fisika yang sudah ada masih kurang dapat membantu siswa dalam memahami konsep, dikarenakan fasilitasnya yang masih terbatas dan waktu pemakaian fasilitas belum mampu menyesuaikan kebutuhan siswa dalam memahami konsep.
5.
Media aplikasi pembelajaran fisika yang sudah ada belum mampu menyesuaikan dengan kebutuhan siswa.
1.3. Batasan Masalah Perancangan ini berkaitan erat dengan dengan pemahaman fisika konsep dasar bagi siswa SMP, adapun masalah yang akan diselesaikan dibatasi sebagai berikut : 1.
Perancangan ini akan menyelesaikan permasalahan yang berkaitan dengan media pendukung pembelajaran fisika SMP.
2.
Perancangan ini hanya akan membahas pembentukan konsep fisika dasar “cahaya dan alat optik”, dan informasi-informasi penting pada konsep yang dibahas.
!
6!
3.
Perancang membahas fitur yang berisi visual interaktif tentang pemahaman suatu konsep dasar fisika dan informasi mengenai konsep fisika yang dibahas.
4.
Fokus media yang digunakan berupa media digital berbentuk aplikasi.
5.
Perancangan ini terbatas bagi siswa SMP dan anak usia 12-15 tahun yang sedang menempuh pendidikan sekolah menengah pertama.
1.4. Rumusan Masalah Dalam uraian tersebut, maka rumusan masalah yang diangkat dalam perancangan kali ini adalah: “Bagaimana merancang sebuah aplikasi interaktif pemahaman konsep fisika dasar sebagai media pendukung pembelajaran bagi siswa SMP ?” 1.5. Ruang Lingkup 1.5.1. Ruang Lingkup Studi Ruang lingkup kerja yang akan dilakukan adalah sebagai berikut: a.
Analisis mengenai pemahaman konsep dasar fisika cahaya dan alat optik.
b. Gaya visual dan animasi interaktif, tentang bagaimana visual konsep dasar fisika cahaya dan alat optik yang jelas dan menarik, baik dalam pemilihan warna, bentuk, font, layout, ikon, dan komposisi pada layar gadget agar sesuai dengan konsep yang telah ditentukan. c. Penyusunan informasi dan fitur dalam aplikasi yang ditata secara struktural berdasarkan kemampuan siswa dalam memahami konsep dasar fisika cahaya dan alat optik dan penyampaian informasi yang berkaitan dengan konsep tersebut agar dapat dengan mudah dipahami oleh siswa SMP. d. Studi karakteristik dan pola kegiatan pengguna sehari-hari.
!
7!
1.5.2. Output Output dari perancangan ini akan berupa aplikasi pendukung pembelajaran fisika dengan fitur animasi interaktif yang dapat digunakan sebagai media pendukung dala memahami konsep dasar fisika SMP khususnya pada konsep cahaya dan alat optik. 1.6. Tujuan Perancangan a. Perancangan media aplikasi pendukung pembelajaran fisika diharapkan akan mampu membantu siswa dalam memahami konsep dasar fisika cahaya dan alat optik sebagai bekal mereka untuk mengahadapi jenjang berikutnya melalui media interaktif dan informatif. Kemudian diikuti dengan konsep konsep dasar fisika yang lain seperti gaya, tata surya, listrik, magnet dan lain lain. b. Penilitian media pembelajaran berkonsep interaktif visual diharapkan mampu membantu orang tua dan guru dalam proses pembelajaran anak dengan fitur yang terdapat pada aplikasi konsep dasar fisika cahaya dan alat optik. 1.7. Manfaat Perancangan 1. Manfaat bagi Dinas Pendidikan Hasil dari perancangan dapat digunakan sebagai panduan mengajar dan siswa SD khususnya dalam pembelajaran fisika konsep dasar cahaya dan alat optik agar lebih mudah memahami konsep tersebut. 2. Manfaat bagi siswa Melalui perancangan ini penulis ingin megembangkan media pendukung pembelajaran dengan media aplikasi interaktif untuk memudahkan siswa dalam melakukan pemahaman konsep dasar fisika. 3. Manfaat bagi pemerintah Generasi muda membantu pemerintah dalam usaha edukasi mengenai pemahaman konsep fisika sebagai dasar ilmu yang merupakan landasan teknologi, yang diharapkan akan mampu memunculkan generasi yang dapat memajukan teknologi Negara.
!
8!
4. Manfaat bagi Instansi Proses perancangan ini dapat digunakan atau dikembangkan sebagai bahan perbaikan baru untuk perancangan selanjutnya untuk menciptakan sebuah media yang menarik dan inovatif. 5. Manfaat bagi mahasiswa Perancangan ini digunakan sebagai media pembelajaran visual sebagai prasyarat dalam menempuh dan atau menyelesaikan studi semester akhir dan mendapatkan gelar sarjana. 1.8. Metode Perancangan Variabel Perancangan1.3 a. Profil masalah Melakukan pencarian data melalui fenomena-fenomena yang berkaitan dengan pemahaman siswa SMP terhadap konsep fisika dasar. b. Profil Sistem dan Materi Pembelajaran melakukan pencarian data mengenai sistem pembelajaran yang telah diterapkan
di
sekolah
dan
bagaimana
materi
pembelajaran
disampaikan oleh pengajar kepada peserta didik. c. Profil Siswa SMP Melakukan pencarian data Siswa SMP dalam memahami konsep fisika, bagaimana tanggapan mereka terhadap pemahaman konsep dasar fisika yang diberikan oleh pengajar dan kegiatan mereka seharihari Metode perancangan yang akan dilakukan: 1. Metode pengumpulan data Pengumpulan data dilakukan untuk memperoleh data primer sebagai berikut: a. Melakukan observasi terhadap keadaan peserta didik dan pengajar saat proses pengajaran, untuk mengetahui tanggapan siswa dan metode yang diberikan pengajar terhadap peserta
!
9!
didik dalam pemahaman konsep dasar fisika cahaya dan alat optik. b. Melakukan Depth Interview guru fisika SMP mengenai penyampaian materi fisika di sekolah. c. Melakukan metode kuisioner terhadap siswa SMP untuk mengetahui aktifitas, ketertarikan, dan opini mereka terhadap pemahaman konsep fisika yang mereka pelajari. Adapun data sekunder yang diperlukan untuk mendapatkan konten dari media ini. Teknik pengumpulan data dilakukan dengan cara sebagai berikut: a. Melakukan studi implementasi Kurikulum 2013 untuk siswa SMP
kelas
8
yang
meliputi:
Rencana
Pelaksanaan
Pembelajaran fisika “cahaya dan alat optik” dan silabus pembelajaran fisika dan alat optik. b. Melakukan studi literatur buku-buku fisika maupun mediamedia pendukung lainnya yang digunakan siswa dalam pemahaman konsep fisika yang dapat dikembangkan.
! ! ! ! ! ! ! !
!
10!
! ! !
Halaman ini sengaja dikosongkan
!
BAB 2 KAJIAN PUSTAKA
2.1. Studi Desain Terdahulu 2.1.1 Aplikasi Edukasi Aplikasi merupakan program software yang dirancang untuk melakukan fungsi yang spesifik secara langsung untuk pengguna2. Salah satu fungsi yang dapat dilakukan pada aplikasi ialah sebagai media pembelajaran. Pearson learning solution melakukan penelitian tentang penggunaan aplikasi sebagai media pembelajaran, dalam penelitian tersebut sitemukan bahwa 59% orang akademik berlangganan interactive e-learning, yang dijalankan oleh sosial media3. Melalui media pembelajaran aplikasi interaktif terutama pada pembelajaran fisika dapat membantu siswa dalam mengalami kesulitan dalam memepelajari pelajaran tersebut melalui visualisasi konsep materi fisika yang dibahas. Berikut ini merupakan aplikasi interaktif edukasi pembelajaran IPA. A. Komparator •
Tinybop
Gambar 2.1 Aplikasi Tiny Bop (Sumber: Appstore) !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 2!http://searchmobilecomputing.techtarget.com/definition/app6diakses6pada6196Desember6pukul6 11.476 6http://www.huffingtonpost.com/suren?ramasubbu/social?apps?in?education_b_9518486.html6 diakses6pada6196Desember6pukul611:56! 3
!
11!
12!
Tinybop merupakan aplikasi edukatif berbasis sains dasar, untuk anak usia 6-8 tahun. Aplikasi ini terdiri dari beberapa seri ilmu sains, yaitu organ tubuh, listrik, cuaca, robot, dan pengetahuan alam lainnya. Aplikasi ini bertemakan explore and play dimana pengguna ditujukan untuk mengetahui proses dasar hukum alam melalu animasi dan interaktif yang terdapat pada aplikasi tersebut. Melalui aplikasi ini, perancang akan mengadaptasikan fitur-fitur dan penempatan menu sidebar pada aplikasi ini.
Gambar 2.2 konten aplikasi organ tubuh tinybop (Sumber: app Tinybop) Gambar 2.2 merupakan salah satu konten yang terdapat pada aplikasi tinybop, gambar tersebut menunjukan ilustrasi gambar jantung, bagian-bagian pada jantung luar dan dalam, serta cara kerja jantung melalui interaksi. Fitur ini merupakan salah satu fitur yang akan diadaptasi dalam perancangan aplikasi ini, yaitu fitur dimana terdapat sebuah interaksi sederhana terhadap penjelasan bagianbagian suatu objek secara lebih mendalam (Gambar 2.2).
!
13!
Gambar 2.3 Left hidden menu tinybop (Sumber: Appstore) Dalam aplikasi tiny bop, sidebar diletakkan secara tersembunyi disebelah kiri agar informasi yang diberikan tidak terganggu oleh peletakkan tombol menu pada layar. Didalam sidebar tersebut terdapat beberapa tombol yang mengarah kepada scene yang berbeda. Contohnya pada gambar 2.3 pada aplikasi tersebut sedang menjelaskan sistem pencernaan, di dalam sidebar tersebut terdapat tombol yang langsung menuju pada organ tubuh manusia lainnya seperti sistem pernafasan dan lain-lain.
!
14!
a.
b.
c.
d.
e.
Gambar 2.4 Konten Aplikasi Space by Tinybop (Sumber: Appstore) Penjelasan konten dalam aplikasi ini dikemas dengan interaksi visual, dapat dilihat pada gambar 2.4. pada gambar a terdapat interaksi visual tentang orbit planet, gambar b interaksi visual tentang perbandingan antara satu planet dengan planet lainnya, pada gambar c terdapat interaksi visual tentang penjelasan suatu planet, pada gambar d merupakan interaksi yang menjelaskan tentang proses gunung meletus, dan pada gambar e terdapat interaksi yang dapat membuat pengguna mengeksplor bumi sampai ke lapisan tengahnya.
!
15!
•
Thix
Gambar 2.5 aplikasi Thix (Sumber: Appstore) Thix merupakan aplikasi edukatif berbasis ilmu kimia bagi siapapun yang ingin melakukan experience terhadap berbagai macam zat kimia secara virtual. Aplikasi ini menggunakan konsep virtual chemist lab dimana para pengguna bisa bereksplorasi terhadap zat kimia sebagaimana telah disediakan di laboratorium kimia. Pada aplikasi ini pengguna diajarkan tentang bagaimana reaksi zat kimia saat dicampurkan ataupun diberikan reaksi kimia yang lain. Informasi yang terdapat pada aplikasi ini juga sangat jelas dan spesifik, seperti misalnya hasil perpaduan dua zat kimia akan menghasilkan senyawa baru, dan pengguna dapat mengetahui rumus yang didapat dari interaksi tersebut. Melalui aplikasi ini perancang akan mengadaptasikan konsep penjelasan secara ilmiah dengan proses pembentukan bayangan pada suatu benda, aplikasi thix merupakan percobaan menggunakan senyawa yang masih dalam bentuk murni dalam artian masih asing dalam kehidupan sehari-hari, padahal senyawa tersebut berada disekitar kita. Konsep tersebut juga akan diadaptasikan pada aplikasi ini, dimana bukan hanya penjelasan dalam kehidupan sehari-hari, tetapi juga penjelasan ilmiah tentang bagaimana proses tersebut dapat terjadi.
!
16!
a.
b.
c.
Gambar 2.6 Fitur aplikasi Thix (Sumber: Appstore) Fitur yang terdapat pada aplikasi ini cukup sederhana dibandingkan dengan aplikasi tinybop. Seperti pada gambar 2.6 penggunaan aplikasi ini diawali dengan pemilihan alat-alat yang akan digunakan dalam percobaan kimia, setelah itu terdapat senyawa yang dapat diketahui detailnya seperti pada gambar b, lalu dengan peralatan yang telah dipilih pengguna dapat dilakukan percobaan seperti pada gambar 2.6.
!
17!
B. Kompetitor •
Exploriment Lights
Gambar 2.7 Exploriment app (Sumber: Appstore) Aplikasi ini merupakan aplikasi pengenalan prinsip dasar pembentukan bayangan pada alat optik. Alat ini memberikan fitur pengetahuan tentang sifat sifat cahaya yaitu memantul dan membias pada lensa konveks, cermin konkev, cermin konveks, lensa konkev, dan cermin datar. Tiap jenis alat optik pengguna dapat merubah panjang fokus, jarak objek, tinggi objek, dan pembentukan bayangan pada alat optik tersebut.
!
18!
! Gambar 2.8 fitur aplikasi exploriment (Sumber: Appstore) •
HSVPL Aplikasi HSVPL merupakan aplikasi berbasis edukasi dengan target segmen
siswa SMA yang menjelaskan tentang cahaya dan alat optik secara berseri, aplikasi ini dibagi menjadi dua seri yaitu pemantulan cahaya dan pembiasan cahaya.
Gambar 2.9 seri aplikasi HSVPL (Sumber: Appstore) Sama seperti exploriment light HSVPL juga menjelaskan tentang pembentukan bayangan dan sifat cahaya, hanya saja disajikan secara lebih mendalam dan
!
19!
disesuaikan dengan kebutuhan siswa SMA. Fitur yang disediakanpun lebih kepada tujuan edukasi.
Gambar 2.10 fitur aplikasi HSVPL (Sumber: Appstore) Penambahan rumus yang lebih detail dan grafik yang memperjelas terjadinya peristiwa tersebut disesuaikan dengan kurikulum siswa SMA.
!
20!
2.2. Studi Desain Aplikasi Interaktif Mobile 2.2.1 Graphic User Interface dan User Experience Menurut Galitz (4) “User Interface merupakan bagian dari komputer atau software dimana pengguna dapat melihat, mendengar, berbicara, atau mengerti secara langsung”. UI memiliki 2 komponen yaitu masukan dan luaran. Masukan merupakan pergerakan yang dilakukan langsung oleh pengguna, masukan tersebut dapat berupa mouse dan keyboard dalam sebuah komputer, jari pada smartphone ataupun perintah suara. Luaran merupakan hasil yang dikeluarkan yang telah diperintahkan oleh pengguna. Sedangkan User Experience merupakan sebuah pengalaman ataupun pesan yang didapat dari User Interface kepada pengguna melalui interaksi. Menurut Jeeyun oh, asisten profesor komunikasi di Robert Morris University “interaktifitas membujuk pengguna dengan membuat pengguna berfikir lebih dalam tentang pesan yang diberikan” (Interaction Design and Animation 8). Dalam mendesain UI dan UX yang baik dalam perancangan kali ini akan menggunakan langkah-langkah yang dikemukakan oleh Galitz yaitu : 1. Mengenali pengguna Dalam mendesain UI, karakteristik pengguna terhadap penggunaan device sangatlah penting. Bagaimana pengguna berinteraksi dengan device, sifat pengguna dalam desain, pengalaman pengguna terhadap sistem desain, dan kecepatan pengguna dalam berinteraksi. 2. Mengenali dan memahami konten Memahami konten sangatlah penting agar perancang dapat menyusun sistem yang baik dalam sebuah aplikasi dalam memberikan informasi, atau memberikan solusi. 3. Memahami dasar dari interface yang baik Interface yang baik merupakan Interface yang dapat memancing pengguna dengan menyediakan apa yang pengguna inginkan dan lakukan. Mengorganisasi konten dengan baik, komposisi visual yang efektif, ukuran halaman yang pas, presentasi yang sederhana tetapi
!
21!
berarti, navigasi dan flow yang terstruktur, dan konsistensi pada setiap scene yang ada. 4. Mengembangkan sistem menu dan skema navigasi Konsistensi pada setiap halaman sangatlah dibutuhkan sehingga sistem menu dan navigasi akan lebih mudah untuk dipelajari. 5. Penempatan jenis jendela pada sebuah Interface Komponen dari jendela tersebut merupakan, title bar; tool bar; menu bar; status bar; scrol bar; split box; command area; work area; dll. 6. Memilih interaksi yang sesuai Berikut lima pilar dalam membuat interaksi yang masih berdiri (Uxpin Interaction Design and Complex Animation 9), desain yang menuju kepada tujuan, usability yang sesuai dengan kebutuhan pengguna, penanda harus jelas dalam artian bentuk harus melambangkan fungsi, Interface harus mudah dipelajari, dan feedback terhadap pengguna sebaiknya menggunakan pendekatan sebagaimana pembicaraan antar manusia bukan manusia kepada mesin. 7. Memilih kontrol yang sesuai Seperti tombol, kotak informasi, dan lain lain. 8. Menulis pesan dan kata dengan jelas Kalimat atau informasi yang tertera harus mudah dibaca 9. Menyediakan feedback yang efektif Penggunaan suara, penarik perhatian, dan fasilitas informasi untuk memudahkan pengguna dalam mempelajari interface. 10. Menyediakan akses dengan standard internasional Penggunakan ikon dan simbol internasional yang sesuai dengan budaya pengguna sehingga memudahkan pengguna dalam menggunakan aplikasi ini. 11. Membuat grafis dan ikon yang berarti Menampilkan grafis dan ikon yang sesuai dengan konten yang dapat membuat pengguna dapat dengan mudah mengerti dengan informasi yang disampaikan.
!
22!
12. Menggunakan warna yang sesuai 13. Mengorganisasi dan me-layout scene 14. Testing (viii) A. User Experience User experience merupakan perasaan yang didapat oleh pengguna dalam meng-eksplor sebuah jaringan. Tujuan dari
user experiece itu sendiri ialah
perolehan yang didapat pengguna (User Acquisition), keaktifan pengguna dalam mengakses sebuah jaringan (User Activation), dan presentasi penggunaan suatu jaringan (User Retention). Untuk mencapai tujuan tersebut UX memiliki beberapa cara yaitu dengan struktur : •
The Surface - UI User Interface merupakan visual proses yang membimbing pengguna melalui interface sebuah produk dengan elemen interaktif. Berikut merupakan beberapa ide terhadap UI yang baik4: o Menyatukan informasi dengan fungsi yang sama, daripada membuat cabang informasi dengan fungsi yang sama.
Gambar 2.11 Ide UI 1 (Sumber: Jayan Narayanan, 2014) o Berilah perbedaan pada elemen tombol, jangan sampai tombol tidak terdeteksi karena serupa dengan elemen visual yang terdapat pada layar.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 4!http://www.slideshare.net/jn4deeps/ux-design-ui-design-injecting-a-brand-persona/33-
merging_similar_functions_instead_offragmenting, diakses pada 19 Desember pukul 10.20.!
!
23!
Gambar 2.12 Ide UI 2 (Sumber: Jayan Narayanan, 2014) o Kuragi kolom isian daripada menambahkan banyak kolom.
Gambar 2.13 Ide UI 3 (Sumber: Jayan Narayanan, 2014) o Tetap fokus pada konten, kurangilah link yang mengarah pada informasi diluar konten.
Gambar 2.14 Ide UI 4 (Sumber: Jayan Narayanan, 2014) o Tombol yang mengarah pada perolehan yang akan didapat oleh pengguna, ketimbang perintah biasa.
Gambar 2.15 Ide UI 5 (Sumber: Jayan Narayanan, 2014)
!
24!
o Sign up dengan cara pengenalan terhadap website atau aplikasi, dibandingkan sign up dengan cara yang terburu-buru.
Gambar 2.16 Ide UI 6 (Sumber: Jayan Narayanan, 2014) o Konsistensi ketimbang membuat pengguna mempelajari cara kerja aplikasi lagi.
Gambar 2.17 Ide UI 7 (Sumber: Jayan Narayanan, 2014) Gaya visual Dalam perancangan aplikasi ini perancang akan menggunakan gaya visual yang sederhana yaitu flat design 2.0. Flat design merupakan gaya web design yang mulai popular pada tahun 2012 dan masih banyak digunakan hingga saat ini. Gaya ini banyak digunakan karena visual yang sederhana dapat menyeimbangakan informasi yang diberikan dalam media informatif (gamdar 2.15). Flat design 2.0 merupakan pengembangan dari gaya flat desain sebelumnya. Gaya flat desain sebelumnya memiliki beberapa kekurangan , karena pada prinsipnya flat desain menentang efek tiga dimensi, skeumorphic, dan gaya desain realis (kate Meyer, par 2). Sehingga ada kesulitan dalam mengenali tanda dari elemen yang merupakan tombol. Sedangkan gaya flat 2.0 hampir keseluruhan menggunakan prinsip flat design hanya saja menggunakan bayangan, highlights, dan layer untuk menunjukan
!
25!
kedalaman pada UI, sehingga dapat memudahkan pengguna dalam mengetahui elemen yang merupakan tombol.
Gambar 2.18 Perbandingan flat design dan Flat Design 2.0 (Sumber: Articles.dappergentlemen.com)
Gambar 2.19 Gaya visual pada aplikasi pembelajaran (Sumber: Tinybop)
Gambar 2.20 Flat Design 2.0 pada sebuah app (Sumber: Pinterest)
!
26!
Swiss International design merupakan gaya desain yang akan digunakan dalam perancangan aplikasi ini, karena gaya desain ini dikenal dengan kesederhanaan asli menunjukan keindahan tujuan dari konten itu sendiri bukan dari elemen-elemen visual yang terdapat pada konten itu. Gaya desaini ini meminimalisasikan penggunaan elemen visual, seperti pada tipografi dan layout konten dengan mengesampingkan elemen visual lainnya seperti tekstur atau ilustrasi. Gaya desain ini sangat cocok digunakan dalam perancangan aplikasi edukasi karena informasi yang diberikan harus menjadi pusat perhatian utama dari pengguna itu sendiri, dibandingkan tambahan elemen visual lainnya.
Gambar 2.21 Swiss International Design pada app (Sumber: Tommy, 2016)
!
27!
Teori Warna Warna merupakan salah satu elemen penting dalam mendesain sebuah aplikasi. Warna sangat berpengaruh dalam mood seseorang dimana warna yang tepat dapat memberikan atmosfir yang tepat terhadap jaringan ataupun aplikasi, oleh karena itu dalam aplikasi edukasi ini menggunakan dominan warna merah, hijau kekuning-kuningan, dan biru.
red
tints red
Gambar 2.22 Warna merah pada website (Sumber: designyourtrust.com)
Warna merah pada sebuah jaringan dapat memberikan kesan passion dan power. Warna merah merupakan warna yang dapat menarik perhatian, dimana sering digunakan sebagai sebuah peringatan. Dalam aplikasi edukasi ini warna merah digunakan untuk memberikan mood passion ataupun semangat dengan tints agar warna merah menjadi sedikit lebih lembut dan tidak terlalu tegang dalam menggunakan aplikasi edukasi ini.
limetints
lime
Gambar 2.23 Warna lime pada website (Sumber: designbump.com)
!
28!
Warna lime merupakan turunan warna dari secondary color, 5
oranye . Warna lime memberikan kesan lebih friendly dan inviting. Untuk warna lime
lebih memberikan kesan netral, warna ini sendiri dapat
memberikan kesan visual yang menarik dan dapat menarik perhatian dari pengguna.
Gambar 2.24 Warna biru pada website (Sumber: vanvlietandtrap.com) Warna biru memberikan banyak arti tergantung dari jenis biru yang digunakan, untuk keseluruhan biru memberikan kesan calm, keamanan, keterbukann(biru cerah), dan keandalan(biru gelap). Pada aplikasi edukasi ini, perancang menggunakan biru dengan warna yang lebih gelap agar memberikan kesan keandalan, dapat dipercaya, dan teoritis sebagai penjelasan ilmiah pada suatu konsep pembentukan bayangan. Berdasarkan teori warna pada web desain terdapat tiga teori warna 6
yaitu : o Contrast Setiap warna memiliki lawan yang lebih kontras dari warna lainnya. Gambar 2.18 merupakan color wheel yang dapat digunakan untuk menemukan lawan dari seuatu warna.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 5!https://www.smashingmagazine.com/2010/01/color?theory?for?designers?part?1?the?meaning? of?color/,6diakses6pada6tanggal6176Januari620166pukul601.23. 6 6Jerry6Cao,6Kamil6Zieba,6Krysztof6Stryjewski,6dan6Matt6Elis,6Web6UI6Design6For6Human6Eye,6hal.6556
!
29!
Gambar 2.25 Contrast Color wheel (Sumber: Web UI design for the human eye) o Complementation Komplementasi pada warna berbanding terbalik dengan kontras, apabila warna kontras merupakan warna yang bersebrangan, komplementasi warna merupakan warna yang memiliki jarak dekat, seperti warna ungu, biru, dan pink. o Vibrancy Setiap warna dapat menciptakan mood pengguna pada suatu jaringan. Sebagai contoh semakin terang warna (merah, kuning, oranye) semakin membuat pengguna semakin bertenaga, dan membuat mereka lebih waspada, sedangkan warna yang lebih gelap (hijau, biru, dan ungu) lebih dapat membuat tenang. Typeface Keterbacaan suatu kata ataupun kalimat sangatlah penting pada perancangan aplikasi, terlebih untuk perancangan aplikasi yang bersifat informatif seperti aplikasi ini. Salah satu faktor yang mempengaruhi keterbacaan tersebut ialah jenis typeface, ukuran typeface, dan penggunaan kata yang digunakan. Untuk jenis typeface lebih baik jika menggunakan font yang sederhana, tegas, dan mudah dibaca seperti sanserif. Dalam justifikasi lebih baik menggunakan justifikasi sebelah kiri agar meningkatkan kemampuan membaca pengguna (Galitz, 579). Ukuran font minimal 12pt agar mudah terbaca. Penggunaan kata lebih baik menggunakan kata dalam standard aplikasi seperti tabel 2.1.
!
30!
Gambar 2.26 font sans serif dan serif (Sumber: Google)
Gambar 2.27 Kindle’s font justification (Sumber: Anoved.net) Tabel 2.1 Penggunaan kata pada aplikasi
(sumber: Galitz, 2007)
!
31!
Gambar 2.28 Typefaces pada aplikasi (Sumber: App.typography | Hofler&co) •
The Skeleton – Wireframing, Interaction, and Navigation Wireframing
merupakan
blueprint
dari
desain,
Mereka
menghubungkan struktur konseptual yang mendasari (atau arsitektur informasi) ke permukaan (atau desain visual) dari situs web atau aplikasi mobile. Lebih khusus , mereka representasi visual dari sebuah interface. Perancang menggunakan Wireframing untuk membantu pengembagan dalam proses User Interface, karena dapat menginspirasi perancang dalam mengembangkan proses kreatif. Wireframing dapat digunakan dalam membuat mock up grafis, prototipe interaktif, dan final design. Dengan wireframing perancang dapat menunjukan alur navigasi, dan alur dalam pemnggunaan aplikasi tersebut.
Gambar 2.29Userflow (Sumber: Uxpin.com)
!
32!
Interaksi desain (IxD mengartikan struktur dan perilaku dari sistem interaksi. Desain interaksi dirancang untuk membuat sesuatu dari visual yang statis pada layar. Segala macam yang berasal dari tombol menuju sesuatu yang terdapat atau terjadi pada suatu jaringan merupakan bagian dari interaksi. Interaksi dikembangkan untuk memfasilitasi hubungan seseorang terhadap lingkungannya. Berbeda dengan UX desain interaksi lebih fokus kepada interaksi antara pengguna dan layar. Berikut merupakan persamaan yang terdapat dari beberapa metodologi tentang IxD7 : o Goal Driven Design yang terdiri dari 5 hal yaitu, merancang tebih didahulukan ketimbang pemograman; pisahkan responsiblity pada desai dan pada pemograman; bertahan kepada kualitas produk dan kepuasan pengguna; tentukan seorang pengguna secara spesifik untuk merancang desain; bekerja dalam tim. o Usability, kemudahan pengguna dalam menggunakan sebuah aplikasi dimana dibagi menjadi 3 prinsip dasar menurut Alan Dix Dkk dalam Human
Interaction
Design,
yaitu
:
Learnability;
Flexibility,
Robustness. o The five Dimension, yang merupakan konsep interaksi pada sebuah app yang dikemukakan oleh Kevin Silver, yaitu : 1D-Word (mudah untuk dimengerti karena menggunakan kata); 2D-Visual Representation (instraksi yang menggunakan grafis atau gambar); 3D-Physical Object (interaksi yang menggunakan benda nyata seperti mouse atau keyboard); 4D time (berapa lama pengguna menghabiskan waktu terhadap interaksi-interaksi pertama); 5D-Emotion (perasaan yang didapat pengguna dalam menggunakan interaksi). o Cognitive Psychology, merupakan studi tentang bagaimana pikiran kita bekerja, dan proses mental apa yang terjadi pada pikiran. Proses ini !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 7!http://www.uxbooth.com/articles/complete?beginners?guide?to?interaction?design/,6Diakses6 pada6tanggal6206Desember6Pukul601.17!
!
33!
termasuk
“perhatian,
penggunaan
bahasa,
memori,
persepsi,
pemecahan masalah, kreatifitas, dan pemikiran. o Human Interface guidelines, dalam kasus ini human interface guidelines merupakan metode yang dibuat oleh manusia itu sendiri, tujuannya adalah untuk membantu desainer dan programer dalam merancang interface yang universal. Jenis interaksi dalam sebuah aplikasi juga beraneka ragam, tetapi dalam perancangan kali ini , perancang akan menggunakan interaksi 1D dan 2D dengan teknik Direct Manipulation. Direct Manipulation merupakan interaksi langsung pengguna terhadap objek yang ada pada layar.
Gambar 2.30 Contoh Direct Manipulation (Sumber: ux.stackexchange.com)
Gambar 2.31 Interaksi Direct Manipulation pada ipad (Sumber: source.davidbanthony.com)
!
34!
Navigasi merupakan salah satu bagian dalam rangka desain. Dalam merancang sebuah navigasi dalam desain mobile, perancang harus konsisten, berikut merupakan beberapa jenis navigasi 8: o Sliders Slider merupakan jenis navigasi yang paling popular karena dengan kontrol gesturnya terasa natural dan menyenangkan.
Gambar 2.32 Slider pada Uber app (Sumber: Jerry!cao,!2015) Navigasi slider pada gambar 2.27 terdapat pada perubahan jenis mobil yang akan dipesan, bagian bawah aplikasi. o Pictorial Icons Pictorial icon bukanlah suatu jenis navigasi baru, tetapi pictorial icon merupakan navigasi yang paling mudah dimengerti, karena gambar pada ikon menunjukan kemana dia akan membawa pengguna.
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8!https://www.uxpin.com/studio/blog/5?creative?mobile?ui?patterns?navigation/,6Diakses6pada6
206Desember6Pukul602.18!
!
35!
Gambar 2.33 Pictorial Icon pada aplikasi (Sumber: Jerry!cao,!2015) o Card Grid Pattern
terhadap
kartu
ini
bangkit
dikarenakan
kesederhanaannya dan adaptifitasnya terhadap responsive design. Touch screen format pada aplikasi mengubah format dasar menjadi tombol grid, dimana pengguna hanya harus menekan kartu yang relevan untuk pergi ke halamannya. Kartu
bisa
terbentuk
dengan
gambar,teks,
deskripsi.
Gambar 2.34 Card Grid pada aplikasi (Sumber: Jerry!cao,!2015)
!
ataupun
36!
o Spinner Wheel Sama seperti slider, navigasi ini dapat memberikan kesenangan dan perasaan alami saat menggunakannya, hanya saja dengan cara yang lebih unik dan menarik.
Gambar 2.35 Spinner Wheel pada aplikasi (Sumber: Jerry!cao,!2015) o Full Screen Navigation Janis navigasi ini mudah untuk digunakan, dan baik untuk kesedrhanaan dan koherensasian pada aplikasi.
Gambar 2.36 Full Screen Navigation pada aplikasi (Sumber: Jerry!cao,!2015)
!
37!
•
The Scope – Functionality, usefulnes, Requirements Dalam mendesain sebuah UX dalam suatu app, kita harus mengetahui sungsi, kegunaan, dan kebutuhan pengguna terhadap aplikasi yang sedang dirancang.
•
The Strategy – Business requirements, Defining user needs, Goals and Aspiration Strategi dalam merancang desain UX kita harus memahami, kebutuhan pengguna, tujuan pengguna, dan aspirasi.
2.3. Sistem Pembelajaran Fisika Sebagai transisi menuju ke pendidikan menengah, pemisahan masih belum dilakukan
sepenuhnya bagi siswa SMP/MTs. Hal ini dimaksudkan untuk
memberikan wawasan utuh bagi siswa SMP/MTs tentang prinsip-prinsip dasar tentang alam semesta dan isinya. Pelajaran fisika pada SMP merupakan dasar dari pelajaran pada fisika di SMA, dengan materi yang sama dengan pembahasan yang berbeda. Pada bangku SMP, fisika mempelajari tentang gerak, dan fenomena lain yang ada hubungannya dengan energi, yaitu dasar dari pembahasan yang akan dibahas lebih dalam lagi di bangku SMA. Secara garis besar pembelajaran fisika seperti yang dikatakan Abu Hamid (Suryono, 2012), adalah sebagai berikut : 1. Proses belajar fisika untuk menentukan konsep, prinsip, dan teori, dan hukum-hukum alam, serta untuk menimbulkan reaksi, atau jawaban yang dapat dipahami dan diterima secara objektif, jujur dan rasional. 2. Pada hakikatnya mengajar fisika merupakan suatu usaha untuk memilih strategi mendidik dan mengajar yang sesuai dengan materi yang akan disampaikan, dan upaya untuk menyediakan kondisi-kondisi dan situasi belajar murid yang kondusif, agar murid secara fisik dan psikologis dapat melakukan proses eksplorasi untuk menemukan konsep, prinsip, teori, dan hukumhukum alam, serta menerapkannya dalam kehidupan sehari-hari.
!
38!
3. Pada hakikatnya hasil belajar fisika merupakan kesadaran murid untuk memperoleh konsep dan jaringan konsep fisika melalui eksplorasi dan eksperimentasi, serta kesadaran murid unutk mengimplementasikannya untuk memecahkan masalah dalam kehidupan sehari-hari. Guru Fisika SMPN 1 Surabaya, Purwanita menjelaskan salah satu materi pembelajaran fisika Cahaya dan Alat optik. Materi tersebut pada jenjang SMP mempelajari tentang sifat-sifat cahaya dan bagaimana pembentukan bayangan terjadi terhadap alat-alat optik, dimana materi tersebut merupakan salah satu materi yang sulit untuk dijelaskan, dan paling sulit dipahami oleh siswa (Wawancara Pribadi, 2 Mei 2016). Oleh karena itu pada perancangan kali ini, perancang akan mengambil tema Cahaya dan Alat optik. 2.3.1 Media Pembelajaran Visual Media visual merupakan media yang dipakai menyangkut indera penglihatan. Pesan yang akan disampaikan dituangkan kedalam simbol-simbol visual. Media berbasis visual dapat berupa chart, grafik, peta, gambar, buku, slide, animasi, video, film, dan lain lain. Levie & Lentz (1982), dikutip oleh Arsyad (2009: 16-17), mengemukakan empat fungsi pembelajaran visual, yaitu : a. fungsi atensi, untuk menarik perhatian siswa melalaui visualisasi materi yang dipelajari dikemas secara menarik. b. fungsi afektif, dapat terlihat melalui kenikmatan siswa dalam melihat dan mempelajari teks bergambar. c. Fungsi kognitif terlihat dari penelitian yang menunjukan bahwa lambang visual dapat memperlancar tujuan dalam memahami dan mengingat informasi satau pesan yang terkandung dalam gambar. d. Fungsi kompensatoris, dimana dapat membantu siswa yang lemah dalam memahami materi yang bersifat verbal.
!
39!
Fisika merupakan ilmu yang mempelajari kejadian disekitar kita, dimana visualisasi dalam pemberian ilmu fisika, sangatlah berpengaruh dengan pola pikir siswa sehingga lebih mudah dalam mengerti materi tersebut. 2.4. Karakteristik Target Segmentasi Target pengguna dalam perancangan kali ini merupakan siswa SMP negeri dengan sample pengguna yang berdomisili di Surabaya, dimana pelajaran fisika mulai diperkenalkan lebih spesifik dengan tingkatan yang lebih sulit dari sebelumnya. Menurut Piagiet, peserta didik SMP berada pada tahap periode perkembangan operasional formal (umur 11-12/18 tahun) dimana pada tahapan ini anak sudah mampu berpikir abstrak dan logis (dikutip dalam Zubaidah et al. 102). Berdasarkan kuisioner yang diambil melalui sampel 98 anak SMP negeri di Surabaya, hampir 50% dari mereka menyukai fisika dan menyatakan bahwa fisika itu sulit (grafik 2.1). kebanyakan dari mereka juga memiliki aktifitas yang padat, dan juga fisika bukan satu-satunya pelajaran yang sulit dipelajari, sehingga sulit bagi mereka untuk membagi waktu kapan untuk belajar, bersenang-senang, dan bersosialisasi. Saat belajar fisika, biasanya mereka kurang fokus karena perhatian mereka teralihkan oleh hal lain. Seperti bermain gadget, menonton tv, mendengarkan musik, makan dan minum, dan lain lain. Berdasarkan kuisioner terhadap sample tersebut kebanyakan dari mereka mempelajari fisika sembari bermain gadget (grafik 2.2) ketika mereka mulai merasa lelah belajar fisika. Terkadang tidak semua anak mendapat bantuan ketika mempelajari fisika, sehingga mereka mencari cara tersendiri untuk menyelesaikan masalah tersebut seperti belajar melalui website, dll.
!
40!
70! 60! 50! 40! 30! 20! 10! 0!
Series1!
?isika! sulit?!
ya!
tidak!
Bagan 2.1 (Sumber: Rayandini, 2016) hal!yang!dilakukan! sembari!belajar!?isika! tidak!ada! menonton!tv! bermain!gadget! tergantung! mendengarkan!musik!
Bagan 2.2 Kegiatan sembari belajar fisika (Sumber: Rayandini, 2016) ! ! ! ! ! ! ! ! ! ! ! ! ! !
!
BAB 3 METODOLOGI RISET DAN DESAIN
3.1. Proses Desain
Bagan 3.1 Diagram penelitian 3.1.1 Riset a. Studi Literatur Studi literatur dilakukan untuk memahami pelajaran fisika cahaya dan alat optik itu sendiri, agar terciptanya rasa empati terhadap pengguna. Lalu studi literature juga dilakukan untuk memahami UI/UX dalam sebuah desain aplikasi, agar informasi yang ingin disampaikan dalam aplikasi tersebut dapat tersampaikan dengan baik. b. Observasi Observasi dilakukan oleh perancang pada suasana kelas saat belajar fisika dikelas, untuk mengetahui metode pembelajaran yang diberikan oleh guru kepada siswa. b. Focus Group Discussion FGD dilakukan kepada enam siswa dengan kemampuan yang berbedabeda dalam memahami mata pelajaran fisika, dan didampingi oleh guru fisika untuk mengenali dan memahami konten dan fitur yang akan dikembangkan dalam perancangan aplikasi ini.
!
41!
42!
a. Depth Interview I Depth Interview pertama dilakukan dengan menggunakan guru fisika sebagai
narasumber, untuk membahas tentang naskah konten yang
terdapat pada aplikasi dan metode pembelajaran agar sesuai dengan pengguna dan batasan rancangan yang telah ditentukan yaitu, sesuai dengan kurikulum. c. Depth Interview II Depth Interview yang kedua dilakukan kepada programmer atau ahli UI/UX untuk mendesain sebuah aplikasi yang sesuai dan ergonomis bagi pengguna. 3.1.2 Proses Desain a. Graphic User Interface Proses desain GUI dilakukan untuk merancang layout, interaksi, dan komponen-komponen pada sebuah aplikasi agar dikemas menjadi sistem yang informatif dan jelas. b. Wireframing Wireframing dalam perancangan aplikasi sangat dibutuhkan, untuk menyusun konten, alur dan bagaimana fitur yang ada dalam aplikasi tersebut dijalankan . c. Visual Dalam merancang sebuah aplikasi terdapat elemen visual yang sangat penting diantaranya adalah bentuk, warna, tombol, tipografi, dan pergerakan. d. Audio Dalam perancangan aplikasi yang bersifat informatif, Audio berperan penting dalam penyediaan info dalam aplikasi tersebut. Audio yang terdapat pada aplikasi tersebut merupakan musik dan efek suara, dimana dapat memberikan kesan lebih terhadap pengguna dalam menerima informasi.
!
43!
3.2 Protokol Riset 3.2.1 Studi Literatur (Sekunder) •
Tujuan Untuk mengumpulkan data konten aplikasi, dan menyusun naskah konten. Untuk memahami perancangan UI/UX pada aplikasi
•
Data yang Diambil Materi pelajaran fisika kelas 8, yaitu cahaya dan alat optik. Bagaimana cara merancang UI/UX yang efektif
•
Objek Buku pembelajaran IPA Terpadu kelas VIII Tahun 2009, Buku guru IPA tahun 2013, Buku Siswa kelas VIII tahun 2013, Buku Saku IPA terpadu I Pocket untuk kelas 7-8-9, dan buku panduan untuk merancang UI/UX.
3.2.2 Studi Eksperimental Studi eksperimental perancangan aplikasi ini dilakukan dengan mengamati bagaimana cara metode pembelajaran yang dapat digunakan dengan aplikasi ini agar sesuai dengan kebutuhan user, contohnya dalam aplikasi fisika ini mengambil bab cahaya dan alat optik. Disini perancang mengamati bagaimana mempelajari cahaya sesuai dengan kurikulum tetapi dengan metode pembelajaran yang lebih sederhana dan mudah dimengerti. Contohnya mengamati bagaimana pembentukan bayangan pada setiap medium disekitar kita, sumbernya terdapat pada aplikasi yang berhubungan dengan pembelajaran cahaya dalam ilmu fisika, video pembelajaran fisika, buku, dll. •
Tujuan Merancang konsep aplikasi berdasarkan data yang didapatkan dari studi yang telah dilakukan.
•
Output Naskah konten, sketsa animasi ,dan fitur aplikasi.
!
44!
3.2.3 Focus Group Discussion
Narasumber
Tabel 3.1 Protokol Riset FGD 1. Purwanita (Guru Fisika SMPN 1 Surabaya) 2. Rizky (Siswa SMPN 1 Surabaya) 3. Zara (Siswi SMPN 1 Surabaya) 4. Dimas (Siswa SMPN 1 Surabaya) 5. Alyssa (Siswi SMPN 1 Surabaya) 6. Cheryl (Siswi SMPN 1 Surabaya) 7. Celina (Siswi SMPN 1 Surabaya)
Alat FGD
HP sebagai alat perekam
Tujuan
Mengetahui kesulitan siswa dengan kemampuan berbeda secara spesifik terhadap materi fisika cahaya dan alat optik, untuk menyusun UI/UX pada aplikasi, agar dapat memberikan informasi yang sesuai dengan kebutuhan pengguna.
Topik
Materi fisika cahaya dan alat optik
!
45!
3.2.4 Depth Interview a. Guru Tabel 3.2 Protokol Riset DI Guru Narasumber
Purwanita (Guru Fisika SMPN 1 Surabaya)
Alat Interview
HP sebagai alat perekam dan kamera
Tujuan
Mengetahui
kelayakan
naskah
konten
yang
digunakan dalam aplikasi C A H AYA
Daftar Konten
P E R A M B ATA N CERMIN
PEMANTULAN
DATAR CEKUNG CEMBUNG
LENSA
PEMBIASAN
CEMBUNG CEKUNG
MEDIUM YANG MEMILIKI INDEKS BIAS (ZAT CAIR) AIR, MINYAK, DSB
!
akan
46!
A L AT O P T I K
CACAT
M ATA
MIOPI HIPERMETROPI PRESBIOPI
LUP KAMERA MIKROSKOP PERISKOP TEROPONG
b. Programmer Tabel 3.3 Protokol Riset DI Programmer Narasumber
Rizky Rinaldi
Alat Interview
HP sebagai alat perekam dan kamera
Tujuan
Untuk mengetahui keefektifan jalannya suatu aplikasi. •
Daftar Konten
Jalannya aplikasi dari home hingga kepada bab dan sub bab konten cahaya dan alat optik
•
Layout desain yang efektif
•
Motion pada setiap transisi perpindahan scene
•
Meminimalisasikan penggunaan data yang berlebihan tetapi tetap jelas dan berbobot sesuai dengan kapasitas gadget.
• ! !
Merancang UI yang efektif
!
!
47!
BAB 4 PEMBAHASAN ANALISIS HASIL RISET 4.1. Hasil Riset 4.1.1 Studi Literatur a. Fisika Cahaya dan Alat Optik Studi literatur dilakukan untuk memperoleh naskah konten tentang cahaya dan alat optik sebagai media pembelajaran yang pas untuk anak SMP kelas 8 dan 9. Pengambilan data dilakukan dari buku sekolah kurikulum 2009 dan 2013, buku saku IPA iPocket, video penjelasan tentang cahaya dan alat optik, aplikasi tentang cahaya, dan standar kurikulum tahun 2013 yang kurang lebih sama dengan kurikulum 2009.
Bagan 4.1 peta kosep cahaya berdasarkan kurikulum buku SMP tahun 2009 (Sumber: IPA Terpadu Kurikulum 2009)
!
48!
Bagan 4.2 peta kosep alat optik berdasarkan kurikulum buku SMP tahun 2009 (Sumber: IPA Terpadu kurikulum 2009)
Perancang menggunakan peta konsep tersebut sebagai acuan dalam menyusun konten dari aplikasi ini. Dari peta konsep tersebut dapat diambil kesimpulan bahwa cahaya dan alat optik memiliki cara kerja dan pemahaman konsep yang hampir sama. sebelum mempelajari dan memahami alat optik tentunya akan lebih mudah untuk terlebih dahulu mengerti cara kerja cahaya terutamadalam pembentukan bayangan. Selain itu perancang menggunakan buku saku yang digunakan para siswa untuk lebih mudah mempelajari fisika. Karena buku saku dipilih oleh siswa karena penjelasannya yang singkat dan mudah dimengerti oleh siswa.
gambar 4.1 buku saku IPA
!
49!
•
Hasil Studi Dari studi literatur yang telah dilakukan maka dapat ditemukan konten untuk aplikasi ini, sebagai berikut : - Cahaya a) Sifat sifat cahaya b) Pembentukan bayangan pada masing masing sifat cahaya pada berbagai medium yang berbeda, yaitu, cermin (datar, cembung, cekung) ; lensa(cekung cembung) ; medium berindeks bias. c) Rumus rumus yang terbentuk dari peristiwa tersebut d) Contoh soal dan penjelasan -
Alat optik a) Penjelasan berbagai macam alat optik (mata, lup, teropong, mikroskop, periskop, dan teleskop) b) Pembentukan bayangan dan kelainan pada masing masing alat optic c) Rumus-rumus yang terbentuk dari peristiwa tersebut d) Contoh soal dan penjelasan
b. UI/UX Studi literatur ini dilakukan untuk mengetahui panduan dalam mebuat UI/UX dalam sebuah aplikasi, pengambilan data dilakukan dari buku panduan untuk merancang UI/UX karya Wilbertz O. Galitz, dan buku dari UXpin berdasarkan pengalaman designer UI/UX dalam merancang sebuah aplikasi. •
Hasil Studi Dari Studi Yang dilakukan maka dapat dikemukakan UI/UX dalam aplikasi ini : a) Penempatan informasi yang dominan b) Interaksi yang berbasis pada direct manipulation c) Penempatan toolbar yang tersembunyi tetapi masih disadari keberadaannya oleh pengguna d) Memberikan teks yang sesuai dan cukup dapat melengkapi informasi yang terjadi pada sebuah interaksi dalam aplikasi
!
50!
e) Penambahan suara sebagai fitur tambahan bagi pengguna f) Pemberian warna yang sesuai dengan citra dari aplikasi tersebut dan emosi pengguna. 4.1.2 Studi Eksperimental Proses studi eksperimental yang dilakukan perancang adalah untuk mengetahui bagaimana sifat, dan proses jalannya cahaya juga pembentukan bayangan pada alat optik yang tidak kasat mata pada penglihatan. •
Cahaya
Cahaya memiliki 3 sifat yang dipelajari pada kurikulum SMP yaitu perambatan, pemantulan, dan pembiasan. Dalam masing-masing
sifat
pembentukan bayangan dibantu oleh medium tertentu, dan terdapat proses pembentukan bayangan yang tidak dapat dilihat oleh mata telanjang. Studi eksperimental ini menggunakan sebuah aplikasi yang sudah ada sebelumnya tentang cahaya dan bagaimana bayangan terbentuk.
Gambar 4.2 Aplikasi pembentukan cahaya (Sumber: App Store) dalam aplikasi tersebut menjelaskan pembentukan
cahaya oleh lensa,
cermin, zat yang memiliki indeks bias. Harus dimengerti bahwa pembentukan bayangan terjadi karena adanya perpotongan sinar istimewa yang terjadi pada medium tertentu, karena pada medium yang berbeda terdapat sinar istimewa yang berbeda-beda.
!
51!
Gambar 4.3 Aplikasi Fisika Cahaya (Sumber: App Store) pada awal aplikasi user akan memilih untuk mempelajari cahaya atau alat optic. Pada pemilihan cahaya user akan langsung dihadapkan dengan tiga cara pengenalan terhadap cahaya berdasarkan sifatnya, yaitu, merambat ; memantul ; dan membias. Lalu dimulailah pengenalan cahays berdasarkan sifat dengan mengunakan animasi. •
Alat optik
Alat optik merupakan benda yang bekerja menggunakan prinsip cahaya. Jenis jenis alat optic yang akan diadaptasikan di aplikasi ini sesuai dengan kurikulum SMP yaitu, mata, lup, mikroskop, teropong, periskop, dan teleskop. Studi eksperimental yang perancang lakukan adalah dengan mengamati cara kerja dari masing masing alat optic terhadap pembentukan bayangan, dan juga mengamati kelainan pada salah satu jenis alat optic yaitu mata. Untuk mempelajari alat-alat optic dan cara kerja nya pada kehidupan sehari-hari perancang melakukan studi eksperimental dari video.
!
52!
Gambar 4.4 Potongan video penjelasan mata manusia (Sumber: Youtube)
dari hasil pengamatan yang dilakukan dari video-video tentang alat optik, perancang mengadaptasikan visual yang digunakan dari video tersebut. Salah satu contohnya pada mata adalah, visualisasi mata secara keseluruhan dan menjabarkan dengan visual bagian-bagian penting pada mata serta menjelaskan fungsinya.
Gambar 4.5 Potongan video penjelasan kelainan pada mata manusia (Sumber: Youtube)
!
53!
pada mata terdapat juga kelainan yang dapat diatasi menggunakan lensa dan cermin yang prinsip kerjanya sesuai untuk mengatasi kelainan dari mata. Tidak hanya mata, tetapi studi eksperimental alat optik lainnya juga menggunakan video. Dari studi eksperimental yang dilakukan melalui video-video tersebut, akan dijelaskan pada masing-masing alat optik, visualisasi secara keseluruhan, penjabaran bagian bagian dari alat optik yang akan dipelajari dan bagaimana cara kerja daripada alat optik tersebut.
Gambar 4.6 pembentukan bayangan pada lup (Sumber: Belajar fisika yuuk!_Lup.htm)
Gambar 4.7 Pembentukan bayangan pada teropong bintang (Sumber: Belajar fisika yuuk!_Lup.htm)
Gambar 4.8 Pembentukan bayangan pada mikroskop (Sumber: Belajar fisika yuuk!_Lup.htm)
!
54!
Gambar 4.9 Pembentukan bayangan pada periskop (Sumber : Belajar fisika yuuk!_Lup.htm)
4.1.3 Observasi Observasi merupakan penelitian yang dilakukan dengan mengamati suatu dan menganalisa objek penelitian. Pada observasi kali ini, perancang akan melakukan pengamatan terhadap sistem belajar mengajar fisika pada salah satu kelas di SMPN 1 Surabaya.
! Gambar 4.10 Suasana kelas saat belajar fisika
!
55!
!
pada observasi kali ini perancang mengamati bahwa metode pembelajaran
yang diberikan oleh guru sudah cukup efektif, siswa cukup dapat memahami dengan materi yang disampaikan. Hanya saja tidak semua siswa dapat fokus dan memperhatikan guru, sehingga mereka tertinggal dengan materi. Tidak semua siswa dapat dengan mudah memahami materi yang diberikan, akan tetapi dikarenakan batas waktu pelajaran gurupun dituntut harus dapat menyelesaikan materi yang telah disusun dalam silabus tanpa bisa membimbing para siswa lebih dalam lagi. 4.1.4 Focus Group Discussion -
Narasumber : Bu Purwanita (Guru Fisika SMPN 1 Surabaya) Rizky (Siswa SMPN 1 Surabaya) Zara (Siswi SMPN 1 Surabaya) Dimas (Siswa SMPN 1 Surabaya) Anisya (Siswi SMPN 1 Surabaya) Alya (Siswi SMPN 1 Surabaya) Celina (Siswi SMPN 1 Surabaya)
-
Lokasi : SMPN 1 Surabaya
-
Waktu : 7 November 2016 Pukul 09.00 WIB
-
Alat Wawancara : Hp sebagai alat perekam
-
Hasil : para siswa merasa materi alat optik dan cahaya merupakan materi yang cukup sulit untuk dimengerti. Berdasarkan kemampuan siswa yang berbeda-beda, mereka sepakat bahwa dalam menentukan pembentukan bayangan dan sifat bayangan merupakan hal yang sangat sulit. Pada alat optik mereka juga sulit untuk memahami sistematika perbesaran akomodasi pada mata. Kesimpulan yang didapat dari penelitian kali ini adalah kurangnya pengetahuan siswa terhadap prinsip dasar dari materi cahaya dan alat optik, kebanyakan dari mereka hanya mempelajari rumus tanpa mengerti bagaimana prinsip dasar dari materi itu sendiri.
!
56!
Fokus grup diskusi ini dilakukan untuk perancangan aplikasi karena target segmentasi dalam perancangan ini merupakan siswa SMP, oleh karena itu melalui metode penelitian ini perancang akan ikut berempati sehingga konten dalam aplikasi lebih dekat terhadap pengguna.
Gambar 4.11 FGD
!
57!
4.1.5 Depth Interview I -
Narasumber : Purwanita (guru Fisika SMPN 1 Surabaya)
-
Lokasi : SMPN 1 Surabaya
-
Waktu : 2 Mei 2016 pukul 12.00 WIB
-
Alat Wawancara : Hp sebagai alat perekam
-
Konten yang akan dibahas dan hasil yang diadapat :
Bagan 4.3 Konten Aplikasi Cahaya
!
58!
F I T U R M AT E R I A L AT O P T I K
M ATA
LUP
PERISKOP
Pe n j e l a s a n t e n t a n g b a g i a n b a g i a n m at a d a n f u n g s i n y a , d a n b a g a i m a n a m at a n o m a l b e ke r j a .
Pe n j e l a s a n b a g a i m a n a l u p b e r ke r j a p a d a m at a b e ra ko m o d a s i m a ks i m u m , d a n m at a t i d a k b e ra ko m o d a s i . rumus dan contoh soal.
Pe n j e l a s a n t e n t a n g b a g i a n b a g i a n Pe r i s ko p. d a n b a g a i m a n a j a l a n n y a s i n a r p a d a Pe r i s ko p.
DAYA A KO M O DA S I M ATA Cacat Mata
KAMERA
Miopi
Pe n j e l a s a n t e n t a n g b a g i a n b a g i a n ka m e ra , d a n f u n g s i n y a s e b a g a i a l at optik.
Pe n j e l a s a n t e n t a n g m i o p i Pe r b a n d i n g a n c a ra ke r j a m at a n o r m a l d e n g a n m at a m i o p i . rumus dan contoh soal.
MIKROSKOP
H i p e r m e t ro p i Pe n j e l a s a n t e n t a n g h i p e r m e t ro p i Pe r b a n d i n g a n c a ra ke r j a m at a n o r m a l d e n g a n m at a h i p e r m e t ro p i . rumus dan contoh soal.
Pe n j e l a s a n t e n t a n g b a g i a n b a g i a n M i k ro s ko p. d a n b a g a i m a n a p e m b e n t u ka n b a y a n g a n p a d a m i k ro s ko p. TEROPONG Te ro p o n g B i n t a n g Pe n j e l a s a n t e n t a n g c a ra ke r j a t e ro p o n g b i n t a n g Te ro p o n g B u m i Pe n j e l a s a n t e n t a n g c a ra ke r j a t e ro p o n g b u m i
Bagan 4.4 Konten Aplikasi alat optik
!
59!
Bagan 4.5 Contoh Naskah
4.1.6 Depth Interview II -
Narasumber : Rizky Rinaldi (Programmer)
-
Lokasi : Bekasi, Bumi Mutiara
-
Waktu : 8 Mei 2016
-
Hasil Wawancara :
!
60!
ST R U K T U R A P L I K A S I
Animasi perambatan pada celah terbuka P E R A M B ATA N
Animasi perambatan pada medium yang dapat diteruskan Animasi perambatan pada celah tertutup Animasi pemantulan baur, yaitu pada permukaan tidak rata
BAUR
info PEMANTULAN
rumus Animasi pembentukan bayangan pada cermin datar
C E R M I N DATA R
cth. soal
rumus
T E R AT U R
Animasi tiga sinar istimewa pada cermin cekung
CERMIN CEKUNG
C A H AYA
Animasi pembentuksn bayangan pada ruang cermin cekung
info
cth. soal
info
rumus
Animasi tiga sinar istimewa pada cermin cembung
CERMIN CEMBUNG
Animasi pembentuksn bayangan pada ruang cermin cekung
info
cth. soal
info
rumus
Animasi pembentukan bayangan pada air
MEDIUM BERINDEKS BIAS ( Z AT C A I R )
cth. soal
info PEMBIASAN
rumus Animasi tiga sinar istimewa pada lensa cekung
LENSA CEKUNG
Animasi pembentuksn bayangan pada ruang lensa cekung
info
cth. soal
info
rumus
Animasi tiga sinar istimewa pada cermin cembung
LENSA CEMBUNG
info
Bagan 4.6 Struktur Aplikasi Cahaya
!
Animasi pembentuksn bayangan pada ruang cermin cekung
cth. soal
info
61!
rumus
MIOPI
Vi s u a l i s a s i p e r b a n d i n g a n c a ra ke r j a m at a n o r m a l d e n g a n m at a m i o p i
cth. soal
info
M ATA
rumus
Vi s u a l i s a s i b a g i a n - b a g i a n p a d a m ata n o rm a l d a n f u n g s i n y a .
HIPERMETROPI
Vi s u a l i s a s i p e r b a n d i n g a n c a ra ke r j a m at a n o r m a l d e n g a n m at a h i p e r m e t ro p i
cth. soal
info
PRESBIOPI
Vi s u a l i s a s i c a ra ke r j a m at a p re s b i o p i .
info
A S T I G M AT I S M A
Vi s u a l i s a s i c a ra ke r j a m at a a s t i g m at i s m a .
info
M ATA B E R A K O M O D A S I MAKSIMUM LUP
Vi s u a l i s a s i p e m b e n t u ka n b a y a n g a n pada lup
Vi s u a l i s a s i b a g i a n - b a g i a n p a d a l u p d a n fu n g s i n y a .
rumus
cth. soal
info
M ATA TA K BERAKOMODASI A L AT O P T I K
Vi s u a l i s a s i p e m b e n t u ka n b a y a n g a n pada lup
rumus
cth. soal
info
KAMERA Vi s u a l i s a s i b a g i a n - b a g i a n p a d a ka m e ra d a n fu n g s i n y a s b g a l at o p ti k .
Vi s u a l i s a s i p e m b e n t u ka n b a y a n g a n p a d a m i k ro s ko p
MIKROSKOP Vi s u a l i s a s i b a g i a n - b a g i a n p a d a m i k ro s ko p d a n fu n g s i n y a .
T E R O P O N G B I N TA N G Vi s u a l i s a s i b a g i a n - b a g i a n p a d a t e ro p o n g d a n f u n g s i n y a .
TEROPONG
TEROPONG BUMI Vi s u a l i s a s i b a g i a n - b a g i a n p a d a t e ro p o n g d a n f u n g s i n y a .
Vi s u a l i s a s i p e m b e n t u ka n b a y a n g a n p a d a p e r i s ko p
PERISKOP Vi s u a l i s a s i b a g i a n - b a g i a n p a d a p e ri s ko p d a n fu n g s i n y a .
Bagan 4.7 Struktur Aplikasi Alat Optik
!
62!
Bagan 4.8 Wireframing Aplikasi 4.2 Analisa Hasil Riset Dalam landasan analisis data dalam penelitian ini menggunakan metode analisis deskriptif - kualitatif. Deskriptif adalah penafsiran data yang dilakukan dengan penalaran, sedangkan kualitatif yaitu menganalisa unsur desain seperti aspek tipografi, gaya gambar, dan tonal warna dalam hubungannya dengan prinsip ilustrasi dan prinsip - prinsip desain yang baik yaitu kesatuan (unity), keseimbangan (balance), dan keserasiannya (harmony). Setelah data yang dibutuhkan telah terkumpul, baik dengan metode wawancara, studi literatur dan eksperimental, maka data akan dianalisis berdasarkan metode deskriptif - kualitatif. Kemudian berdasarkan penganalisaan data tersebut selesai dilakukan, maka dibuat beberapa rancangan desain visual aplikasi yang tepat dengan kriteria yang telah ditentukan.
!
63!
4.2.1 Analisa Konten Aplikasi Dari hasil wawancara yang dilakukan dengan Guru, diambil kesimpulan bahwa Konten yang ada dalam aplikasi harus sesuai kurikulum dan jelas metode penjelasanya. Karena aplikasi ini memiliki fitur animasi sebagai fitur utama, maka setiap bagian dari bab yang menggunakan penjelasan visual akan di animasikan cara kerjanya. Konten yang dijelaskan pun harus jelas alurnya dan tidak melenceng dari peta konsep awal. Seperti misalnya pada cahaya, dijelaskan berdasarkan sifat pada awalnya. Lalu dijelaskan pembentukan bayangan berdasarkan sifat cahaya tersebut. Mulai dari perambatan, pemantulan, dan pembiasan. Kemudian dibahas pembentukan bayangannya, tidak lupa rumus yang terbentuk dari peristiwa tersebut dan juga contoh soal sebagai bahan latihan. Pada alat optik pun sama dengan cahaya. Berdasarkan peta konsep yang telah ditentukan, alat opti akan dijelaskan berdasarkan jenisnya. Mulai dari mata yang akan membahas tentang bagian mata, pembentukan bayangan mata normal, kelainan pada mata dan visualisasinya, lensa yang dapat membantu memperbaiki kelainan pada mata, dan contoh soal yang sebagai bahan latihan. Hal itu berlaku pada setiap jenis alat optik yang terdapat pada peta konsep. 4.2.2 Analisa Desain Dalam mendesain sebuah aplikasi dibutuhkan User interface yang baik. Setelah itu membuat Wireframing yang terstruktur dan ergonomis sehingga membuat user mudah dalam menggunakan aplikasi tersebut. Untuk aplikasi berbasis edukasi pelajaran fisika, tentunya harus sangat informatif dan jelas, oleh karena itu desain aplikasi yang minimalis dengan mendominasikan layar dengan informasi yang ada melalui fitur fitur dalam aplikasi merupakan pilihan yang baik. Dalam aplikasi ini Interaksi menjadi fitur utama didalamnya karena setiap pembentukan bayangan akan diinteraksikan. Oleh karena itu konsep pembuatan interaksi harus sesuai dan jelas agar bahasan lebih mudah dimengerti oleh user, ditambahakan dengan visualisasi materi menggunakan animasi. Aplikasi ini juga
!
64!
terdapat fitur audio yang yang bias digunakan atau tidak digunakan tergantung user sesuai kebutuhan mereka. Dalam setiap aplikasi ikon sangatlah penting. Dalam aplikasi ini dalam setiap tombol akan dirancang menggunakan ikon sehingga lebih menghemat tempat pada scene dan bisa lebih memaksimalkan pada fitur yang akan ditampilkan.
!
BAB 5 KONSEP DESAIN 5.1 Konsep Dasar dan Kriteria Desain 5.1.1 Deskripsi Perancangan Perancangan aplikasi materi fisika cahaya dan alat optik ini disadari oleh kurangnya media pendukung pembelajaran yang dapat membantu siswa SMP dalam mempersiapkan diri untuk menghadapi materi fisika ke jenjang berikutnya. Ditambah lagi dengan konten pada media pendukung pembelajaran fisika yang sudah ada masih terlalu luas untuk target segmen pada perancangan ini, sehingga siswa tidak mendapatkan penjelasan yang konkret tentang materi yang mereka pelajari. Pemahaman yang kurang terhadap dasar dari suatu materi fisika akan mempersulit mereka dalam mempelajari materi fisika pada jenjang berikutnya. Perancangan aplikasi fisika cahaya dan alat optik merupakan salah satu upaya dalam membantu siswa SMP dalam memahami prinsip dasar materi fisika cahaya dan alat optik sekaligus sebagai media pendukung pembelajaran fisika yang sudah ada. Aplikasi ini dirancang untuk memberikan informasi yang mendalam tentang prinsip dasar cahaya, pembentukan bayangan, dan hubungan cahaya dan alat optik serta mengetahui prinsip tersebut dalam kehidupan seharihari. Aplikasi ini merupakan aplikasi yang terintergrasi berdasarkan kurikulum pendidikan. Penentuan konsep desain pada perancangan aplikasi ini didapatkan melalui hasil analisa data-data yang diperoleh dari Depth Interview dengan guru, Depth Interview dengan programer, FGD dengan pengguna yaitu siswa SMP, Observasi kegiatan belajar mengajar di SMPN 1 Surabaya, dan literatur yang diperoleh melalui website, dan buku-buku yang dapat mendukung studi perancangan. 5.1.2 Output Perancangan Output dari peracangan ini adalah aplikasi interaktif yang berisi tentang penjelasan dan informasi dari prinsip dasar materi fisika cahaya dan optik yang terbagi menjadi dua menu. Menu cahaya berisi tentang sifat sifat cahaya, dan
!
65!
66!
bagaimana pembentukan bayangan pada cermin dan lensa. Menu alat optik berisi tentang pembentukan bayangan pada alat optik seperti mata, lup, mikroskop, kamera, teleskop,dan periskop. Pemahaman dan informasi yang dijelaskan berbentuk interaksi dan animasi serta dilengkapi oleh suara. Sehingga, anak-anak dapat dengan mudah memahami materi yang diberikan. 5.1.3 Keyword
Bagan 5.1 Keyword aplikasi Fisika cahaya dan alat optik
!
67!
Dalam memahami pelajaran fisika terdapat beberapa tingkatan. Dalam tingkatan SMP ini siswa mulai dapat berfikir abstrak dan logis dimana fisika pada tingkatan ini diperkenalkan berdasarkan dasar dari apa yang terjadi disekitar kita, dan pada tingkat selanjutnya siswa diharapkan bisa menggunakan ilmu yang didapat pada tingkat SMP sebagai dasar dari pemahaman ke tingkat selanjutnya sehingga siswa dapat mengikuti materi tersebut. Oleh karena itu, siswa membutuhkan media pendukung pembelajaran yang dapat membantu mereka dalam memahami prinsip dasar materi fisika dan informasi dasar dari materi tersebut sebelum mempelajari pada tingkat yang lebih sulit. Media pembelajaran yang sudah ada masih belum mampu memenuhi kebutuhan beberapa siswa dalam memahami materi tersebut, terkendala waktu, aktifitas, dan minimnya media pendukung pembelajaran yang disediakan. Beberapa media pendukung yang sudah ada seperti buku, dan website belajar masih belum memberikan informasi dan materi yang sesuai dengan kebutuhan siswa. Media buku yang sudah ada kebanyakan berisi tentang rangkuman pada buku paket yang terdapat di sekolah, dan website belajar yang ada berisi konten yang kurang mendalam tentang materi yang dipelajari. Media aplikasi merupakan salah satu media yang dapat membantu siswa sebagai media pendukung pembelajaran, sekaligus media yang dapat menyesuaikan dengan aktifitas dan kebutuhan siswa. Konsep yang diangkat dalam perancangan aplikasi interaktif ini adalah “jembatan Interaksi Pemahaman Dasar Menuju Pemahaman Kompleks” dengan menampilkan interaksi visual mengenai prinsip dasar suatu peristiwa alam yang dibahas dalam materi fisika cahaya dan alat optik, seperti sifat cahaya, pembentukan bayangan, dan pengaruhnya terhadap alat optik. 5.1.4 Makna Denotasi Keyword Keyword “Jembatan Interaksi Pemahaman Dasar Menuju Pemahaman Kompleks” memiliki tiga kata kunci utama yaitu “jembatan”, “interaksi”, dan “dasar”. Jembatan merupakan suatu penghubung antara suatu tempat ke tempat yang lain.
Interaksi berarti hal saling melakukan aksi, berhubungan,
!
68!
mempengaruhi antarhubungan. Dasar memiliki arti terbawah, atau bagian awal dari suatu hal. 5.1.5 Makna Konotasi Keyword Arti keyword “Jembatan Interaksi Pemahaman Dasar Menuju Pemahaman Kompleks” secara keseluruhan memiliki arti media interaksi sebagai penghubung antara pemahaman dasar dengan pemahaman yang lebih kompleks nantinya. Hal ini diwujudkan dengan memahami prinsip dasar sebelum mempelajari materi yang sama dengan bobot yang lebih kompleks. 5.2 Kriteria Desain
Bagan 5.2 Kriteria desain aplikasi fisika cahaya dan alat optik
!
69!
Kriteria desain pada perancangan aplikasi ini diambil dari hasil analisis studi eksisting, studi literatur, wawancara, dan observasi. Kriteria desain yang akan ditetapkan pada aplikasi fisika cahaya adan alat optik adalah sebuah aplikasi dengan konsep pemahaman dasar sebagai persiapan atau penghubung bagi mereka terhadap pemahaman yang lebih kompleks nantinya. Hasil wawancara dan informasi serta studi literatur digunakan untuk menyusun konten. Sedangkan studi eksisting dan literatur digunakan untuk membuat konsep desain aplikasi yang sesuai untuk siswa SMP.
!
celah tertutup
celah terbuka
Rambat
pembiasan
& jenis pemantulan
!
Bagan 5.3 Arsitektur Informasi aplikasi
Pembentukan bayangan
3 Sinar istimewa
Tentang cermin cembung
Cermin Cembung
Pembentukan bayangan
3 Sinar istimewa Pembentukan bayangan
3 sinar istimewa
Lensa Cekung
Cermin Cekung
Tentang cermin cekung
bayangan pada 2 cermin
3 sinar istimewa
Lensa Cembung
Pembentukan bayangan dan Dalil esbach
Pembentukan bayangan
Tentang cermin
Cermin datar
pada lensa
Pembiasan
Prinsip dasar
Hukum Pemantulan
Pantul teratur
Bias
Pantul
Cahaya
Home Cahaya & Alat Optik
Kelainan pada mata
Cara kerja mata
Bagan mata
Mata
Alat Optik
Cara kerja Lup
Bagan Lup
Lup
Cara kerja Kamera
Bagan Kamera
Kamera
Cara kerja Mikroskop
Bagan Mikroskop
Mikroskop
Cara kerja Teleskop
Bagan Teleskop
Teleskop
Cara kerja Periskop
Bagan Periskop
Periskop
70!
5.2.1 Arsitektur Informasi
71!
Aplikasi ini diawali dengan pembukaan aplikasi, lalu langsung kepada home, yang berisi pilihan menu cahaya atau alat optik.
Home Cahaya & Alat Optik
Cahaya
Alat Optik Bagan 5.4 Home Aplikasi
Menu cahaya dibagi lagi menjadi 3 submenu, pembagian submenu cahaya ini berdasarkan sifat-sifat cahaya itu sendiri.
Cahaya
Rambat
Pantul
Bias
Bagan 5.5 Menu Cahaya Submenu tersebut dibagi lagi menjadi beberapa subemenu sesuai dengan konten yang harus dipahami oleh pengguna yaitu pembentukan bayangan dan sifat cahaya pada benda tertentu. Rambat celah terbuka
Pantul
Bias
Hukum Pemantulan
Prinsip dasar
& jenis pemantulan
pembiasan
celah tertutup
Pantul teratur
Cermin datar Tentang cermin
Pembiasan pada lensa Lensa Cembung 3 sinar istimewa
Pembentukan bayangan bayangan pada 2 cermin
Pembentukan bayangan dan Dalil esbach
Cermin Cekung
Lensa Cekung
Tentang cermin cekung 3 sinar istimewa 3 Sinar istimewa Pembentukan bayangan
Pembentukan bayangan
Cermin Cembung Tentang cermin cembung 3 Sinar istimewa Pembentukan bayangan
Bagan 5.6 Submenu Cahaya
!
72!
Untuk menu alat optik, dibagi kembali menjadi enam submenu berdasarkan jenis-jenis alat optik. Alat Optik
Mata
Lup
Kamera
Mikroskop
Teleskop
Periskop
Bagan 5.7 Menu Alat optik Dari submenu tersebut akan terbagi lagi menjadi beberapa submenu yang berisikan konten informasi sebagai penjelasan dari jenis-jenis alat optik tersebut. Mata
Lup
Kamera
Mikroskop
Bagan mata
Bagan Lup
Bagan Kamera
Bagan Mikroskop
Bagan Teleskop
Bagan Periskop
Cara kerja mata
Cara kerja Lup
Cara kerja Mikroskop
Cara kerja Teleskop
Cara kerja Periskop
Cara kerja Kamera
Teleskop
Periskop
Kelainan pada mata
Bagan 5.8 Submenu Alat Optik
A. Sistematika Pembahasan Konten •
Cahaya Cahaya itu sendiri merupakan sebuah gelombang partikel dengan panjang gelombang tertentu dan kecepatan tertentu. Cahaya merupakan bagian penting dari kehidupan. Cahaya membantu makhluk hidup untuk melihat hal disekitarnya. Sifat cahaya terhadap suatu hal berbeda-beda, untuk dapat memahami cahaya kita harus mengerti sifat dasar dan pengaruhnya terhadap benda-benda tertentu. Dalam bangku SMP, para siswa mendapatkan pembelajaran tentang cahaya melalui fisika. Untuk dapat memahami konten pengetahuan cahaya dengan lebih baik, siswa diharuskan untuk memahami prinsip dasar tentang cahaya tersebut. Berikut merupakan sistematika konten materi pembelajaran fisika dasar cahaya dalam aplikasi ini.
!
73!
Tabel 5.1 Sistematika konten cahaya •
Perambatan pada celah terbuka
•
Perambatan pada celah tertutup
Perambatan
•
Hukum pemantulan
•
Jenis Pemantulan
•
Pemantulan
pada
kehidupan
sehari-hari
(cermin
cembung,
cermin cekung) • Pemantulan
Pembentukan
bayangan
pada
cermin datar (satu cermin dan dua cermin) •
Cahaya
Pembentukan
bayangan
pada
cermin cekung (3 sinar istimewa) •
Pembentukan cermin
bayangan
cembung
(3
pada sinar
istimewa) •
Hukum pembiasan
•
Pembiasan
pada
sehari-hari
(medium
kehidupan yang
memiliki kepadatan seperti zat Pembiasan
cair) •
Pembiasan pada lensa cembung (3 sinar istimewa, dalil esbach)
•
Pembiasan pada lensa cekung (3 sinar istimewa)
!
74!
•
Alat Optik Alat optik merupakan lanjutan dari bab cahaya. Untuk dapat memahami cara kerja alat optik siswa harus terlebih dahulu memahami cara kerja cahaya, karena sistem kerja alat optik menggunakan sifat-sifat dasar cahaya. Berikut merupakan sistematika konten pembelajaran fisika alat optik pada aplikasi ini. Tabel 5.2 Sistematika konten alat optik Mata • Bagian-bagian mata dan fungsinya •
Cara kerja dan akomodasi mata
•
Kelainan
pada
mata
(Miopi,
Presbiopi) Lup
•
Bagian-bagian lup dan fungsinya
•
Lup pada kehidupan sehari-hari dan cara kerjanya
Kamera Alat Optik
•
Bagian-bagian kamera dan fungsinya
•
Cara kerja kamera pada kehidupan sehari-hari
•
Mikroskop
Bagian-bagian
mikroskop
dan
fungsinya •
Cara kerja mikroskop pada kehidupan sehari-hari
Periskop
•
Bagian-bagian periskop dan fungsinya
•
Cara kerja periskop pada kehidupan sehari-hari
Teleskop
•
Bagian-bagian teleskop dan fungsinya
•
Cara kerja teleskop pada kehidupan sehari-hari
!
75!
B. Kriteria Pembahasan Konten a. Cahaya!
START
START
Animasi START
Tombol Rambat
Pantul
Bias
Konten interaktif Drag and Tap
Slide menu
Slide menu
Drag and Tap
Drag and Tap Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Slide menu
Interactive content
Slide menu
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Interactive content
Slide menu
Interactive content
Interactive content
Interactive content
Slide menu
Interactive content
Interactive content
Gambar 5.1 Sistematika pembahasan konten cahaya Pada konten cahaya, pembahasan dilakukan dengan menggunakan interaksi dan animasi sederhana. Seperti misalnya pada submenu pemantulan, pada awal menu akan langsung terdapat animasi tentang hukum, jenis pemantulan, dan pemantulan pada kehidupan sehari-hari yang langsung
!
!
Slide menu
Slide menu
Slide menu
Interactive content
Interactive content
Interactive content
Drag and Tap
Mata
Lup
Kamera
Mikroskop
Slide menu
Slide menu
Teleskop
Interactive content
Interactive content
Periskop
Konten interaktif
Animasi
Slide menu
Slide menu
Interactive content
Interactive content
Tombol
Slide menu
Slide menu
Interactive content
Interactive content
Slide menu
Slide menu
Interactive content
Interactive content
Slide menu
Slide menu
Interactive content
Interactive content
76!
mengarah kepada penjelasan pembentukan bayangan cahaya pada cermin
datar, cekung, dan cembung. Begitupula dengan perambatan dan pembiasan
yang sistematika pembahasannya kurang lebih sama dengan pemantulan.
b. Alat Optik
Gambar 5.2 Sistematika pembahasan konten alat optik
77!
Pembahasan konten alat optik dilakukan dengan menggunakan interaksi dan animasi sederhana, sama seperti cahaya. Seperti misalnya pada mata, bagianbagian mata akan dijelaskan dengan menggunakan interaksi, juga cara kerja mata yang menggunakan interaksi. Pada penjelasan cara kerja mata digunakan animasi sederhana, begitu pula dengan submenu alat optik lainnya. 5.2.2 Gaya Bahasa Gaya bahasa yang digunakan dalam aplikasi ini adalah gaya bahasa formal yang sederhana dan mudah dipahami, dengan meminimalisasikan bahasa ilmiah. Disesuaikan dengan konsep penyusunan konten yang bersifat informatif, imajinatif, dan interaktif, yaitu dengan memberikan informasi secara detail dan mampu membantu proses berfikir siswa saat menggunakan aplikasi ini. 5.2.3 User Experience A. User Interface Antarmuka merupakan hal yang termasuk dalam user experience, antarmuka pengguna menyangkut pada layout dan informasi yang terdapat pada layar. Berikut merupakan antarmuka pada setiap scene yang terdapat pada aplikasi ini. •
Home
START
START
Gambar 5.3 Antarmuka Home
!
78!
Home pada aplikasi ini merupakan interface pertama pengguna pada aplikasi untuk memilih konten cahaya atau alat optik. •
Submenu Cahaya dan Alat Optik!
Rambat
Pantul
Bias
Drag Drag and Tap
Gambar 5.4 Antarmuka Subemnu Cahaya
Mata
Lup
Kamera
Mikroskop
Teleskop
Drag
Gambar 5.5 Antarmuka Submenu Alat Optik Untuk pemilihan submenu, perancang mendesain antarmuka seperti pada gambar 5.4 dan 5.5 agar tidak terlalu banyak scene yang digunakan.
!
Periskop
79!
Antarmuka Menu Selection
5/3x
1/3x
•
1/4x
1/4x
x
1/3x
x x
1/4x
1/3x
5/3x
1/4x
!
1/4x
2x
1/4x
x
1/2x
5/3x
1/4x
5/3x
1/4x
1/4x
5/3x
1/4x
2x
Gambar 5.6 Antarmuka menu selection Menu selection pada aplikasi ini berisi kurang lebih 2-3 menu, desain layar ini digunakan untuk memilih menu pembahasan benda-benda yang berhubungan dengan cahaya dan alat optik.
!
80!
•
Antarmuka Interaksi 5/3x
1/8x
1/4x
1/3x
textbox 16pt
1/8x
5/3x
1/2x
1/3x
1/3x
x
3/4x
1/4x
interaksi
Slide menu textbox 9-11pt
5/3x
scroll
5/3x
7/4 x
2x
Gambar 5.7 Antarmuka layar interaksi Layar interaksi merupakan layar pembahasan konten materi, seperti pembentukan bayangan dan 3 sinar instimewa. Dalam layar tersebut terdapat hidden sidebar yang terdapat pada sebelah kiri layar agar informasi interaksi pada layar tidak terganggu oleh tombol-tombol.!! B. Typefaces •
Judul Menu!
text 36 pt
1/3x
Judul 2 text 36 pt
1/3x
1/4x
Judul 1
1/4x
2/3x
1/4x
x
layar bisa di drag
Judul 3 text 36 pt
2x
1/4x
!
Judul 3 text 36 pt
Gambar 5.8 tipografi judul menu Untuk juduk menu menggunakan font Avenir next bold dengan ukuran 36pt. typeface ini digunakan pada saat memilih jenis sifat-sifat cahaya dan berbagai macam alat optik. Selain itu font ini juga digunakan saat memilih benda-
!
81!
benda yang berhubungan dengan sifat-sifat cahaya, seperti cermin cekung, cembung, dan datar serta lensa cekung dan cembung. •
Judul layar interaksi Tipografi pada judul layar menggunakan font Avenir next semi bold
dengan ukuran 14 pt. font ini juga digunakan untuk memberikan keterangan
1/3x
textbox 16pt
5/3x
1/2x
5/3x
bagan pada alat optik dengan ukuran 11pt.
Slide menu
Interactive content
Judul Layar Interaksi 14pt
Gambar 5.9 Tipografi Judul pada layar
!
82!
Informasi
a.
1/3x
1/3x
Slide menu 1/4x
The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The 8px quick brown fox jump over the lazy dog.
1/15x
b.
3/4x 1/15x The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. 8px
Slide menu
1/15x
•
scrollbox
c.
The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The 8px quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog. scroll
d.
The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. The quick brown fox jump over the lazy dog. 8px The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox jump over the lazy dog.The quick brown fox
Gambar 5.10 tipografi penjelasan pada layar
!
83!
Tipografi penjelasan pada layar menggunakan font Avenir next regular dengan ukuran 9-11pt yang merupakan ukuran font minimal pada gadget. letak informasi pada layar bisa dimana saja tergantung letak interaksi, untuk contoh bisa dilihat pada gambar 5.10 a dan b. font informasi menggunakan rata kiri agar memudahkan pengguna untuk membaca. Apabila teks informasi berada dibawah seperti gambar 5.10 a maka terdapat kotak teks, tetapi apabila letak teks berada disamping atau atas maka teks box tidak digunakan (gambar 5.10 d). Pada teks informasi memiliki kotak batas, apabila jumlah teks melebihi kotak perancang menyediakan fitur scroll untuk melihat teks selengkapnya. C. Tombol dan Ikon
1/3x
1/4x
1/3x
1/4x
2/3x
1/4x
x
layar bisa di drag
2x
1/4x
2/3x
! Gambar 5.11 tombol pada layar menu Pada layar menu terdapat tombol berbentuk persegi panjang dengan teks ditengahnya seperti pada gambar 5.8, gambar 5.11 membahas tentang tombol yang digunakan. Perancang menggunakan bentukan persegi panjang dengan menggunakan radius di ujung persegi panjang tersebut karena ujung yang tumpul memberikan kesan yang friendly agar pengguna tidak terlalu serius dan bisa lebih santai dalam menggunakan aplikasi ini.
!
84!
1/15x 1/15x
1/2x
1/3x
textbox 16pt
1/8x
a.
1/8x
1/4x
interaksi
1/15x
1/15x
Slide menu
7/4 x
2x
7/6x x
1/15x
b. 1/30x
1/8x
1/8x
1/4x
1/8x
1/4x
1/8x
ikon cermin
1/8x
c.
ikon alat optik
ikon alat optik (tambahan pada mata)
ikon lensa
Gambar 5.12 tombol dan ikon pada layar interaksi
!
x
3/4x
1/4x
1/8x
85!
Pada layar interaksi terdapat beberapa tombol dan ikon. Pada gambar 5.12b merupakan ikon dan tombol yang selalu ada pada setiap layar aplikasi dengan sudut-sudut ikon dan tombol yang tumpul untuk menunjukan kesan friendly. Pada gambar 5.12b ikon yang selalu ada pada layar merupakan home, menu, suara, dan tombol judul pada layar yang diantaranya terdapat tombol back dan next. Pada gambar 5.12c merupakan tombol yang terdapat pada sidebar dengan ikon-ikon pada aplikasi ini. Ikon-ikon yang terdapat pada gambar 5.12c diletakkan pada tombol persegi pada gambar 5.12c dengan ukuran yang telah ditentukan. Ikon yang digunakanpun sederhana agar tidak mengganggu mata dan konsentrasi pengguna dengan banyaknya tombol yang ada. D. Warna Warna yang digunakan dalam aplikasi ini merupakan warna-warna cerah yang dapat meningkatkan semangat siswa dalam belajar. Warna-warna ini didapatkan dari studi literatur tentang psikologis anak terhadap warna, dan studi eksisting terhadap warna pada aplikasi edukasi yang sudah ada. Untuk menu cahaya dan alat optik tonal warnanya berbeda, akan tetapi untuk penjelasan scientific memiliki tonal warna yang sama dari setiap menu dan dipilih secara khusus.
Gambar 5.13 tone warna aplikasi Dalam menu cahaya, warna yang dominan merupakan merah seperti pada palet 5.13. Untuk menu alat optik warna yang dominan merupakan warna lime green seperti pada palet 5.13 sedangkan untuk penjelasan scientific menggunakan warna biru gelap.
!
86!
Gambar 5.14 Tonal warna pada aplikasi D. Animasi dan Interaksi Animasi yang terdapat pada aplikasi ini merupakan animasi sederhana yang menampilkan cara kerja pada kehidupan sehari hari pada cermin, lensa dan alat optik. Durasi animasi pada aplikasi ini adalah 15-40 detik. Interkasi yang terdapat pada aplikasi ini merupakan interaksi tentang pembentukan bayangan benda pada suatu hal, serta menunjukan cara kerja alat optik di kehidupan sehari-hari. Gestur yang digunakan pada aplikasi ini merupakan drag and tap.
! ! ! ! !
!
87!
Gambar 5.15 elemen visual animasi dan interaksi pada kehidupan sehari-hari 5.2.4 Kriteria Gadget Dalam perancangan kali ini, perancang menentukan batas ukuran layar hp adalah 4inci-5.5inci. sedangkan batas ukuran tablet dimulai dari 7.9inci-12.9inci.
Gambar 5.16 kriteria ukuran layar smartphone (Sumber: Pinterest)
Gambar 5.17 Kriteria ukuran layar tablet (Sumber: Appstore)
!
88!
5.2.5 Branding Aplikasi ini bernama visics yang berasal dari visual physics. Sesuai dengan namanya visics merupakan aplikasi yang menyediakan konten pembelajaran fisika dengan menvisualisasikan materi dalam pelajaran fisika. Logo gram yang digunakan merupakan sebuah lingkaran, karena lingkaran memiliki bentuk seperti bumi dan planet-planet lainnya, dimana fisika merupakan ilmu yang membahas tentang hukum alam. Selain itu bentukan ini dapat digambarkan menjadi berbagai jenis hal khususnya dalam hal ilmiah, sebagai contoh pada pembahasan fisika tentang gravitasi logo gram ini bisa diumpamakan sebagai bola yang memiliki gaya fisika, atau dalam cahaya dan alat optik logo gram ini melambangkan berbagai sumber cahaya dan jenis alat optik. Oleh karena fleksibilitas dari bentukan ini, maka dipilih sebagai logogram visics. Konten yang ada dalam aplikasi ini bermacam-macam dan akan dirancang secara terpisah berdasar materi yang akan dibahas. Contohnya pada perancangan kali ini visics menjadikan materi cahaya dan alat optik sebagai konten materi.
Gambar 5.18 Logo visics
Gambar 5.19 jenis-jenis aplikasi visics ! ! ! ! ! ! !
!
89!
Gambar 5.20 Visics pada appstore Visics juga memiliki website bagi para pengguna yang ingin mengenal lebih jauh tentang app ini. Website ini terdiri dari pengenalan fitur pada masingmasing dari aplikasi visics, melalui website ini juga pengguna dapat memberikan komentar, apresiasi, dan saran pengembangan terhadap aplikasi ini.
Gambar 5.21 Website Interface visics
!
!
Slide menu
Slide menu
Interactive content
Interactive content
Slide menu
Slide menu
Slide menu
Interactive content
Interactive content
Interactive content
Slide menu
Drag and Tap
Rambat
Slide menu
Slide menu
Slide menu
Interactive content
Interactive content
Interactive content
Drag and Tap
Pantul
Drag
START
Bias
START
Slide menu
Slide menu
Slide menu
Interactive content
Interactive content
Interactive content
START
Slide menu
Slide menu
Slide menu
Slide menu
Drag and Tap
Interactive content
Interactive content
Interactive content
Interactive content START
Slide menu
Slide menu
Slide menu
Interactive content
Interactive content
Interactive content
Slide menu
Slide menu
Slide menu
Interactive content
Interactive content
Interactive content
Mata
Lup Kamera
Mikroskop
Slide menu
Slide menu
Teleskop
Interactive content
Interactive content
Periskop
Slide menu
Slide menu
Interactive content
Interactive content
Slide menu
Slide menu
Interactive content
Interactive content
Slide menu
Slide menu
Interactive content
Interactive content
Slide menu
Slide menu
Interactive content
Interactive content
90!
5.2.6 Proses Desain Proses desain pada aplikasi ini diawali dengan menyusun struktur
informasi, lalu membuat rangka pada masing-masing desain layar yang berbeda.
Setelah itu menambahkan elemen visual pada kerangka yang telah dibuat, seperti
warna, tombol, ilustrasi, animasi, dan interaksi.
Gambar 5.22 (Proses desain I) Rangka struktur informasi cahaya dan alat optik
91!
Berdasarkan rangka struktur informasi yang telah dirancang, perancang mulai memasukan elemen-elemen visual yang telah dirancang.
START
START
Rambat
Pantul
Bias
Drag and Tap
Mata
Lup
Kamera
Mikroskop
Teleskop
Periskop
Gambar 5.23 (Proses Desain II) Elemen visual pada rangka aplikasi
!
92!
1/3x
textbox 16pt
1/8x
5/3x
1/2x
5/3x
1/8x
1/4x
1/3x
x
3/4x
1/4x
interaksi 1/3x
Slide menu textbox 9-11pt
5/3x
scroll
5/3x
7/4 x
2x
Gambar 5.24 (Proses Desain II) Elemen visual pada rangka aplikasi Setelah proses desain II dilaksanakan, perancang melaksanakan proses desain ke-3 yaitu membuat animasi dan interaksi pada aplikasi. interaksi yang terdapat pada aplikasi ini cukup sederhana yaitu dengan drag dan tap. Animasi yang terdapat pada aplikasi ini kurang lebih menceritakan tentang prinsip cahaya pada kehidupan sehari-hari seperti cermin cekung pada lampu mobil, lensa pada kaca mata, dan lain-lain.
!
93!
Gambar 5.25 (Proses desain III) Animasi cahaya
Gambar 5.26 (Proses desain III) Animasi alat optik
!
94!
Gambar 5.27 (Proses Desain III) Interaksi pembentukan bayangan 5.2.5 Kriteria Konten •
Cahaya
Gambar 5.28 Pengaplikasian warna pada cahaya
!
95!
Untuk submenu cahaya, warna yang dominan adalah warna merah dengan tombol dan ikon yang berwarna hijau lime seperti warna dominan alat optik. Isi konten cahaya lebih membahas tentang prinsip dasar pada sifat-sifat cahaya dan pembentukan bayangannya. •
Alat Optik
Gambar 5.29 pengaplikasian warna pada alat optik Pada submenu alat optik warna yang dominan pada aplikasi ini adalah hijau lime, dengan tombol warna merah seperti pada submenu cahaya. Konten yang terdapat pada alat optik ini adalah bagian-bagian pada alat optik dan cara kerja alat optik pada kehidupan sehari-hari.
!
96!
5.3 Implementasi Desain •
Struktur dan Konten Aplikasi
Gambar 5.30 Struktur Aplikasi cahaya dan alat optik
!
97!
Gambar 5.30 merupakan struktur aplikasi yang diperoleh melalui rangka dan struktur informasi yang telah dirancang sebelumnya. Dimulai dari menu awal cahaya dan alat optik, lalu diikuti oleh sub-sub menu pada konten yang telah disusun.
Gambar 5.31 Struktur Aplikasi pada menu cahaya Menu cahaya dibagi berdasarkan sifat-sifat cahaya, yaitu rambat, pantul, dan bias. Dalam menu perambatan dibagi menjadi interaksi pada perambatan celah tertutup dan perambatan celah terbuka. Pada menu pantul terdapat animasi tentang prinsip dasar hukum pantul dan animasi pemantulan pada kehidupan sehari-hari yang akan langsung menuju kepada submenu jenis-jenis cermin. Dalam masing-masing menu cermin, akan dibahas tentang 3 sinar istimewa dan pembentukan bayangan melalui interaksi. Terakhir adalah menu pembiasan yang diawali dengan animasi prinsip dasar pembiasan pada kehidupan sehari-hari dengan zat bermedium. Setelah prinsip dasar tersebut dipahami, pengguna langsung dihadapkan kepada pemilihan jenis lensa dimana terdapat 3 sinar istimewa dan pembentukan bayangan pada masingmasing lensa.
!
98!
Gambar 5.32 Struktur aplikasi menu alat optik Pembahasan alat optik pada aplikasi ini dibagi berdasarkan jenis-jenis alat optik. Setiap jenis-jenis alat optik terdapat penjelasan tentang bagan alat optik dan cara kerja alat optik tersebut pada kehidupan sehari-hari melalui animasi dan interaksi.
!
99!
•
Typefaces
a. Judul Menu Dalam menu judul terdapat typeface yang merupakan bagian dari tombol menggunakan font avenir next bold dengan ukuran 36pt .
Gambar 5.33 Menu awal aplikasi
!
100!
b. Subjudul Font yang digunakan pada subjudul adalah avenir next semi bold, dengan ukuran 14pt. Selain digunakan untuk subjudul, font ini juga digunakan sebagai penjelas pada bagan-bagan alat optik ataupun penjelas pada teks informasi dengan ukuran 11-12pt.
Gambar 5.34 Subjudul pada menu
Gambar 5.35 Penjelas alat optik c. Teks informasi Teks informasi menggunakan font avenir next regular dengan ukuran 9-12 pt tergantung ukuran layar. Teks informasi ini menggunakan rata kiri agar pengguna dapat dengan mudah membaca informasi yang terdapat pada aplikasi.
Gambar 5.36 teks informasi pada konten aplikasi
!
BAB 6 KESIMPULAN DAN SARAN 6.1 Kesimpulan Berdasarkan hasil penelitian dan pembahasan yang telah diuraikan pada bab sebelumnya serta uji coba yang telah dilakukan terhadap pengguna, dapat ditarik kesimpulan bahwa konten pada aplikasi ini merupakan konten yang penting dan memang dibutuhkan oleh siswa sebagai pemahaman dasar mereka terhadap materi yang disampaikan. Berikut merupakan beberapa kesimpulan berdasarkan uji coba yang telah dilaksanakan : 1. Struktur informasi atau sistematika penyampaian informasi konten yang terdapat pada aplikasi ini dapat diikuti dengan baik oleh siswa. Mereka dapat menggunakan aplikasi ini dengan mengalir, dimulai dari pengetahuan dasar yang ada pada kehidupan sehari-hari hingga kepada hal yang mereka tidak bisa lihat dalam kehidupan sehari-hari membuat siswa memahami alasan dibalik peristiwa alam tersebut. 2. Dengan adanya animasi dan interaksi pada aplikasi, membuat siswa semakin memahami konten pada aplikasi ini, akan tetapi fitur interaksi yang terdapat pada aplikasi ini masih kurang banyak bagi siswa, karena siswa senang bereksplorasi lebih bebas. 3. Gaya visual yang terdapat pada aplikasi ini cukup menarik bagi siswa, dengan gaya flat 2.0 dan swiss internatioal design sebagai tema aplikasi ini. 4. Desain antarmuka pada aplikasi cukup mudah dipahami, akan tetapi siswa kurang memahami cara kerja interaksi dan gestur yang terdapat pada desain antarmuka aplikasi ini. 5. Siswa lebih semangat belajar menggunakan aplikasi ini ketimbang dengan buku, karena siswa dapat melakukan hal yang tidak dapat dilakukan oleh buku. Melalui aplikasi ini siswa merasa terlibat langsung dengan materi yang dibahas, sehingga membuat mereka lebih semangat dan mengerti terhadap konten yang dibahas.
!
101!
102!
6.2 Saran Berdasarkan uji coba yang telah dilakukan, muncul beberapa saran yang dapat dilakukan untuk menunjang perancangan ini, diantaranya adalah: 1. Selain pembahasan konten yang terdapat pada aplikasi ini perlu adanya latihan soal yang dapat melatih kemampuan siswa dalam memahami konten tersebut. 2. Siswa merasa lebih dapat memahami konten aplikasi ini apabila ditambahkan fitur suara sebagai pendamping teks informasi. 3. Penambahan fitur animasi tentang penjelasan cahaya dan alat optik pada kehidupan sehari-hari sebaiknya diperbanyak agar anak-anak lebih berminat dalam mempelajari ilmu fisika. 4. Layout pada layar gadget seperti tablet dan smartphone dibedakan. Siswa yang menggunakan kacamata kesulitan membaca teks informasi pada layar smartphone. 5. Font dalam aplikasi ini menggunakan aplikasi sans serif karena identik dengan gaya swiss international design. Untuk pengembangan aplikasi selanjutnya bisa digunakan font jenis serif karena font sans serif memiliki beberapa kekurangan, yaitu susahnya membedakan huruf “I” dan “L”. selain itu font serif sendiri memiliki sejarah mengenai perkembangan peminat ilmu alam pada zaman garamond bahwa font tersebut sangat cocok
dalam
penulisan
ilmiah,
sehingga
meningkatkan
jumlah
peminatnya. 6. Pengembangan pada aplikasi selanjutnya menggunakan tema tertentu, agar aplikasi ini menjadi lebih menarik. Penambahan fitur ilusi optik juga disarankan oleh siswa, agar mereka bisa belajar sambil bermain. 7. Perancangan dapat dikembangkan melalui konsep lain pada fisika, seperti tata surya, gaya, listrik, magnet, dll.
!
!
DAFTAR PUSTAKA Literature Galitz, Wilbert O. 2007. The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, Third Edition. Canada: Wiley Publishing.
Moule, Jodie. 2012. Killer UX Design. Australia: Site Point.
Cao, Jerry, dkk. 2015. Web UI Design for Human Eye, Part 1. Poland: UXpin Inc.
Cao, Jerry, dkk. 2015. Interaction Design Best Practices: Mastering Time, Responsiveness, and Behaviour. Poland: UXpin Inc.
Nurachmandani, Setya & Samsulhadi, Samson. 2010. Ilmu Pengetahuan Alam SMP/Mts (Terpadu). Jakarta: Grahadi.
Zubaidah, Siti, dkk. 2014. 2014. Buku Guru IPA SMP/MTs. Jakarta: Kementrian Pendidikan dan Kebudayaan.
Zubaidah, Siti, dkk. 2014. 2014. Buku Siswa IPA SMP/MTs. Jakarta: Kementrian Pendidikan dan Kebudayaan.
Journal Endin Kamiludin, Upaya Peningkatan Keterampilan Proses dan Pemahaman Konsep IPA(Fisika) Melalui Pendekatan Guided Discovery Iquiry Laboratory Lesson Siswa Kelas VIII.
Presentation Narayan, Jayan. 2014. UX & UI: Injecting Brand Personality. [PowerPoint Slide]. http://www.slideshare.net/jn4deeps/ux-design-ui-design-injecting-a-brandpersona/33-merging_similar_functions_instead_offragmenting, diakses pada 19 Desember pukul 10.20.
!
103!
104!
Website Huffingtonpost .Social App in Education. Written by Suren Ramassubu http://www.huffingtonpost.com/suren-ramasubbu/social-apps-ineducation_b_9518486.html diakses pada 19 Desember pukul 11:56. Smashing Magazines. Color Theory for Designers, Part 1: The Meaning Of Color. Written By Cameron Chapman. Published On Janusry 28th, 2010. https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1the-meaning-of-color/, diakses pada tanggal 17 Januari 2016 pukul 01.23. UX Booth. Complete Beginner’s Guide to Interaction Design. Written By UX Booth Editorial Team. Published On October 27th, 2015. http://www.uxbooth.com/articles/complete-beginners-guide-to-interactiondesign/, Diakses pada tanggal 20 Desember Pukul 01.17. UXpin. 5 Creative Mobile UI Patterns for Navigation. Written By Jerry Cao. https://www.uxpin.com/studio/blog/5-creative-mobile-ui-patterns-navigation/, Diakses pada 20 Desember Pukul 02.18.
!
105!
Lampiran I Kuisioner AIO siswa Sekolah : SMPN 1 SURABAYA Kelas : VII, VIII, IX Jumlah siswa: 99 Kepada yang terhormat saudara/i responden. Dalam rangka riset mengenai perancangan media kreatif pembelajaran fisika SMP. Saya Virnanda Rayandini mahasiswa semester 8 Jurusan Desain Produk Industri, ITS memohon bantuan anda untuk mengisi kuisioner ini. Dalam kuisioner ini tidak ada jawaban benar atau salah. Untuk itu, saya mengharapkan jawaban yang sejujurnya dan yang paling sesuai dengan jawaban pribadi anda. Identitas dan jawaban dirahasiakan dan hanya digunakan untuk kepentingan riset. Terimakasih atas bantuannya :) 1. jenis kelamin a. laki laki b. perempuan 2. umur a. < 11 tahun b. 11-14 tahun c. >14 tahun 3. kelas a. VII b. VIII c. IX 4. Apakah anda menyukai pelajaran Fisika a. ya b. tidak 5. apakah fisika merupakan salah satu pelajaran yang sulit dimengerti ? a. ya b. tidak 6. Bagaimana cara anda agar bisa mengerti dengan pelajara Fisika a. cukup mendengarkan penjelasan guru b. aktif bertanya dikelas c. mengikuti bimbel/les privat
!
106!
d. mencari sumber lain untuk mempelajari fisika (website, dll) e. lainnya ….
7. Apakah metode yang anda lakukan untuk mempelajari fisika, sudah cukup membantu? a. ya b. tidak 8. Menurut anda, apa yang menyebabkan fisika menjadi pelajaran yang sulit dimengerti ? *bisa pilih lebih dari satu a. kurangnya jam pelajarn fisika di kelas b. cara mengajar guru yang kurang jelas dan menarik c. terlalu banyak rumus yang harus diingat d. lainnya …… 9. Apakah anda suka belajar fisika saat ada waktu senggang dirumah ? a. ya b. tidak 10. kapan saja anda menyisihkan waktu untuk mempelajari fisika saat diluar jam sekolah ? a. setiap hari b. saat besok ada pelajaran fisika di sekolah c. saat besok ada ulangan d. lainnya ….. 11. Berapa lama anda menyisihkan waktu untuk mempelajari fisika diluar jam sekolah? a. <10 menit b. 10 menit-1 jam c. >1jam 12. hal apa yang anda lakukan sembari belajar fisika diluar jam sekolah? a. tidak ada b. menonton tv c. bermain gadget d. lainnya ….. 13. hal apa yang anda lakukan saat tidak bisa mengerjakan latihan soal fisika diluar jam sekolah? a. berhenti mengerjakan, dan focus ke hal lain(main hp, dll) b. menelfon teman yang bisa membantu mengerjakan soal c. menanyakan kepada guru fisika keesokan harinya d. lainnya …..
!
107!
Hasil Kuisioner AIO Siswa Interest siswa terhadap fisika 60! 50! 40! 30! 20! 10! 0! ya!
tidak!
Aktifitas siswa saat belajar fisika
tidak!ada! 1!
2! 2! 6!
menonton!tv!
16! 21!
50!
bermain!gadget! tergantung! mendengarkan!musik! belajar!pelajaran!unas! lainnya!
!
108!
Hal yang dilakukan siswa sat kesulitan belajar fisika
berhenti!mengerjakan,! fokus!ke!hal!lain! menelfon!teman! menanyakan!pada!guru! mencari!tahu!di!internet! cari!referensi!di!buku! minta!bantuan!orang! yang!lebih!pintar!
Waktu siswa belajar fisika
<10!menit! 10!menit!L!1!jam! >1!jam!
!
109!
setiap!hari! 1! 4! 2! 1! 2! 9!
saat!besok!ada!?isika! 38!
saat!besok!ulangan!
41!
saat!ada!niat! saat!tidak!mengerti! pelajarannya! saat!ada!waktu!senggang!
Kesimpulan Ditengah jadwal siswa yang semakin padat, siswa diharuskan untuk mengerti beberapa pelajaran eksak demi mempersiapkan diri untuk Ujian Nasional, padahal dalam memahami fisika tidak semua siswa dapat dengan mudah untuk mengerti. Untuk memahami pelajaran fisika terdapat beberapa siswa yang memilih untuk les, sedangkan untuk siswa yang tidak mengikuti les harus kesusahan dalam memahami pelajaran tersebut. Dikarenakan tingginya waktu siswa dalam menggunakan gadget dalam bermain ataupun belajar perancang memutuskan untuk menggunakan media aplikasi sebagai media pendukung pembelajaran fisika dalam perancangan ini.
!
110!
Kuisioner materi fisika paling sulit bagi siswa Sekolah : SMPN 1 Surabaya Jumlah Siswa : 98 Kepada! yang! terhormat! saudara/i! responden.! Dalam! rangka! riset! mengenai! perancangan! media! kreatif! pembelajaran! fisika! SMP.! Saya! Virnanda! Rayandini! mahasiswa! semester! 8! Jurusan! Desain! Produk! ! Industri,! ITS! memohon!bantuan!anda!untuk!mengisi!kuisioner!ini.! ! Dalam! kuisioner! ini! tidak! ada! jawaban! benar! atau! salah.! Untuk! itu,! saya! mengharapkan! jawaban! yang! sejujurnya! dan! yang! paling! sesuai! dengan! jawaban! pribadi! anda.! Identitas! dan! jawaban! dirahasiakan! dan! hanya! digunakan!untuk!kepentingan!riset.! ! Terimakasih!atas!bantuannya!:)! ! 14. jenis!kelamin! c. laki!laki! d. perempuan! ! 15. umur!! d.
>14!tahun!
! 16. kelas! d. VII! e. VIII! f. IX! ! 17. Berilah! urutan! angka! dari! 1L5! untuk! menentukan! lima! bab! tersulit! dalam!pelajaran!fisika!menurut!anda! !
(!!!)!!pengukuran!
!
(!!!)!!zat!dan!wujudnya!
!
111!
!
(!!!)!!suhu!dan!pemuaian!
!
(!!!)!!kalor!
!
(!!!)!!gerak!lurus!
!
(!!!)!!gerak!dan!hukum!newton!
!
(!!!)!!tekanan!
!
(!!!)!!usaha,!energy!dan!pesawat!sederhana!
!
(!!!)!!getaran!dan!gelombang!
!!
(!!!)!!bunyi!
!
(!!!)!!cahaya!optic!geometris!dan!alat!optic!
!
(!!!)!!listrik!statis!
!
(!!!)!listrik!dinamis!
!
(!!!)!!kemagnetan!dan!induksi!elektromagnetik!
!
(!!!)!!tata!surya!
! 18. mengapa!bab!tersebut!menurut!anda!menjadi!bab!yang!paling!sulit?! a. terlalu!banyak!rumus! b. sulit!di!bayangkan!! c. kurang!penjelasan! d. lainnya!!……!
!
!
112!
Hasil!kuisioner!materi!fisika!tersulit!bagi!siswa!
Chart!Title! kemagnetan!dan! induksi! elektromagnetik! 12%!
pengukuran! 0%!
zat!dan! wujudnya! 2%!
tata!surya! 8%!
suhu!dan! pemuaian! 3%! kalor! gerak!lurus! 4%! 5%!
gerak!dan! hukum!newton! 6%! tekanan! 4%!
listrik!dinamis! 10%!
listrik!statis! 6%!
cahaya!optik! geometris!dan!alat! optik! 22%!
bunyi! 5%!
usaha,energi! dan!pesawat! sederhana! 6%! getaran!dan! gelombang! 7%!
!
Kesimpulan Dari hasil kuisioner tersebut dapat dilihat bahwa cahaya optik geometris dalat optik merupakan pelajaran yang paling sulit dimengerti oleh siswa karena sulit untuk divisualisasikan dalam imajinasi siswa. Oleh karena itu penulis menjadikan materi cahaya dan alat optik sebagai startup dari perancangan aplikasi fisika ini.
!
113!
Lampiran II Depth Interview konten Narasumber : Ibu Purwanita, Guru Fisika SMPN 1 Surabaya
1. Bagaimana Kurikulum pembelajaran Fisika pada tahun ini bu? Kurikulum pada tahun ini masih mengikuti kurikulum 2013. Kurikulum pada tahun ini lebih mudah daripada tahun 2009. Tetapi pada kurikulum ini siswa diajarkan materi baru pada fisika yaitu sistem tata surya.
2. Metode pengajaran seperti apa yang ibu terapkan saat mengajar bu? Saat mengajar bisanya saya mengadakan praktek langsung terhadap beberapa materi yang diajarkan, tetapi terdapat beberapa materi yang tidak praktek langsung sehingga terkadang saya menggunakan video-video animasi tentang materi tersebut. Kebanyakan untuk memperoleh video tersebut, saya mencari melalui website edukasi untuk fisika khususnya.
3. Bagaimana respon siswa/i saat ibu memberikan materi baru untuk diajarkan? Saat ada materi baru, tidak semua siswa/i merasa tertari atau semangat, karena kemampuan anak-anak memang berbeda-beda. Ada yang masih belum bisa
!
114!
materi yang lalu tetapi mereka dipaksa harus menerima materi baru, ada juga yang sudah belajar dari tempat les materi yang belum diajarkan, sehingga responnya bermacam-macam. Biasanya saya membuka waktu untuk konsultasi siswa/i yang merasa kesulitan terhadap pelajaran fisika. Dikarenakan jadwal siswa/i yang padat, terkadang tidak ada siswa/i yang menggunakan waktu untuk konsultasi kepada saya atau guru yang lain.
4. Menurut ibu materi apa yang paling sulit dimengerti oleh siswa? Materi yang paling sulit dipahami oleh murid itu Cahaya dan alat optik, sama tata surya soalnya masih baru pada kurikulum ini.
5. Untuk perancangan aplikasi ini saya ingin mengambil materi cahaya dan alat optik bu, menurut ibu apa yang membuat materi tersebut paling sulit dipahami anak-anak? Fisika itu kan identik dengan rumus mbak, jadi anak-anak kadang itu hafal rumusnya tapi prinsipnya tidak mbak, jadi itu yang membuat anak-anak cepet lupa sama materi yang uda diberikan. Untuk Cahaya sendiri itu memang sudah cukup rumit mbak, banyak tahapannya. Jenis-jenis sifat cahaya itu sendiri teridiri dari tiga dan memang harus dapat dipahami sebelum melanjutkan ke materi selanjutnya yaitu alat optik. Selain itu rumus yang terdapat dalam materi ini cukup banyak. Siswa harus dapat mengerti terlebih dahulu sifat lensa terhadap cahaya, untuk dapat mengerjakan soal-soal tentang materi ini, selain dengan menggunakan rumus.
6. Menurut ibu dari materi cahaya dan alat optik, apa yang paling penting untuk dipahami seorang siswa/i? Rumus itu ya sudah pasti ya mbak, tapi ada yang lebih penting lagi mbak, yaitu prinsip dasar dari cahaya dan alat optik itu sendiri. Seperti misalnya cahaya itu bagaimana, lalu sifat-sifat cahaya itu seperti apa yang nantinya itu bakal sampai ke pemakaian rumus itu sendiri kaya missal pada cermin lensa
!
115!
dll. Kalau alat optik sih, minimal mereka paham bagian-bagian dan cara kerjanya.
7. Apa ibu bersedia menjabarkan konten materi dasar yang penting bagi siswa dalam memhamai materi ini bu? Ohiya mbak, jadi pada Cahaya terdapat 3 sifat yaitu, perambatan, pemantulan, dan pembiasan. Nah, mereka harus bisa memahami sifat-sifat tersebut. Setelah mereka paham pada pemantulan dan pembiasan terdapat cermin pada pemantulan dan lensa pada pembiasan. Disitu mereka harus mengerti sifat cahaya dan cermin atau lensa yang saling berhubungan untuk pembentukan bayangan. Pada pembentukan bayangan siswa/i harus memahami 3 sinar istimewa pada setiap jenis cermin dan lensa, barulah mereka dapat melukis bayangan pada cermin ataupun lensa menggunakan sinar-sinar istimewa tersebut. Untuk Alat optik mereka cukup memahami bagian-bagiannya dan cara kerjanya. Untuk mata alangkah lebih baiknya apabila mereka juga dapat memahami cara kerja mata yag berkelainan dan cara memeperbaikinya menggunakan lensa.
8. Menurut ibu apa aplikasi pembelajaran dapat mendukung pembelajaran siswa dalam memhami fisika? Iya bisa sekali, selama saya mengajar bisanya saya menggunakan video-video melalui website-website yang ada di internet, anak-anak jadi suka apalagi kalau menggunakan animasi. Untuk aplikasi mbak saya rasa ditambahkan video animasi bisa dapat membuat siswa semakin tertarik, apalagi kalau kontennya sudah lengkap. Jadwal siswa sekarang kan sudah pada ya mbak, alangkah baiknya kalo mereka bisa belajar sendiri tanpa harus ikut les tambahan. Kalo menggunakan aplikasi kan kayanya bisa ya mbak ya.
!
116!
Lampiran III Focus Group Discussion Tujuan : mengetahui konten aplikasi yang pas bagi pengguna Pendamping
:
Bu Purwanita, Guru fisika SMPN 1 Surabaya
Anggota
:
Rizky , Siswa SMPN 1 Surabaya Zara, Siswi SMPN 1 Surabaya Dimas, Siswa SMPN 1 Surabaya Anisya, Siswi SMPN 1 Surabaya Alya, Siswi SMPN 1 Surabaya Selin, Siswi SMPN 1 Surabaya
Karakteristik anggota (siswa/i) memiliki kemampuan yang berbeda-beda terhadap fisika.
Kesimpulan :
a. Menurut Rizky, alat optik merupakan bagian tersulit dalam materi yang diambil dalam perancangan ini, karena sistem kerja alat optik itu sendiri merupakan gabungan dari sifat-sifat lensa dan cermin yang terdapat pada materi cahaya. Sehingga cukup sulit bagi rizky untuk dapat langsung memahami materi alat optik tersebut.
!
117!
b. Menurut Zara, dia kurang dapat memahami penggambaran dalam pembentukan bayangan pada cermin maupun lensa. c. Menurut Dimas, Penentuan sifat-sifat bayangan pada cermin maupun lensa itu sulit. d. Menurut Anisya, kelainan pada mata merupakan bagian yang paling sulit. e. Alya sependapat dengan Dimas f. Menurut Selin, pengaplikasian rumus cukup membingungkan. Banyaknya rumus pada materi ini membuat selin bingung untuk menentukan rumus apa yang harus dipakai untuk memecahkan masala tertentu pada materi ini. g. Peta Konsep atau struktur informasi yang digunakan pada materi cahaya akan dipisah berdasarkan sifat-sifatnya yang nantinya akan terdapat penjelasan tentang keistimewaan pada masing-masing sifat. Seperti pada pemantulan cahaya pada cermin terdapat 3 sinar istimewa, dan bagaimana bayangan terbentuk melalui 3 sinar istimewa itu, sama seperti pembiasan. Lalu pada alat optik menu nya akan dipisah berdasarkan jenis-jenis alat optik dimana pada masing-masing alat optik tersebut akan dijelaskan bagan, fungsi, dan cara kerjanya.
!
118!
Lampiran IV Wireframing Aplikasi ! !
!
!
119!
BIODATA
Virnanda Rayandini lahir di Jakarta pada tanggal 13 September 1994. Merupakan putri pertama dari dua bersaudara. Pendidikan formal yang telah diselesaikan adalah SDI AL-Fajar, SMPI AL-Fajar, SMAN 5 Bekasi, melanjutkan ke jenjang pendidikan lebih tinggi dengan mengikuti SNMPTN dan jalur PKM sehingga resmi menjadi mahasiswa ITS di Jurusan Desain Produk Industri, Prodi Desain Komunikasi Visual, FTSP - ITS pada tahun 2012. Judul yang diangkat oleh penulis adalah Perancangan Aplikasi Interaktif Fisika Cahaya dan Alat Optik sebagai Media Pendukung Pembelajaran Siswa SMP. Alasan penulis memilih judul ini adalah memberikan fasilitas pendukung pembelajaran fisika khususnya cahaya dan alat optik agar lebih mudah dipahami, dan sebagai persiapan siswa untuk menghadapi jenjang berikutnya. Kritik dan saran mengenai perancangan ini dapat didiskusikan lebih lanjut dengan menghubungi penulis melalui
[email protected]. !
!
