KATA PENGANTAR

Assalamualaikum warahmatullahiwabarakatuh,
Segala puji hanyalah kepunyaan Allah SWT, yang senantiasa melimpahkan
rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan makalah ini.
Serta tak lupa salawat serta salam kepada junjungan Nabiullah Muhammad SAW
atas semua teladannya.
Makalah ini membahas tentang “Perancangan Antarmuka” yang disusun
untuk memenuhi tugas mata kuliah Analisis Dan Perancangan Sistem. Tak lupa
pula kami ucapkan terima kasih kepada Dosen Analisis Dan Perancangan Sistem,
yaitu Bapak Nirsal, S.Kom., M.Pd. yang telah membimbing kami dalam mata
kuliah tersebut.
Dengan menyadari bahwa keterbatasan kemampuan yang ada pada
penulis sehingga bentuk dan isi dari penulisan masih jauh dari kesempurnaan
dan banyak kekurangan. Oleh karena itu, dengan segala kerendahan hati peneliti
dan saran yang bersifat membangun dari semua pihak yang bertujuan
menyempurnakan makalah ini.
Akhir kata, semoga makalah ini dapat memberikan manfaat, khususnya
bagi penulis, dan umumnya bagi semua pihak yang membutuhkan. Terima kasih.
Wassalam.

Palopo, Oktober 2023

Penulis

ii
 DAFTAR ISI

HALAMAN SAMPUL.................................................................................................i
KATA PENGANTAR...................................................................................................ii
DAFTAR ISI..............................................................................................................iii
DAFTAR GAMBAR...................................................................................................iv
KELOMPOK VIII PERANCANGAN ANTARMUKA.......................................................5
8.1 APLIKASI ANTARMUKA.................................................................................5
8.2 MERANCANG ANTARMUKA PENGGUNA....................................................16
KESIMPULAN........................................................................................................ 31
DAFTAR PUSTAKA................................................................................................. 32

iii
 DAFTAR GAMBAR

Gambar 1. Antarmuka Pengguna Grafis.................................................................5

Gambar 2. Antarmuka Pengguna Teks....................................................................8

Gambar 3. Struktur Menu Utama.........................................................................18

Gambar 4. Struktur Menu Admin.........................................................................19

Gambar 5. Struktur Menu User............................................................................19

Gambar 6. Halaman Login Admin.........................................................................20

Gambar 7. Halaman Login User............................................................................20

Gambar 8. Input Form Buku.................................................................................21

Gambar 9. Form Persewaan Buku........................................................................22

Gambar 10. Bukti Persewaan...............................................................................23

Gambar 11. Output Daftar Penyewa....................................................................23

Gambar 12. Output Daftar Penyewa....................................................................23

iv
 KELOMPOK VIII PERANCANGAN ANTARMUKA

8.1 APLIKASI ANTARMUKA

1. Definisi dan Jenis-Jenis Antarmuka
Antarmuka merupakan salah satu layanan yang disediakan oleh sistem
operasi sebagai sarana interaksi antara pengguna dengan sistem operasi.
Antarmuka adalah komponen sistem operasi yang bersentuhan langsung
dengan pengguna. Antarmuka pengguna adalah mekanisme komunikasi
antara pengguna dan sistem.
Antarmuka pengguna dapat menerima informasi dari pengguna dan
memberikan informasi kepada pengguna untuk membantu mengarahkan
alur pencarian masalah hingga ditemukan solusinya.
Antarmuka pengguna, yang mengimpor pengetahuan baru ke dalam
basis pengetahuan sistem pakar, menampilkan penjelasan sistem, dan
memberikan petunjuk langkah demi langkah lengkap tentang cara
menggunakan sistem sehingga pengguna memahami apa yang akan
dilakukan dengan sistem tersebut.
Yang terpenting dalam membangun sebuah user interface adalah
seberapa mudahnya menggunakan atau menjalankan sistem, apakah
interaktif dan komunikatif, sedangkan kesulitan dalam mengembangkan atau
membangun program tidak boleh dianggap berlebihan.
A. Antarmuka Pengguna Grafis (GUI)

Gambar 1. Antarmuka Pengguna Grafis

5
 Antarmuka pengguna grafis atau GUI adalah sistem komponen visual
