PERANCANGAN ULANG TAMPILAN
USER INTERFACE APLIKASI HOAX BUSTER TOOLS
Laporan Tugas Akhir
Ditulis sebagai syarat untuk memperoleh gelar Sarjana Desain (S.Ds.)
Nama : Veren Shevia Pakuan Thong
NIM : 00000013730
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG
2021
ii
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Saya yang bertanda tangan di bawah ini:
Nama : Veren Shevia Pakuan Thong
NIM : 00000013730
Program Studi : Desain Komunikasi Visual Fakultas : Seni dan Desain
Universitas Multimedia Nusantara Judul Tugas Akhir :
PERANCANGAN ULANG TAMPILAN
USER INTERFACE APLIKASI HOAX BUSTER TOOLS
dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas Multimedia Nusantara maupun di perguruan tinggi lainnya.
Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali arahan pembimbing akademik dan narasumber.
Demikian surat Pernyataan Originalitas ini saya buat dengan sebenarnya, apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan gelar (S.Ds.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang berlaku di Universitas Multimedia Nusantara.
Tangerang, 18 Januari 2021
Veren Shevia Pakuan
iv
KATA PENGANTAR
Alasan penulis tertarik dengan topik mengenai aplikasi yang diluncurkan MAFINDO yaitu hoax buster tools, sebuah aplikasi yang dapat memverifikasi kebenaran berita adalah karena maraknya penyebaran hoaks di Indonesia terutama pada media sosial. Karena nila setitik rusak susu sebelangga, peribahasa tersebut sesuai dengan fenomena penyebaran hoaks di Indonesia dimana hanya dengan menyebarkan sebuah informasi yang menyesatkan dapat memberikan dampak sangat besar bahkan memberikan kerugian pada masyarakat. Memanipulasi pemikiran individu atau segolongan masyarakat, mencemarkan nama baik, hingga memecah persatuan bangsa.
Karena alasan itulah penulis merasa topik mengenai aplikasi ini perlu diangkat dan dibahas lebih lanjut, karena dengan demikian diharapkan dapat membantu menekan penyebaran hoaks di Indonesia.
Ucapan terima kasih penulis panjatkan terhadap pihak-pihak yang telah ikut memberikan bantuan dan dukungan dalam pembuatan proposal ini, yaitu :
1. Mohammad Rizaldi, S.T., M.Ds. selaku ketua program studi Desain Komunikasi Visual, Universitas Multimedia Nusantara.
2. Adhreza Brahma, M.Ds. selaku dosen pembimbing Tugas Akhir yang telah dengan sabar membimbing dan banyak membantu penulis.
3. Muhammad Khairil salah satu pemeriksa fakta MAFINDO selaku narasumber yang memberikan informasi bagi penulis.
4. Keluarga yang mendukung dengan kooperatif memberikan bantuan dalam proses pengerjaan dan mendoakan kelancaran Tugas Akhir.
v
5. Teman-teman terutama Delvia Kristalbella, Marchella Yolanda, Melissa, Nicodemus Widjaja, dan Velyan Theresa yang telah menjadi dukungan moral bagi penulis dan sudah banyak memberikan bantuan.
Tangerang, 18 Januari 2021
Veren Shevia Pakuan Thong
vi
ABSTRAKSI
Aplikasi Hoax Buster Tools merupakan aplikasi yang diluncurkan oleh organisasi masyarakat sipil Masyarakat Anti Fitnah Indonesia (MAFINDO) pada tahun 2018.
Alasan penulis memilih topik ini adalah karena maraknya penyebaran hoaks di Indonesia terutama pada media sosial, aplikasi tersebut dapat memudahkan masyarakat dalam memverifikasi kebenaran sebuah berita namun sayangnya kurangnya kemampuan masyarakat dalam menggunakannya membuatnya menjadi tidak efektif. Yang menjadi rumusan masalah penulis yaitu bagaimana cara merancang tampilan antarmuka pengguna yang dapat memudahkan masyarakat menggunakan aplikasi hoax buster tools. Metode penelitian yang digunakan yaitu kualitatif.
Kata kunci : Aplikasi, hoax buster tools, media sosial
vii
ABSTRACT
Hoax Buster Tools is an application launched by civil society organizations MAFINDO back in 2018. The reason why the author chose this topic was because of the widespread of hoax in Indonesia, especially on social media, the application can help the public to verify the truth. Unfortunately, the lack of people's ability to use it makes it ineffective. The formulation of the problem of the author is how to design user interface that can facilitate the public to use the hoax buster tools application. The research method used is qualitative.
Keywords: Aplication, hoax buster tools, social media
viii
DAFTAR ISI
LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ... II HALAMAN PENGESAHAN TUGAS AKHIR ... III KATA PENGANTAR ... IV ABSTRAKSI ... VI ABSTRACT ... VII DAFTAR ISI ... VIII DAFTAR GAMBAR ... XI DAFTAR TABEL ... XVI DAFTAR LAMPIRAN ...XVII
BAB I PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Rumusan Masalah ... 2
1.3. Batasan Masalah ... 2
1.4. Tujuan Tugas Akhir ... 5
1.5. Manfaat Tugas Akhir ... 5
BAB II TINJAUAN PUSTAKA ... 6
2.1. Teori Perancangan ... 6
2.1.1. Elemen Visual Desain ... 6
2.1.2. Prinsip Desain ... 10
ix
2.1.3. Layout ... 13
2.1.4. Tipografi ... 16
2.2. User Interface ... 17
2.2.1. Elemen UI ... 17
BAB III METODOLOGI ... 22
3.1. Metodologi Pengumpulan Data ... 22
3.1.1. Wawancara Dengan Muhammad Khairil, Pemeriksa Fakta MAFINDO ... 22
3.1.2. Focus Group Discussion (FGD) ... 25
3.1.3. Studi Eksisting ... 28
3.1.4. Observasi Aplikasi Hoax Buster Tools ... 34
3.1.5. Kuesioner ... 51
3.2. Metodologi Perancangan ... 61
BAB IV STRATEGI DAN ANALISIS PERANCANGAN ... 63
4.1. Strategi Perancangan ... 63
4.1.1. UI Objectives ... 63
4.1.2. UI Spesification ... 64
4.1.3. Information Architecture ... 64
4.1.4. UI Design ... 71
4.1.5. Perancangan Media Pendukung ... 87
4.1.6. Perancangan Merchandise ... 90
4.1.7. Perancangan Gimmick ... 91
x
4.2. Analisis Perancangan ... 96
4.2.1. Analisis rancangan Aplikasi ... 96
4.2.2. Analisis rancangan media pendukung ... 103
4.2.3. Analisis rancangan merchandise ... 105
4.2.4. Analisis rancangan gimmick ... 108
4.3. Budgeting ... 109
BAB V PENUTUP ... 111
5.1. Kesimpulan ... 111
5.2. Saran ... 112
DAFTAR PUSTAKA ... XIV
xi
DAFTAR GAMBAR
Gambar 2.1. Bentuk-bentuk yang dapat dihasilkan bidang ... 7
Gambar 2.2. Jenis-jenis Tekstur ... 8
Gambar 2.3. Kombinasi warna pada color wheel ... 9
Gambar 2.4. Aspek-aspek yang mempengaruhi beban visual ... 11
Gambar 3.1. Wawancara dengan Muhammad Khairil ... 25
Gambar 3.2. Focus Group Discussion dengan Mahasiswa UMN ... 27
Gambar 3.3. Fitur-fitur yang terdapat pada HBT ... 28
Gambar 3.4. Mesin Pencarian kolaborasi MAFINDO dengan Google ... 29
Gambar 3.5. Tampilan aplikasi Anti Hoax ... 30
Gambar 3.6. Fitur yang dimiliki aplikasi Anti Hoax ... 30
Gambar 3.7. Tampilan fitur yang dimiliki aplikasi Anti Hoax Search ... 32
Gambar 3.8. Wireflow Aplikasi HBT ... 34
Gambar 3.9. Wireflow Aplikasi HBT ... 35
Gambar 3.10. Wireflow Aplikasi HBT ... 36
Gambar 3.11. Tabel Fitur dan Fungsi yang terdapat pada aplikasi HBT ... 38
Gambar 3.12. Halaman awal aplikasi ... 39
Gambar 3.13. Daftar fitur dan tools yang ada pada aplikasi ... 40
Gambar 3.14. Tools lapor hoax ... 42
Gambar 3.15. Tools Anti Hoax Search Engine ... 43
Gambar 3.16. Tools Pencarian Hoax ... 44
Gambar 3.17. Tampilan halaman artikel cek fakta ... 46
Gambar 3.18. Tampilan letak tombol share dan favorit pada artikel ... 47
xii
Gambar 3.19. Tampilan tools pada fitur alat cek gambar ... 48
Gambar 3.20. Tampilan tools pada fitur alat cek video ... 48
Gambar 3.21. Tampilan tools yang tidak bisa digunakan lagi ... 49
Gambar 3.22. Tampilan tools yang wilayahnya berpusat di US ... 49
Gambar 3.23. Tampilan fitur spesial berupa permainan tentang hoaks ... 50
Gambar 3.24. Grafik Usability Test Aplikasi HBT ... 52
Gambar 3.25. Grafik kendala responden pada Usability Test HBT ... 52
Gambar 3.26. Grafik pemahaman responden terhadap fitur HBT ... 53
Gambar 3.27. Grafik pemilihan fitur tersulit pada HBT ... 53
Gambar 3.28. Grafik tanggapan responden terhadap HBT ... 54
Gambar 3.29. Grafik penilaian terhadap tampilan HBT ... 55
Gambar 3.30. Grafik penilaian terhadap kejelasan icon HBT ... 56
Gambar 3.31. Grafik penilaian terhadap keterangan tools HBT ... 56
Gambar 3.32. Grafik penilaian kepraktisan melakukan task pada HBT ... 57
Gambar 3.33. Grafik penilaian proses melakukan task pada HBT ... 57
Gambar 3.34. Grafik penilaian penggunaan fitur HBT... 57
Gambar 3.35. Grafik penilaian hierarki elemen pada HBT ... 58
Gambar 3.36. Grafik pengaruh tampilan HBT terhadap motivasi pengguna ... 59
Gambar 3.37. Grafik pengaruh tampilan HBT terhadap motivasi pengguna ... 59
Gambar 3.38. Proses perancangan tampilan UI ... 61
Gambar 4.1. Persona pengguna aplikasi ... 65
Gambar 4.2. Sitemap aplikasi HBT ... 66
Gambar 4.3. Flowchart Aplikasi HBT ... 67
xiii
Gambar 4.4. Mindmap aplikasi HBT ... 68
Gambar 4.5. Moodboard kata kunci provoke... 69
Gambar 4.6. Moodboard kata kunci visionary... 70
Gambar 4.7. Moodboard kata kunci personalised ... 70
Gambar 4.8. Lo-fi Wireframe aplikasi HBT ... 71
Gambar 4.9. Pemilihan warna yang digunakan untuk aplikasi HBT ... 73
Gambar 4.10. Font Alternatif ... 74
Gambar 4.11. Font pilihan ... 74
Gambar 4.12. Contoh Pengaplikasian Font pada aplikasi ... 75
Gambar 4.13. Proses stilasi menjadi skesta dari referensi ... 76
Gambar 4.14. Grid yang digunakan pada icon ... 76
Gambar 4.15. Pengaplikasian grid pada icon navigasi bawah ... 76
Gambar 4.16. Hasil akhir dari icon navigasi pada tab bar ... 77
Gambar 4.17. Pengaplikasian icon pada wireframe ... 77
Gambar 4.18. Sketsa icon kategori misinformasi ... 78
Gambar 4.19. Hasil akhir icon kategori misinformasi ... 78
Gambar 4.20. Pengaplikasian icon pada wireframe ... 79
Gambar 4.21. Referensi pakaian karakter ... 80
Gambar 4.22. Stilasi karakter ... 80
Gambar 4.23. Alternatif ilustrasi karakter... 81
Gambar 4.24. Hasil akhir ilustrasi karakter ... 81
Gambar 4.25. Pengaplikasian ilustrasi karakter pada aplikasi ... 82
Gambar 4.26. Multicollumn grid pada layar 1080x1920 ... 83
xiv
Gambar 4.27. Pengaplikasian grid pada high fidelity wireframe ... 83
Gambar 4.28. Wireflow Aplikasi ... 85
Gambar 4.29.Wireflow Aplikasi Hoax Buster Tools ... 86
Gambar 4.30. Sketsa instastory ... 87
Gambar 4.31. Grid untuk instastory ... 88
Gambar 4.32. Pengaplikasian grid pada rancangan instastory ... 88
Gambar 4.33. Pengaplikasian grid pada rancangan unggahan instagram ... 88
Gambar 4.34. Pengaplikasian grid pada filter TikTok ... 89
Gambar 4.35. Hasil akhir dari rancangan filter TikTok ... 90
Gambar 4.36. Hasil Perancangan kaos dan kotak hadiah ... 91
Gambar 4.37. Hasil Perancangan pin ... 91
Gambar 4.38. Sketsa kelompok stiker ... 92
Gambar 4.39. Pengaplikasian grid pada stiker... 92
Gambar 4.40. Digitalisasi dari sketsa stiker ... 93
Gambar 4.41. Template tema line pada panduan ... 94
Gambar 4.42. Sketsa perancangan tema Line ... 94
Gambar 4.43. Hasil akhir dari tema line ... 95
Gambar 4.44. Sketsa perancangan twibon ... 95
Gambar 4.45. Pengaplikasian grid pada twibon ... 96
Gambar 4.46. Halaman pendaratan aplikasi ... 97
Gambar 4.47. Halaman beranda aplikasi ... 99
Gambar 4.48. Halaman profile dan fitur aplikasi ... 100
Gambar 4.49. Halaman MAFINDO dan Lapor hoaks ... 101
xv
Gambar 4.50. Halaman artikel cek fakta ... 102
Gambar 4.51. Unggahan instagram ... 103
Gambar 4.52. Mock up salah satu unggahan instagram ... 103
Gambar 4.53. Panel komik strip mingguan ... 104
Gambar 4.54. Hasil rancangan pin dan backing card ... 106
Gambar 4.55. Hasil rancangan kotak hadiah kaos ... 107
Gambar 4.56. Hasil rancangan kaos ... 107
xvi
DAFTAR TABEL
Tabel 1.1. Segmentasi Khalayak Sasaran Primer... 3
Tabel 1.2. Segmentasi Khalayak Sasaran Sekunder ... 4
Tabel 3.1. Tabel analisis SWOT Hoax Buster Tools ... 29
Tabel 3.2. Tabel analisis SWOT Aplikasi Anti Hoax ... 31
Tabel 3.3. Tabel analisis SWOT Aplikasi Anti Hoax Search ... 33
Tabel 4.1. Tabel segmentasi target pengguna ... 63
Tabel 4.2. Tabel Budgeting Perancangan ... 109
xvii
DAFTAR LAMPIRAN
LAMPIRAN A: FORM BIMBINGAN TUGAS AKHIR ... XVI LAMPIRAN B: TRANSKRIP WAWANCARA ... XVIII LAMPIRAN C: KUESIONER ... XXIII LAMPIRAN D: USER INTERFACE APLIKASI ... XXVIII
