Materi PWPB Bab 1 Bagian A Kelas XII RPL: User Interface Basis Data pada Halaman Web

Materi PWPB Bab 1 Bagian A Kelas XII RPL: User Interface Basis Data pada Halaman Web

Muhammad Hujjatul Isdihar

Agustus 05, 2024

A. User Interface Basis Data Pada Halaman Web

User interface hadir untuk berbagai sistem dan menyediakan cara input di mana pengguna dapat memanipulasi sebuah sistem dan output di mana sistem menunjukkan efek dari manipulasi pengguna. User interface dirancang menjadi sebuah perangkat informasi yang dapat membuat seseorang melakukan sebuah interaksi dengan komputer secara mudah dan sederhana. 

1. Konsep User Interface dalam Program Aplikasi 

User interface mengacu beragam aplikasi teknologi mulai dari electronic display, software aplikasi komputer, aplikasi web, aplikasi mobile, hingga aplikasi informasi publik. Aplikasi informasi publik identik dengan peralatan sistem informasi publik yang dirancang sedemikian rupa yang ditujukan untuk beragam kondisi user, baik secara usia, gender, latar belakang kultural, tingkat pemahaman dan pendidikan bahkan kondisi keterbatasan fisik yang berbeda.

a. Kualitas Desain User Interface

Desain user interface (UI) atau rekayasa antarmuka pengguna merupakan desain user interface untuk mesin dan perangkat lunak seperti komputer, peralatan rumah, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan kegunaan dan pengalaman pengguna. Tujuan dari desain antarmuka pengguna adalah membuat interaksi pengguna yang sederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna. Kualitas yang diperhatikan dalam desain user interface antara lain sebagai berikut.

1. Concision 

Membuat antarmuka yang berkualitas adalah untuk membuatnya ringkas dan jelas pada saat yang sama.

2. Kejelasan Interface 

Menghindari ambiguitas dengan membuat segalanya jelas melalui bahasa, aliran, hierarki, dan metafora untuk elemen visual.

   

3. Familiarity

Unsur-unsur tertentu dalam kehidupan sehari-hari masih sangat melekat pada pengguna. Metafora kehidupan nyata dapat digunakan untuk memudahkan pengguna dalam menggunakan interface.

4. Estetika

Interface yang terlihat bagus akan membuat waktu pengguna senang dan nyaman dalam menggunakan interface.

5. Responsiveness

Tampilan antarmuka harus bisa memberikan umpan balik yang baik kepada pengguna tentang apa yang terjadi dan apakah masukan pengguna sedang berhasil diproses.

6. Consistency

Menjaga interface menjadi konsisten di seluruh aplikasi adalah suatu hal yang penting karena memungkinkan pengguna untuk mengenali pola penggunaan.

7. Forgiveness 

Sebuah interface yang baik tidak harus "menghukum" pengguna atas kesalahan yang mereka lakukan, akan tetapi seharusnya menyediakan sarana untuk memperbaiki kesalahan tersebut.

8. Efficiency Time

Interface yang baik harus bisa membuat pengguna lebih produktif melalui jalan pintas dan desain yang baik.

b. Tipe-Tipe User Interface 

1. Graphical User Interface (GUI)

GUI adalah tipe antarmuka yang digunakan oleh pengguna untuk berinteraksi dengan sistem operasi melalui gambar-gambar grafik, ikon, dan menggunakan perangkat penunjuk (pointing device) seperti mouse atau track ball. 

2. Command Line Interface (CLI)

CLI (Command Line Interface) adalah tipe antarmuka di mana pengguna berinteraksi dengan sistem operasi melalui text terminal. CLI adalah sebuah bentuk antarmuka antara sistem operasi dan pemakai di mana pemakai mengetikkan perintah-perintah dengan menggunakan perintah dalam bentuk teks dan sebuah metode untuk memasukkannya.

3. Touchscreens

Menerima masukan dengan sentuhan jari.

4. Gesture Interfaces

UI grafis yang menerima input dalam bentuk gerakan tangan, atau gerakan mouse sketsa dengan mouse komputer.

5. Direct Manipulation Interface

Antarmuka langsung yang memungkinkan pengguna untuk memanipulasi objek yang disajikan kepada mereka.

6. Search Interface

Sebuah kotak pencarian situs ditampilkan, serta merepresentasikan visual dari hasil pencarian.

7. Voice User Interfaces

Komponen yang menerima masukan dan memberikan output dengan menghasilkan perintah suara. Input pengguna dibuat dengan menekan tombol, atau menanggapi secara lisan ke antarmuka.

8. Natural-Language Interfaces 

Digunakan pada mesin pencari dan pada halaman web. Jenis penggunaannya adalah dalam bentuk pertanyaan dan menunggu tanggapan.

c. Teknik User Interface 

1. Teknik Linguistic Styles 

Linguistic styles identik dengan penyampaian "aksi" melalui bahasa yang di mengerti oleh komputer. 

2. Teknik Key Modals Styles 