interaktif yang digunakan dalam perangkat lunak komputer, ponsel pintar,
dan banyak perangkat elektronik lainnya. Antarmuka grafis menampilkan
objek yang menyampaikan informasi dan mewakili tindakan yang dapat
dilakukan pengguna. Objek-objek ini berubah warna, ukuran, atau visibilitas
saat pengguna berinteraksi, misalnya dengan mengkliknya.
GUI pertama kali dikembangkan pada tahun 1981 oleh Alan Kay, Douglas
Engelbart, dan sekelompok peneliti lain di Xerox PARC. Kemudian, pada
tahun 1983, Apple memperkenalkan Komputer Lisa dengan menggunakan
antarmuka grafis. GUI direpresentasikan menggunakan beberapa gambar
yang disebut sebagai elemen GUI.
Dengan elemen-elemen seperti Window, icon, dan menu, komputer
dapat menjalankan perintah-perintah seperti membuka, menghapus, dan
memindahkan file. Sistem operasi GUI tidak hanya bisa dijalankan
menggunakan mouse, akan tetapi juga bisa dijalankan menggunakan
pintasan keyboard. Misalnya jika Anda ingin menampilkan Window dalam
laptop, maka dengan memencet pintasan keyboard yang memiliki logo
Window, Anda bisa menampilkan Window tanpa menggunakan mouse.
Terdapat beberapa elemen GUI yang dapat digunakan pengguna untuk
berinteraksi dengan perangkat lunak. Berikut beberapa contoh GUI.
1) Button
Button atau Tombol yang disebutkan di sini adalah pintasan keyboard.
Beberapa pintasan keyboard dapat digunakan untuk berinteraksi dengan
perangkat lunak.
Beberapa dapat digunakan secara mandiri dan yang lainnya dapat
digunakan secara kombinasi. Karena kombinasi ctrl+c merupakan shortcut
yang digunakan untuk mengcopy. Namun kombinasi ini tidak berlaku untuk
MacOS.

6
2) Dialog Box
Dialog Box adalah jenis jendela yang menampilkan informasi tambahan
dan memerlukan masukan pengguna. Opsi yang biasanya ditampilkan di
kotak dialog adalah potong, salin, lihat, buka, dll.
3) Icon
Icon adalah gambar grafis kecil dari suatu program, fitur, atau file. Ikon
memungkinkan pengguna mengidentifikasi fitur, program, atau file. Dengan
cara ini, pengguna tidak akan melakukan kesalahan saat berinteraksi dengan
perangkat lunak.
4) Menu
Menu adalah daftar perintah atau opsi yang tersedia bagi pengguna
melalui bilah menu. Menu mencakup berbagai ikon program. Beberapa di
antaranya, seperti fitur dan file, dapat dipilih pengguna sesuai
kebutuhannya. Tidak hanya menampilkan ikon, menu tersebut juga memuat
nama program, fitur, dan file.
5) Menu Bar
Menu bar atau bilah menu adalah bilah horizontal tipis yang berisi ikon
program, fitur, dan file di komputer. Tidak semua ikon desktop ada di bilah
menu. Pengguna dapat menambah atau menghapus ikon pada menu bar
untuk meningkatkan kecepatan akses saat menggunakan perangkat.
6) Ribbon
Ribbon menggantikan menu file dan toolbar yang mengelompokkan
aktivitas program. Pada Microsoft Word, Ribbon berisi menu File, Home,
Sisipkan, Desain, Tata Letak, Referensi, Mailing, Review, View, Help, dan
beberapa menu tambahan lainnya. Melalui menu-menu tersebut
memungkinkan pengguna untuk melakukan aktivitas dan berinteraksi
dengan perangkat lunak sesuai keinginannya.
7) Tab
Tab adalah area yang dapat diklik di bagian atas jendela yang
menampilkan halaman atau area lainnya. Bagian ini biasanya ditemukan

7
ketika membuka aplikasi browser seperti Microsoft Edge, Firefox, Chrome,
Opera, dll.
8) Toolbar
Toolbar adalah deretan tombol di bagian atas jendela aplikasi yang
mengontrol fungsi perangkat lunak. Ini adalah isi dari menu Ribbon.
9) Window
Window adalah sistem operasi yang digunakan untuk mengoperasikan
komputer. Biasanya, menu Window terletak di pojok kiri bawah layar
komputer. Di Window, pengguna dapat melihat beberapa menu yang
memuat program, fitur, dan file yang ada di laptop.

B. Antarmuka Pengguna Teks (TUI)

Gambar 2. Antarmuka Pengguna Teks

Merupakan antarmuka pengguna berupa teks atau perintah yang
langsung dimasukkan oleh pengguna untuk menjalankan atau melakukan
sesuatu. Contoh antarmuka teks : Command Line Interface (Unix, Linux) dan
juga Command Prompt 'Windows'.
Antarmuka pengguna teks (TUI), juga dikenal sebagai antarmuka
pengguna teks atau antarmuka pengguna terminal, adalah akronim yang
diciptakan segera setelah penemuan antarmuka pengguna grafis, grafis,
untuk membedakannya dari antarmuka pengguna teks.
Konsep TUI terutama mengacu pada mode produksi dan tidak tumpang
tindih dengan antarmuka baris perintah yang merupakan mode input

