BAB II TINJAUAN PUSTAKA

(1)

Perancangan UI/UX Website Portofolio Khusus Penyandang Disabilitas Mental, Paramita 6

Tanarya, Universitas Multimedia Nusantara

BAB II

TINJAUAN PUSTAKA

2.1. Desain

Menurut Landa (2014, hlm. 1), desain grafis memiliki pengertian sebagai bentuk dari komunikasi visual yang digunakan untuk menyampaikan pesan dan informasi bagi orang yang melihatnya. Visual tersebut menjadi representasi dari ide yang memiliki dasar kreasi, pemilihan, dan penyusunan elemen visual.

2.1.1 Elemen Desain

Desainer merupakan orang-orang yang memiliki minat serta menikmati proses pembuatan gambar. Orang-orang ini minimal memiliki pengetahuan mengenai elemen dan prinsip yang digunakan dalam perancangan visual.

Elemen desain ini dapat dimanfaatkan dengan sebaik mungkin untuk mengkomunikasikan dan mengekspresikan sebuah perancangan. (Landa, 2014, hlm, 19).

1. Garis

Titik merupakan unit terkecil dari sebuah garis yang biasa dikenal dengan bentuk yang melingkar. Garus adalah titik yang bersambung dan dianggap sebagai jalan untuk titik bergerak. Fungsi garis dalam desain di antaranta adalah menentukan batas tepi dari sebuah desain, dan menentukan bentuk atau pola.

Gambar 2.1 Contoh garis

Sumber: https://www.youtube.com/watch?v=v2m2LdZ2Y9k

(2)

2. Bentuk

Garis luar atau garis tepi dapat membuat sebuah bentuk. Bentuk dapat didefinisikan sebagai jalur yang tertutup. Bentuk pada dasarnya memiliki dua dimensi dengan panjang dan lebar yang dapat diukur. Tiga bentuk utama yaitu segitiga, persegi, dan lingkaran. Dari setiap bentuk ini dapat membentuk sebuah bentuk yang volumetrik menjadi kubus, piramida, dan bola.

Gambar 2.2 Contoh bentuk

Sumber: https://dribbble.com/shots/12096701-Patterns

3. Figure dan Ground

Figure dan ground merupakan ruang positif dan negatif yang merupakan prinsip dasar dari persepsi visual. Dengan adanya elemen ini, maka dapat menimbulkan makna yang berbeda di antara dua objek atau lebih dalam sebuah desain. Elemen ini dapat menimbulkan makna yang berbeda di mata audiens.

Gambar 2.3 Contoh figure dan ground

Sumber: https://www.behance.net/gallery/32796091/Figure-Ground- Relationship?tracking_source=search_projects_appreciations%7Cfigure%20ground

(3)

4. Warna

Warna merupakan elemen desain yang memiliki kekuatan. Untuk melihat warna, maka diperlukan cahaya. Warna yang terlihat oleh mata merupakan cahaya yang dipantulkan oleh objek ke mata. Warna yang dipantulkan oleh objek merupakan warna subtraktif, sedangkan warna yang dihasilkan oleh layar digital disebut sebagai warna aditif.

Gambar 2.4 Contoh warna

Sumber: https://www.dulux.co.nz/how-to/how-to-use-colour/how-to-use-a-colour- wheel

5. Tekstur

Tekstur adalah gambaran dari sebuah permukaan yang dapat dirasakan saat dilihat atau diraba sehingga bisa menimbulkan dimensi. Tekstur sering dinyatakan sebagai motif atau corak dari permukaan benda.

Dengan adanya tekstur, audiens dapat melihat kualitas dar permukaan benda. Berdasarkan jenisnya, tekstur terbagi menjadi dua yaitu tekstur visual dan tekstur taktil. Tekstur visual adalah ilusi yang dibuat dengan tangan namun memiliki efek timbul karena menyerupai tekstur nyata.

Sedangkan tekstur taktil merupakan tekstur yang dapat diraba dan dirasakan secara langsung.

(4)

Tanarya, Universitas Multimedia Nusantara Gambar 2.5 Contoh tekstur

Sumber: https://www.grafis-media.website/2017/03/8-unsur-unsur-seni-rupa-dan- contohnya.html

2.1.2 Prinsip Desain

Untuk merancang setiap proyek desain, prinsip-prinsip desain dasar perlu diketahui dan digunakan. Penggunaan prinsip-prinsip desain dapat diterapkan saat mengkombinasikan pengetahuan yang dimiliki mengenai konsep, tipografis, gambar dan visualisasi, serta elemen formal sebagai pembentuk kosakata (Landa, 2014, hlm. 29).

2.1.2.1 Format

Format merupakan batas-batas yang ditentukan untuk sebuah perancangan. Format juga dapat berarti ukuran dari sebuah bidang atau substrat dalam sebuah perancangan desain grafis, seperti ukuran kertas, layar telepon genggam, billboard, dll. (hlm. 31).

