Perancangan Aplikasi Berbasis Marketplace UMKM Kota Tangerang

(1)

7

Perancangan Aplikasi Berbasis…, Muhammad Raihan Alif Asshidiq, Universitas Multimedia Nusantara

BAB II

TINJAUAN PUSTAKA

2.1 Desain Grafis

Menurut Landa (2013, hlm. 1), desain grafis merupakan perantara penyampaian pesan dengan bentuk dan pendekatan visual yang didalamnya tercantum ide sebagai hasil penyusunan berbagai elemen visual kedalam bentuk yang sedemikian rupa sesuai dengan kebutuhannya.

2.1.1 Elemen Desain

Dalam dunia desain komunikasi visual, elemen-elemen dasar yang mendukung karya desain dua dimensi adalah adalah garis, bentuk, warna, dan tekstur (Landa, 2013, hlm. 19).

2.1.1.1 Garis

Garis adalah elemen desain dengan rupa yaitu titik yang diperpanjang. Suatu tanda dalam kreasi visual yang dapat dibentuk dengan berbagai macam alat seperti pensil, stylus, maupun software tools. Dalam aplikasinya garis memiliki fungsi dan peranan yang besar terutama dalam hal komunikasi dan komposisi, kedua hal tersebut dapat dipengaruhi oleh karakteristik garis yang terbentuk seperti garis lurus dan lengkung yang memiliki makna dan interpretasi berbeda bagi orang yang melihat (Landa, 2013, hlm. 19).

(2)

8

Gambar 2.1 Elemen Garis.

Sumber: https://i.graphicmama.com/blog/wp-

content/uploads/2019/11/12101130/Web-design-Trends-2020-lemonade-line- elements-web-design.jpg (2020)

Dalam pendekatan desain komunikasi visual, garis memiliki berbagai fungsi seperti untuk memperjelas bentuk rupa, membantu proses pengorganisasian elemen visual dalam suatu komposisi, dan media bantu dalam menegaskan gaya desain linear.

2.1.1.2 Bentuk

Bentuk adalah sesuatu yang dapat didefinisikan melalui rute dari permukaan yang tertutup, dengan kalimat lain yaitu suatu lingkup area yang dapat terbentuk oleh garis, warna, ataupun tekstur (Landa, 2013, hlm. 20).

Gambar 2.2 Elemen Bentuk.

Sumber: https://marketing.invisionapp-cdn.com/cms/images/lr1orcar/marketing- pages/4db3825d806e9f7d719ebf8604d97865c8520b54-

1439x600.png?w=2000&fm=jpg&q=90

(3)

9

Dalam pengaplikasiannya, bentuk adalah sesuatu yang bersifat dua dimensi dan tidak memiliki volume atau dalam kata lain berdimensi datar. Seluruh bentuk yang dapat dikreasikan oleh pikiran berasal dari tiga bentuk primer yaitu persegi, segitiga, dan lingkaran.

2.1.1.3 Warna

Landa (2013) menjelaskan bahwa warna adalah suatu rujukan yang dapat dimanfaatkan untuk menyusun kombinasi warna berkesinambungan. Warna dapat dipahami dan diimplementasikan oleh para desainer grafis melalui diagram yang memiliki beberapa bentuk yaitu roda warna, segitiga warna, dan bagan warna.

Gambar 2.3 Elemen Warna.

Sumber:

https://miro.medium.com/max/1200/1*72r10yg_faSQtBGHVrjO1Q.webp

Objektif dari disusunnya teori warna adalah untuk memahami interaksi yang tercipta antara masing-masing warna, memilah dan menggabungkan warna, dan mengkonstruksi palet warna yang efektif. Secara sederhana, terdapat enam konsep

(4)

10

kombinasi warna yang dapat ditranslasikan ke beberapa jenis palet untuk kebutuhan desain grafis sebagai berikut (Stone, 2006, hlm. 21):

1) Complementary

Pasangan warna yang terbentuk melalui penggabungan antara dua buah warna yang letaknya berseberangan dalam roda warna.

Gambar 2.4 Kombinasi Warna Complementary.

Sumber: Color Design Workbook: A Real World Guide to Using Color in Graphic Design (Stone, 2006)

Penggunaan warna komplementer dalam suatu luaran karya desain akan memberi kesan kontras yang tinggi dikarenakan dua buah warna yang menyusun merupakan warna hangat dan warna dingin.

2) Split Complementary

Pasangan warna yang terbentuk melalui penggabungan antara satu warna utama dan dua warna yang berlokasi sama rata dengan warna utamanya.

(5)

11

Gambar 2.5 Kombinasi Warna Split Complementary.

Penggunaan skema warna split complementary tidak memiliki tingkat kontras yang sama dengan complementary, hal ini dikarenakan terdapat tiga warna yang berkesinambungan dan memberikan dampaknya secara individual.

3) Double Complementary

Pasangan warna double complementary terbentuk ketika dalam suatu komposisi desain terdapat gabungan dua warna complementary dan dengan jarak yang sama.

Gambar 2.6 Kombinasi Warna Double Complementary.

(6)

12

Dikarenakan dalam skema warna double complementary terdapat empat buah warna, maka desainer disarankan untuk memberi perbedaan volume atau kadar penggunaan warna guna menghindari tingkat kontras yang terlalu tinggi.

4) Analogous

Pasangan warna yang dapat terbentuk melalui penggabungan dari dua dan atau lebih warna yang secara penempatannya sejajar dalam roda warna.

Gambar 2.7 Kombinasi Warna Analogous.

Penggunaan skema warna analogous memiliki keuntungan tersendiri dalam konteks kemudahan orang mengkonsumsi, hal ini dikarenakan analogous adalah skema dengan konten warna yang memiliki spektrum elektromagnetik serupa.

(7)

13

5) Triadic

Pasangan warna yang dapat terbentuk melalui penggabungan antara tiga warna dengan letak yang sejajar di roda warna.

Gambar 2.8 Kombinasi Warna Triadic.

Penggunaan skema warna triad lebih optimal apabila warna yang digunakan tidak semuanya merupakan warna primer, seperti contohnya satu warna primer yang dipadukan dengan dua warna sekunder atau tersier.

6) Monochromatic

Skema warna yang hanya berisi satu warna utama dan kemudian diberikan paduan tint dan shade untuk memberikan variasi.

(8)

14

Gambar 2.9 Kombinasi Warna Monochromatic.

Berbeda dengan analogous, skema warna ini hanya terdiri dari satu warna yang dalam penerapannya akan disituasikan secara proporsional dengan tint dan shadenya.

2.1.1.4 Tekstur

Landa (2013) memberikan penjelasan dimana representasi suatu permukaan tertentu yang dapat dirasakan dan dialami secara langsung dapat diidentifikasikan sebagai tekstur. Dalam pengembangan karya seni visual, secara garis besar terdapat dua jenis tekstur yakni taktil dan visual (hlm. 28).

Gambar 2.10 Elemen Tekstur.

Sumber: https://www.webfx.com/wp-

content/uploads/2021/10/web_design_textures_01collinsonpine.jpg

(9)

15

Pembeda utama antara kedua jenis tekstur di atas terdapat pada bagaimana hal tersebut dapat dirasakan atau dialami. Tekstur dengan jenis taktil memiliki karakteristik pada fisikalitasnya yang dapat secara langsung disentuh dan dirasa. Tekstur visual merupakan jenis tekstur yang bersifat ilusif terhadap tekstur asli yang hendak direpresentasikan. Tekstur dengan jenis ini dapat dibentuk melalui beberapa cara yang berlandaskan pada keahlian pembuatan karya visual seperti teknik seni lukis, gambar, hingga fotografi (hlm. 28).