Key modals style identik dengan penyampaian aksi melalui penekanan tombol- tombol yang diprogram sebelumnya untuk menjalankan fungsi-fungsi. .

3. Teknik Direct Manipulation Style

Direct manipulation style identik dengan penyampaian perintah melalui manipulasi objek tertentu. 

2. Rancang Bangun User Interface

Teknik antarmuka yang baik memudahkan dalam hal menyelesaikan tugas yang ada tanpa menarik perhatian yang tidak perlu pada dirinya sendiri Proses perancangan harus menyeimbangkan fungsi teknis dan elemen visual untuk menciptakan sistem yang tidak hanya bersifat operasional, namun juga dapat digunakan dan disesuaikan untuk mengubah kebutuhan pengguna.

Desain grafis dan tipografi digunakan untuk mendukung kegunaannya, memengaruhi bagaimana pengguna melakukan interaksi tertentu dan meningkatkan daya tarik estetika desain. Desain estetika dapat meningkatkan atau mengurangi kemampuan pengguna untuk menggunakan fungsi antarmuka.

a. Memilih Interface Elements 

Terdapat beberapa bentuk elemen interface, yaitu sebagai berikut.

1. Komponen navigasi yang terdiri atas breadcrumb, slider, kolom pencarian, pagination, slider, tag, dan icons.

2. Input control yang terdiri atas tombol, text field, checkbox, radio button, daftar dropdown, daftar kotak, toggles, dan date field.

3. Containers yang salah satunya adalah accordion.

4. Komponen informasi yang terdiri atas tooltips, ikon, progress bar, notifikasi, kotak pesan, dan modal windows.

b. Merancang Interface

Hal yang perlu dipertimbangkan ketika merancang interface, yaitu sebagai berikut.

1. Menciptakan Konsistensi dan Menggunakan Elemen UI Umum

Dengan menggunakan elemen umum di UI, pengguna merasa lebih nyaman dan mampu menyelesaikan sesuatu lebih cepat. Hal ini juga penting untuk membuat suatu pola dalam bahasa, tata letak dan desain di seluruh situs untuk membantu memfasilitasi efisiensi. 

2. Menjaga Antarmuka yang Sederhana 

Interface terbaik hampir tidak terlihat oleh pengguna. Mereka menghindari elemen yang tidak perlu dan harus terstruktur dengan bahasa yang jelas pada label dan di pesan interface.

3. Strategi Menggunakan Warna dan Tekstur 

Anda dapat mengarahkan perhatian user dari dan ke item tertentu, menggunakan warna, cahaya, kontras, dan tekstur untuk tujuan tertentu. Gunakan tipografi untuk membuat penjernihan dan kejelasan. Hati-hati dalam memilih metode membentuk sebuah bentuk gambaran tertentu. Berbagai ukuran, font, dan pengaturan teks yang tepat dapat membantu meningkatkan scanability dan mudah dibaca user.

4. Page Layout Harus Dipertimbangkan Berdasarkan Suatu Tujuan Tertentu 

Pertimbangkan spasi antara item pada halaman dan struktur halaman berdasar- kan kepentingan dan tujuan. Penempatan item yang terencana dapat membantu menarik perhatian langsung ke bagian yang paling penting dari informasi dan dapat membantu scanning dan mudah dibaca oleh user.

5. Pikirkan tentang Default

Secara teliti, pikirkan dan antisipasi adanya user yang kebingungan saat tidak sengaja mengutak atik konfigurasi. Anda dapat membuat default yang mengurangi kepanikan pada user.

6. Pastikan Bahwa Sistem Berjalan Sesuai dengan Apa yang Terjadi saat Itu Juga 

Selalu menginformasikan pengguna Anda tentang beberapa informasi penting, misalnya lokasi, suatu tindakan sistem, perubahan di negara bagian, atau kesalahan. Penggunaan berbagai elemen UI untuk memberikan info status terkini dapat bermanfaat menambah informasi bagi user.

c. Tipe-Tipe Interaksi Antarmuka (Interface)

1. Command Line Interface (CLI) 

Merupakan bentuk dialog interaktif yang pertama digunakan dan masih dipakai hingga saat ini. Dengan CLI, user memberikan instruksi secara langsung kepada komputer menggunakan tombol fungsi, karakter tunggal, dan command dalam bentuk singkat maupun panjang. CLI memungkinkan user mengakses dengan cepat fungsi sistem dan beberapa tools.

2. Menu 

Pada menu "driven interface", sekumpulan opsi/pilihan yang tersedia bagi user ditampilkan pada layar dan dapat dipilih dengan menggunakan mouse atau tombol numerik maupun alfabetik. Pilihan pada menu harus merepresentasikan arti dan dikelompokkan berdasarkan suatu kategori agar mudah dikenali dan memudahkan user memilih sesuai dengan tugas yang akan dilaksanakan.

3. Natural Language 