1) Keseimbangan

Keseimbangan merupakan stabilitas yang diciptakan melalui distribusi elemen visual dengan berat yang yang merata di setiap sisi dari sebuah pusat di tengah-tengah.

(5)

a) Simetris

Keseimbangan simetri adalah distribusi setara dari berat visual, seperti adanya cerminan dari elemen yang setara di setiap sisi pusat, atau bisa juga disebut sebagai simetri refleksi (hlm. 31).

Gambar 2.6 Keseimbangan Simetri dalam Website

Sumber: https://attentioninsight.com/use-balance-in-web-design/

b) Asimetris

Keseimbangan asimetri adalah distribusi setara dari berat visual yang didapatkan dari elemen penyeimbang dengan cara menyeimbangkan sebuah elemen dengan berat elemen penyeimbang tanpa menciptakan cerminan elemen visual di sisi lain dari pusat.

Gambar 2.7 Keseimbangan Asimetri dalam Website Sumber: https://attentioninsight.com/use-balance-in-web-design/

(6)

c) Radial

Keseimbangan radial adalah keseimbangan yang didapatkan melalui kombinasi dari simetris yang beriorientasi secara vertikal dan horizontal. Keseimbangan radial menetapkan satu elemen yang menjadi pusat dari komposisi.

Gambar 2.8 Keseimbangan Radial dalam website

Sumber: https://attentioninsight.com/use-balance-in-web-design/

2.1.2.2 Hierarki Visual

Hierarki visual merupakan salah satu elemen utama dalam desain grafis untuk menginformasikan suatu hal dalam perancangan. Melalui hierarki visual, desainer memandu orang-orang yang melihat perancangan yang telah dibuat. Penyusunan elemen grafis didasarkan kepada emphasis (hlm. 33).

2.1.2.3 Emphasis

Pengertian emphasis adalah penyusunan elemen visual berdasarkan tingkat kepentingan dan penekanan suatu elemen terhadap elemen lainnya sehingga akan memunculkan beberapa elemen yang lebih dominan dan menjadi pusat perhatian. Dengan adanya emphasis, desainer dapat menentukan bagian-bagian yang ingin menjadi perhatian audiens secara bergantian dan berurutan mulai dari yang ingin diperhatikan saat pertama kali, kedua, ketiga, dan seterusnya (hlm. 33).

(7)

2.1.2.4 Ritme

Ritme tidak hanya terdapat dalam musik dan puisi, namun juga terdapat dalam desain grafis. Fungsu ritme dalam desain grafis mirip dengan ketukan pada musik. Repetisi dan pola dalam elemen desain diciptakan untuk mengarahkan mata audiens dan kecepetana mata audiens untuk menangkap elemen visual dalam perancangan desain (hlm. 35).

2.1.2.5 Kesatuan

Kesatuan dalam desain grafis adalah ketika semua elemen grafis dalam sebuah perancangan dapat saling berhubungan dan menyatu sehingga dapat membentuk sebuah desain yang utuh (hlm. 36).

2.1.3 Skala

Dalam dunia desain, skala merupakan ukuran dari elemen grafis yang terlihat berhubungan dengan elemen lainnya. Skala dilihat dari proporsi ukuran berbagai elemen grafis yang terdapat dalam satu perancangan. Skala dapat menimbulkan perbandingan ukutan dari sebuah objek dengan objek lainnya (Landa, 2014, hlm. 39).

2.1.4 Tipografi

Tipografi merupakan salah satu elemen dalam desain dan digunakan dengan mengkombinasukan gambar, diagram, fotografi, dan elemen grafis lainnya.

Pengertian tipografi adalah sebuah elemen penting dalam komunikasi dan desain yang sudah bervolusi selama berabad-abad dan akan terus berevolusi mengikuti perkembangan tekonologi yang dapat mempermudah typeface untuk berkembang (Ambrose & Harris, 2011, hlm. 169).

Menurut Landa (2014, hlm. 44), pengertian typeface adalah desain dari satu set karakter baca yang biasanya terdiri dari huruf, angka, simbol, tanda baca, dan diacritical mark disatukan dengan gaya visual yang konsisten.

(8)

2.1.3.1 Anatomi Huruf

Huruf adalah representasi suara dari sebua simbol yang tertulis atau terucap. Setiap alfabet memiliki ciri khasnya yang harus diperhatikan agar simbol tetap dapat dibaca (hlm. 44).

Gambar 2.9 Anatomi Huruf Sumber: Landa (2014)

1) Ascender

Ascender adalah bagian dari huruf kecil yang berada di atas x-height.

Contoh; b, d, f, h, k, l, dan t.

2) Descender

Descender adalah bagian dari huruf kecil yang berada di bawah x- height. Contoh; g, j, p, q, dan y.

3) Set width

Set width adalah lebar dari sebuah karakter huruf yang diukur dengan satuan picas.

4) Terminal