8
pengguna tertentu. TUI yang ditingkatkan dapat, seperti GUI, menggunakan
seluruh area layar dan tidak serta merta memberikan keluaran baris demi
baris, meskipun TUI hanya menggunakan teks, simbol, dan warna yang
tersedia di lingkungan layar.
Dari perspektif teks aplikasi, ada tiga kemungkinan berikut mengenai
tampilan teks dan komunikasi dengannya, disusun dalam urutan
aksesibilitas. Mode subtitle asli, dikontrol oleh adaptor video atau prosesor
pusat itu sendiri. Aplikasi lokal biasanya dijalankan di berbagai komputer
pribadi dan perangkat seluler.
Jika tidak dihalangi oleh sistem operasi, program cerdas dapat
memanfaatkan kekuatan penuh mode teks perangkat keras. Contohnya
adalah xterm untuk Sistem X Window dan konsol win32 (dalam mode
berjendela) untuk Microsoft Windows.
Ini sering kali mendukung program yang memerlukan rendering teks
nyata tetapi dapat berjalan lebih lambat. Beberapa fitur Mode Teks
Lanjutan, seperti font yang diunduh sendiri, hampir pasti tidak akan
tersedia.
Kemampuan komunikasi sering kali direduksi menjadi jalur serial atau
emulasinya, mungkin dengan beberapa ioctl () sebagai saluran out-of-band
dalam kasus seperti Telnet dan Secure Shell. Ini adalah skenario terburuk
karena keterbatasan perangkat lunak menghalangi penggunaan kemampuan
perangkat tampilan jarak jauh.
Dalam sistem mirip Linux dan Unix, program ini dengan mudah
beradaptasi dengan salah satu dari tiga kasus tersebut karena antarmuka
yang sama (yaitu aliran standar) digunakan untuk mengontrol tampilan dan
keyboard. Selain itu, perpustakaan pemrograman khusus membantu
membuat teks yang sesuai untuk perangkat tampilan tertentu dan
antarmuka dengannya.

C. Antarmuka Pemrograman Aplikasi (API)

9
 API adalah mekanisme yang memungkinkan dua komponen perangkat
lunak untuk saling berkomunikasi menggunakan serangkaian definisi dan
protokol. Misalnya, sistem perangkat lunak badan meteorologi, klimatologi,
dan geofisika (BMKG) berisi data cuaca harian. Aplikasi cuaca di ponsel Anda
“berkomunikasi” dengan sistem ini melalui API dan menampilkan
pembaruan cuaca harian di ponsel Anda.
API merupakan kepanjangan dari Application Programming Interface
(Antarmuka Pemrograman Aplikasi). Kata Aplikasi pada API merujuk pada
perangkat lunak dengan fungsi yang berbeda. Kata Antarmuka dapat
dipahami sebagai kontrak layanan antara dua aplikasi.
Kontrak ini menjelaskan bagaimana keduanya berkomunikasi satu sama
lain menggunakan permintaan dan tanggapan. Dokumentasi API untuk
keduanya berisi informasi tentang bagaimana pengembang menyusun
permintaan dan respons ini. Arsitektur API sering digambarkan dalam istilah
klien dan server.Aplikasi yang mengirimkan permintaan disebut klien dan
aplikasi yang mengirimkan respon disebut server. Jadi untuk contoh cuaca di
atas, database cuaca BMKG sebagai servernya, sedangkan mobile app
sebagai clientnya.
Berdasarkan waktu dan alasan pembuatan, terdapat empat cara kerja
API.
a. API Soap
API ini menggunakan Protokol Akses Objek Sederhana. Klien dan server
bertukar pesan menggunakan XML. API yang kurang fleksibel ini merupakan
hal yang umum di masa lalu.
b. API RPC
API ini disebut panggilan prosedur jarak jauh. Klien menjalankan fungsi
(atau prosedur) di server, dan server mengembalikan hasilnya ke klien.
c. API Websocket
Websocket API adalah metode pengembangan API web modern lainnya
yang menggunakan objek JSON untuk mentransfer data. WebSocket API

10
mendukung komunikasi dua arah antara aplikasi klien dan server. Server
dapat mengirim pesan panggilan balik ke klien yang terhubung, sehingga
lebih efisien dibandingkan REST API.
d. API REST
REST API adalah API paling populer dan fleksibel di web saat ini. Klien
mengirimkan permintaan ke server sebagai data. Server akan menggunakan
masukan dari klien untuk memulai fungsi internal dan mengembalikan data
keluaran ke klien.
API REST juga menawarkan empat keuntungan utama :
1) Integrasi
API digunakan untuk mengintegrasikan aplikasi baru dengan sistem
perangkat lunak yang sudah ada. Hal ini mempercepat pengembangan
karena setiap fungsi tidak perlu ditulis dari awal. Anda dapat menggunakan
API untuk memanfaatkan kode yang ada.
2) Inovasi
Dengan munculnya aplikasi-aplikasi baru, seluruh sektor bisa mengalami
perubahan. Dunia usaha harus segera merespons dan mendukung
penerapan layanan inovatif secara cepat. Bisnis dapat mencapai hal ini
dengan membuat perubahan pada level API tanpa harus menulis ulang
seluruh kode.
3) Ekspansi
API memberikan peluang unik bagi bisnis untuk memenuhi kebutuhan
pelanggan di seluruh platform. Misalnya, Maps API memungkinkan integrasi
informasi peta di seluruh situs web, Android, iOS, dan lainnya. Perusahaan
dapat memberikan akses serupa ke database internal mereka menggunakan
API gratis atau berbayar.
4) Kemudahan dalam pemeliharaan
API bertindak sebagai pintu gerbang antara dua sistem. Setiap sistem
harus melakukan perubahan internal agar API tidak terpengaruh. Dengan

