LECTURE NOTES

ISYS6619 – UX for Digital Business

Week ke 5

Interface Design
 LEARNING OUTCOMES

LO1: Explain the Fundamental and context of user experience design

OUTLINE MATERI :

1. Visual Interface Design

2. Multimodal interface design
 ISI MATERI

A. Visual Interface Design (Desain antar-muka visual)

Desain interface adalah sebuah cara untuk memediasi interaksi orang dengan perangkat
selain desain interface ini maka sebuah desain interaksi juga menjadi hal yang penting.
Sebuah user interface (antarmuka pengguna) (UI) terdiri dari segala sesuatu dalam sistem
yang berhubungan dengan orang, baik itu secara fisik, perseptual atau konseptual.

Secara fisik orang berinteraksi dengan sistem dalam banyak cara yang berbeda, seperti
dengan menekan tombol, menyentuh layar, menggerakkan mouse di atas meja sehingga
menggerakkan kursor di atas layar, mengklik tombol mouse dan memutar ibu jari mereka
di atas roda pada mouse.

Secara persepsi orang berinteraksi dengan sistem melalui apa yang dapat mereka lihat,
dengar, dan sentuh.

Secara konseptual orang berinteraksi dengan sistem dan perangkat dengan mengetahui
apa yang dapat mereka lakukan dan mengetahui bagaimana mereka dapat melakukannya.

Secara konseptual orang menggunakan 'model mental' tentang apa layanan atau
perangkat itu dan bagaimana cara kerjanya.

Model mental atau mental models adalah sebuah persepsi yang dibangun oleh user
ketika melihat sebuah objek. Contohnya, ketika melihat sebuah gagang pintu, maka
secara otomatis orang sudah menduga bagaimana cara kerja gagang pintu tersebut dan
apa yang dapat dilakukan dengan gagang pintu tersebut. Sama halnya ketika user melihat
sebuah icon atau tombol pada sebuah interface, maka user sudah ada dugaan bagaimana
cara kerja. Oleh karena itu dalam merancang sebuah produk, sebisa mungkin disesuaikan
antara objek dan mental model. Hindari menggunakan objek dengan cara kerja yang
berbeda dengan dugaan dari user.

ISYS6619 – UX for Digital Business

1. Graphical user interface

Antarmuka pengguna grafis (GUI), yang ditemukan di setiap komputer pribadi, di

ponsel pintar, di layar sentuh dan sebagainya, memiliki sejarah yang menarik
meskipun singkat, dimulai pada 1980-an.

Selama tahun 1980-an dan 1990-an, sejumlah desain GUI yang berbeda dibuat,
Windows dan Apple Macintosh mendominasi pasar sistem operasi berbasis GUI.

Didalam sebuah desain GUI, objek direpresentasikan sebagai grafik sehingga orang
dapat mengenali apa yang ingin mereka lakukan daripada harus mengingat beberapa
perintah dari memori. Mereka juga dapat membalikkan tindakan mereka dengan
perintah UNDO, yang berarti memperbaki kesalahan jauh lebih mudah.

GUI yang paling umum adalah antarmuka yang disebuat sebagai WIMP seperti
Windows atau OS X. WIMP adalah singkatan dari windows, icons, menus, dan
pointers.

Windows memungkinkan tampilan untuk dibagi menjadi area. Hal ini

memungkinkan orang untuk melihat output dari beberapa proses pada saat yang sama
dan untuk memilih mana yang akan menerima input dengan memilih jendelanya,
menggunakan alat penunjuk (mouse), seperti mengkliknya dengan mouse atau
menyentuh layar sentuh. Pada gambar 1 terlihat windows dengan tampilan menunya.
Menu memungkinkan orang untuk memilih dari aplikasi yang ada. Ikon digunakan
untuk mewakili fitur dan fungsi dalam segala hal mulai dari aplikasi perangkat lunak,
pemutar DVD, dan kios informasi publik hingga pakaian dan rambu jalan. Ikon
umumnya dianggap berguna dalam membantu orang mengenali beberapa fitur atau
fungsi yang perlu mereka akses atau ketahui. Ikon menggunakan tiga jenis
representasi utama: metafora, pemetaan langsung, dan konvensi. Contoh dari
metafora adalah icon tempat sampah yang merepresentasikan tempat file-file yang
sudah dihapus atau dibuang, seumpanya tempat sampah yang kita gunakan sehari-hari
untuk membuang sampah.

ISYS6619 – UX for Digital Business

 Gambar 1 Windows

2. Panduan desain antar-muka (interface)