Terminal adalah goresan terakhir dari sebuah huruf yang tidak memiliki akhir berupa serif.

5) X-height

x-height adalah ketinggian dari huruf kecil tanpa adanya ascender dan descender.

(9)

2.1.3.2 Jenis Typeface

Landa (2014, hlm. 47) mengklasifikasi typeface berdasarkan gaya dan sejarahnya:

Gambar 2.10 Klasifikasi Typeface Sumber: Landa (2014)

1) Old Style atau Humanis

Old style merupakan typeface romawi yang diperkenalkan pada akhir abad ke-15. Ciri khasnya adalah adanya serif yang miring dengan bracket. Contoh typeface old style adalah Garamond dan Times New Roman.

2) Transitional

Transitional adalah typeface yang memiliki serif dan tercipta pada abad ke-18. Transitional juga merupakan transisi dari old style ke typeface modern. Contoh typeface transitional adalah Century dan Baskerville.

3) Modern

Typeface modern adalah typeface ber-serif yang berkembang di akhir abad ke-18 hingga abad ke-19. Typeaface modern memiliki bentuk yang berlawanan dengan old style karena konstruksi hurufnya lebih geometris. Ciri khasnya adalah ketebalan garis yang kontras dan terdapat penekanan di bagian vertikal. Contoh dai typeface modern adalah Didot dan Bodoni.

4) Slab serif

Slab serif merupakan jenis typeface serif yang diperkenalkan pada awal abad ke-19. Ciri khasnya adalah serif dengan berat dan seperti

(10)

lempengan. Contoh dari typeface slab serif adalah Bookman dan Clarendon.

5) Sans serif

Sans serif diperkenalkan pada awa abad ke-19. Typeface ini memiliki ciri khas yang berbeda dari yang pernah ada, yaitu tidak adanya serif dalam jenis typeface ini. Futura dan Helvetica adalah contoh dari typeface sans serif.

6) Blackletter

Blackletter memiliki sebutan lain, yaitu gothic. Ini merupakan typeface yang terinspirasi dari bentuk surat manuskrip di pertengahan abad ke- 13 dan ke-15. Blackletter memiliki ciri khas adanya garis goresan yang berat dan hurufnya rapat dengan beberapa garis lekukan. Contoh typeface blackletter adalah Fraktur dan Rotunda.

7) Script

Script adalah typeface yang mirip dengan tulisan tangan, sehingga dapat dibuat secara manual dengan tangan menggunakan pena, kuas, pensil, atau pena untuk memahat,. Ciri khasnya adalah huruf-huruf di typeface ini berbentuk miring dan bersambung. Contoh dari typeface script adalah Brush Script.

8) Display

Typeface display sudah didesain untuk kebutuhan akan tulisan yang berukuran besar sehingga jika digunakan untuk tulisan yang kecil maka akan sulit untuk dibaca karena cenderung lebih rumit dan dekoratif.

2.1.5 Layout dan Grid

Untuk mendesain sesuatu, desainer menggunakan layout dan grid untuk menyusun semua elemen visual sehingga dapat tertata dengan baik. Layout adalah penyusunan visual berdasarkan gambar dan jenis elemen lainnya pada sebuah halaman cetak maupun digital (Landa, 2014, hlm. 378). Sedangkan grid adalah sebuah panduan dalam mendesain yang terdiri dari garis vertikal

(11)

maupun horizontal dan terbagi menjadi kolom dan margin. (Landa, 2014, hlm.

174).

Fungsi grid adalah menyusun gambar dan tulisan yang ada di halaman cetak maupun digital. Grid digunakan untuk mengatur tata letak yang ada di koran, majalah, website, hingga museum. Adanya grid dapat membantu orang yang mengaksesnya lebih gampang untuk mendapatkan informasi yang dibutuhkan.

Tanpa adanya grid, orang-orang tersebut akan kesulitan untuk fokus dan mencerna isi informasi (Landa, 2014, hlm. 174).

2.1.4.1 Struktur Grid

Landa (2014, hlm. 179) menyatakan bahwa grid memiliki beberapa bagian:

Gambar 2.11 Struktur Grid Sumber: Landa (2014)

1) Margin

Margin merupakan jarak yang ada di bagian atas, kiri, kanan, dan bawah dari sebuah halaman. Fungsinya adalah sebagai bingkai yang membuat konten visual dan tipografi terlihat proporsional. Selain itu, margin juga dapat menjadi akomodasi untuk informasi tambahan, seperti catatan kecil, header dan footer, serta nomor gambar (Landa, 2104, hlm. 175).

(12)

2) Kolom dan interval kolom

Kolom merupakan perataan secara vertikal yang digunakan untuk menyediakan ruang bago tulisan dan gambar. Ketika kolom yang digunakan ada lebih dari satu, maka lebar satu kolom dengan kolom yang lain dapat disamakan atau divariasikan, tergantung dengan penggunaannya. Jarak antar kolom dinamakan interval kolom (Landa, 2014, hlm. 179).