11
cara ini, perubahan kode apa pun di masa mendatang yang dilakukan oleh
salah satu pihak tidak akan memengaruhi pihak lainnya.
API diklasifikasikan berdasarkan arsitektur dan cakupan penggunaannya.
Kita sudah mengetahui tipe utama arsitektur API, jadi mari kita lihat cakupan
penggunaannya.
1) API Privat
API ini bersifat internal perusahaan dan hanya digunakan untuk
menghubungkan sistem dan data di dalam perusahaan.
2) API Publik
API ini terbuka untuk umum dan siapapun dapat menggunakannya.
Beberapa memiliki izin dan biaya yang terkait dengan jenis API ini, namun
yang lainnya tidak.
3) API Partner
Hanya dapat diakses oleh pengembang eksternal resmi untuk mem
fasilitasi kemitraan bisnis-ke-bisnis.
4) API Komposit
API ini menggabungkan dua atau lebih API berbeda untuk menangani
permintaan atau perilaku sistem yang kompleks.
Dibutuhkan ketekunan dan upaya untuk menciptakan API yang dipercaya
dan diinginkan oleh pengembang lain.
Lima langkah untuk membuat desain API berkualitas tinggi :
1) Merencanakan API
Spesifikasi API, seperti OpenAPI, memberikan cetak biru untuk
mendesain API Anda. Sebaiknya pikirkan terlebih dahulu tentang berbagai
kasus penggunaan dan pastikan bahwa API mematuhi standar
pengembangan API saat ini.
2) Membangun API
Perancang API membuat prototipe API menggunakan kode boilerplate.
Setelah prototipe diuji, pengembang dapat menyesuaikannya dengan
spesifikasi internal.

12
3) Uji API
Pengujian API sama seperti pengujian perangkat lunak dan harus
dilakukan untuk menghindari kesalahan dan cacat. Alat pengujian API dapat
digunakan untuk menguji ketahanan API terhadap serangan cyber.

4) Mendokumentasikan API
Meskipun API cukup mudah dipahami, dokumentasi API digunakan
sebagai panduan untuk meningkatkan kegunaan. API yang terdokumentasi
dengan baik, yang menyediakan berbagai fungsi dan kasus penggunaan,
cenderung lebih umum dalam arsitektur berorientasi layanan.
5) Memasarkan API
Seperti Amazon, pasar ritel online, API Marketplace dapat digunakan
oleh pengembang untuk membeli dan menjual API. Mencantumkan API
nmemungkinkan Anda memonetisasinya.
Strategi pengujian API serupa dengan metodologi pengujian perangkat
lunak lain. Fokus utamanya berada pada validasi tanggapan server. Pengujian
API meliputi :
a) Membuat beberapa permintaan ke titik akhir API untuk pengujian
performa.
b) Menulis uji unit untuk memeriksa kebenaran fungsional dan logika bisnis.
c) Pengujian keamanan dengan menyimulasikan serangan ke sistem.

Menulis dokumentasi API yang komprehensif adalah bagian dari proses

manajemen API. Dokumentasi API dapat dibuat secara otomatis
menggunakan alat atau ditulis secara manual. Beberapa praktik terbaik
meliputi :
a) Menulis penjelasan dalam bahasa Inggris yang sederhana dan mudah
dipahami. Dokumen yang dibuat dengan menggunakan alat dapat
menjadi bertele-tele dan memerlukan pengeditan.
b) Menggunakan sampel kode untuk menjelaskan fungsionalitas.
c) Memelihara dokumentasi sehingga menjadinya akurat dan mutakhir.

13
d) Menggunakan gaya penulisan yang ditujukan untuk pemula
e) Mencakup semua masalah yang dapat dipecahkan oleh API untuk
pengguna.
Langkah-langkah untuk menerapkan API baru meliputi :
a) Mendapatkan kunci API. Hal ini dapat dilakukan dengan membuat akun
terverifikasi menggunakan penyedia API.
b) Siapkan klien HTTP API. Alat ini memungkinkan Anda untuk menyusun
permintaan API secara mudah dengan menggunakan kunci API yang
diterima.
c) Jika Anda tidak memiliki klien API, Anda dapat mencoba untuk menyusun
permintaan tersebut secara mandiri di peramban Anda dengan mengacu
pada dokumentasi API.
d) Setelah Anda merasa nyaman dengan sintaksis API baru, Anda dapat
mulai menggunakannya di kode Anda.
Anda dapat menemukan Web API baru di API Marketplace dan Direktori
API. API Lokapasar adalah platform terbuka di mana siapa pun dapat
membuat daftar API untuk dijual. Direktori API adalah repositori terkontrol
yang dikelola oleh pemilik direktori. Desainer API profesional dapat
mengevaluasi dan menguji API baru sebelum menambahkannya ke portofolio
mereka.
Beberapa situs web API yang populer meliputi :
a) Rapid API – Pasar API global terbesar dengan lebih dari 10.000 API publik
dan 1 juta developer aktif. RapidAPI memungkinkan pengguna untuk
menguji API secara langsung di platform sebelum memutuskan untuk
membeli.
b) Public APIs – Platform ini mengelompokkan API jarak jauh ke dalam 40
kategori khusus, sehingga memudahkan Anda menelusuri dan
menemukan API yang sesuai dengan kebutuhan Anda.
c) APIForThat dan APIList – Kedua situs web ini memiliki 500+ API web,
disertai dengan informasi mendalam tentang cara menggunakannya.

