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

Instagram

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