PERANCANGAN ULANG TAMPILAN

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