GUI modern memiliki sebagai bagian dari rangkaian widget termasuk tombol radio,
bilah geser, bilah gulir, dan kotak centang. Merancang GUI untuk aplikasi tidak
menjamin bahwa sistem yang telah selesai akan dapat digunakan. Oleh karena itu
dibutuhakan panduan desain yang memberikan berbagai saran kepada pengembang
antarmuka.

Beberapa obyek yang banyak digunakan pada sebuah desain GUI yang modern antara
lain:

• Elemen
• Toolbar
• List boxes
• Slider
• Form fill
• Wizard
• Alert

ISYS6619 – UX for Digital Business

Panduan gaya ada untuk tiga sistem operasi utama, atau platform, Microsoft
Windows 10, Mac OSX dan iOS dan Android.

Ada banyak situs yang menawarkan panduan bagus untuk perancang antarmuka.

Apple, Android, dan Microsoft memiliki panduan gaya dan banyak lingkungan
pengembangan akan memastikan bahwa desain sesuai dengan standar yang mereka
tuju.

Beberapa sumber yang dapat dilihat sebagai panduan dalam membuat desain antara
lain:

a. Google/android: https://material.io/design/guidelines-overview

b. Apple: https://developer.apple.com/design/human-interface-guidelines/

Pada gambar 2 adalah sebuah panduan yang diberikan oleh Google dengan tujuan
membantu seorang perancang dalam membuat desain aplikasi pada sarana device
android. Pada gambar tampak panduan untuk membuat navigation bar yang biasanya
ada pada bagian bawah sebuah mobile apps. Ada beberapa komponen yang tampak
pada navigation bar antara lain; container yang merupakan tempat navigasi,
kemudian menu berbentuk garis tiga atau yang cukup populer disebut sebagai
hamburger menu, tombol, icon, serta menu berbentuk tiga titik.

Gambar 2 Panduan Google

Sumber: https://material.io/components/app-bars-bottom#anatomy

ISYS6619 – UX for Digital Business

3. Prinsip psikologi dalam desain

Ada juga banyak isu yang berlaku untuk konteks desain yang berbeda seperti desain
untuk situs web, ponsel, dan produk interaktif lainnya.

Desainer perlu mengetahui tentang desain grafis, seperti apa bentuk, ukuran, warna,
orientasi dan tekstur objek layar. Desain harus memiliki gaya yang jelas dan
konsisten.

Desain dari produk akan dipengaruhi serta mempengaruhi manusia dari berbagai
macam aspek psikologis.

• Prinsip Gesalt adalah sebuah prinsip dimana persepsi manusia dapat

dipengaruhi secara visual. Beberapa prinsipnya antara lain:

a) Proximity

b) Similarity

c) Continuity

d) Closure

Gambar 3 prinsip Gesalt

Sumber: https://uxcam.com/blog/gestalt-principles/

ISYS6619 – UX for Digital Business

 • Prinsip memory

Pemahaman kita tentang kemampuan manusia dalam mengingat dan

memperhatikan hal-hal juga mengarah pada desain sebuah produk. Memori
biasanya dianggap sebagai memori jangka pendek atau memori kerja dan
memori jangka panjang.

Perhatian menyangkut dengan apa yang menjadi fokus kita. Dalam sebuah
teori menunjukkan bahwa kapasitas memori jangka pendek manusia hanya
dapat mengingat 4 +/− 1 hal saja (Cowan, 2002). Oleh karena itu dalam
sebuah desain, sebisa mungkin tidak menampilkan terlalu banyak hal atau
butir. Untuk membantu manusia dalam mengingat maka beberapa cara dapat
dilakukan, contohnya Chunking atau memotong. Contonya untuk membantu
orang membaca nomor yang terlalu panjang, maka nomor tersebut dapat
ditampilkan secara potongan.

23478908237888

234-789-082-37888
Keduanya merupakan angka yang sama, tetapi angka dibawahnya lebih
mudah untuk dibaca karena angka tersebut ditampilkan dengan terpotong-
potong.

B. Multimodal interface design

1. Augmented reality

Contoh dari Augmented reality adalah game seperti Pokémon Go, dimana pada game
tersebut aspek dunia fisik dibawa ke dunia virtual. Menggunakan antar muka seperti
layar telepon genggam untuk menempelkan dunia virtual pada dunia nyata yang
terlihat pada layar. Filter video yang ada pada aplikasi tik-tok dan instagram juga
turut meramaikan penerapan teknolgi AR ini.

ISYS6619 – UX for Digital Business

2. Mixed reality