3) Baris

Baris adalaah perataan secara horizontal yang digunakan untuk menyediakan ruang bagi tulisan dan gambar.

4) Flowline

Flowline merupakan haris berfungsi sebagai perata yang membantu menunjang aliran visual secara horizontal. Jika flowline sudah berdiri dengan jarak yang reguler, maka modul terbentuk (hlm. 180).

5) Grid Module

Grid module adalah unit yang terbentuk dari perpotongan antara kolom dan flowline. Fungsinya adalah untuk menempatkan gambar dan tulisan di dalamnya (hlm. 180).

6) Zona Spasial

Zona spasial merupakan sebuah bidang yang terbentuk dari beberapa unit grid module. Zona spasial digunakan untuk mengatur penempatan elemen grafis (hlm. 140).

2.1.4.2 Jenis Grid

Menurut Landa (2014, hlm. 175), grid dibagi menjadi beberapa jenis, yaitu sebagai berikut:

(13)

1) Single-coloumn Grid

Gambar 2.12 Contoh penerapan single-coloumn grid Sumber: https://dribbble.com/shots/16429193-Personal-page

Single-coloumn grid adalah grid yang memiliki struktur dari satu kolom atau satu blok teks yang dikelilingi oleh margin, yaitu bagian kosong yang berada di bagian kiri, kanan, atas, dan bawah dari sebuah halaman.

Contoh dari penggunaan single-coloumn grid adalah halaman dari sebuah novel kontemporer (hlm. 175).

2) Multicoloumn Grid

Gambar 2.13 Contoh penerapan multicoloumn grid Sumber: https://elementor.com/blog/grid-design/

(14)

Multicoloumn grid merupakan grid yang menggunakan beberapa kolom untuk membagi halamannya. Jumlah kolom yang ingin digunakan dapat ditentukan berdasarkan ukuran dan proporsi format (hlm. 177-179).

Gambar 2.14 Penerapan multicoloumn grid pada website

Sumber: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them- 970de4c16e01

3) Modular Grid

Gambar 2.15 Contoh penerapan modular grid Sumber: https://elementor.com/blog/grid-design/

Modular grid tesusun dari berbagai modul. Dengan menggunakan modular grid, sebuah teks dan gambar dapat menempati banyak modul sekaligus. Keuntungan dari penggunaan modular grid adalah informasi yang ingin ditempatkan dalam grid ini dapat dipotong menjadi beberapa modul atau digabung menjadi zona.

(15)

2.1.6 Warna

Warna dapat menimbulkan berbagai respon yang ditunjukkan oleh manusia, tergantung dari budaya, tempat tinggal, jenis kelamin, atau preferensi pribadi masing-masing (Landa, 2014, hlm. 129).

Menurut Widya & Darmawan (2016, hlm. 30), warna merupakan gelombang cahaya yang diterima oleh retina pada mata dan menimbulkan sensasi pada otak. Mata manusia dapat melihat kira-kira 10 juta warna. Untuk melihat warna pada suatu objek, diperlukan cahaya yang cukup. Saat cahaya menyinari suatu objek, sebagian cahaya diserap oleh objek dan sebagian lagi dipantulkan ke mata. Cahaya yang dipantulkan dapat dilihat oleh mata sebagai warna (Landa, 2014, hlm. 23).

2.1.5.1 Warna Primer

Untuk lebih mengerti definisi warna, lebih baik jika bisa memahami peran dari warna dasar yang disebut warna primer. Warna yang digunakan saat merancang suatu desain berbasis layar digital adalah warna merah, hijau, dan biru atau dalam bahasa Inggris red, green, blue (RGB). Ketika ketiga warna tersebut dicampur dengan takaran yang sama, maka akan menciptakan warna cahaya putih sehingga disebut juga dengan sistem warna aditif (Landa, 2014, hlm. 23).

Gambar 2.16 Sistem warna aditif Sumber: Landa (2014)

(16)

2.1.5.2 Nomenklatur Warna

Menurut Landa (2014, hlm. 23), elemen warna terdiri dari tiga kategori:

1) Hue

Hue adalah sebutan nama untuk warna. Contohnya adalah merah atau hijau, biru atau oranye. Dalam temperatur, hue dapat dianggap sebagai penunjuk dingin atau hangatnya suatu warna. Warna yang menggambarkan kehangatan di antaranya adalah merah, oranye, dan kuning. Sedangkan warna yang menggambarkan suasana dingin adalah warna biru, hijau, dan violet.

2) Value

Value merujuk kepada tingkat keterangan dari sebuah warna.

Contohnya seperti biru muda, merah tua, dll.

3) Saturasi

Saturasi atau chroma adalah tingkat kecerahan atau kekusaman suatu warna. Contohnya adalah merah terang atau merah kusam, biru terang atau biru kusam.

Portofolio