14
 API Gateway adalah alat manajemen API untuk pelanggan perusahaan
yang menggunakan berbagai layanan backend. Gateway API biasanya
menangani tugas-tugas umum seperti autentikasi pengguna, statistik, dan
manajemen harga yang berlaku untuk semua panggilan API.
GraphQL adalah bahasa kueri yang dikembangkan khusus untuk API.
Prioritasnya adalah menyediakan data yang dibutuhkan pelanggan dan tidak
lebih. GraphQL dirancang untuk membantu pengembang menggunakan API
dengan cepat, fleksibel, dan mudah.
Sebagai alternatif dari REST, GraphQL memberi pengembang front-end
kemampuan untuk menanyakan beberapa database, layanan mikro, dan API
menggunakan satu titik akhir GraphQL. Organisasi memilih untuk
membangun API dengan GraphQL karena membantu mereka
mengembangkan aplikasi lebih cepat.
2. Pentingnya Aplikasi Antarmuka
Antarmuka aplikasi atau antarmuka pengguna (UI) penting dalam
pengembangan perangkat lunak karena menyediakan jembatan antara
aplikasi sistem komputer dan pengguna. Antarmuka pengguna mempunyai
efek memasukkan pengguna ke dalam sistem operasi, sehingga komputer
dapat digunakan. Antarmuka pengguna juga memudahkan pengguna untuk
berinteraksi dengan perangkat lunak, perangkat keras, dan aplikasi. Dalam
bidang desain interaksi manusia-komputer industri, antarmuka pengguna
adalah tempat berlangsungnya interaksi antara manusia dan mesin.
Tujuan interaksi manusia-mesin pada antarmuka pengguna adalah untuk
mengoperasikan dan mengendalikan alat berat secara efektif dan umpan
balik dari alat berat membantu operator mengambil keputusan operasional.
Sebuah antarmuka pengguna mencakup perangkat keras dan perangkat lunak
dan hadir untuk berbagai sistem, dan menyediakan cara untuk input,
memungkinkan pengguna untuk memanipulasi sebuah sistem, dan output,
memungkinkan sistem untuk menunjukkan efek dari manipulasi pengguna.
Memahami antarmuka pengguna membantu pengguna memaksimalkan

15
 penggunaan perangkat lunak dan perangkat keras. Dengan pengetahuan
tentang cara berinteraksi dengan UI, pengguna dapat melakukan tugas-tugas
secara cepat dan efisien. Oleh karena itu, antarmuka pengguna sangat
penting dalam pengembangan perangkat lunak karena memudahkan
pengguna untuk berinteraksi dengan sistem dan memaksimalkan
penggunaan perangkat lunak dan perangkat keras.

8.2 Merancang Antarmuka Pengguna

1. Prinsip Dasar Desain Antarmuka Pengguna
1) User Compatibility
Yaitu seorang desainer tidak boleh membuat / merancang interface
untuk dirinya sendiri, karena pada dasarnya sistem diciptakan untuk
kebutuhan user yang lebih dari orang dan berlatar belakang yang berbeda.
2) Product Compatibility
Sebuah aplikasi harus sesuai dengan aslinya agar mendapatkan informasi
yang detail dan akurat di bandingkan dengan manualnya.
3) Task Compatibility
Interface harus bisa membantu dan memudahkan user dalam
menyelesaikan tugasnya.
4) Work Flow Compatibility
Sebuah aplikasi seharusnya mengadopsi sistem manualnya dan di
dalamnya terdapat runtutan kerja dalam menyelesaikan pekerjaan, agar
user tidak kesulitan saat menggunakannya dan jangan menambahkan menu-
menu terlalu banyak karena dapat membuat user menjadi bingung.
5) Consistency
Sebuah sistem harus sesuai dengan sistem nyata serta sesuai dengan
produk yang dihasilkan oleh karena itu desainer harus memperhatikanhal-
hal yang bersifat konsisten pada saat merancang interface.
6) Familiarity

16
 Sebisa mungkin desain interface di buat pada umumnya dari tata letak
maupun modelnya agar membantu user untuk cepat beradaptasi dengan
system.
7) Simplicity
Kesederhanaan perlu diperhatikan dalam membangun sebuah interface
karena user lebih senang dengan hal yang sederhana tetapi berbobot.
8) Direct Manipulation
Sistem harus mempunyai media atau tools yang dapat merubah
interface sesuai keinginan user. Supaya user tidak merasa bosan dengan
tampilan yang monoton.
9) Control
Sistem harus bisa mengatasi pada saat user melakukan kesalahan.
10) WYSIWYG (What You See Is What You Get)
Apa yang didapat adalah apa yang dilihatnya.
11) Flexibility
Sistem harus menyediakan berbagai solusi pada saat menyelesaikan
masalah.
12) Responsiveness
Sistem harus mempunyai respon yang baik karena pada dasarnya sifat
manusia tidak mau menunggu.
13) Invisible Technology
Hendaknya sistem yang dibuat memiliki kelebihan yang tersembunyi.
Bisa saja kelebihan itu berhubungan dengan sistem yang melingkupinya.
14) Robustness
Interaksi manusia dengan komputer yang baikdapat berupa frase-frase
menu atau error handling yang baik dan sopan.
15) Protection
User dapat merasa nyaman dan aman ketika melakukan kesalahan.
16) Easy of Learning & Ease of Use