Istilah 'realitas campuran/ mixed reality' diciptakan oleh Milgram et al. pada tahun
1994 untuk mencakup sejumlah teknologi simulasi, termasuk augmented reality
(informasi digital ditambahkan ke dunia nyata) dan augmented virtuality (informasi
nyata ditambahkan ke dunia digital).

3. Virtual Reality

Aplikasi berbasis virtual reality biasanya mengharuskan orang untuk memakai

headset yang tidak ringan. Melalui headset tersebut, user akan disuguhkan sebuah
realitas virtual dan membuat user akan terbawa pada suasana virtual tersebut. VR
banyak diterapkan pada game pada awalnya tapi saat ini ada beberapa kemungkinan
VR diterapkan pada aspek lainnya seperti untuk pelatihan dan olahraga.

Gambar 4 Mixed reality

4. Antar-muka dengan suara

Hingga saat ini, sebagian besar penelitian tentang antarmuka pengguna auditori (AUI)
telah berkonsentrasi pada penggunaan earcon atau ikon auditori.

Earcon adalah suara musik yang dirancang untuk mencerminkan peristiwa di

antarmuka. Misalnya, serangkaian catatan sederhana dapat digunakan untuk
menunjukkan penerimaan pesan teks di ponsel. Juga suara yang berbeda digunakan
saat teks dikirim.

Suara yang digunakan dalam antarmuka ini adalah karikatur suara sehari-hari, di
mana aspek sumber suara sesuai dengan peristiwa di antarmuka. Misalnya suara
“ting” untuk menunjukkan adanya pesan yang masuk kedalam ponsel kita.

ISYS6619 – UX for Digital Business

5. Antar-muka ucapan (speech)

Antarmuka berbasis ucapan mencakup output ucapan dan input ucapan.

Output ucapan telah berkembang selama beberapa tahun terakhir menjadi teknologi
yang kuat dan semakin umum dalam hal-hal seperti sistem navigasi satelit di mobil
atau penggunaan google maps untuk navigasi dan area lain seperti pengumuman di
stasiun kereta api, bandara.

Keluaran ucapan menggunakan sistem yang mengubah teks menjadi ucapan. Input
ucapan belum mencapai tingkat kecanggihan output ucapan, tetapi juga menjadi
teknologi yang telah mencapai tingkat kegunaan sehingga desainer UX sekarang
dapat menganggapnya sebagai opsi nyata.

Input ucapan paling baik untuk mengeluarkan perintah, tetapi saat ini masih terjadi
kendala pada pengenalan ucapan yang akan diinput dan dikenali oleh sistem. Input
ucapan membuka jalan bagi sistem bahasa alami/natural language systrem (NLS) di
mana orang dapat melakukan percakapan dengan perangkat mereka. Penerapan
teknologi ini sudah mulai menjadi lazim dengan adanya aplikasi virtual assistant
contonya Siri pada perangkat apple, google assistent pada android dan cortana pada
OS microsoft

6. Tangible interface

Tangible berarti dapat disentuh atau digenggam dan dirasakan melalui indera peraba.
Interaksi ini dimulai dengan adanya haptik dimana indra peraba pada jari kita dapat
merasakan gerakan, getaran dan sentuhan pada objek yang kita sentuh.

ISYS6619 – UX for Digital Business

 KESIMPULAN

Desain antarmuka yang paling banyak digunakan oleh user adalah antarmuka berbasis visual
dimana user melihat dan berdasarkan dengan apa yang dilihat, user dapat memiliki perspektif
tertentu. GUI atau visual yang berbasis grafis memudahkan user untuk memberikan perintah ke
sistem juga ketika mendapatkan feedback dari sistem.

Selain visual, antarmuka berbasis multimodal juga semakin popular. Bila antarmuka berbasis
visual mengandalkan indera penglihatan manusia, maka multimodal akan memanfaatkan panca
indera lainnya seperti pendengaran untuk antarmuka berbasis suara dan ucapan yang muncul
dapat membuat antarmuka berdasarkan ucapan.

ISYS6619 – UX for Digital Business

 DAFTAR PUSTAKA

David Benyon. (2018). Designing User Experience: A guide to HCI, UX and interaction
design. 4th E. Pearson. Harlow, United Kingdom. ISBN: 978-1292155517

Developer.apple.com. 2021. Human Interface Guidelines - Design - Apple Developer. [online]

Available at: <https://developer.apple.com/design/human-interface-guidelines/> [Accessed 19
June 2021].

Material Design. 2021. Guidelines. [online] Available at: <https://material.io/design/guidelines-

overview> [Accessed 19 June 2021].

ISYS6619 – UX for Digital Business