PROYEK STUDI
Oleh:
2411415077
2020
i
ii
iii
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
PERSEMBAHAN
1. Ibu, Ayah, Kakak, Adik serta keluarga tersayang atas segala doa, dukungan
2. Teman-teman Seni Rupa 2015 yang selalu memberikan canda dan tawa.
iv
PRAKATA
Puji syukur kehadirat Allah SWT, atas rahmat dan karunia-Nya sehingga
penulis dapat menyelesaikan proyek studi yang disusun untuk memenuhi salah satu
Semarang.
bimbingan, dorongan dan bantuan dari berbagai pihak, maka pada kesempatan ini
1. Prof. Dr. Fathur M.Hum, Rektor Universitas Negeri Semarang yang telah
segala kebijaksanaannya.
2. Dr. Sri Rejeki Urip, M.Hum, Dekan Fakultas Bahasa dan Seni Universitas
3. Bapak Dr. Syakir, M.Sn., Ketua Jurusan Seni Rupa, Fakultas Bahasa dan
4. Bapak Drs. Onang Murtiyoso, M.Sn., selaku dosen wali prodi DKV S1
v
6. Pratama Bayu Widagdo S.Sn., M.Ds., selaku dosen pembimbing II yang
studi ini.
9. Bapak dan Ibu Dosen Jurusan Seni Rupa Universitas Negeri Semarang yang
10. Ayah, Ibu, Kakak, Adik dan keluarga besar saya yang telah memberikan
11. Teman-teman Seni Rupa 2015 yang selalu memberikan inspirasi, motivasi,
12. Semua pihak yang tidak dapat penulis sebutkan satu per satu.
Penulis
NIM. 2411415077
vi
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
vii
DAFTAR ISI
PRAKATA .............................................................................................................V
BAB I ...................................................................................................................... 1
PENDAHULUAN .................................................................................................. 1
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
viii
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
ix
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
x
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
xi
DAFTAR PUSTAKA ........................................................................................ 196
xii
DAFTAR GAMBAR
xiii
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
xiv
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
xv
DAFTAR TABEL
xvi
BAB I
PENDAHULUAN
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
mekanisme komunikasi antara pengguna (user) dengan sistem atau yang bisa
baru yang dapat dijalankan dalam mobile device atau smartphone. Pemilihan mobile
1
2
tahun 2016 sampai dengan tahun 2019. Mengalami kenaikan 26,8 juta pengguna
(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
Untuk pemakai smartphone usia 18-34 tahun, kepemilikannya meningkat dari 39%
usia 50 tahun keatas naik dari 2% menjadi 13% terhitung dari tahun 2015-2018.
dimana saja. Banyak jenis aplikasi pada smartphone, jenis aplikasi tersebut
3
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
mengenai status pemain, tim, pertandingan maupun transfer pemain, serta beberapa
Indonesia sendiri merupakan salah satu negara yang sangat antusias terhadap
olahraga. Dalam penelitian yang dilakukan oleh Nielsen Sport (2013), 77%
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.
sosial media. Minimnya wadah akan komunitas ini dan tanpa adanya filter terhadap
kolom diskusi dan minimnya fitur karena dikhususkan secara umum pada sosial
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
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
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
meningkatkan profesionalisme bekerja untuk lebih teliti dan akurat, serta untuk
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
visual yang tidak hanya menampilkan bagaimana produk itu terlihat tetapi juga
bagaimana produk itu dapat dipahami dan bekerja (Fadeyev, 2009: 10).
pengguna. Definisi user experience adalah suatu pengalaman yang dapat mengubah
Penting untuk menganggap serius dalam merancang user experience dalam semua
berbagai masalah yang dialami oleh pengguna (user), dan membuat sebuah
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-
dianggap sebagai gabungan ilmu komputer, ilmu perilaku, desain, studi media, dan
memfokuskan desain sistem pada pengguna atau biasa disebut dengan user
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
menggunakan metode user centered design (UCD). UCD sendiri adalah proses
produk itu dapat optimal sesuai dengan kebutuhan atau keinginan end-user terhadap
tersebut. Tujuan utamanya adalah agar produk yang akan dikembangkan dapat
Oleh karena itu dalam Proyek Studi ini perancangan user interface dan user
menjadi baik dari segi desain user interface dan user experience yang sesuai dengan
perusahaan dan oleh karenanya diharapkan lebih mudah tercapai. SWOT adalah
Opportunities (peluang), dan Threats (ancaman) (Sutojo & Kleinsteuber, 2002: 8).
Teknik analisis SWOT dapat diterapkan dalam kasus menentukan tujuan strategi
kelemahan serta keunggulan kompetitif yang dimiliki perusahaan atau usaha yang
mengenai peluang dan ancaman yang dihadapi perusahaan yang dilakukan melalui
menggali lebih banyak informasi pengguna yang akan menjadi user dari produk
yang akan dirancang, dan merealisasikan menjadi bentuk visual dibutuhkan analisis
KELEMAHAN
KEKUATAN (STRENGTH)
(WEAKNESS)
FAKTOR A. Kedalaman informasi ketika A. Tidak memiliki user
INTERNAL membahas mengenai olahraga interface dan user
seperti sepakbola atau olahraga experience.
lainnya. B. Kurangnya media yang
B. Memiliki identitas visual dapat memberikan
yang cukup baik, dan dapat pengguna untuk
FAKTOR dikembangkan lebih jauh lagi. berinteraksi dalam berita.
EKSTERNAL C. Memiliki media sosial
(Instagram, Youtube, Facebook,
dan Twitter).
STRATEGI STRATEGI
MENGGUNAKAN MENGURANGI
PELUANG
KEKUATAN UNTUK KELEMAHAN UNTUK
(OPPORTUNITIES)
MEMANFAATKAN MEMANFAATKAN
PELUANG PELUANG
1. Penduduk Indonesia A-C-1, Menyediakan sebuah A-1, Membuat user
antusias terhadap olahraga wadah baru yang dapat menjadi experience yang mudah
dapat menyampaikan isi tempat untuk berdiskusi untuk untuk dioperasikan agar
pikirannya terhadap kejadian membahas dunia sepakbola atau calon para pengguna
atau membahas berita, rumor olahraga lainnya serta merasakan pengalaman
spekulasi. memberikan tempat yang dalam membaca berita,
2. Aplikasi mobile merupakan memuat media informasi berdiskusi secara
media distribusi informasi mengenai olahraga tersebut. maksimal dan tidak
yang tepat, karena A-B-2, Menciptakan user meninggalkan aplikasi
memberikan user pengalaman interface dan user experience tersebut.
dan interaksi lebih yang baik pada prototype B-1-2, Membuat desain
didalamnya. aplikasi mobile Indosport agar user interface yang
3. Rentang usia target audiens calon pengguna mendapatkan menarik pengguna dan
yang tepat, karena cenderung pengalaman pemakaian aplikasi dapat menaikkan citra
banyak menggunakan yang baik. produk itu sendiri.
smartphone.
STRATEGI
STRATEGI
MENGURANGI
MENGGUNAKAN
ANCAMAN (THREATS) KELEMAHAN UNTUK
KEKUATAN UNTUK
MENGHADAPI
MENGHADAPI ANCAMAN
ANCAMAN
1. Terdapat banyak aplikasi A-1-2. Membuat inovasi baru A-B-1-2, Menggunakan
serupa yang menyediakan untuk bersaing dengan pesaing media promosi seperti
media informasi seputar lainnya. iklan dengan visual yang
olahraga. B-C-2, Mengembangkan lagi isi baik dan mudah
2. Kompetitor memiliki desain konten, aset-aset visual dimengerti untuk
identitas visual yang sangat Indosport yang sudah ada dan mengenalkan user
kuat. membuat penataan user interface dan fitur-fitur
interface yang menari. unggulan yang terdapat
pada Indosport.
9
FAKTOR KELEMAHAN
KEKUATAN (STRENGTH)
INTERNAL (WEAKNESS)
A. Merupakan salah satu media A. Terdapat beberapa
olahraga yang memberikan konten yang terkesan tidak
originalitas dari hal konten. berbobot.
B. Memiliki identitas visual B. Lemahnya pengalaman
FAKTOR yang sangat baik dan berkesan pengguna yang diadaptasi
EKSTERNAL kepada audiens. dalam aplikasi mobilenya.
STRATEGI STRATEGI
MENGGUNAKAN MENGURANGI
PELUANG
KEKUATAN UNTUK KELEMAHAN UNTUK
(OPPORTUNITIES)
MEMANFAATKAN MEMANFAATKAN
PELUANG PELUANG
1. Menyediakan tempat bagi A-1, Membuat ruang diskusi A-1, Membuat user
para penggemar untuk ikut bagi para penggemar olahraga interface dan user
andil dalam dunia olahraga atau interaksi yang dapat experience yang nyaman
secara tidak langsung. dilakukan oleh pengguna. bagi pengguna untuk
2. Dengan identitas visual dan B-1-2, Menciptakan beberapa berdiskusi.
sepak terjang Goal ID dalam inovasi dalam penyebaran B-2, Menambah beberapa
dunia media, mereka memiliki media informasi. media sosial seperti
brand yang cukup Youtube untuk menambah
diperhitungkan untuk dapat distribusi.
memperluas penyebaran
informasi.
STRATEGI
STRATEGI
MENGURANGI
MENGGUNAKAN
ANCAMAN (THREATS) KELEMAHAN UNTUK
KEKUATAN UNTUK
MENGHADAPI
MENGHADAPI ANCAMAN
ANCAMAN
1. Aplikasi mobile tidak A-1-2, Membuat inovasi baru A-1, Membuat konten
berbeda jauh dengan dari segi media-media Goal ID yang lebih baik lagi
pengalaman pengguna saat yang sudah ada untuk bersaing kualitasnya dari segi isi.
mengoperasikan website pada dengan pesaing lainnya. B-2, Memberikan fitur
umumnya. B-2 Membuat uiser interface yang menarik pada
2. Terdapat beberapa aplikasi dengan memanfaatkan identitas aplikasi mobile yang sudah
mobile serupa yang lebih visual dengan lebih baik lagi. ada.
unggul.
user interface dan user experience pada aplikasi mobile Indosport harus
yang tidak dimiliki oleh para pesaing. Menurut Jesse James Garret mengenai
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.
elemen 2 yang berbicara mengenai cakupan. Fitur dan konten apa yang dapat
memuaskan kebutuhan pengguna serta memenuhi target tim yang harus dipikirkan.
Pada elemen ini, user flow dan struktur informasi mulai dibuat, bagaimana
pengguna nantinya dapat berinteraksi dengan produk yang dibuat, dan data apa saja
4. Elemen 4: Wireframes
wireframes semua hal yang telah dilakukan pada elemen 1 (user needs dan site
11
berupa draft visual. Mulai memikirkan navigasi, layout, pemilihan komponen dan
Tabel 1.3 Elemen Perancangan User Interface dan User Experience Indosport
1. Menganalisis kebutuhan
dan keinginan calon
pengguna mengenai
tampilan dan pengalaman
melalui elisitasi kebutuhan
1. User Needs
atau melihat review
Elemen 1 2. Site
pengguna dari aplikasi
Objectives
serupa.
2. Menganalisis tujuan
bisnis, kreatif dan sistem
yang akan diberlakukan
untuk Indosport.
1. Membuat desain
interface menggunakan
konsep HCI (Human
Computer Interaction)
untuk memfalisitasi
interaksi pengguna saat
1. Interface menggunakan aplikasi
Design mobile Indosport.
2. Navigation 2. Desain dari elemen
Elemen 4
Design tampilan untuk
3. Information memfasilitasi pergerakan
Design atau navigasi pengguna
berdasarkan information
architecture.
3. Memikirkan bagaimana
informasi disampaikan
melalui user interface pada
aplikasi mobile Indosport.
Menghasilkan rancangan user interface (UI) dan user experience (UX) pada
(UCD).
1.3 Manfaat
3. Diharapkan proyek studi ini dapat menjadi bahan pustaka nantinya, yang
Semarang.
BAB II
LANDASAN TEORI
2.1 Perancangan
gambar kasar atau yang biasa disebut dengan sketsa dari pengaturan di beberapa
elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi untuk
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.
rekayasa produk atau sebuah sistem dalam upaya mencari inovasi berdasarkan
evaluasi yang telah dilakukan terlebih dahulu dari kegiatan analisis masalah dan
kebutuhan.
14
15
yang dituju. Ketika itu dieksekusi dengan tepat, desain grafis dapat
penonton untuk melakukan sesuatu. Penting bahwa pengirim pesan dan penerima
pesan berbicara dengan bahasa visual yang sama, dengan cara ini, perancang
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)
penting untuk mengetahui peran produsen dalam penciptaan media dan peran
yang mempelajari mengenai konsep komunikasi dan ungkapan daya kreatif, yang
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.
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
Seorang desainer dapat mengatur teks dan gambar dalam jumlah cara yang
tidak terbatas, tetapi tujuan utamanya adalah untuk berkomunikasi secara efektif
Harris, 2009: 15). Misalnya rambu-rambu jalan berfungsi sesuai dengan apa yang
17
Dalam desain dua dimensi, bentuk memiliki lebar dan panjang. Bidang
bidang non-geometris memiliki kesan tidak formal, santai dan dinamis (Supriyono,
2010: 57).
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
bentuk-bentuk organik. Dalam istilah yang paling mendasar, ruang adalah area
yang diaktifkan oleh elemen lain. Desain grafis adalah disiplin yang berkaitan
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
berbentuk memanjang dan membekas pada suatu permukaan yang memiliki arah
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
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
manusia) serta merupakan keputusan dasar yang perlu dibuat dalam konteks
4. Warna
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
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
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
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
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).
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
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
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,
variasi elemen yang terdapat pada sebuah desain, terdapat pertimbangan dalam
menentukan elemen mana yang tidak ditampilkan, yang memiliki kesamaan, dan
2. Hierarchy
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
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
yang membuat suatu objek (atau representasi dari gambar) dapat dibedakan dan
4. Proportion
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 &
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
5. Balance
menghubungkan karya yang kasat mata dan juga merupakan sebagai media
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
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
Menurut Tabrani dalam Harto (2012: 628), cara-cara dalam bahasa rupa
dapat digolongkan menjadi dua acara yaitu cara wimba (image ways) dan tata
Menurut Kotler & Keller (dalam Venessa & Arifin, 2017: 45) merek adalah
beberapa cara dari produk atau jasa lainnya yang dirancang untuk memuaskan
29
merek adalah janji penjual untuk menyampaikan kumpulan sifat, manfaat dan jasa
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
sebuah start-up, sebuah organisasi nirlaba atau sebuah produk (Wheeler, 2012: 2).
desain atau kombinasi dari semuanya yang berfungsi sebagai bentuk identifikasi
sebuah produk atau jasa sebuah atau sekelompok penjual yang dapat membedakan
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
melampaui puncak segmen pasar dan memberi para pekerja alat terbaik untuk
30
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).
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.
hampir semua orang kemana pun mereka pergi. Mulai dari mengirim pesan teks,
ataupun menjalankan bisnis. Di saat smartphone dan tablet menjadi lebih cerdas,
merek mereka agar dapat mengikuti segmen pasar (Wheeler, 2012: 72).
model baru untuk menyiapkan merek terhadap perubahan kondisi yang akan terjadi.
31
pengembangan merek dan inovasi merupakan sebuah hal penting yang harus
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
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.
aktivitas yang wajib dilakukan secara berkala sesuai dengan kebutuhan suatu
perusahaan, namun tiga fungsi yang selalu paling penting bagi proyek
1. Pemasaran
bagian ini pula secara khusus merancang komunikasi antara perusahaan dengan
2. Perancangan (design)
dalam bentuk fisik produk agar dapat memenuhi kebutuhan konsumen sesuai
mencakup desain engineering (mekanik, elektrik, software dan lain-lain) dan desain
3. Manufaktur
mengoperasikan sistem produksi pada proses produksi produk. Secara umum fungsi
memperbaiki produk atau jasa yang ada, dapat berupa citra produk atau jasa,
menambah variasi, memperbaiki. Agar dapat mengikuti perubahan yang terjadi dan
karakteristik, yaitu:
oleh konsumen.
34
perbuatan, pikiran, sikap, perasaan, kemauan dan sebagainya (Ahmadi, 1979: 25).
antar individu, antar kelompok, maupun antar individu dengan kelompok. Interaksi
sosial adalah suatu hubungan antara dua atau lebih individu, dimana perilaku
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
Soekanto (dalam Fatnar & Anam, 2014: 72) syarat-syarat yang dapat
1. Kerja Sama
kelompok untuk mencapai suatu tujuan yang telah ditetapkan dan anggota dari
2. Akomodasi
tersebut.
3. Persaingan
memenuhi tujuan dengan jalan yang menentang pihak lawan dengan ancaman atau
kekerasan.
36
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
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,
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
2015: 2).
Aplikasi adalah satu unit perangkat lunak yang dibuat untuk melayani
kebutuhan akan beberapa aktivitas. Banyak jenis aplikasi pada smartphone yang
37
manusia, mencari informasi atau ilmu, untuk berbelanja, memutar musik ataupun
produktifitas, membaca berita, update terbaru seputar olahraga, bermain game dan
masih banyak lagi berbagai jenis aplikasi yang sedang dikembangkan untuk
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
dan faktor-faktor tertentu. dalam membantu jenis aplikasi mana yang tepat, karena
dalam jenis aplikasi mobile terdapat kelebihan dan kekurangan yang dapat
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
interface dibuat.
38
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 keras yang berbeda, serta interaksi yang dapat dilakukan pada perangkat
juga memiliki beberapa perbedaan. Bahkan Android dan iOS memiliki desain
memaksimalkan sistem operasi dan juga perangkat keras yang terdapat pada
terdapat pada salah satu perangkat yang ingin dituju (Iversen & Eierman, 2014: 21).
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
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
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).
User interface adalah cara program dan pengguna untuk berinteraksi. Dapat
diartikan bahwa user interface merupakan cara pengguna untuk berinteraksi dengan
rupa agar dapat terbaca oleh sistem dan dapat menjalankan perintah yang tepat
target audiens, dan client. Merupakan proses berulang, dengan fase penelitian
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
lebih untuk menjalan suatu perintah pada sistem. Maka memantik para ahli untuk
mengembangkan sesuatu yang dapat digunakan hampir semua orang yang bahkan
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,
digunakan dengan mudah oleh berbagai jenis kalangan telah menjadi permasalahan
yang penting. Dalam hal membangun citra merek, user interface yang baik dapat
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
pengguna dan client. Proses yang dilakukan secara berulang dengan fase dimulai
dari riset calon pengguna, pencarian ide, uji coba terhadap ide, merancang dan uji
User interface harus memberikan bahasa visual yang tepat agar pengguna
menjadi bentuk perintah. Menurut Railean (2017: 64), strategi perancangan user
a. Time to Learn
b. Speed of Performance
desain yang mereka buat tidak membuat performa aplikasi menurun dan membuat
pengguna menggunakan user interface yang telah dirancang. Karena desain user
interface yang baik adalah tampilan yang dapat dimengerti hampir semua orang.
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
memiliki dampak yang cukup besar yang menjadi salah satu penentu kesuksesan
Stone dkk (2005: 89) menekankan bahwa untuk desain user interface yang
efektif, desainer perlu mengetahui tentang target pengguna dan harus merancang
b. Pengetahuan desain user interface yang sebagian berasal dari teori, seperti
Gambar 2.9 Situasi yang Sering Terjadi pada Pengguna (User Interface Design
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
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
transformasi konten. Seperti perbedaan antara pengguna yang sudah expert hingga
pemula, rentang usia, pengguna yang disabilitas, dan keragaman teknologi itu
sendiri.
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.
memberikan kepuasan, rasa yang lega, dan sebuah indikator untuk mempersiapkan
5. Prevent Errors
maka user interface harus menawarkan intruksi yang sederhana, konsturktif dan
spesifik. Tindakan tidak sesuai yang dilakukan oleh pengguna, harusnya tidak
cara memperbaikinya.
solusi untuk mengurangi rasa stres dan kecemasan pengguna, karena pengguna tahu
dapat berupa single action, tugas mengentri data, atau sekelompok tindakan seperti
mereka yang bertanggung jawab atas user interface dan juga user interface
dalam perilaku yang sudah familiar dan akan terganggu oleh urutan entri data yang
interface di mana pengguna harus mengingat informasi dari satu layar dan
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
khusus orang-orang disabilitas, Bahkan jika itu bukan bagian dari persyaratan
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
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
http://developer.apple.com/documentation/UserExperience/Conceptual/
OSXHIGuidelines
http://www.microsoft.com/whdc/hwdev/windowsxp/downloads/default.ms
px
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
http://java.sun.com/products/jlf/ed2/book/HIGTitle.html
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
diantaranya:
a. Membantu dalam proses membuat desain dan anggota tim desain lainnya
Hal ini juga dapat berfungsi sebagai catatan keputusan desain yang telah
Menurut Winter (dalam Munthe dkk, 2018: 2680) user experience adalah
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.
merujuk pada gagasan mengenai kegunaan yang sudah dipikirkan dan didesain
secara tepat. Tetapi user experience jauh lebih dari sekedar kegunaan. User
pengguna dan mengembangkan sesuatu yang memiliki makna atau nilai nyata bagi
5).
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).
atau setelah digunakan dan itu tergantung pada konteks atau pengalaman
dibayangkan perasaan yang akan dimiliki pengguna lain dalam situasi yang
perasaan negatif berarti kurva menurun. Jika kurva turun terlalu banyak atau turun
menggunakan produk tersebut dan yang terjadi adalah mereka tidak akan membeli
Gambar 2.10 Contoh dari Kurva User Experience (User Experience Innovation,
2012)
Menurut Garret (2011: 20) ketika membuat user experience yang baik,
dibangun di atas satu sama lain, memberi informasi dan memengaruhi semua aspek
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
Maupun gambar berfungsi sebagai ilustrasi, seperti foto produk untuk dijual
ataupun logo.
2. Skeleton
mengenai penempatan tombol, kontrol, foto dan teks. Kerangka dirancang untuk
3. Structure
halaman aplikasi, dan elemen structure akan menentukan bagaimana nantinya para
pengguna dapat sampai ke halaman berikutnya dan kemana mereka bisa pergi ke
4. Scope
Elemen scope mendifinisikan mengenai jenis fitur dan fungsi yang terdapat
membahas detail secara menyeluruh terhadap fitur dan fungsi, dalam elemen ini
53
5. Strategy
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.
dan pengembangan. Desain UCD tidak hanya berfokus pada pemahaman pengguna
tentang tugas yang akan dilakukan pengguna dengan sistem dan lingkungan dimana
cara yang sesuai dengan tujuan, tugas dan kebutuhan pengguna. Filosofi ini tidak
lahir dari keinginan humanistic atau altruistic, tetapi dari keinginan untuk
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
juga membantu untuk menghindari membuat produk yang hanya sekedar coba-coba
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).
Ketika membuat user experience salah satu yang harus ditekankan adalah
“anda tidak membuat desain untuk anda”. Desainer benar-benar tidak tahu
karena adalah bagaimana pengguna menjadi pusat dari proses perancangan dari
user interface dan user experience (Still & Crane, 2017: 54).
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
Kebutuhan jenis ini adalah kebutuhan yang dimiliki pengguna saat ini dan
yang sebagian besar pengguna dapat bayangkan dan jelaskan. Kebutuhan pengguna
fungsi yang pengguna tidak dapat mengungkapkan kebutuhan akan suatu fungsi
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
3.1.1 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
wujud fisik. Hardware sendiri memiliki beragam fungsi yang mendukung sistem
komputer agar berjalan sebagai mestinya. Berikut adalah hardware yang digunakan
56
57
1. Komputer
2. Smartphone
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
4. Kamera DSLR
program komputer yang berguna untuk menjalankan suatu pekerjaan dengan sesuai
apa yang dikehendaki oleh pengguna. Dalam perancangan UI dan UX pada aplikasi
sebagai berikut:
58
1. Adobe XD
3. Protopie
3.1.2 Teknik
seperti pensil pada media kertas. Cara penggunaan alat dan bahan menjadi
seperti komputer dan laptop sebagai alat pengeolah desain yang di dalamnya
terdapat perangkat lunak (software) untuk membantu proses eksekusi gagasan dan
atau dapat disebut juga Adobe Experience Design, yang berfungsi untu mendesain
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
dibutuhkan dalam proses. Kemudian Microsoft Office 2019 untuk menulis laporan
dalam bentuk prototipe yang akan dicoba untuk ditampilkan pada smartphone agar
UX aplikasi mobile Indosport melalui beberapa tahapan, yaitu tahap pra produksi,
berkarya:
60
PROSES BERKARYA
USER INTERFACE DAN USER EXPERIENCE APLIKASI MOBILE
yang dilakukan. Proses ini dilakukan secara berurutan untuk membantu atau
mobile pada Indosport melalui serangkaian tahapan yaitu, tahap pra produksi,
Tahap awal dari pra produksi adalah perumusan masalah yang berfungsi
sebagai pedoman, penentu arah serta fokus dari perancangan. Pada perancangan ini
dapat berfungsi dengan baik sesuai dengan kebutuhan akan calon pengguna serta
yang akan dihadapi oleh calon pengguna yang didapatkan melalui langkah-langkah
penggemar olahraga membaca berita pada sebuah aplikasi, keluh kesah yang
dialami ketika menggunakan aplikasi atau fitur yang dapat membantu ketika
tersebut dapat dijadikan beberapa ide yang dapat dikembangkan untuk aplikasi
mobile Indosport.
1. Observasi
Dalam metode observasi, hal yang harus ditemukan adalah interaksi yang
(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
itu sendiri dan keseluruhan sistem dari Indosport agar dapat menemukan langkah
guidelines agar desain user interface yang dihasilkan nantinya tidak berbeda
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
Gambar 3.1 Logo Indosport pada Tahun 2014 Sampai dengan Sekarang
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
tangannya, atau dapat diartikan merayakan sesuatu, seperti halnya fans ketika
merayakan sebuah gol akan menunjukkan gesture yang serupa untuk menyalurkan
kegembiraannya.
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
memiliki desain yang cukup konsisten karena memberikun atribut-atribut yang khas
pada desain-desainnya.
Dari segi desain Indosport memiliki visual yang cukup baik, Dan
keterbacaan informasi didalamnya yang cukup baik pula. Yang nantinya ini dapat
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
dengan sejarah, data dan informasi dari Indosport. Dalam hal ini wawancara
mengusung slogan “We Are Sport” yang berarti Indosport adalah media yang
membuat berita dengan ruang lingkup olahraga. Indosport juga berambisi untuk
yang positif dan valid akan kebenarannya, serta Indosport memiliki cita-cita untuk
Terdapat tiga misi yang dipegang oleh Indosport yaitu menjadi sarana
membahas seputar olahraga. Didirikan pada penghujung tahun 2012, dan berfokus
internasional. Selama tahun 2012 sampai dengan 2014 Indosport mengalami pasang
surut dalam dunia jurnalisme Indonesia diikuti dengan perubahan user interface
baik dan bertanggung jawa, dan memiliki media penyampai informasi yang banyak
untuk menghadirkan berita di depan layar digital pembaca, mulai dari komputer,
ini adalah tidak memiliki sebuah aplikasi untuk memudahkan lagi Indosport untuk
68
pada pembaca.
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.
Indosport adalah membuat pembaca dapat menikmati suatu pengalaman yang tidak
biasa ketika menggunakan aplikasi tersebut dan memiliki nilai lebih yang dapat
3. Studi Pustaka
referensi dari berbagai sumber dalam proses perancangan UI dan UX. Menurut
Soewardikoen (2013:6) dengan studi pustaka juga dapat memperkuat perspektif dan
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.
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
1. Segmentasi Geografis
geografis yang berbeda-beda seperti contohnya negara, negara bagian, kota bahkan
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
menyukai sesuatu atau hobi. Seperti pada tahap remaja dari umur 16-20 tahun
seseorang cenderung mencari jati diri mereka dan mulai mencoba-coba sesuatu.
dengan orang lain. Alasan pemilihan rentang umur dari 16 tahun sampai 30 tahun
karena mereka merupakan umur yang paling aktif dalam mengikuti perkembangan
olahraga yang terkait. Walaupun tidak sedikit para penikmat bola yang sudah
berumur lebih 30 tahun, namun mereka tidak terlalu tertarik untuk mengikuti
4. Behavioral
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 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
membaca berita olahraga serta melakukan survei yang terdapat dikolom review dari
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
2006: 2). Teknik FGD digunakan untuk mengungkap pemaknaan dari suatu
tertentu (Rahmat, 2009: 7). Agar dapat memenuhi syarat dan sesuai dengan konteks
maka syarat rekruitmen peserta yang akan digunakan dalam riset calon pengguna
c. Usia 16-30 tahun, yang merupakan target pengguna dari Indosport dengan
kategori remaja sampai dengan dewasa. Rentang usia ini agar tidak dapat
Indosport ini, dimulai dengan proses pembuatan konsep, user flow, perancangan
user experience. Dalam diskusi pertama yang dilakukan secara informal, penulis
yaitu:
a. Kurang puas dengan desain papan live score yang mudah untuk dimengerti
dalam pertandingan.
c. Tidak ada halaman yang memuat berita mengenai transfer pemain dan
pemain.
tidak sehingga mereka malas untuk membaca berita yang ada didalamnya,
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,
i. Fitur teman pada sebuah aplikasi dapat memberikan sesuatu yang cukup
j. Fitur count down sebagai tempat untuk memantau kegiatan dan berita
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
Kegiatan analisis kebutuhan atau yang biasa disebut dengan analisis SWOT
Penetapan konsep karya bertujuan agar karya yang dihasilkan sesuai dengan
tujuan perancangan dan target untuk memenuhi kebutuhan serta keinginan calon
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
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
1. Dari segi visual, konsep utama yang akan diterapkan adalah simple elegant
terkini.
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
ada dari Indosport, namun akan terdapat beberapa warna tambahan untuk
beberapa tag pada berita maupun halaman tim atau pertandingan yang akan
screen, sign in, register sampai dengan news. Dengan cara memberikan
adaptasi.
perpindahan ilustrasi pada halaman start screen dan setiap transisi setiap
halaman. Dengan mengatur efek transisi tidak lebih dari 0,3 detik, dengan
warna yang sama kepada action object dan action area, serta memberikan
76
desain yang simpel namun tetap padat akan informasi terutama pada bagian
penggunaan, huruf, warna, tata letak dan objek visual yang berisikan
perintah.
sesuatu yang cukup sulit, maka dari itu beberapa desain dasar seperti
11. Prinsip UI offer informative feedback akan diterapkan pada beberapa button
bagian antara sub bagian featured, transfer, galleries dan videos. Serta
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.
suatu tindakan.
tanggal tersebut. Serta tindakan secara preventif dijalankan oleh button back
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
15. Prinsip UI keep users in control dengan cara memberikan pengguna kendali
menuju halaman utama, dengan membuat bottom bar yang berisikan jalan
16. Prinsip UI reduce short-term memory load akan diterapkan dengan cara
mengadaptasi commercial style guide pada bagian tata letak dan navigasi,
operating system.
18. Berdasarkan hasil riset pada target audiens maka kebutuhan pengguna
sosial pada aplikasi, kebutuhan ini akan dikonsepkan sebagai salah satu
halaman utama dari Indosport yang bernama activity, yang nantinya akan
19. Berdasarkan hasil riset pada target audiens maka kebutuhan pengguna yang
20. Berdasarkan hasil riset pada target audiens maka kebutuhan pengguna yang
21. Prinsip desain komunikasi visual yaitu unity & variety akan diterapkan
layout yang memiliki shape yang tumpul atau rounded serta menampilkan
22. Prinsip desain komunikasi visual yaitu contrast akan digunakan untuk
header title, button, form serta aspek visual yang memuat perintah.
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
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
26. Bahasa rupa cara wimba, ukuran pengambilan dengan cara medium close up
ekspresi wajah pada kejadian tersebut, full shot digunakan pada elemen
transfer untuk menunjukkan fokus wajah dari pemain terkait, medium long
27. Bahasa rupa cara wimba, sudut pengambilan dengan sudut wajar pada
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
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
30. Bahasa rupa cara wimba cara lihat dengan sudut lihat wajar.
31. Bahasa rupa tata ungkapan, menyatakan ruang dan waktu, dengan cara kilas
32. Bahasa rupa tata ungkapan, menyatakan gerak dinamis terdapat pada
33. Uji coba produk akan direncanakan untuk dilakukan pada pameran proyek
studi yang akan dilaksanakan pada bulan Februari 2020 dengan tujuan untuk
Bentuk desain yang akan dihasilkan adalah sebuah prototype dari aplikasi
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
3 kali posting
Direct Marketing Instagram Feed Instagram pada feed
Instagram
1 kali dalam
Periklanan Video Youtube
sebulan
Instagram karena pada media sosial tersebut Indosport memiliki insight tertinggi
82
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
mengenai penempatan tombol, control, foto dan teks. Selanjutnya elemen structure
yang berisikan user flow dari pengguna yang akan menentukan bagaimana seorang
pada penjelasan konsep dan user flow yang bertujuan mendefinisikan fungsi.
lainnya.
Proses pra produksi merupakan tahap awal dalam proses berkarya. Proses
dan profil. User flow sendiri merupakan langkah-langkah yang harus dilakukan oleh
83
pengguna dalam mengerjakan suatu tugas atau perintah. Pembuatan user flow
Sebelum memulai proses perancangan desain visual dari user interface, user
flow berguna untuk memberikan arahan atau solusi terhadap para desainer maupun
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.
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
diimplementasikan dengan tata letak dari mulai gambar, teks dan bagaimana nanti
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
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
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.
maka diperlukan suatu rancangan yang akan dijadikan pedoman atau petunjuk agar
hasil desain user interface. Disini guidelines yang dibuat adalah warna, tipografi,
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
Mengacu pada style guide untuk user interface, guidelines ini menggunakan
Indosport yang sudah ada. Customized style digunakan dikarenakan lebih cocok
tidak lepas dari commercial style guide yang berfungsi agar pengguna tidak perlu
mobile Indosport adalah Poppins sebagai header dan Lato sebagai body text.
putih, abu-abu gelap dan ungu tua. Pada penggunaan padding pada UI dan UX
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.
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.
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
fungsional dan konten, interaksi desain dan arsitektur, wireframes, dan yang
terakhir adalah visual design. Dan berikut adalah tahapan dari proses produksi:
memberikan dampak visual terkait dengan informasi dan promosi sebuah produk
atau jasa yang juga berfungsi sebagai media yang ideal untuk memberi identitas
mempresentasikan hasil rancangan dan agar dapat melihat hasil visual secara nyata.
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
users, retention over time dan subjective satisfaction. Proses terhadap aspek-aspek
strategi perancangan user interface dilakukan dengan cara trial and error, dengan
audiens untuk dapat memberikan feedback ketika mereka mencoba user interface
tersebut dan memperbaikinya lagi, proses dilakukan secara berulang dari aspek
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
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
ingatan itu ketika sedang tidak menggunakan. Pengguna sejak awal halaman
fungsi.
membuat performa menurun, penulis terapkan pada semua transisi ketika halaman
berpindah ke halaman lainnya, serta efek animasi dari transisi dibuat sesederhana
penggunaan animasi untuk keperluan transisi hanya dibatasi selama 0,3 detik. Serta
dan jenis keasalahan ketika pengguna memakainya, proses untuk dapat mnegurangi
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.
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
interface dapat berdampingan sejalan dengan visual dan fungsi. Acuan prinsip yang
terdiri dari delapan prinsip yang disebut dengan golden rules, antara lain strive for
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
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
pada button bookmark, notifications, select date bagian calendar dan sub bagian
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
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 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
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
disesuaikan oleh pengguna. Serta bottom bar juga berfungsi sebagai jalan pintas
untuk pengguna dapat menyesuaikan bagian mana yang ingin mereka buka.
pengguna untuk mengingat infromasi baru pada setiap halaman, agar pengguna
rancangan aplikasi mobile yang telah dibuat. Pada langkah ini mengikuti user flow
alat prototyping untuk smart devices. Yang nantinya dapat diuji pada perangkat
secara aktual. Pada perancangan prototype ini, pendekatan user centered design
membentuk tampilan yang tidak hanya berpesan namun juga dapat memahami
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
ekpektasi dengan konsep serta penambahan shortcut pada bagian bookmark yang
Gambar 3.10 Pemicu dan Respon untuk Membuat Interaksi pada UI dan UX (protopie.io)
97
Model konsep yang dibuat pada Protopie didasarkan pada bagaimana suatu
pengguna untuk mengoperasikan bentuk yang sudah dirancang sebagai mana dapat
karya proyek studi yang telah dikerjakan untuk memperoleh kritik dan saran
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
aplikasi mobile maka hal yang dilakukan adalah konsutasi dengan klien mengenai
UI dan UX tersebut agar memperoleh masukan yang dapat membuat puas klien
berbentuk prototype aplikasi mobile agar para penonton dapat melihat user
studi.
1. X-Banner
2. Poster
3. Stiker
4. Pin
5. Undangan Pameran
6. Feed Instagram
7. Mechandise Pameran
pameran dan hal-hal yang perlu dipersiapkan antara lain adalah menentukan waktu
3.2.4.3 Pameran
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
Indosport, aspek yang akan disampaikan kepada klien adalah aspek estetik, teknis
dan pesan. Proses ini dilakukan untuk memberikan pemahaman mengenai apa yang
sebuah karya User Interface dan User Experience aplikasi mobile dari Indosport.
Media : Smartphone
Button : Like icon white, like icon black, form comment, form search, news
bottom bar button, activity bottom bar button, calendar bottom bar
101
102
button, select date calendar button, select league button, stats 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,
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
argumen dan memecahkan suatu masalah. Seseorang dapat mudah mengingat akan
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
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
gaya ilustrasi ini dengan ilustrasi yang penulis buat, pada ilustrasi Indosport tidak
menggunakan warna yang banyak untuk menghindari kesan terlalu ramai serta
garis yang patah, namun tidak tajam untuk menggambarkan kesan tegas serta
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
serta noise untuk menunjukkan beberapa detail yang khas dan akan diingat orang,
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
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
No Halaman Keterangan
biasa dipahami dengan tombol CTA (Call to Action), suatu tombol yang dapat
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
halaman start screen yang akan pertama kali muncul ketika aplikasi dibuka, lalu
terdapat dua tombol yaitu get started dan login, kedua tombol tersebut 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
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
experience (UX) untuk merasakan bagaimana prototipe aplikasi mobile ini dapat
berjalan.
Tabel 4.2 Tabel Komponen UEQ versi Indonesia pada halaman landing page
Aspek 1 2 3 4 5 6 7 Aspek
Menyusahkan x Menyenangkan
Kreatif x Monoton
Membosankan x Mengasyikkan
Cepat x Lambat
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Lazim x Terdepan
118
Aspek 1 2 3 4 5 6 7 Aspek
Jelas x Membingungkan
Terorganisasi x Berantakan
Konservatif x Inovatif
Halaman ini merupakan halaman yang pertama kali akan dilihat pengguna
yang belum sign in atau register saat menggunakan aplikasi mobile Indosport.
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
keterangan yang terdapat pada bagian atas, seperti kalimat untuk menjelaskan
keunggulan serta dibantu dengan gambar ilustrasi. Serta terdapat pula logo, judul
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
pada slide selanjutnya. Pada halaman ini juga secara tidak langsung menekankan
tumpul dan berwarna merah merupakan tombol CTA (Call to Action), seperti pada
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
3. Aspek Komunikasi
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
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
4.5.1.2 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
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
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
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
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
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
4.5.1.3 Sign In
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
1. Aspek Estetis
Tidak terdapat banyak aset visual pada halaman ini untuk mempermudah
Seperti pada halaman register yang memiliki tujuan serupa yaitu memberikan
mengingat apa saja tombol dan aksi yang dapat dilakukan untuk dapat menuju
halaman utama. Serta penggunaan background putih merupakan pilihan yang tepat
berupa teks. Pemisahan antara form login dengan tombol sign in dengan akun
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
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
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
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
Kreatif x Monoton
Membosankan x Mengasyikkan
Cepat x Lambat
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Lazim x Terdepan
Aspek 1 2 3 4 5 6 7 Aspek
Jelas x Membingungkan
Terorganisasi x Berantakan
Konservatif x Inovatif
4.5.2.1 Featured
1. Aspek Estetis
warna untuk fungsi tertentu dapat membantu para pengguna untuk memahami apa
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
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
halaman.
2. Aspek Teknis
Tombol notifikasi yang terdapat pada bagian atas kanan akan membawa
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
3. Aspek Komunikasi
Merupakan salah satu halaman utama dari aplikasi Indosport nantinya, pada
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
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
berjenis bidang yang ditambahkan beberapa detail untuk membuat ilustrasi yang
khas serta dibuat dengan tanpa perspektif untuk memudahkan pengguna dalam
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
1. Aspek Estetis
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
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
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-
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
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
Bagian atas halaman terdapat foto dari pengguna, logo, tanggal, dan tombol
notifikasi, sama seperti pada halaman featured news yang membedakan adalah isi
pemain yang terbagi atas beberapa bagian dan yang terakhir adalah bottom bar.
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
2. Aspek Teknis
Tidak banyak perubahan pada halaman ini dalam aspek teknis, cara
jenis penyajian artikel berita. Pengguna dapat mengetahui artikel tersebut lebih
lanjut dengan menyentuh salah satu card yang terdapat pada konten. Tombol see
3. Aspek Komunikasi
Halaman ini bertujuan untuk memberikan berita kepada pengguna yang ingin
penggolongan menjadi beberapa kolom seperti top transfers, my team, dan all
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
CW1: close up
CW2: sudut wajar
Merupakan ilustrasi
CW3: sama dengan aslinya
pemain sepakbola di
CW4: bidang
tim Atletico Madrid
1 CW5: sudut lihat wajar
bernama Joao Felix
yang berfungsi sebagai
Berfungsi untuk menambah
ilustrasi berita.
informasi dari pemain
terkait, tidak hanya dari teks.
141
CW1: close up
Merupakan ilustrasi CW2: sudut wajar
pemain sepakbola di CW3: sama dengan aslinya
tim FC Barcelona CW4: bidang
2 bernama Antoine CW5: sudut lihat wajar
Griezmann yang
berfungsi sebagai Berfungsi untuk menambah
ilustrasi berita. informasi dari pemain
terkait, tidak hanya dari teks.
CW1: close up
Merupakan ilustrasi CW2: sudut wajar
pemain sepakbola di CW3: sama dengan aslinya
tim Manchester United CW4: bidang
3 bernama Harry CW5: sudut lihat wajar
Maguire yang
berfungsi sebagai Berfungsi untuk menambah
ilustrasi berita. informasi dari pemain
terkait, tidak hanya dari teks.
CW1: close up
CW2: sudut wajar
Merupakan ilustrasi
CW3: sama dengan aslinya
pemain sepakbola tim
CW4: bidang
Arsenal bernama
4 CW5: sudut lihat wajar
Nicolas Pepe yang
berfungsi sebagai
Berfungsi untuk menambah
ilustrasi berita.
informasi dari pemain
terkait, tidak hanya dari teks.
CW1: close up
CW2: sudut wajar
Merupakan ilustrasi
CW3: sama dengan aslinya
pemain sepakbola di
CW4: bidang
tim Arsenal bernama
5 CW5: sudut lihat wajar
Alex Iwobi yang
berfungsi sebagai
Berfungsi untuk menambah
ilustrasi berita.
informasi dari pemain
terkait, tidak hanya dari teks.
142
CW1: close up
CW2: sudut wajar
Merupakan ilustrasi
CW3: sama dengan aslinya
pemain sepakbola di
CW4: bidang
tim AS Roma bernama
6 CW5: sudut lihat wajar
Henrikh Mkhitaryan
yang berfungsi sebagai
Berfungsi untuk menambah
ilustrasi berita.
informasi dari pemain
terkait, tidak hanya dari teks.
CW1: close up
CW2: sudut wajar
Merupakan ilustrasi
CW3: sama dengan aslinya
pemain sepakbola di
CW4: bidang
tim Torino bernama
7 CW5: sudut lihat wajar
Simone Verdi yang
berfungsi sebagai
Berfungsi untuk menambah
ilustrasi berita.
informasi dari pemain
terkait, tidak hanya dari teks.
CW1: close up
Merupakan ilustrasi CW2: sudut wajar
pemain sepakbola di CW3: sama dengan aslinya
tim Paris Saint CW4: bidang
8 Germain bernama CW5: sudut lihat wajar
Mauro Icardi yang
berfungsi sebagai Berfungsi untuk menambah
ilustrasi berita. informasi dari pemain
terkait, tidak hanya dari teks.
CW1: close up
CW2: sudut wajar
Merupakan ilustrasi
CW3: sama dengan aslinya
pemain sepakbola di
CW4: bidang
tim Galatasaray
9 CW5: sudut lihat wajar
bernama Radamel
Falcao yang berfungsi
Berfungsi untuk menambah
sebagai ilustrasi berita.
informasi dari pemain
terkait, tidak hanya dari teks.
143
yang berfungsi untuk memudahkan lagi pengguna untuk dapat mengenali wajah
pemain sebab ilustrasi pada bagian ini akan ditampilkan lebih kecil dibandingkan
ditambahkan beberapa detail untuk membuat ilustrasi yang khas serta dibuat tanpa
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
1. Aspek Estetis
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
halaman ini dibuat atas beberapa kolom dan membedakannya dengan warna seperti
pada konten dan komentar untuk memberikan kenyamanan pengguna ketika ingin
2. Aspek Teknis
Terdapat 2 tombol pada bagian header yaitu tombol back yang berfungsi untuk
melakukan scroll yang berfungsi untuk membaca seluruh halaman. Pada bagian
bawah terdapat kolom komentar yang cara pengoperasiannya sama dengan halaman
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
artikel berita dan terakhir komentar yang sama seperti sebelumnya, yaitu komentar
4.5.2.5 Galleries
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
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
pengguna saat melakukan scroll halaman berfungsi untuk dapat mengetahui update
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
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
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
yaitu mini galeri, pengguna dapat membuka foto dengan cara menyentuh foto yang
terdapat di bawah foto utama mini galeri. Bagian terbawah terdapat kolom
tersebut serta terdapat pula tombol like untuk memberikan respon terhadap
komentar pengguna lain. Bagian terbawah terdapat bottom yang berfungsi sebagai
3. Aspek Komunikasi
Halaman galleries news, di dalamnya terdapat konten artikel yang lebih fokus
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
4.5.2.7 Videos
penyajian berupa video. Walaupun memiliki sedikit teks kalimat yang membantu
seperti pada halaman featured news dan galleries news. Namun memiliki perbedaan
pada bentuk format pos, untuk menyesuaikan isi artikel yang memang berisikan
1. Aspek Estetis
Penyusunan pos artikel setelah kolom pertama pada halaman konten dibuat
khusus untuk mengikuti artikel berbentuk video. Selebihnya dalam bentuk desain
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
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
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
Sama seperti pada halaman news featured yang pada umumnya keseluruhan
penggunaan resolusi pada bagian konten yang terbilang lebar untuk memfasilitasi
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
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
adalah video, pengguna dapat memainkan video dengan menyentuh tombol play.
Bagian terbawah terdapat kolom komentar pagi pengguna yang ingin memberikan
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
bawah judul, pada video tersebut terdapat tombol play yang biasa digunakan
4.5.2.9 Search
Halaman ini berfungsi untuk mencari konten atau apapun yang terdapat
pada aplikasi mobile Indosport. Terdapat form yang dapat diinput serta keyword
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
3. Aspek Komunikasi
Halaman ini memiliki pesan kepada pengguna adalah fungsi utama dari
halaman ini adalah menemukan sesuatu yang terdapat pada Indosport untuk
ikon dan keterangan, yang merupakan objek utama dari halaman ini.
Halaman activity merupakan salah satu halaman utama dari aplikasi mobile
tanggal, menu matchday dan pada bagian konten terdapat aktivitas-aktivitas teman
yang diurutkan secara aktivitas dari terbaru hingga terlama dan terakhir terdapat
1. Aspek Estetis
kanan dari foto profile teman. Bagian menu pada header yang merujuk pada
halaman matchday disusun secara horizontal serta terdapat salah satu menu yang
didrag atau swipe untuk melihat lebih banyak lagi countdown. Penggunaan timeline
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
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
Kreatif x Monoton
Aspek 1 2 3 4 5 6 7 Aspek
Membosankan x Mengasyikkan
Cepat x Lambat
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Lazim x Terdepan
Jelas x Membingungkan
Terorganisasi x Berantakan
Konservatif x Inovatif
3. Aspek Komunikasi
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
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
diwakilkan salah satu pemain yang akan bertanding. Terdapat sub halaman dari
activity, diantaranya:
164
4.5.3.1 Countdown
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
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
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
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
pertandingan. Halaman response pada halaman ini berfungsi untuk para pengguna
4.5.3.2 Notifications
sebelumnya, lalu terdapat header title beserta deskripsinya, pada bagian konten
terdapat tombol navigasi yaitu new yang berisikan kumpulan notifikasi terbaru
1. Aspek Estetis
dengan isi konten yang terdapat di dalam card. Pada bagian header background
menambah suasana pada halaman notifications. Perpaduan warna hitam, merah dan
2. Aspek Teknis
seperti ketika melakukan bookmark pada halaman countdown, match, pemain atau
Halaman ini mempermudah pengguna untuk memantau sesuatu yang mereka ikuti
3. Aspek Komunikasi
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
terdapat keterangan waktu kapan notifikasi tersebut masuk. Seperti biasanya setiap
Pada halaman calendar terdapat tombol player and team stats, tombol
menu memilih tanngal untuk melihat pertandingan pada tanggal tersebut. Halaman
1. Aspek Estetis
gambar ilustrasi yang berfungsi pula menambah keindahan pada halaman. Serta
168
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
halaman tersebut. Bagian menu calendar berbentuk kalender yang dapat pemain
sentuh pada salah satu tanggalnya dan dapat didrag maupun swipe untuk melihat
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
Kreatif x Monoton
Membosankan x Mengasyikkan
Cepat x Lambat
169
Aspek 1 2 3 4 5 6 7 Aspek
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Lazim x Terdepan
Jelas x Membingungkan
Terorganisasi x Berantakan
Konservatif x Inovatif
3. Aspek Komunikasi
informasi mengenai pertandingan lebih detail lagi, informasi yang tidak mereka
terdapat gambar ilustrasi pemain yang terkenal dari liga tersebut untuk memperjelas
pengguna serta memberi sekat atau pembatas terhadap liga lainnya. Pada tanggal
menunjukkan ekspresi dari pemain disini ditunjukkan sedikit aksi dari pemain
tersebut dimulai dengan selebrasi ataupun sedang mengolah bola. Sama seperti
4.5.4.1 Match
pertandingan, pada bagian bawahnya terdapat informasi tim yang bertanding dan
dilengkapi dengan waktu pertandingan serta lokasi stadium. Halaman ini dibuat
1. Aspek Estetis
Bahasa rupa yaitu bagian header dibuat mirip seperti halaman countdown.
Background header yang digunakan merupakan gambar selebrasi pemain dari tim
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
2. Aspek Teknis
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
3. Aspek Komunikasi
Bagian header diberi efek parallax jika pengguna melakukan scroll pada
halaman. Dilanjutkan dengan bagian vote tombol akan memanjang jika salah
Penggunaan warna pada tombol vote merupakan warna dari baju yang dipakai
dengan warna, menggunakan warna abu-abu yang berfungsi sebagai sekat, karena
di dalam kolom latest timeline disajikan dengan susunan card sama seperti
disampaikan.
174
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
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
2. Aspek Teknis
Hanya terdapat satu tombol pada bagian header yang berfungsi untuk kembali
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
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.
Pada halaman ini terdapat tombol notifications, tombol settings, header title
favorites, friends, badges dan recent activities. Halaman ini dibuat berdasarkan
1. Aspek Estetis
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
search bar yang berfungsi untuk pengguna yang ingin mencari temannya. Pada
peringkat pada bawahnya yang ditunjukkan dengan jumlah points. Aspek Teknis
2. Aspek Teknis
Terdapat dua tombol pada halaman ini yaitu tombol settings yang akan
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
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
Kreatif x Monoton
Membosankan x Mengasyikkan
Cepat x Lambat
Menghalangi x Mendukung
Baik x Buruk
Rumit x Sederhana
Lazim x Terdepan
Aspek 1 2 3 4 5 6 7 Aspek
Jelas x Membingungkan
Terorganisasi x Berantakan
Konservatif x Inovatif
3. Aspek Komunikasi
Merupakan salah satu halaman utama dari aplikasi mobile Indosport nantinya,
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
bagian friends terdapat form search yang menandakan form tersebut berfungsi
untuk mencari teman, serta bagian bawahnya terdapat sugesti pertemanan. Bagian
merupakan nilai yang pemain raih dengan perbandingan pengguna lain. Terdapat
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
1. Aspek Estetis
profile. Perbedaan hanya dari segi fungsi dan beberapa aspek visual yang
Pada profile settings pengguna nantinya dapat mengubah profil seperti info
umumnya terdapat pada sebuah halaman settings pada aplikasi mobile lainnya.
2. Aspek Komunikasi
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
Halaman ini berisikan tombol back, header title serta deskripsinya, lalu
dilanjutkan dengan halaman konten yang berisikan list atau daftar teman dari suatu
1. Aspek Estetis
Seperti pada halaman yang memakai mini header serupa, pada halaman ini
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
3. Aspek Komunikasi
mengidentifikasi pengguna lainnya. Serta pada bagian kanan terdapat tombol yang
4.5.5.3 Badges
Halaman ini berisikan tombol back, header title serta deskripsinya, lalu
dilanjutkan dengan halaman konten yang berisikan list atau daftar badges dari suatu
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
2. Aspek Teknis
Halaman yang ditujukan untuk para pengguna yang ingin melihat badge yang
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
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
1. Aspek Estetis
Menggunakan warna merah, biru dan putih sebagai warna utama, yang
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,
a. CW1: medium close up, penggunaan cara wimba ini diterapkan pada
b. CW2: sudut wajar, cara penggambaran suatu wimba tampak sejajar dengan
pandangan mata dilakukan dalam segala elemen visual dalam pin dan
gantungan kunci.
yang dibuat dengan skala sama dengan ukuran aslinya, begitu juga latar
semua elemen visual yang terdapat pada gantungan kunci, selain mengikuti
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
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
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
1. Aspek Estetis
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,
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,
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.
c. CW4: bidang, sama seperti gantungan kunci dan pin yang menggunakan
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
g. TU3: kilas balik, pengganaan tata ungkapan ini bertujuan untuk menyatakan
ruang dan waktu dengan cara kilas balik untuk menampilkan gambaran
1. Aspek Estetis
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
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
aplikasi mobile dari Indosport jika aplikasi tersebut sudah sepenuhnya menjadi
a. CW1: very long shot, pengambilan dengan seluruh obyek gambar pada
b. CW2: sudut wajar, cara penggambaran suatu wimba tampak sejajar dengan
pandangan mata.
190
yang dibuat dengan skala sama dengan ukuran aslinya, begitu juga latar
melihat untuk dapat lebih memperhatikan apa yang ada di dalam layar
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
PENUTUP
5.1 Simpulan
User Interface (UI) dan User Experience (UX) aplikasi mobile yang nantinya dapat
diterapkan dalam merancang sebuah native app. Hasil dari proyek studi ini
menempuh studi Seni Supa S1 konsentrasi Desain Komunikasi Visual, jurusan Seni
Tata Letak Perwajahan, Sejarah Seni Rupa Indonesia, Desain Identitas Visual dan
visual user interface dan prototype dilakukan secara digital dengan menggunakan
audiens dari Indosport yang telah ditentukan melalui riset dan analisis. Pada konsep
sebagai subjek dari pemakai sebuah produk tertentu berdasarkan perilaku mereka
identitas visual dari Indosport. Penggunaan bahasa rupa terdapat pada ilustrasi yang
191
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
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
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
beradaptasi. Dari segi visual, konsep utama yang dgunakan adalah simple elegant
tertentu. Karena UI dan UX sangat erat kaitannya dengan HCI (Human Computer
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
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
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
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
studi para pengunjung yang terdiri dari mahasiswa, dosen dan yang lainnya
5.2 Saran
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
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
Indosport ini dapat digunakan sebagai portofolio dan bahan pustaka. Serta menjadi
Al-Bahra. 2005. Analisis dan Desain Sistem Informasi. Yogyakarta: Graha Ilmu.
Ambrose, G., & Harris, P. 2009. Basic Design: Design Thinking. London: AVA
Publishing SA.
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.
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.
196
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.
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.
Hasian, B. 2017, Diakses 18 Mei 2019. Kitab UX Design. Diambil kembali dari
https://belajarux.com/kitab-ux-design-7203ee3d0d1f
Kotler, P., & Keller, K. L. 2009. Manajemen Pemasaran Edisi 13. Jakarta: Elangga.
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
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/
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
Robinson, S., Marsden, G., & Jones, M. 2015. There's Not an App for That: Mobile
User Experience Design for Life. Waltham: Elsevier.
Shneiderman, Plaisant, Cohen, Jacobs, & Elmqvist. 2016. Designing the User
Interface: Strategies for Effective Human-Computer Interaction. Harlow:
Typeset.
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.
Susanto, M. 2011. Diksi Rupa: Kumpulan Istilah dan Gerakan Seni Rupa Baru.
Yogyakarta: Djagat Art House.
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.
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.
Wood, D. 2014. Basics Interactive Design. New York: Bloomsbury Publishing Plc.
202
LAMPIRAN
203
LAMPIRAN 1
LAMPIRAN 2
BIODATA PENULIS
NIM : 2411415077
Kelurahan : Jatimulya
Kecamatan : Cilodong
Email : raffifadli@gmail.com
Agama : Islam
205
LAMPIRAN 3
LAMPIRAN 4