FORM (Formulir )

FORM (Formulir )

Salah satu ciri situs yang interaktif adalah adanya form didalam halaman web, form tersebut bisa berintegrasi dengan pengunjung situs. Form (Formulir) adalah sebuah fondasi yang elemen interaktif yang mencangkup seperti bidang teks, kotak cek, tombol radio, dan tombol Submit. Ketika merancang situs web dan faktor kegunaan informasi harus akurat dan jelas sehingga pengunjung tidak memiliki keraguan ketika pengunjung ingin masuk kedalam format formulir yang disediakan.

A.   Prinsip Desain Form

Pengunjung membenci pengisian formulir yang rumit dan mereka ingin menyelesaikan dengan waktu yang singkat. Semua ini berkaitan dengan prinsip form.

1.      Mengurangi upaya fisik

Maksudnya adalah menghindari pengunjung banyak menggunakan “keybord” tapi harus meminimalkan mengunakan klik, penekanan tombol, gerakan mouse.

2.      Mengurangi Upaya kognitif

Form harus sedarhana dan mudah dimengerti, memilih halam visual yang tidak membingungkan.

3.      Hindari informasi yang dianggap tidak perlu

Pengunjung tidak suka dengan pernyataan-pernyataan yang tidak relevan untuk kebutuhan mereka sendiri (exs: minat, hobi, dan lain sebaginya)

B.   Kontrol Masuk

Dalam formulir ada dua katagori umum kontrol yang menangkap masuknya pengunjung :

1.    Kontrol predefined seperti tombol radio, checkbox, dan daftar kotak

2.    Kontrol teks yang memungkinkan pengunjung masuk bebas

Ø Kontrol Predefined

Meminimalkan pengunjung dan memastikan akurasi karena ada sejumlah pilihan, semua dijamin akan berlaku. Misalnya, kesalahan ketik dan kesalahan ejaan dieliminasi pada nama-nama negara jika kita memberikan daftar drop-down pilihan (semua mungkin dieja dengan benar). biasanya menggunakan kontrol pilihan yang telah ditetapkan jadi pengunjung harus memilih.

Ø Tombol Radio

Tombol radio (atau pilihan tombol dalam Microsoft terminologi) yang digunakan dalam situasi satu pilihan yang diperbolehkan, ("Pilih salah satu opsi berikut.") gambar dibawah ini menunjukkan sekelompok tombol radio untuk memilih satu tahun di sekolah. Tombol radio adalah lingkaran, sedangkan kotak centang HTML adalah persegi.

Ø Heckbox

Checkbox mirip dengan tombol radio, tapi mereka digunakan ketika pilihan tidak saling eksklusif. Artinya, pengunjung dapat memilih beberapa item dari dalam grup kotak centang ("Pilih semua yang berlaku "). Gambar dibawah ini menunjukkan sekelompok kotak centang setelah pengguna membuat satu pilihan. Perhatikan bahwa kotak centang yang Anda harapkan, sebuah kotak persegi.

a.    Daftar Kotak

Ketika begitu banyak pilihan tombol radio, kotak konteng yang mengambil ruang layar, tapi kita bisa menerapkan daftar kotak yang biasanya digunakan untuk memilih Negara, tanggal, serta menu berikutnya.

b.    Daftar Kotak Drop-down

Jika Anda menetapkan ukuran = "1", hanya satu pilihan tampilan awal dalam daftar kotak, dan sisanya dari daftar turun ke bawah ketika pengunjung mengklik pada tanda panah gulir,

c.    Daftar Kotak memilih Kelipatan

Jika atribut multiple termasuk dalam tag <select>, apakah drop-down atau bergulir, pengunjung dapat memilih beberapa elemen dari daftar,

d.    Pengelompokan Daftar Kotak dibawah Header

Item <option> individu dalam <select> dapat dikelompokkan di bawah header, khusus menggunakan wadah <optgroup>.

1.    Tanda baca dan format Kontrol masuk Teks

Jika di dalam tempat memiliki tanda baca, seperti tanda hubung, garis miring, atau ruang, setidaknya memberikan contoh format yang kita harapkan.

2.    Menyembunyikan Data Masuk pada Layar

Maksudnya adalah agar orang lain tidak bisa melihat tampilan data yang sebenarnya. Sebagai contoh, "password" biasanya tidak menampilkan karakter atau kata pada layar dimana orang lain bisa melihat, namun menampilkan tanda bintang atau titik ketika pengguna memasukan password.

C.   Formulir Penyelesaian

memfalidasi data secara lokal biasanya menggunakan JavaScript, untuk memastikan data yang kita kirim jelas dan valid. setelah data tersebut divalidasi kita mengirimkan ke server web.