2.1.1.5 Pola

Pengulangan suatu elemen visual dalam area atau komposisi tertentu secara konsisten dapat disebut dengan pola (Landa, 2013).

Selain menambah kesan estetika, pola dalam suatu komposisi ditujukan sebagai sesuatu yang membuat audiens mengantisipasi sekuens tertentu, telah menjadi suatu keharusan dimana keseluruhan pola memiliki arah atau sudut yang sama (hlm. 28).

Gambar 2.11 Elemen Pola.

Sumber: https://images.squarespace-

cdn.com/content/v1/566c606969492e9db2ae8c4c/1520550078087- ZJ48OLORH25RTPIYXWMF/CSS+Background+Pattern+Website+%7C+Marks

men+Studio?format=2500w (2018)

Pola dapat disimplifikasikan kedalam tiga elemen visual dasar yaitu titik yang merepresentasikan bentuk organis, garis yang merepresentasikan bentuk yang bergerak atau dikenal dengan stripes,

(10)

16

dan grid sebagai representasi dua atau lebih unit elemen visual yang bersinggungan melewati satu dan yang lain.

2.1.2 Prinsip Desain

Dalam merancang suatu solusi permasalahan dengan pendekatan desain komunikasi visual, perlu dilakukan penerapan prinsip-prinsip dasar desain yang mengkombinasikan pengetahuan kemampuan penciptaan konsep, tipografi, gambar atau visualisasi, serta implementasi elemen desain (Landa, 2013, hlm. 29).

2.1.2.1 Format

Landa (2013) memberi penjelasan bahwa format dapat didefinisikan sebagai lapisan atau batasan paling luar dalam area yang berisikan karya desain, terlebih dari itu format juga dapat dijabarkan sebagai batas lingkup dimana desainer grafis dapat memasukan berbagai elemen visual di dalamnya (hlm. 29).

Gambar 2.12 Prinsip Format.

Sumber: Graphic Design Solutions (Landa, 2013).

(11)

17

Desainer grafis dapat bekerja dalam berbagai format baik fisik ataupun digital, beberapa diantaranya meliputi media poster, CD, mobile advertisement, dan lain sebagainya. Dimana dalam penggunaannya sendiri, desainer grafis dapat memilih media yang paling sesuai dengan kebutuhan atau brief kerja, lalu hasil desainnya dapat ditransformasikan ke ukuran apapun sebagai hasil akhirnya.

Media desain jenis apapun mengharuskan desainer grafis untuk mematuhi batasan yang tersedia dalam memasukkan serangkaian elemen visual yang ada (hlm. 30).

2.1.2.2 Balance

Landa (2013) menjelaskan bahwa balance atau keseimbangan dalam proyek desain dapat terbentuk dengan adanya pembagian sama rata elemen visual yang didasarkan pada satu atau beberapa poros dalam keseluruhan komposisi. Balance adalah prinsip desain yang dapat teroptimalisasikan seiring berjalannya waktu dalam tingkat individual dengan cara yang lebih natural yaitu kebiasaan dalam pengolahan fisik para desainer grafis seperti keikutsertaan mereka dalam program yoga ataupun martial arts (hlm. 30).

Gambar 2.13 Prinsip Balance.

Sumber: https://www.elegantthemes.com/blog/wp-content/uploads/2019/07/max- shrekt.png (2019)

(12)

18

Setelah teridentifikasi melalui pembagian elemen visual secara merata dalam suatu komposisi, balance selanjutnya dilihat dari karakteristik masing-masing elemen visual. Beberapa contoh diantaranya meliputi karakter warna seperti warna hitam yang terlihat lebih berat dibandingkan putih, warna pekat yang lebih kontras dibanding warna pudar, dan elemen visual dengan pola terkesan lebih berisi jika dibandingkan dengan elemen visual yang kosong. Terlebih dari karakeristiknya, penempatan elemen visual pada komposisi juga mempengaruhi keseluruhan balance (hlm. 31). Secara umum, terdapat tiga jenis keseimbangan dalam desain:

1) Symmetric Balance

Menurut Landa (2013) Keseimbangan simetris dapat dikatakan juga sebagai refleksi simetris dikarenakan karakteristik visualnya dimana dalam suatu komposisi, elemen visual akan dibagi dalam dua bagian terhadap poros pusat atau central axis (hlm. 31).

Gambar 2.14 Symmetric Balance.

Sumber: Graphic Design Solutions (Landa, 2013).

Jenis keseimbangan yang serupa dengan symmetry adalah approximate symmetry. Perbedaannya hanya terletak pada ketepatan keseimbangan antara dua sisi yang tercipta setelah dibentuk garis pembagi komposisi. Approximate symmetry

(13)

19

memiliki elemen visual yang sedikit berbeda di kedua bagian, dapat terlihat dari adanya pergeseran posisi elemen visual, lekukan yang identik, dan sedikit perbedaan tint &

shade pada warna (hlm. 31).

2) Asymmetric Balance

Menurut Landa (2013) keseimbangan asimetris merupakan hasil dari penyusunan elemen visual dalam suatu komposisi tanpa adanya pembagian dua sisi yang mengharuskan satu bagian komposisi direfleksikan ke sisi lainnya. Elemen visual dalam keseimbangan asimetris difungsikan sebagai pengimbang atau counterweight terhadap elemen visual yang terletak diseberangnya. Dimana secara keseluruhan tercipta visual yang organis, tidak rigid atau kaku akibat perfeksi (hlm. 31).

Gambar 2.15 Asymmetric Balance.

Secara mendasar, untuk menciptakan komposisi dengan keseimbangan asimetris diperlukan penyeimbang antara kedua sisi baik yang dibagi secara horizontal ataupun

(14)

20

vertikal. Penyeimbangan komposisi ini dapat dilakukan melalui berbagai cara meliputi penempatan elemen visual yang saling menyeimbangkan dan karakteristik elemen visual seperti berat, warna, kejelasan, bentuk, dan tekstur.

3) Radial Balance

Menurut Landa (2013) keseimbangan Radial merupakan penggabungan antara refleksi horizontal dan vertical dalam suatu komposisi.

Gambar 2.16 Radial Balance.

Penerapan prinsip keseimbangan radial dapat menghasilkan efek visual dimana focal point suatu karya desain terletak tepat di tengah, lalu elemen visual lainnya memancar ke sudut-sudut komposisi.

2.1.2.3 Visual Hierarcy

Menurut Landa (2013) desain grafis memiliki berbagai tujuan, salah satu tujuan utamanya adalah untuk menyampaikan pesan atau informasi terhadap audiens dengan tepat sesuai kebutuhan penerimaan pesan. Prinsip desain yang berhubungan dengan ketepatan tersampaikannya pesan ataupun informasi adalah visual hierarchy (hlm. 33). Tanpa adanya tingkat prioritas yang disematkan

(15)

21

pada setiap elemen visual, akan berdampak besar pada keterbacaan desain secara keseluruhan oleh audiens.

Gambar 2.17 Visual Hierarcy.

Sumber: https://www.appletoncreative.com/wp- content/uploads/2021/04/MicrosoftTeams-image-53.jpg

