View
15
Download
0
Category
Preview:
Citation preview
i
PERANCANGAN USER INTERFACE DAN USER EXPERIENCE PADA
APLIKASI MOBILE INDOSPORT DENGAN MENGGUNAKAN
PENDEKATAN USER CENTERED DESIGN
PROYEK STUDI
Untuk memperoleh Gelar Sarjana Seni
pada Universitas Negeri Semarang
Oleh:
Muhammad Raffi Fadli
2411415077
SENI RUPA (KONSENTRASI DKV)
FAKULTAS BAHASA DAN SENI
UNIVERSITAS NEGERI SEMARANG
2020
ii
iii
iv
MOTTO DAN PERSEMBAHAN
“Boleh jadi kamu membenci sesuatu, padahal ia amat baik bagimu, boleh
jadi (pula) kamu menyukai sesuatu, padahal ia amat buruk bagimu, Allah
mengetahui, sedang kamu tidak mengetahui” (QS. Al-Baqarah/2:216)
PERSEMBAHAN
Proyek studi ini dipersembahkan kepada:
1. Ibu, Ayah, Kakak, Adik serta keluarga tersayang atas segala doa, dukungan
serta semangat yang terus hadir dan tidak pernah putus.
2. Teman-teman Seni Rupa 2015 yang selalu memberikan canda dan tawa.
3. Semua orang yang saya kenal tanpa terkecuali.
4. Almamaterku, Jurusan Seni Rupa, Fakultas Bahasa dan Seni.
v
PRAKATA
Puji syukur kehadirat Allah SWT, atas rahmat dan karunia-Nya sehingga
penulis dapat menyelesaikan proyek studi yang disusun untuk memenuhi salah satu
syarat akademis untuk memperoleh gelar Sarjana Seni Universitas Negeri
Semarang.
Dalam penulisan proyek studi ini penulis telah banyak menerima
bimbingan, dorongan dan bantuan dari berbagai pihak, maka pada kesempatan ini
penulis menyampaikan terima kasih yang sebesar-besarnya kepada:
1. Prof. Dr. Fathur M.Hum, Rektor Universitas Negeri Semarang yang telah
memberikan kesempatan kapada penulis untuk menempuh studi dengan
segala kebijaksanaannya.
2. Dr. Sri Rejeki Urip, M.Hum, Dekan Fakultas Bahasa dan Seni Universitas
Negeri Semarang, yang dengan kebijakannya sehingga penulis dapat
menyelesaikan studi dengan baik.
3. Bapak Dr. Syakir, M.Sn., Ketua Jurusan Seni Rupa, Fakultas Bahasa dan
Seni, Universitas Negeri Semarang yang telah memberikan fasilitas
administratif dalam penyusunan proyek studi ini.
4. Bapak Drs. Onang Murtiyoso, M.Sn., selaku dosen wali prodi DKV S1
angkatan 2015 atas perhatian dan kepeduliannya sehingga penulis dapat
menyelesaikan semua mata kuliah dengan baik.
5. Wandah Wibawanto, S.Sn., M.Ds., selaku dosen pembimbing I yang telah
memberikan bimbingan, arahan, dan motivasi.
vi
6. Pratama Bayu Widagdo S.Sn., M.Ds., selaku dosen pembimbing II yang
telah memberikan bimbingan, arahan, dan motivasi.
7. Jimmy Hendrawan, selaku Head of Research and Development Indosport
yang telah berkenan memberikan izin, informasi dan bantuannya dalam
proses penulisan Proyek Studi ini.
8. Arief Rahman Hakim, selaku Head of Human Resources Management yang
telah berkenan memberikan izin dan bantuannya dalam penulisan proyek
studi ini.
9. Bapak dan Ibu Dosen Jurusan Seni Rupa Universitas Negeri Semarang yang
telah memberikan ilmu yang bermanfaat bagi penulis, juga menjadi
inspirasi bagi penulis.
10. Ayah, Ibu, Kakak, Adik dan keluarga besar saya yang telah memberikan
kasih saying, doa, dan dukungan selama ini.
11. Teman-teman Seni Rupa 2015 yang selalu memberikan inspirasi, motivasi,
bantuan, dan pengalaman yang teak terlupakan.
12. Semua pihak yang tidak dapat penulis sebutkan satu per satu.
Semarang, Maret 2020
Penulis
Muhammad Raffi Fadli
NIM. 2411415077
vii
SARI
Fadli, Muhammad Raffi. Perancangan User Interface dan User Experience pada
Aplikasi Mobile Indosport dengan Menggunakan Pendekatan User Centered
Design. Proyek Studi, Jurusan Seni Rupa. Fakultas Bahasa dan Seni, Universitas
Negeri Semarang. Pembimbing I Wandah Wibawanto, S.Sn., M.Ds.
Kata Kunci: User Interface, User Experience, Aplikasi Mobile, User Centered
Design
Alasan pemilihan mobile device untuk salah satu pengembangan aplikasi
karena mempermudah, fleksibel dan mudah untuk dibawa dalam melakukan
aktifitas. Solusi yang baik untuk Indosport mengingat perkembangan smartphone
yang semakin maju dan diikuti pula oleh pertumbuhan penggunanya yang pesat di
Indonesia. Tujuan dari proyek studi ini adalah menghasilkan produk berupa
rancangan desain user interface (UI) dan user experience (UX) dalam membantu
mewujudkan aplikasi mobile yang tepat sasaran serta tidak lupa menerapkan
prinsip-prinsip desain komunikasi visual yaitu unity and variety, hierarchy,
contrast, proportion dan balance. Metode perancangan desain UI dan UX ini
melalui beberapa tahap berkarya dengan urutan: proses pra produksi, proses
produksi, dan pasca produksi. Perancangan ini menghasilkan desain UI dan UX
yang dilengkapi dengan user flow, wireframes¸ desain interface, ilustrasi dan
prototipe. Target utama audiens yang dituju untuk aplikasi mobile Indosport adalah
pria 16-30 tahun, maka dari itu dibutuhkan desain yang maskulin dan simpel.
Halaman utama dari aplikasi mobile Indosport adalah News, Activity, Calendar,
serta Profile yang nantinya pada halaman-halaman tersebut terdapat beberapa fitur
yang berbeda dari halaman sebelumnya. Pembuatan UI ini menggunakan beberapa
bahasa rupa seperti medium close up, full shot, long shot, close up dan medium long
shot pada bagian gambar yang terdapat di artikel serta penggambaran gaya bidang
digunakan ke hampir semua elemen visual UI. Menggunakan beberapa prinsip
dalam perancangan yaitu time to learn, speed of performance, rate of errors by
users, retention over time, dan subjective satisfaction. Aspek estetis, teknis dan
komunikasi menjadi cakupan untuk menganalisis UI dan UX aplikasi mobile
Indosport ini. Selain itu bahasa rupa juga diterapkan dalam melakukan analisis UI
dan UX sehingga dapat sesuai dengan konsep awal yang telah dibuat. Bentuk desain
yang dihasilkan nantinya akan didistribusikan langsung kepada divisi Research and
Development dan divisi IT dari Indosport untuk dapat dijadikan sebuah native app
dan dapat dipakai oleh calon pengguna pada platform Android maupun iOS. Hasil
dari testing phase adalah ketika pameran diadakan dimana banyak pengunjung yang
mengapresiasi dan memberikan respon yang baik.
viii
DAFTAR ISI
HALAMAN JUDUL .............................................................................................. I
HALAMAN PENGESAHAN ................................................................................ I
SURAT PERNYATAAN ..................................................................................... II
MOTTO DAN PERSEMBAHAN ...................................................................... III
PRAKATA ............................................................................................................. V
SARI ................................................................................................................... VII
DAFTAR ISI ..................................................................................................... VIII
DAFTAR GAMBAR ........................................................................................ XIII
DAFTAR TABEL ............................................................................................ XVI
BAB I ...................................................................................................................... 1
PENDAHULUAN .................................................................................................. 1
1.1 LATAR BELAKANG ...................................................................................... 1
1.1.1 Alasan Pemilihan Tema ............................................................................. 1
1.1.2 Alasan Pemilihan Jenis Karya ................................................................... 4
1.1.3 Analisis Kebutuhan ................................................................................... 7
1.2 TUJUAN PROYEK STUDI ........................................................................... 13
1.3 MANFAAT ..................................................................................................... 13
BAB II .................................................................................................................. 14
LANDASAN TEORI ........................................................................................... 14
2.1 PERANCANGAN ........................................................................................... 14
2.1.1 Perancangan dalam Lingkup Desain Komunikasi Visual ....................... 14
2.1.1.1 Fungsi Desain Komunikasi Visual ................................................ 16
2.1.1.2 Elemen-Elemen Desain Komunikasi Visual ................................. 17
2.1.1.3 Prinsip-Prinsip Desain Komunikasi Visual ................................... 20
2.1.1.4 Bahasa Rupa .................................................................................. 25
ix
2.2 MEREK (BRAND) .......................................................................................... 28
2.2.1 Merek dalam Lingkup Aplikasi Mobile .................................................. 30
2.2.2 Pengembangan Merek ............................................................................. 31
2.2.3 Tujuan Pengembangan Merek ................................................................. 32
2.2.4 Karakteristik Pengembangan Merek ....................................................... 33
2.3 INTERAKSI SOSIAL ..................................................................................... 34
2.3.1 Bentuk Interaksi Sosial ............................................................................ 35
2.3.2 Interaksi Sosial dalam User Experience .................................................. 36
2.4 APLIKASI MOBILE ....................................................................................... 36
2.4.1 Jenis Aplikasi Mobile .............................................................................. 37
2.4.1.1 Native App ..................................................................................... 38
2.4.1.2 Web App ........................................................................................ 38
2.4.1.3 Hybrid App .................................................................................... 39
2.5 USER INTERFACE (UI) ................................................................................. 39
2.5.1 Strategi Perancangan User Interface ....................................................... 41
2.5.2 Prinsip-Prinsip User Interface ................................................................. 43
2.5.3 Style Guide untuk User Interface ............................................................ 46
2.6 USER EXPERIENCE (UX) ............................................................................. 49
2.7 USER-CENTERED DESIGN .......................................................................... 53
2.8.1 Mengidentifikasi Target Pengguna .......................................................... 54
2.8.2 Mengidentifikasi Kebutuhan Pengguna .................................................. 54
BAB III ................................................................................................................. 56
METODE BERKARYA ..................................................................................... 56
3.1 MEDIA ............................................................................................................ 56
3.1.1 Alat …. .................................................................................................... 56
3.1.2 Teknik ...................................................................................................... 58
3.2 PROSES BERKARYA ................................................................................... 59
3.2.1 Pleliminary Plan ...................................................................................... 61
3.2.1.1 Pencarian Ide ................................................................................. 61
3.2.1.2 Riset (Observasi, Wawancara, dan Studi Pustaka) ........................ 62
x
3.2.1.3 Analisis dan Riset Target Audiens ................................................ 68
3.2.1.4 Analisis SWOT .............................................................................. 73
3.2.1.5 Penentuan Konsep Karya .............................................................. 73
3.2.1.6 Distribusi dan Placement Media ................................................... 81
3.2.2 Proses Pra Produksi ................................................................................. 82
3.2.2.1 Penyusunan User Flow .................................................................. 82
3.2.2.2 Perancangan Wireframe ................................................................ 85
3.2.2.3 Perancangan Guidelines ................................................................ 86
3.2.2.4 Komunikasi dengan Dosen Pembimbing dan Klien ...................... 88
3.2.3 Proses Produksi ....................................................................................... 89
3.2.3.1 Perancangan Ilustrasi ..................................................................... 89
3.2.3.2 Perancangan Desain User Interface .............................................. 90
3.2.3.3 Perancangan Prototype Interaktif .................................................. 95
3.2.3.4 Konsultasi dengan Dosen Pembimbing ......................................... 98
3.2.3.5 Konsultasi dengan Klien ............................................................... 98
3.2.4 Proses Pasca Produksi ............................................................................. 98
3.2.4.1 Perancangan Media Pendukung .................................................... 98
3.2.4.2 Pra Pameran ................................................................................... 99
3.2.4.3 Pameran ......................................................................................... 99
3.2.4.4 Presentasi Desain Akhir ke Klien ................................................ 100
BAB IV ............................................................................................................... 101
DESKRIPSI DAN ANALISIS KARYA .......................................................... 101
4.1 KARYA YANG DIHASILKAN .................................................................. 101
4.1.1 Spesifikasi Karya ................................................................................... 101
4.2 PENDEKATAN ILUSTRASI ...................................................................... 102
4.3 TATA LETAK DAN FUNGSI PADA WIREFRAME ................................. 104
4.4 PETA APLIKASI .......................................................................................... 114
4.5 ANALISIS UI DAN UX APLIKASI MOBILE ............................................ 116
4.5.1 Halaman Landing Page ......................................................................... 117
4.5.1.1 Start Screen ................................................................................. 118
xi
4.5.1.2 Register ............................................................................................... 124
4.5.1.3 Sign In .......................................................................................... 126
4.5.2 Halaman News ....................................................................................... 128
4.5.2.1 Featured ...................................................................................... 130
4.5.2.2 Artikel Featured .......................................................................... 137
4.5.2.3 Transfers News ............................................................................ 139
4.5.2.4 Artikel Transfers ......................................................................... 143
4.5.2.5 Galleries ...................................................................................... 145
4.5.2.6 Artikel Galleries .......................................................................... 150
4.5.2.7 Videos .......................................................................................... 152
4.5.2.8 Artikel Videos .............................................................................. 156
4.5.2.9 Search .......................................................................................... 158
4.5.3 Halaman Activity ................................................................................... 159
4.5.3.1 Countdown ................................................................................... 164
4.5.3.2 Notifications ................................................................................ 165
4.5.4 Halaman Calendar................................................................................. 167
4.5.4.1 Match ........................................................................................... 172
4.5.4.2 Players Stat and Table ................................................................ 174
4.5.5 Halaman Profile..................................................................................... 175
4.5.5.1 Profile Settings ............................................................................ 179
4.5.5.2 Friends ......................................................................................... 180
4.5.5.3 Badges ......................................................................................... 182
4.6 ANALISIS MEDIA PENDUKUNG ............................................................. 183
4.6.1 Pin dan Gantungan Kunci ...................................................................... 183
4.6.2 Stiker ..................................................................................................... 186
4.6.3 Instagram Feed ...................................................................................... 188
BAB V ................................................................................................................. 191
PENUTUP .......................................................................................................... 191
5.1 SIMPULAN .................................................................................................. 191
5.2 SARAN ......................................................................................................... 194
xii
DAFTAR PUSTAKA ........................................................................................ 196
LAMPIRAN ....................................................................................................... 202
xiii
DAFTAR GAMBAR
Gambar 1.1 Statistik Pertumbuhan Pengguna Smartphone di Indonesia ........... 2
Gambar 1.2 Kano Model .................................................................................. 10
Gambar 2.1 Proses Komunikasi Visual ............................................................ 15
Gambar 2.2 Contoh Prinsip Unity dan Variety ................................................. 22
Gambar 2.3 Contoh Prinsip Hierarchy ............................................................. 22
Gambar 2.4 Contoh Prinsip Contrast ............................................................... 23
Gambar 2.5 Contoh Prinsip Proportion ........................................................... 24
Gambar 2.6 Contoh Prinsip Balance ................................................................ 25
Gambar 2.7 Bagan Cara Wimba ....................................................................... 27
Gambar 2.8 Bagan Tata Ungkapan .................................................................. 28
Gambar 2.9 Situasi yang Sering Terjadi pada Pengguna ................................. 43
Gambar 2.10 Kurva User Experience .............................................................. 51
Gambar 2.11 Susunan Elemen User Experience .............................................. 51
Gambar 3.1 Logo Indosport ............................................................................. 63
Gambar 3.2 Website Indosport ......................................................................... 63
Gambar 3.3 Akun Sosial Media Indosport ....................................................... 64
Gambar 3.4 Contoh Desain dari Indosport ....................................................... 65
Gambar 3.5 User Flow Indosport ..................................................................... 84
Gambar 3.6 Proses Perancangan Wireframe .................................................... 86
Gambar 3.7 Guidelines Indosport .................................................................... 87
Gambar 3.8 Proses Perancangan Ilustrasi ........................................................ 90
Gambar 3.9 Proses Perancangan User Interface .............................................. 90
Gambar 3.10 Pemicu dan Respon UI dan UX .................................................. 96
Gambar 3.11 Perancangan Prototype Interaktif ............................................... 97
Gambar 3.12 Perancangan Aset Komponen ..................................................... 97
Gambar 4.1 UI dan UX Aplikasi Mobile Indosport ....................................... 101
Gambar 4.2 Ilustrasi oleh NERDO Studio ..................................................... 103
Gambar 4.3 Ilustrasi Mohamed Salah ............................................................ 104
Gambar 4.4 Peta Aplikasi Indosport .............................................................. 115
Gambar 4.5 Halaman Start Screen ................................................................. 118
xiv
Gambar 4.6 Halaman Register ....................................................................... 124
Gambar 4.7 Halaman Sign In ......................................................................... 126
Gambar 4.8 Halaman Featured News ............................................................ 130
Gambar 4.9 Halaman Artikel Featured News ................................................ 137
Gambar 4.10 Halaman Transfer News ........................................................... 139
Gambar 4.11 Halaman Artikel Transfer News ............................................... 143
Gambar 4.12 Halaman Galleries News .......................................................... 145
Gambar 4.13 Halaman Artikel Galleries News .............................................. 150
Gambar 4.14 Halaman Videos News .............................................................. 152
Gambar 4.15 Halaman Artikel Videos News .................................................. 156
Gambar 4.16 Halaman Search ........................................................................ 158
Gambar 4.17 Halaman Activity ...................................................................... 159
Gambar 4.18 Halaman Countdown ................................................................ 164
Gambar 4.19 Halaman Notifications .............................................................. 165
Gambar 4.20 Halaman Calendar .................................................................... 167
Gambar 4.21 Halaman Match ........................................................................ 172
Gambar 4.22 Halaman Player Stats and Table .............................................. 174
Gambar 4.23 Halaman Profile ........................................................................ 175
Gambar 4.24 Halaman Profile Settings .......................................................... 179
Gambar 4.25 Halaman Friend List ................................................................. 180
Gambar 4.26 Halaman Badges ....................................................................... 182
Gambar 4.27 Desain Pin dan Gantungan Kunci Indosport ............................ 183
Gambar 4.28 Desain Stiker Indosport ............................................................ 186
Gambar 4.29 Instagram Feed Indosport ......................................................... 188
Gambar 5.1 SK Dosen Pembimbing .............................................................. 203
Gambar 5.2 Surat Undangan Pameran ........................................................... 205
Gambar 5.3 Poster Pameran ........................................................................... 206
Gambar 5.4 X-Banner Pameran ..................................................................... 207
Gambar 5.5 Instagram Feed ........................................................................... 208
Gambar 5.6 Pembukaan Pameran .................................................................. 209
Gambar 5.7 Dosen SR Mencoba UI dan UX Indosport ................................. 209
xv
Gambar 5.8 Pengunjung Sedang Mencoba Karya .......................................... 210
Gambar 5.9 Menjelaskan Konsep Pada Dosen SR ......................................... 210
Gambar 5.10 Proses Mencoba UI dan UX ..................................................... 211
Gambar 5.11 Menjelaskan Konsep Pada Pengunjung .................................... 211
Gambar 5.12 Menjelaskan Desain Akhir Pada Klien ..................................... 212
Gambar 5.13 Penyerahan Secara Simbolik Kepada Klien ............................. 212
xvi
DAFTAR TABEL
Tabel 1.1 Analisis SWOT Indosport .................................................................. 8
Tabel 1.2 Analisis SWOT Kompetitor (Goal ID) .............................................. 9
Tabel 1.3 Elemen Perancangan UI dan UX Indosport ..................................... 11
Tabel 3.1 Proses Berkarya ................................................................................ 60
Tabel 3.2 Wawancara ....................................................................................... 66
Tabel 3.3 Strategi Promosi ............................................................................... 66
Tabel 4.1 Keterangan Wireframes Indosport ................................................. 105
Tabel 4.2 Tabel Komponen UEQ Landing Page ........................................... 117
Tabel 4.3 Keterangan Aset Halaman Start Screen ......................................... 121
Tabel 4.4 Keterangan Aset Halaman Sign In ................................................. 128
Tabel 4.5 Tabel Komponen UEQ News ......................................................... 129
Tabel 4.6 Keterangan Aset Halaman Featured .............................................. 132
Tabel 4.7 Keterangan Aset Halaman Transfers ............................................. 140
Tabel 4.8 Keterangan Aset Halaman Galleries .............................................. 147
Tabel 4.9 Keterangan Aset Halaman Videos .................................................. 153
Tabel 4.10 Tabel Komponen UEQ Activity .................................................... 160
Tabel 4.11 Keterangan Aset Halaman Activity .............................................. 162
Tabel 4.12 Tabel Komponen UEQ Calendar ................................................. 168
Tabel 4.13 Keterangan Aset Halaman Calendar ............................................ 170
Tabel 4.14 Tabel Komponen UEQ Profile ..................................................... 177
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
1.1.1 Alasan Pemilihan Tema
Irawan (dalam Fauzia dkk, 2016: 148) menjelaskan bahwa nilai keindahan
menjadi prioritas yang dapat membantu suatu hasil karya agar dapat dinikmati oleh
mata, jiwa, perasaan ataupun dengan telinga. Keindahan berkaitan dengan segala
sesuatu yang mencakup kesatuan (unity), keselarasan (harmony), kesetangkupan
(symmetry), keseimbangan (balance) dan perlawanan (contrast). Berbagai
perkembangan yang terjadi, manusia mulai menerapkan estetika untuk merancang
mekanisme komunikasi antara pengguna (user) dengan sistem atau yang bisa
disebut dengan antaramuka pengguna (user interface) tanpa mengurangi fungsi.
Teknologi mobile device yang berkembang saat ini memudahkan kebutuhan
akan informasi dapat terpenuhi. Alat telekomunikasi yang mengalami
perkembangan signifikan adalah alat telekomunikasi bergerak yang menggunakan
sistem operasi (Hendrawan, 2018: 45).
Aplikasi memberikan peningkatan kinerja suatu pekerjaan, baik yang
bersifat aplikasi desktop atau web hingga banyak bermunculan aplikasi-aplikasi
baru yang dapat dijalankan dalam mobile device atau smartphone. Pemilihan mobile
device untuk salah satu pengembangan aplikasi selain mempermudah dalam
pengoperasiannya, juga bersifat fleksibel karena mudah dibawa kemana-mana saat
digunakan (Mulyana & Maimunah, 2014: 27).
2
Menurut survei yang dilakukan oleh Katadata pertumbuhan pengguna
smartphone di Indonesia mengalami kenaikan yang cukup tinggi terhitung dari
tahun 2016 sampai dengan tahun 2019. Mengalami kenaikan 26,8 juta pengguna
dalam rentang waktu 3 tahun.
Gambar 1.1 Statistik Pertumbuhan Pengguna Smartphone di Indonesia
(databoks.katadata.co.id)
Lalu menurut survei yang dilakukan oleh Pew Research Center dengan
responden 30.133 orang di 27 negara yang dilakukan pada 14 Mei sampai dengan
12 Agustus 2018. Dalam survei tersebut posisi Indonesia berada pada urutan ke-24
dari 27 negara. Pertumbuhan pengguna smartphone di Indonesia cukup tinggi.
Untuk pemakai smartphone usia 18-34 tahun, kepemilikannya meningkat dari 39%
menjadi 66% terhitung dari tahun 2015-2018. Sedangkan pengguna smartphone
usia 50 tahun keatas naik dari 2% menjadi 13% terhitung dari tahun 2015-2018.
Banyaknya jumlah pengguna smartphone berdampak pula pada
perkembangan aplikasi mobile. Karena sifatnya yang praktis pengguna smartphone
dapat mengakses berbagai macam aplikasi-aplikasi yang terdapat di dalamnya
dimana saja. Banyak jenis aplikasi pada smartphone, jenis aplikasi tersebut
3
digunakan untuk mengakses berbagai macam keperluan, diantaranya komunikasi
antar manusia, mencari informasi atau ilmu, untuk berbelanja, memutar musik
ataupun video, melakukan kegiatan bisnis dan mengatur keuangan, utilitas dan
produktifitas, membaca berita, update terbaru seputar olahraga, bermain game dan
masih banyak lagi berbagai jenis aplikasi yang sudah dikembangkan. Dapat
dikatakan aplikasi mobile saat ini memiliki inovasi-inovasi yang terus muncul dan
tidak terbatas jumlahnya.
Indosport merupakan media informasi yang membahas seputar olahraga
nasional maupun internasional, khususnya sepakbola. Menyediakan informasi
mengenai status pemain, tim, pertandingan maupun transfer pemain, serta beberapa
berita hiburan mengenai olahraga. Sasaran konsumen Indosport adalah remaja
sampai dengan orang dewasa yang tertarik mengikuti perkembangan dunia
sepakbola atau olahraga lainnya melalui berita untuk memperdalam informasi. Di
Indonesia sendiri merupakan salah satu negara yang sangat antusias terhadap
olahraga. Dalam penelitian yang dilakukan oleh Nielsen Sport (2013), 77%
penduduk Indonesia memiliki ketertarikan pada olahraga sepakbola, 12% basket,
dan 11% olahraga lainnya. Tetapi penduduk Indonesia yang tertarik pada olahraga
sepakbola dan basket tidak berbanding lurus dengan tingkat partisipasi pada dua
olahraga tersebut. Tercatat hanya 19% penduduk Indonesia yang aktif bermain.
Penduduk Indonesia melampiaskan antusias terhadap olahraga melalui
sosial media. Minimnya wadah akan komunitas ini dan tanpa adanya filter terhadap
kolom diskusi dan minimnya fitur karena dikhususkan secara umum pada sosial
media membuatnya menjadi sebuah diskusi dan pengalaman dalam mendapatkan
4
informasi yang tidak berkualitas. Dengan membuat sebuah rancangan aplikasi
komunitas yang berisi mengenai berita terkini sepakbola atau olahraga lainnya yang
dikemas secara ringkas dan sebuah tempat atau platform untuk berinteraksi yang
spesifik berharap akan membuat para penduduk Indonesia yang antusias terhadap
sepakbola dapat menyampaikan isi pikirannya terhadap kejadian atau apapun
mengenai sepakbola maupun olahraga lainnya.
1.1.2 Alasan Pemilihan Jenis Karya
Terganggunya keseimbangan dan kemampuan penyampaian informasi
dalam sebuah desain merupakan hal yang fatal. Keseimbangan dan informasi
merupakan dua hal yang saling berhubungan. Tanpa adanya keseimbangan pada
karya desain akan mengganggu pengamatan, tetapi sebuah desain yang indah dan
seimbang pun juga tidak dapat dikatakan berhasil apabila pengamat tidak dapat
memperoleh informasi yang utuh (Wijaya, 1999: 54).
Desain dapat didefinisikan sebagai hasil atau proses dalam menciptakan
produk, layanan maupun pengalaman saat menggunakan produk. Semua benda
yang diproduksi di dunia yang dibuat oleh manusia dan tidak ditemukan di alam
merupakan hasil dari beberapa bentuk proses desain, baik yang disengaja atau tidak.
User interface jelas tidak terjadi secara alami tanpa terkecuali, didefinisikan sebagai
rencana untuk objek digital yang mencakup perangkat, antarmuka, layanan dan
informasi. User interface memberikan pengaruh terhadap individu, yaitu untuk
meningkatkan profesionalisme bekerja untuk lebih teliti dan akurat, serta untuk
menurunkan perasaan frustasi, ketakutan dan kegagalan (Shneiderman dkk,
2016:126).
5
User interface pada sebuah aplikasi adalah bagaimana suatu produk tersebut
membuat sebuah identitas, apa yang bisa dilihat oleh mata. User interface terdiri
dari interface design, graphic, icon, dan visual design (Hembree, 2011: 43). User
interface bukan hanya tentang tombol dan menu, melainkan tentang
mengkomunikasikan interaksi antara pengguna dan aplikasi atau perangkat. Bentuk
visual yang tidak hanya menampilkan bagaimana produk itu terlihat tetapi juga
bagaimana produk itu dapat dipahami dan bekerja (Fadeyev, 2009: 10).
User experience dapat diterapkan ke hampir semua jenis bisnis. Dapat
sangat mempengaruhi merek, loyalitas pengguna dan peningkatan jumlah
pengguna. Definisi user experience adalah suatu pengalaman yang dapat mengubah
perasaan pengguna ketika menggunakan suatu perangkat, layanan atau sistem.
Penting untuk menganggap serius dalam merancang user experience dalam semua
jenis bisnis. Karena menekankan untuk menemukan cara untuk memecahkan
berbagai masalah yang dialami oleh pengguna (user), dan membuat sebuah
rancangan untuk membuat suatu produk yang tidak membingungkan ketika
digunakan (Kraft, 2012: 8).
Dapat disimpulkan bahwa user interface dan user experience memiliki
keterkaitan satu sama lainnya. Dan merupakan kesatuan yang sangat penting dalam
proses perancangan sebuah aplikasi mobile. Tidak hanya memiliki kualitas yang
baik, tetapi memiliki fungsi dan mudah untuk dinavigasikan oleh pengguna.
Interaksi manusia dengan komputer atau yang biasa dikenal dengan Human-
Computer Interaction (HCI) melibatkan studi, perencanaan, desain dan penggunaan
antarmuka antara orang-orang (pengguna) dengan komputer. Hal ini sering
6
dianggap sebagai gabungan ilmu komputer, ilmu perilaku, desain, studi media, dan
beberapa bidang studi lainnya (Poernomo & Tukunang, 2014:21). HCI
memfokuskan desain sistem pada pengguna atau biasa disebut dengan user
centered design (UCD). UCD merupakan filosofi perancangan yang menempatkan
pengguna sebagai pusat dari proses pengembangan sistem (Saifulloh & Asnawi,
2015:55). Dalam user interface (UI) dan user experience (UX) penting untuk
mengetahui interaksi terhadap pengguna (user) dan alat (device). Agar mengetahui
bagaimana cara mendesain sebuah aplikasi, website, dan platform yang dapat
digunakan dengan mudah oleh user dari antarmuka yang ditampilkan.
Perancangan user interface dan user experience Indosport sendiri akan
menggunakan metode user centered design (UCD). UCD sendiri adalah proses
desain yang berfokus pada kebutuhan pengguna. Sebuah produk yang
dikembangkan menggunakan penerapan UCD mementingkan end-user, bagaimana
produk itu dapat optimal sesuai dengan kebutuhan atau keinginan end-user terhadap
penggunaan produk. Desain dirancang dengan memperhatikan perilaku pengguna
dalam menggunakan produk sehingga produk yang akan dikembangkan tidak
memaksa pengguna untuk mengubah perilakunya ketika menggunakan produk
tersebut. Tujuan utamanya adalah agar produk yang akan dikembangkan dapat
berguna dan mudah untuk digunakan oleh pengguna.
Oleh karena itu dalam Proyek Studi ini perancangan user interface dan user
experience pada aplikasi mobile Indosport dengan menggunakan pendekatan user
centered design. Yang diharapkan dapat membuat rancangan aplikasi Indosport
7
menjadi baik dari segi desain user interface dan user experience yang sesuai dengan
calon pengguna nantinya.
1.1.3 Analisis Kebutuhan
SWOT menentukan tujuan usaha yang realistis, sesuai dengan kondisi
perusahaan dan oleh karenanya diharapkan lebih mudah tercapai. SWOT adalah
singkatan dari kata-kata Strength (kekuatan), Weaknesses (kelemahan),
Opportunities (peluang), dan Threats (ancaman) (Sutojo & Kleinsteuber, 2002: 8).
Teknik analisis SWOT dapat diterapkan dalam kasus menentukan tujuan strategi
dalam perancangan atau pemasaran yang dapat diutarakan sebelum menentukan
tujuan-tujuan yang ingin dicapai. Terlebih dahulu menganalisa kekuatan,
kelemahan serta keunggulan kompetitif yang dimiliki perusahaan atau usaha yang
dilakukan melalui analisa terhadap kondisi internal perusahaan, serta analisa
mengenai peluang dan ancaman yang dihadapi perusahaan yang dilakukan melalui
analisa terhadap kondisi eksternal perusahaan (Kotler, 2008: 88).
Maka dalam perancangan user interface dan user experience, sebelum
menggali lebih banyak informasi pengguna yang akan menjadi user dari produk
yang akan dirancang, dan merealisasikan menjadi bentuk visual dibutuhkan analisis
SWOT. Berikut tabel matriks analisis SWOT Indosport:
8
Tabel 1.1 Analisis SWOT Indosport
FAKTOR
INTERNAL
FAKTOR
EKSTERNAL
KEKUATAN (STRENGTH) KELEMAHAN
(WEAKNESS)
A. Kedalaman informasi ketika
membahas mengenai olahraga
seperti sepakbola atau olahraga
lainnya.
B. Memiliki identitas visual
yang cukup baik, dan dapat
dikembangkan lebih jauh lagi.
C. Memiliki media sosial
(Instagram, Youtube, Facebook,
dan Twitter).
A. Tidak memiliki user
interface dan user
experience.
B. Kurangnya media yang
dapat memberikan
pengguna untuk
berinteraksi dalam berita.
PELUANG
(OPPORTUNITIES)
STRATEGI
MENGGUNAKAN
KEKUATAN UNTUK
MEMANFAATKAN
PELUANG
STRATEGI
MENGURANGI
KELEMAHAN UNTUK
MEMANFAATKAN
PELUANG
1. Penduduk Indonesia
antusias terhadap olahraga
dapat menyampaikan isi
pikirannya terhadap kejadian
atau membahas berita, rumor
spekulasi.
2. Aplikasi mobile merupakan
media distribusi informasi
yang tepat, karena
memberikan user pengalaman
dan interaksi lebih
didalamnya.
3. Rentang usia target audiens
yang tepat, karena cenderung
banyak menggunakan
smartphone.
A-C-1, Menyediakan sebuah
wadah baru yang dapat menjadi
tempat untuk berdiskusi untuk
membahas dunia sepakbola atau
olahraga lainnya serta
memberikan tempat yang
memuat media informasi
mengenai olahraga tersebut.
A-B-2, Menciptakan user
interface dan user experience
yang baik pada prototype
aplikasi mobile Indosport agar
calon pengguna mendapatkan
pengalaman pemakaian aplikasi
yang baik.
A-1, Membuat user
experience yang mudah
untuk dioperasikan agar
calon para pengguna
merasakan pengalaman
dalam membaca berita,
berdiskusi secara
maksimal dan tidak
meninggalkan aplikasi
tersebut.
B-1-2, Membuat desain
user interface yang
menarik pengguna dan
dapat menaikkan citra
produk itu sendiri.
ANCAMAN (THREATS)
STRATEGI
MENGGUNAKAN
KEKUATAN UNTUK
MENGHADAPI ANCAMAN
STRATEGI
MENGURANGI
KELEMAHAN UNTUK
MENGHADAPI
ANCAMAN
1. Terdapat banyak aplikasi
serupa yang menyediakan
media informasi seputar
olahraga.
2. Kompetitor memiliki desain
identitas visual yang sangat
kuat.
A-1-2. Membuat inovasi baru
untuk bersaing dengan pesaing
lainnya.
B-C-2, Mengembangkan lagi isi
konten, aset-aset visual
Indosport yang sudah ada dan
membuat penataan user
interface yang menari.
A-B-1-2, Menggunakan
media promosi seperti
iklan dengan visual yang
baik dan mudah
dimengerti untuk
mengenalkan user
interface dan fitur-fitur
unggulan yang terdapat
pada Indosport.
9
Tabel 1.2 Analisis SWOT Kompetitor (Goal ID)
FAKTOR
INTERNAL
FAKTOR
EKSTERNAL
KEKUATAN (STRENGTH) KELEMAHAN
(WEAKNESS)
A. Merupakan salah satu media
olahraga yang memberikan
originalitas dari hal konten.
B. Memiliki identitas visual
yang sangat baik dan berkesan
kepada audiens.
A. Terdapat beberapa
konten yang terkesan tidak
berbobot.
B. Lemahnya pengalaman
pengguna yang diadaptasi
dalam aplikasi mobilenya.
PELUANG
(OPPORTUNITIES)
STRATEGI
MENGGUNAKAN
KEKUATAN UNTUK
MEMANFAATKAN
PELUANG
STRATEGI
MENGURANGI
KELEMAHAN UNTUK
MEMANFAATKAN
PELUANG
1. Menyediakan tempat bagi
para penggemar untuk ikut
andil dalam dunia olahraga
secara tidak langsung.
2. Dengan identitas visual dan
sepak terjang Goal ID dalam
dunia media, mereka memiliki
brand yang cukup
diperhitungkan untuk dapat
memperluas penyebaran
informasi.
A-1, Membuat ruang diskusi
bagi para penggemar olahraga
atau interaksi yang dapat
dilakukan oleh pengguna.
B-1-2, Menciptakan beberapa
inovasi dalam penyebaran
media informasi.
A-1, Membuat user
interface dan user
experience yang nyaman
bagi pengguna untuk
berdiskusi.
B-2, Menambah beberapa
media sosial seperti
Youtube untuk menambah
distribusi.
ANCAMAN (THREATS)
STRATEGI
MENGGUNAKAN
KEKUATAN UNTUK
MENGHADAPI ANCAMAN
STRATEGI
MENGURANGI
KELEMAHAN UNTUK
MENGHADAPI
ANCAMAN
1. Aplikasi mobile tidak
berbeda jauh dengan
pengalaman pengguna saat
mengoperasikan website pada
umumnya.
2. Terdapat beberapa aplikasi
mobile serupa yang lebih
unggul.
A-1-2, Membuat inovasi baru
dari segi media-media Goal ID
yang sudah ada untuk bersaing
dengan pesaing lainnya.
B-2 Membuat uiser interface
dengan memanfaatkan identitas
visual dengan lebih baik lagi.
A-1, Membuat konten
yang lebih baik lagi
kualitasnya dari segi isi.
B-2, Memberikan fitur
yang menarik pada
aplikasi mobile yang sudah
ada.
Berdasarkan analisis SWOT di atas, dapat dirumuskan bahwa untuk merancang
user interface dan user experience pada aplikasi mobile Indosport harus
memperkuat fungsi, keindahan pada user interface, serta menunjukkan kelebihan
yang tidak dimiliki oleh para pesaing. Menurut Jesse James Garret mengenai
elemen dari user experience adalah sebagai berikut:
10
1. Elemen 1: Kebutuhan Pengguna dan Tujuan
Kebutuhan pengguna dan tujuan bisnis merupakan pondasi ketika
membangun user experience. Untuk mengerti pengguna dan bisnis, dapat dilakukan
dengan bertemu langsung dengan pengguna dan tim yang terdapat pada proyek
tersebut untuk mengetahui target apa yang akan coba mereka capai.
2. Elemen 2: Spesifikasi Fungsional dan Konten
Setelah mengerti kebutuhan pengguna dan tujuan, dilanjutkan dengan
elemen 2 yang berbicara mengenai cakupan. Fitur dan konten apa yang dapat
memuaskan kebutuhan pengguna serta memenuhi target tim yang harus dipikirkan.
Untuk memetakan fitur atau konten dapat menggunakan Kano Model.
Gambar 1.2. Kano Model (www.isixsigma.com)
3. Elemen 3: Interaksi Desain dan Interaksi Arsitektur
Pada elemen ini, user flow dan struktur informasi mulai dibuat, bagaimana
pengguna nantinya dapat berinteraksi dengan produk yang dibuat, dan data apa saja
yang dibutuhkan, termasuk struktur datanya.
4. Elemen 4: Wireframes
Pada elemen ini perancangan user interface mulai dikerjakan. Di
wireframes semua hal yang telah dilakukan pada elemen 1 (user needs dan site
11
objectives), elemen 2 (functional spesifications dan content requirements), elemen
3 (interaction design dan information architecture) dibuat bentuk nyatanya yang
berupa draft visual. Mulai memikirkan navigasi, layout, pemilihan komponen dan
bagaimana informasi ditampilkan.
5. Elemen 5: Visual Design
Setelah melakukan proses wireframes barulah membuat bentuk visual untuk
memperindahnya. Yang termasuk di tahal visual design, biasanya adalah warna,
icon, gambar, font dan copywriting style.
Tabel 1.3 Elemen Perancangan User Interface dan User Experience Indosport
Elemen Jenis Keterangan
Elemen 1
1. User Needs
2. Site
Objectives
1. Menganalisis kebutuhan
dan keinginan calon
pengguna mengenai
tampilan dan pengalaman
melalui elisitasi kebutuhan
atau melihat review
pengguna dari aplikasi
serupa.
2. Menganalisis tujuan
bisnis, kreatif dan sistem
yang akan diberlakukan
untuk Indosport.
Elemen 2
1. Functional
Specifications
2. Content
Requirements
1. Menetapkan fungsi apa
yang nantinya akan
disematkan pada aplikasi
Indosport.
2. Mendefinisikan elemen
konten yang akan
dibutuhkan dalam aplikasi
mobile Indosport
berdasarkan kebutuhan
pengguna.
12
Elemen Jenis Keterangan
Elemen 3
1. Interaction
Design
2. Information
Architecture
1. Membuat user flow dan
struktur informasi dan
memikirkan bagaimana
nantinya pengguna dapat
berinteraksi dengan aplikasi
mobile Indosport dengan
optimal.
2. Mendesain struktur ruang
informasi untuk
memfasilitasi intuisi
terhadap konten yang akan
dituju.
Elemen 4
1. Interface
Design
2. Navigation
Design
3. Information
Design
1. Membuat desain
interface menggunakan
konsep HCI (Human
Computer Interaction)
untuk memfalisitasi
interaksi pengguna saat
menggunakan aplikasi
mobile Indosport.
2. Desain dari elemen
tampilan untuk
memfasilitasi pergerakan
atau navigasi pengguna
berdasarkan information
architecture.
3. Memikirkan bagaimana
informasi disampaikan
melalui user interface pada
aplikasi mobile Indosport.
Elemen 5 1. Visual Design
1. Membuat bentuk visual
dari wireframes yang sudah
dibuat sebelumnya pada
setiap elemen halaman dan
komponen navigasi.
Memikirkan bagaimana
warna, icon, gambar, font
dan graphic disusun
sedimikian rupa untuk
memperindah tampilan user
13
Elemen Jenis Keterangan
interface Indosport tanpa
mengurangi fungsi.
1.2 Tujuan Proyek Studi
Menghasilkan rancangan user interface (UI) dan user experience (UX) pada
aplikasi mobile Indosport dengan menggunakan metode user centered design
(UCD).
1.3 Manfaat
Manfaat pada perancangan ini adalah sebagai berikut:
1. Perancangan UI dan UX ini, membantu Indosport dalam mengembangkan
UI dan UX aplikasi mobile dengan tampilan yang optimal dan mudah
dipahami oleh pengguna.
2. Hasil UI dan UX ini dapat membantu masyarakat yang memiliki minat
terhadap olahraga khususnya sepakbola untuk dapat menikmati pengalaman
yang baik dalam menggunakan UI dan UX aplikasi mobile Indosport ini.
3. Diharapkan proyek studi ini dapat menjadi bahan pustaka nantinya, yang
dapat digunakan sebagai referensi oleh mahasiswa Universitas Negeri
Semarang.
14
BAB II
LANDASAN TEORI
2.1 Perancangan
Perancangan adalah penggambaran, perencanaan dan pembuatan melalui
gambar kasar atau yang biasa disebut dengan sketsa dari pengaturan di beberapa
elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi untuk
mendesain sistem baru yang dapat menyelesaikan masalah-masalah yang dihadapi
dari pemilihan alternatif sistem terbaik (Al-Bahra, 2005: 39).
Menurut Pressman (2010: 291), perancangan adalah langkah pertama dalam
fase pengembangan rekayasa produk atau sistem. Perancangan itu adalah proses
penerapan berbagai teknik dan prinsip yang bertujuan untuk mendifinisikan sebuah
peralatan, satu proses atau satu sistem secara detail yang membolehkan dilakukan
realisasi fisik.
Dari pendapat tersebut maka dapat disimpulkan bahwa perancangan adalah
proses perencanaan, penggambaran dan pembuatan untuk mengembangkan
rekayasa produk atau sebuah sistem dalam upaya mencari inovasi berdasarkan
evaluasi yang telah dilakukan terlebih dahulu dari kegiatan analisis masalah dan
kebutuhan.
2.1.1 Perancangan dalam Lingkup Desain Komunikasi Visual
Komunikasi Visual merupakan kombinasi dari berbicara, menulis dan
menggambarkannya kedalam suatu pesan secara estetika yang memuaskan,
menghubungkan audiens secara emosional dan menyediakannya dengan informasi
15
yang dituju. Ketika itu dieksekusi dengan tepat, desain grafis dapat
mengidentifikasi, memberikan informasi, instruksi, menafsirkan bahkan mengajak
penonton untuk melakukan sesuatu. Penting bahwa pengirim pesan dan penerima
pesan berbicara dengan bahasa visual yang sama, dengan cara ini, perancang
bertindak sebagai penafsir dan penerjemah pesan. Mengurangi jumlah informasi
yang digambarkan secara visual dan menciptakan desain yang lebih ringkas yang
merupakan tujuan dari segala jenis bentuk komunikasi (Hembree, 2011: 14).
Gambar 2.1 Proses Komunikasi Visual (The Complete Graphic Designer, Hembree,
2008)
Kekuatan komunikasi visual tergantung pada keterlibatannya dengan
persepsi di dunia masyarakat dan budaya. Dalam mempelajari komunikasi visual
penting untuk mengetahui peran produsen dalam penciptaan media dan peran
penonton sebagai penerjemah. Proses tersebut melibatkan proses fisiologis,
psikologis dan sosial budaya yang bersama-sama akan membentuk interpretasi
(Machin, 2014: 30).
16
Menurut Tinarbuko (2009: 23), Desain Komunikasi Visual merupakan ilmu
yang mempelajari mengenai konsep komunikasi dan ungkapan daya kreatif, yang
diaplikasikan dalam berbagai bentuk media komunikasi visual dengan cara
mengolah elemen desain grafis yang terdiri atas gambar, tipografi, warna,
komposisi, dan tata letak. Semua itu dilakukan untuk menyampaikan pesan secara
visual, audio maupun audio visual kepada sasaran audiens yang dituju.
2.1.1.1 Fungsi Desain Komunikasi Visual
Berfungsi sebagai metode untuk meningkatkan kualitas masyarakat melalui
komunikasi yang efektif, membuat hal-hal rumit menjadi lebih mudah untuk
dipahami dan digunakan sebagai mana mestinya. Bentuk desain yang membujuk
dan memengaruhi opini publik, seperti halnya dengan propaganda atau desain
politik. Desain mengajarkan seperti halnya memberikan petunjuk bagaimana cara
menavigasi atau menggabungkan sesuatu. Melalui desain pula orang dapat
mengakses informasi tentang beragam topik dan membentuk citra perusahaan
beserta produk atau jasanya. Melalui desain, seorang desainer dapat
mengkomunikasikan ide-ide kompleks dengan cara yang sederhana dan efektif
untuk dipahami audiens (Hembree, 2011: 11).
Seorang desainer dapat mengatur teks dan gambar dalam jumlah cara yang
tidak terbatas, tetapi tujuan utamanya adalah untuk berkomunikasi secara efektif
daripada menghasilkan karya untuk kepentingannya sendiri. Desain secara aktif
mengembangkan, memelihara, memperbaiki konvensi, aksioma, dan klise untuk
menyampaikan pesan-pesan penting agar dapat mudah dimengerti (Ambrose &
Harris, 2009: 15). Misalnya rambu-rambu jalan berfungsi sesuai dengan apa yang
17
pengendara tangkap, karena desain tersebut mengkomunikasikan pesan yang dapat
langsung diproses oleh pengendara, jika tanda-tanda tidak berkomunikasi secara
efektif, aka nada lebih banyak kecelakaan.
2.1.1.2 Elemen-Elemen Desain Komunikasi Visual
1. Bidang dan Ruang
Dalam desain dua dimensi, bentuk memiliki lebar dan panjang. Bidang
dapat berupa bentuk-bentuk geometris seperti lingkaran, segitiga, segiempat, elips
dan sebagainya. Bidang geometris memiliki kesan formal, sedangkan bidang-
bidang non-geometris memiliki kesan tidak formal, santai dan dinamis (Supriyono,
2010: 57).
Konfigurasi bidang menentukan makna dalam bentuk satu-kesatuan elemen
desain serta suatu bidang harus dapat menghubungkan maksud dari pesan yang
ingin disampaikan. Jika ingin menyampaikan pesan dengan perasaan yang tenang
maka penggunaan bentuk sudut yang tajam dan keras maka akan membingungkan
penonton. Rasa ketenangan lebih cenderung ditanamkan dengan menggunakan
bentuk-bentuk organik. Dalam istilah yang paling mendasar, ruang adalah area
yang diaktifkan oleh elemen lain. Desain grafis adalah disiplin yang berkaitan
dengan penataan elemen dalam ruang yang diberikan. Untuk menghadirkan
elemen-elemen grafis dalam cara yang dinamis dan efektif secara visual, seorang
desainer grafis juga harus merancang ruang di sekitar elemen (Ambrose & Harris,
2009: 19).
18
2. Garis
Dalam istilah formal, garis adalah jalur yang bergerak dari satu titik ke titik
lainnya. Alur dalam sebuah garis menentukan kualitas dan karakter garis yang
dihasilkan. Menurut Sunaryo (2002: 7) garis merupakan sebuah tanda yang
berbentuk memanjang dan membekas pada suatu permukaan yang memiliki arah
serta dapat menjadi batas suatu bidang atau warna.
Garis-garis yang dihasilkan dari jalur titik memberikan karakter dan makna
tertentu ke sebuah garis. Seperti aspek kualitas maupun sifat garis lainnya
menentukan suatu kesan pada bentuk visual (Ambrose & Harris, 2009: 21).
Menurut Sunaryo (2002: 8) dari segi jenisnya terdiri dari beberapa macam yaitu,
garis lurus, garis lengkung, dan garis tekuk. Garis lurus adalah garis yang memiliki
kesan tegas dan memiliki arah tujuan yang jelas. Garis lengkung memiliki kesan
lembut dan luwes. Sedangkan garis tekuk yang membentuk sudut-sudut yang tajam
memiliki kesan kaku dan tegang.
3. Ukuran
Ukuran mengacu pada skala dan proporsi, serta mengacu pada dimensi fisik
suatu elemen atau format. Menentukan ukuran jenis huruf, foto, dimensi, tampilan
dan sebagainya. Menurut Ambrose & Harris (2009: 22) ukuran merupakan fungsi
dari portabilitas ergonomis (ilmu yang mempelajari produk dengan bentuk
manusia) serta merupakan keputusan dasar yang perlu dibuat dalam konteks
keseluruhan desain. Desainer yang cerdas adalah yang menggunakan perbandingan
ukuran untuk mengontrol bagaimana penonton memandang ukuran yang relatif.
19
Besar-kecilnya elemen visual perlu diperhitungkan dalam proses
pembuatan suatu desain sehingga nantinya menghasilkan nilai kemudahan baca
(legibility) yang tinggi. Perbedaan ukuran yang diperhitungkan secara proporsional
akan membantu pembaca dalam memilih informasi yang perlu didahulukan
(Supriyono, 2010: 59).
4. Warna
Warna menggambarkan rona intrinsik yang ditemukan dalam cahaya dan
pigmen. Warna dibedakan dengan nama warna umum seperti biru, oranye, coklat,
merah, marun, kuning dan sebagainya. Warna terhubung secara langsung dengan
perasaan serta emosi, dan menjadi unsur yang penting dalam ungkapan seni rupa
dan desain (Sunaryo, 2002: 12).
Menurut Ambrose & Harris (2009: 25) sebagai bagian dari elemen, warna
mempertinggi dimensi praktis, budaya, psikologis dan ekspresif dari gambar visual
apa pun. Warna membawa makna intrinsik yang berkomunikasi tanpa bantuan kata
atau gambar.
5. Tekstur
Tekstur mengacu pada kualitas dan karakteristik permukaan. Tekstur dapat
bersifat taktil (responsif terhadap sentuhan fisik) dan visual. Seperti warna, tekstur
tidak dapat berfungsi sebagai elemen desain sendiri. Menurut Ambrose & Harris
(2009: 25), tekstur merupakan jenis elemen yang dapat meningkatkan elemen-
elemen lain, serta bergantung pada bentuk dan ruang. Tekstur memberikan para
desainer kesempatan untuk membuat variasi dan kedalaman komposisi dan
membantu membedakan antara elemen-elemen lainnya.
20
Menurut Wong (dalam Sunaryo 2002: 17), tekstur dalam visual terdiri dari
tiga jenis yaitu, tekstur hias, tekstur spontan dan tekstur mekanis. Tekstur hias
adalah tekstur yang terdapat pada permukaan suatu bidan dan termasuk dalam isian
tambahan yang dapat dibuang tanpa menghilangkan identitas pada suatu bidang.
Tekstur adalah jenis tekstur yang dihasilkan sebagai baguan dari proses penciptaan
yang meninggalkan jejak-jejak yang terjadi secara spontan pula akibat dari
penggunaan bahan, alat atau teknik tertentu. Sedangkan tekstur mekanis adalah
tekstur yang didapat dengan menggunakan sarana mekanis yang dimana tekstur ini
tidak terbentuk dari alat-alat gambar melainkan terbentuk dari hasil gambar bitmap
pada karya cetak.
6. Tipografi
Bentuk tipografi adalam elemen yang unik untuk desain komunikasi karena
memainkan peran ganda. Pada level formal, mereka berfungsi sebagai bentuk,
tekstur, titik dan garis. Tapi tentu saja bentuk tipografi juga mengandung makna
verbal. Bentuk kata harus mengkomunikasikan pesan verbal serta berfungsi secara
efektif sebagai elemen grafis dalam suatu komposisi (Ambrose & Harris, 2009: 27).
2.1.1.3 Prinsip-Prinsip Desain Komunikasi Visual
Menurut Evans & Thomas (2013: 5) ketika seorang desainer membuat atau
mempelajari mengenai desain maka desainer tersebut akan lebih familiar dengan
proses dan strategi yang mengatur tentang bagaimana sebuah desain dapat terlihat
lebih menarik serta memenuhi fungsinya. Terdapat prinsip-prinsip desain mengenai
bagaimana elemen-elemen dalam desain diatur. Berikut merupakan prinsip-prinsip
utama dalam membuat desain menurut Evans & Thomas:
21
1. Unity dan Variety
Ketika penonton melihat suatu karya desain, penonton memerlukan
pemahaman terhadap apa yang mereka lihat. Tujuan utama dari segala jenis desain
yang ada adalah untuk menciptakan satu kesatuan melalui pengorganisasian bagian-
bagian dari bermacam komposisi yang nantinya dapat dipahami oleh penonton.
Unity atau kesatuan dan variety atau variasi adalah prinsip utama yang mengikat
prinsip lainnya. Kesatuan secara tidak langsung mengatur banyaknya variasi yang
terdapat pada desain, walaupun didalam desain tersebut menggunakan konten yang
berisi berbagai variasi macam desain termasuk typeface, elemen grafis, fotografi
maupun ilustrasi (Evans & Thomas, 2013: 5).
Menurut Poulin (2011: 141) Variasi dan kesatuan pada dasarnya adalah
kombinasi bentuk visual dan juga psikologis seseorang yang menjaga jarak antara
bentuk elemen-elemen formal pada desain serta ekspresi yang terdapat di dalamnya,
seperti keresahan, kegembiraan, stres, kesedihan dan lainnya. Dalam mengelola
variasi elemen yang terdapat pada sebuah desain, terdapat pertimbangan dalam
menentukan elemen mana yang tidak ditampilkan, yang memiliki kesamaan, dan
batas penggunaan variasi, sebab terlalu banyak variasi menyebabkan kebingunan
ketika penonton melihatnya.
22
Gambar 2.2 Contoh Prinsip Unity dan Variety (invisionapp.com/design-defined)
2. Hierarchy
Fungsi penting dari satu kesatuan desain adalah bagaimana desainer
mengatur hierarchy atau hierarki visual pada komposisi desain. Hierarki mengacu
pada pengaturan urutan yang akan menjadi titik fokus penonton, dan penekanan
yang berlaku dari satu elemen terhadap elemen lainnya yang diperlukan untuk
mengarahkan mata penonton untuk melihat terlebih dahulu objek visual dalam
suatu desain agar penonton dapat menyerap informasi yang ingin disampaikan oleh
desainer sepenuhnya (Evans & Thomas, 2013: 7).
Gambar 2.3 Contoh Prinsip Hierarchy (invisionapp.com/design-defined)
23
3. Contrast
Contrast atau kontras adalah prinsip desain yang pada dasarnya dibuat
untuk memberikan perbedaan yang mudah dilihat antara dua objek, seperti besar
dan kecil, merah dan hijau, gelap dan terang atau panas dan dingin. Dalam
komunikasi visual kontras adalah karakteristik visual yang tampak perbedaannya
yang membuat suatu objek (atau representasi dari gambar) dapat dibedakan dan
berbeda dari objek lainnya dalam komposisi (Poulin, 2011: 188).
Gambar 2.4 Contoh Prinsip Contrast (invisionapp.com/design-defined)
4. Proportion
Proportion atau dapat disebut dengan proporsi mengacu pada hubungan
ukuran dalam suatu komposisi, hubungan itu berfungsi sebagai struktur yang
mendasari desain permukaan. Hal ini berkaitan dengan perbandingan satu bagian
terhadap keseluruhan atau satu bagian dengan bagian yang lainnya (Evans &
Thomas, 2013: 9).
Dalam Poulin (2011: 218) proporsi adalah hubungan sistematis dari satu hal
ke hal lainnya. Dalam bidang komunikasi visual, proporsi adalah prinsip desain
24
yang penting dan didefinisikan sebagai hubungan integral antara ukuran dalam
suatu komposisi. Proporsi berfungsi sebagai kerangka yang mendasari semua
elemen pada suatu komposisi.
Gambar 2.5 Contoh Prinsip Proportion (invisionapp.com/design-defined)
5. Balance
Menurut Poulin (2011: 113), keseimbangan merupakan prinsip yang
mendistribusikan elemen visual dalam komposisi. Terdapat empat tipe dari
keseimbangan visual, yaitu symmetrical, asymmetrical, radial, dan
crystallographic. Keseimbangan terjadi saat elemen visual dengan komposisi
sebanding nilainya ketika terdistribusi dan teratur untuk mengkomunikasikan suatu
perasaan stabil dan selaras.
25
Gambar 2.6 Contoh Prinsip Balance (invisionapp.com/design-defined)
2.1.1.4 Bahasa Rupa
Darmawan (2005: 16) bahasa rupa sendiri digunakan untuk dapat
menghubungkan karya yang kasat mata dan juga merupakan sebagai media
perantara seniman dengan penonton untuk dapat berkomunikasi. Jika diadaptasi
dari Tabrani (2005: 9-10, 62, 69-74 dalam Harto dan Fanani, 2016: 553), maka
bahasa rupa adalah bahasa yang tampil secara visual atau kasat mata. pada karya
naratif atau reprentatif yang digunakan oleh para desainer dalam menciptakan
karyanya agar komunikatif, sehingga dapat menyampaikan informasi dan pesan
kepada audiens. Dengan demikian bahasa rupa bisa digunakan untuk dasar
penciptaan karya seni rupa atau desain maupun untuk menganalisis karya seni rupa/
desain yang naratif atau representatif, misalnya; lukisan, poster, iklan, cover buku,
leaflet, relief, baliho, pop-up, billboard, neon box, papan nama, papan reklame,
komik, karikatur, kartun, film atau video, animasi, iklan tayang, multimedia
interaktif, game, patung atau arca, ambient media, dll. Sehingga, bahasa rupa ini
tidak berlaku bagi karya Seni Rupa yang abstrak (non naratif/non representatif).
Tiga hal terpenting dalam bahasa rupa adalah isi wimba (isi cerita/pesan/informasi),
26
cara wimba (cara mencandra atau mengidentifikasi suatu wimba), dan tata
ungkapan (grammar). Wimba dapat disamakan dengan imaji. Cara wimba dan tata
ungkapan memiliki banyak cara yang ada di dalamnya yang dapat digunakan untuk
dasar merancang karya Seni Rupa atau pun digunakan untuk menganalisis karya
Seni Rupa.
Dalam bahasa rupa terdapat cara-cara yang digolongkan menjadi dua acara,
yaitu cara wimba (image ways) dan tata ungkapan (grammar). Dalam wimba dibagi
lagi menjadi dua jenis, yaitu isi wimba dengan cara wimba. Isi wimba adalah objek
yang digambar, sedangkan cara wimba adalah cara objek itu digambar. Tata
ungkapan adalah cara menyusun berbagai wimba dan cara wimba agar gambar
tersebut dapat berkomunikasi.
Menurut Tabrani dalam Harto (2012: 628), cara-cara dalam bahasa rupa
dapat digolongkan menjadi dua acara yaitu cara wimba (image ways) dan tata
ungkapan (grammar). Berikut adalah bagan cara-cara dalam bahasa rupa:
27
Gambar 2.7 Bagan Cara Wimba (Harto, 2012: 628)
28
Gambar 2.8 Bagan Tata Ungkapan (Harto, 2012: 629)
2.2 Merek (Brand)
Menurut Kotler & Keller (dalam Venessa & Arifin, 2017: 45) merek adalah
produk atau jasa yang dimensinya mendiferensiasikan merek tersebut dengan
beberapa cara dari produk atau jasa lainnya yang dirancang untuk memuaskan
29
konsumen. Sedangkan menurut Tjiptono (2008: 104) menjelaskan bahwa suatu
merek adalah janji penjual untuk menyampaikan kumpulan sifat, manfaat dan jasa
spesifik secara konsisten kepada pembeli.
Ketika kompetisi menciptakan pilihan yang tidak terbatas, maka perusahaan
mencari cara untuk terhubung secara emosional dengan konsumen, ingin menjadi
yang tidak tergantikan dan menciptakan hubungan seumur hidup. Sebuah merek
yang kuat akan menonjol di segmen pasar. Orang-orang akan jatuh cinta pada
merek tersebut dan mempercayai pada keunggulan merek tersebut. Bagaimana
suatu merek dipersepsikan memengaruhi keberhasilannya, terlepas apakah itu
sebuah start-up, sebuah organisasi nirlaba atau sebuah produk (Wheeler, 2012: 2).
Kotler (dalam Noviandhi, 2012: 19), American Marketing Association
(AMA) mendefinisikan sebuah merek sebagai nama, tanda pengenal, simbol,
desain atau kombinasi dari semuanya yang berfungsi sebagai bentuk identifikasi
sebuah produk atau jasa sebuah atau sekelompok penjual yang dapat membedakan
mereka dari kompetitornya.
Jika definisi merek dibatasi sebagai nama, tanda, simbol, desain atau
kombinasi dari semuanya maka jika pemasar membuat baru komponen tersebut
dapat dikatakan mereka telah menciptakan produk baru (Keller, 2003: 3). Saat
membuat merek, proses disiplin yang digunakan untuk membangun kesadaran dan
untuk memperluas loyalitas pelanggan. Memanfaatkan setiap setiap kesempatan
untuk mengungkapkan mengapa calon konsumen harus memilih satu merek
daripada merek lainnya. Dan menumbuhkan keinginan untuk memimpin,
melampaui puncak segmen pasar dan memberi para pekerja alat terbaik untuk
30
menjangkau konsumen adalah alasan kenapa perusahaan memanfaatkan merek
(Wheeler, 2012: 6).
Merek-merek yang paling berkesan di dunia cenderung membedakan diri
mereka dalam konotasi bukan hanya denotasi dari segi proposisi nilai. Dalam
membangun merek mereka berusaha keras untuk menciptakan konotasi yang tepat
untuk merek dalam pikiran target audiensnya (Budelmann dkk, 2010: 84).
Walaupun gagasan mengenai reputasi perusahaan bukanlah hal baru di kalangan
pemasaran, dengan menghubungkan berbagai inisiatif merek untuk efek psikologis
kumulatif pada target audiens dapat dikategorikan sebagai pekerjaan yang dapat
membangun identitas merek. Dimulai dan diakhiri dengan apa yang akan dipikirkan
orang atau lebih tepatnya apa yang dapat menginspirasi suatu merek untuk
dipikirkan orang.
2.2.1 Merek dalam Lingkup Aplikasi Mobile
Menggunakan perangkat smartphone dan tablet sudah menjadi kebiasaan
hampir semua orang kemana pun mereka pergi. Mulai dari mengirim pesan teks,
memeriksa email, membandingkan harga, menonton video, membaca berita
ataupun menjalankan bisnis. Di saat smartphone dan tablet menjadi lebih cerdas,
interaktif dan intuitif, semua bergerak maju untuk berlomba mengembangkan
merek mereka agar dapat mengikuti segmen pasar (Wheeler, 2012: 72).
Perusahaan yang progresif akan menargetkan sasaran secara agresif dalam
membangun merek digital, mengambil kesempatan untuk bereksperimen dengan
model baru untuk menyiapkan merek terhadap perubahan kondisi yang akan terjadi.
31
Terdapat banyak kesempatan untuk memainkan elemen-elemen interaksi yang
terdapat pada perangkat-perangkat saat ini (Budelmann dkk, 2010: 102).
2.2.2 Pengembangan Merek
Trott (dalam Wijaya & Mustamu, 2013: 2) mengemukakan bahwa
pengembangan merek dan inovasi merupakan sebuah hal penting yang harus
dilakukan perusahaan secara berkala guna meningkatkan nilai dari perusahaan
tersebut karena suatu perusahaan yang menjalankan suatu bisnis pasti memiliki
pesaing. Maka dari itu proses ini penting agar perusahaan mempunyai produk yang
berbeda dari pesaing dan memiliki keunggulan tertentu yang dapat menarik orang
untuk menjadi konsumennya.
Ulrich & Steven (dalam Rini, 2013: 31) menjelaskan pengembangan merek
merupakan serangkaian aktivitas yang dimulai dari analisis persepsi dan peluang
pasar. Setelah itu dilanjutkan dengan tahap produksi, penjualan, dan pengiriman
produk.
Rini (2013: 31) menjelaskan bahwa pengembangan produk merupakan
aktivitas yang wajib dilakukan secara berkala sesuai dengan kebutuhan suatu
perusahaan. Membutuhkan kontribusi dari hampir semua fungsi yang ada di
perusahaan, namun tiga fungsi yang selalu paling penting bagi proyek
pengembangan produk, yaitu:
1. Pemasaran
Fungsi pemasaran adalah menjembatani interaksi antara manusia dengan
konsumen. Peranan lainnya adalah memfasilitasi proses identifikasi peluang
produk, pendefinisian segmen pasar dan identifikasi kebutuhan konsumen. Pada
32
bagian ini pula secara khusus merancang komunikasi antara perusahaan dengan
konsumen, menetapkan target harga pada produk, serta merancangan bagaimana
promosi produk untuk memperkenalkannya secara umum.
2. Perancangan (design)
Fungsi perancangan merupakan peran penting dalam menyampaikan pesan
dalam bentuk fisik produk agar dapat memenuhi kebutuhan konsumen sesuai
dengan target perusahaan. Dalam konteks tersebut tugas bagian perancangan
mencakup desain engineering (mekanik, elektrik, software dan lain-lain) dan desain
industri (estetika, visual identity, user interface dan lain-lain).
3. Manufaktur
Fungsi manufaktur adalah bertanggung jawab untuk merancang dan
mengoperasikan sistem produksi pada proses produksi produk. Secara umum fungsi
manufaktur seringkali dihubungkan dengan pembelian, distribusi dan instalasi.
Dengan demikian, dari beberapa pendapat tersebut dapat disimpulkan bahwa
pengembangan produk bentuk usaha yang direncanakan untuk memenuhi dan
memperbaiki produk atau jasa yang ada, dapat berupa citra produk atau jasa,
menambah variasi, memperbaiki. Agar dapat mengikuti perubahan yang terjadi dan
tetap masuk dalam segmen pasar.
2.2.3 Tujuan Pengembangan Merek
Rini (2013: 32) menjelaskan pengembangan merek yang dilaksanakan oleh
perusahaan dimaksudkan untuk:
33
a. Mempertahankan posisi pangsa pasar (market share), yaitu untuk mencapai
tujuan dari perusahaan tersebut diperlukan strategi untuk memperkenalkan
produk baru atau memperbaharui produk-produk yang sudah ada.
b. Mengembangkan lebih lanjut posisi perusahaan sebagai inovator, sehingga
untuk mencapai tujuan ini perusahaan perlu menjalankan strategi untuk
memperkenalkan produk-produk yang baru dan memiliki kelebihan atau
sesuatu yang tidak dimiliki oleh kompetitor, tidak hanya mengembangkan
produk yang sudah ada.
c. Memperoleh laba yang diinginkan melalui volume penjualan yang
ditingkatkan, suatu perusahaan harus memperbaiki ataupun menambah
produk-produk yang dihasilkannya berdasarkan dua fungsi dasar, yaitu
pemasaran dan inovasi baru.
2.2.4 Karakteristik Pengembangan Merek
Menurut Kotler & Keller (2009: 309), pengembangan produk memiliki
karakteristik, yaitu:
a. Keunggulan relatif (relative advantage), yaitu sejauh mana pengembangan
dapat membuat produk tampak lebih baik daripada sebelumnya.
b. Kesesuaian (compability), yaitu sejauh mana tingkat kesesuaian produk
ketika itu dikembangkan diukur dengan nilai dan pengalaman seseorang.
c. Kerumitan (complexity), yaitu sejauh mana tingkat kesulitan dalam
pengembangan produk yang telah dilakukan dan dipahami atau digunakan
oleh konsumen.
34
d. Kemampuan dipisahkan (disivibility), yaitu sejauh mana hasil
pengembangan dari produk dicoba oleh konsumen secara terbatas.
e. Kemampuan komunikasi (communicability), yaitu sejauh mana manfaat
penggunaan yang dapat dilihat atau digambarkan kepada orang lain.
2.3 Interaksi Sosial
Dalam menghadapi dunia sekitar individu tidak bersikap pasif melainkan
bersifat aktif, yang berarti berusaha mempengaruhi, menguasai, mengubah dalam
batas-batas kemungkinannya. Begitu juga sebaliknya, alam sekitar mempunyai
peranan terhadap individu, artinya individu mempengaruhi individu, tingkah laku,
perbuatan, pikiran, sikap, perasaan, kemauan dan sebagainya (Ahmadi, 1979: 25).
Interaksi sosial merupakan hubungan dinamis yang menyangkut hubungan
antar individu, antar kelompok, maupun antar individu dengan kelompok. Interaksi
sosial adalah suatu hubungan antara dua atau lebih individu, dimana perilaku
individu yang satu mempengaruhi, mengubah atau memperbaiki perilaku individu
yang lain atau sebaliknya (Haryanto & Nugroho, 2011: 215).
Dengan demikian interaksi sosial merupakan berbagai hal yang
berhubungan dengan sosial, yang dimana hal ini berkaitan dengan hubungan antar
individu, hubungan antara satu kelompok dengan kelompok lainnya. Proses sosial
adalah salah satu interaksi timbal balik (feedback) atau dapat disebut dengan
hubungan yang saling mempengaruhi antara manusia yang satu dengan manusia
lainnya
35
2.3.1 Bentuk Interaksi Sosial
Soekanto (dalam Fatnar & Anam, 2014: 72) syarat-syarat yang dapat
mempengaruhi proses terjadinya interaksi sosial diantaranya:
1. Kerja Sama
Dapat diartikan sebagai suatu usaha bersama antara perorangan ataupun
kelompok untuk mencapai suatu tujuan yang telah ditetapkan dan anggota dari
kelompok tersebut bersedia melakukannya.
2. Akomodasi
Merupakan suatu proses dimana individu antar individu saling bertentangan
terhadap suatu pernyataan atau keadaan, kemudian saling mengadakan penyesuaian
diri untuk mengatasi ketegangan-ketegangan yang terjadi terhadap perbedaan
tersebut.
3. Persaingan
Dapat diartikan sebagai suatu proses dimana individua tau kelompok
bersaing mencari keuntungan melalui bidang kehidupan dengan cara menarik
perhatian atau mempertajam prasangka yang telah ada, tanpa mempergunakan
kekerasan atau ancaman.
4. Konflik atau Pertentangan
Ketika suatu proses sosial dimana individu atau kelompok berusaha
memenuhi tujuan dengan jalan yang menentang pihak lawan dengan ancaman atau
kekerasan.
36
2.3.2 Interaksi Sosial dalam User Experience
Pada hari-hari awal web sudah banyak digunakan, pengalaman dalam
bersosial yang biasa disebut dengan komunitas dan umumnya terdiri dari message
boards, grup dan dunia virtual. Fitur komunitas memungkinkan pengguna untuk
berbicara dan berinteraksi satu sama lain, dan koneksi diantara orang-orang
biasanya didasarkan pada topik yang sesuai.
Secara metaforis, media sosial beroperasi dengan cara yang serupa.
Halaman sign up yang dirancang dengan baik akan memiliki dampak langsung
secara nyata yang memunculkan perasaan apakah calon pengguna merasa diundang
dan didorong untuk bergabung pada situs tersebut. Kasus tersebut merupakan salah
satu contoh interface yang perlu ditentukan pada sebuah produk (Shneiderman dkk,
2016: 25). Mengenai masalah perancangan mengenai halaman-halaman user
interface akan dilanjutkan pada BAB IV.
2.4 Aplikasi Mobile
Aplikasi adalah suatu program atau perangkat lunak yang siap untuk
digunakan, diciptakan untuk melaksanakan suatu fungsi tertentu bagi pengguna jasa
aplikasi serta penggunaan aplikasi lain yang dapat digunakan oleh suatu sasaran
yang akan dituju. Aplikasi juga memiliki arti pemecahan masalah yang
menggunakan salah satu teknik pemrosesan data aplikasi yang biasanya berpacu
pada sebuah komputansi maupun pemrosesan data yang diharapkan (Juansyah,
2015: 2).
Aplikasi adalah satu unit perangkat lunak yang dibuat untuk melayani
kebutuhan akan beberapa aktivitas. Banyak jenis aplikasi pada smartphone yang
37
berfungsi untuk melayani kebutuhan aktivitas, diantaranya komunikasi antar
manusia, mencari informasi atau ilmu, untuk berbelanja, memutar musik ataupun
video, melakukan kegiatan bisnis dan mengatur keuangan, utilitas dan
produktifitas, membaca berita, update terbaru seputar olahraga, bermain game dan
masih banyak lagi berbagai jenis aplikasi yang sedang dikembangkan untuk
memenuhi kebutuhan manusia (Spath, 2018: 7)
Menurut Pressman & Bruce (2014: 9). Mobile apps atau mobile application
merupakan program komputer yang khusus dibuat untuk dijalankan pada perangkat
genggam ponsel atau tablet. aplikasi yang telah dirancang khusus untuk platform
mobile (misalnya iOS, Android, atau Windows Mobile).
2.4.1 Jenis Aplikasi Mobile
Permana (2016) pemilihan jenis aplikasi mobile tergantung pada prioritas
dan faktor-faktor tertentu. dalam membantu jenis aplikasi mana yang tepat, karena
dalam jenis aplikasi mobile terdapat kelebihan dan kekurangan yang dapat
disesuaikan dengan kebutuhan.
Menurut Banga & Weinhold (2014: 82) pada tingkatan yang paling dasar,
aplikasi terbagi dalam tiga jenis umum terlepas dari jenis platform, yaitu native,
web dan hybrid. Dalam catatan perangkat yang menjalankan suatu aplikasi
memiliki kemampuan untuk memuat perangkat lunak dan mengakses internet.
Memahami jenis aplikasi membantu desainer untuk mengetahui proses bagaimana
interface dibuat.
38
2.4.1.1 Native App
Native app dikembangkan khusus untuk perangkat tertentu dan tidak
bersifat universal yang dapat digunakan pada semua sistem operasi. Seperti aplikasi
yang dibuat untuk sistem operasi iOS yang menggunakan Objective-C atau untuk
sistem operasi Android yang menggunakan Java atau C/C++. Native app adalah
jenis aplikasi yang paling ampuh karena dapat mengakses fungsi perangkat
smartphone atau tablet seperti GPS, sensor gerak, kamera, NFC dan lain-lain. Serta
pada native app memungkinkan integrasi animasi yang lebih baik, rendering objek
3D tingkat lanjut dan hal lainnya. (Banga & Weinhold, 2014: 82).
Perangkat Android dan iOS masing-masing memiliki sistem operasi dan
perangkat keras yang berbeda, serta interaksi yang dapat dilakukan pada perangkat
juga memiliki beberapa perbedaan. Bahkan Android dan iOS memiliki desain
guidelinenya masing-masing yang berbeda satu sama lainnya. Untuk sepenuhnya
memaksimalkan sistem operasi dan juga perangkat keras yang terdapat pada
keduanya, desainer harus merancang desain untuk memenuhi karakteristik yang
terdapat pada salah satu perangkat yang ingin dituju (Iversen & Eierman, 2014: 21).
2.4.1.2 Web App
Web App merupakan jenis aplikasi mobile yang dapat dijalankan pada
perangkat mana saja, yang dibutuhkan adalah browser web yang terdapat di
perangkat. Web app pada dasarnya adalah sebuah website yang memiliki user
interface yang hampir serupa dengan native app serta dibuat menggunakan HTML5
sama seperti sebuah website (Heckman, 2016: 5).
39
Kelebihan utama web app yang dapat dijalankan di hampir semua ponsel,
tablet, atau komputer juga memiliki rintangan besar yang harus diatasi. Desainer
tidak memiliki akses untuk menggunakan framework dan material design yang
disediakan oleh Apple atau Google. Desainer harus membuat user interface sendiri
sepenuhnya dari awal (Banga & Weinhold, 2014: 83).
2.4.1.3 Hybrid App
Hybrid app merupakan aplikasi dari penggabungan native app dan web app.
Keuntungan dari menggunakan jenis hybrid app adalah sifatnya yang fleksibel
karena menggunakan kode umum yang dapat digunakan pada lintas platform dan
juga dapat disesuaikan dengan atribut yang diperlukan seperti dapat menyesuaikan
material design pada Android dan iOS (Banga & Weinhold, 2014: 85).
Sama seperti native app, hybrid app dapat didistribusikan melalui Google
Play Store atau Apple App Store. Serta menggunakan halaman seperti pada web
app yang dibuat menggunakan HTML5 atau dapat dikatakan hybrid app adalah web
app yang ditransformasikan menjadi kode native app pada sebuah platform seperti
Android atau iOS. Karena berbasis sebuah halaman web, dalam membuka setiap
halaman ditentukan oleh kecepatan internet si pengguna itu sendiri karena memuat
pula aset-aset yang terdapat pada user interfacenya (Eisenman, 2018: 39).
2.5 User Interface (UI)
User interface adalah cara program dan pengguna untuk berinteraksi. Dapat
diartikan bahwa user interface merupakan cara pengguna untuk berinteraksi dengan
komputer, smartphone, tablet atau perangkat lainnya yang berbentuk visual,
mampu dimengerti oleh pengguna aplikasi tersebut, dan diprogram sedemikian
40
rupa agar dapat terbaca oleh sistem dan dapat menjalankan perintah yang tepat
(Thornsby, 2016: 8).
Desain interface merupakan proses kompleks yang melibatkan desainer,
target audiens, dan client. Merupakan proses berulang, dengan fase penelitian
pengguna, mengembangan ide, mencoba, membangun dan melakukan pengujian
lebih lanjut, semuanya berkontribusi dalam membuat desain interaktif untuk
memperoleh pengalaman pengguna yang tepat (Wood, 2014: 10).
User interface yang baik mampu memberikan pengalaman interaksi
terhadap aplikasi dengan mudah oleh pengguna (user friendly), karena memiliki
peranan penting pada sebuah aplikasi yaitu sebagai penghubung antara pengguna
dengan sistem aplikasi itu sendiri serta sebagai faktor kesuksesan aplikasi. Jika user
interface pada aplikasi mudah digunakan, maka pengguna enggan untuk beralih
pada aplikasi serupa, sebaliknya jika aplikasi memiliki user interface yang sulit
untuk dipahami pengguna, maka besar kemungkinan aplikasi itu akan ditinggalkan
(Railean, 2017: 25).
Pada awal teknologi komputer dibuat, komputer dijalankan melalui perintah
berupa teks yang menyulitkan pengguna awam karena memerlukan pengetahuan
lebih untuk menjalan suatu perintah pada sistem. Maka memantik para ahli untuk
mengembangkan sesuatu yang dapat digunakan hampir semua orang yang bahkan
minim pengetahuan dalam menggunakan komputer, dapat mengoperasikan
komputer secara praktis. Mcleod & Schell (2008: 34), pada bagian ini terjadi dialog
antara program dan pemakai, yang memungkinkan sistem pakar menerima instruksi
41
dan informasi (input) dari pemakai, juga memberikan informasi (output) kepada
pemakai.
Memiliki desain user interface yang baik merupakan suatu hal yang penting,
karena penggunaan perangkat smartphone tidak dapat dipungkiri sudah menjadi
kebiasaan manusia sehari-hari pada umumnnya. Kebutuhan desain dan
pengembangan user interface yang mendukung tugas-tugas manusia dan dapat
digunakan dengan mudah oleh berbagai jenis kalangan telah menjadi permasalahan
yang penting. Dalam hal membangun citra merek, user interface yang baik dapat
menghasilkan hasil positif seperti meningkatnya jumlah pengguna, menumbuhkan
kepercayaan terhadap aplikasi dan kepuasan pengguna yang secara tidak langsung
menjadi promosi melalui mulut ke mulut. Selain itu tampilan sistem yang mudah
dipahami membutuhkan waktu yang lebih sedikit untuk para pengguna mempelajari
sebuah aplikasi dan menghindari stres ketika pengguna mengoperasikannya (Stone
dkk, 2005: 6).
2.5.1 Strategi Perancangan User Interface
Desain interface adalah proses kompleks yang melibatkan desainer, target
pengguna dan client. Proses yang dilakukan secara berulang dengan fase dimulai
dari riset calon pengguna, pencarian ide, uji coba terhadap ide, merancang dan uji
coba rancangan. Proses-proses tersebut memberikan kontribusi untuk
menghasilkan desain yang interaktif serta efektif (Wood, 2014: 10).
User interface harus memberikan bahasa visual yang tepat agar pengguna
dapat berinteraksi dengan serangakaian bentuk visual yang akan diterjemahkan
42
menjadi bentuk perintah. Menurut Railean (2017: 64), strategi perancangan user
interface diukur dari 5 poin berikut, yaitu:
a. Time to Learn
Seberapa lama waktu pengguna untuk mempelajari atau memahami user
interface yang disuguhkan. Terutama pengguna-pengguna yang memiliki
keterbatasan akan pengetahuan bahasa atau cara mengoperasikan suatu perangkat.
b. Speed of Performance
Ketika merancang user interface desainer harus memikirkan cara agar
desain yang mereka buat tidak membuat performa aplikasi menurun dan membuat
interaksi yang terdapat user interface tidak membuang-buang waktu pengguna.
c. Rate of Errors by Users
Memperhatikan seberapa banyak jumlah dan jenis kesalahan ketika
pengguna menggunakan user interface yang telah dirancang. Karena desain user
interface yang baik adalah tampilan yang dapat dimengerti hampir semua orang.
d. Retention Over Time
Seberapa baik para pengguna mempertahankan pengetahuan atau ingatan
mereka pada user interface yang telah dirancang. Retensi terkait dengan waktu
pengguna untuk belajar user interface dan frekuensi penggunaan juga berperan
penting.
e. Subjective Satisfaction
Kepuasan pengguna saat menggunakan user interface dalam berbagai aspek
merupakan keuntungan pada sebuah aplikasi. Walaupun bersifat subjektif, tapi
43
memiliki dampak yang cukup besar yang menjadi salah satu penentu kesuksesan
pada sebuah aplikasi.
2.5.2 Prinsip-Prinsip User Interface
Stone dkk (2005: 89) menekankan bahwa untuk desain user interface yang
efektif, desainer perlu mengetahui tentang target pengguna dan harus merancang
secara berulang. Desainer perlu mengetahui dan mempertimbangkan informasi
lainnya. Informasi ini berasal dari dua sumber, yaitu:
a. Aktivitas pengumpulan informasi dan analisis yang akan membentuk
gambaran dari desain user interface serta proses pengembangannya.
b. Pengetahuan desain user interface yang sebagian berasal dari teori, seperti
bidang dari beberapa cabang ilmu dan sebagian dari pengalaman.
Gambar 2.9 Situasi yang Sering Terjadi pada Pengguna (User Interface Design
and Evaluation, Stone dkk, 2005)
Menurut Shneiderman dkk (2016: 95) terdapat delapan prinsip yang disebut
dengan “golden rules”, yang sebagian besar diterapkan pada user interface. Prinsip-
prinsip ini berasal dari pengalaman dan telah disempurnakan selama tiga dekade,
44
membutuhkan validasi dan penyetelan pada kasus desain tertentu. Berikut adalah
prinsip-prinsip user interface menurut Schneidermann, diantaranya adalah:
1. Strive for Consistency
Konsistensi berguna untuk membuat para pengguna agar lebih cepat
familiar dengan aplikasi yang dirancang. Seperti urutan dalam mengambil tindakan
dalam berbagai situasi yang dapat dilakukan oleh pengguna atau terminologi yang
identik harus menggunakan prompt, menu, warna, tata letak, huruf dan sebagainya
dengan bentuk yang serupa.
2. Seek Universal Usability
Kenali kebutuhan berbagai pengguna dan desain untuk memfasilitasi
transformasi konten. Seperti perbedaan antara pengguna yang sudah expert hingga
pemula, rentang usia, pengguna yang disabilitas, dan keragaman teknologi itu
sendiri.
3. Offer Informative Feedback
Untuk setiap interaksi yang dilakukan oleh pengguna, harus ada umpan
balik terhadap user interface. Untuk tindakan yang sering dilakukan, responnya
bisa sederhana, sedangkan untuk tindakan yang jarang dan besar, responnya harus
lebih substansial.
4. Design Dialogs to Yield Closure
Urutan dari segala interaksi harus diatur dalam kelompok-kelompok dengan
awalan (beginning), pertengahan (middle) dan akhir (end). Feedback yang
informatif pada dalam kelengkapan kelompok-kelompok tersebut dapat
45
memberikan kepuasan, rasa yang lega, dan sebuah indikator untuk mempersiapkan
untuk tindakan selanjutnya.
5. Prevent Errors
Jika pengguna membuat kesalahan ketika mengoperasikan user interface,
maka user interface harus menawarkan intruksi yang sederhana, konsturktif dan
spesifik. Tindakan tidak sesuai yang dilakukan oleh pengguna, harusnya tidak
membuat keadaan user interface berubah, tetapi memberikan instruksi bagaimana
cara memperbaikinya.
6. Permit Easy Reversal of Actions
Tindakan yang telah dilakukan oleh pengguna dapat dibatalkan merupakan
solusi untuk mengurangi rasa stres dan kecemasan pengguna, karena pengguna tahu
ketika mengalami kesalahan, tindakan tersebut dapat dibatalkan. Unit reversibilitas
dapat berupa single action, tugas mengentri data, atau sekelompok tindakan seperti
pada entri pada kolom nama, alamat dan lain-lain.
7. Keep Users in Control
Pengguna yang berpengalaman sangat menginginkan perasaan bahwa
mereka yang bertanggung jawab atas user interface dan juga user interface
merespon tindakan mereka. Mereka tidak menginginkan kejutan atau perubahan
dalam perilaku yang sudah familiar dan akan terganggu oleh urutan entri data yang
membosankan, kesulitan dalam mendapatkan informasi yang diperlukan dan
ketidakmampuan untuk menghasilkan hasil yang diinginkan.
46
8. Reduce Short-Term Memory Load
Kapasitas memori jangka pendek manusia yang terbatas untuk melakukan
pemrosesan informasi mengharuskan desainer menghindari untuk merancang
interface di mana pengguna harus mengingat informasi dari satu layar dan
kemudian menggunakan informasi itu pada tampilan yang lain.
2.5.3 Style Guide untuk User Interface
Menurut Iversen & Eierman (2014: 12), merancang desain untuk perangkat
tertentu yang akan dijalankan oleh aplikasi nantinya sangatlah penting. Seperti
kasus aplikasi yang berfungsi sangat baik pada komputer mungkin akan menjadi
bencana jika diterapkan pada smartphone tanpa mendesain ulang bentuk user
interface agar sesuai dengan bentuk dan kemampuan perangkat.
Untuk banyak organisasi dan di banyak negara, mungkin ketika membuat
desain user interface diharuskan oleh hukum untuk memperhitungkan kebutuhan
khusus orang-orang disabilitas, Bahkan jika itu bukan bagian dari persyaratan
hukum, mempraktekkan cara tersebut merupakan langkah yang baik (Heckman,
2016:18).
Stone dkk, (2005: 168) menekankan bahwa style guide dapat memberikan
konvensi dasar untuk produk tertentu atau untuk keluarga dari keluaran produk
tersebut. Style guide mencakup mengenai deskripsi gaya interaksi yang diperlukan
dan kontrol terhadap user interface yang mencakup tampilan (appearance) dan rasa
(behavior). Menurut Stone dkk, ada dua jenis style guide, yaitu:
47
1. Commercial Style Guide
Commercial style guide biasanya diproduksi oleh suatu organisasi atau
vendor dan dibuat untuk kebutuhan komerisal. Mereka terdiri dari aturan desain
yaitu intruksi yang sangat spesifik dan dapat diikuti dengan minimum interpretasi
atau terjemahan oleh desainer. Karena commercial style guide sangat spesifik,
mereka hanya berlaku dalam kaitannya dengan platform pada sistem tertentu atau
kelas sistem. Berikut merupakan contoh yang populer:
a. Apple Human Interface Guidelines for the Macintosh,
http://developer.apple.com/documentation/UserExperience/Conceptual/
OSXHIGuidelines
b. Microsoft Windows XP User Interface Guidelines,
http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.ms
px
c. IBM’s Common User Access (CUA) Guidelines,
www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/558
d. Motif formed the basis for Sun Microsystems’ GUIs in the early 1990s,
http://w3ppl.gov/misc/motif/MotifStyleGuide/en_US/TOC.html
e. Sun Microsystems’ Java Look and Feel Design Guidelines,
http://java.sun.com/products/jlf/ed2/book/HIGTitle.html
2. Customized Style Guide
Berguna untuk menyatukan semua prinsip desain, guidelines dan aturan
yang relevan dengan user interface. Berasal dari standar user interface, style guide,
prinsip-prinsip desain dan pedoman yang telah dikembangkan oleh para peneliti
48
akademis serta praktisi. Kemudian dapat bertindak sebagai style guide yang dapat
disesuaikan dengan user interface yang sedang dikembangkan. Isi dari customized
style guide akan bervariasi sesuai dengan keadaan yang terjadi. Karena perlu
mempertimbangkan karakteristik pengguna, tugas mereka dan lingkungan dimana
mereka akan bekerja. Menggunakan gaya kebutuhan memiliki beberapa kelebihan
diantaranya:
a. Membantu dalam proses membuat desain dan anggota tim desain lainnya
untuk fokus pada masalah desain di awal proses pengembangan.
b. Mengembangkan panduan gaya kebutuhan pada awal siklus pengembangan
akan memungkinkan untuk menggunakan prinsip dan guidelines untuk
memengaruhi pengumpulan persyaratan. Sebagai contoh, satu prinsip
desain mengenai warna harus digunakan dengan hati-hati jika pengguna
sebagian besar adalah laki-laki (karena kebutaan warna umumnya dialami
oleh pengguna yang berjenis kelamin laki-laki).
c. Dapat mengarahkan untuk pengambilan keputusan selama proses desain.
Hal ini juga dapat berfungsi sebagai catatan keputusan desain yang telah
diambil dan kendala desain yang telah diidentifikasi.
d. Membantu memastikan konsistensi di seluruh user interface, yang akan
membantu meningkatkan nilai kegunaan pada user interface.
e. Jika digunakan diseluruh organisasi, akan membantu untuk memberikan
corporate look ke seluruh user interface.
49
2.6 User Experience (UX)
Menurut Winter (dalam Munthe dkk, 2018: 2680) user experience adalah
bagaimana perasaan pengguna terhadap setiap interaksi yang sedang pengguna
hadapi dengan apa yang ada di depan pengguna saat menggunakannya. Untuk
mendapatkan user experience yang baik, maka sebuah produk harus memiliki
kesesuaian antara fitur produk dengan kebutuhan si pengguna. Hal ini yang akan
menentukan apakah produk tersebut bernilai atau sebaliknya. Lalu jika produk
mudah ditemukan dan mudah digunakan pada saat pengguna memakainya saat
pertama kali, maka produk tersebut dapa membuat perasaan pengguna senang saat
menggunakannya.
Umumnya orang berpikir user experience adalah cara terbaru untuk
merujuk pada gagasan mengenai kegunaan yang sudah dipikirkan dan didesain
secara tepat. Tetapi user experience jauh lebih dari sekedar kegunaan. User
experience berupaya untuk mengarahkan kembali para desainer dalam
mempertimbangkan bagaimana cara untuk memengaruhi respon emosional
pengguna dan mengembangkan sesuatu yang memiliki makna atau nilai nyata bagi
orang-orang ketika mereka melakukan aktivitas sehari-hari (Robinson dkk, 2015:
5).
Menurut standar ISO 9241-210:2019 user experience didefinisikan sebagai
persepsi dan tanggapan seseorang yang dihasilkan dari penggunaan atau
penggunaan produk, sistem atau layanan yang diantisipasi.
Dalam Stone dkk (2005: 15) satu kelompok dari peneliti Human-Interaction
Computer (HCI) melakukan survei terhadap 275 profesional dan akademisi user
50
experience untuk mengetahui apa arti dari pengalaman pengguna (user experience).
Setelah menganalisis jawaban responden, mereka mengidentifikasi beberapa fitur
umum dalam definisi orang mengenai kontribusi user experience, berikut:
a. User experience dipandang sebagai respon sesorang ketika mereka
menggunakan perangkat, produk, layanan atau objek melalui user interface.
b. User experience bersifat dinamis, sehingga dapat berubah sebelum, selama
atau setelah digunakan dan itu tergantung pada konteks atau pengalaman
ketika menggunakan perangkat, produk, layanan dan objek.
c. Respon user experience yang bersifat subjektif. Dipengaruhi oleh latar
belakang pengguna, pengalaman sebelumnya dan banyak faktor lainnya.
Saat menggunakan produk atau ketika membeli perangkat, dapat
dibayangkan perasaan yang akan dimiliki pengguna lain dalam situasi yang
berbeda. Perasaan positif dapat diartikan kurva pengalaman pengguna naik,
perasaan negatif berarti kurva menurun. Jika kurva turun terlalu banyak atau turun
berulang kali, kemungkinan besar akan kehilangan pelanggan bahkan sebelum
mereka membelinya atau pelanggan merasa sangat tidak senang ketika
menggunakan produk tersebut dan yang terjadi adalah mereka tidak akan membeli
produk tersebut lagi (Kraft, 2012: 5).
51
Gambar 2.10 Contoh dari Kurva User Experience (User Experience Innovation,
2012)
Menurut Garret (2011: 20) ketika membuat user experience yang baik,
terdapat elemen-elemen dasar yang membantu untuk menyusunnya. Keputusan ini
dibangun di atas satu sama lain, memberi informasi dan memengaruhi semua aspek
user experience. Berikut elemen-elemen dari pengalaman itu, diantaranya:
Gambar 2.11 Susunan Elemen User Experience (The Elemens of User
Experience, Garret, 2011)
1. Surface
Pada bagian surface terdapat serangkaian halaman yang terdiri dari gambar
dan teks. Beberapa dari gambar ini adalah hal-hal yang dapat pengguna klik,
52
melakukan semacam fungsi seperti membawa pengguna ke keranjang belanja.
Maupun gambar berfungsi sebagai ilustrasi, seperti foto produk untuk dijual
ataupun logo.
2. Skeleton
Di bawah elemen surface terdapat skeleton atau kerangka yang mengatur
mengenai penempatan tombol, kontrol, foto dan teks. Kerangka dirancang untuk
mengoptimalkan pengaturan pada elemen-elemen untuk efek dan efisiensi
maksimum, sehingga pengguna dapat mengingat bagaimana bentuk logo produk
dan dapat menemukan tombol-tombol tertentu saat pengguna membutuhkannya.
3. Structure
Pada elemen skeleton mendefinisikan penempatan objek visual pada
halaman aplikasi, dan elemen structure akan menentukan bagaimana nantinya para
pengguna dapat sampai ke halaman berikutnya dan kemana mereka bisa pergi ke
halaman lainnya. Elemen skeleton mengatur mengenai navigasi yang
memungkinkan pengguna untuk menyelusuri kategori yang ada dalam sebuah
aplikasi, dan elemen sturcture akan menentukan jenis kategori itu.
4. Scope
Elemen scope mendifinisikan mengenai jenis fitur dan fungsi yang terdapat
pada sebuah aplikasi. Seperti pada beberapa aplikasi perdagangan menawarkan
fitur yang memungkinkan pengguna untuk menyimpan alamat pengiriman yang
sebelumnya digunakan sehingga mereka dapat gunakan kembali. Elemen yang
membahas detail secara menyeluruh terhadap fitur dan fungsi, dalam elemen ini
53
seorang calon pengguna merupakan patokan dalam mengembangkan fitur dan
fungsi agar dapat sesuai dengan kebutuhan pengguna.
5. Strategy
Elemen scope secara fundamental ditentukan oleh elemen strategy. Elemen
strategy tidak hanya menggabungkan apa yang diinginkan oleh pengguna untuk
suatu aplikasi, tetapi juga kebutuhan pengembang serta tujuan utama dari aplikasi
tersebut dibuat. Strategy adalah cara desainer untuk menemukan jalan terbaik agar
tidak ada yang dikorbankan pada keinginan pengguna dan tujuan utama dari
aplikasi.
2.7 User-Centered Design
User-Centered Design (UCD) adalah pendekatan untuk desain dan
pengembangan user interface yang melibatkan pengguna di seluruh proses desain
dan pengembangan. Desain UCD tidak hanya berfokus pada pemahaman pengguna
sistem komputer yang sedang dikembangkan tetapi juga membutuhkan pemahaman
tentang tugas yang akan dilakukan pengguna dengan sistem dan lingkungan dimana
mereka akan menggunakannya. Menggunakan pendekatan UCD harus
mengoptimalkan kegunaan sistem pada perangkat (Wood, 2014: 112).
UCD menantang perancang untuk membentuk interface yang sesuai dengan
kemampuan dan kebutuhan pengguna. UCD mengintegrasikan informasi dengan
cara yang sesuai dengan tujuan, tugas dan kebutuhan pengguna. Filosofi ini tidak
lahir dari keinginan humanistic atau altruistic, tetapi dari keinginan untuk
mendapatkan fungsi optimal dari keseluruhan human-machine system (Endsley
dkk, 2003: 5).
54
2.8.1 Mengidentifikasi Target Pengguna
Tampilan user interface akan terlihat sama kepada pengguna, yang dimana
terdapat layout yang berisi dari gabungan konten (foto, media, teks) dan perintah
calls to action (CTA) yang berbentuk navigasi dan ikon yang memberikan akses
pada konten. Namun tidak semua pengguna memiliki pengetahuan atau estetika
yang sama untuk menghadapi pengalaman ketika menggunakan aplikasi mobile
Sebagai desainer, memahami bagaimana pengguna memahami dan menafsirkan
adalah hal yang harus diidentifikasi (Wood, 2014: 114).
Menentukan siapa target pengguna adalah langkah yang penting, karena
tidak hanya membantu memfokuskan inovasi, pemasaran, dan pendekatan tetapi
juga membantu untuk menghindari membuat produk yang hanya sekedar coba-coba
dan berakhir gagal. Banyak produk yang dirancang tanpa mempertimbangkan
pelanggan tertentu dan akan tercermin dari kurangnya keberhasilan produk.
Mendifinisikan dan mengidentifikasi pengguna yang akan menjadi target dalah
keseimbangan yang baik antara menggunakan target grup pengguna yang cukup
kecil untuk memicu inovasi, dan pada saat yang sama mendifinisikan target grup
yang cukup besar untuk memungkinkan pertumbuhan di masa depan (Kraft, 2012:
26).
2.8.2 Mengidentifikasi Kebutuhan Pengguna
Ketika membuat user experience salah satu yang harus ditekankan adalah
“anda tidak membuat desain untuk anda”. Desainer benar-benar tidak tahu
pengguna produknya apabila tidak berinteraksi dengan mereka ataupun
mempelajari bagaimana mereka menggunakan produk. Bagian terpenting dari UCD
55
karena adalah bagaimana pengguna menjadi pusat dari proses perancangan dari
user interface dan user experience (Still & Crane, 2017: 54).
Kebutuhan pengguna adalah landasan dari semua invoasi user experience
yang sukses. Jika produk, solusi dan fungsionalitas tidak mencakup kebutuhan yang
ada atau laten dari target pengguna, maka dapat dikatakan semua upaya dalam
menciptakan user experience yang baik akan sia-sia. Dengan kata lain, inovasi user
experience tidak akan berhasil jika tidak memenuhi apa yang pengguna butuhkan
(Kraft, 2012: 27). Menurut Kraft terdapat tiga jenis kebutuhan pengguna, berikut
jenis-jenis kebutuhan pengguna:
1. Kebutuhan Pengguna Secara Langsung
Kebutuhan jenis ini adalah kebutuhan yang dimiliki pengguna saat ini dan
yang sebagian besar pengguna dapat bayangkan dan jelaskan. Kebutuhan pengguna
jenis ini penting untuk dipenuhi.
2. Kebutuhan Pengguna yang Sedang Dirasakan
Kebutuhan pengguna yang dipersepsikan merujuk pada tugas-tugas yang
diharapkan oleh pengguna. Proses pengalaman ini menentukan bagaimana
pengguna memandang suatu produk.
3. Kebutuhan Pengguna yang Tersembunyi
Istilah kebutuhan pengguna tersembunyi mencakup mengenai definisi
fungsi yang pengguna tidak dapat mengungkapkan kebutuhan akan suatu fungsi
untuk membuat tugas atau interaksi lebih mudah.
56
BAB III
METODE BERKARYA
3.1 Media
Medium merupakan bentuk tunggal dari kata media yang berarti perantara
atau penengah, yang umumnya digunakan untuk menyebut berbagai hal yang
berhubungan dengan bahan (termasuk alat dan teknik) yang digunakan dalam
berkarya seni, dapat dikatakan media identik dengan alat, bahan dan teknik
(Susanto, 2011: 255). Dalam proses berkarya, dibutuhkan media yang digunakan
untuk perancangan User Interface (UI) dan User Experience (UX) pada aplikasi
mobile Indosport, diantaranya sebagai berikut:
3.1.1 Alat
Dalam pembuatan UI dan UX aplikasi mobile Indosport menggunakan alat-
alat yang mempermudah dalam proses perancangannya. Alat yang digunakan yaitu
alat gambar manual, perangkat keras (hardware) dan perangkat lunak (software).
Alat gambar manual terdiri dari pensil, penghapus dan penggaris. Alat-alat
tersebut yang digunakan untuk membuat sketsa dari wireframe, beberapa halaman
untuk user interface serta untuk eksplorasi konsep.
Perangkat keras (hardware) adalah komponen komputer yang memiliki
wujud fisik. Hardware sendiri memiliki beragam fungsi yang mendukung sistem
komputer agar berjalan sebagai mestinya. Berikut adalah hardware yang digunakan
dalam proses perancangan UI dan UX untuk aplikasi mobile Indosport:
57
1. Komputer
Spesifikasi komputer yang digunakan adalah sebagai berikut: Intel Core i3
4170 @ 3.70Ghz, RAM 8GB Dual-Channel DDR3 @ 807MHz, HDD 1TB
Western Digital WDC, SSD 125GB Western Digital WDC, Graphic
NVIDIA GeForce GTX 750 Ti 2GB.
2. Smartphone
Spesifikasi smartphone yang digunakan untuk menjalankan UI dan UX
adalah sebagai berikut: CPU Octa-core 1.8GHz Kryo 260, GPU Adreno
509, RAM 3GB, Storage 32 GB, Layar IPS LCD 6 inci 1080x2160 pixel
rasio 18:9.
3. Mouse
Mouse yang dipakai adalah merek Logitech G300s, yang membantu dalam
proses pembuatan UI maupun desain UX.
4. Kamera DSLR
Kamera Canon 600D yang digunakan sebagai alat untuk
mendokumentasikan pembuatan rancangan UI dan UX serta kegiatan-
kegiatan lain yang berkaitan dengan proyek studi.
Perangkat lunak (software) adalah perangkat yang terdiri dari program-
program komputer yang berguna untuk menjalankan suatu pekerjaan dengan sesuai
apa yang dikehendaki oleh pengguna. Dalam perancangan UI dan UX pada aplikasi
mobile Indosport, penulis menggunakan sistem operasi yang digunakan adalah
Windows 10 Pro 64-bit dengan menggunakan perangkat lunak (software) grafis
sebagai berikut:
58
1. Adobe XD
2. Adobe Illustrator CC 2020
3. Protopie
4. Adobe Photoshop CC 2020
5. Microsoft Office 2019
3.1.2 Teknik
Terknik berkarya dalam perancangan UI dan UX pada aplikasi mobile
Indosport dilakukan melalui beberapa tahapan. Teknik manual digunakan untuk
pembuatan sketsa wireframe dan penggalian konsep UI dengan menggunakan alat
seperti pensil pada media kertas. Cara penggunaan alat dan bahan menjadi
pertimbangan dalam menghasilkan desain UX maupun UI. Perangkat keras
(hardware) digunakan sebagai alat bantu dalam mempermudah pembuatan desain
seperti komputer dan laptop sebagai alat pengeolah desain yang di dalamnya
terdapat perangkat lunak (software) untuk membantu proses eksekusi gagasan dan
penyempurnaan desain. Kamera DSLR digunakan sebagai alat untuk
mendokumentasikan pembuatan rancangan desain serta selama proses proyek studi
berlangsung. Dan mouse merupakan alat yang mempermudah dalam proses
pengerjaan desain UI dan UX.
Perangkat lunak (software) yang digunakan diantaranya adalah Adobe XD
atau dapat disebut juga Adobe Experience Design, yang berfungsi untu mendesain
dan membuat prototipe pada halaman serta aplikasi mobile. Pengembangan
prototipe produk UX selanjutnya dirancang pada aplikasi Protopie, yang berfungsi
untuk mengubah rancangan UI dan UX menjadi bentuk prototipe yang interaktif
59
dan dapat dioperasikan seutuhnya. Lalu Adobe Illustrator CC 2020 yang berfungsi
untuk mengolah gambar berbasis vektor serta mempermudah dalam membuat aset-
aset untuk UI. Adobe Photoshop CC 2020 berfungsi sebagai untuk mengolah atau
mengedit gambar berbasis bitmap untuk menghasilkan gambar-gambar yang
dibutuhkan dalam proses. Kemudian Microsoft Office 2019 untuk menulis laporan
perancangan proyek studi. Setelah desain selesai dirancang, tampilan UI dan UX
dalam bentuk prototipe yang akan dicoba untuk ditampilkan pada smartphone agar
dapat mempresentasikan apa yang telah dirancang.
3.2 Proses Berkarya
Proses berkarya adalah sebuah proses yang didalamnya dibutuhkan
serangkaian tahapan yang dilakukan. Proses berkarya dalam perancangan UI dan
UX aplikasi mobile Indosport melalui beberapa tahapan, yaitu tahap pra produksi,
produksi dan pasca produksi. Berikut adalah tahapan-tahapan dalam proses
berkarya:
60
Tabel 3.1 Proses Berkarya
PROSES BERKARYA
USER INTERFACE DAN USER EXPERIENCE APLIKASI MOBILE
3.2.1 PLELIMINARY PLAN
3.2.1.1 Pencarian Ide (halaman 61)
3.2.1.2 Riset (Observasi, Wawancara dan Studi Pustaka) (halaman 62 s.d. 68)
3.2.1.3 Analisis dan Riset Target Audiens (halaman 68 s.d. 73)
3.2.1.4 Analisis SWOT (halaman 73)
3.2.1.5 Penentuan Konsep Karya (halaman 73 s.d. 81)
3.2.1.6 Distribusi dan Placement Media (halaman 81 s.d. 82)
3.2.2 PROSES PRA PRODUKSI
3.2.2.1 Penyusunan User Flow (halaman 82 s.d. 84)
3.2.2.2 Perancangan Wireframe (halaman 85 s.d. 86)
3.2.2.3 Perancangan Guidelines (halaman 86 s.d. 88)
3.2.2.4 Komunikasi dengan Dosen Pembimbing dan Klien (halaman 88)
3.2.3 PROSES PRODUKSI
3.2.3.1 Perancangan Ilustrasi (halaman 89 s.d. 90)
3.2.3.2 Perancangan Desain User Interface (halaman 90 s.d. 95)
3.2.3.3 Perancangan Prototype Interaktif (halaman 95 s.d. 97)
3.2.3.4 Konsultasi dengan Dosen Pembimbing (halaman 98)
3.2.3.5 Konsultasi Konsep dengan Klien (halaman 98)
3.2.4 PROSES PASCA PRODUKSI
3.2.4.1 Perancangan Media Pendukung (halaman 98 s.d. 99)
3.2.4.2 Pra Pameran (halaman 99)
3.2.4.3 Pameran (halaman 99)
3.2.4.4 Presentasi Desain Akhir ke Klien (halaman 100)
61
3.2.1 Pleliminary Plan
Dalam proses perancangan UI dan UX dibutuhkan serangkaian tahapan
yang dilakukan. Proses ini dilakukan secara berurutan untuk membantu atau
mempermudah penulis dalam melakukan perancangan serta membuat hasil
rancangan menjadi lebih maksimal. Proses perancangan UI dan UX untuk aplikasi
mobile pada Indosport melalui serangkaian tahapan yaitu, tahap pra produksi,
produksi dan pasca produksi.
3.2.1.1 Pencarian Ide
Tahap awal dari pra produksi adalah perumusan masalah yang berfungsi
sebagai pedoman, penentu arah serta fokus dari perancangan. Pada perancangan ini
dilakukan pembuatan UI dan UX aplikasi mobile Indosport yang dapat memenuhi
kebutuhan calon pengguna dalam membaca berita serta mengalami beberapa
pengalaman yang baik ketika menggunakannya serta menambahkan beberapa fitur
yang diharapkan dapat memberikan sentuhan interaksi pada penggunanya serta
dapat berfungsi dengan baik sesuai dengan kebutuhan akan calon pengguna serta
harapan calon pengguna.
Cara mendapatkan solusi dan ide adalah dengan mengetahui permasalahan
yang akan dihadapi oleh calon pengguna yang didapatkan melalui langkah-langkah
pada proses pra-produksi. Seperti menemukan solusi bagaimana kebiasaan para
penggemar olahraga membaca berita pada sebuah aplikasi, keluh kesah yang
dialami ketika menggunakan aplikasi atau fitur yang dapat membantu ketika
menggunakan aplikasi. Dalam proses menemukan solusi untuk calon pengguna
62
tersebut dapat dijadikan beberapa ide yang dapat dikembangkan untuk aplikasi
mobile Indosport.
3.2.1.2 Riset (Observasi, Wawancara, dan Studi Pustaka)
1. Observasi
Dalam metode observasi, hal yang harus ditemukan adalah interaksi yang
kompleks, itulah sebabnya diperlukan melakukan observasi. Menurut Johnson
(dalam Hasanah, 2016: 23) menjelaskan bahwa setiap orang dapat melakukan
observasi dari bentuk sederhana sampai pada tingkatan observasi paling kompleks.
Metode observasi yang digunakan pada setiap kegiatan yang ingin diteliti pun
bervariasi, tergantung pada setting, kebutuhan dan tujuan dari penelitian itu sendiri
(Santana, 2007: 127).
Observasi dilakukan dalam rangka melihat identitas visual dari Indosport
itu sendiri dan keseluruhan sistem dari Indosport agar dapat menemukan langkah
yang tepat untuk menerapkannya kedalam user interface dengan membuat
guidelines agar desain user interface yang dihasilkan nantinya tidak berbeda
dengan identitas visual dari Indosport.
Serta proses pengumpulan informasi ini dan analisis hasil dari observasi
akan mendapatkan gambaran dari rancangan yang akan dibuat. Kegiatan observasi
dilakukan pertama kali pada tanggal 3 Agustus 2019 dalam rangka melihat desain
dari Indosport agar dapat memahaminya lagi untuk mempermudah proses yang
akan dilalui dalam proses perancangan UI dan UX.
63
Gambar 3.1 Logo Indosport pada Tahun 2014 Sampai dengan Sekarang
Sumber: Dokumentasi Penulis (2019)
Indosport menggunakan warna merah, putih dan hitam. Logo Indosport
merupakan gabungan dari simbol fans yang gembira dan inisial I dan S. Inisial I
yang berarti Indo dan S adalah Sport merujuk pada nama Indosport. Kombinasi
kedua abjad tersebut juga membentuk orang yang sedang membentangkan
tangannya, atau dapat diartikan merayakan sesuatu, seperti halnya fans ketika
merayakan sebuah gol akan menunjukkan gesture yang serupa untuk menyalurkan
kegembiraannya.
Gambar 3.2 Website Indosport
Sumber: Dokumentasi Penulis (2019)
Sebagai media online olahraga, Indosport menggunakan beberapa media
seperti website, Facebook, Twitter, Youtube dan Instagram untuk menyebarkan
berita olahraga. Untuk website Indosport meraih posisi ke 34 menurut Alexa yang
64
dimana 97.58% memiliki pengunjung dari Indonesia. Lalu pada halaman Facebook,
Indosport memiliki total pengikut yaitu 872 ribu terhitung pada tahun 2019. Pada
akun Twitter dari Indosport memiliki total pengikut sebanyak 23.700 terhitung pada
tahun 2019. Terakhir yaitu pada akun Youtube yang dimiliki Indosport memiliki
jumlah subscriber sebanyak 94.700. Dalam kelima media tersebut Indosport
memiliki desain yang cukup konsisten karena memberikun atribut-atribut yang khas
pada desain-desainnya.
Gambar 3.3 Akun Sosial Media Indosport
Sumber: Dokumentasi Penulis (2019)
65
Dari segi desain Indosport memiliki visual yang cukup baik, Dan
keterbacaan informasi didalamnya yang cukup baik pula. Yang nantinya ini dapat
dijadikan acuan dalam membuat guidelines dari UI dan UX aplikasi mobilenya
tanpa menghilangkan ciri khas yang sudah ada.
Gambar 3.4 Contoh Desain dari Indosport
Sumber: Dokumentasi Penulis (2019)
2. Wawancara
Wawancara adalah salah satu kaedah mengumpulkan data yang paling biasa
digunakan dalam penelitian sosial. Kaedah ini digunakan ketika subjek kajian
(responden) dan peneliti berada langsung bertatap muka dalam proses mendapatkan
66
informasi bagi keperluan data primer (Rosaliza, 2015: 71). Wawancara merupakan
teknik pengumpulan data yang dilakukan melalui tanya jawab secara langsung
antara pengumpul data terhadap narasumber. Kegiatan wawancara dilakukan
bertujuan untuk mendapatkan informasi suatu perusahaan secara mendetail, terkait
dengan sejarah, data dan informasi dari Indosport. Dalam hal ini wawancara
dilakukan dengan Head of Research and Development dari Indosport.
Tabel 3.2 Wawancara
Tanggal Narasumber Pertanyaan
31-07-2019
Jimmy
Kurniawan
(Head of
Research and
Development)
1. Menanyakan visi dan misi dari
Indosport.
2. Perjalanan Indosport dalam dunia
jurnalisme di Indonesia.
3. Kelemahan dan kelebihan dari
Indosport dari segi ide dan inovasi yang
dapat diangkat untuk membedakannya
dari calon kompetitor.
4. Target calon pengguna yang ingin
dituju untuk aplikasi mobile Indosport.
Serta menanyakan mengapa berminat
untuk memilih target calon pengguna
tersebut.
5. Tujuan yang ingin dicapai aplikasi
mobile Indosport untuk masa mendatang
serta fitur apa yang nantinya dapat
membantu perkembangan Indosport.
Dari hasil wawancara dengan pertanyaan-pertanyaan seperti pada di tabel,
penulis mendapatkan beberapa informasi. Dimulai dari visi Indosport yang
mengusung slogan “We Are Sport” yang berarti Indosport adalah media yang
membuat berita dengan ruang lingkup olahraga. Indosport juga berambisi untuk
menumbuhkan jiwa penduduk Indonesia dengan cara memberikan berita olahraga
67
yang positif dan valid akan kebenarannya, serta Indosport memiliki cita-cita untuk
turut serta membantu memajukan Indonesia dalam bidang olahraga.
Terdapat tiga misi yang dipegang oleh Indosport yaitu menjadi sarana
komunikasi untuk “Memasyarakatkan Olahraga dan Mengolahragakan
Masyarakat”; menyuguhkan informasi positif yang berkualitas dari olahraga
nasional maupun internasional secara aktual, faktual, mendidik, atraktif, dan
menghibur dari seluruh arena olahraga secara mendalam dan menyeluruh;
menampung dan menyalurkan seluruh kegiatan olahraga dari komunitas atau
organisasi di seluruh Indonesia, yang bertujuan untuk membangun kedekatan
emosional dalam berbagai informasi seputar olahraga.
Indosport dapat dikatakan relatif baru di jagat media Indonesia, yang
membahas seputar olahraga. Didirikan pada penghujung tahun 2012, dan berfokus
pada media online yang menyediakan berita olahraga nasional maupun
internasional. Selama tahun 2012 sampai dengan 2014 Indosport mengalami pasang
surut dalam dunia jurnalisme Indonesia diikuti dengan perubahan user interface
pada websitenya, seiring berjalannya waktu pencapaian Indosport mulai membaik
dibuktikan dengan meningkatnya jumlah pembaca dan pengunjung.
Indosport memiliki kelebihan dalam pengembangan kualitas konten yang
baik dan bertanggung jawa, dan memiliki media penyampai informasi yang banyak
untuk menghadirkan berita di depan layar digital pembaca, mulai dari komputer,
laptop, smartphone dan alat telekomunikasi lainnya untuk memberikan segala
informasi tentang olahraga nasional maupun internasional. Dan kelemahannya saat
ini adalah tidak memiliki sebuah aplikasi untuk memudahkan lagi Indosport untuk
68
memberikan kenyamanan pembaca serta memberikan pengalaman yang membekas
pada pembaca.
Target audiens Indosport adalah laki-laki yang memperhatikan atau
mengikuti perkembangan salah satu jenis olahraga terutama sepakbola dari usia
remaja sampai dengan dewasa dengan status ekonomi menengah hingga ke atas
yang memiliki minat untuk menyempatkan waktu luangnya untuk membaca berita
olahraga.
Tujuan yang ingin dicapai dalam rancangan UI dan UX aplikasi mobile
Indosport adalah membuat pembaca dapat menikmati suatu pengalaman yang tidak
biasa ketika menggunakan aplikasi tersebut dan memiliki nilai lebih yang dapat
membedakan aplikasi mobile Indosport dengan aplikasi serupa lainnya. Serta
memberikan kenyamanan pembaca untuk menikmati konten berita di dalamnya.
3. Studi Pustaka
Studi pustaka merupakan metode pengumpulan data untuk memperoleh
referensi dari berbagai sumber dalam proses perancangan UI dan UX. Menurut
Soewardikoen (2013:6) dengan studi pustaka juga dapat memperkuat perspektif dan
kemudian meletakkannya di dalam konteks. Metode ini dilakukan dengan cara
mencari informasi melalui buku UI dan UX, website, jurnal dan artikel-artikel. Agar
dapat memperdalam mengenai teori-teori yang dapat memperkuat nilai dari UI dan
UX itu sendiri.
3.2.1.3 Analisis dan Riset Target Audiens
Dalam pembuatan UI dan UX aplikasi mobile Indosport diperlukan
penentuan target audiens agar nantinya dapat memenuhi keinginan serta kebutuhan
69
calon pengguna secara maksimal karena memiliki target audiens yang jelas sejak
proses pra produksi. Maka dari itu penulis perlu menentukan serta menganalisis
target audiens untuk aplikasi mobile Indosport.
1. Segmentasi Geografis
Pada segmen geografis akan dibagi sasaran dalam beberapa bagian
geografis yang berbeda-beda seperti contohnya negara, negara bagian, kota bahkan
desa. Sasaran utama berdasarkan geografis pada aplikasi mobile Indosport
ditujukan untuk masyarakat Indonesia terutama yang hidup di daerah perkotaan.
2. Segmentasi Demografis
Target dari aplikasi mobile audiens ini ditujukan kepada anak muda sampai
dewasa yang berusia sekitar 16-30 tahun dimana pada umur itu mereka sudah
menyukai dan mengerti olahraga seperti sepakbola maupun basket. Serta mereka
mampu menggunakan perangkat mobile cukup baik dan sering tentunya. Karena
aplikasi ini akan dibuat untuk perangkat-perangkat mobile saja, seperti Android
maupun iPhone.
3. Segmentasi Psikografis
Anak muda sampai dewasa merupakan masa dimana mereka mulai
menyukai sesuatu atau hobi. Seperti pada tahap remaja dari umur 16-20 tahun
seseorang cenderung mencari jati diri mereka dan mulai mencoba-coba sesuatu.
Sedangkan usia 20 tahun keatas seseorang akan mengembangkan hubungannya
dengan orang lain. Alasan pemilihan rentang umur dari 16 tahun sampai 30 tahun
karena mereka merupakan umur yang paling aktif dalam mengikuti perkembangan
sepakbola, dari mulai menonton pertandingan sampai dengan mengikuti berita
70
olahraga yang terkait. Walaupun tidak sedikit para penikmat bola yang sudah
berumur lebih 30 tahun, namun mereka tidak terlalu tertarik untuk mengikuti
perkembangan sepakbola maupun berinteraksi lebih banyak di smartphone.
4. Behavioral
Produk ini ditujukan kepada masyarakat yang memiliki hobi terhadap
sepakbola maupun olahraga lainnya yang terdapat di Indsport dan di Indonesia
sendiri jumlah yang menyukai olahraga ini termasuk cukup tinggi. Dan untuk
memberi fasilitas kepada mereka, diharapkan dengan adanya aplikasi mobile ini
para penggemar merasa terbantu dengan fitur serta konten yang ada didalamnya.
Tahap pencarian keinginan dan kebutuhan calon pengguna merupakan
tahap dasar dalam proses perancangan UI dan UX aplikasi mobile Indosport. Pada
tahapan ini akan digali informasi mengenai data pengguna yang akan menjadi
pengguna dalam kehidupannya secara nyata dan berusaha menciptakan solusi untuk
permasalahan tersebut. Daftar kebutuhan calon pengguna diperoleh dengan
melalukan Focus Group Discussion (FGD) yang dilakukan dengan memuat
beberapa pertanyaan untuk mencari tahu keseharian masyarakat dalam hal
membaca berita olahraga serta melakukan survei yang terdapat dikolom review dari
berbagai aplikasi yang serupa.
Riset calon pengguna menggunakan metode focus group discussing atau
dapat disebut dengan FGD, yang merupakan jenis pengumpulan data kualitatif.
FGD adalah diskusi terfokus dari suatu grup untuk membahas suatu masalah
tertentu dalam suasana informal dan santai. Mendifinisikan FGD adalah suatu
proses pengumpulan data dan informasi secara sistematis dan terarah mengenai
71
suatu permasalahan tertentu yang spesifik melalui diskusi kelompok (Irwanto,
2006: 2). Teknik FGD digunakan untuk mengungkap pemaknaan dari suatu
kelompok berdasarkan hasil diskusi yang berpusat pada suatu permasalahan
tertentu (Rahmat, 2009: 7). Agar dapat memenuhi syarat dan sesuai dengan konteks
maka syarat rekruitmen peserta yang akan digunakan dalam riset calon pengguna
ini memiliki karakter sebagai berikut:
a. Laki-Laki, sesuai dengan target utama dari Indosport.
b. Tinggal di Pulau Jawa, untuk mempermudah dalam melakukan riset dalam
segi efisiensi waktu dan pengembangan fitur untuk Indosport.
c. Usia 16-30 tahun, yang merupakan target pengguna dari Indosport dengan
kategori remaja sampai dengan dewasa. Rentang usia ini agar tidak dapat
perbedaan penialaian yang signifikan antara responden karena dianggap
berada dalam fase kedewasaan yang setara.
d. Menyukai salah satu olahraga sepakbola atau basket, untuk memahami
apa saja kesukaan mereka dan mengerti akan kebiasaan mereka.
e. Menggunakan smartphone minimal 2 jam sehari, pada usia remaja
sampai dewasa dari beberapa mereka memiliki kesibukannya sendiri dan
dengan minimnya waktu pemakaian smartphone dapat dijadikan sebagai
acuan agar membuat rancangan aplikasi yang dapat memberikan informasi
secara ringkas nantinya.
Proses FGD dilakukan dalam perancangan UI dan UX aplikasi mobile
Indosport ini, dimulai dengan proses pembuatan konsep, user flow, perancangan
visual user interface serta mengimplementasikan interaksi untuk memaksimalkan
72
user experience. Dalam diskusi pertama yang dilakukan secara informal, penulis
mendapatkan beberapa informasi yang dapat diimplementasikan nantinya
mengenai permasalahan mereka ketika menggunakan aplikasi-aplikasi serupa,
yaitu:
a. Kurang puas dengan desain papan live score yang mudah untuk dimengerti
oleh calon pengguna serta tidak memberikan kejadian-kejadian yang terjadi
dalam pertandingan.
b. Kurangnya interaksi sosial yang dapat diberikan oleh aplikasi-aplikasi
mobile lainnya, berfokus pada berita yang terkini saja.
c. Tidak ada halaman yang memuat berita mengenai transfer pemain dan
memberikan berita yang informatif bagi pengguna pada bursa transfer
pemain.
d. Minimnya fitur yang menarik sehingga mereka kehilangan kepercayaan
pada aplikasi tersebut, dan lebih memilih melihat informasi pertandingan
pada mesin pencari seperti Google.
e. Tidak menampilkan halaman berita yang menarik sehingga calon pengguna
tidak sehingga mereka malas untuk membaca berita yang ada didalamnya,
walaupun beberapa aplikasi sudah memberikan layout yang baik, namun
bahasa yang digunakan adalah bahasa inggris.
f. Kurangnya kemudahan dalam mengakses table league dalam aplikasi pada
saat pertandingan maupun didalam kolom berita, membuat pengguna
kesulitan untuk hanya sekedar melihat klasemen tim kesayangan mereka.
73
g. Banyak berita yang terkesan tidak berbobot yang hanya menarik pada
judulnya saja. Serta memiliki isi yang sama pada berita-berita yang sudah
ada.
h. Tidak ada pemisah berita secara jelas, seperti berita yang berbentuk teks,
transfer pemain, galeri ataupun video.
i. Fitur teman pada sebuah aplikasi dapat memberikan sesuatu yang cukup
membantu para pengguna untuk mencapai kepuasan dalam menggunakan
aplikasi, tentunya dengan fungsi dan kegunaan yang jelas.
j. Fitur count down sebagai tempat untuk memantau kegiatan dan berita
sebelum dimulainya pertandingan dapat membantu para calon pengguna
untuk mengetahui sesuatu yang mereka lewati.
Hasil proses analisis di atas dari target audiens mengacu pada teori Stone untuk
mengetahui tentang target pengguna. Hasil infomasi dan analisis akan dapat
membentuk gambaran dari desain user interface sebagai fitur kunci atau
kelebihannya lalu hasil tersebut dapat diolah untuk dapat menerapkan kemudahan
saat pengguna menggunakan user interface dan user experience.
3.2.1.4 Analisis SWOT
Kegiatan analisis kebutuhan atau yang biasa disebut dengan analisis SWOT
ini dilakukukan seperti yang sudah dijelaskan pada BAB I.
3.2.1.5 Penentuan Konsep Karya
Penetapan konsep karya bertujuan agar karya yang dihasilkan sesuai dengan
tujuan perancangan dan target untuk memenuhi kebutuhan serta keinginan calon
pengguna. Setelah memahami tujuan, studi pustaka, menganalisis calon pengguna
74
dan memahami keinginan klien, maka tahap selanjutnya adalah penetapan konsep.
Proses penentuan konsep dapat dilakukan dengan cara menyimpulkan solusi dari
keinginan serta kebutuhan calon pengguna, mencari berbagai referensi untuk acuan
dalam proses perancangan dan menyesuaikan dengan tujuan awal dari perancangan
aplikasi mobile Indosport.
Aplikasi yang dihasilkan bertujuan agar dapat menciptakan aplikasi
mengenai olahraga khususnya untuk sepakbola yang dapat memberikan para calon
pengguna kemudahan dalam akses berita dengan tampilan yang ringkas serta dapat
berinteraksi terhadap apa yang terjadi dalam dunia olahraga tersebut. Calon
pengguna yang dituju adalah usia 16 tahun sampai dengan 30 tahun yang tertarik
dengan olahraga seperti sepakbola atau basket yang memiliki kemampuan untuk
mengoperasikan smartphone. Berikut poin-poin konsep yang direncanakan:
1. Dari segi visual, konsep utama yang akan diterapkan adalah simple elegant
masculine dan memberikan adaptasi dari beberapa kejadian dunia olahraga
terkini.
2. Pemakaian tipografi menggunakan Poppins sebagai header dan Lato
sebagai body text yang bertujuan untuk memenuhi standar perancangan UI
dan UX yang dibuat sendiri oleh Google. Kedua font tersebut termasuk
kedalam jenis sans serif yang cocok digunakan pada jenis media digital.
Jenis sans serif terlihat lebih bersih, modern, dan menarik. Sering digunakan
oleh merek-merek yang ingin menunjukkan sifat jujur, sederhana, dan tanpa
basa-basi.
75
3. Penggunaan warna pada dasarnya akan mengikuti guidelines yang sudah
ada dari Indosport, namun akan terdapat beberapa warna tambahan untuk
keperluan yang dapat membantu pengguna memahami pesan, seperti pada
beberapa tag pada berita maupun halaman tim atau pertandingan yang akan
mengikuti warna dari tim yang akan bermain.
4. Prinsip perancangan time to learn akan diterapkan pada halaman start
screen, sign in, register sampai dengan news. Dengan cara memberikan
tampilan yang mudah terlebih dahulu kepada pengguna dan dilanjutkan
dengan tampilan yang lebih lengkap, dengan alasan memberi penyesuaian
bertahap sejak awal halaman, diharapkan dapat mempersingkat waktu
adaptasi.
5. Prinsip perancangan speed of performance akan diterapkan pada animasi
perpindahan ilustrasi pada halaman start screen dan setiap transisi setiap
halaman. Dengan mengatur efek transisi tidak lebih dari 0,3 detik, dengan
alasan agar UI dan UX tidak terasa lambat serta menjadikannya responsif.
6. Prinsip perancangan rate of errors by users akan diterapkan dengan cara
selalu menguji coba setelah halaman selesai dikerjakan, dan meminta
beberapa orang yang termasuk cakupan target audiens untuk merasakan
serta memberi kritik, dengan ini beberapa kesalahan pengguna terhadap
situasi tertentu dapat diubah menjadi lebih baik.
7. Prinsip perancangan retention over time dengan memberikan bentuk dan
warna yang sama kepada action object dan action area, serta memberikan
76
desain yang simpel namun tetap padat akan informasi terutama pada bagian
header dan bottom bar.
8. Prinsip perancangan subjective satisfaction akan diterapkan kedalam bentuk
ilustrasi terhadap beberapa bagian halaman untuk memberikan kepuasan
kepada pengguna, diluar akan kebutuhan pengguna. Alasan penggunaan
ilustrasi adalah mempercantik tampilan, memberi identitas dari Indosport
dan dapat mengkomunikasikan artikel di dalamnya.
9. Prinsip UI strive for consistency akan dijadikan sebagai acuan dalam
membuat sebuah guidelines, untuk membuat setiap halaman familiar dari
penggunaan, huruf, warna, tata letak dan objek visual yang berisikan
perintah.
10. Prinsip UI seek universal usability membuat desain universal merupakan
sesuatu yang cukup sulit, maka dari itu beberapa desain dasar seperti
penempatan navigasi akan mengadaptasi commercial style guide, dan untuk
hal ini akan lebih mengkhususkan ciri dari target audiens.
11. Prinsip UI offer informative feedback akan diterapkan pada beberapa button
untuk memberikan informasi kepada pengguna halaman yang aktif. Seperti
yang akan diterapkan kepada halaman news nantinya untuk memisahkan
bagian antara sub bagian featured, transfer, galleries dan videos. Serta
beberapa tombol yang terletak pada header untuk memberikan kesan
trigger.
12. Prinsip UI design dialogs to yield closure adalah dengan memberikan kotak
dialog pada beberapa bagian khususnya yang akan diterapkan pada halaman
77
register saat memilih tim favorit, sign in saat melakukan tindakan forget
password dan profile saat pengguna hendak untuk keluar dari akun tersebut.
Untuk memberikan sebuah kepastian ketika pengguna akan melakukan
suatu tindakan.
13. Prinsip UI prevent errors diterapkan pada halaman calendar, ketika
pengguna tidak dapat menemukan halaman pertandingan akan muncul
ilustrasi yang berisikan penjelasan bahwa tidak ada pertandingan pada
tanggal tersebut. Serta tindakan secara preventif dijalankan oleh button back
pada setiap halaman yang berada di kiri atas halaman nantinya.
14. Prinsip UI permit easy reversal of actions akan diterapkan pada tombol back
yang akan ada di setiap halaman pada kiri atas halaman, untuk memberikan
aksi pembatalan interaksi yang diinginkan pengguna.
15. Prinsip UI keep users in control dengan cara memberikan pengguna kendali
terhadap situasi yang membutuhkan jalan pintas untuk dapat langsung
menuju halaman utama, dengan membuat bottom bar yang berisikan jalan
pintas untuk menuju empat halaman dari Indosport.
16. Prinsip UI reduce short-term memory load akan diterapkan dengan cara
mengadaptasi commercial style guide pada bagian tata letak dan navigasi,
sebagian besar produk UI dan UX menggunakannya agar memiliki
keterikatan terhadap aplikasi lainnya yang masih menggunakan satu
operating system.
17. Dalam perancangan UI dan UX aplikasi mobile Indosport akan
menggunakan customized style guide agar dapat menciptakan tampilan yang
78
ikonik pada Indosport, serta tetap menerapkan beberapa commercial style
guide untuk mempersingkat pengguna dalam mempelajari UI dan UX, yang
merupakan kedalam prinsip perancangan time to learn.
18. Berdasarkan hasil riset pada target audiens maka kebutuhan pengguna
secara langsung akan diterapkan dengan memberikan sentuhan interaksi
sosial pada aplikasi, kebutuhan ini akan dikonsepkan sebagai salah satu
halaman utama dari Indosport yang bernama activity, yang nantinya akan
diterapkan pada halaman tersebut dengan susunan garis waktu yang
berisikan aktivitas terkini dari teman.
19. Berdasarkan hasil riset pada target audiens maka kebutuhan pengguna yang
sedang dirasakan akan diterapkan dengan memberikan pemisahan jenis
berita dengan jelas, kebutuhan ini akan dikonsepkan dengan cara
memisahkan halaman news menjadi beberapa bagian sesuai dengan jenis
berita seperti artikel yang berbentuk teks, foto atau video.
20. Berdasarkan hasil riset pada target audiens maka kebutuhan pengguna yang
tersembunyi akan diterapkan dengan memberikan halaman yang memuat
hitung mundur pertandingan, kebutuhan ini akan dikonsepkan berisikan
informasi jam pertandingan, tempat, timer dan aktivitas terkait mengenai
pertandingan tersebut pada aplikasi, yang nantinya akan diterapkan sebagai
salah satu sub halaman dari halaman activity.
21. Prinsip desain komunikasi visual yaitu unity & variety akan diterapkan
dalam menyatukan aset visual yang ada, dengan rencana menggunakan
79
layout yang memiliki shape yang tumpul atau rounded serta menampilkan
ilustrasi yang memiliki border terkesan patah dan ekspresif.
22. Prinsip desain komunikasi visual yaitu contrast akan digunakan untuk
header title, button, form serta aspek visual yang memuat perintah.
Penekanan akan menggunakan warna serta bentuk yang diharapkan
pengguna dapat memproses penekanan tersebut dan mengetahui tindakan
yang hendak dilakukan.
23. Prinsip desain komunikasi visual yaitu hierarchy digunakan pada halaman
untuk mengatur mata pengguna untuk fokus kepada tata letak halaman user
interface untuk menyerap informasi dari header serta dilanjutkan pada isi
konten dan bottom bar untuk mereka mengetahu aksi apa yang akan
dilakukan.
24. Prinsip desain komunikasi visual yaitu balance akan berfokus penerapannya
pada header dan halaman news, terdapat fungsi krusial yang terdapat pada
header seperti button, header title dan action area nantinya, keseimbangan
terhadap komponen-komponen tersebut diharapkan dapat mempermudah
pengguna menangkap informasi.
25. Prinsip desain komunikasi visual yaitu proportion akan sangat berguna
dalam merancang isi konten halaman, terlepas dari header dan bottom bar.
Isi konten akan diisi dengan dengan informasi yang pada namun
direncanakan agar tetap tidak terlihat kosong maupun sesak.
26. Bahasa rupa cara wimba, ukuran pengambilan dengan cara medium close up
untuk bagian artikel yang terdapat pemain sepakbola untuk menunjukkan
80
ekspresi wajah pada kejadian tersebut, full shot digunakan pada elemen
yang mengindikasikan fungsi tertentu, long shot, close up pada bagian
transfer untuk menunjukkan fokus wajah dari pemain terkait, medium long
shot untuk memperjelas beberapa aksi pada ilustrasi.
27. Bahasa rupa cara wimba, sudut pengambilan dengan sudut wajar pada
semua elemen visual Indosport.
28. Bahasa rupa cara wimba skala lebih besar dari aslinya adalah cara
penggambaran suatu wimba yang digambar lebih besar dari aslinya, akan
digunakan pada beberapa ilustrasi yang terdapat pada start screen. Lalu
penggunaan skala sama dengan aslinya digunakan hampir pada semua
elemen visual. Serta penggunaan skala lebih kecil dari aslinya adalah cara
penggambaran suatu wimba yang digambar lebih kecil dari obyek aslinya,
akan digunakan pada beberapa ilustasi yang terdapat pada start screen juga.
29. Bahasa rupa cara wimba, penggambaran dengan gaya bidang akan
digunakan ke hampir semua elemen visual, cara penggambaran di mana
bidang digunakan hingga pada gambar tampak masing-masing wimba,
bagian-bagian wimba serta latar-latar berkesan datar dan sebagai
keseluruhan kuat akan kesan dwimatranya.
30. Bahasa rupa cara wimba cara lihat dengan sudut lihat wajar.
31. Bahasa rupa tata ungkapan, menyatakan ruang dan waktu, dengan cara kilas
balik untuk menampilkan artikel berdasarkan peristiwa sebelumnya dan
kilas maju untuk menampilkan pertandingan yang akan datang.
81
32. Bahasa rupa tata ungkapan, menyatakan gerak dinamis terdapat pada
beberapa ilustrasi dan aset visual.
33. Uji coba produk akan direncanakan untuk dilakukan pada pameran proyek
studi yang akan dilaksanakan pada bulan Februari 2020 dengan tujuan untuk
mengetahui respon penonton.
3.2.1.6 Distribusi dan Placement Media
Bentuk desain yang akan dihasilkan adalah sebuah prototype dari aplikasi
mobile Indosport beserta dengan asetnya yang nantinya akan didistribusikan
langsung kepada divisi Research and Development dan divisi IT dari Indosport
untuk dapat dijadikan sebuah native app dan dapat dipakai oleh calon pengguna
pada platform Android maupun iOS. Sesuai dengan analisis dan riset dari target
audiens yaitu pria yang berusia 16-30 tahun yang dekat dengan smartphone. Serta
media pendukung seperti feed Instagram membantu para calon pengguna dapat
mengenal UI dan UX aplikasi tersebut. Serta terdapat video singkat yang
memperlihatkan bagaimana UI dan UX aplikasi mobile Indosport dapat bekerja.
Tabel 3.3 Strategi Promosi
Jenis Kegiatan
Promosi Media
Distribusi
Media Frekuensi
Direct Marketing Instagram Feed Instagram
3 kali posting
pada feed
Periklanan Video Youtube 1 kali dalam
sebulan
Distribusi media akan direncanakan dilakukan dengan cara posting di
Instagram karena pada media sosial tersebut Indosport memiliki insight tertinggi
82
dibandingkan dengan media sosial lainnya dan dengan cara mengiklankan di
Youtube karena memiliki potensi untuk mendapatkan target audiens di sana,
mengingat Indosport juga mempunyai kanal Youtube.
3.2.2 Proses Pra Produksi
Sebelum memasuki proses pra produksi, ada elemen-elemen yang
berhubungan dengan user experience antara lain surface, skeleton, structure, scope,
dan strategy. Pada bagian surface yang merupakan bagian teratas dari elemen-
elemen tersebut yang berisikan user interface, ilustrasi serta aset-aset visual
lainnya. Selanjutnya elemen skeleton berisikan wireframe untuk dapat mengatur
mengenai penempatan tombol, control, foto dan teks. Selanjutnya elemen structure
yang berisikan user flow dari pengguna yang akan menentukan bagaimana seorang
pengguna dapat menuju ke halaman-halaman selanjutnya. Elemen scope terdapat
pada penjelasan konsep dan user flow yang bertujuan mendefinisikan fungsi.
Elemen strategy bagaimana UI dan UX dapat memiliki kelebihan dari aplikasi
lainnya.
Proses pra produksi merupakan tahap awal dalam proses berkarya. Proses
pra produksi ialah tahapan-tahapan yang dilaksanakan sebelum proses produksi
dimulai dan berikut adalah tahapan dari proses pra produksi:
3.2.2.1 Penyusunan User Flow
Pada tahapan ini dilakukan penyusunan langkah-langkah yang harus
dilakukan oleh pengguna untuk mengoperasikan aplikasi mobile Indosport dan
bagaiman mereka dapat menemukan halaman berita, aktivitas, jadwal pertandingan
dan profil. User flow sendiri merupakan langkah-langkah yang harus dilakukan oleh
83
pengguna dalam mengerjakan suatu tugas atau perintah. Pembuatan user flow
merupakan proses berpikir untuk memandu pengguna dalam menggunakan solusi
dalam desain yang dirancang.
Sebelum memulai proses perancangan desain visual dari user interface, user
flow berguna untuk memberikan arahan atau solusi terhadap para desainer maupun
pengguna. Seperti desainer membuat suatu solusi dalam permasalahan melalui
desain visual yang berfokus untuk menyelesaikan masalah dari target audiens
tersebut. Sedangkan untuk desainer, user flow merupakan bentuk peta atau map
yang menavigasikan seorang desainer ketika membuat suatu desain user interface.
Dalam user flow UI dan UX aplikasi mobile Indosport, penulis memikirkan
bagaimana solusi para calon pengguna nantinya dapat menavigasikan rancangan
aplikasi tersebut dengan kesalahan pengoperasian yang minim. Agar memberikan
kepuasan secara langsung dalam segi time to learn dan rate of errors by users yang
termasuk dari 5 poin strategi perancangan UI dan UX. Berikut adalah user flow
yang telah dibuat oleh penulis yang diharapkan dapat memenuhi kebutuhan dan
kemudahan calon pengguna dalam mengoperasikannya.
84
Gambar 3.5 User Flow Indosport
85
3.2.2.2 Perancangan Wireframe
Merupakan kerangka dasar dalam sebuah desain yang berfungsi untuk
menghubungkan sebuah konsep ke dalam bentuk tampilan aplikasi mobile.
Perancangan wireframe merupakan proses lanjutan dari user flow, yang
diimplementasikan dengan tata letak dari mulai gambar, teks dan bagaimana nanti
pengguna akan berpindah dari skenario ke skenario selanjutnya. Proses
perancangan wireframe berfungsi sebagai skema visual yang dapat menyampaikan
tingkat dasar komunikasi, struktur dan perilaku selama perancangan dari UI dan
UX.
Perancangan wireframe juga melibatkan tata letak visual yang juga sangat
berkaitan dengan prinsip-prinsip desain komunikasi visual yaitu unity and variety,
hierarchy, contrast, proportion dan balance. Prinsip unity and variety akan
diterapkan dalam berbagai halaman dari UI dan UX aplikasi mobile Indosport,
seperti memberi jarak antara elemen visual dan kombinasi bentuk visual yang
teratur serta konsisten. Prinsip hierarchy juga akan ditekankan khususnya pada
halaman yang terdapat konten di dalamnya, untuk dapat mengatur fokus pengguna
untuk bagian yang akan diprioritaskan. Prinsip contrast juga sangat diperlukan
sebagai penanda suatu fungsi yang dapat ditunjukkan memelalui bentuk, warna,
akuran ataupun tata letak. Prinsip proportion atau proporsi disini akan berfungsi
sebagai kerangka yang medasari semua elemen, atau dapat disebut dengan layout
yang akan digunakan. Prinsip balance juga akan menjadi acuan dasar yang penting
dalam tampilan, sebab pada layar smartphone yang tidak dapat dikatakan besar
akan sangat menunjukkan elemen visual yang tidak seimbang, maka dari itu untuk
86
mengatasinya terdapat guidelines mengenai padding yang dapat membantu dalam
mendapatkan kesimbangan dalam tampilan.
Gambar 3.6 Proses Perancangan Wireframe
Sumber: Dokumentasi Penulis (2019)
Wireframe sendiri termasuk dalam desain low-fidelity digunakan dalam
proses perancangan UI dan UX yang berfokus pada pemecahan masalah seperti apa
yang dapat dilakukan oleh pengguna dan cara kerjanya dalam berbagai skenario.
Wireframe hanya berfokus pada fitur secara fungsional bukan pada elemen
visualnya.
3.2.2.3 Perancangan Guidelines
Sebelum merancang desain user interface diperlukan guidelines terlebih
dahulu untuk menghasilkan desain yang konsisten pada proses perancangan.
Karena untuk memenuhi prinsip-prinsip dalam pembuatan desain sebuah aplikasi
maka diperlukan suatu rancangan yang akan dijadikan pedoman atau petunjuk agar
tidak mengalami kesalahan konsepsi ataupun interpretasi yang berbeda-beda pada
87
hasil desain user interface. Disini guidelines yang dibuat adalah warna, tipografi,
navigasi, dan padding.
Gambar 3.7 Guidelines Indosport
Sumber: Dokumentasi Penulis (2019)
Alasan utama untuk membuat guidelines sebelum memulai membuat
bentuk visual dari user interface adalah untuk menjaga konsistensi elemen-elemen
dari sebuah produk digital. User Interface Guideline dapat dikatakan sebagai Single
Source of Truth atau sebuah pedoman. Salah satu fungsi yang sangat membantu
ketika membuat guideline adalah ketika membuat banyak halaman pada sebuah
produk digital baik aplikasi maupun web dan banyak desainer yang mengerjakan
desain sebuah produk digital.
88
Mengacu pada style guide untuk user interface, guidelines ini menggunakan
customized style guide untuk dapat mengembangkan potensi dari guidelines
Indosport yang sudah ada. Customized style digunakan dikarenakan lebih cocok
digunakan jika dibandingkan dengan commercial style guide, karena dapat
menyesuaikan dengan keadaan yang terjadi. Namun penggunaan customized style
tidak lepas dari commercial style guide yang berfungsi agar pengguna tidak perlu
mempelajari tata letak terlalu lama.
Terdapat dua font yang digunakan dalam merancang UI dan UX aplikasi
mobile Indosport adalah Poppins sebagai header dan Lato sebagai body text.
Sedangkan untuk warna menggunakan empat kombinasi warna, diantaranya merah,
putih, abu-abu gelap dan ungu tua. Pada penggunaan padding pada UI dan UX
aplikasi mobile Indosport adalah menggunakan kelipatan 5 pixel. Seperti padding
yang terdapat pada sisi kiri dan kanan halaman adalah menggunakan 20 pixel, untuk
jarak antara card sendiri menggunakan 15 pixel. Dan pada header jarak paddingnya
adalah 30 pixel antara tombol navigasi dan 20 pixel untuk jarak header dengan
halaman content.
3.2.2.4 Komunikasi dengan Dosen Pembimbing dan Klien
Pada tahap ini proses komunikasi dengan klien mengenai harapan dan
tujuan yang ingin mereka capai dalam desain UI dan UX aplikasi mobile ini. Proses
ini bertujuan untuk menyamakan visi dan misi terkait dengan rencana desain yang
akan dibuat, agar dapat menjadi desain yang sesuai dengan klien maupun audiens.
Ditambah dengan komunikasi dengan dosen pembimbing untuk dapat memperoleh
masukan terhadap konsep sebelum memasuki tahap produksi.
89
3.2.3 Proses Produksi
Proses produksi merupakan tahap selanjutnya setelah selesai melakukan
tahap awal yaitu pra produksi. Proses produksi ialah tahapan-tahapan yang ada
untuk menghasilkan suatu produk, baik berupa barang atau jasa yang dapat diambil
nilai lebihnya atau manfaatnya oleh konsumen. Produksi merupakan pula proses
utama dalam rangkaian tahapan pembuatan karya proyek studi perancangan UI dan
UX aplikasi mobile Indosport. Tanpa melupakan 5 elemen perancangan UI dan UX
aplikasi mobile Indosport yaitu kebutuhan pengguna dan tujuan, spesifikasi
fungsional dan konten, interaksi desain dan arsitektur, wireframes, dan yang
terakhir adalah visual design. Dan berikut adalah tahapan dari proses produksi:
3.2.3.1 Perancangan Ilustrasi
Perancangan ilustrasi dalam UI dan UX aplikasi mobile dibuat bertujuan
untuk memperjelas konten serta meningkatkan calon pengguna untuk menangkap
ide atau informasi di dalamnya. Seperti dalam Witabora (2012:666) ilustrasi
memberikan dampak visual terkait dengan informasi dan promosi sebuah produk
atau jasa yang juga berfungsi sebagai media yang ideal untuk memberi identitas
baru dan pembeda dari produk lainnya.
90
Gambar 3.8 Proses Perancangan Ilustrasi
Sumber: Dokumentasi Penulis (2019)
3.2.3.2 Perancangan Desain User Interface
Setelah serangkaian hasil perancangan wireframe dan guidelines selesai,
maka akan dilanjutkan dengan membuat desain user interface untuk
mempresentasikan hasil rancangan dan agar dapat melihat hasil visual secara nyata.
Gambar 3.9 Proses Perancangan User Interface
Sumber: Dokumentasi Penulis (2019)
91
Dalam merancang desain user interface penulis menggunakan Adobe XD
atau dikenal pula dengan nama Adobe Experience Design. Merupakan alat untuk
membuat UI dan UX berbasis vector untuk aplikasi web dan mobile yang
dikembangkan dan dirilis oleh Adobe. Pembuatan desain user interface termasuk
dalam desain high-fidelity, yang merupakan versi detail dari low-fidelity seperti
detail-detail yang ditambahkan pada desain high-fidelity seperti wana, icon,
gambar, serta objek visual lainnya.
Perancangan user interface pada tahap ini mempertimbangkan aspek
strategi perancangan yaitu time to learn, speed of performance, rate of errors by
users, retention over time dan subjective satisfaction. Proses terhadap aspek-aspek
strategi perancangan user interface dilakukan dengan cara trial and error, dengan
secara langsung membutuhkan bantuan yang termasuk dalam kategori target
audiens untuk dapat memberikan feedback ketika mereka mencoba user interface
tersebut dan memperbaikinya lagi, proses dilakukan secara berulang dari aspek
pertama sampai dengan terakhir hingga mendapatkan respon positif.
Aspek strategi perancangan time to learn digunakan pada halaman start
screen sampai dengan seorang pengguna dapat masuk kebagian utama dari UI dan
UX dari Indosport, time to learn adalah waktu pengguna dapat memahami sebuah
UI, dalam halaman start screen pengguna dapat melihat user interface dengan
objek visual yang sangat sedikit dilanjutkan dengan halaman-halaman berikutnya
yang memiliki jumlah objek visual yang semakin bertambah, objek seperti pada
button, header title, ilustrasi dan objek lainnya. Penambahan objek akan meningkat
ini seiring pengguna masuk lebih jauh dari halaman start screen sampai dengan
92
halaman news, proses ini dapat mengingatkan pengguna bentuk mana kah dari
objek visual yang krusial, dan berisikan perintah di dalamnya. Serta konsep yang
tidak langsung mengenalkan informasi kepada pengguna terlalu banyak dalam satu
waktu berkaitan pada aspek strategi retention over time, tidak hanya berpikir
bagaimana pengguna dapat mengingat dengan cepat, namun mempertahankan
ingatan itu ketika sedang tidak menggunakan. Pengguna sejak awal halaman
membuka Indosport akan disuguhkan pada bentuk yang mengindikasikan suatu
fungsi.
Aspek speed of performance yaitu bagaimana sebuah UI dan UX tidak
membuat performa menurun, penulis terapkan pada semua transisi ketika halaman
berpindah ke halaman lainnya, serta efek animasi dari transisi dibuat sesederhana
mungkin namun tetap memberikan kepuasan pengguna yang juga termasuk
kedalam subjective satisfaction. Untuk mengantisipasi penurunan performa,
penggunaan animasi untuk keperluan transisi hanya dibatasi selama 0,3 detik. Serta
penggunaan animasi pada halaman start screen menggunakan resolusi menengah
di ilustrasi untuk mengurangi penurunan performa dikarenakan memiliki objek
visual yang cukup banyak.
Prinsip perancangan rate of errors adalah mensimulasikan seberapa jumlah
dan jenis keasalahan ketika pengguna memakainya, proses untuk dapat mnegurangi
jumlah kesalahan ini dapat disimulasikan dengan menggunakan aplikasi tersebut
dan mencari kesalahan yang dapat terjadi ketika pengguna memakainya, seperti
apakah penempatan tombol back sudah memiliki penempatan yang sama di setiap
93
halamannya, serta apakah perintah untuk melakukan swipe pada halaman news
sudah baik.
Serta prinsip terakhir yaitu subjective satisfaction adalah kepuasan
pengguna secara subjektif. Seperti pada halaman news pada sub bagian featured,
transfers, galleries, videos yang memberikan ilustrasi sebagai gambaran dari artikel
terkait. Serta penggunaan ilustrasi yang terdapat pada halaman-halaman utama dari
Indosport, seperti pada news, activity, calendar dan profile. Serta subjective
satisfaction diterapkan pula dalam sebuah fitur, yaitu badges yang berfungsi
memberikan penghargaan kepada pengguna ketika mencapai pencapaian tertentu.
Proses perancangan user interface juga memikirkan prinsip-prinsip user
interface dapat berdampingan sejalan dengan visual dan fungsi. Acuan prinsip yang
terdiri dari delapan prinsip yang disebut dengan golden rules, antara lain strive for
consistency, seek universal usability, offer informative feedback, design dialogs to
yield closure, prevent errors, permit easy reversal of actions, keep users in control
dan reduce short-term memory load. Prinsip tersebut sudah menjadi panduan saat
merancangan user interface ini.
Prinsip strive for consistency digunakan pada objek visual yang memiliki
suatu fungsi seperti pada button, form, selected button, garis timeline serta bagian
lainnya. Untuk dapat memenuhi strive consistency tidak hanya pada penggunaan
warna serta dan bentuk, tetapi juga pada tata letak. Tata letak header pada halaman
news, activity, calendar dan profile memiliki layout header yang serupa dari
penempatan button, header title serta efek parallax. Tata letak header dengan
94
menggunakan prinsip strive for consistency bertujuan untuk memberikan kesan
menyatu pada setiap halaman.
Prinsip offer informative feedback dilakukan pada beberapa button seperti
pada button bookmark, notifications, select date bagian calendar dan sub bagian
news. Memberikan sentuhan pada warna yang berbeda ketika pengguna
menyentuhnya. Pada bagian button bookmark memberikan efek warna yang
memenuhi pada ikon yang sebelumnya ikon tersebut hanya berupa outline.
Sedangkan pada notifications, select date, dan sub bagian news diberikan efek
berwarna merah pada bagian yang sedang pengguna buka, warna yang digunakan
adalah merah, untuk memberikan highlight diantara warna abu-abu.
Prinsip design dialogs to yield closure digunakan untuk memberikan
indikator untuk mempersiapkan tindakan selanjutnya. Prinsip ini diterapkan pada
halaman which you prefer, favorite team dan halaman sign out pada halaman
profile. Pada bagian which you prefer dan favorite team untuk memberikan
pengguna petunjuk dapat melangkah pada halaman utama, pada halaman tersebut
pengguna akan dihadapkan oleh pilihan setelah memilih pengguna akan
mendapatkan hasil yang dipilih.
Penggunaan prinsip permit easy reversal of actions untuk membantu
pengguna untuk mebatalkan sebuah perintah. Prinsip ini digunakan pada hampir
semua halaman, yaitu pada tombol back serta bottom bar. Tombol back yang selalu
ada pada bagian kiri atas halaman bertujuan untuk menjadi jalan pintas bagi
pengguna untuk melakukan tindakan untuk membatalkan sesuatu, yaitu dengan
kembali pada aksi sebelumnya. Sedangkan pada bottom bar Kembali dengan
95
rentang yang lebih jauh lagi, yaitu Kembali ke salah satu halaman utama dari
Indosport. Beberapa kasus seperti pada kotak dialog sign out akan muncul button
untuk pengguna dapat memilih untuk yakin akan keluar atau tidak.
Prinsip keep users in control diterapkan pada pembagian jenis news pada
sub bagian-bagiannya yang dipisahkan menjadi topik berita tertentu yang
disesuaikan oleh pengguna. Serta bottom bar juga berfungsi sebagai jalan pintas
untuk pengguna dapat menyesuaikan bagian mana yang ingin mereka buka.
Prinsip reduce short-term memory merupakan alasan dari dibuatnya sebuah
guidelines pada bagian sebelumnya. Dimana berfungsi untuk menghindari
pengguna untuk mengingat infromasi baru pada setiap halaman, agar pengguna
dapat menangkap informasi dari olahraga tersebut.
3.2.3.3 Perancangan Prototype Interaktif
Ketika rancangan dari desain user interface selesai, maka dilanjutkan
dengan penambahan interaksi desain untuk menggambarkan user experience
didalamnya atau bagaimana pengguna nantinya dapat berinteraksi dengan
rancangan aplikasi mobile yang telah dibuat. Pada langkah ini mengikuti user flow
dan struktur informasi yang sudah dibuat sebelumnya.
Perancangan interaksi ini menggunakan aplikasi Protopie, yang merupakan
alat prototyping untuk smart devices. Yang nantinya dapat diuji pada perangkat
secara aktual. Pada perancangan prototype ini, pendekatan user centered design
diterapkan yang merupakan lanjutan dari pengembangan dari user interface,
penggunaan user centered design saat merancang prototype bertujuan untuk
96
membentuk tampilan yang tidak hanya berpesan namun juga dapat memahami
kebutuhan dari seorang pengguna.
Kebutuhan jenis kebutuhan pengguna terbagi atas tiga jenis, kebutuhan
pengguna secara langsung adalah kebutuhan atau pengalaman yang dapat sebagian
pengguna bayangkan dan jelaskan, membuat sebuah wadah untuk pengguna dapat
berinteraksi dengan teman dan beberapa umpan balik dari sebuah pertandingan
pada halaman activity menjadi poin utama. Selanjutnya kebutuhan pengguna yang
sedang dirasakan adalah dengan memisahkan jenis berita pada halaman news, dan
disusun secara terpisah sesuai dengan judul dari kolom-kolom yang disediakan
sesuai dengan kebiasaan pengguna. Terakhir adalah kebutuhan pengguna yang
tersembunyi adalah dengan membuat halaman countdown berjalan dengan sesuai
ekpektasi dengan konsep serta penambahan shortcut pada bagian bookmark yang
dapat mempermudah pengguna dalam mengakses berita melalui pemberitahuan
yang telah ditandai sebelumnya.
Gambar 3.10 Pemicu dan Respon untuk Membuat Interaksi pada UI dan UX (protopie.io)
97
Gambar 3.11 Perancangan Prototype Interaktif
Sumber: Dokumentasi Penulis (2019)
Model konsep yang dibuat pada Protopie didasarkan pada bagaimana suatu
objek visual bergerak dalam perancangan UI dan UX. Yang memungkinkan
pengguna untuk mengoperasikan bentuk yang sudah dirancang sebagai mana dapat
mempresentasikan hasil jadi dari sebuah aplikasi mobile.
Gambar 3.12 Perancangan Aset Komponen
Sumber: Dokumentasi Penulis (2019)
98
3.2.3.4 Konsultasi dengan Dosen Pembimbing
Tahap ini merupakan proses konsultasi pada dosen pembimbing mengenai
karya proyek studi yang telah dikerjakan untuk memperoleh kritik dan saran
sebagai bahan pertimbangan serta meningkatkan karya sehingga menjadi lebih
baik. Proses ini bertujuan untuk memaksimalkan karya sehingga lebih efektif serta
memenuhi tujuan dari pembuatan karya. Konsultasi dilakukan agar desain yang
dirancang dapat sesuai dengan kebutuhan klien, serta mendapatkan desain UI dan
UX yang baik serta tepat sasaran.
3.2.3.5 Konsultasi dengan Klien
Setelah membuat semua aset visual dan menjadikannya sebuah UI dan UX
aplikasi mobile maka hal yang dilakukan adalah konsutasi dengan klien mengenai
UI dan UX tersebut agar memperoleh masukan yang dapat membuat puas klien
untuk desain akhir nantinya.
3.2.4 Proses Pasca Produksi
Proses pasca produksi dilaksanakan dengan cara pameran karya yang
berbentuk prototype aplikasi mobile agar para penonton dapat melihat user
interface serta merasakan user experience di dalamnya, Pameran dilaksanakan
sebagai bentuk penyampaian informasi kepada masyarakat melalui pameran proyek
studi.
3.2.4.1 Perancangan Media Pendukung
Perancangan media pendukung berfungsi sebagai media untuk melengkapi
produk UI dan UX aplikasi mobile Indosport ketika menjalani pameran. Media-
media yang dirancang antara lain adalah:
99
1. X-Banner
2. Poster
3. Stiker
4. Pin
5. Undangan Pameran
6. Feed Instagram
7. Mechandise Pameran
3.2.4.2 Pra Pameran
Pra pameran merupakan tahap perancaan untuk pelaksanaan kegiatan
pameran dan hal-hal yang perlu dipersiapkan antara lain adalah menentukan waktu
dan tempat pelaksanaan pameran, menentukan siapa tamu undangan, membuat
susunan acara, mempersiapkan alat-alat dokumentasi untuk membantu
mengabadikan momen saat proses pameran berlangsung dan mempersiapkan
konsumsi serta kegiatan untuk publikasi.
3.2.4.3 Pameran
Kegiatan pameran sendiri merupakan tahap akhir dari perancangan karya
pada proyek studi sebagai media atau bentuk penyampaian informasi kepada
masyarakat terkait. Tujuan dari dilaksanakan pameran ini antara lain untuk
memperoleh apresiasi penonton yang mengunjungi pameran atas karya yang sudah
diselesaikan. Adapula pameran ini dilakukan bertujuan untuk memberikan inspirasi
kepada khalayak mengenai dunia desain itu sendiri.
100
3.2.4.4 Presentasi Desain Akhir ke Klien
Presentasi desain bertujuan untuk memberikan atau menyampaikan
informasi mengenai konsep dari setiap halaman UI dan UX aplikasi mobile
Indosport, aspek yang akan disampaikan kepada klien adalah aspek estetik, teknis
dan pesan. Proses ini dilakukan untuk memberikan pemahaman mengenai apa yang
telah dibuat oleh seorang desainer.
101
BAB IV
DESKRIPSI DAN ANALISIS KARYA
4.1 Karya yang Dihasilkan
Setelah melewati rangkaian proses dalam membuat karya desain serta
konsultasi dengan klien maupun dengan dosen pembimbing, maka diperoleh
sebuah karya User Interface dan User Experience aplikasi mobile dari Indosport.
Gambar 4.1 UI dan UX Aplikasi Mobile Indosport
4.1.1 Spesifikasi Karya
Media : Smartphone
Dimensi : 720 x 1.440 pixel
Software : Adobe XD, Adobe Illustrator, Protopie
Button : Like icon white, like icon black, form comment, form search, news
bottom bar button, activity bottom bar button, calendar bottom bar
102
button, profile bottom bar button, button notifications, button
bookmark, button back, play button, pause button, button next,
button previous, select team button, featured button, transfers
button, galleries button, videos button, profile settings button,
notifications button, select matchday button, player stats and league
button, select date calendar button, select league button, stats match
button, timeline match button, line up match button, standings match
button, who will win vote button, friends button, badges button, log
out button.
Halaman : Start screen, register, sign in, which you prefer, favorite team,
forgot password, forgot password - done, news – featured, news –
transfers, news – galleries, news – videos, post news featured, post
news transfers, post news galleries, post news videos, activity,
activity – matchday, calendar, calendar matches, player and League
stats, profile, profile settings, friends, badges, notifications, players,
teams, log out.
4.2 Pendekatan Ilustrasi
Pada dasarnya ilustrasi adalah proses visualisasi dari peristiwa atau hal-hal
lainnya yang dapat digambarkan secara visual. Seperti dalam penjelasan Makina
(dalam Nurdin dkk, 2018:19) yang mengatakan bahwa visualisasi merupakan usaha
yang dapat membantu seseorang dalam mengembangkan kemampuan berpikir
kritis, menghubungkan koneksi logis antar ide, mengidentifikasi, memberikan
103
argumen dan memecahkan suatu masalah. Seseorang dapat mudah mengingat akan
sesuatu serta memahami maksud dari tujuan seorang desainer.
Dalam UI dan UX aplikasi mobile Indosport, penulis mencari beberapa
referensi yang sekiranya cocok dengan konten dari Indosport sendiri, yaitu
olahraga, dan menemukan pendekatan ilustrasi yang cocok yaitu gaya bidang
dengan lekukan atau garis yang tegas. Namun tetap mengingat target audiens dari
Indosport, yaitu usia 16-30 tahun. Untuk gaya gaya ilustrasi sendiri, penulis
terinspirasi oleh NERDO Studio.
Gambar 4.2 Ilustrasi oleh NERDO Studio untuk Nike Yoga
Gaya ilustrasi yang digunakan oleh NERDO Studio sendiri berjenis kartun,
hal yang membuat penulis tertarik untuk dapat mengadaptasi serta membuat ciri
khas sendiri dari ilustrasi ini adalah karakter-karakter yang dibuat walaupun
berbentuk sederhana, tetapi menunjukkan kesan maskulin. Terdapat perbedaan
gaya ilustrasi ini dengan ilustrasi yang penulis buat, pada ilustrasi Indosport tidak
menggunakan warna yang banyak untuk menghindari kesan terlalu ramai serta
untuk menjaga konsistensi. Ilustrasi yang digunakan pada Indosport menggunakan
104
garis yang patah, namun tidak tajam untuk menggambarkan kesan tegas serta
berfungsi agar dapat menunjukkan emosi-emosi para pemain dalam ilustrasi.
Gambar 4.3 Ilustrasi Mohamed Salah
Tidak memiliki perbedaan jauh dengan foto, pada ilustrasi yang akan
ditampilkan dalam sejumlah artikel bahasa rupa yang digunakan antara lain
medium, medium close up, long shot, bidang dan tanpa perspektif. Serta
menggunakan ilustrasi yang tanpa perspektif namun terdapat garis-garis, bayangan,
serta noise untuk menunjukkan beberapa detail yang khas dan akan diingat orang,
seperti penggunaan gradient, shadow¸stroke, dan noise.
4.3 Tata Letak dan Fungsi pada Wireframe
Merupakan bentuk visual yang menghubungkan antara interaksi pengguna
kepada perangkat lunak dan diproses oleh perangkat keras, maka dari itu dalam
membuat user interface harus dapat mengetahui kebutuhan pengguna yang dituju.
Berikut merupakan user interface yang berbentuk low fidelity dari aplikasi mobile
Indosport:
105
Tabel 4.1 Keterangan Wireframes Indosport
No Halaman Keterangan
1
Halaman start screen merupakan halaman
pembuka dari Indosport dan terdapat beberapa
penjelasan singkat mengenai aplikasi.
Terdapat pula button sign in dan register.
Penggunaan prinsip contrast dapat dilihat
melalui tombol-tombol yang terdapat pada
halaman ini.
2
Halaman sign in berfungsi untuk pengguna
yang sudah mendaftar di Indosport
sebelumnya. Terdapat button sign in with
Facebook dan button sign in with Google,
untuk meningkatkan pengalaman pengguna.
Pada bagian bawah terdapat tautan untuk
menuju halaman forgot password dan register.
Button sign in akan langsung mengarahkan
pengguna pada halaman News. Penggunaan
prinsip contrast serta unity dan variety sangat
ditekankan disini, pada tombol yang berfungsi
agar pengguna dapat memahami fungsi
melalui bentuk visual.
106
No Halaman Keterangan
3
Halaman register yang berfungsi untuk para
pengguna baru untuk daftar. Terdapat jalan
pintas untuk pengguna yang sudah memiliki
akun untuk langsung menuju halaman sign in
untuk meningkatkan pengalaman pengguna.
Sama seperti halaman sign in yang
menekankan prinsip hierarchy, unity dan
variety.
4
Setelah mengisi form yang terdapat pada
halaman register, pengguna baru akan
diarahkan pada halaman which you prefer yang
menyuruh pengguna untuk mengisi olahraga
pilihan mereka untuk konten berita. Dapat
dilihat, prinsip balance dan variety merupakan
prinsip yang paling menonjol pada halaman
ini, tidak hanya untuk memperindah namun
juga memberikan bentuk visual yang
seimbang.
5
Setelah halaman which prefer, terdapat
halaman favorite team untuk menunjukkan tim
favorit pengguna dan juga akan mengatur feed
news pengguna itu sendiri. Setelah pengguna
baru mengisi halaman ini, akan langsung
dialihkan pada halaman news. Prinsip
hierarchy sangat berperan disini, untuk
membawa fokus pengguna untuk dapat
melakukan interaksi yang dibutuhkan
selanjutnya.
107
No Halaman Keterangan
6
Halaman forgot password membantu bagi
pengguna yang lupa akan kata sandi dari
Indosport. Dan ada jalan pintas untuk mereka
yang ingin sign in maupun register. Sama
seperti halaman sign in dan register yang
menekankan prinsip hierarchy, unity dan
variety.
7
Halaman news pada bagian featured berisi
berita-berita sepakbola atau olahraga lainnya.
Berita yang secara umum memuat teks dan
gambar. Terdapat kolom pemisah untuk
membedakan jenis berita. Jika melihat prinsip
hierarchy dapat diperhatikan, tampilan
tersebut membawa pengguna untuk melihat
dari atas sampai dengan kebawah diikuti pula
dengan kiri ke kanan. Sedangkan proportion
ditonjolkan pada halaman konten untuk
memudahkan audiens dalam menangkap
informasi.
8
Halaman news pada bagian transfers berisi
rangkuman mengenai aktivitas transfer
pemain, menunjukkan pemain, harga transfer,
tim asal dan tim tujuan. Prinsip hierarchy
sangat berperan disini, untuk dapat membawa
mata penonton dalam menyerap informasi dari
kiri ke kanan serta dilanjutkan dengan atas ke
bawah.
108
No Halaman Keterangan
9
Halaman news bagian galleries berisikan
konten yang memuat mini galeri di dalamnya,
yang dominan pada gambar dan minim teks.
Tidak berbeda jauh dengan halaman news
bagian featured mengenai prinsip desain
komunikasi visual.
10
Halaman news bagian videos berisikan konten
yang memuat konten-konten yang terdapat
video di dalamnya. Tidak berbeda jauh dengan
halaman news bagian featured mengenai
prinsip desain komunikasi visual.
11
Halaman search yang terdapat pada halaman
news merupakan halaman yang berfungsi
sebagai pencari apa yang dibutuhkan pengguna
secara singkat. Prinsip contrast membantu
untuk dapat mengkomunikasikan dari keyword
trending serta hierarchy untuk navigasi bagian
konten.
109
No Halaman Keterangan
12
Halaman berita untuk bagian featured yang
dibuat dengan ruang teks yang lebih banyak,
karena dikhususkan untuk berita yang dominan
terhadap teks dengan minim gambar. Prinsip
yang berperan utama pada halaman ini adalah
proportion dan hierarchy. Proportion untuk
menjaga agar tetap nyaman untuk dibaca dan
hierarchy membantu keperluan seperti gambar
dan komentar.
13
Halaman berita untuk bagian transfers yang
terdapat pada halaman news. Menonjolkan
informasi-infromasi transfers, seperti tim asal
dan tim tujuan lalu harga transfer sampai
dengan kontrak pemain tersebut dengan
penjelasan berupa teks yang terdapat pada
bagian bawahnya. Sama seperti pada halaman
artikel lainnya, proportion dan hierarchy
berperan utama.
14
Halaman berita untuk bagian galleries yang
terdapat pada bagian halaman news. Pada
halaman ini menonjolkan berita yang dikemas
dengan gambar untuk pengalaman interaktif
kepada pengguna yang sedang malas
membaca. Serta dibagian bawah mini galeri
tersebut terdapat sedikit ruang untuk teks untuk
memperjelas gambar. Sama seperti pada
halaman artikel lainnya, proportion dan
hierarchy berperan utama.
110
No Halaman Keterangan
15
Halaman berita untuk bagian videos yang
terdapat pada bagian halaman news. Halaman
ini fokus pada berita yang berformat video
dapat seperti kejadian pada lapangan,
wawancara, maupun highlight pertandingan
yang berfungsi untuk memperjelas berita.
Sama seperti pada halaman artikel lainnya,
proportion dan hierarchy berperan utama.
16
Halaman activity berisikan mengenai aktivitas-
aktivitas dari teman ketika menggunakan
aplikasi mobile Indosport yang dibuat
berdasarkan urutan waktu. Prinsip unity dan
variety pada halaman ini untuk menunjukkan
aktivitas-aktivitas dari teman, serta hierarchy
untuk alur mata dalam menangkap informasi.
Pada menu bagian atas pula juga merujuk pada
prinsip hierarchy.
17
Halaman countdown yang termasuk dalam
bagian activity pada dasarnya memiliki konsep
yang sama tetapi pengelompokkan aktivitas
berdasarkan tim yang bermain pada halaman
countdown tersebut dan terdapat pula berita-
berita terkait mengenai tim yang akan bermain.
Sama seperti pada halaman activity, namun
terdapat prinsip yang sama yaitu proportion
seperti pada halaman news.
111
No Halaman Keterangan
18
Halaman calendar merupakan halaman yang
cukup krusial pada Indosport nantinya, karena
terdapat info pertandingan secara rentetan
waktu yang dikemas dalam penyortiran
berbentuk seperti tanggalan, agar pengguna
tidak perlu repot dalam mencari pertandingan
yang akan datang maupun pertandingan
sebelumnya. Terdapat daftar tanggal serta tim
mana saja yang akan bermain, tentu dengan
informasi waktu mulai pertandingan tersebut.
Prinsip unity dan variety dapat terlihat jelas
pada bagian header, serta contrast untuk
membedakan halaman yang sedang dibuka,
penyusunan proportion sama seperi pada
halaman news transfers.
19
Halaman match berisikan informasi-informasi
pertandingan, seperti terdapat informasi
mengenai riwayat-riwayat pertandingan
sebelumnya, rekapitulasi pertandingan terkini,
taktik, pemain substitusi dari kedua belah
pihak tim, posisi klasemen tim dan pada
halaman ini pengguna juga dapat memilih
siapa pemenang dari kedua tim tersebut untuk
mendapatkan mendali jika sudah mencapai
pencapaian tertentu dalam memilih siapa
pemenangnya. Seperti pada semua halaman
yang menerapkan prinsip balance, pada
halaman ini pemisahan padding menggunakan
card agar dapat memuat informasi yang lebih
jelas.
112
No Halaman Keterangan
20
Halaman stats merupakan rangkuman dari
pencetak gol dan pemberi assist terbanyak
dalam setiap liga, terdapat pula tabel klasemen
liga. Penggunaan prinsip contrast sangat
membantu pada halaman ini, untuk
membedakan, liga, klub dan pemain agar dapat
menyampaikan informasi dengan visual.
21
Pada halaman profile terdapat status pengguna
dalam angka, serta favorit tim atau pemain
pilihan pengguna, lalu ada daftar teman, daftar
mendali atau badges, dan yang terakhir adalah
aktivitas terkini dari pengguna. Pada halaman
ini tidak ada penggunaan prinsip yang lebih
condong, semuanya pada porsi yang sama,
sebab pada halaman ini merupakan rangkuman
dari aspek visual yang ada.
22
Halaman edit profile berfungsi untuk
pengguna untuk mengedit informasi atau tim
favorit pada Indosport. Serta pada halaman ini
pengguna dapat sign out dengan menyentuh
tombol pada kanan atas. Tidak berbeda jauh
dengan halaman profile, namun penggunaan
prinsip contrast cukup membantu dalam
penyampaian informasi.
113
No Halaman Keterangan
23
Pada halaman notifications berisikan
pemberitahuan-pemberitahuan mengenai apa
yang diikuti oleh pengguna serta aktivitas dari
teman. Bagi pengguna yang sebelumnya
mengikuti pemain tertentu atau klub tertentu
pada tombol bookmark, notifikasi terkini
melalui pemain atau klub tersebut akan muncul
pada halaman ini. Header dapat dikatakan
sama seperti pada halaman stats yang
menggunakan contrast serta informasi pada
halaman konten juga terbantu dalam
menyampaikan informasi.
24
Halaman friend list merupakan halaman yang
berisikan teman dari pengguna, lalu terdapat
tombol add untuk menambahkan teman secara
cepat.
25
Halaman badges berisikan daftar mendali-
mendali yang didapat oleh pengguna setelah
mencapai suatu ketentuan. Terdapat pula
keterangan tanggal pengguna meraih mendali
tersebut.
114
4.4 Peta Aplikasi
Dalam UI dan UX aplikasi mobile Indosport terdapat tombol-tombol yang
berfungsi untuk memerintahkan suatu aksi ketika pengguna menyentuhnya atau
biasa dipahami dengan tombol CTA (Call to Action), suatu tombol yang dapat
memberikan beragam respon, salah satunya adalah berpindah dari halaman ke
halaman lainnya. Dari fungsi tersebut maka dibuatlah peta aplikasi yang berfungsi
untuk menjelaskan turunan-turunan dari setiap halaman, berbeda dengan user flow
yang ada pada BAB III halaman 84, user flow adalah proses pemecahan masalah
bagaimana pengguna dapat merespon pada tiap-tiap halaman, dari mulai pengguna
membuka aplikasi sampai dengan menutup aplikasi.
115
Gambar 4.4 Peta Aplikasi Indosport
116
Gambar di atas merupakan peta aplikasi dari UI dan UX Indosport yang
menjelaskan turunan-turunan dari setiap halaman. Berdasarkan gambar di atas,
halaman start screen yang akan pertama kali muncul ketika aplikasi dibuka, lalu
terdapat dua tombol yaitu get started dan login, kedua tombol tersebut akan
mengarahkan kepada halaman yang berbeda.
Jika pengguna menyentuh tombol get started maka pengguna akan
diarahkan pada halaman register yang ditujukan untuk pengguna baru, lalu halaman
selanjutnya pengguna akan diarahkan pada halaman which you prefer yang
memberi perintah pengguna baru untuk memilih olahraga yang lebih condong atau
sukai pengguna, lalu pada halaman selanjutnya akan diarahkan pada halaman
favorite team untuk dapat pengguna pilih mana tim favorit mereka.
Jika pengguna menyentuh tombol login maka akan diarahkan pada halaman
login yang ditujukan untuk pengguna lama atau pengguna yang sebelumnya sudah
pernah mendaftar, pada halaman selanjutnya pengguna akan langsung diarahkan
pada halaman news.
4.5 Analisis UI dan UX Aplikasi Mobile
Aspek yang akan dianalisis dalam karya ini meliputi deskripsi dan analisis.
Deskripsi yang akan dijabarkan adalah paparan mengenai tampilan aplikasi mobile
dari segi visual dan fungsi. Sedangkan analisis meliputi berbagai hal yang berkaitan
dengan aspek estetik, aspek teknis, dan aspek komunikasi yang terkandung pada
tiap halaman dari UI dan UX aplikasi mobile Indosport. Dalam ruang lingkup teknik
perancangan UI dan UX ini umumnya memiliki kesamaan yang dimana semuanya
menggunakan aplikasi Adobe XD untuk membuat user interface (UI), Adobe
117
Illustrator CC 2020 untuk membuat ilustrasi, dan Protopie membuat user
experience (UX) untuk merasakan bagaimana prototipe aplikasi mobile ini dapat
berjalan.
4.5.1 Halaman Landing Page
Terdapat sub halaman yang memberikan intruksi kepada pengguna yang
telah terdaftar dan belum terdaftar. Halaman-halaman ini merupakan halaman
pengantar untuk pengguna dapat menuju halaman utama dari Indosport.
Tabel 4.2 Tabel Komponen UEQ versi Indonesia pada halaman landing page
serta sub-sub halamannya.
Aspek 1 2 3 4 5 6 7 Aspek
Menyusahkan x Menyenangkan
Tak dapat dipahami x Dapat Dipahami
Kreatif x Monoton
Mudah dipelajari x Sulit Dipelajari
Bermanfaat x Kurang Bermanfaat
Membosankan x Mengasyikkan
Tidak Menarik x Menarik
Tak Dapat Diprediksi x Dapat Diprediksi
Cepat x Lambat
Berdaya Cipta x Konvensional
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Tidak Disukai x Menggembirakan
Lazim x Terdepan
118
Aspek 1 2 3 4 5 6 7 Aspek
Tidak Nyaman x Nyaman
Aman x Tidak Aman
Memotivasi x Tidak Memotivasi
Sesuai Ekspektasi x Tidak Sesuai Ekpektasi
Tidak Efisien x Efisien
Jelas x Membingungkan
Tidak Praktis x Praktis
Terorganisasi x Berantakan
Atraktif x Tidak Atraktif
Ramah Pengguna x Tidak Ramah
Konservatif x Inovatif
4.5.1.1 Start Screen
Gambar 4.5 Halaman Start Screen
119
Halaman ini merupakan halaman yang pertama kali akan dilihat pengguna
yang belum sign in atau register saat menggunakan aplikasi mobile Indosport.
Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Halaman ini dibuat dengan warna yang telah disesuaikan dengan guidelines dari
Indosport, untuk memperkuat identitas visual dari brand tersebut. Desain halaman
start screen ini dibuat agar pengguna dapat memahami dengan melihatnya saja,
serta dapat mengetahui bahwa halaman ini adalah halaman awal yang
memperkenalkan beberapa fitur unggulan dari aplikasi mobile Indosport. Dengan
keterangan yang terdapat pada bagian atas, seperti kalimat untuk menjelaskan
keunggulan serta dibantu dengan gambar ilustrasi. Serta terdapat pula logo, judul
dan tipografi yang bertujuan untuk memperkenalkan brand pada pengguna.
Terdapat tiga slide pada halaman ini, dengan penunjuk indikator halaman aktif
yang diharapkan para pengguna memahami bahwa terdapat interaksi yang dapat
dilakukan oleh pengguna ketika menekan tombol panah merah. Bentuk ilustrasi
serta beberapa gerakan dari objek visual yang terdapat pada slide pertama
diharapkan dapat membawa rasa penasaran pengguna untuk menavigasikannya
pada slide selanjutnya. Pada halaman ini juga secara tidak langsung menekankan
pengguna serta menanamkan kedalaman pikirannya mengenai bentuk visual yang
tumpul dan berwarna merah merupakan tombol CTA (Call to Action), seperti pada
tombol get started dan tombol panah.
120
2. Aspek Teknis
Terdapat dua tombol utama pada halaman ini, yang terdapat pada bagian bawah
halaman, yaitu get started yang akan mengarahkan pengguna pada halaman register
dan login yang akan mengarahkan pengguna pada halaman login. Lalu terdapat
tombol panah kiri dan kanan yang berfungsi untuk berpindah pada slide selanjutnya
serta akan ditunjukkan halaman aktif pada indikator di bawah halaman.
3. Aspek Komunikasi
Halaman ini ditujukan untuk memperkenalkan fitur-fitur utama dalam
Indosport dan untuk menyambut para pengguna baru atau memberi petunjuk untuk
pengguna yang telah terdaftar. Pada halaman ini pula memperkenalkan identitas
brand dari Indosport, seperti pada halaman loading serta logo yang terdapat pada
bagian atas halaman. Ilustrasi pada tiap halaman berfungsi untuk memperjelas
kalimat yang terdapat di atasnya. Seperti yang terdapat pada ilustrasi pertama yaitu
seseorang pria, yang merupakan target audiens dari Indosport tersenyum saat
menggunakan smartphonenya. Lalu pada ilustrasi kedua terdapat ilsutrasi
smartphone yang sedang membuka halaman activity dan matchday. Dilanjutkan
dengan ilustrasi ketiga yaitu piala dengan badge yang muncul silih berganti
dilengkapi dengan simbol centang pada ilustrasi piala tersebut. Penggunaan simbol
tanda panah berfungsi untuk menekankan bahwa tombol tersebut berfungsi untuk
berpindah ke halaman selanjutnya.
121
Tabel 4.3 Keterangan Aset Halaman Start Screen
No Objek Analisis Pesan Bahasa Rupa
1
Ilustrasi ini berfungsi untuk
membantu menjelaskan
maksud kalimat ”Discover
your favorite news and
more” serta
menggambarkannya.
Terlihat seseorang lelaki
dengan umur yang cukup
muda sedang menggunakan
smartphonenya dengan
wajah tersenyum, yang
mengindikasikan kepuasan
saat membaca berita dan
lainnya.
CW1: medium close up
CW2: sudut wajar
CW3: Sama dengan
aslinya
CW4: bidang
CW5: sudut lihat wajar
Dalam ilustrasi ini
mengandung pesan
informatif tentang
target audiens dan
kepuasan pengguna.
2
Ilustrasi ini berfungsi untuk
menjelaskan maksud kalimat
“See friends activity and
matchday” serta
menggambarkan situasi dari
makna tersebut. Terdapat
ilustrasi tangan yang sedang
menggenggam sebuah
smartphone dengan keadaan
sedang membuka halaman
activity dan matchday.
CW1: extreme close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: bidang
CW5: sudut lihat wajar
Pada ilustrasi ini
menunjukkan sudut
pandang dari pengguna
yang sedang membuka
halaman activity.
3
Ilustrasi ini berfungsi untuk
menjelaskan maksud dari
kalimat “Choose the winner
and get some badges” serta
menggambarkan situasi
tersebut. Ilustrasi piala
dengan simbol centang
dipilih karena
menggambarkan seorang
pemenang serta simbol
centang dalam Indosport
CW1: full shot
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: bidang
CW5: sudut lihat wajar
Pada ilustrasi ini
menunjukkan sudut
pandang secara
imajinasi, yang
122
No Objek Analisis Pesan Bahasa Rupa
berarti pengguna telah
memilih tim pada fitur vote.
berisikan pesan
informatif.
4
Memberikan efek dramatis
sebagai latar belakang.
CW1: full shot
CW2: sudut wajar
CW3: lebih kecil dari
aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: dinamis
Ilustrasi awan ini
digunakan sebagai
transisi saat berpindah
dari satu slide ke slide
lainnya untuk
memberikan kesan yang
baik pada pengguna.
5
Memberikan efek dramatis
sebagai latar belakang.
CW1: full shot
CW2: sudut wajar
CW3: lebih kecil dari
aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: dinamis
Sama seperti ilustrasi
diatas yang digunakan
sebagai transisi.
6
Logo berfungsi sebagai
identitas visual brand
Indosport untuk UI dan UX
aplikasi mobile ini.
-
123
No Objek Analisis Pesan Bahasa Rupa
7
Mengindikasikan statistik,
gambar, dan teks.
CW1: full shot
CW2: sudut wajar
CW3: lebih kecil dari
aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: dinamis
Objek visual ini
berfungsi sebagai objek
pendukung ilustrasi
yang terdapat pada slide
pertama.
8
Mengindikasikan
pencapaian dari pengguna,
yaitu badges.
CW1: full shot
CW2: sudut wajar
CW3: lebih besar dari
aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: dinamis
Objek visual ini
berfungsi sebagai objek
pendukung ilustrasi
pada slide ketiga yang
mengindikasikan
beberapa badge yang
masuk bergantian pada
ilustrasi piala.
124
4.5.1.2 Register
Gambar 4.6 Halaman Register
Halaman ini berisikan form atau kolom yang mengharuskan pengguna baru
untuk mengisi beberapa data seperti nama, email, nomor telepon, serta password.
Dengan halaman untuk memilih jenis olahraga dan tim favorit. Halaman ini dibuat
berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Halaman ini dibuat dengan menggunakan warna yang terdapat pada guidelines,
umumnya pada halaman ini tidak terdapat banyak aset visual yang dibuat untuk
memperjelas serta memperingkas tampilan dari halaman. Pada halaman ini lebih
mementingkan fungsi dan juga memperkenalkan pengguna mengenai mana yang
berjenis tombol CTA atau form. Sejak halaman pertama, tombol diperkenalkan
dengan objek visual persegi panjang dengan sudut round atau tumpul dan berwarna
merah. Sedangkan bagian form juga memiliki bentuk persegi panjang dengan sudut
125
tumpul tetapi memiliki warna yang berbeda dan terdapat border berwarna abu-abu
pada bagian sisinya.
2. Aspek Teknis
Bagi pengguna yang telah memiliki akun, maka terdapat shortcut sign in pada
bagian bawah halaman register bagi mereka yang ingin langsung menuju pada
halaman tersebut. Setelah halaman register maka akan diarahkan pada bagian which
you prefer yang memberi perintah pada calon pengguna untuk memilih salah satu
atau kedua card tersebut atau pengguna dapat melewatinya dengan menyentuh skip
for now. Pada bagian selanjutnya calon pengguna disuguhkan dengan favorite team
yang memberikan perintah kepada calon pengguna untuk memilih salah satu tim.
Disini proses pemilihan tim favorit menggunakan model drag card, calon pengguna
diharapkan dapat mengerti interaksi yang akan dilakukan, karena card disusun
secara horizontal dan menunjukkan sedikit wujud card disebelah card lainnya yang
menandakan bahwa interaksi tersebut dapat dilakukan dengan cara drag atau swipe.
3. Aspek Komunikasi
Halaman register merupakan halaman yang akan muncul jika pengguna
menyentuh tombol get started. Berfungsi untuk halaman pendaftaran akun bagi
pengguna yang belum memiliki akun Indosport. Setelah calon pengguna telah
mengisi semua form maka terdapat tombol yang menjadi highlight utama, yaitu
tombol register. Semua tombol yang mengarahkan ke halaman tertentu ataupun
perintah tertentu memiliki warna merah. Dengan keringkasan yang terdapat pada
halaman register para calon pengguna diharapkan dapat fokus serta menangkap
semua informasi penting dan memahami tindakan yang dilakukan adalah dengan
126
mengisi semua form yang terdapat pada halaman pertama register. Penggunaan
simbol pada halaman which you prefer adalah meminimalisir jumlah teks dan
memberikan pemahaman bagi pengguna melalui visual.
4.5.1.3 Sign In
Gambar 4.7 Halaman Sign In
Halaman sign in adalah halaman yang ditujukan kepada pengguna yang
sudah mendaftar atau sudah memiliki akun dari Indosport. Halaman ini adalah
halaman yang muncul ketika pengguna menyentuh teks “Have an account? Login”.
Tidak berbeda jauh dengan halaman register, halaman sign ini berisikan form serta
tombol CTA. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Tidak terdapat banyak aset visual pada halaman ini untuk mempermudah
pengguna untuk menyelesaikan tugas dan menangkap informasi secara cepat.
Seperti pada halaman register yang memiliki tujuan serupa yaitu memberikan
kemudahan pengguna dalam memahami isi dan mempermudah pengguna untuk
127
mengingat apa saja tombol dan aksi yang dapat dilakukan untuk dapat menuju
halaman utama. Serta penggunaan background putih merupakan pilihan yang tepat
untuk mempermudah pengguna dalam menangkap informasi yang disampaikan
berupa teks. Pemisahan antara form login dengan tombol sign in dengan akun
Google atau Facebook dilakukan untuk membuat nyaman pengguna saat
melihatnya.
2. Aspek Teknis
Pada bagian sign in pengguna yang telah terdaftar dapat langsung memasukkan
email dan password mereka. Lalu terdapat pula metode sign in dengan
menggunakan akun Facebook ataupun Google atau jika pengguna tersebut tidak
memiliki akun dapat langsung menuju shortcut ke halaman register yang terdapat
pada bagian bawah halaman. Bagi pengguna yang lupa password terdapat shortcut
yang terdapat pada bagian bawah form email dan password yang akan membawa
ke halaman forgot password. Pada bagian halaman forgot password terdapat form
email pengguna untuk dapat mengirimkan tautan ke email untuk proses selanjutnya.
3. Aspek Komunikasi
Terdapat icon pada form untuk memperjelas informasi kepada pengguna serta
pemisahan kolom antara pengguna yang ingin sign in dengan akun Indosport atau
dengan Facebook dan Google. Lalu penggunaan tombol CTA berwarna merah
seperti pada halaman-halaman sebelumnya dan juga tombol sign in dengan metode
menggunakan Facebook serta Google, logo brand tersebut dimunculkan untuk
mempermudah dalam mengenali tombol tersebut. Sama halnya pada bagian forgot
password, terdapat form serta tombol CTA. Penggunaan ilustrasi ketika pengguna
128
menekan tombol send maka akan muncul ilustrasi email lalu diikuti dengan ilustrasi
pesawat kertas yang menandakan bahwa email verifikasi telah terkirim.
Tabel 4.4 Keterangan Aset Halaman Sign In
No Objek Analisis Pesan Bahasa Rupa
1
Ilustrasi surat yang
menggambarkan
bahwa ilustrasi
tersebut adalah
email.
CW1: full shot
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Pengguna dapat mudah
menangkap pesan dari
ilustrasi tersebut, yaitu sebuah
email.
2
Ilustrasi pesawat
kertas yang akan
muncul pada saat
halaman forgot
password, yang
berfungsi sebagai
objek visual untuk
memperjelas
informasi kepada
pengguna.
CW1: full shot
CW2: sudut wajar
CW3: lebih kecil dari aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: alih objek
bergerak
Menggunakan jenis ilustrasi
bidang, berkesan datar yang
mengandung pesan bahwa
email telah terkirim ke
pengguna.
4.5.2 Halaman News
Terdapat 4 pembagian kategori berita untuk saat ini, yaitu featured,
transfers, galleries, dan videos. Bagian atas halaman terdapat foto dari pengguna,
logo, tanggal, dan tombol notifikasi. Lalu di bawahnya terdapat search bar dan
dilanjutkan dengan empat tombol menu dari bagian news. Melewati bagian header
129
barulah berisikan dengan konten yang terbagi lagi atas beberapa kolom serta bagian
bawah dari halaman terdapat bottom bar.
Tabel 4.5 Tabel Komponen UEQ versi Indonesia pada halaman news serta sub-
sub halamannya.
Aspek 1 2 3 4 5 6 7 Aspek
Menyusahkan x Menyenangkan
Tak dapat dipahami x Dapat Dipahami
Kreatif x Monoton
Mudah dipelajari x Sulit Dipelajari
Bermanfaat x Kurang Bermanfaat
Membosankan x Mengasyikkan
Tidak Menarik x Menarik
Tak Dapat Diprediksi x Dapat Diprediksi
Cepat x Lambat
Berdaya Cipta x Konvensional
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Tidak Disukai x Menggembirakan
Lazim x Terdepan
Tidak Nyaman x Nyaman
Aman x Tidak Aman
Memotivasi x Tidak Memotivasi
Sesuai Ekspektasi x Tidak Sesuai Ekpektasi
Tidak Efisien x Efisien
130
Aspek 1 2 3 4 5 6 7 Aspek
Jelas x Membingungkan
Tidak Praktis x Praktis
Terorganisasi x Berantakan
Atraktif x Tidak Atraktif
Ramah Pengguna x Tidak Ramah
Konservatif x Inovatif
4.5.2.1 Featured
Gambar 4.8 Halaman Featured News
1. Aspek Estetis
Penggunaan warna yang tidak terlalu banyak serta pemisahan kategori
warna untuk fungsi tertentu dapat membantu para pengguna untuk memahami apa
fungsi dan diharapkan dapat meminimalisir jumlah kesalahan ketika pengguna
memakai aplikasi mobile tersebut. Serta penggunaan jenis ikon yang konsisten
131
dapat membuat nyaman pengguna, seperti ikon yang dipakai oleh Indosport adalah
ikon dengan border. Penggunaan ikon juga mengikuti gaya ilustrasi yaitu dengan
menggunakan border. Pemisahan garis horizontal dilakukan dengan ukuran yang
sama dan berbentuk card yang disusun secara teratur agar pengguna tidak bingung
untuk memahami isi halaman. Penggunaan teks yang terdapat di bawah ikon
berfungsi untuk memperjelas arti dari shortcut atau tombol tersebut untuk
menghindari mispersepsi terhadap ikon. Background dari header jika di scroll
kebawah akan memberikan efek parallax untuk memberikan kedalaman pada
halaman.
2. Aspek Teknis
Tombol notifikasi yang terdapat pada bagian atas kanan akan membawa
pengguna pada halaman notifcations. Pengguna yang ingin menemukan berita
tertentu, pemain, klub, pertandingan dan lainnya dapat menyentuh bagian search
bar. Pengguna yang ingin berpindah bagian halaman dapat menyentuh salah satu
dari keempat tombol yaitu featured, transfers, galleries, dan videos. Serta pada
bagian konten terdapat artikel-artikel tersedia yang dapat pengguna baca. Pada
artikel terdapat tombol like yang dapat pengguna sentuh untuk dapat dilihat oleh
pengguna lain pada halaman activity. Bottom bar sendiri berfungsi untuk berpindah
ke halaman-halaman utama dari Indosport.
3. Aspek Komunikasi
Merupakan salah satu halaman utama dari aplikasi Indosport nantinya, pada
halaman inilah yang berisikan konten-konten berita di dalamnya. Eyeflow yang
diterapkan pada halaman ini serta bagian news lainnya adalah dari atas kebawah
132
dan diikuti dengan dari kanan ke kiri. Pada halaman featured news membahas berita
yang berfokus pada teks atau jenis berita pada umumnya. Bagian header pada
bagian featured, transfers, galleries, dan videos akan sama. Form searchbar
dilengkapi dengan ikon dan teks untuk memberikan pengguna arahan. Pada header
terdapat tombol yang akan mengalihkan pengguna pada bagian yang dipilih, maka
untuk memperkuat informasi tombol tersebut penggunaan ikon yang
mempresentasikan bagian berita akan efektif. Penggunaan tanggal yang selalu
mengikuti pengguna saat meng-scroll halaman berfungsi untuk dapat mengetahui
updatenya berita yang muncul pada halaman news. Penggunaan simbol berbentuk
hati pada ikon tombol like dinilai tepat untuk efisiensi tata letak dalam
penempatannya dan warna merah dipilih karena umumnya simbol hati berwarna
merah. Dan warna pada tag artikel dibuat berbeda agar pengguna tidak salah tafsir
bahwa objek visual tersebut adalah tombol.
Tabel 4.6 Keterangan Aset Halaman Featured
No Objek Analisis Pesan Bahasa Rupa
1
Merupakan ilustrasi
pemain sepakbola di
tim Paris Saint
Germain bernama
Neymar yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
2
Merupakan ilustrasi
pemain sepakbola di
tim Inter Milan
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
133
No Objek Analisis Pesan Bahasa Rupa
bernama Lukaku
yang berfungsi
sebagai ilustrasi
berita.
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
3
Merupakan ilustrasi
pemain sepakbola di
tim FC Bayern
Munchen bernama
Neuer yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola.
4
Merupakan ilustrasi
pelatih tim
Liverpool bernama
Jurgen Klopp yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
5
Merupakan ilustrasi
pemain sepakbola di
tim Tottenham
bernama Hary Kane
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
134
No Objek Analisis Pesan Bahasa Rupa
6
Merupakan ilustrasi
mantan pemain
sepakbola di
bernama Samuel
Eto’o yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
7
Merupakan ilustrasi
pemain sepakbola di
tim Inter Milan
bernama Alexis
Sanchez yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
8
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
Skhodran Mustafi
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
9
Merupakan ilustrasi
pemain sepakbola
yang membela di
tim Albania yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
135
No Objek Analisis Pesan Bahasa Rupa
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
10
Merupakan ilustrasi
pemain sepakbola di
tim Manchester City
bernama Raheem
Sterling yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
11
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
Aubameyang yang
berfungsi sebagai
ilustrasi kolom
shortcut.
CW1: long shot
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: tampak khas
Menampilkan aksi dari seorang
sepakbola pada halaman yang
terkait.
12
Merupakan ilustrasi
pemain sepakbola di
tim FC Bayern
Munchen bernama
Philippe Coutinho
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
13
Merupakan ilustrasi
pemain sepakbola di
tim Manchester City
bernama Leroy Sane
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
136
No Objek Analisis Pesan Bahasa Rupa
yang berfungsi
sebagai ilustrasi
berita
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
14
Merupakan ilustrasi
pemain sepakbola di
tim Manchester
United bernama Paul
Pogba yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
15
Merupakan ilustrasi
pemain sepakbola di
tim Liverpool
bernama Virgil Van
Dijk yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
Pada umumnya keseluruhan bahasa rupa ilustrasi diatas berjenis medium
close up yang berfungsi untuk menunjukkan ekspresi para pemain serta
memudahkan pengguna dalam mengenali wajah pemain. Menggunakan ilustrasi
berjenis bidang yang ditambahkan beberapa detail untuk membuat ilustrasi yang
khas serta dibuat dengan tanpa perspektif untuk memudahkan pengguna dalam
menyerap informasi dengan tidak menangkap elemen-elemen yang tidak perlu.
137
4.5.2.2 Artikel Featured
Gambar 4.9 Halaman Artikel Featured News
Halaman ini berisikan tombol back dan tombol like pada bagian header
halaman. Lalu terdapat judul artikel, tanggal artikel terbit, foto artikel, kutipan
kalimat lalu isi konten. Pada bagian bawah halaman artikel featured news terdapat
kolom komentar yang dilengkapi dengan tombol like. Halaman ini dibuat
berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Desain halaman artikel ini masih mengimplementasi desain halaman
sebelumnya, yaitu halaman featured news. Terlihat pada posisi tombol, posisi
header title beserta tanggalnya, dan background dari header. Yang membedakan
adalah isi kontennya. Dengan adanya kesamaan dalam desain halaman khususnya
posisi tombol, pengguna diharapkan tidak perlu adaptasi ketika mereka membuka
halaman baru, karena tata letak dan bentuk visual yang konsisten. Pada kolom
komentar terdapat pemisah berbentuk kolom serta warna, untuk membuat pengguna
138
dapat lebih fokus pada area yang ingin mereka lihat. Bentuk komentar berjenis
timeline juga memudahkan pengguna dalam menyerap informasi komentar.
2. Aspek Teknis
Ketika pengguna memasuki halaman artikel ini, terdapat tombol yang terdapat
pada bagian header, yaitu tombol back dan like. Pada halaman konten artikel
pengguna dapat menavigasikannya dengan cara scroll. Bagian terbawah terdapat
kolom komentar pagi pengguna yang ingin memberikan tanggapan mengenai
artikel tersebut serta terdapat pula tombol like untuk memberikan respon terhadap
komentar pengguna lain. Sama seperti halaman lainnya, terdapat bottom bar pada
bagian terbawah halaman yang berfungsi sebagai jalan pintas menuju halaman-
halaman utama Indosport.
3. Aspek Komunikasi
Halaman artikel featured news adalah halaman yang muncul ketika pengguna
menyentuh salah satu artikel yang terdapat pada halaman featured news. Dalam
eyeflow pengguna akan melihat dari atas kebawah pada halaman ini, jika diurutkan
maka pengguna akan mendapatkan informasi mengenai jenis berita tersebut, tag
berita, judul, tanggal terbit, konten dan terakhir komentar. Dalam tatanan ini
diharapkan dapat menikmati artikel secara maksimal. Halaman konten terdapat
quote atau ringkasan dari artikel tersebut. Pada bagian komentar, form komentar
terdapat keterangan teks dan juga ikon yang memberi petunjuk pengguna, serta foto
para pengguna yang berkomentar terdapat garis putih yang menunjukkan bahwa
komentar tersebut diurutkan berdasarkan waktu.
139
4.5.2.3 Transfers News
Gambar 4.10 Halaman Transfers News
Bagian atas halaman terdapat foto dari pengguna, logo, tanggal, dan tombol
notifikasi, sama seperti pada halaman featured news yang membedakan adalah isi
konten halamannya. Pada halaman konten berisikan daftar informasi transfer
pemain yang terbagi atas beberapa bagian dan yang terakhir adalah bottom bar.
Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Perbedaan yang sangat jelas pada jenis-jenis artikel berita halaman yang
terdapat di bagian news adalah bentuk visual dan penyajian informasi secara tata
letak halaman konten. Halaman transfer news menampilkan bentuk visual secara
simpel, terdapat card-card yang tersusun secara vertikal atas beberapa kolom yang
memisahkan dan foto pemain yang ditampilkan berjenis ilustrasi. Background dari
header jika di scroll kebawah akan memberikan efek parallax untuk memberikan
kedalaman pada halaman.
140
2. Aspek Teknis
Tidak banyak perubahan pada halaman ini dalam aspek teknis, cara
pengoperasian hampr sama dengan halaman sebelumnya, yang membedakan adalah
jenis penyajian artikel berita. Pengguna dapat mengetahui artikel tersebut lebih
lanjut dengan menyentuh salah satu card yang terdapat pada konten. Tombol see
all berfungsi untuk melihat berita terkait lebih banyak lagi.
3. Aspek Komunikasi
Halaman ini bertujuan untuk memberikan berita kepada pengguna yang ingin
mengetahui mengenai berita transfer pemain. Pada bagian konten terdapat
penggolongan menjadi beberapa kolom seperti top transfers, my team, dan all
transfers untuk memudahkan pengguna dalam memahami keadaan yang terjadi
dalam dunia transfer. Gambar ilustrasi pemain terdapat pada sebelah kiri dalam
card lalu terdapat ikon tanda panah yang mengarah ke kanan dan di sampingnya
terdapat logo dari klub tertentu yang dapat diartikan bahwa pemain tersebut
berpindah ke klub tersebut. Di bawah tanda panah terdapat nama pemain dan
nominal transfer pemain tersebut.
Tabel 4.7 Keterangan Aset Halaman Transfers
No Objek Analisis Pesan Bahasa Rupa
1
Merupakan ilustrasi
pemain sepakbola di
tim Atletico Madrid
bernama Joao Felix
yang berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
141
No Objek Analisis Pesan Bahasa Rupa
2
Merupakan ilustrasi
pemain sepakbola di
tim FC Barcelona
bernama Antoine
Griezmann yang
berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
3
Merupakan ilustrasi
pemain sepakbola di
tim Manchester United
bernama Harry
Maguire yang
berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
4
Merupakan ilustrasi
pemain sepakbola tim
Arsenal bernama
Nicolas Pepe yang
berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
5
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
Alex Iwobi yang
berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
142
No Objek Analisis Pesan Bahasa Rupa
6
Merupakan ilustrasi
pemain sepakbola di
tim AS Roma bernama
Henrikh Mkhitaryan
yang berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
7
Merupakan ilustrasi
pemain sepakbola di
tim Torino bernama
Simone Verdi yang
berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
8
Merupakan ilustrasi
pemain sepakbola di
tim Paris Saint
Germain bernama
Mauro Icardi yang
berfungsi sebagai
ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
9
Merupakan ilustrasi
pemain sepakbola di
tim Galatasaray
bernama Radamel
Falcao yang berfungsi
sebagai ilustrasi berita.
CW1: close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Berfungsi untuk menambah
informasi dari pemain
terkait, tidak hanya dari teks.
143
Pada umumnya keseluruhan bahasa rupa ilustrasi diatas berjenis close up
yang berfungsi untuk memudahkan lagi pengguna untuk dapat mengenali wajah
pemain sebab ilustrasi pada bagian ini akan ditampilkan lebih kecil dibandingkan
dengan ilustrasi sebelumnya. Menggunakan ilustrasi berjenis bidang yang
ditambahkan beberapa detail untuk membuat ilustrasi yang khas serta dibuat tanpa
perspektif untuk memudahkan pengguna dalam menyerap informasi dengan tidak
menangkap elemen-elemen yang tidak perlu.
4.5.2.4 Artikel Transfers
Gambar 4.11 Halaman Artikel Transfers News
Bagian atas halaman terdapat tombol back dan like, pada bagian header
sendiri digunakan sebagai foto pemain. Halaman konten terdapat kartu informasi,
deskripsi transfer pemain tersebut, kolom kementar dan yang terakhir adalah
bottom bar. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
144
1. Aspek Estetis
Penggunaan header pada halaman ini sedikit berbeda daripada halaman-
halaman artikel yang ada di Indosport, karena memiliki header foto dari pemain
tersebut yang cukup besar, serta jika pengguna melakukan scroll kebawah halaman
terjadi efek parallax pada header tersebut untuk memberikan pengalaman yang
membuat pengguna menikmati pengalaman membaca artikel ini. Pembagian
halaman ini dibuat atas beberapa kolom dan membedakannya dengan warna seperti
pada konten dan komentar untuk memberikan kenyamanan pengguna ketika ingin
memfokuskan salah satunya.
2. Aspek Teknis
Terdapat 2 tombol pada bagian header yaitu tombol back yang berfungsi untuk
kembali ke halaman sebelumnya dan tombol like untuk memberikan tanggapan
pada artikel tersebut. Pengguna dapat mengoperasikan halaman ini dengan
melakukan scroll yang berfungsi untuk membaca seluruh halaman. Pada bagian
bawah terdapat kolom komentar yang cara pengoperasiannya sama dengan halaman
artikel featured news.
3. Aspek Komunikasi
Halaman artikel news transfer adalah halaman lanjutan dari halaman news
transfers, halaman ini berisikan informasi lebih detail menyangkut masalah transfer
permain terkait. Seperti proses berjalannya transfer pemain tersebut dan rincian
lebih lanjut mengenai kontrak pemain. Dengan header cukup besar yang
menampilkan foto pemain terkait serta menggantikan header title diharapkan dapat
memberikan pesan yang dapat dipahami bahwa pemain tersebut sedang mengalami
145
fase transfer antar klub. Pengguna langsung dapat mengalihkan fokusnya pada card
yang terdapat di bawah header, yang merupakan informasi bahwa pemain tersebut
telah berpindah dari satu tim ke tim lainnya dan terdapat nilai atau nominal transfer
beserta dengan kontraknya. Dilanjutkan dengan pembahasan merinci melalui
artikel berita dan terakhir komentar yang sama seperti sebelumnya, yaitu komentar
yang berbentuk timeline.
4.5.2.5 Galleries
Gambar 4.12 Halaman Galleries News
Halaman news galleries adalah halaman yang mengkhususkan berita dalam
penyajian berbentuk galeri. Bagian atas halaman terdapat foto dari pengguna, logo,
tanggal, dan tombol notifikasi. Lalu di bawahnya terdapat search bar dan
dilanjutkan dengan empat tombol menu dari bagian news. Melewati bagian header
terdapat bagian konten yang terbagi lagi atas beberapa kolom serta bagian bawah
dari halaman terdapat bottom bar. Halaman ini dibuat berdasarkan beberapa aspek,
yaitu:
146
1. Aspek Estetis
Memiliki struktur halaman yang hampir sama seperti pada halaman featured
news namun semua konten pos pada halaman ini berbentuk seperti galeri foto pada
semua kolomnya. Penyusunan pos artikel pada halaman konten news galleries
dibuat seperti grid atau aplikasi galeri-galeri yang dapat ditemukan pada
smartphone Android ataupun iPhone, bertujuan untuk menyamakan tema dari jenis
news ini serta untuk menyocokkan dengan bentuk visual dari artikelnya.
2. Aspek Teknis
Tidak ada perubahan pada cara pengoperasian pada halaman galleries news,
karena masih menjadi satu kesatuan dalam halaman utama dari news. Cara
pengoperasian halaman ini sama seperti halaman featured news, yang membedakan
adalah tata letak dari bagian konten.
3. Aspek Komunikasi
Eyeflow yang diterapkan pada halaman ini serta bagian adalah dari atas
kebawah dan diikuti dengan dari kanan ke kiri. Pemisahan garis horizontal
dilakukan dengan ukuran yang sama. Penggunaan gradient gelap di setiap gambar
ilustrasi berfungsi untuk memperjelas teks untuk mempermudah pengguna ketika
membaca judul artikel tersebut. Penggunaan tanggal yang selalu mengikuti
pengguna saat melakukan scroll halaman berfungsi untuk dapat mengetahui update
nya berita yang muncul pada halaman news.
147
Tabel 4.8 Keterangan Aset Halaman Galleries
No Objek Analisis Pesan Bahasa Rupa
1
Merupakan ilustrasi
pemain sepakbola di
tim FC Barcelona
bernama Lionel Messi
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
2
Merupakan ilustrasi
pemain sepakbola di
tim Liverpool
bernama Roberto
Firmino yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
3
Merupakan ilustrasi
pemain sepakbola di
tim FC Barcelona
bernama Frenkie De
Jong yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
148
No Objek Analisis Pesan Bahasa Rupa
4
Merupakan ilustrasi
pemain sepakbola di
tim Chelsea bernama
Christian Pulisic yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
5
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
Mesut Ozil yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
6
Merupakan ilustrasi
pemain sepakbola di
tim Real Madrid
bernama Eden Hazard
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
7
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
Alexander Lacazette
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
149
No Objek Analisis Pesan Bahasa Rupa
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
8
Merupakan ilustrasi
pemain sepakbola di
tim Chelsea yang
berfungsi sebagai
shortcut untuk
menuju halaman
tertentu sesuai dengan
tagline.
CW1: medium long shot
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan interaksi antar
pemain sepakbola sepakbola
untuk memberi pesan bahwa
halaman tersebut menuju
kolom komentar.
9
Merupakan ilustrasi
pelatih sepakbola di
tim Tottenham
bernama Mourinho
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
10
Merupakan ilustrasi
pemain sepakbola di
tim Brazil bernama
Daniel Alves yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
150
No Objek Analisis Pesan Bahasa Rupa
11
Merupakan ilustrasi
pemain sepakbola di
tim Indonesia yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
4.5.2.6 Artikel Galleries
Gambar 4.13 Halaman Artikel Galleries News
Merupakan halaman lanjutan dari halaman galleries news, yang berisikan
tombol back dan tombol like pada bagian header halaman. Lalu terdapat judul
artikel, tanggal artikel terbit, foto artikel yang berbentuk slide, dan isi konten yang
berbentuk deskripsi teks. Pada bagian bawah halaman artikel galleries news
151
terdapat kolom komentar yang dilengkapi dengan tombol like. Halaman ini dibuat
berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Fokus pada halaman ini adalah mini galeri yang tersedia, penggunaan opacity
50% pada foto lainnya dan opacity 100% pada foto yang sedang dibuka berfungsi
untuk menginstruksi pengguna bahwa foto yang terdapat disebelahnya dapat
disentuh dan akan memunculkan foto yang besar seperti pada foto pertama.
2. Aspek Teknis
Ketika pengguna memasuki halaman artikel ini, terdapat tombol yang terdapat
pada bagian header, yaitu tombol back dan like. Pada halaman konten artikel
pengguna dapat menavigasikannya dengan cara scroll. Untuk konten utamanya
yaitu mini galeri, pengguna dapat membuka foto dengan cara menyentuh foto yang
terdapat di bawah foto utama mini galeri. Bagian terbawah terdapat kolom
komentar pagi pengguna yang ingin memberikan tanggapan mengenai artikel
tersebut serta terdapat pula tombol like untuk memberikan respon terhadap
komentar pengguna lain. Bagian terbawah terdapat bottom yang berfungsi sebagai
jalan pintas menuju halaman-halaman utama Indosport.
3. Aspek Komunikasi
Halaman galleries news, di dalamnya terdapat konten artikel yang lebih fokus
terhadap berita yang menampilkan gambar. Menyampaikan pesan melalui media
visual secara konsisten diharapkan dapat membuat pengguna mempelajari fungsi
dan pesan secara singkat. Mini galeri yang disediakan pada bagian bawah judul dan
disusun secara horizontal diharapkan pula dapat ditangkap oleh pengguna sehingga
152
mereka dapat memberikan respon berupa interaksi untuk membuka foto-foto yang
terdapat pada mini galeri tersebut.
4.5.2.7 Videos
Gambar 4.14 Halaman Videos News
Halaman news videos adalah halaman yang mengkhususkan berita dalam
penyajian berupa video. Walaupun memiliki sedikit teks kalimat yang membantu
mendeskripsikan video tersebut. Memiliki struktur halaman yang cukup sama
seperti pada halaman featured news dan galleries news. Namun memiliki perbedaan
pada bentuk format pos, untuk menyesuaikan isi artikel yang memang berisikan
video. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Penyusunan pos artikel setelah kolom pertama pada halaman konten dibuat
khusus untuk mengikuti artikel berbentuk video. Selebihnya dalam bentuk desain
halaman artikel tetap mengimplementasikan desain halaman dari news untuk
memberikan konsistensi dalam desain terlebih lagi pada bagian yang sama.
153
2. Aspek Teknis
Tidak ada perubahan pada cara pengoperasian pada halaman galleries news,
karena masih menjadi satu kesatuan dalam halaman utama dari news. Cara
pengoperasian halaman ini sama seperti halaman featured news, yang membedakan
adalah tata letak dari bagian konten.
3. Aspek Komunikasi
Halaman ini ditujukan untuk jenis berita yang memiliki format video, dapat
terlihat segala informasi durasi video dan tombol play. Video juga diperhitungkan
dapat memberikan gambaran langsung terhadap kejadian sebenarnya, seperti yang
ditampilkan pada kolom match highlights yang menjadi pelengkap untuk kejadian
atau event yang terjadi saat pertandingan. Penyusunan card dengan model card
yang terdapat tombol play dan menit video merupakan cara yang efektif untuk
meyampaikan kepada penonton bahwa pos tersebut berjenis video.
Tabel 4.9 Keterangan Aset Halaman Videos
No Objek Aspek Pesan Bahasa Rupa
1
Merupakan ilustrasi
pemain sepakbola di
tim Juventus bernama
Cristiano Ronaldo
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
2
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
154
No Objek Aspek Pesan Bahasa Rupa
Nicolas Pepe yang
berfungsi sebagai
ilustrasi berita.
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
3
Merupakan ilustrasi
pemain sepakbola di
tim Atletico Madrid
bernama Jan Oblak
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
4
Merupakan ilustrasi
pemain sepakbola di
tim Paris Saint
Germain bernama
Neymar yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
85
Merupakan ilustrasi
mantan pemain
sepakbola di bernama
Diego Maradona yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
155
No Objek Aspek Pesan Bahasa Rupa
6
Merupakan ilustrasi
pemain sepakbola di
tim Paris Saint
Germain bernama
Kylian Mbappe yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
7
Merupakan ilustrasi
pemain sepakbola di
tim Arsenal bernama
Granit Xhaka yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
8
Merupakan ilustrasi
pemain sepakbola di
tim FC Barcelona
bernama Luis Suarez
yang berfungsi
sebagai ilustrasi
berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
9
Merupakan ilustrasi
pemain sepakbola di
tim Juventus bernama
Matthijs De Ligt yang
berfungsi sebagai
ilustrasi berita.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan aslinya
CW4: bidang
CW5: sudut lihat wajar
Tata Ungkap: kilas balik
156
No Objek Aspek Pesan Bahasa Rupa
Menampilkan ekspresi muka
dari seorang sepakbola pada
artikel yang terkait.
Sama seperti pada halaman news featured yang pada umumnya keseluruhan
bahasa rupa ilustrasi diatas berjenis medium close up perbedaannya adalah
penggunaan resolusi pada bagian konten yang terbilang lebar untuk memfasilitasi
bentuk dari konten tersebut.
4.5.2.8 Artikel Videos
Gambar 4.15 Halaman Artikel Videos News
Merupakan halaman lanjutan dari halaman videos news, yang berisikan tombol
back dan tombol like pada bagian header halaman. Lalu terdapat judul artikel,
tanggal artikel terbit, video yang merupakan konten utama, dan deskripsi berbentuk
teks. Pada bagian bawah halaman artikel videos news terdapat kolom komentar
157
yang dilengkapi dengan tombol like. Halaman ini dibuat berdasarkan beberapa
aspek, yaitu:
1. Aspek Estetis
Pada halaman ini memiliki titik fokus pada tengah halaman agar pengguna
dapat mengetahui secara langsung letak video dan isi dari halaman ini. Penempatan
video pada posisi tersebut berguna agar pengguna dapat menonton video terlebih
dahulu sebelum membaca deskripsi untuk mengetahui informasi lebih lanjut
mengenai video tersebut.
2. Aspek Teknis
Ketika pengguna memasuki halaman artikel ini, terdapat tombol yang terdapat
pada bagian header, yaitu tombol back dan like. Pada halaman konten artikel
pengguna dapat menavigasikannya dengan cara scroll. Untuk konten utamanya
adalah video, pengguna dapat memainkan video dengan menyentuh tombol play.
Bagian terbawah terdapat kolom komentar pagi pengguna yang ingin memberikan
tanggapan mengenai artikel tersebut. Bagian terbawah terdapat bottom yang
berfungsi sebagai jalan pintas menuju halaman-halaman utama Indosport.
3. Aspek Komunikasi
Halaman ini bertujuan untuk pengguna yang ingin membuka artikel yang
terdapat pada halaman sebelumnya serta dapat memutar video pada artikel tersebut.
Menyampaikan pesan melalui media visual audio merupakan cara yang baik untuk
pengguna dapat tangkap informasi di dalamnya. Video disediakan pada bagian
bawah judul, pada video tersebut terdapat tombol play yang biasa digunakan
sebagai simbol untuk memutar video agar pengguna dapat memahaminya.
158
4.5.2.9 Search
Gambar 4.16 Halaman Search
Halaman ini berfungsi untuk mencari konten atau apapun yang terdapat
pada aplikasi mobile Indosport. Terdapat form yang dapat diinput serta keyword
yang sedang trend pada Indosport.
1. Aspek Estetis
Tata letak pada halaman ini dibuat sesederhana mungkin dan berfokus pada
posisi search bar yang posisinya sama persis pada halaman news. Bentuk trending
keyword terdapat di bawah search bar yang berbentuk objek visual yang berbentuk
CTA.
2. Aspek Teknis
Hanya terdapat satu tombol pada header yaitu tombol back yang berfungsi
untuk kembali ke halaman sebelumnya. Form search adalah fokus utama dari
halaman ini, yaitu untuk mencari apa yang ingin pengguna temukan. Pada bagian
159
bawah terdapat trending keyword, keyword tersebut adalah kata atau kalimat yang
sering pengguna-pengguna lain cari.
3. Aspek Komunikasi
Halaman ini memiliki pesan kepada pengguna adalah fungsi utama dari
halaman ini adalah menemukan sesuatu yang terdapat pada Indosport untuk
memudahkan pengguna serta meningkatkan pengalaman. Form search terdapat
ikon dan keterangan, yang merupakan objek utama dari halaman ini.
4.5.3 Halaman Activity
Gambar 4.17 Halaman Activity
Halaman activity merupakan salah satu halaman utama dari aplikasi mobile
Indosport, berisikan foto profil pengguna, tombol notifications, judul halaman,
tanggal, menu matchday dan pada bagian konten terdapat aktivitas-aktivitas teman
yang diurutkan secara aktivitas dari terbaru hingga terlama dan terakhir terdapat
bottom bar. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
160
1. Aspek Estetis
Pada halaman ini konten halaman berisikan aktivitas-aktivitas dari teman
disusun secara timeline, sedangkan keterangan aktivitas terdapat pada sebelah
kanan dari foto profile teman. Bagian menu pada header yang merujuk pada
halaman matchday disusun secara horizontal serta terdapat salah satu menu yang
terpotong mengindikasikan bahwa menu tersebut dapat dioperasikan dengan cara
didrag atau swipe untuk melihat lebih banyak lagi countdown. Penggunaan timeline
disini mempermudah pengguna untuk memahami bahwa aktivitas di urutkan
berdasarkan waktu.
2. Aspek Teknis
Terdapat tombol notifications pada bagian atas yang berfungsi untuk menuju
halaman notifications dan menu countdown yang berbentuk card dengan gambar
yang dapat dioperasikan dengan di swipe lalu disentuh pada pertandingan yang
ingin pengguna tuju. Bagian konten data pengguna operasikan dengan cara scroll
halaman, dan aktivitas-aktivitas pengguna lain dapat pengguna buka untuk
informasi lebih lanjutnya.
Tabel 4.10 Tabel Komponen UEQ versi Indonesia pada halaman activity serta
sub-sub halamannya.
Aspek 1 2 3 4 5 6 7 Aspek
Menyusahkan x Menyenangkan
Tak dapat dipahami x Dapat Dipahami
Kreatif x Monoton
Mudah dipelajari x Sulit Dipelajari
Bermanfaat x Kurang Bermanfaat
161
Aspek 1 2 3 4 5 6 7 Aspek
Membosankan x Mengasyikkan
Tidak Menarik x Menarik
Tak Dapat Diprediksi x Dapat Diprediksi
Cepat x Lambat
Berdaya Cipta x Konvensional
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Tidak Disukai x Menggembirakan
Lazim x Terdepan
Tidak Nyaman x Nyaman
Aman x Tidak Aman
Memotivasi x Tidak Memotivasi
Sesuai Ekspektasi x Tidak Sesuai Ekpektasi
Tidak Efisien x Efisien
Jelas x Membingungkan
Tidak Praktis x Praktis
Terorganisasi x Berantakan
Atraktif x Tidak Atraktif
Ramah Pengguna x Tidak Ramah
Konservatif x Inovatif
3. Aspek Komunikasi
Halaman ini berguna untuk memberikan sentuhan sosial dalam aplikasi,
walaupun bukan dengan cara yang dapat disampaikan secara ekspresif oleh
162
pengguna untuk menghindari perpecahan antar fans yang memiliki tim favorit yang
berbeda. Pada halaman ini juga berguna untuk pengguna dapat mengeksplor berita-
berita yang mungkin mereka lewatkan dan juga mengetahui aktivitas atau
pencapaian teman mereka. Aktivitas yang muncul merupakan hasil interaksi dari
teman yang berinteraksi terhadap berita seperti menyukai berita, mengikuti
pertandingan, memberikan komentar pada artikel jenis berita apapun, mengikuti
matchday, pemberitahuan pertemanan dan banyak lagi.
Tabel 4.11 Keterangan Aset Halaman Activity
No Objek Analisis Pesan Bahasa Rupa
1
Merupakan foto pemain
sepakbola dari kedua
tim matchday yaitu
Arsenal yang bernama
Alexander Lacazette
dan Tottenham yang
bernama Harry Kane
berfungsi sebagai menu
header halaman
activity.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: naturalis
CW5: sudut lihat wajar
Tata Ungkap: kilas maju
Menampilkan head to head
saling berdahapan dengan
medium close up untuk
merasakan tensi
pertandingan.
2
Merupakan foto pemain
sepakbola dari kedua
tim matchday yaitu FC
Barcelona yang
bernama Frenkie De
Jong dan Valencia yang
bernama Jose Gaya
berfungsi sebagai menu
header halaman
activity.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: naturalis
CW5: sudut lihat wajar
Tata Ungkap: kilas maju
Menampilkan head to head
saling berdahapan dengan
medium close up untuk
163
No Objek Analisis Pesan Bahasa Rupa
merasakan tensi
pertandingan.
3
Merupakan foto pemain
sepakbola dari kedua
tim matchday yaitu
Napoli yang bernama
Dries Mertens dan
Juventus yang bernama
Cristiano Ronaldo
berfungsi sebagai menu
header halaman
activity.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: naturalis
CW5: sudut lihat wajar
Tata Ungkap: kilas maju
Menampilkan head to head
saling berdahapan dengan
medium close up untuk
merasakan tensi
pertandingan.
4
Merupakan foto pemain
sepakbola dari kedua
tim matchday yaitu
Liverpool yang
bernama Mohamed
Salah dan Newcastle
yang bernama Jonjo
Shelvey berfungsi
sebagai menu header
halaman activity.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: naturalis
CW5: sudut lihat wajar
Tata Ungkap: kilas maju
Menampilkan head to head
saling berdahapan dengan
medium close up untuk
merasakan tensi
pertandingan.
Pada halaman activity yang digunakan pada menu ini adalah foto pemain
asli, bahasa rupa yang digunakan adalah medium close up dan ditata pemain
tersebut seperti head to head untuk menyampaikan pesan informatif yang
diwakilkan salah satu pemain yang akan bertanding. Terdapat sub halaman dari
activity, diantaranya:
164
4.5.3.1 Countdown
Gambar 4.18 Halaman Countdown
Halaman countdown berisikan tombol back, tombol bookmark, header title,
keterangan pertandingan dan di bawahnya terdapat logo tim yang akan bermain
lengkap dengan keterangan waktu. Pada halaman konten terdapat kolom berita
terkait mengenai tim yang akan bertanding dan kolom response. Halaman ini dibuat
berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Pada halaman ini konten halaman berisikan berita terkait yang disusun secara
collage yang dilengkapi dengan tag, tombol like, judul artikel berita dan tanggal
berita. Lalu Pada kolom response dibuat secara timeline seperti pada halaman
activity untuk menjaga konsistensi dan tidak membuat pengguna untuk beradaptasi
lagi.
165
2. Aspek Teknis
Terdapat tombol back yang berfungsi untuk kembali ke halaman sebelumnya
dan tombol bookmark untuk menandai pertandingan tersebut untuk dapat muncul
pemberitahuan pada notifikasi. Related news dapat dibuka dengan menyentuh salah
satunya untuk dialihkan ke halaman terkait. Pada bagian response pengguna dapat
membuka aktivitas dari pengguna lain.
3. Aspek Komunikasi
Halaman ini bertujuan untuk mengetahui countdown atau hitung mundur dari
sebuah pertandingan. Waktu hitung mundur terdapat pada bagian header yang
berbentuk seperti timer. Disediakan kolom berita terkait untuk para pengguna dapat
mengikuti berita yang mungkin terlewat oleh mereka sebelum dimulainya
pertandingan. Halaman response pada halaman ini berfungsi untuk para pengguna
mengetahui aktivitas dan respon pengguna lain terhadap pertandingan tersebut.
4.5.3.2 Notifications
Gambar 4.19 Halaman Notications
166
Halaman notifications terdapat tombol back untuk kembali ke halaman
sebelumnya, lalu terdapat header title beserta deskripsinya, pada bagian konten
terdapat tombol navigasi yaitu new yang berisikan kumpulan notifikasi terbaru
sedankan earlier yang berisikan kumpulan notifikasi sebelumnya. Halaman ini
dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Seperti biasanya menggunakan background warna putih yang dipadukan
dengan isi konten yang terdapat di dalam card. Pada bagian header background
menggunakan gambar yang sama dengan halaman sebelumnya, yang berfungsi
menambah suasana pada halaman notifications. Perpaduan warna hitam, merah dan
putih selalu digunakan pada segala kondisi untuk memberikan konsistensi.
2. Aspek Teknis
Halaman notifications berfungsi untuk memberikan pemberitahuan kepada
pengguna berdasarkan kegiatan yang mereka lakukan di aplikasi mobile Indosport,
seperti ketika melakukan bookmark pada halaman countdown, match, pemain atau
tim akan muncul pemberitahuan mengenai perkembangan dari aktivitas tersebut.
Halaman ini mempermudah pengguna untuk memantau sesuatu yang mereka ikuti
dan pemberitahuan umum lainnya seperti mendapatkan badge, pertemanan ataupun
mention pada kolom komentar.
3. Aspek Komunikasi
Penggunaan tombol utama menggunakan warna merah yang bertujuan agar
pengguna dapat fokus terlebih dahulu kepada notifikasi mana yang ingin mereka
akses serta penggunaan warna merah pada objek yang memiliki sudut tumpul
167
memang dikhususkan sebagai tombol CTA. Angka yang terdapat pada tombol new
juga untuk menandakan jumlah notifikasi baru pada bagian tersebut. Terdapat garis
pemisah antar notifikasi untuk memberikan kenyamanan kepada pengguna serta
terdapat keterangan waktu kapan notifikasi tersebut masuk. Seperti biasanya setiap
notifikasi disajikan dalam bentuk card.
4.5.4 Halaman Calendar
Gambar 4.20 Halaman Calendar
Pada halaman calendar terdapat tombol player and team stats, tombol
notifications, header title lengkap dengan deskripsinya, lalu di bawahnya terdapat
menu memilih tanngal untuk melihat pertandingan pada tanggal tersebut. Halaman
konten di calendar berisikan pertandingan-pertandingan yang terdapat pada tanggal
tertentu. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Pada halaman konten khususnya nama liga-liga dari pertandingan terdapat
gambar ilustrasi yang berfungsi pula menambah keindahan pada halaman. Serta
168
pada tanggal yang tidak terdapat pertandingan terdapat ilustrasi untuk
mempercantik. Daftar pertandingan disusun secara vertikal untuk memudahkan
pengguna dalam melihat pertandingan-pertandingan. Penempatan scoreboard
diposisikan ditengah untuk mempermudah pengguna dan terdapat lingkaran di
belakang score agar tidak terlihat berantakan.
2. Aspek Teknis
Terdapat dua tombol yang terdapat pada bagian header yaitu tombol players
and teams stat yang akan mengarahkan pengguna pada halaman tersebut dan
tombol notifications yang berfungsi pula untuk mengarahkan pengguna pada
halaman tersebut. Bagian menu calendar berbentuk kalender yang dapat pemain
sentuh pada salah satu tanggalnya dan dapat didrag maupun swipe untuk melihat
tanggal sebelum atau sesudahnya.
Tabel 4.12 Tabel Komponen UEQ versi Indonesia pada halaman calendar serta
sub-sub halamannya.
Aspek 1 2 3 4 5 6 7 Aspek
Menyusahkan x Menyenangkan
Tak dapat dipahami x Dapat Dipahami
Kreatif x Monoton
Mudah dipelajari x Sulit Dipelajari
Bermanfaat x Kurang Bermanfaat
Membosankan x Mengasyikkan
Tidak Menarik x Menarik
Tak Dapat Diprediksi x Dapat Diprediksi
Cepat x Lambat
169
Aspek 1 2 3 4 5 6 7 Aspek
Berdaya Cipta x Konvensional
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Tidak Disukai x Menggembirakan
Lazim x Terdepan
Tidak Nyaman x Nyaman
Aman x Tidak Aman
Memotivasi x Tidak Memotivasi
Sesuai Ekspektasi x Tidak Sesuai Ekpektasi
Tidak Efisien x Efisien
Jelas x Membingungkan
Tidak Praktis x Praktis
Terorganisasi x Berantakan
Atraktif x Tidak Atraktif
Ramah Pengguna x Tidak Ramah
Konservatif x Inovatif
3. Aspek Komunikasi
Halaman ini berfungsi sebagai tempat para pengguna untuk mengetahui
informasi mengenai pertandingan lebih detail lagi, informasi yang tidak mereka
dapat dari bagian news. Memberikan informasi bagaimana pertandingan tersebut
berlangsung. statistik, pemain, kejadian dalam pertandingan, taktik dan lain-lain.
Informasi pertandingan pada halaman ini juga menjelaskan waktu pertandingan,
170
diurutkan pula berdasarkan waktu pertandingan. Nama liga-liga dari pertandingan
terdapat gambar ilustrasi pemain yang terkenal dari liga tersebut untuk memperjelas
pengguna serta memberi sekat atau pembatas terhadap liga lainnya. Pada tanggal
yang tidak terdapat pertandingan terdapat ilustrasi untuk memberikan gambaran
yang mudah diterima oleh pengguna.
Tabel 4.13 Keterangan Aset Halaman Calendar
No Objek Analisis Pesan Bahasa Rupa
1
Merupakan foto pemain
sepakbola dari tim yaitu
Liverpool yang bernama
Mohamed Salah
berfungsi sebagai judul
pada liga Premier
League halaman
calendar.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: bidang
CW5: sudut lihat wajar
Menampilkan ekspresi
muka dan gerakan dari
seorang sepakbola sebagai
simbol dari liga yang
terkait.
2
Merupakan foto pemain
sepakbola dari tim yaitu
FC Barcelona yang
bernama Antoine
Griezmann sebagai judul
pada liga La Liga
halaman calendar.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: bidang
CW5: sudut lihat wajar
Menampilkan ekspresi
muka dan gerakan dari
seorang sepakbola sebagai
simbol dari liga yang
terkait.
3
Merupakan foto pemain
sepakbola dari tim yaitu
Juventus yang bernama
Cristiano Ronaldo
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
171
No Objek Analisis Pesan Bahasa Rupa
sebagai judul pada liga
Serie A halaman
calendar.
CW4: bidang
CW5: sudut lihat wajar
Menampilkan ekspresi
muka dan gerakan dari
seorang sepakbola sebagai
simbol dari liga yang
terkait.
4
Merupakan gambaran
pemuda yang sedang
melihat smartphonenya
dan terdapat kotak dialog
yang berisikan simbol.
Yang menggambarkan
tidak ada pertandingan
pada tanggal tersebut.
CW1: medium close up
CW2: sudut wajar
CW3: sama dengan
aslinya
CW4: bidang
CW5: sudut lihat wajar
Menampilkan ekspresi
muka dan gerakan dari
seorang sepakbola sebagai
simbol dari liga yang
terkait.
Objek diatas dalam bahasa rupa menggunakan medium shot, selain
menunjukkan ekspresi dari pemain disini ditunjukkan sedikit aksi dari pemain
tersebut dimulai dengan selebrasi ataupun sedang mengolah bola. Sama seperti
ilustrasi-ilustrasi sebelumnya yang menggunakan jenis bidang. Terdapat sub
halaman dari calendar, diantaranya:
172
4.5.4.1 Match
Gambar 4.21 Halaman Match
Merupakan halaman lanjutan dari halaman calendar, pada halaman ini
berisikan tombol back, tombol bookmark, header title serta keterangan
pertandingan, pada bagian bawahnya terdapat informasi tim yang bertanding dan
dilengkapi dengan waktu pertandingan serta lokasi stadium. Halaman ini dibuat
berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Bahasa rupa yaitu bagian header dibuat mirip seperti halaman countdown.
Background header yang digunakan merupakan gambar selebrasi pemain dari tim
kandang, selain memperindah pemilihan gambar dapat memberikan sentuhan untuk
memberi suasana pada halaman dan gambar tersebut diberi efek parallax ketika
pengguna melakukan scroll pada halaman. Bagian konten dibuat secara card untuk
memudahkan pengguna dalam menyerap informasi dan membuat tata letak teks
terlihat lebih rapih.
173
2. Aspek Teknis
Halaman ini ditujukan bagi pengguna yang ingin mengakses untuk
mendapatkan informasi lebih jauh mengenai sebuah pertandingan tertentu. Pada
halaman ini pula disediakan halaman kolom vote untuk memberikan pengalaman
lebih bagi pengguna pilihan pengguna pada kolom vote akan masuk dalam halaman
activity serta countdown. Pengguna yang telah memilih salah satu tim dan tim
tersebut menang makan pengguna akan mendapatkan badge jika mencapai jumlah
yang telah ditentukan. Pada halaman match tidak hanya terdapat informasi
pertandingan tetapi terdapat latest timeline yang memberikan informasi mengenai
pertandingan tersebut setiap berbagai event yang terjadi di lapangan.
3. Aspek Komunikasi
Bagian header diberi efek parallax jika pengguna melakukan scroll pada
halaman. Dilanjutkan dengan bagian vote tombol akan memanjang jika salah
satunya disentuh untuk memberikan pengalaman yang baik kepada pengguna.
Penggunaan warna pada tombol vote merupakan warna dari baju yang dipakai
pemain pada pertandingan tersebut. Pemisahan bagian latest timeline dilakukan
dengan warna, menggunakan warna abu-abu yang berfungsi sebagai sekat, karena
di dalam kolom latest timeline disajikan dengan susunan card sama seperti
informasi-informasi di atasnya. Penggunaan beberapa ikon pada latest timeline juga
diharapkan dapat memudahkan pengguna dalam menangkap informasi yang
disampaikan.
174
4.5.4.2 Players Stat and Table
Gambar 4.22 Halaman Players Stat and Table
Halaman ini berisikan tombol back, header title serta deskripsinya, menu
liga, lalu dilanjutkan dengan halaman konten yang berisikan status pemain dan tabel
liga. Pada status pemain berisikan informasi dari goals, assists, yellow cards dan
red cards. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Umumnya tampilan visual dari header tidak terlalu berbeda jauh dengan
halaman notifications serta jika dilihat lagi tombol navigasi menu pada header juga
memiliki kesamaan. Penyusunan tabel liga sama seperti yang terdapat pada
halaman match untuk memberikan konsistensi.
2. Aspek Teknis
Hanya terdapat satu tombol pada bagian header yang berfungsi untuk kembali
ke halaman sebelumnya. Terdapat tombol pula untuk pengguna dapat
menavigasikan ke liga lainnya dengan mennyentuh tombol yang terdapat di header
175
ataupun diswipe. Untuk mengakses informasi secara utuh perliganya pengguna
dapat melakukan scroll pada halaman.
3. Aspek Komunikasi
Halaman ini ditujukan untuk pengguna yang ingin mengakses statistik pemain
dan tabel liga secara cepat tanpa perlu repot membuka halaman match pada tim
yang ingin mereka lihat. Halaman ini dibuat bertujuan untuk mempermudah
pengguna dalam mengakses informasi yang mereka butuhkan. Saat halaman
discroll kebawah header tetap akan pada posisinya, untuk memudahkan pengguna
dalam menavigasikan ke liga lainnya. Penggunaan warna pada card pemain adalah
warna klub dari pemain tersebut, warna tersebut dipakai untuk memudahkan
pengguna untuk mengetahui asal tim pemain tersebut dengan cepat. Serta pada
bagian standings antara klub dipisahkan dengan warna abu-abu yang berfungsi
memudahkan pengguna dalam melihat tim yang ingin mereka lihat statusnya.
4.5.5 Halaman Profile
Gambar 4.23 Halaman Profile
176
Pada halaman ini terdapat tombol notifications, tombol settings, header title
serta deskripsinya, lalu dilanjutkan dengan halaman konten yang berisikan
favorites, friends, badges dan recent activities. Halaman ini dibuat berdasarkan
beberapa aspek, yaitu:
1. Aspek Estetis
Penambahan background khusus yang dapat disesuaikan oleh pengguna,
sama seperti halaman-halaman sebelumnya yang menggunakan efek parallax
ketika pengguna melakukan scroll pada halaman. Lalu pada layer atasnya terdapat
avatar atau profile picture dari pengguna dilanjutkan dengan statistik singkat
mengenai pengguna tersebut. Pada halaman konten sama seperti pada halaman
lainnya yang memisahkan sub bagian dengan menggunakan desain card. Bagian
friends dibuat dengan disusun secara horizontal, dibagian bawahnnya terdapat
search bar yang berfungsi untuk pengguna yang ingin mencari temannya. Pada
bagian badges juga disusun secara horizontal dengan beberapa keterangan
peringkat pada bawahnya yang ditunjukkan dengan jumlah points. Aspek Teknis
2. Aspek Teknis
Terdapat dua tombol pada halaman ini yaitu tombol settings yang akan
mengarahkan halaman ke profile settings dan tombol notifications yang berfungsi
untuk emngarahkan pengguna ke halaman notifications. Pengguna dapat
mengoperasikan halaman ini dengan cara scroll vertikal. Pada bagian favorites
pengguna dapat menyentuh card pemain atau klub untuk melihat statistik lebih
detail mengenai pemain atau klub tersebut. Bagian friends pengguna dapat
menyentuh tombol see all untuk melihat semu daftar pengguna dan pengguna dapat
177
menambah teman pada bagian bawah card dari friends. Jika seorang pengguna
ingin membuka atau melihat seluruh badge yang ia punya, pengguna tersebut dapat
menyentuh tombol see all.
Tabel 4.14 Tabel Komponen UEQ versi Indonesia pada halaman profile serta
sub-sub halamannya.
Aspek 1 2 3 4 5 6 7 Aspek
Menyusahkan x Menyenangkan
Tak dapat dipahami x Dapat Dipahami
Kreatif x Monoton
Mudah dipelajari x Sulit Dipelajari
Bermanfaat x Kurang Bermanfaat
Membosankan x Mengasyikkan
Tidak Menarik x Menarik
Tak Dapat Diprediksi x Dapat Diprediksi
Cepat x Lambat
Berdaya Cipta x Konvensional
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Tidak Disukai x Menggembirakan
Lazim x Terdepan
Tidak Nyaman x Nyaman
Aman x Tidak Aman
Memotivasi x Tidak Memotivasi
Sesuai Ekspektasi x Tidak Sesuai Ekpektasi
178
Aspek 1 2 3 4 5 6 7 Aspek
Tidak Efisien x Efisien
Jelas x Membingungkan
Tidak Praktis x Praktis
Terorganisasi x Berantakan
Atraktif x Tidak Atraktif
Ramah Pengguna x Tidak Ramah
Konservatif x Inovatif
3. Aspek Komunikasi
Merupakan salah satu halaman utama dari aplikasi mobile Indosport nantinya,
pada halaman inilah yang berisikan informasi-informasi pengguna lebih lanjut.
Halaman ini ditujukan bagi pengguna yang ingin mengakses profil mereka di
Indosport. Seperti melihat statistik, teman, pencapaian, serta aktivitas terkini yang
telah mereka lakukan. Terdapat border pada avatar pengguna yang menunjukkan
bahwa pemain tersebut sudah mendapat badge tertentu, serta pada bagian bawah
avatar terdapat nama badge yang sudah ia dapatkan. Semua tombol CTA
dikhususkan berwarna merah seperti pada halaman sebelum-sebelumnya. Pada
bagian friends terdapat form search yang menandakan form tersebut berfungsi
untuk mencari teman, serta bagian bawahnya terdapat sugesti pertemanan. Bagian
badges terdapat papan leaderboard yang menunjukkan bahwa daftar tersebut
merupakan nilai yang pemain raih dengan perbandingan pengguna lain. Terdapat
sub halaman dari calendar, diantaranya:
179
4.5.5.1 Profile Settings
Gambar 4.24 Halaman Profile Settings
Merupakan halaman lanjutan dari profile, yang berisikan tombol notifications,
tombol settings, header title serta deskripsinya, lalu dilanjutkan dengan halaman
konten yang berisikan edit informations, edit favorites, dan tombol save. Halaman
yang terdapat macam pengaturan personal dari pengguna, dan dapat mengubah
informasi yang telah mereka isi sebelumnya. Halaman ini dibuat berdasarkan
beberapa aspek, yaitu:
1. Aspek Estetis
Halaman ini terdapat banyak kemiripan terhadap halaman sebelumnya yaitu
profile. Perbedaan hanya dari segi fungsi dan beberapa aspek visual yang
ditambahkan untuk menginformasikan pengguna. Aspek Teknis
180
Pada profile settings pengguna nantinya dapat mengubah profil seperti info
pengguna ataupun sign out dari akunnya. Kebutuhan-kebutuhan yang pada
umumnya terdapat pada sebuah halaman settings pada aplikasi mobile lainnya.
2. Aspek Komunikasi
Perbedaan pada halaman sebelumnya adalah kolom-kolom yang tersedia
mengindikasikan untuk diedit dengan cara pada tiap card seperti pada di info profil
terdapat field text dan pada card di bawahnya terdapat warna abu-abu dan simbol
pensil.
4.5.5.2 Friends
Gambar 4.25 Halaman Friends
Halaman ini berisikan tombol back, header title serta deskripsinya, lalu
dilanjutkan dengan halaman konten yang berisikan list atau daftar teman dari suatu
pengguna. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
181
1. Aspek Estetis
Seperti pada halaman yang memakai mini header serupa, pada halaman ini
menggunakan elemen visual yang tidak berbeda jauh untuk memberikan
konsistensi agar pengguna dapat mempelajari aplikasi dengan cepat. Halaman
konten yang berisikan daftar teman yang disusun secara vertikal dan berbentuk
card.
2. Aspek Teknis
Halaman ini ditujukan untuk pengguna dapat melihat daftar teman mereka
sendiri atau pun pengguna lainnya. Untuk dapat mengetahui, jalan pintas menuju
profile teman atau menambah mutual friends pada pengguna lainnya.
3. Aspek Komunikasi
Terdapat avatar dari pengguna lain untuk membantu pengguna
mengidentifikasi pengguna lainnya. Serta pada bagian kanan terdapat tombol yang
menunjukkan apakah pengguna tersebut sudah berteman atau belum.
182
4.5.5.3 Badges
Gambar 4.26 Halaman Badges
Halaman ini berisikan tombol back, header title serta deskripsinya, lalu
dilanjutkan dengan halaman konten yang berisikan list atau daftar badges dari suatu
pengguna. Halaman ini dibuat berdasarkan beberapa aspek, yaitu:
1. Aspek Estetis
Halaman konten yang berisikan daftar badges yang disusun secara vertikal dan
berbentuk card. Ikon dari badges diletakkan pada sisi kiri dan dilanjutkan dengan
penjelasan berupa teks.
2. Aspek Teknis
Halaman yang ditujukan untuk para pengguna yang ingin melihat badge yang
sudah mereka dapatkan ataupun mengingat kembali kapan mereka
mendapatkannya serta bagaimana caranya. Halaman ini dedikasikan kepada
pengguna untuk melihat pencapaian mereka. Pengoperasian halaman dapat
pengguna lakukan dengan melakukan scroll halaman secara vertikal.
183
3. Aspek Komunikasi
Pada bagian kiri dari card terdapat gambar badge dan pada bagian kanan
terdapat deskripsi yang menjelaskan badge tersebut. Serta pada bagian bawah card
terdapat tanggal kapan pengguna mendapatkan badge tersebut.
4.6 Analisis Media Pendukung
4.6.1 Pin dan Gantungan Kunci
Gambar 4.27 Desain Pin dan Gantungan Kunci Indosport
Pin dan gantungan kunci ini akan didistribusikan hanya saat melakukan
acara event-event tertentu seperti halnya pameran yang mana pin akan dibagikan
kepada pengunjung yang berminat untuk mengambilnya. Pin dan gantungan kunci
juga dapat berfungsi sebagai media promosi berjalan jika dipasangkan kepada tas
atau tempat lainnya yang dapat dilihat orang-orang pada umumnya.
184
1. Aspek Estetis
Menggunakan warna merah, biru dan putih sebagai warna utama, yang
merupakan warna dari guidelines Indosport. Ilustrasi dibuat dengan ilustrasi-
ilustrasi Indosport lainnya, yang membedakan adalah background yang terdapat
pada ilustrasi. Prinsip unity and variety pada desain di atas dapat dilihat terdapat
typeface, elemen grafis dan ilustrasi yang disusun tanpa mengganggu audiens untuk
dapat melihat desain tersebut, karena mengikat prinsip lainnya. Seperti hierarchy
yang mengatur mata penonton untuk melihat terlebih dahulu objek visual dalam
desain di atas, contohnya ilustrasi yang diberikan pada pemisahan objek visual
lainnya dengan menggunakan garis luar yang cukup tebal, dilanjutkan dengan teks
serta latar lapangan. Lalu contrast, dimulai dari ukuran ilustrasi yang paling besar
dari objek lainnya dan memiliki warna yang paling terang dibandingkan latar serta
teks agar dapat membedakan objek satu dengan objek lainnya. Dilanjutkan dengan
proportion yang mengatur rasio dan ukuran yang terdapat pada desain di atas, dan
mengisi ruang kosong dengan sebaik-baiknya, terlihat tidak ada ruang kosong yang
terlalu banyak, dan selalu diisi dengan objek visual walaupun dengan bentuk yang
sederhana.
2. Aspek Komunikasi
Merupakan ilustrasi pemain sepakbola dari tim yaitu tim-tim besar dari setiap
liga sepakbola yang berfungsi agar para audiens dapat mengetahui pemain tersebut,
dan pemain-pemain tersebut dinilai universal dalam dunia sepakbola. Berikut
bahasa rupa dari desain pin dan gantungan kunci di atas:
185
a. CW1: medium close up, penggunaan cara wimba ini diterapkan pada
ilustrasi pemain bola tersebut, yang bertujuan agar dapat menunjukkan
ekspresi muka dari pemain bola tersebut.
b. CW2: sudut wajar, cara penggambaran suatu wimba tampak sejajar dengan
pandangan mata dilakukan dalam segala elemen visual dalam pin dan
gantungan kunci.
c. CW3: sama dengan aslinya, penggambaran wimba pada ilustrasi pemain
yang dibuat dengan skala sama dengan ukuran aslinya, begitu juga latar
lapangan yang terdapat di belakang pemain.
d. CW4: bidang, menggunakan ilustrasi dengan pendekatan gaya bidang pada
semua elemen visual yang terdapat pada gantungan kunci, selain mengikuti
dengan gaya UI dan UX juga membuat masing-masing wimba serta latar
berkesan datar dan semakin kuat kesan dwimatranya.
e. CW5: sudut lihat wajar, cara lihat terhadap suatu obyek gambar karena
posisi letak gambar sejajar dengan rata-rata pandangan manusia, dan jenis
media yaitu pin dan gantungan kunci yang memiliki ukuran kecil dan hanua
dapat dilihat secara jelas secara sudut lihat wajar.
f. TU3: kilas balik, pengganaan tata ungkapan ini bertujuan untuk menyatakan
ruang dan waktu dengan cara kilas balik untuk menampilkan gambaran
peristiwa sebelumnya.
186
4.6.2 Stiker
Gambar 4.28 Desain Stiker Indosport
Sama seperti pin dan gantungan kunci, stiker akan didistribusikan ketika
melakukan sebuah event seperti pameran yang dimana stiker ini akan diberikan
kepada pengunjung yang mencoba menggunakan atau mampir ke stand dari User
Interface (UI) dan User Experience (UX) aplikasi mobile Indosport, sehingga
pengunjung akan mengingat kesan apa yang telah ia dapatkan ketika menggunakan
UI dan UX dari aplikasi mobile Indosport
1. Aspek Estetis
Ilustrasi dibuat dengan ilustrasi-ilustrasi Indosport lainnya, yang membedakan
adalah jenis medianya. Menggunakan ilustrasi pemain sebagai objek utama untuk
stiker, dan terdapat stroke berwarna abu-abu untuk penjelas ilustrasi ketika ditempel
pada objek yang kontras dengan ilustrasi yang termasuk kedalam prinsip contrast.
Prinsip unity and variety pada desain di atas dapat dilihat melalui ilustrasi dan
typeface, walaupun jenis font yang digunakan memiliki sudut-sudut yang tajam,
namun teks tersebut disatukan dengan warna pada garis ilustrasi untuk memberikan
187
variasi namun tetap satu kesatuan. Sedangkan prinsip hierarchy diarahkan untuk
para penonton fokus terhadap ekspresi pemain, dan selanjutnya mata penonton akan
dibawa pada penempatan teks di bawah ilustrasi yang berfungsi untuk memperjelas
atau memberi kesan lebih terhadap situasi yang terjadi. Selanjutnya proporsi yang
digunakan pada ilustrasi ini perbandingan bagian tubuh lainnya dengan keseluruhan
yang sesuai dengan pemain tersebut. Dalam ilustrasi ini sangat memainkan contrast
pada warna, dengan perbedaan yang mencolok terhadap wajah pemain, rambut,
baju dari pemain sampai dengan bayangan.
2. Aspek Komunikasi
Merupakan ilustrasi pemain sepakbola dari tim yaitu tim-tim besar dari setiap
liga sepakbola yang berfungsi agar para audiens dapat mengetahui pemain tersebut,
dan pemain-pemain tersebut dinilai universal dalam dunia sepakbola.
Berikut bahasa rupa dari desain pin dan gantungan kunci di atas:
a. CW1: medium close up, sama dengan gantungan kunci dan pin penggunaan
cara wimba ini diterapkan pada ilustrasi pemain bola tersebut, yang
bertujuan agar dapat menunjukkan ekspresi muka dari pemain bola tersebut.
a. CW2: sudut wajar, cara penggambaran suatu wimba tampak sejajar dengan
pandangan mata.
b. CW3: sama dengan aslinya, penggambaran wimba pada ilustrasi pemain
yang dibuat dengan skala sama dengan ukuran aslinya.
c. CW4: bidang, sama seperti gantungan kunci dan pin yang menggunakan
ilustrasi dengan pendekatan gaya bidang pada ilustrasi pemain, selain
188
mengikuti dengan gaya UI dan UX juga membuat masing-masing wimba
serta latar berkesan datar dan semakin kuat kesan dwimatranya.
d. CW5: sudut lihat wajar, cara lihat terhadap suatu obyek gambar karena
posisi letak gambar sejajar dengan rata-rata pandangan manusia, dan jenis
media yaitu pin dan gantungan kunci yang memiliki ukuran kecil dan hanua
dapat dilihat secara jelas secara sudut lihat wajar.
g. TU3: kilas balik, pengganaan tata ungkapan ini bertujuan untuk menyatakan
ruang dan waktu dengan cara kilas balik untuk menampilkan gambaran
peristiwa sebelumnya, seperti selebrasi pemain ataupun gerak lainnya.
4.6.3 Instagram Feed
Gambar 4.29 Instagram Feed Indosport
Promosi akan didistribusikan melalui Instagram berbentuk post, yang
menjelaskan mengenai fitur-fitur utama dari aplikasi mobile tersebut.
1. Aspek Estetis
Merupakan screenshot dari UI dan UX aplikasi mobile Indosport yang
disimulasikan pada smartphone, dengan tambahan background memilki kesamaan
pada pin dan gantungan kunci, serta teks untuk memperjelas gambar. Menggunakan
warna merah, biru dan putih sebagai warna utama pada background, yang
189
merupakan warna dari guidelines Indosport. Prinsip unity and variety pada desain
diatas dapat dilihat dengan variasi bentuk-bentuk visual yang berbeda dan juga
warna yang berbeda, namun terdapat kesatuan atau kesamaan terhadap objek visual
tersebut, yaitu sudut yang rounded. Hierarchy yang mengatur mata penonton untuk
melihat terlebih dahulu objek visual dalam desain di atas, seperti objek smartphone
yang memiliki warna putih serta pemisahan dengan menggunakan shadow
dilanjutkan dengan header dan body text. Lalu contrast, dimulai dari ukuran
smartphone yang paling besar dari objek lainnya dan memiliki warna yang paling
terang dibandingkan latar serta teks agar dapat membedakan objek satu dengan
objek lainnya. Dilanjutkan dengan proportion yang mengatur rasio dan ukuran yang
terdapat pada desain di atas, dan mengisi ruang kosong dengan sebaik-baiknya,
sehingga tidak terdapat ruang yang kosong yang terlalu banyak, dan selalu diisi
dengan objek visual walaupun dengan bentuk yang sederhana, serta penyusunan
objek visual tersebut disusun sebagai mana standar dari bentuk feed dari Instagram.
2. Aspek Komunikasi
Pada Instagram feed akan digunakan nantinya untuk dapat mempromosikan
aplikasi mobile dari Indosport jika aplikasi tersebut sudah sepenuhnya menjadi
sebuah native app.
a. CW1: very long shot, pengambilan dengan seluruh obyek gambar pada
bagian smartphone yang berfungsi untuk menunjukkan seluruh layar yang
berisikan UI dan UX aplikasi mobile Indosport.
b. CW2: sudut wajar, cara penggambaran suatu wimba tampak sejajar dengan
pandangan mata.
190
h. CW3: sama dengan aslinya, penggambaran wimba pada ilustrasi pemain
yang dibuat dengan skala sama dengan ukuran aslinya, begitu juga latar
lapangan yang terdapat di belakang pemain.
c. CW4: stilasi, pada objek smartphone Digambar dengan cara naturalis
namun disederhanakan, yang bertujuan untuk membawa fokus audines yang
melihat untuk dapat lebih memperhatikan apa yang ada di dalam layar
smartphone dibandingkan dengan bentuk smartphonenya itu sendiri.
e. CW5: sudut lihat wajar, cara lihat terhadap suatu obyek gambar karena
posisi letak gambar sejajar dengan rata-rata pandangan manusia, dan jenis
media Instagram feed yang akan muncul pada layar smartphone yang dilihat
dengan cara sudut lihat wajar.
191
BAB V
PENUTUP
5.1 Simpulan
Pembuatan proyek studi “Perancangan User Interface dan User Experience
Aplikasi Mobile Indosport Menggunakan User Centered Design” menghasilkan
User Interface (UI) dan User Experience (UX) aplikasi mobile yang nantinya dapat
diterapkan dalam merancang sebuah native app. Hasil dari proyek studi ini
merupakan pengaplikasian, pengalaman serta pengetahuan yang didapat selama
menempuh studi Seni Supa S1 konsentrasi Desain Komunikasi Visual, jurusan Seni
Rupa Universitas Negeri Semarang. Penerapan pengalaman studi dari Nirmana,
Tata Letak Perwajahan, Sejarah Seni Rupa Indonesia, Desain Identitas Visual dan
Olah Vektor sangat membantu dalam proses perancangan UI dan UX aplikasi
mobile Indosport ini.
Tahapan perancangan yaitu penyusunan user flow, wireframe, guidelines,
visual user interface dan prototype dilakukan secara digital dengan menggunakan
perangkat lunak (software) Adobe Illustration, Adobe XD dan Protopie. Dalam
perancangan UI dan UX aplikasi mobile Indosport ini disesuaikan dengan target
audiens dari Indosport yang telah ditentukan melalui riset dan analisis. Pada konsep
perancangan UI dan UX aplikasi mobile Indosport ini memusatkan pengguna
sebagai subjek dari pemakai sebuah produk tertentu berdasarkan perilaku mereka
atau disebut dengan user-centered design yang tentunya tanpa menghilangkan
identitas visual dari Indosport. Penggunaan bahasa rupa terdapat pada ilustrasi yang
192
dibuat yaitu medium close up yang digunakan untuk gambar pada konten yang
berisikan berita serta berfungsi untuk menunjukkan wajah pemain secara emosional
dan wide dipakai untuk menu khusus pada bagian news yang bertujuan untuk
menunjukkan suasana beserta dengan subjeknya. Penggunaan prinsip desain
komunikasi visual yaitu, unity and variety yang digunakan pada tombol-tombol
serta bentuk card yang berfungsi untuk membedakan interaksi yang dapat
dilakukan terhadap bentuk objek visual tersebut, hierarchy yang digunakan pada
tata letak artikel serta halaman news agar penonton dapat menyerap informasi,
contrast, proportion diterapkan dalam merancang isi konten halaman terlepas dari
header serta bottom bar dan balance merupakan acuan utama dalam menempatkan
objek visual ke dalam wireframe seperti pada tombol, konten, header title seperti
pada tombol, konten, header title yang ditempatkan secara simetris.
Perancangan UI dan UX aplikasi mobile Indosport dan seluruh merchandise
memiliki keterkaitan dari segi fungsi dan desain. Mengikuti dengan desain
guidelines yang sudah ada, pada UI dan UX ini banyak menggunakan warna merah
dan putih, Indosport sendiri memakai warna ini betujuan untuk menggambarkan
warna dari bendera Indonesia. Dalam guidelines aplikasi mobile Indosport
menggunakan customized style namun tetap mengimplementasikan guide style
yang digunakan oleh Google untuk mengurangi waktu pengguna dalam
beradaptasi. Dari segi visual, konsep utama yang dgunakan adalah simple elegant
masculine yang tentunya disesuaikan dengan target audiens.
Perancangan UI dan UX aplikasi mobile Indosport ini merupakan upaya
untuk memberikan solusi terhadap permasalahan yang ingin diselesaikan dalam
193
berbagai kondisi pengguna smartphone dalam menjalankan sebuah aplikasi
tertentu. Karena UI dan UX sangat erat kaitannya dengan HCI (Human Computer
Interaction) yaitu interaksi antara pengguna dengan perangkatnya, sedangkan UI
dan UX adalah interaksi antara pengguna dengan aplikasi. Serta memanfaatkan
HCI, yaitu interaksi pengguna seperti saat menggeser layar smartphone, gesture
dan mendapatkan kontrol penuh terhadap device. Dalam bentuk visual yang
terdapat pada UI menggunakan beberapa cara wimba bahasa rupa dimulai dari
ukuran pengambilan yang menggunakan medium close up sebagai contoh
diterapkan pada ilustrasi pada gambar di news yang berfungsi untuk menunjukkan
ekspresi pemain, full shot sebagai contoh yang diterapkan pada jenis ilustrasi yang
dapat memperjelas fungsi serta yang dijadikan ilustrasi pelengkap, long shot
sebagai contoh diterapkan pada news bagian fitur yang menuju ke shortcut tertentu
yang berfungsi untuk menunjukkan aktivitas dari pemain bola sehingga dapat
menangkap makna dengan shortcut terkait, close up sebagai contoh yang diterapkan
pada foto pemain pada bagian transfer yang berfungsi memperjelas identitas
pemain dan medium long shot yang biasanya digunakan pada ilustrasi yang terdapat
pada bagian header; sudut pengambilan yang menggunakan sudut wajar, lalu skala
menggunakan lebih besar dari aslinya digunakan pada beberapa ilustrasi yang
terdapat pada bagian start screen, sama dengan asli yang digunakan pada hampir
semua aset visual dari Indosport dan lebih kecil dari aslinya yang digunakan pada
start screen; penggambaran dengan bidang di hamper semua aset dari UI dan UX
Indosport, seperti pada tombol, ilustrasi, kolom dan lainnya; dan yang terakhir
adalah cara lihat yang menggunakan sudut lihat wajar. Sedangkan bahasa rupa tata
194
ungkapan menggunakan kilas balik pada bagian artikel untuk menampilkan
berdasarkan peristiwa sebelumnya, kilas maju untuk menampilkan pertandingan
yang akan dating pada bagian calendar, dan alih objek bergerak pada objek-objek
yang terdapat pada start screen untuk menampilkan sebuah efek yang salah satunya
berhubungan dengan kepuasan subjektif pengguna.
Bentuk desain yang dihasilkan berbentuk prototype beserta dengan asetnya
akan didistribusikan kepada divisi Research and Development dan divisi IT dari
Indosport untuk dapat dijadikan sebuah native app. Hasil dari uji coba produk
dilakukan pada pameran Proyek Studi UI dan UX aplikasi mobile Indosport yang
dilaksanakan pada tanggal 3 – 5 Februari 2020. Pada pelaksanaan pameran proyek
studi para pengunjung yang terdiri dari mahasiswa, dosen dan yang lainnya
memberikan feedback ketika menggunakan UI dan UX aplikasi mobile Indosport
dengan baik, dengan audiens yang rata-rata adalah orang dewasa.
5.2 Saran
Diharapkan dengan adanya desain UI dan UX aplikasi mobile ini, Indosport
dapat menggunakannya sebagai acuan dan menjadikan sebuah native app untuk
dirilis di Google Play Store dan App Store yang dikembangkan dari divisi IT
Indosport. Serta memanfaatkan media sosial Indosport yang ada seperti Instagram
dan Youtube, karena telah memiliki jumlah audiens yang banyak dan telah sesuai
dengan target audiens.
Bagi masyarakat khususnya yang menyukai olahraga khususnya sepakbola
dapat menggunakan UI dan UX aplikasi mobile dari Indosport, agar memiliki
pengalaman yang baik dalam mengikuti dunia olahraga serta dapat memberikan
195
andil atau tanggapan terhadap berita ataupun pertandingan karena terdapat fitur
yang mendukung dibandingkan fitur berdiskusi yang terdapat pada sosial media
Instagram maupun Youtube, yang hanya terbatas pada kolom komentar.
Bagi perguruan tinggi, diharapkan karya UI dan UX aplikasi mobile
Indosport ini dapat digunakan sebagai portofolio dan bahan pustaka. Serta menjadi
pembanding untuk meningkatkan kemampuan dalam membuat UI dan UX lainnya
dan memberikan variasi pada karya desain komunikasi visual.
196
DAFTAR PUSTAKA
Ahmadi, A. 1979. Psikologi Sosial. Solo: PT. Bina Ilmu.
Al-Bahra. 2005. Analisis dan Desain Sistem Informasi. Yogyakarta: Graha Ilmu.
Ambrose, G., & Harris, P. 2009. Basic Design: Design Thinking. London: AVA
Publishing SA.
Arhipova, A. 2018, Diakses 18 Mei 2019. Information Architecture. Basics for
Designers. Diambil kembali dari Tubik Studio:
https://tubikstudio.com/information-architecture-basics-for-designers/
Banga, C., & Weinhold, J. 2014. Essential Mobile Interaction Design.
Crawfordsville: Pearson Education, Inc.
Budelmann, K., Kim, Y., & Wozniak, C. 2010. Brand Identity Essentials. Beverly:
Rockport Publishers.
Darmawan, F. 2005. Bahasa Rupa Wimba dalam Komik. “Flap Book” Anak-Anak:
Studi Analisis Isi.
Diputra, R. F., & Indrojarwo, B. T. 2016. Pengembangan UI/UX Honda Mobilio
untuk Meminimalisir Kecelakaan dengan Konsep Clean and Simple. Jurnal
Sains dan Seni ITS Vol. 5, No. 2.
Eisenman, B. 2018. Learning React Native: Building Native Mobile Apps with
Javascript. Sebastopol: O'Reilly Media, Inc.
Endsley, M. R., Bolte, B., & Jones, D. G. 2003. Designing for Situation Awareness:
An Approach to User-Centered Design. Boca Raton: Taylor & Francis
Group.
Evans, P., & Thomas, M. A. 2013. Exploring The Elements of Design Third Edition.
New York: Delmar Cengage Learning.
Fadeyev, D. 2009. The Smashing Book. Lübeck: Smashing Media GmbH.
197
Fatnar, V. N., & Anam, C. 2014. Kemampuan Interaksi Sosial Antara Remaja yang
Tinggal di Pondok Pesantren dengan yang Tinggal Bersama Keluarga.
EMPHATY, Jurnal Fakultas Psikologi Vol.2, No. 2, 71-75.
Fauzia, S., Agustin, F. E., Syaripudin, U., & Ichsani, Y. 2016. Perancangan
Prototype Tampilan Antarmuka Pengguna Aplikasi Web
Kamardagang.com dengan Teknik Flat Design pada PT. Selaras Utama
Internasional. Jurnal Teknik Informatika Vol. 9 No. 2.
Garrett, J. J. 2011. The Elements of User Experience. Berkeley: Pearson.
Harto, D. B. 2012, Perancangan Model Film Animasi Bitmap Berbasis Pengolahan
Pesan dan Informasi Visual, Bahasa Rupa Tradisi Relief Jataka Candi
Borobudur. Semantik 2012, 626-635.
Harto, D. B., & Fanani, A. Z. 2016, 12 Oktober. Revitalisasi Bahasa Rupa Relief
Candi Masa Hindu-Budha sebagai Ciri Lokalitas Seni Budaya Nusantar.
Artikel dalam Proceeding Seminar Seni Budaya antar Bangsa
“Koeksistensi Seni Budaya Nusantara untuk Memperkokoh Identitas
Kebangsaan”. Malang: Jurusan Seni dan Desain – Fakultas Sastra –
Universitas Negeri Malang.
Haryanto, D., & Nugroho, G. E. 2011. Pengantar Sosiologi Dasar. Jakarta: Prestasi
Pustaka.
Hasanah, H. 2016. Teknik-Teknik Observasi (Sebuah Alternatif Metode
Pengumulan Data Kualitatif Ilmu-Ilmu Sosial). Jurnal at-Taqaddum,
Volume 8, Nomor 1, 21-46.
Hasian, B. 2017, Diakses 18 Mei 2019. Kitab UX Design. Diambil kembali dari
https://belajarux.com/kitab-ux-design-7203ee3d0d1f
Heckman, R. 2016. Designing Platform Independent Mobile Apps and Services.
New Jersey: IEEE Press.
Hembree, R. 2011. The Complete Graphic Designer. Beverly: Quayside Publishing
Group.
198
Hendrawan, J. 2018. Design and Development Application of Mobile Learning for
Shalat Guidance. Journal of Information Technology and Computer Science
(INTECOMS) Volume 1 No.1.
Iversen, J., & Eierman, M. 2014. Learning Mobile App Development.
Crawfordsville: Pearson Education, Inc.
Juansyah, A. 2015. Pembangunan Aplikasi Child Tracker Berbasis Assisted-Global
Positioning System (A-GPS) dengan Platform Android. Jurnal Ilmiah
Komputer dan Informatika (KOMPUTA), 1-8.
Keller, K. L. 2003. Strategic Brand Management: Building, Measuring, and
Managing Brand Equity. New Jersey: Prentice Hall.
Kotler, P. 2008. Manajemen Pemasaran, terjemahan Hendra Teguh Edisi XII.
Jakarta: Prenhalindo.
Kotler, P., & Keller, K. L. 2009. Manajemen Pemasaran Edisi 13. Jakarta: Elangga.
Kraft, C. 2012. User Experience Innovation. New York: Springer-Verlag New
York, Inc.
Kusumastuti, A. 2014. Peran Komunitas dalam Interaksi Sosial Remaja di
Komunitas Angklung Yogyakarta. Universitas Negeri Yogyakarta, Fakultas
Ilmu Pendidikan, Jurusan Pendidikan Luar Sekolah: Skripsi.
Mcleod, R., & Schell, J. G. 2008. Management Information Systems Tenth Edition.
Delhi: Dorling Kindersley.
Mulyana, H., & Maimunah. 2014. Aplikasi Mobile Kamus Istilah Komputer
Berbasis Android. Jurnal Penelitian Ilmu Komputer, System Embedded &
Logic, 27-34.
Munthe, R. D., Brata, K. C., & Fanani, L. 2018. Analisis User Experience Aplikasi
Mobile Facebook (Studi Kasus pada Mahasiswa Universitas Brawijaya).
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer, 2679-
2688.
199
Nasdian, F. T. 2003. Bagian Ilmu-Ilmu Sosial, Komunikasi, dan Ekologi Manusia.
Bogor: Departemen Ilmu-Ilmu Sosial Ekonomi.
Nastiti, A. L. 2018, Diakses pada 8 Juni 2019. Tahapan dalam Pembuatan User
Interface. Diambil kembali dari Tech Area: https://techarea.co.id/tahapan-
dalam-pembuatan-user-interface/
Noviandhi, A. 2012. Perbandingan Pengaruh User Experience Pada Situs
Terhadap Citra Merek Pada Pengguna Goal-Directed dan Pengguna
Experiential. Depok: Univesitas Indonesia.
Nugroho, P. 2017, Diakses pada 9 April 2019. Elemen-Elemen Wajib yang Harus
Menjadi Perhatian UX Designer. Diambil kembali dari Tech in Asia:
https://id.techinasia.com/elemen-elemen-wajib-yang-harus-menjadi-
perhatian-ux-designer
Permana, Y. 2016, Diakses pada 16 Februari 2019. Ini Dia Perbedaan Aplikasi
Native, Hybrid atau Web. Retrieved from Codepolitan:
https://www.codepolitan.com/apa-bedanya-aplikasi-native-hybrid-dan-
web
Poernomo, B., & Tukunang, H. 2014. Pemodelan Human Computer Interaction
pada Multi Touch Table System. Jurnal Ilmiah Teknologi dan Informasi
ASIA Vol. 8 No. 2, 20-31.
Poulin, R. 2011. The Language of Graphic Design. Beverly: Rockport Publishers,
Inc.
Pressman, R. S. 2010. Rekayasa Perangkat Lunak Buku 2. Yogyakarta: Penerbit
Nadi.
Pressman, R., & Bruce, M. 2014. Software Enginnering: A Practitioner's
Approach. New York: McGraw-Hill Education.
Railean, E. A. 2017. User Interface Design of Digital Textbooks. Singapore:
Springer Nature.
200
Rini, E. S. 2013. Peran Pengembangan Produk dalam Meningkatkan Penjualan.
Jurnal Ekonomi, Vol. 16, No. 1, 30-38.
Robinson, S., Marsden, G., & Jones, M. 2015. There's Not an App for That: Mobile
User Experience Design for Life. Waltham: Elsevier.
Rosaliza, M. 2015. Wawancara, Sebuah Interaksi Komunikasi dalam Penelitian
Kualitatif. Jurnal Ilmu Budaya. Vol. 11, No. 2, 71-79.
Saifulloh, & Asnawi, N. 2015. Evaluasi Desain Antarmuka dengan Pendekatan
Kemudahan Pengguna. Jurnal Ilmiah DASI Vol 16 No. 4, 55-58.
Santana, S. K. 2007. Menulis Ilmiah: Metode Penelitian Kualitatif. Jakarta:
Yayasan Obor Indonesia.
Shneiderman, Plaisant, Cohen, Jacobs, & Elmqvist. 2016. Designing the User
Interface: Strategies for Effective Human-Computer Interaction. Harlow:
Typeset.
Sitorus, M. 2000. Berkenalan dengan Sosiologi. Jakarta: Erlangga.
Soekanto, S. 1975. Sosiologi: Suatu Pengantar. Jakarta: Yayasan Penerbit
Universitas Indonesia.
Soekanto, S. 1983. Pengantar Penelitian Hukum. Jakarta: UI Press.
Soewardikon, D. W. 2013. Metodologi Penelitian Visual dari Seminar ke Tugas
Akhir. Bandung: CV Dinamika Komunika.
Spath, P. 2018. Pro Android with Kotlin, Developing Modern Mobile Apps.
Leipzig: Apress.
Still, B., & Crane, K. 2017. Fundamentals of User-Centered Design. Boca Raton:
CRC Press.
Stone, D., Jarret, C., Woodroffe, M., & Minocha, S. 2005. User Interface Design
and Evaluation. San Fransisco: Elsevier.
Sunaryo, A. 2002. Paparan Perkuliahan Mahasiswa Nirmana I. Semarang:
UNNES Press.
201
Supriyono, R. 2010. Desain Komunikasi Visual Teori dan Aplikasi. Yogyakarta:
C.V. Andi Offset.
Susanto, M. 2011. Diksi Rupa: Kumpulan Istilah dan Gerakan Seni Rupa Baru.
Yogyakarta: Djagat Art House.
Sutojo, Siswanto, & Kleinsteuber, F. 2002. Strategi Manajemen Pemasaran.
Jakarta: Damar Mulia Pustaka.
Taswadi. 2000. Perbandingan Bahasa Rupa Relief Ramayana Candi Shiwa dan
Brahma Kompleks Candi Prambanan dengan Relief Ramayana Candi Induk
Panataran. Tesis FSRD ITB Bandung.
Thornsby, J. 2016. Android UI Design: Plan, Design and Build Enganging User
Interfaces for Your Android Applications. Birmingham: Packt Publishing
Ltd.
Tjiptono, F. 2008. Strategi Pemasaran. Yogyakarta: ANDI.
Venessa, I., & Arifin, Z. 2017. Pengaruh Cintra Merek (Brand Image) dan Harga
Terhadap Keputusan Pembelian Konsumen. Jurnal Administrasi Bisnis
(JAB) Vol. 51 No. 1, 44-48.
Wheeler, A. 2012. Designing Brand Identity Fourth Edition. Hoboken: John Wiley
& Sons, Inc.
Widodo, C., & Jasmadi. 2008. Buku Panduan Menyusun Bahan Ajar. Jakarta: PT.
Elex Media Komputindo.
Wijaya, P. Y. 1999. Tipografi dalam Desain Komunikasi Visual. NIRMANA Vol. 1
No. 1 JANUARI.
Wijaya, W. S., & Mustamu, R. H. 2013. Analisis Pengembangan Produk pada
Perusahaan Tepung Terigu di Surabaya. AGORA Vol. 1 No. 1.
Witabora, J. 2012. Peran dan Perkembangan Ilustrasi. HUMANIORA Vol. 3 No. 2,
659-667.
Wood, D. 2014. Basics Interactive Design. New York: Bloomsbury Publishing Plc.
202
LAMPIRAN
203
LAMPIRAN 1
Gambar 5.1 SK Dosen Pembimbing
204
LAMPIRAN 2
BIODATA PENULIS
Nama : Muhammad Raffi Fadli
NIM : 2411415077
Prodi : Seni Rupa, Kons. Desain Komunikasi Visual (DKV)
Jurusan : Seni Rupa
Fakultas : Bahasa dan Seni
Universitas : Universitas Negeri Semarang (UNNES)
Tempat, Tgl Lahir : Jakarta, 9 Oktober 1996
Alamat Rumah : Grand Depok City, Sektor Melati Blok C4 Nomor 5
Kelurahan : Jatimulya
Kecamatan : Cilodong
Kode Pos : 16413
Provinsi : Jawa Barat
No. HP : +62 882-2978-6823
Email : raffifadli@gmail.com
Agama : Islam
205
LAMPIRAN 3
Gambar 5.2 Surat Undangan Pameran
206
Gambar 5.3 Poster Pameran
207
Gambar 5.4 X-Banner Pameran
208
Gambar 5.5 Instagram Feed
209
LAMPIRAN 4
Gambar 5.6 Pembukaan Pameran
Gambar 5.7 Dosen SR Mencoba UI dan UX Aplikasi Mobile Indosport
210
Gambar 5.8 Pengunjung Sedang Mencoba Karya
Gambar 5.9 Menjelaskan Konsep Pada Dosen SR
211
Gambar 5.10 Proses Mencoba UI dan UX
Gambar 5.11 Menjelaskan Konsep Pada Pengunjung
212
Gambar 5.12 Menjelaskan Desain Akhir Pada Klien
Gambar 5.13 Penyerahan Secara Simbolik Kepada Klien
Recommended