17
 Kemudahan dalam mengoperasikan perangkat lunak, kemudahan dalam
memahami icon, menu dll. sehingga hanya dengan memandangi atau
belejar beberapa jam saja user sudah bisa memahaminya.

2. Proses Merancang Antarmuka Pengguna

Desain Interface :
1. Struktur Menu Utama

Gambar 3. Struktur Menu Utama

18
2. Struktur Menu Admin

Gambar 4. Struktur Menu Admin

3. Struktur Menu User

Gambar 5. Struktur Menu User

4. Desain Input
Perancangan Input untuk menghasilkan informasi, diperlukan
perancangan input sebagai dasar dalam perancangan suatu sistem, sehingga

19
menghasilkan suatu output yang diharapkan. Perancangan yang terdapat
dalam sistem informasi persewaan buku ini adalah :
a. Halaman Tampilan Login
1) Halaman Login Admin

Gambar 6. Halaman Login Admin

2) Halaman Login User

Gambar 7. Halaman Login User

20
b. Input Form Buku

Gambar 8. Input Form Buku

21
c. Form Persewaan Buku

Gambar 9. Form Persewaan Buku

22
5. Desain Output
a. Bukti Persewaan

Gambar 10. Bukti Persewaan

b. Output Daftar Penyewa

Gambar 11. Output Daftar Penyewa

c. Output Tabel Buku

Gambar 12. Output Daftar Penyewa

23
3. Tantangan dan Tren dalam Merancang Antarmuka Pengguna
Tantangan Teknis
Tantangan teknis dalam merancang antarmuka pengguna meliputi :
a) Kompatibilitas :
Antarmuka pengguna harus dirancang agar sesuai dengan pengguna,
tugas, pekerjaan, dan produk yang disajikan. Tantangan dalam hal ini adalah
memahami kebutuhan pengguna dan menyesuaikan antarmuka dengan
kebutuhan tersebut.
b) Konfigurabilitas :
Antarmuka pengguna harus dirancang agar dapat dikonfigurasi dengan
mudah. Tantangan dalam hal ini adalah memungkinkan kemudahan
personalisasi, konfigurasi, dan rekonfigurasi pengaturan.
c) Kesesuaian dengan perkembangan teknologi :
Antarmuka pengguna harus dirancang agar sesuai dengan
perkembangan teknologi. Tantangan dalam hal ini adalah memperbarui
antarmuka pengguna agar tetap relevan dengan perkembangan teknologi.
d) Kesesuaian dengan kebijakan dan regulasi
Antarmuka pengguna harus dirancang agar sesuai dengan kebijakan dan
regulasi yang berlaku. Tantangan dalam hal ini adalah memahami kebijakan
dan regulasi yang berlaku dan menyesuaikan antarmuka pengguna dengan
kebijakan dan regulasi tersebut.
e) Kesesuaian dengan tren desain
Antarmuka pengguna harus dirancang agar sesuai dengan tren desain
yang sedang berkembang. Tantangan dalam hal ini adalah memahami tren
desain dan memperbarui antarmuka pengguna agar tetap sesuai dengan
tren desain.
Untuk mengatasi tantangan teknis tersebut, perlu memperhatikan
prinsip-prinsip dasar desain antarmuka pengguna, seperti user compatibility,
product compatibility, task compatibility, simplicity, direct manipulation,
control, WYSIWYG (What You See Is What You Get), flexibility,

24
responsiveness, invisible technology, robustness, protection, easy of
learning, dan ease of use. Selain itu, perlu juga memperhatikan tren desain
dan perkembangan teknologi yang sedang berkembang untuk memperbarui
antarmuka pengguna agar tetap relevan dan sesuai dengan kebutuhan
pengguna.
Tren Desain UI/UX
a) Pengalaman 3D dan Immersive
Salah satu tren utama desain UI/UX yang diharapkan pada tahun 2024
adalah peningkatan penekanan pada 3D dan pengalaman yang imersif.
Dengan pesatnya perkembangan teknologi seperti augmented reality (AR)
dan virtual reality (VR), desainer dapat menggunakan teknologi ini untuk
menciptakan pengalaman pengguna yang menarik dan interaktif. Menurut
laporan Statesman, pengiriman perangkat AR dan VR diperkirakan akan
mencapai sekitar 85 juta unit pada tahun 2024. Hal ini menunjukan semakin
populernya teknologi imersif,yang tentunya akan mempengaruhi tren desain
UI/UX.
Desainer harus beradaptasi dengan tantangan desain untuk menciptakan
pengalaman yang kaya, seperti mengoptimalkan antarmuka pengguna untuk
beberapa perangkat dan memastikan pengguna berinteraksi dengan lancar
di lingkungan virtual.
b) Antarmuka Pengguna Suara (VUI) dan Desain Percakapan
Interaksi suara menjadi popular dalam beberapa tahun terakhir berkan
meluasnya adopsi asisten virtual seperti Siri, Alexa, dan Google Assistant.
Tren ini diperkirakan akan berlanjut pada tahun 2024, dengan lebih fokus
pada antarmuka pengguna suara (VUI) dan desain percakapan.
Menurut penelitian eMarketer, jumlah pengguna asisten suara di
Amerika Serikat saja diperkirakan akan mencapai 122,7 juta pada tahun
2023. Hal ini menunjukan meningkatnya permintaan akan interaksi dan
antarmuka suara.