Cara kerja visual hierarchy ialah memandu audiens ketika sedang melihat desain yang berlandaskan pada istilah Emphasis.

Dalam proses pembuatan desain, desainer grafis akan menentukan terlebih dahulu bagian atau unit visual mana yang akan dijadikan sebagai fokus utama, sekunder, tersier, dan seterusnya. Hal ini dapat dicapai dengan mengutilisasikan berbagai cara seperti membuat beberapa elemen visual terlihat dominan dan elemen lainnya lebih kecil atau tidak memiliki tingkat kontras yang tinggi. Setiap komposisi memiliki focal point yang berarti area tertentu dengan dominasi dan penekanan karakter yang paling tinggi. Focal point dapat dibentuk melalui penerapan emphasis (Landa, 2013, hlm. 33).

2.1.2.4 Rhythm

Landa (2013) menjelaskan bahwa rhythm adalah suatu irama dalam desain yang tercipta dengan membuat repetisi elemen visual secara konsisten, menghasilkan perubahan dimana audiens dapat melihat keseluruhan komposisi desain secara lebih dinamis. Terdapat banyak faktor yang dapat membantu terbentuknya ritme seperti

(16)

22

keseimbangan, emphasis, tekstur, dan warna. Ritme dapat dipercepat, diperlambat, atau didisrupsi melalui penekanan visual yang frekuen atau variasi dari ritme itu sendiri (hlm. 35).

Gambar 2.18 Visual Hierarcy.

Sumber: https://uploads-

ssl.webflow.com/614057d4b4c88103e52f7176/61405ba1fcc358a4b1b2c054_5ea0 33f4ca3b896fe15daa8f_img5.png (2020)

Satu hal yang perlu dipahami dalam menyusun ritme dalam desain adalah pemahaman dalam membedakan antara repetisi dan variasi. Untuk menciptakan keindahan dan minat visual, perlu dilakukan disrupsi terhadap repetisi ritme menggunakan variasi ritme.

Perbedaan antara keduanya dapat dilihat sebagai berikut (hlm. 35):

1) Repetition

Repetisi dapat terbentuk melalui pengulangan elemen visual dalam komposisi secara konsisten (hlm. 36).

2) Variation

Variasi dapat terbentuk dengan mengubah atau memodifikasi pola elemen visual yang sudah dibuat sebelumnya melalui perubahan pada bentuk, warna, ukuran, orientasi bentuk, jarak antar unit visual, dan penempatan unit-unit tersebut secara kolektif. Variasi menciptakan kesan dinamis pada audiens (hlm. 36).

(17)

23

2.1.2.5 Unity

Unity merupakan kesan visual kohesif yang tercipta melalui pemilihan dan penggunaan elemen visual seperti bentuk, gambar, dan tipografi secara tepat dalam suatu media (Landa, 2013, hlm. 36).

Gambar 2.19 Unity.

Sumber: https://marketing.invisionapp-cdn.com/cms/images/lr1orcar/marketing- pages/19df5a16708ce558f463b6144c5cee396ff6ec9f-

2881x2161.png?w=2000&fm=jpg&q=90

Proses pembentukan unity didasari pada prinsip Laws of Perceptual Organization atau yang lebih diketahui dengan teorema Gestalt, menitikberatkan pada pengelompokan berbagai elemen visual menjadi satu kesatuan yang menyeluruh (hlm. 36). Terlebih, penerapan prinsip unity secara tepat menyebabkan audiens yang melihat dapat secara langsung merasakan kesatuan dari komposisi desain, sebab secara alamiah pikiran memiliki kecenderungan untuk membuat sebuah keteraturan (hlm. 36).

2.1.2.6 Laws of Perceptual Organization

Laws of Perceptual Organization adalah serangkaian hukum yang terbentuk secara alamiah berdasarkan kecenderungan pikiran

(18)

24

manusia saat mengkonsumsi suatu komposisi desain bahkan hingga tingkat unit (Landa, 2013, hlm. 36).

Gambar 2.20 Laws of Perceptual Organization.

Hukum yang sudah terbentuk kemudian diklasifikasikan ke dalam enam jenis yang diantaranya meliputi:

1) Similarity

Elemen visual yang memiliki karakteristik serupa meliputi warna, tekstur, bentuk, hingga arah gerak bentuk dapat diklasifikasikan menjadi suatu kelompok.

2) Proximity

Proximity adalah hasil pengelompokan elemen visual yang saling berdekatan antara satu dan yang lainnya.

3) Continuity

Continuity adalah efek pengelompokan untuk elemen visual yang terlihat sebagai kontinuasi atau penyambungan dari elemen sebelumnya yang berposisi dekat.

(19)

25

4) Closure

Klosur merupakan hasil dari kecenderungan pikiran untuk menghubungkan elemen-elemen visual yang terlihat terpisah sehingga menyatu dan menghasilkan unit, rupa, dan pola.

5) Common Fate

Common Fate merupakan hasil pengelompokan elemen visual yang memiliki similaritas arah gerak.

6) Continuing Line

Persepsi pikiran terhadap garis adalah garis selalu mengikuti suatu rute, apabila terdapat patahan dalam kontinuasi garis maka audiens akan lebih cenderung untuk mempersepsikan arah geraknya.

2.1.3 Tipografi

Lupton (2004) menjelaskan bahwa type adalah suatu esensi bagi para desainer dalam menciptakan luaran karya. Type adalah suatu perpustakaan aset yang bisa dipilih atau bahkan dirancang dari awal oleh desainer, kemudian digabung dan dikombinasikan untuk membuat komposisi karya desain dengan tata letak yang rapih dan baik.

(20)

26

Gambar 2.21 Tipografi.

Sumber: Thinking with Type (Lupton, 2004)

Tipografi adalah suatu elemen visual yang memiliki bahasa dan unit pengukuran tersendiri. Satuan huruf atau type yang menyusun kelompok huruf dengan kesinambungan atau karakteristik yang sama dapat disebut sebagai typeface, jenis-jenis typeface kemudian dapat diklasifikasikan sebagai berikut (Landa, 2013, hlm. 47):

1) Old Style or Humanist

Typeface roma, pertama kali diperkenalkan pada abad ke lima belas.

Memiliki karakteristik yaitu serif bersudut tertentu dan tingkat ketebalan pada sebagian anatomi huruf secara acak.

2) Transitional

Serif typeface, pertama kali muncul pada abad ke delapan belas.

Merupakan kelompok typeface dengan karakteristik transitional, menghubungkan kelompok old style dan modern.

(21)

27

3) Modern

Serif typeface, mulai bermunculan pada abad ke delapan hingga sembilan belas awal. Karakteristik modern typeface ialah bentuknya yang lebih geometris dan kontras antara bagian stroke hurufnya yang tebal dan tipis.

4) Slab Serif

Serif typeface, memiliki karakteristik yaitu bagian serif yang terlihat datar atau seperti slab.

5) Sans Serif

Sans serif typeface, memiliki perbedaan terbesar dengan jenis typeface lain, dalam keseluruhan anatomi hurufnya tidak terdapat bagian serif.

6) Blackletter

Jenis typeface yang didasarkan pada teks dam manuskrip abad pertengahan. Karakteristiknya yaitu stroke yang sangat tebal, terlihat padat, dan kelengkungan yang minimal.

7) Script

Typeface dengan jenis ini sangat mepresentasikan tulisan tangan yang natural.