Natural language merupakan mekanisme komunikasi yang atraktif. Pada umumnya, komputer tidak dapat mengerti instruksi yang dituliskan dalam bahasa sehari-hari. Natural language dapat mengerti input tertulis (written input) dan suara (speech input). Namun, masih ada kekurangan dalam hal ambiguity (kerancuan) pada aspek sintaks dan semantik.

4. Q/A & Query Dialogue 

Q/A & Query Dialogue merupakan mekanisme sederhana untuk input pada beberapa aplikasi. User diberikan serangkaian pertanyaan umumnya dalam bentuk jawaban ya/tidak (Y/N), pilihan ganda atau dalam bentuk kode, dan dibimbing tahap demi tahap selama proses interaksi. Interface ini mudah dipelajari, namun terbatas fungsinya.

5. Form-Fills and Spreadsheet

Form-fills utamanya digunakan untuk aplikasi pemasukan (data entry) dan pencarian (data retrieval) data. Bentuk form-fill adalah berupa tampilan yang menyerupai selembar kertas dengan beberapa slot/field untuk diisi. Spreadsheet adalah variasi dari form-fill. 

6. WIMP Interface (Windows, Icons, Menu, dan Pointers) 

WIMP merupakan default interface untuk sebagian besar sistem komputer interaktif yang digunakan saat ini terutama pada PC dan desktop workstation. Window merupakan area layar yang berperilaku seperti terminal independen dan berisi grafik atau teks yang dapat dipindahkan dan diubah ukurannya.

d. Bahasa dalam User Interface 

Meski pada umumnya panduan user interface menyarankan agar ikon tidak diberi tulisan supaya tetap mandiri dari bahasa, namun elemen user interface lain seperti teks pada tombol, caption window, atau teks-teks singkat di sebelah kotak input dan tombol pilihan semua menggunakan bahasa. Tujuan sebuah user interface adalah mengomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. 

e. Tujuan Perancangan Antarmuka Pengguna (User Interface)

Tujuan dari perancangan antarmuka pengguna adalah merancang interface yang efektif untuk sistem perangkat lunak. Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). GUI memberikan keuntungan sebagai berikut.

1. Mudah dipelajari pengguna yang pengalaman dalam menggunakan komputer.

2. Berpindah dari satu layar ke layar yang lain tanpa kehilangan informasi.

3. Akses penuh pada layar untuk beberapa macam tugas/keperluan.

Tabel 1.1 Karakteristik GUI

3. Program User Interface Sederhana 

Perangkat canggih yang pintar dengan user interface yang mudah dipahami dan mampu mempermudah kehidupan sehari-hari user akan makin diminati. Sistem yang interaktif dapat menyediakan cara untuk menyajikan berbagai macam informasi untuk pengguna.

Penyajian informasi dapat berupa penyajian langsung dari input yang diberikan (seperti teks pada word processing) atau disajikan dengan grafik. Kunci dari sebuah desain antarmuka (user interface) website atau aplikasi yang menarik adalah kemudahan pengguna dalam menggunakannya.

Tabel 1.2 Karakteristik Penyajian Informasi 

4. Aplikasi User Interface untuk Mengelola Basis Data

Database merupakan komponen dasar dari sebuah sistem informasi dan pengembangan serta penggunaannya sebaiknya dipandang dari perspektif kebutuhan yang lebih besar. Oleh karena itu, siklus hidup sebuah sistem informasi organisasi berhubungan dengan siklus hidup sistem database yang mendukungnya. DBMS (Database Management System) adalah sistem yang secara khusus dibuat untuk memudahkan pemakai dalam mengelola basis data. Pada pendekatan database, setiap file yang ada pada tiap departemen disimpan pada sebuah server database dengan sebutan baru, yaitu table. Lalu, setiap program dapat mengakses bagian dari database sesuai kebutuhan.

a. Pengujian Aplikasi Web 

Sebelum di luncurkan haruslah terlebih dahulu untuk dilakukan pengujian agar aplikasi web yang dibuat tidak membahayakan pengguna dan membuat pengguna dapat nyaman membuka aplikasi web kita. Pengujian berkaitan dengan instrumen penting dalam pengembangan aplikasi web untuk mendapatkan produk yang berkualitas dan seperti yang diharapkan pengguna. Testing (penyajian) sebagai sebuah aktivitas untuk mengevaluasi kualitas dari sebuah produk dan untuk memperbaiki produk dengan mengidentifikasi kerusakan dan masalahnya. Kesalahan (error) terjadi jika hasil dari jalannya testing tidak sama dengan hasil yang diharapkan. 

b. Level Testing

Testing dikatakan berhasil jika error terdeteksi, terutama jika berhasil mendapatkan tambahan informasi mengenai masalah dari aplikasi. Sasaran utama testing identik dengan menemukan error, namun testing tidak mengarah ke perbaikan kualitas walaupun error telah terdeteksi dan dihilangkan. 

Tabel 1.3 Jenis-Jenis Level Testing 

Muhammad Hujjatul Isdihar