25
 Untuk mengatasi tren ini, desainer harus mempertimbangkan nuansa
interaksi suara dan merancang percakapan yang alami dan intuitif antara
pengguna dan antarmuka digital. Hal ini melibatkan pemahanman nada dan
konteks serta memberikan umpan balik yang jelas melalui isyarat
pendengaran.
c) Antarmuka Milimalis dan Bersih
Tren antarmuka yang bersih dan minimalis telah popular selama
beberapa tahun dan diperkirakan akan terus berlanjut hingga tahun 2024.
Pendekatan desain ini berfokus pada menghilangkan kekacauan,
menyederhanakan antarmuka pengguna, dan menekannakn elemen-elemen
kunci.
Pengguna saat ini kewalahan dengan informasi dan gangguan, sehingga
membuat pendekatan minimalis menjadi lebih baik dan menarik. Hal ini
memungkinkan mereka menavigasi antarmuka dengan cepat dan fokus pada
konten atau Tindakan penting. Desainer dapat mencapai minimalis melalui
penggunaan ruang putih yang luas, tipografi yang bersih, dan palet warna
yang seimbang. Tujuannya adalah untuk memberikan pengalaman pengguna
yang menyenangkan secara visual dan bebas gangguan.
d) Mode Gelap dan Desain Kontras Tinggi
Mode gelap menjadi semakin popular dalam beberapa tahun terakhir,
menghadirkan tampilan antarmuka pengguna yang segar dan modern, ada
tahun 2024, tren ini diperkirakan akan terus berlanjut, dengan meningkatnya
preferensi terhadap mode gelap dan desain kontras tinggi. Mode gelap tidak
hanya menambah estetika tetepi juga memberikan manfaat praktis seperti
mengurangi ketegangan mata, meningkatkan masa pakai baterai pada layer
OLED, dan meningkatkan aksesbilitas bagi pengguna tunanetra.
Desainer harus mempertimbangkan berbagai mode terang dan gelap
saat membuat antarmuka, memastikan bahwa palet warna yang dipili
memberikan kontas dan keterbacaan optimal dalam kondisi pencahayaan
berbeda.

26
e) Scrollytelling, Menceritakan Kisah Melalui Scrolling
Scrollytelling, juga dikenal sebagai rich scrolling, adalah tren berikutnya
yang perlu diperhatikan dalam desain UI/UX pada tahun 2024. Dalam Scroll
storytelling, desainer dapat mengontrol konten yang ditampilkan kepada
pengguna saat mereka menggulir, dengan menggunakan efek paralaks dan
animasi yang menarik, desainer dapat menampilkan konten secara lebih
naratif dan menarik. Hal ini dapat meningkatkan keterlibatan pengguna dan
membuat mereka lebih terlibat dalam cerita yang disampaikan melalui
desain.

27
SOAL
1. Apa yang dimaksud dengan UI (User Interface) dan UX (User Experience)
dalam perancangan antarmuka?
Jawaban :
UI (User Interface) merujuk pada elemen-elemen visual yang digunakan
dalam antarmuka pengguna, seperti tombol, ikon, dan tata letak. UX (User
Experience) adalah pengalaman keseluruhan pengguna saat berinteraksi
dengan antarmuka, termasuk seberapa mudahnya mereka menggunakan
sistem dan seberapa memuaskan pengalaman tersebut.

2. Mengapa perancangan antarmuka yang baik penting dalam pengembangan

perangkat lunak?
Jawaban :
Perancangan antarmuka yang baik meningkatkan kualitas pengalaman
pengguna, meningkatkan efisiensi, dan mengurangi kesalahan pengguna. Ini
dapat meningkatkan penerimaan perangkat lunak dan meminimalkan waktu
dan biaya pelatihan.

3. Apa perbedaan antara wireframe, mockup, dan prototipe dalam perancangan

antarmuka?
Jawaban :
Wireframe adalah representasi dasar antarmuka tanpa desain grafis, mockup
adalah gambaran statis yang lebih mendekati tampilan akhir, sedangkan
prototipe adalah model interaktif yang menciptakan pengalaman nyata
pengguna.

4. Jelaskan prinsip-prinsip desain yang dapat membantu meningkatkan UX