8) Display

Typeface yang masuk dalam jenis ini lebih optimal ketika digunakan untuk headline dan title. Memiliki karakteristik yaitu dekoratif dan terdapat sentuhan tangan yang natural.

2.1.4 Layout

Poulin (2018, hlm. 7-8) memberikan penjelasan bahwa layout adalah salah satu bentuk ekspresi visual dengan tujuan dan dampak yang paling kuat.

Layout dapat diistilahkan sebagai aksi pengorganisasian dan penempatan berbagai elemen visual seperti teks, warna, dan gambar menjadi kesatuan komposisi. Layout adalah salah satu prinsip dalam mendesain yang paling

(22)

28

penting, merangkai elemen visual yang ada menjadi satu kesinambungan yang efektif dan berarti bagi audiens.

Gambar 2.22 Layout.

Sumber: Design School: Layout (Poulin, 2018)

Layout adalah suatu metode pembuatan desain yang diutilisasikan sebagai perantara agar audiens dapat merasakan nuansa dan pengalaman yang spesifik, selaras dengan bagaimana seorang desainer grafis mengkorelasikan layout dengan visual treatment. Tujuan utama dari diterapkannya layout bagi desainer grafis adalah peningkatan efesiensi penyampaian informasi melalui pendekatan desain dengan cara memahami dan mengkomposisikan elemen visual sesuai pada kebutuhan pemahaman audiens (hlm. 8).

2.1.4.1 Grid System

Grid System adalah suatu struktur dua dimensi yang didalamnya terdapat serangkaian komponen garis horizontal dan vertikal yang saling melengkapi satu dengan yang lainnya sehingga membentuk banyak interseksi guna penempatan elemen visual dengan baik dan benar dalam suatu komposisi desain (Poulin, 2018, hlm. 74).

(23)

29

Gambar 2.23 Grid System.

Sumber:

https://miro.medium.com/max/1400/1*5pWC3eK3n3Xv0GDDYVTZRA.webp

Selain fungsi fundamental yang diberikan Grid System sebagai acuan tata letak elemen visual dalam merangkai komposisi, terdapat fungsi lain yang diberikan juga yaitu sebagai perantara yang dapat mengoptimalisasikan ritme dan kesatuan visual. Grid System pada era modern dapat dibagi menjadi beberapa jenis sebagai berikut:

1) Manuscript

Grid manuskrip adalah sistem grid yang paling sederhana jika disandingkan dengan jenis-jenis grid modern lainnya, juga biasa dikenal dengan block grid (Poulin, 2018, hlm. 78).

(24)

30

Gambar 2.24 Grid Manuscript.

Struktur grid manuskrip terbagi menjadi beberapa komponen yaitu area persegi panjang sebagai tempat menaruh teks primer, area margin luas di sisi kanan dan kiri, area footer dan header di sisi atas dan bawah, serta area asimetris yang ditempatkan bersebelahan dengan area teks primer (hlm. 79).

2) Symmetrical

Grid simetris adalah sistem grid dimana dalam suatu lembar kertas sebagai perumpamaan, lembar verso yaitu kiri dan recto yaitu kanan memiliki tata letak yang terefleksikan antara satu dengan yang lainnya (Poulin, 2018, hlm. 83).

(25)

31

Gambar 2.25 Grid Symmetrical.

Terlepas dari terdapatnya satu atau banyak kolom, tata letak menggunakan grid simetris akan tetap terlihat seimbang. Hal ini dikarenakan kesamaan secara persis mengenai ukuran area teks, margin, dan elemen pembentuk grid lainnya.

Dalam pengimplementasian sistem grid simetris, margin yang lebar akan menimbulkan kesan keseimbangan, sementara margin yang sempit akan menyajikan kesan tensi atau tegangan tinggi (hlm. 83).

3) Modular

Poulin (2018, hlm. 92) menjelaskan bahwa grid modular merupakan jenis sistem grid yang dibentuk dengan penggabungan banyak kolom horizontal dan vertikal dalam suatu format sehingga membentuk area berbentuk kotak yang

(26)

32

didalamnya dapat diisi dengan elemen visual, menciptakan kesinambungan komposisi untuk teks ataupun gambar dengan tingkat konsistensi tinggi.

Gambar 2.26 Grid Modular.

Grid modular bekerja dengan sangat baik untuk tata letak desain yang memerlukan adanya hierarki visual melalui perbedaan ukuran blok gambar dan teks sesuai dengan tingkat kepentingannya. Sistem grid ini pada mulanya tercipta sebagai ekstensi dari prinsip desain yang dulu telah ada seperti Bauhaus dan International Typographic Stlye pada tahun 1950 (hlm. 92).

4) Asymmetrical

Poulin (2018, hlm. 97) mendefinisikan grid asimetris sebagai sistem grid dimana dalam suatu lembar, halaman verso dan recto memiliki keseluruhan struktur yang berbeda, tidak

(27)

33

seperti pada penjelasan grid simetris. Sistem grid ini biasanya memberi kesan dimana pada suatu halaman, satu bagian akan terlihat lebih berat dibandingkan halaman lainnya.

Gambar 2.27 Grid Assymetrical.

Karakter utama pada sistem grid ini adalah halaman verso dengan beberapa kolom teks vertikal, tetapi bagian recto hanya memiliki satu area primer untuk diisi oleh elemen gambar. Posibilitas pembentukan sistem grid asimetris tidak pernah bisa dibatasi, sebab tidak ada kesamaan yang bersifat wajib dalam kedua sisi lembar (hlm. 97).

5) Baseline

Poulin (2018, hlm. 102) menjelaskan bahwa baseline grid adalah suatu sistem grid yang terdiri atas rangkaian garis horizontal dengan jarak yang konsisten. Baseline grid dapat diimplementasikan dalam komposisi desain untuk mempermudah proses penentuan peletakan elemen teks, bentuk, dan lainnya.

(28)

34

Gambar 2.28 Grid Baseline.

Baseline grid akan bekerja dengan sangat optimal jika digunakan untuk komposisi desain yang memiliki teks naratif yang panjang. Struktur sistem grid seperti ini juga memungkinkan adanya interval ukuran typeface. Secara mendasar, baseline grid menyediakan lokasi penempatan elemen visual yang jelas, dan dapat dimodifikasi sesuai dengan kebutuhan desainer (hlm. 105).

6) Hierarchical

Poulin (2018, hlm. 106) menjelaskan bahwa grid hierarkial memiliki karakteristik yaitu tidak terlihat seperti grid pada umumnya, namun pada sisi lainnya juga memiliki keunggulan dimana desainer grafis akan mendapat fleksibilitas tinggi dalam mengatur dan menyusun elemen visual berdasarkan tingkat kepentingan atau prioritasnya.

Seperti contohnya untuk teks judul dapat ditempatkan pada area grid yang paling besar, dilanjut dengan teks atau gambar sekunder, hingga ke elemen visual yang tidak terlalu penting (hlm. 106).

(29)

35

Gambar 2.29 Grid Hierarchial.

Grid hierarkial optimal untuk digunakan dalam keperluan proyek desain dengan luaran yaitu product packaging, poster promosi, dan online website (hlm. 106).

2.2 User Interface (UI) dan User Experience (UX)

