Rangkuman pwpb user interface aplikasi web statefulldan pengamalan data kls Xll RPL

    

User interface (UI) menjadi salah satu faktor yang menentukan tampilan pada website.user interface (UI)adalah bagian visual dari website,aplikasi software atau device hardware yang memungkinkan seorang user dapat berinteraksi dengan aplikasi atau website serta bagaimana informasi di tampilkan di layarnya.user interface menggabungkan konsep desain visual,desain interasi,dan infrastruktur informasi.user interface menentukan customer base.

A.User interface basis data pada halaman web

User interface mencakup perangkat keras dan perangkat lunak.user interface dalam teknologi informasi identik dengan segala sesuatu yang di rancang menjadi sebuah perangkat informasi yang dapat membuat seseorang melakukan seseorang melakukan sebuah interaksi dengan komputer secara mudah dan sederhana. 

1.konsep user interface dalam program aplikasi

Terdapat banyak aspek vang perlu diperhatikan pada saat membuat konsep user enterface yang tepat. User interface mengacu beragam aplikasi teknologi mulai dari electronic display, software aplikasi komputer, aplikasi web, aplikası 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.

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 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 kesalahan yang mereka lakukan, akan tetapi seharusnya menyediakan sarana untuk mem- perbaiki 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

Tipe-tipe user interface di antaranya sebagai berikut.

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 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

UI 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. 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

Terdapat tiga teknik an- armuka (interface), yaitu bagai berikut.

1) Teknik Linguistic Styles Linguistic styles identik dengan penyampaian "aksi" melalui bahasa yang mengerti oleh komputer Beberapa ciri teknik jenis ini antara lain menggunak bahasa yang dimengerti oleh komputer sebagai bagian kecil dari bahasa manusia memasukkan aksi melalui papan ketik alfabet yang ditulis atau diketik, seru 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 mani pulasi 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 lang sung 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.

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.

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 toeltips, ikon, progress bar, notifikasi. kotak pesan, dan modal windows

B. Merancang Interfar

Setelah mengetahui karakteristik dari uwer, terdapat beberapa hal yang perlu dipertimbangkan ketika merancang interface, yaitu

1) Menciptakan Konsistensi dan Menggunakan Elemen UI Umum Dengan menggunakan elemen umum di Ul, 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. 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 mengu- rangi 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 ke- salahan. Penggunaan berbagai elemen UI untuk memberikan info status terkini dapat bermanfaat menambah informasi bagi user.

C. Tipe-Tipe Interaksi Antarmuka (Interface)

Pemilihan tipe interaksi yang tepat dapat memberikan efek yang baik terhadap dialog, antara lain sebagai berikut.

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 umum nya, 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 (keran cuan) 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. 

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. Spreadsheet terdiri atas sel yang dapat berisi nilai atau formula

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. Satu

layar dapat terdiri atas lebih dari satu window yang memungkinkan lebih dari satu tugas aktif pada saat yang sama. Ikon merupakan sebuah gambar kecil yang digunakan untuk merepresentasikan windows yang sedang berada dalam keadaan tertutup (closed). Menu adalah teknik interaksi yang umum digunakan bahkan oleh sistem non-window sekalipun. Menu menampilkan pilihan operasi atau layanan yang diberikan/tersedia oleh sistem. User dapat memperoleh petunjuk mengenai operasi apa saja pada sistem melalui menu. Pointer merupakan komponen yang penting dalam sistem WIMP karena interaksi pada sistem ini memerlukan aktivitas menunjuk (pointing) dan memilih (selecting).

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. Tanpa bahasa pun, kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat universal. Tujuan sebuah user interface adalah mengomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa sangat efektif untuk membantu pengertian, karena bahasa merupakan alat tertua yang dipakai orang untuk berkomunikasi sehari-harinya.

e. Tujuan Perancangan Antarmuka Pengguna (User Interface)

Tujuan dari perancangan antarmuka pengguna adalah merancang interface yang efektif untuk sistem perangkat lunak. Efektif artinya siap digunakan, dan hasilnya sesuai dengan kebutuhan penggunanya. 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.

Beberapa karakteristik dari GUI antara lain sebagai berikut.

3. Program User Interface Sederhana

Makin majunya perkembangan teknologi di era digital, perangkat canggih yang pintar dengan user interface yang mudah dipahami dan mampu mempermudah kehidupan sehari-hari user akan makin diminati. Sistem yang interaktif dapat menye diakan 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 ke mudahan pengguna dalam menggunakannya. Informasi dapat bersifat statis atau dinamis ketika disajikan, masing-masing baik dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula. 

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. Oleh karena itu, siklus hidup sebuah sistem informasi organisası berhubungan dengan siklus hidup sistem database yang mendukungnya. DBMS (Database Management System) adalah sistem yang secara khusus dibuat untuk memudahkan pemakaian dalam mengelola basis data. 

a. Pengujian Aplikasi Web

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 mendapat kan tambahan informasi mengenai masalah dari aplikasi Sasaran utama testing identik dengan menemukan error, namun testing tidak mengarah ke perbaikan kuali tas walaupun error telah terdeteksi dan dihilangkan. Sedangkan level testing adalah sebagai berikut