Kata portofolio berasal dari kata bahasa Inggris, yaitu portfolio. Portofolio pertama kali diperkenalkan oleh kalangan fotografer dan seniman untuk menunjukkan hasil pekerjaannya kepada calon pelanggan sehingga calon pelanggan dapat menilai hasil kerjanya terlebih dahulu sebelum membeli jasanya.

Dalam dunia kerja, portofolio memiliki pengertian sebagai kumpulan hasil pekerjaan yang menunjukkan kemampuan pencipta karya (Abduh, 2019, hlm. 1).

Portofolio dapat dideskripsikan sebagai wadah berkas, baik dalam bentuk elektronik maupun non-elektronik. Ketika portofolio dengan jenis pesifik dipertimbangkan, pengertiannya menjadi menyempit. Dalam portofolio showcase, wadah ini digunakan untuk menampilkan karya yang sudah selesai kepada audiens.

Dalam portofolio pembelajaran, wadah ini digunakan untuk mendokumentasi proses belajar. Masih banyak jenis portofolio lain yang saling tumpang tindih

(17)

sehingga sulit untuk dilihat satu per satu (Beckers, Dolmans, & Van Merriënboer, 2016, hlm. 32).

2.2.1 Jenis Portofolio

Smith dan Tillema (2006, hlm. 628) mengklasifikasikan portofolio menjadi dua jenis, yaitu portofolio berdasarkan tujuan (pilihan dan pembelajaran) dan berdasarkan kemauan (sukarela dan wajib). Melalui klasifikasi ini, portofolio dibagi menjadi empat:

1) Berkas

Berkas memiliki ciri khas sebagai portofolio yang digunakan untuk mencatat pencapaian yang memiliki tujuan untuk menyeleksi atau promosi.

Contohnya adalah portofolio model profesional yang memamerkan karya fotografi yang pernah dikerjakan sebelumnya.

2) Portofolio Reflektif

Portofolio reflektif juga dapat digunakan sebagai media seleksi atau promosi namun didasarkan dengan kesukarelaan. Portofolio ini biasanya digunakan untuk menentukan kemampuan seorang kandidat untuk naik pangkat di dalam sebuah perusahaan.

3) Portofolio Pelatihan

Portofolio pelatihan memiliki ciri khas sebagai portofolio yang digunakan dengan tujuan pembelajaran. Portofolio jenis ini sering ditemukan di berbagai sekolah.

4) Portofolio Pengembangan Pribadi

Portofolio pengembangan pribadi memiliki ciri yang bertujuan untuk pembelajaran, namun penggunaannya bersifat sukarela. Portofolio ini tidak biasa menjadi bagian yang resmi dalam pembelajaran, namun dapat digunakan untuk membantu proses belajar.

2.2.2 Portofolio Elektronik

Saat ini, penggunaan portofolio elektronik (e-portfolio) meningkat pesat.

Penggunaan e-portfolio memberikan beberapa kelebihan dibandingkan dengan

(18)

portofolio non-elektronik, seperti dapat diakses dimanapun, dapat memasukkan berbagai jenis media, dan memfasilitasi gambaran pengembangan pribadi (Beckers, Dolmans, & Van Merriënboer, 2016, hlm. 33).

Website

Kemajuan teknologi yang pesat membuat penggunaan internet di masyarakat tidak lagi menjadi hal yang langka. Menurut Kusnandar (2021), penggunaan internet di Indonesia pada akhir Maret 2021 mencapai 76,8% dari total populasi dengan estimasi 212,35 juta pengguna internet di Indonesia. Dengan demikian, dapat disimpulkan bahwa banyak penduduk Indonesia yang sudah mampu mengakses website yang menggunakan internet.

Menurut situs Kamus Merriam-Webster, website memiiliki pengertian sekelompok halaman world wide web (www) yang berhubungan satu sama lain dan tersedia sehingga dapat diakses secara online oleh setiap individu maupun kelompok. Dengan demikian, selama perangkat memiliki koneksi internet, maka orang dapat mengakses website dengan mudah.

2.3.1 Anatomi Website

Untuk mendesain sebuah halaman website, diperlukan penyusunan komponen web yang baik. Komponen yang dimaksud oleh Beaird & George (2014, hlm. 8) adalah sebagai berikut:

Gambar 2.17 Anatomi Website Sumber: Beaird & George (2014)

(19)

1) Containing Block

Containing block adalah sebuah container yang digunakan untuk meletakkan konten di sebuah halaman website. Tanpa adanya containing block, semua elemen dalam web akan melayang dan keluar dari batas jendela browser. Ukuran dari containing block bisa berubah- ubah, sesuai dengan ukuran website (hlm. 9).

2) Logo

Identitas yang dimaksud oleh desainer mengacu pada logo dan warna perusahaan yang akan muncul di berbagai platform pemasaran, seperti kop surat, kartu nama, brosur, dan lain-lain (hlm. 9).