Bank et al. (2014) memberikan penjelasan bahwa web user interface adalah istilah koneksi antara pengguna dan pengalaman tertentu dari suatu media. Web user interface yang baik dalam suatu media akan memberi impresi pertama dan lanjutan yang baik sehingga tersimpan dalam memori pengguna secara jangka panjang. Web user interface yang ternilai baik dapat dilihat dari kesinambungan antara estetika visual yaitu user interface dan kehalusan alur interaktivitas yaitu user experience di dalamnya.

2.2.1 User Interface (UI)

Bank et al. (2014, hlm. 10) memberi penjelasan bahwa User interface merupakan bentuk visualisasi atau desain yang tersusun dari rangkaian elemen-elemen desain dan membentuk satu kesatuan web page. User interface tidak memiliki acuan tetap yang mengharuskan hadirnya seleksi

(30)

36

elemen desain tertentu, tetapi dapat disimplifikasikan ke dalam beberapa elemen-elemen sebagai berikut:

1) Input

Input adalah elemen web page yang meliputi kolom teks, kolom data, menu dropdown, kotak centang, tombol primer dan sekunder, serta tombol pengaturan.

2) Navigation

Navigation merupakan elemen web page yang akan membantu pengguna dalam bernavigasi dalam media seperti sliders, kolom pencarian, urutan halaman, menu sidebar, dan ikon.

3) Sharing

Sharing dalam web page meliputi tombol follow, like, share, dan invite.

4) Information

Information adalah elemen dalam web page yang meliputi seluruh konten teks, kotak pesan, notifikasi, progress bar, serta konten visual.

Gambar 2.30 User Interface.

Sumber: https://miro.medium.com/max/1400/1*zLAIV25gzpfJFR7QehnN5g.webp

Deacon (2020, hlm. 34) menjelaskan bahwa user interface dapat didefinsikan sebagai suatu hubungan interaktif antara pengguna dan perangkat lunak seperti aplikasi secara nyaman. Desain user interface sangat

(31)

37

mempertimbangkan keseluruhan tampilan, kenyamanan, dan kemudahan interaksi sebuah media. Desainer user interface akan memperhatikan pemilihan skema warna, tata letak, tombol, ikon, dan konten visual yang ada pada media.

2.2.1.1 Prinsip Desain User Interface

Prinsip desain user interface terbagi ke dalam empat bagian utama sebagai berikut (Bank et al., 2014, hlm. 53-70):

1) Input Controls

User interface yang baik memiliki banyak opsi yang dapat dikontrol oleh pengguna, akan tetapi tampilan opsi yang banyak akan memadatkan halaman website sehingga tata letak terlihat ramai dan tidak memiliki white space. Solusi dari hal ini adalah membuat option tab yang dapat dimunculkan hanya pada saat pengguna ingin melakukan aksi dari skenario tertentu.

Gambar 2.31 Text Field.

Sumber:

https://miro.medium.com/max/1400/1*tiXB_6Nz_uiJeMLKlwvu4w.we bp

Salah satu elemen input control lainnya yang diperlukan adalah text field. Modifikasi elemen text field berdasarkan identitas visual brand dapat meningkatkan personalisasi elemen tersebut sehingga bahaasa desain lebih kohesif.

(32)

38

Gambar 2.32 Input Field.

Sumber:

https://t4.ftcdn.net/jpg/03/86/85/77/240_F_386857735_iEZ5y3LVde9n wDkBb3wnt5PuEE1ylWRJ.jpg

Apabila dalam suatu halaman website pengguna diharuskan untuk mengisi kolom input field, akan lebih optimal apabila secara pengaturan ketika pengguna masuk dalam halaman tersebut, cursor sudah secara otomatis terarah pada kolom input field sehingga pengguna dapat dengan langsung mengisi.

2) Navigations

Navigasi adalah prinsip yang harus diimplementasikan dalam user interface sehingga pengguna tidak tersesat dalam mengoperasikan produk. Prinsip navigasi kemudian dibagi ke dalam dua poin yaitu konteks dan konsistensi.

(33)

39

Gambar 2.33 Navigation Bar.

Sumber: https://assets.materialup.com/uploads/ac47c413-f782-4f7e- bd67-afcbb9a74e83/preview.png

User harus selalu mengetahui dimana mereka berada dalam website. Contohnya seperti menu bar yang diberi highlight dan heading yang tidak menghilang. Sistem navigasi harus dibuat dengan konsisten, hal ini berarti header atau menu bar dalam suatu user interface tidak berpindah-pindah ketika pengguna bergerak dari satu halaman ke halaman yang lain.

Kemudian untuk memperjelas konteks dan konsistensi dari sistem navigasi suatu produk, terdapat dua aspek yang harus dipertimbangkan yaitu konten dan penempatan.

(34)

40

Gambar 2.34 Konten Navigation Bar.

Sumber: Web UI Design Best Practices (2014).

Konten dalam halaman website sebaiknya sudah dalam tahap final sebelum berlanjut ke tahapan penambahan sistem navigasi, beberapa konten website adalah sebagai berikut:

a) Menu, yaitu sistem dasar yang dapat digunakan pengguna untuk menemukan konten-konten tertentu.

b) Breadcrumbs, yaitu sistem navigasi yang memberitahu pengguna halaman apa saja yang telah dilalui sebelum akhirnya sampai pada titik tertentu.

c) Filters, yaitu opsi pengaturan yang memungkinkan pengguna dapat mengkonsumsi halaman konten yang berat menjadi lebih sederhana.

d) Links, yaitu elemen navigasi yang membantu pengguna dalam memahami koneksi antara satu konten dengan yang lainnya.

(35)

41

Gambar 2.35 Penempatan Navigation Bar.

Sumber: Web UI Design Best Practices (2014).

Penempatan sistem navigasi menjadi penting bagi pengguna sebab keleluasaan dan kejelasan yang diberikan. Contohnya seperti elemen navigasi filter yang terletak secara horizontal pada bagian atas halaman website dan dibuat lebih kecil dibandingkan dengan keseluruhan ruang konten, hal ini memungkinkan pengguna untuk bernavigasi tanpa mengganggu kenyamanan konsumsi konten. Sistem navigasi dapat ditempatkan secara horizontal atau vertical berdasarkan tata letak dan tujuan dibalik penempatannya.

Misalnya sistem navigasi vertical lebih optimal apabila digunakan pada halaman website yang memanjang kebawah.

(36)

42

3) Animations

Animasi adalah elemen fungsional dalam web user interface yang dapat memberi tingkat imersi yang tinggi dan menambah estetika visual website. Terdapat tiga alasan utama mengapa animasi adalah elemen krusial dalam user interface:

a) The eye is drawn to movement

Penambahan animasi pada elemen atau area tertentu dalam halaman website akan secara efektif meningkatkan kontras dan point of interest pengguna.

b) Establishing connections

Animasi dapat digunakan sebagai penjelas transisi dari suatu aksi yang dilakukan pengguna dalam user interface.

c) Cues and clues

Animasi dapat digunakan sebagai indikator bahwa pengguna telah menyelesaikan atau berhasil melakukan aksi tertentu, seperti contohnya setelah pengguna menambahkan item pada keranjang pembelian maka akan muncul animasi yang mengindikasikan hal tersebut berhasil dilakukan.

Gambar 2.36 Animasi Parallax pada Homepage Website.

Sumber: www.urroacademy.com

(37)

43

Desainer UI dapat mengintegrasikan animasi dalam user interface dengan tujuan tertentu seperti misalnya untuk menambah imersi ketika pengguna sedang melakukan scrolling pada halaman utama sehingga atensi mereka tetap terjaga, atau animasi munculnya menu dropdown ketika cursor pengguna sedang berada di atas opsi tersebut.

