Materi PWPB Bab 1: User Interface Aplikasi Web Statefull dan Pengamanan Data
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. Tiap-tiap sistem operasi memiliki nama tersendiri untuk komponen GUI-nya. Pada Apple Mac OS X, GUI-nya disebut "Aqua". Microsoft memberi nama GUI pada Windows XP sebagai "Lunar" dan GUI Windows Vista sebagai "Aero". Pada Linux, ada dua pengembangan utama desktop environment, yang masing-masing menghasilkan produk KDE (K Desktop Environment) dan GNOME.
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. Pengguna memberikan input dengan mengetikkan perintah berbasis teks dengan keyboard komputer dan sistem menyediakan output dengan mencetak teks pada monitor komputer. Pengguna CLI biasanya adalah administrator sistem berbasis sistem operasi LINUX.
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. Beberapa ciri teknik jenis ini antara lain menggunakan bahasa yang dimengerti oleh komputer sebagai bagian kecil dari bahasa manusia, memasukkan aksi melalui papan ketik alfabet yang ditulis atau diketik, serta adanya aturan penulisan (syntax) dan semantic untuk menyatakan perintah.
2. Teknik Key Modals Styles
Key modals style identik dengan penyampaian aksi melalui penekanan tombol- tombol yang diprogram sebelumnya untuk menjalankan fungsi-fungsi. Beberapa ciri teknik jenis ini antara lain menggunakan instruksi langkah demi langkah, input aksi melalui tombol fungsi atau tombol alfabet, serta digunakan dalam sistem berjalan.
3. Teknik Direct Manipulation Style
Direct manipulation style identik dengan penyampaian perintah melalui manipulasi objek tertentu. Beberapa ciri teknik jenis ini antara lain ditampilkannya penunjuk untuk memanipulasi objek, ditampilkannya objek untuk interaksi pengguna, respons seketika pada fungsi objek, serta perintah diterapkan langsung pada objek.
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, me- mengaruhi 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