3) Navigasi

Navigasi sebuah sistem yang mudah digunakan adalah hal yang penting.

Navigasi yang baik seharusnya berada di bagian atas sebuah halaman atau sedekat mungkin dengan bagian atas halaman (hlm. 9).

4) Konten

Teks, gambar, atau video yang ditemukan di dalam website merupakan konten. Pengunjung website akan mengunjungi website untuk mencari yang diinginkan, sehingga pengunjung akan datang dan pergi secepatnya. Penting bagi desainer untuk meletakkan konten utama sebagai fokus agar pengunjung dapat menemukan informasi yang dibutuhkan dengan cepat (hlm. 9).

5) Footer

Footer terletak di bagian bawah halaman, isinya berupa copyright, kontak, dan informasi lainnya. Adanya footer mengindikasikan bahwa pengguna sudah ada di bagian bawah halaman (hlm. 9).

6) Whitespace

Whitespace juga disebut sebagai negative space. Dengan adanya whitespace, sebuah halaman web menjadi tidak terlalu ramai sehingga pengguna dapat “bernafas” di antara halaman web. Fungsi lainnya

(20)

adalah menciptakan keseimbangan dan kesatuan di antara konten (hlm.

9-10).

2.3.2 User Interface dan User Experience

User Interface (UI) atau yang dikenal sebagai desain antarmuka merujuk kepada sebuah sistem dan interaksi antarpengguna melalui berbagai perintah untuk mengoperasikan sistem. Sedangkan User Experience (UX) atau desain pengalaman pengguna merupakan pengalaman pengguna secara keseluruhan yang berhubungan dengan persepsi, reaksi, dan sikap pengguna saat menggunakan suatu sistem (Joo, 2017, hlm. 27).

2.3.2.1 User Experience (UX)

Proses perancangan UX bertujuan memastikan bahwa tidak ada pengguna yang mengalami suatu perisitiwa tanpa adanya kendali dari desainer itu sendiri. Ini berarti desainer mempertimbangkan setiap kemungkinan yang akan pengguna alami sehingga dapat memahami harapan dari penggunanya (Garret, 2011, hlm. 19).

Elemen yang ada di dalam UX terbagi menjadi 5 yang disebut sebagai The Five Planes. Saat orang membeli produk melalui website, tahapan yang dilalui pengguna adalah mengakses situs yang ingin dikunjungi, lalu mencari produk yang diinginkan melalui search engine atau dengan melihat katalog, kemudian memasukkan nomor kartu kredit dan alamat pengiriman, dan yang terakhir adalah situs tersebut mengkonfirmasi bahwa barang akan segera dikirimkan. Setiap keputusan yang dialami pengguna mempengaruhi satu sama dan semua aspek dari user experience. Jika lapisan pengalaman ini dikupas, maka alasan setiap keputusan yang dibuat dapat dimengerti oleh desainer (Garret, 2011, hlm. 20).

(21)

Tanarya, Universitas Multimedia Nusantara Gambar 2.18 The Five Planes

Sumber: Garret (2011)

1) The Surface Plane

Permukaan halaman web tersusun dari gambar dan teks. Beberapa gambar yang dapat diklik akan memunculkan beberapa fungsi seperti membawa pengguna ke halaman lain. Namun ada juga gambar yang hanye berperan sebagai ilustrasi, seperti foto produk atau logo situs (hlm. 20).

Terlepas dari hal yang berorientasi pada fungsionalitas atau sumber informasi, yang menjadi fokus perhatian di bidang permukaan adalah pengalaman indrawi dari produk yang sudah selesai diproduksi (hlm.

30).

2) The Skeleton Plane

Di bawah permukaan, terdapat kerangka dari situs web, seperti penempatan tombol, kontril, foto, dan blok teks. Kerangka diciptakan untuk mengoptimalkan penyusunan elemen agar dapat bekerja secar maksimal dan efektif (hlm. 20).

Bidang kerangka dibagi menajdi tiga komponen. Yang peryama adalah desain informasi: mempresentasikan informasi untuk memfasilitasi pemahaman bagi penggunanya (hlm. 30).

(22)

a) Desain informasi

Memberikan informasi agar pemahaman dapat tersampaikan.

b) Desain antarmuka

Menyusun elemen interface sehingga pengguna dapat berinteraksi dengan sistem yang berfungsi.

c) Desain navigasi

Set elemen dari layar yang membuat pengguna dapat bergerak melalui arsitektur informasi.

3) The Structure Plane

Struktur dalam UX berfungsi sebagai penentu cara pengguna untuk mencapai ke suatu halaman di situs dan tujuan selanjutnya setelah pengguna melalui halaman tersebut. Perbedaa struktur dan kerangka adalah kerangka akan menentukan penyusunan elemen navigasi yang mungkin akan digunakan pengguna saat menjelajah kategori produk, sedangkan struktur akan menentukan jenis kategori tersebut (hlm. 20).