4) Default Settings

Pengaturan dasar menjadi prinsip penting dalam pembuatan user interface sebab pengguna akan terfokus pada fungsionalitas utama dari produk dan bukan mengatur kembali tampilan dan preferensi yang ada. Oleh karena itu user interface yang ada harus sudah memiliki default settings yang tepat sebelum diluncurkan ke publik. Cara lain yang dapat dilakukan ialah membuat skenario dimana pengguna akan diarahkan untuk menentukan sendiri pengaturan seperti apa yang diinginkan.

5) Guided Actions

Guided Actions merupakan aksi persuasif yang dilakukan baik secara aktif maupun pasif oleh user interface terhadap pengguna sehingga mereka melakukan aksi tertentu. User interface yang baik mampu mengintegrasikan hal ini untuk memenangkan loyalitas pengguna.

(38)

44

Gambar 2.37 Tombol Call to Action Persuasif.

Sumber: https://lynk.id/raihanslife/aDkBPLA

Contohnya seperti tombol call to action yang berisi kalimat ajakan mengunduh atau membeli kepada para pengguna, guided actions berperan sebagai pemandu pengguna untuk melakukan aksi tertentu sehingga mereka tidak hanya berdiam dan tidak memulai skenario.

6) Visual and Language Clarity

Penggunaan elemen visual dan pembendaharaan kata yang jelas dan konsisten akan mempermudah pengguna untuk melakukan aksi tertentu. User interface sebaiknya selalu

(39)

45

mempertimbangkan prinsip ini untuk meningkatkan konversi dan atau loyalitas pengguna pada produk.

Gambar 2.38 Upload Menu.

Sumber: Web UI Design Best Practices (2014).

Contoh dari prinsip kejelasan visual dan bahasa adalah menu pengunggahan foto dengan beberapa opsi yaitu unggah melalui dokumen komputer, drag and drop, menuliskan URL link, dan copy paste. Kejelasan visual dan tata bahasa menjadi penting sehingga pengguna dapat dengan mudah menentukan opsi mana yang akan mereka pilih dan segera menyelesaikan aksi tersebut. Kemudian terdapat beberapa panduan dalam memperkuat prinsip ini yaitu:

a) Simplicity is key

User interface yang baik tidak memberikan terlalu banyak opsi atau kontrol kepada pengguna sehingga menghambat desisi pengguna dalam penggunaannya.

b) Check your wording

Penggunaan diksi atau pembendaharaan kata yang tepat akan mempermudah pengguna dalam memahami fungsi suatu tombol, navigasi, dan area tertentu.

(40)

46

c) Avoic contradictions

Penggunaan kata harus sesuai dengan instruksi visual.

d) Avoid overstating

Penggunaan terlalu banyak kata untuk menjelaskan fungsi tertentu akan menimbulkan kebingungan para pengguna.

e) Hover explanations

Sistem penjelasan suatu ikon atau tombol tertentu yang muncul ketika cursor atau pointer pengguna sedang berada pada elemen-elemen tersebut akan mempermudah pemahaman pengguna dan mengurangi ambiguitas ikon atau elemen abstrak.

2.2.1.2 Proses Desain User Interface

Menurut Deacon (2020, hlm. 13-15), tahapan prosedural perancangan user interface dapat dibagi ke dalam beberapa poin sebagai berikut:

1) Study the idea of the products and design requirements Pada tahap pertama ini desainer diharuskan untuk memahami secara jelas produk seperti apa yang hendak didesain, logika produk, dan alasan mengapa orang-orang membutuhkan produk tersebut. Apabila konsep dasar dari desain user interface tidak terdefinisikan dengan jelas, maka keseluruhan prosesnya dapat berjalan dengan tidak efektif.

2) Potential End-Users Research

Riset mendalam terhadap target audiens menjadi penting karena informasi melalui mereka terkait kebutuhan, kendala, dan motivasi dapat dijadikan sebagai pusat utama dari proses desain yang dilakukan.

(41)

47

3) Locate a Group of People Matching End Users

Pada tahap ini desainer bertemu dengan target audiens dan memberi serangkaian pertanyaan dengan tujuan untuk mengetahui keinginan inti mereka terkait dengan produk yang nantinya akan berperan sebagai solusi akan hal tersebut.

4) Create use case and test the cases

Pembuatan skenario penggunaan suatu produk menjadi penting agar end-users atau target audiens dapat dengan mudah mengikuti alur uji coba produk dan memberi masukan atau saran yang sesuai dengan batasan yang diterapkan desainer.

5) Test and Evaluate

Tahap ini merepresentasikan proses iterasi yaitu melakukan user testing dan mengevaluasi hasil desain berdasarkan masukan dari calon end-users.

6) Implement the Design

Hasil desain yang sudah final kemudian akan diuji cobakan kembali dalam bentuk yang lebih kecil seperti uji coba berdasarkan satuan skenario, level, dan lain sebagainya sebelum masuk ke tahap uji coba dengan skala yang lebih besar.

2.2.1.3 Organisasi Visual User Interface

Luke wroblewski yang dikutip dari Bank et al. (2014) menjelaskan bahwa presentasi visual dalam web user interface adalah hal yang esensial karena beberapa poin alasan sebagai berikut:

1) Informing Users

User interface secara optimal berperan sebagai pemandu pengguna yang mengantarkan mereka dari satu aksi ke aksi berikutnya tanpa hambatan. Contohnya seperti halaman skenario pembayaran yang di dalamnya terdapat konten-

(42)

48

konten serta tombol call to actions yang akan mengantarkan mereka ke tahap selanjutnya.

2) Communicating Content Relationships

User interface harus dapat menyampaikan pesan visual sesuai dengan preferensi pengguna dalam mengurutkan prioritas informasi. Contohnya seperti dalam halaman beranda website, kategori terletak di atas, konten unggulan terletak di tengah, dan kategori tambahan terletak di bagian bawah atau footer.

3) Creating Emotional Impact

User interface tidak hanya dirancang oleh desainer agar dapat memberi pengalaman pengguna yang baik, tetapi juga dapat diingat secara jangka panjang. Contohnya seperti user interface suatu website dengan tata letak dan visual yang sangat menarik perhatian sehingga pengguna juga tertarik untuk melakukan eksplorasi yang jauh lebih mendalam terhadap website tersebut.

Kemudian, berikut adalah empat poin yang dapat membantu efektivitas organisasi visual dalam pembuatan web user interface:

1) Pola Membaca

Dalam suatu artikel prinsip visual, Alex Bigman yang dikutip dari Bank et al. (2014) memberikan penjelasan mengenai dua pola membaca dari kiri ke kanan yang dominan secara publik yaitu F-Pattern dan Z-Pattern.

(43)

49

Gambar 2.39 F-Pattern.

Utamanya untuk website yang memiliki banyak konten berbentuk teks seperti blog, pengguna akan mengkonsumsi konten teks tersebut dengan menggunakan pola baca bentuk

“F” yang dimulai dengan melakukan pemindaian secara vertikal bagian kiri konten teks untuk mencari kata kunci yang terletak di awal paragraf, kemudian setelah kata kunci ditemukan maka pengguna akan membaca secara formal yang membentuk garis horizontal dari kiri ke kanan.