1.    Formulir Validasi

Meskipun buku ini tidak begitu menjelaskan tentang bagaimana menggunakan JavaScript untuk validasi, tapi membahas jenis validasi yang harus dilakukan. Validasi pada klien umumnya terbatas pada kelengkapan dan format. Sebagai contoh, kita memvalidasi nomor pelanggan untuk memastikan tidak kosong jumlah angka dan biaya tertentu. dalam dokumen HTML pastikan bahwa nomor pelanggan cocok dengan jumlah pelanggan yang sudah ada dalam data base, validasi tersebut akan memerlukan permintaan server ke data base pelanggan.

2.    Tombol Kirim

Tombol submit, tentu saja, menyerahkan formulir dan semua datanya menggunakan aksi dan metode yang ditentukan dalam tag <form>. Tombol dapat berupa standar, browser dihasilkan tombol Submit, atau tombol kustom dibuat dalam program editing gambar.

3.    Tombol Reset

tombol Reset fungsinya mengembalikan ke awal halaman. Seperti tombol Kirim, tombol ulang disediakan browser. menggunakan kode seperti ini:

D.   Struktur Transaksi

Salah satu fungsi Struktur transaksi adalah untuk mengidentivikasi informasi dan kemudian membagi konten ke halaman individu. kita harus menetukan bagaimana struktur transaksi di setiap halaman. contoh, jika kita memiliki interaksi dari pengunjung yang membutuhkan banyak informasi-informasi.

1.    Wizards

Wizard adalah interaksi yang memuat satu halaman langkah demi langkah dalam urutan yang ditetapkan. Misalnya, satu halaman wizards menempatkan item yang akan dijual sesuai dengan pesanan sedangkan halaman lain untuk memasukkan informasi pengiriman, dan halaman lain untuk memasukkan informasi pembayaran.

2.    Control Panel

Kita bisa menempatkan seluruh interaksi pada halaman tunggal, Gambar 5.2 menyajikan bagian kontrol panel untuk mengkonfigurasi komputer kustom, pengunjung dengan kontrol panel bisa dengan mudah dan cepat menyelesaikan tugas mereka.

E.    Memasukan Formulir Page Layout

Kita perlu merancang layout untuk setiap halaman. Bab 4 telah menjelaskan bagaimana pedoman untuk tata letak halaman termasuk karakteristik garis, warna, grid, dan ruang putih untuk membuat halaman. Namun demikian, kita perlu mempelajari cara memasukan halaman tambahan.

1. Mengontrol Fokus kursor dan Ketertiban Tab

Sebuah kontrol dikatakan memiliki bentuk fokus jika kursor berada di atasnya, dalam sumber kode HTML. Misalnya, gambar 6.1 bagaimana tombol tab akan secara default, melintasi bentuk kontrol kiri ke kanan kemudian atas ke bawah. Tapi supaya pengunjung bisa lebih mudah memahami sebaiknya kolom vertikal kiri sebelum pergi ke atas kanan,

2. Kontrol Masukan dengan pesan

kita harus memberikan kontrol masuk pengunjung dalam urutan yang diharapkan.

F.    Dukungan Pengunjung

Pada dasarnya perancang sistem komputer berusaha membuat instruksi yang luas tapi terpisah dalam Bantuan dokumen untuk menyelamatkan pengguna yang bingung dengan kesalahan dengan kondisi komputer mereka yang terkadang sering error. Agar pengunjung tidak kesulitan dalam menyelesaikan tugas atau yang ingin dicari, berikut ini beberapa pendukung antara lain :

1.    Instruksi
Instruksi sederhana yaitu tentang petunjuk format data masuk, seperti menunjukkan "MM / DD / YYYY" berdekatan dengan data tanggal

2.    Bantuan Dokumen

Sistem Bantuan bisa sederhana terintegrasi untuk beberapa tugas situs, banyaknya kata terpisah yang terdiri dari puluhan, bahkan ratusan, dari halaman. Bantuan dapat berbentuk tindakan, seperti tutorial langkah demi langkah melakukan tugas-tugas tertentu.

3.    Feedback
umpan balik yang memberitahu bahwa Pengunjung berada di jalur yang benar atau salah. Misalnya, jika pengunjung memasukkan informasi pengiriman pada satu halaman dan informasi kartu kredit pada halaman berikutnya, situs harus menampilkan kembali semua pesan informasi pada halaman konfirmasi sebelum mengirimkan, supaya pengunjung yakin bahwa sistem menerima data mereka untuk masuk. jika kesalahan muncul, umpan balik dapat memberitahukan pengunjung secepatnya, supaya kesalahan bisa diperbaiki.