Pemberian struktur pada ruang lingkup di sisi fungsionalitas dilakukan melalui desain interaksi saat sistem merespon pengguna. Struktur berperan sebagai arsitektur informasi ketika elemen konten yang tersusun bertujuan untuk memudahkan pengguna untuk paham (hlm.

30).

4) The Scope Plane

Ruang lingkup situs mencakup semua fitur dan fungsi yang cocok yang telah didefinisikan oleh struktur. Cotohnya adalah ketika pengguna dapat menyimpan alamat pengiriman yang pernah digunakan sebelumnya di beberapa situs e-commerce sehingga pengguna dapat menggunakan alamat itu Kembali (hlm. 21).

Pada sisi fungsional, strategi diterjemahkan ke dalam ruang lingkup situs melalui spesifikasi fungsional yang berarti deskripsi detail dari set fitur. Pada sisi informasi, ruang lingkup berbentuk persyaratan konren

(23)

yang mencakup deskripsi berbagai elemen konten yang diperlukan (hlm. 29).

5) The Strategy Plane

Strategi pada dasarnya menentukan ruang lingkup situs. Strategi dalam UX dapat memberikan hal yang diinginkan oleh pengguna dari situs dan mengetahui hal yang diinginkan oleh pengguna situs tersebut (hlm.

21).

Keperluan pengguna adalah tujuan dari pembuatan situs yang berasal dari pengguna di luar kelompok, sehingga desainer harus dapat memahami hal yang diinginkan oleh pengguna (hlm. 28).

2.3.2.2 User Interface (UI)

Menurut Lal (2013, hlm. 10), User Interface (UI) merupakan sarana bagi pengguna untuk berkomunikasi dengan komputer. UI menyediakan mekanisme bagi pengguna sehingga pengguna dapat memberitahu komputer mengenai hal yang diinginkan melalui perangkat keras dan komputer memberikan respon. Untuk praktik dan panduan dalam mendesain UI, berikut adalah panduan terbaik (Lal, 2013, hlm. 10):

Gambar 2.19 Alur Interaksi antara Pengguna dan Komputer Sumber: Lal (2013)

(24)

1) Minimum Design

Lal menerapkan aturan 80/20, yang memiliki pengertian saat mendesain UI gunakan 20 persen fitur teratas. Selain itu, memilih warna dan layout yang estetis juga penting dalam mendesain.

2) Simplicity

Kesederhanaan dalam desain membuat desain tetap terlihat sederhana dan bersih. Desain UI yang sederhana dapat membuat websites tetap fungsional dan pengguna bisa tetap fokus pada pekerjaannya.

3) Accesibility

Aksesbilitas membuat pengguna lebih mudah untuk menggunakan dan mengaksesnya di berbagai perangkat serta dapat diakses oleh semua orang, seperti penyandang disabilitas, orang lansia, dan orang dengan tingkat literasi yang rendah.

4) Consistency

Konsistensi dalam UI berarti keseragaman dalam penggunaan layout dan terminologi di aplikasi, penggunaan interaksi dan navigasi yang familier, dan konteks UI yang konsisten.

5) Feedback

Untuk meningkatkan kualitas UI yang baik, umpan balik sebaiknya diberikan dengan segera dan berikan pembaruan pengguna dengan status saat ini.

6) Forgiveness

Forgiveness artinya mengizinkan pengguna agar dapat mencegah kesalahan dan undo. Selain itu, kesalahan pengguna dapat dibatasi dengan mengaktifkan perintah yang diperlukan.

7) User Driven

User driven memberikan pengguna kontrol penuh dan membuat pengguna dapat menyesuaikan dan mempersonalisasi sesuai dengan keinginan pengguna.

(25)

Penyandang Disabilitas

Dalam kamus Merriam-Webster daring, definisi disabilitas adalah kondisi fisik, mental, kognitif, atau perkembangan yang melemahkan, mengganggu, atau membatasi kemampuan seseorang untuk terlibat dalam berbagai tindakan atau berpartisipasi dalam aktivitas dan interaksi sehari-hari. Istilah penyandang disabilitas mulai diperkenalkan dalam UU No. 19 Tahun 2011. Berdasarkan UU No. 8 tahun 2016 tentang Penyandang Disabilitas, penyandang disabilitas merupakan orang dengan keterbatasan fisik, intelektual, mental, dan/atau sensorik yang memiliki hambatan untuk berinteraksi dengan lingkungan sekitarnya.

Jumlah penyandang disabilitas menurut McClain-Nhapo (2021) sudah mencapai 15% dari populasi dunia, atau sama dengan kira-kira satu miliyar orang.

Menurut data Survey Sosial Ekonomi Nasional (Susenas) pada tahun 2018, penyandang disabilitas di Indonesia dengan usia di atas dua tahun mencapai 31,2 juta jiwa. Sedangkan Jumlah penyandang disabilitas mental di Indonesia diperkirakan sekitar 2,9 juta penduduk (Direktorat Rehsos Penyandang Disabilitas, 2015).