Berdasarkan oleh riset yang dilakukan oleh Jakob Nielson mengenai pola pemindaian dari 232 user saat mengkonsumsi konten pada website, ditemukan tiga ciri utama dalam pola baca “F” yaitu jarang sekali terdapat pengguna yang mengkonsumsi keseluruhan teks, dua paragraf utama adalah paragraf yang terpenting, dan pembendaharaan kata pada awal paragraf dan bullet points menjadi sangat penting (Bank et al., 2014, hlm. 35).

(44)

50

Gambar 2.40 Z- Pattern.

Pola baca bentuk “Z” dapat terjadi pada website yang tidak didominasi oleh konten teks pada bagian tengahnya.

Contohnya dalam suatu website, pertama pengguna akan mulai memindai secara horizontal dari kiri ke kanan yang biasanya dilakukan terhadap menu, category bar, atau header. Kemudian setelah sampai di ujung kanan halaman, mata pengguna akan beralih ke bawah dan mulai memindai kembali secara horizontal dari kiri ke kanan (Bank et al., 2014, hlm. 37-38). Pola baca bentuk “Z” sangat optimal apabila diperuntukkan untuk website yang mengutamakan simplisitas dan tombol call to action. Pola baca ini juga dapat diekstensikan dalam halaman website apabila perlu dilakukan visualisasi dari atas sampai bawah sebelum akhirnya masuk pada bagian call to action.

(45)

51

2) Penciptaan Kontras

Dalam pengembangan user interface suatu website, penciptaan kontras menjadi krusial untuk memperjelas hierarki visual. Kontras dapat tercipta apabila terdapat dua elemen visual dengan ciri berbeda yang berdekatan antara satu sama lain, dalam user interface design hal ini dapat berbentuk warna, tekstur, bentuk, arah gerak, ataupun bentuk.

Gambar 2.41 Elemen Kontras.

Pembuatan ukuran teks dan warna alternatif dapat secara langsung menciptakan kontras dalam user interface. Seperti contohnya kombinasi antara teks terang dan bentuk dengan warna gelap sebagai tombol call to action akan memisahkan hal tersebut dari halaman yang latarnya terdiri dari warna terang. Tombol call to action yang kontras tersebut apabila kemudian dikombinasikan dengan tata letak yang memiliki pola baca “Z” akan memberi hierarki yang jelas akan tombol tersebut (Bank et al., 2014, hlm. 40).

(46)

52

3) Penggunaan Elemen Visual

Visual halaman website akan terlihat optimal apabila dikombinasikan dengan elemen visual seperti warna, ukuran, dan area.

Gambar 2.42 Elemen Visual pada User Interface.

Sumber: https://designshack.net/wp-content/uploads/Financial-App-UI- Design-Templates.jpg

Variasi pengaturan warna dapat menciptakan hierarki visual dalam website, seperti contohnya warna cerah akan lebih mendominasi apabila disandingkan dengan warna pudar.

Desainer user interface dapat memanfaatkan hal ini untuk mengarahkan atensi pengguna terhadap area atau tombol tertentu. Selain itu penggunaan skema warna yang selaras dengan tujuan website akan dengan pesat meningkatkan mood atau nuansa.

(47)

53

Sumber: https://uxmovement.com/wp- content/uploads/2019/03/cta_button-techniques.png

Contoh dari penerapan warna sebagai alat pengarah hierarki pengguna dapat berupa tombol call to action yang diberi warna cerah atau pekat, sementara itu latar halaman website diberi warna yang lebih mute atau pudar. Variasi ukuran dalam halaman user interface dapat digunakan sebagai alat modifikasi hierarki yang telah ada. Contohnya seperti pada suatu halaman user interface, elemen gambar yang terletak di bagian kanan bawah dengan ukuran besar kemungkinan besar akan menjadi konten pertama yang dikonsumsi oleh pengguna. Panduan utama mengenai ukuran teks dalam halaman website terletak pada rentang 18 sampai 29 pixels dan ukuran bodi teks yaitu 12 sampai 14 pixels. Ukuran- ukuran ini tidak bersifat wajib, tetapi merupakan acuan yang memberi pesan pada para desainer untuk menjaga proporsi dalam pengembangan user interface.

(48)

54

Sumber:

https://miro.medium.com/max/952/0*fmOjeVJScWXO0De8.png

User interface yang baik memiliki ruang bernapas yang cukup atau dengan kata lain tidak teralu padat secara penataan elemen visual. Menghilangkan elemen-elemen visual yang tidak terlalu diperlukan akan dengan efektif meningkatkan hierarki visual dan penyampaian pesan kepada pengguna. Walaupun ruang bernapas yang ada dalam website tidak mempengaruhi performa pengguna yang sedang melihat, tetapi hal ini mempengaruhi tingkat kepuasan dan pengalaman pengguna. Contohnya yaitu penggunaan white space dan margin besar untuk memisahkan satu kesatuan konten dengan yang lainnya akan mempermudah pengguna dalam mengkonsumsi konten tersebut.

(49)

55

4) Uji Coba Hierarki Visual

Salah satu cara untuk menguji coba efektivitas hierarki visual dari user interface yang telah dirancang adalah dengan menggunakan teknik blur. Caranya adalah lihat user interface yang sudah jadi tapi dalam versi kabur atau diberi blur filter, sehingga desainer ataupun sampel calon pengguna yang mengevaluasi dapat menentukan apakah hierarki visualnya sudah dengan mudah dicerna bahkan dalam kondisi interface yang kabur.

2.2.2 User Experience (UX)

User Experience dapat didefinisikan sebagai serangkaian tahapan pembuatan produk yang dilandaskan pada kebutuhan dan motivasi utama user atau pengguna. User experience secara dasar perlu didesain dengan rapih dan teratur sehingga pengguna dapat dengan mudah mencapai tujuan mereka melalui pengalaman yang halus dan seiring berjalannya waktu akan tercipta loyalitas antara pengguna dengan bisnis (Deacon, 2020, hlm. 7-8).

2.2.2.1 User

User atau pengguna adalah variabel yang akan berhubungan secara konstan dengan bisnis melalui produk tertentu. Impresi pertama user terhadap user experience dari produk sangat penting, sehingga hal ini menjadikan user sebagai prioritas utama dalam bisnis yang bergerak di bidang pengembangan user experience.

2.2.2.2 Prinsip Desain User Experience

User Experience dapat diartikan sebagai titik krusial dalam proses penciptaan dan pengembangan lanjutan suatu produk atau media (Deacon, 2020, hlm. 29-31). Prinsip pembuatan user experience dapat diklasifikasikan sebagai berikut:

(50)

56

1) Fokus terhadap pengguna

Tujuan utama dari bisnis adalah kepuasan dan kebahagiaan user atau pengguna, terutama yang merupakan target audiens. Oleh karena itu, dalam mendesain user experience dari suatu produk akan lebih optimal apabila desain yang hendak dibuat didasarkan pada kebutuhan calon pengguna seperti ekspektasi, motivasi, dan permasalahan yang dialami saat ini.

2) Fokus terhadap bisnis

Proses pengembangan user experience selain memprioritaskan kepuasan dan kebahagiaan pengguna sebagai tujuan akhirnya, juga harus menyesuaikan dengan target atau tujuan keuntungan suatu bisnis sehingga tercipta keseimbangan.

3) Kemudahan Pemahaman