dalam perancangan antarmuka!
Jawaban :
Beberapa prinsip desain yang penting meliputi kesederhanaan, konsistensi,
tata letak yang baik, kontrast yang tepat, dan perhatian terhadap
aksesibilitas.

28
5. Apa yang dimaksud dengan responsif dalam perancangan antarmuka?
Jawaban :
Desain responsif adalah pendekatan yang memastikan bahwa antarmuka
dapat menyesuaikan ukuran dan tata letaknya dengan baik pada berbagai
perangkat, seperti komputer desktop, tablet, dan ponsel, sehingga
memberikan pengalaman pengguna yang konsisten.

6. Mengapa penelitian pengguna (user research) penting dalam perancangan

antarmuka?
Jawaban :
Penelitian pengguna membantu perancang memahami kebutuhan, harapan,
dan masalah pengguna yang sebenarnya. Ini menjadi dasar penting dalam
membuat antarmuka yang memenuhi kebutuhan pengguna dan memberikan
pengalaman yang lebih baik.

7. Apa yang dimaksud dengan uji pengguna (user testing) dalam perancangan
antarmuka?
Jawaban :
Uji pengguna adalah proses di mana pengguna sebenarnya menguji prototipe
atau produk yang ada untuk mengidentifikasi masalah, kesalahan, dan
hambatan dalam penggunaan. Hasil uji pengguna digunakan untuk perbaikan
antarmuka.

8. Jelaskan konsep "hukum Fitts" dan bagaimana itu relevan dalam perancangan
antarmuka!
Jawaban :
Hukum Fitts adalah konsep dalam HCI (Human-Computer Interaction) yang
menggambarkan hubungan antara ukuran target dan jaraknya. Ini relevan
dalam perancangan antarmuka karena membantu memastikan bahwa
elemen antarmuka mudah dijangkau oleh pengguna.

9. Apa peran persona pengguna dalam perancangan antarmuka, dan bagaimana

membuatnya?

29
 Jawaban :
Persona pengguna adalah representasi fiktif pengguna yang membantu
perancang memahami karakteristik, tujuan, dan kebutuhan pengguna
potensial. Membuat persona melibatkan pengumpulan data pengguna dan
penggambaran karakteristik utama mereka.

10. Bagaimana perancangan antarmuka dapat memengaruhi konversi dalam situs

web atau aplikasi e-commerce?
Jawaban :
Perancangan antarmuka yang baik dapat membuat proses pembelian lebih
mudah, memberikan rasa percaya diri kepada pengguna, dan meminimalkan
hambatan. Ini dapat meningkatkan tingkat konversi dan penjualan dalam
situs web atau aplikasi e-commerce.

30
 KESIMPULAN

Perancangan antarmuka (UI/UX design) adalah proses merancang

tampilan dan interaksi pengguna pada perangkat lunak, situs web, atau aplikasi.
Tujuan utamanya adalah menciptakan pengalaman pengguna yang baik dengan
memperhatikan kesederhanaan, konsistensi, tata letak yang baik, dan
responsivitas. Proses perancangan antarmuka melibatkan penelitian pengguna,
pembuatan wireframe, mockup, dan prototipe, serta uji pengguna. Hasil dari
perancangan antarmuka yang baik adalah antarmuka yang mudah digunakan,
efisien, dan memuaskan bagi pengguna, yang pada gilirannya dapat
meningkatkan penerimaan perangkat lunak atau situs web dan meminimalkan
kesalahan pengguna.

31
 DAFTAR PUSTAKA

Nisa, rain, D., Devi Haryanti, & Laryngitis. (2021, February 17). Rancangan Antar
Muka (interface). Dreaming in the rain.
https://bluewordiary.wordpress.com/2017/10/17/rancangan-antar-muka-
interface/

GURUPUJAZ, D. oleh. (2019, January 3). Materi 6 : Antar Muka Pengguna (user
interface). Halaman Utama GURUPUJAZ.
https://gurupujaz.wordpress.com/2019/01/03/materi-6-antar-muka-
pengguna-user-interface/

Ranti, S. (2022, November 29). Pengertian Gui, Cara Kerja, Dan Contohnya
Halaman all. KOMPAS.com.
https://tekno.kompas.com/read/2022/11/30/03150087/pengertian-gui-
cara-kerja-dan-contohnya?page=all

Tentang user interface - penghubung Antara Manusia Dan Komputer. Abdul

Ghanni’s Blog. (n.d.). https://abdulghanni.blogspot.com/2012/10/tentang-
user-interface-penghubung.html

Sukarni.skom, O. (2020, November 24). Prinsip Dasar Desain Antarmuka (User

Interface). BUNGKARNICH.
https://bungkarnich.wordpress.com/2020/11/24/prinsip-utama-
mendesain-antarmuka-interface/

Prastyo, H. (2023, October 6). 5 Tren Desain UI/UX tahun 2024 Yang Harus Kamu
Ketahui!. Inixindo. https://www.inixindo.id/5-tren-desain-ui-ux-tahun-
2024-yang-harus-kamu-ketahui/

32