2.4.1 Jenis Disabilitas

Menurut UU No. 8 Tahun 2016, penyandang disabilitas terbagi menjadi empat jenis:

1) Penyandang Disabilitas Fisik

Disabilitas fisik merupakan terganggunya fungsi gerak pada tubuh sehingga mengalami kelainan pada bentuk tubuh, anggota gerak, fungsi otot, tulang, dan saraf yang berkurang. Penyebabnya berbagai macam, seperti dari penyakit, kecelakaan, atau bawaan sejak lahir. Contohnya seperti tubuh lumpuh, celebral palsy, stroke, kusta, dll.

2) Penyandang Disabilitas Intelektual

Disabilitas intelektual yaitu terganggunya fungsi pikir yang disebabkan oleh tingkat kecerdasan yang di bawah rata-rata. Contohnya seperti down syndrome dan tunagrahita.

(26)

3) Penyandang Disabilitas Mental

Disabilitas mental merupakan gangguan pada fungsi pikir, emosi, dan perilaku. Disabilitas mental terdiri dari tiga jenis, yaitu sebagai berikut:

a) Psikososial (skizofrenia, depresi, gangguan kepribadian).

b) Disabilitas perkembangan yang mempengaruhi kemampuan berinteraksi (autis dan hiperaktif).

4) Penyandang Disabilitas Sensorik

Disabilitas sensorik merupakan adanya gangguan pada salah satu fungsi indera pada tubuh. Contohnya adalah tunanetra, tunarungu, dan tunawicara.

Selain dari keempat jenis disabilitas di atas, seorang penyandang disabilitas juga dapat mengalami lebih dari satu jenis disabilitas. Penyandang disabilitas dengan lebih dari satu jenis disabilitas disebut sebagai tunaganda atau disabilitas ganda. Contohnya adalah seseorang yang menyandang tunawicara sekaligus tunarungu.

2.4.2 Disabilitas Mental

Menurut Penyandang disabilitas mental yang dimaksud oleh Direktorat Rehabilitasi Sosial Penyandang Disabilitas Kementerian Sosial RI terbagi menjadi dua, yaitu Orang Dengan Masalah Kejiwaan (ODMK) dan Orang Dengan Gangguan Jiwa (ODGJ) yang dapat mengalamai hambatan untuk berinteraksi dalam jangka waktu yang lama. ODMK merupakan seseorang yang memiliki masalah secara fisik, mental, sosial, petumbuhan dan perkembangan yang beresiko mengalami gangguan jiwa. Sedangkan ODGJ adalah orang dengan terganggunya pikiran, perilaku, dan perasaan yang tertuang dalam gejala dan/atau perubahan perilaku sehingga menimbulkan penderitaan dan hambatan dalam keseharian (Yazfinedi, 2018, hlm. 102).

Perlakuan terhadap penyandang disabilitas mental yang masih terdiskriminasi tidak mencerminkan isi dari UUD 1945. Sebagai warga negara Indonesia, penyandang disabilitas juga memiliki hak dan harus dilindungi.

Sesuai dengan Pembukaan UUD 1945 yang berbunyi “memajukan

(27)

kesejahteraan umum, mencerdaskan kehidupan bangsa, mewujudkan keadilan sosial bagi seluruh rakyat Indonesia,” penyandang disabilitas mental juga harus dipenuhi haknya tanpa pandang bulu. Hak-hak penyandang disabilitas tertulis di dalam UU No. 8 tahun 2016 tentang Penyandang Disabilitas.

Menurut Reefani (2013, hlm. 177), disabilitas mental terdiri dari tiga jenis, yaitu sebagai berikut:

a) Mental tinggi

Mental tinggi dikenal sebagai orang dengan bakat intelektual dan kreativitas di atas rata-rata serta dapat memiliki tanggung jawab terhadap tugasnya.

b) Mental rendah

Mental rendah dikenal sebagai orang yang memikiki kecerdasan di bawaah rata-rata. Mental rendah terbagi menjadi dua kelompok, yaitu anak lamban belajar yang memiliki IQ berkisar 70-90 dan anak berkebutuhan khusus yang memiliki IQ di bawah 70.

c) Kesulitan belajar secara spesifik

Kesulitan belajar ini berhubungan dengan perolehan prestasi belajar.

Disabilitas mental tidak hanya mencakup aspek individu seperti kemampuan mengelola pikiran, emosi, tingkah laku, dan interaksi, tetapi juga terdapat pengaruh dari faktor sosial, budaya, ekonomi, politik, dan lingkungan.

Menurut WHO (2019), penyebab disabilitas mental di antaranya adalah faktor keturunan, tingkat stress yang tinggi, nutrisi, infeksi saat sebelum dan sesudah melahirkan, serta paparan lingkungan yang berbahaya.