Konten dari user experience harus dibuat dengan sederhana, jelas, dan tidak menimbulkan ambiguitas. Kemudian akan lebih optimal apabila dalam suatu halaman, desainer UX membagi konten yang terbilang panjang ke dalam beberapa konten-konten kecil sehingga mudah dicerna oleh pengguna.

4) Kejelasan

Kejelasan pesan dari user experience yang telah didesain menjadi sangat krusial bagi pengguna. User experience dengan tata letak yang rapih dan visual yang tidak ambiguitas akan mempermudah pengguna dalam bernavigasi dalam suatu media.

5) Familiaritas

Prinsip familiaritas dapat dilihat sebagai pelengkap dari prinsip kejelasan. Hal ini dikarenakan ketika desainer UX mendesain user experience secara tepat dan jelas, maka user

(51)

57

akan merasa familiar dengan setiap tata letak dari halaman- halaman yang ada dalam media atau web page.

6) Desain Berdasarkan Data

Desain user experience yang optimal terbentuk bukan hanya karena seorang desainer yang menciptakan hal tersebut, akan tetapi penciptaan user experience yang dilandaskan pada serangkaian data yang mendukung desisi dalam pembuatan desain tersebut. Data yang dimaksud dapat bersifat kualitatif atau kuantitatif, kemudian diambil melalui sampel user atau bahkan bisnis. Data dapat memberi keuntungan kepada dua belah pihak yaitu user dan bisnis, sehingga akan meningkatkan engagement dan retention.

7) Validasi Desain

Proses iterasi yang dilakukan terhadap desain user experience dalam tahap finalisasi produk adalah hal krusial.

Hal ini dikarenakan sebelum memasuki tahap lanjutan dan publikasi produk, desain user experience yang ada harus diuji coba terlebih dahulu sehingga dapat diketahui apakah telah memenuhi tujuannya atau belum. Terdapat beberapa metode validasi desain seperti pengulasan oleh pakar, pembimbingan kognitif, ulasan formal, dan uji coba sumatif.

8) Konsistensi Desain

Konsistensi adalah salah satu prinsip utama dari desain UX.

User experience yang baik akan memberi pengalaman pengguna yang halus dan konsisten. Apabila terdapat inkonsistensi dalam aspek visual atau interaktivitas, hal tersebut dapat membuat pengguna menjadi kebingungan dan memperpanjang waktu pembiasaan diri pengguna terhadap media. Konsistensi desain dapat membantu meningkatnya

(52)

58

retensi, kredibilitas, dan kepercayaan pengguna terhadap bisnis.

9) Fleksibilitas Teknologi

User Experience harus dapat diadaptasikan dengan teknologi yang terus berkembang seiring berjalannya waktu. Bisnis yang mampu membuat produk mereka adaptif terhadap perkembangan teknologi akan memberi pengguna user experience yang baik.

2.2.2.3 Batasan User Experience

Hubungan interaktivitas antara pengguna dengan sebuah perusahaan dapat diklasifikasikan menjadi tiga tingkatan yaitu (Deacon, 2020, hlm. 12):

1) The Single Interaction Level

Level interaktivitas yang meliputi pengalaman seorang pengguna dengan perusahaan melalui satu produk dalam satu perangkat untuk menyelesaikan alur pengalaman tertentu.

Contohnya yaitu menerima bantuan melalui perangkat telepon dan melakukan klaim asuransi di website penyedia.

2) The Journey Level

Level interaktivitas yang mencakup pengalaman seorang pengguna dengan suatu perusahaan atau organisasi dalam menyelesaikan tujuan tertentu melalui lebih dari satu kanal atau perangkat interaktif. Contohnya yaitu menerima notifikasi surat elektronik dan melakukan pengecekan terhadap hal tersebut.

3) The Relationship Level

Level interaktivitas antara pengguna dengan perusahaan yang paling kompleks, dapat disebut juga sebagai Customer Experience Level. Contoh utamanya seperti seorang pengguna yang melakukan riset terhadap produk perusahaan,

(53)

59

membeli produk, menggunakan produk, dan menindaklanjuti penggunaan produk tersebut.

2.2.2.4 Manfaat User Experience

Deacon (2020, hlm. 12) menyatakan bahwa user experience telah menjadi hal yang sangat penting dalam era kontemporer ini.

User experience yang dirancang dengan baik dapat memenangkan loyalitas pelanggan dan meredefenisikan keinginan dan kebutuhan pelanggan ketika sedang menggunakan produk bisnis.

2.3 Situs Web

Landa (2013, hlm. 331) menjelaskan bahwa World Wide Web atau yang lebih sering dikenal dengan website merupakan serangkaian halaman atau file yang dikoneksikan bersama dan memiliki aksesibilitas yang universal.

2.3.1 Marketplace

Marketplace adalah suatu media berbasis website yang ditujukan sebagai area bisnis dan transaksi jual beli. Marketplace memberi manfaat yang seimbang antara pihak pembeli dan penjual, dimana pembeli dapat mencari produk barang dan atau jasa sesuai kriteria mereka melalui pilihan supplier yang tersedia dalam suatu marketplace, sementara para penjual dapat mengetahui pihak penjual baik individu ataupun kelompok yang memiliki minat tinggi terhadap produk mereka (Opiida, 2014).

2.3.2 Jenis-jenis Marketplace

Adani (2020) memberikan penjelasan dimana marketplace dapat dibagi ke dalam dua jenis sesuai dengan cara kerja dan fungsinya:

1) Marketplace Murni

Jenis marketplace yang satu ini memiliki ciri dimana para penjual atau pihak supplier bertanggung jawab penuh perihal keperluan pengelolaan informasi produk, metode pembayaran, dan secara garis

(54)

60

besar transaksi jual beli. Marketplace hanya menjadi fasilitator atau wadah yang menampung supplier di dalamnya.

2) Marketplace Konsinyasi

Jenis marketplace yang satu ini memiliki ciri dimana para penjual hanya berkewajiban untuk membuat deskripsi atau rincian produk dan mengunggah produk tersebut ke marketplace, kemudian keseluruhan proses transaksi akan dipertanggungjawabkan oleh marketplace.

2.3.3 Manfaat Marketplace

Aini (2022) menjelaskan bahwa marketplace secara garis besar memberi manfaat sebagai berikut:

1) Mendapatkan Konsumen

Melalui marketplace, suatu usaha dapat menjangkau lebih banyak calon konsumen karena dalam alurnya konsumen akan melakukan eksplorasi dahulu terhadap barang yang ingin mereka beli.

2) Meningkatkan Brand Awareness

Fitur yang tersedia dalam suatu marketplace seperti search dan keyword memungkinkan suatu usaha lebih dikenal dan diingat oleh para calon konsumen.

3) Meningkatkan Kepercayaan Konsumen

Konsumen yang sudah percaya dengan profesionalitas serta kualitas dari suatu marketplace akan lebih cenderung untuk membeli setiap keinginan atau kebutuhan mereka dalam marketplace tersebut, sehingga hal ini juga berdampak pada kepercayaan konsumen dengan para penjual dalam marketplace.

2.3.4 Pengembangan Marketplace Berbasis Website

Dalam pembuatan website, terdapat setidaknya sepuluh tahapan yang harus dilalui meliputi penyusunan rencana proyek, pembuatan creative brief, konfigurasi struktur website, outline konten dalam website, membuat konsep desain, pengembangan visual pada website seperti pengintegrasian sistem

(55)

61

grid