User Interface Aplikasi Web Statefull dan Pengamanan Data
User interface (UI) menjadi salah satu faktor yang menentukan tampilan pada website. Ul bisa menjadi faktor apakah seseorang tertarik untuk mengunjungi suatu website tertentu. Apabila pengguna lain tertarik dengan tampilan interface web, maka kemungkinan besar mereka akan mengunjungi website Anda kembali. Satu hal yang harus diketahui oleh programmer, yaitu betapa pentingnya desain pada user interface. Bahkan kadang bentuk sebuah tombol saja bisa menentukan apakah seseorang mengerti bagaimana menavigasi website atau aplikasi tersebut. Desain user interface menentukan bagaimana pengguna dapat berinteraksi dengan website dan aplikasi tersebut. User interface juga menentukan apakah pengunjung website atau pengguna aplikasi dapat menavigasi website atau aplikasi dengan mudah. Guna mempelajari user interface basis data pada halaman web, mari kita mempelajari materi yang akan dibahas pada bab ini.
User interface (UI) adalah bagian visual dari website, aplikasi software atau device hardware yang memungkinkan seorang user dapat berinteraksi dengan apli- kasi atau website serta bagaimana informasi ditampilkan di layarnya. User interface menggabungkan konsep desain visual, desain interasi, dan infrastruktur informasi. Tujuan dari user interface, yaitu meningkatkan usability dan user experience
A. User Interface Basis Data pada Halaman Web
User interface mencakup perangkat keras dan perangkat lunak, 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. Media yang dapat digunakan pengguna untuk berinteraksi dengan aplikasi atau situs web di antaranya dapat berupa tampilan layar, keyboard, mouse, dan penampilan desktop.
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.
a. Kualitas Desain User Interface
Desain user interface (UI) atau rekayasa antarmuka pengguna merupakan de- sain 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 : untuk membuatnya ringkas dan jelas pada saat yang sama.
2) Kejelasan Interface : membuat segalanya jelas melalui bahasa, aliran, hierarki, dan metafora untuk elemen visual.
3) Familiarity : untuk memudahkan pengguna dalam menggunakan interface.
4) Estetika : 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 ber- hasil 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 yang mereka lakukan, akan tetapi seharusnya menyediakan sarana un perbaiki kesalahan tersebut.
8) Efficiency Time :Interface yang baik harus bisa membuat pengguna lebih produktif melalui jalan 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. Microsoft memberi nama GUI pada Windows XP sebagai "Lunar" dan GUI Windows Vista sebagai "Aero".
2) Command Line Interface (CLI)
CLI (Command Line Interface) adalah tipe antarmuka di mana pengguna berinter- aksi 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 memasukinya.
3) Touchscreens
Menerima masukan dengan sentuhan jari.
4) Gesture Interfaces
Ul grafis yang menerima input dalam bentuk gerakan tangan, atau gerakan mouse sketsa dengan mouse komputer.
5) Direct Manipulation Interface
Antarmuka pengguna 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 meng- hasilkan perintah suara.
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
Terdapat tiga teknik an- tarmuka (interface), yaitu sebagai berikut:
1) Teknik Linguistic Styles
leguistic 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 mani- pulasi objek tertentu.
2. Rancang Bangun User Interface
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.
a. Memilih Interface Elements
User lebih terbiasa dengan elemen interface yang bekerja dengan cara tertentu, konsisten dan dapat diprediksi dalam membuat struktur pilihan dan tata letak interface. 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
Setelah mengetahui karakteristik dari user, terdapat beberapa 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.
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.
4) Page Layout Harus Dipertimbangkan Berdasarkan Suatu Tujuan Tertentu
Pertimbangkan spasi antara item pada halaman dan struktur halaman berdasar- kan kepentingan dan tujuan.
5) Pikirkan tentang Default
Secara teliti, pikirkan dan antisipasi adanya user yang kebingungan saat tidak sengaja mengutak atik konfigurasi.
6) Pastikan Bahwa Sistem Berjalan Sesuai dengan Apa yang Terjadi saat Itu Juga
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.
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.
3) Natural Language
Natural language merupakan mekanisme komunikasi yang atraktif.
4) Q/A & Query Dialogue
Q/A & Query Dialogue merupakan mekanisme sederhana untuk input pada beberapa aplikasi.
5) Form-Fills and Spreadsheet
Form-fills utamanya digunakan untuk aplikasi pemasukan (data entry) dan pencarian (data retrieval) data.
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.
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.
e. Tujuan Perancangan Antarmuka Pengguna (User Interface)
Tujuan dari perancangan antarmuka pengguna adalah merancang interface yang efektif untuk sistem perangkat lunak.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.
3. Program User Interface Sederhana
Penyajian informasi dapat berupa penyajian langsung dari input yang diberikan (seperti teks pada word processing) atau disajikan dengan grafik.
4. Aplikasi User Interface untuk Mengelola Basis Data
Database merupakan komponen dasar dari sebuah sistem informasi dan pe ngembangan serta penggunaannya sebaiknya dipandang dari perspektif kebutuhan yang lebih besar.
a. Pengujian Aplikasi Web
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 mendapat- kan tambahan informasi mengenai masalah dari aplikasi.
Tidak ada komentar:
Posting Komentar