4.    Penanganan Kesalahan

Kita harus merancang situs untuk mengatasi ketika terjadi kesalahan, desain kontingensi disebut pro-cess, atau "ketika hal-hal buruk/kesalahan terjadi pada orang atau pengunjung."

Pesan kesalahan harus:

a.         Jadilah membantu memperbaiki kesalahannya dan memberi tahu apa yang harus dilakukan pengunjung untuk memperbaiki masalah.

b.         Jadilah jelas dan benar dalam bahasa non-teknis diakui oleh para pengunjung. "Silakan gunakan huruf abjad, angka, dan garis bawah" supaya pengunjung bisa dengan mudah memahaminya.

c.         Jadilah singkat.

d.         Bersikaplah sopan, bijaksana, tidak menuduh, dan minta maaf. Pesan kesalahan tidak pernah menyalahkan pengguna, bahkan harus Sebaliknya, situs harus memikul kesalahan.

e.         hindari menjadi lucu, imut, atau menjengkelkan. Seorang pengunjung pada titik kritis jarang suka humor.

f.          Menonjolkan halaman dengan bidang atau item kesalahan yang disorot. Metode Khas menyoroti termasuk kode warna, tanda bintang berwarna, atau ikon error, seperti tanda seru pada segitiga kuning yang digunakan oleh aplikasi Windows. gambar 7.2 menunjukkan bentuk dengan kesalahan ditunjukkan dengan tanda bintang merah.

G.    Formulir Kontrol Desain Visual

Suatu bentuk yang dirancang dengan baik sangat bermanfaat secara visual menarik dengan desain situs secara keseluruhan. Semua pedoman desain yang kita telah melihat di bab sebelumnya tata letak, warna, grafis, dan tipografi berlaku untuk bentuk-bentuk seperti yang mereka lakukan untuk setiap elemen lain di situs tersebut.
Ada banyak CSS properti yang dapat dimanipulasi untuk mengkoordinasikan formulir dengan sisa situs, gambar 8.1 menunjukkan bentuk yang menampilkan contoh-contoh baik unstyled dan gaya dari bentuk kontrol. HTML untuk formulir ini ditampilkan di sidebar, memeriksa dengan hati-hati sehingga Anda memahami persis bagaimana format diterapkan.

H.   Formulir Aksesibilitas Masuk

Pembahasan Ini di luar buku untuk menggali ke dalam politik, kebijakan, dan dapat diakses sepenuhnya di situs Anda, tetapi bab tentang bentuk desain tidak akan lengkap tanpa termasuk informasi tentang aksesibilitas.

Ø pedoman untuk membuat akses masuk:

1.  Setiap kali membuka halaman di sebelah kiri elemen masuk sehingga pembaca layar membaca label terlebih dahulu, dan kemudian masukan ke halaman yang dibutuhkan.

2.  Jika label harus ditempatkan di tempat lain selain di sebelah kiri elemen, unsur lain datang antara label dan bentuk elemen,

3.  Jangan mengisi kontrol dengan teks instruksional, karena teks akan mengganggu akses pengunjung untuk menghapus instruksi sebelum melanjutkan. Gunakan label yang tepat dan petunjuk formulir sebagai gantinya.

4.  Hindari menggunakan kotak daftar yang menggunakan beberapa atribut, kotak centang adalah pilihan yang lebih mudah diakses.

5.  Jangan mengatur nilai default untuk kotak centang tunggal ya / tidak untuk "ya."

I.      Ringkasan

Perlu diingat bahwa pengunjung ingin mendapatkan tugas dengan secepat dan mudah,  Perencanaan desain yang tepat memaksimalkan efisiensi tugas sehingga pengunjung nyaman dengan apa yang disajikan dalam halaman web kita.

Untuk formulir kita harus membuat format pengisian yang mudah di pahami oleh pengunjung, jika format pengisiannya sulit kita harus menampilakan contoh cara penggisian supaya pengunjung tidak salah dalam memahami dan mengisi yang seharusnya dimasukan dalam format tersebut.

Dalam beberapa halaman sebelum pengunjung mengirimkan pesan masuk tapi terjadi kesalahan maka dengan otomatis peringatan kesalahan tampil dan menunjukan dengan tanda (bintang, warna, dll) bagian yang salah dan harus diisi ulang sehingga pengunjung tau dimana letak kesalahan tersebut.

DAFTAR PUSTAKA

Penny Mclntire. 2008. Visual Desain For Modern Web. USA: New Rider