System Analysis and Design

Designing Effective Input

Oleh

Gita Rahayu (1410532054)

Putri Utami Wulandari (14105310)
Dwifa Yaose Darmi (1510531002)
Widya Oktaviani (1410531010)
Fazia Febriani Muas (1510531050)
Khairani Fajrin (15105310)

JURUSAN AKUNTANSI
FAKULTAS EKONOMI
UNIVERSITAS ANDALAS
TAHUN AJARAN 2017/2018
PERANCANGAN FORMULIR YANG BAIK
 Analis sistem harus mampu merancang formulir yang lengkap dan berguna. Bentuk
yang tidak perlu yang akan menyia-nyiakan sumber daya organisasi harus dihilangkan.
Formulir adalah instrumen penting untuk mengarahkan jalannya pekerjaan. Mereka adalah
kertas pracetak yang mengharuskan orang mengisi tanggapan dengan cara yang
terstandarisasi. Formulir memperoleh dan menangkap informasi yang dibutuhkan oleh
anggota organisasi yang akan sering diinput ke komputer. Melalui proses ini, formulir sering
dijadikan sebagai dokumen sumber bagi pengguna atau untuk masukan ke aplikasi e-niaga
yang harus dimasukan oleh manusi
Empat pedoman untuk perancangan formulir yang harus diperhatikan:
1. Buatlah Formulir mudah untuk diisi.
2. Pastikan formulir memenuhi tujuan yang dirancangnya.
3. Perancangan formulir untuk memastikan penyelesaian yang akurat.
4. Jaga agar bentuknya menarik.

Masing-masing dari keempat pedoman tersebut dipertimbangkan secara terpisah pada bagian
berikut:

Membuat Formulir Mudah Diisi

Untuk mengurangi kesalahan, mempercepat penyelesaian, dan mempermudah

masuknya data, penting agar formulir mudah diisi. Biaya formulirnya minimal dibandingkan
dengan biaya waktu yang dikeluarkan karyawan untuk mengisi dan kemudian memasukkan
data ke dalam sistem Informasi. Seringkali dimungkinkan untuk menghilangkan proses
pencatatan data yang dimasukkan pada formulir ke dalam sistem dengan menggunakan
pengiriman elektronik. Metode itu sering menampilkan data yang dikodekan oleh pengguna
sendiri, yang mengunjungi situs Web yang disiapkan untuk transaksi informasi atau e-niaga.

BENTUK ARUS
Merancang bentuk dengan aliran yang tepat dapat meminimalkan waktu dan tenaga yang
dikeluarkan oleh karyawan dalam bentuk penyelesaian. Formulir harus mengalir dari kiri ke
kanan dan atas ke bawah. Aliran logis membutuhkan waktu ekstra dan membuat frustrasi.

TUJUH BAGIAN DARI FORMULIR

Metode kedua yang memudahkan orang mengisi formulir benar adalah pengelompokan logis
informasi. Tujuh bagian utama dari sebuah formulir adalah sebagai berikut:
1. Judul
2. Identifikasi dan akses.
3. Instruksi.
4. Tubuh.
5. Tanda tangan dan verifikasi.
6. Total.
7. Komentar.

Idealnya, bagian ini akan muncul di halaman yang dikelompokkan seperti

pada Voucher Beban Karyawan Bakerloo Brothers pada Gambar. Perhatikan bahwa
 ketujuh bagian tersebut mencakup informasi dasar yang diperlukan pada kebanyakan
bentuk.

Bagian atas dari formulir dikhususkan untuk tiga bagian: judul, bagian
identifikasi dan akses, dan bagian instruksi.
1. Bagian judul biasanya mencakup nama dan alamat bisnis yang berasal dari
formulir. Bagian identifikasi dan akses mencakup kode yang dapat digunakan untuk
mengajukan laporan dan mendapatkan akses ke sana nanti. Informasi ini sangat
penting bila sebuah organisasi diharuskan untuk menyimpan dokumen tersebut
selama beberapa tahun. Bagian petunjuk menceritakan bagaimana formulir harus diisi
dan di mana harus diarahkan saat selesai.
2. Bagian tengahnya berbentuk badannya, yang membentuk kira-kira separuh
dari bentuknya. Bagian dari formulir ini memerlukan detail dan pengembangan paling
banyak dari orang yang menyelesaikannya. Tubuh itu bagian dari bentuk yang paling
mungkin mengandung data variabel eksplisit.
3. Bagian bawah formulir terdiri dari tiga bagian: tanda tangan dan verifikasi,
total, dan komentar. Membutuhkan jumlah akhir dan ringkasan komentar adalah cara
logis untuk memberikan penutupan bagi orang yang mengisi formulir.

CAPTION
Caption adalah teknik lain yang bisa mempermudah kerja mengisi formulir. Keterangan
memberitahu orang yang mengisi formulir yang harus dimasukkan ke dalam kotak kosong,
spasi, atau kotak. Beberapa pilihan untuk captionin ditunjukkan pada Gambar 12.2.
Dua jenis caption, dua jenis caption checkoff, dan contoh judul kotak dan caption tabel
ditampilkan. Keuntungan menempatkan caption di bawah garis adalah bahwa ada lebih
banyak ruang pada garis itu sendiri untuk data. Kerugiannya adalah terkadang tidak jelas
garis mana yang terkait dengan judul: baris di atas atau di bawah judul.

Judul baris bisa berada di sebelah kiri yang kosong dan pada baris yang sama, atau bisa
dicetak di bawah garis data yang akan dimasukkan. Cara lain untuk keterangan adalah
menyediakan kotak data bukan sebuah garis. Keterangan dapat ditempatkan di dalam, di atas,
atau di bawah kotak. Kotak pada formulir membantu orang memasukkan data ke tempat yang
benar, dan mereka juga membuat pembacaan formulir lebih mudah bagi penerima formulir.
Judul harus menggunakan huruf ukuran kecil sehingga tidak mendominasi area entri. Tanda
centang vertikal kecil mungkin disertakan dalam kotak jika data ditujukan untuk masuk ke
sistem komputer. Jika tidak ada cukup ruang untuk data, orang yang mengisi formulir
memiliki kebebasan untuk menentukan bagaimana data harus disingkat. Teks mungkin juga
menyertakan catatan klarifikasi kecil untuk membantu pengguna memasukkan informasi
dengan benar, seperti Tanggal (MM / DD / YYYY) atau Nama (Last, First, Middle Initial).
Apapun gaya caption yang dipilih, penting untuk menggunakannya secara konsisten.
Misalnya, membingungkan mengisi formulir yang memiliki teks di atas dan di bawah baris.

Tanda baca berguna bila pilihan respons dibatasi. Perhatikan daftar metode perjalanan yang
ditunjukkan untuk contoh check-off vertikal pada gambar sebelumnya. Jika biaya karyawan
untuk perjalanan bisnis diganti hanya untuk metode perjalanan yang tercantum, sistem check-
off lebih bijaksana daripada garis kosong. Metode ini memiliki keuntungan tambahan untuk
mengingatkan orang yang sedang memverifikasi data untuk mencari tulisan rintisan tiket
penerbangan atau tanda terima lainnya.

Sebuah horisontal check-off caption juga lebih unggul dari judul baris ketika informasi
diperlukan konstan.Keterangan tabel bekerja dengan baik di badan formulir yang rinciannya
diperlukan. Ketika seorang karyawan mengisi formulir dengan benar di tabel, dia membuat
tabel untuk orang berikutnya yang menerima formulir tersebut, sehingga membantu mengatur
data secara koheren.

Kombinasi caption juga dapat digunakan secara efektif. Misalnya, caption tabel dapat
digunakan untuk menentukan kategori seperti jumlah, dan caption dapat digunakan untuk
menunjukkan di mana subtotal, pajak penjualan, dan jumlah seharusnya. Karena berbagai
caption melayani tujuan yang berbeda, umumnya perlu menggunakan beberapa gaya teks
dalam setiap formulir.

Memenuhi Tujuan yang Ditujukan

Formulir dibuat untuk melayani satu atau lebih tujuan dalam rekaman, pemrosesan,
penyimpanan, dan pengambilan informasi untuk bisnis. Terkadang diinginkan untuk
memberikan informasi yang berbeda ke berbagai departemen atau pengguna namun masih
berbagi beberapa informasi dasar. Situasi ini adalah dimana bentuk-bentuk khusus berguna.

Memastikan penyelesaian yang akurat

Tingkat kesalahan yang biasanya dikaitkan dengan pengumpulan data akan turun bila
formulir dirancang untuk memastikan penyelesaian yang akurat. Desain penting untuk
memastikan bahwa orang melakukan hal yang benar dengan bentuk kapan pun mereka
menggunakannya.

Menjaga Bentuk Menarik

Meski daya tarik formulir itu diatasi dengan yang terakhir, urutan penampilannya tidak
dimaksudkan untuk mengurangi kepentingannya. Sebaliknya, ini ditangani diakhir karena
membuat bentuk yang menarik dilakukan dengan menerapkan teknik yang dibahas di bagian
sebelumnya. Bentuk estetika menarik orang ke dalam diri mereka dan mendorong
penyelesaian.

Agar menarik, formulir harus memperoleh informasi sesuai urutan yang diharapkan:
konvensi menentukan untuk meminta nama, alamat jalan, kota, negara bagian, dan kode pos
atau pos (dan negara, jika perlu). Tata letak dan aliran yang tepat berkontribusi pada daya
tarik suatu bentuk. Menggunakan jenis tulisan yang berbeda dalam bentuk yang sama dapat
membantu membuatnya menarik bagi pengguna untuk mengisi.

Memisahkan kategori dan subkategori dengan garis tebal dan tipis juga bisa mendorong
minat dalam formulir. Jenis tulisan dan garis adalah elemen desain yang berguna untuk
menangkap perhatian dan membuat orang merasa aman sehingga mereka mengisi formulir
dengan benar.

Mengontrol Formulir Bisnis

Mengontrol bentuk bisnis merupakan tugas penting. Bisnis sering memiliki spesialis
bentuk yang mengendalikan bentuk, tapi terkadang pekerjaan ini jatuh ke analis sistem, yang
membuat dan menerapkan formulir kontrol.

Tugas dasar untuk mengendalikan formulir mencakup memastikan bahwa setiap

formulir yang digunakan memenuhi tujuan spesifiknya untuk membantu pekerja
menyelesaikan tugas mereka dan bahwa tujuan yang ditentukan merupakan bagian integral
dari fungsi organisasi, mencegah duplikasi informasi yang dikumpulkan dan bentuk-bentuk
yang mengumpulkannya. , merancang bentuk-bentuk yang efektif, menentukan bagaimana
cara mereproduksi bentuk dengan cara yang paling ekonomis, dan menetapkan prosedur yang
menyediakan formulir yang tersedia (jika diperlukan) dengan biaya serendah mungkin.

GOOD DISPLAY AND WEBS FROM DESIGN

Banyak dari apa yang telah kita katakan tentang desain bentuk yang baik adalah transfer
untuk menampilkan desain dan desain situs Web dan halaman Web. Sekali lagi, pengguna
harus tetap terdepan dalam pemikiran analis selama disain display.

Ada perbedaan, bagaimanapun, dan analis sistem harus berusaha untuk mewujudkan kualitas
display yang unik daripada mengadopsi standar konvensi bentuk kertas. Satu perbedaan besar
adalah kehadiran konstan kursor pada layar, yang mengarahkan pengguna ke posisi entri data
saat ini. Saat data dimasukkan ke layar, kursor akan mengarahkan satu karakter ke depan,
menunjukkan jalannya.

Perbedaan utama lainnya antara bentuk elektronik, Web, dan statis adalah bahwa perancang
dapat menyertakan bantuan pengguna konteks-sensitif dalam bentuk pengisian elektronik.
Praktik ini dapat mengurangi kebutuhan akan instruksi yang ditunjukkan untuk setiap baris,
sehingga mengurangi kekacauan formulir dan mengurangi panggilan ke Dukungan Teknis.
Menggunakan pendekatan berbasis Web juga memungkinkan perancang untuk memanfaatkan
hyperlink, sehingga memastikan bahwa formulir diisi dengan benar dengan memberi
pengguna contoh hyperlink formulir yang dilengkapi dengan benar.

Pada bagian ini, kami menyajikan panduan untuk desain tampilan yang efektif. Mereka
disajikan untuk membantu tercapainya tujuan keseluruhan desain input yang efektif, akurasi,
kemudahan penggunaan, kesederhanaan, konsistensi, dan daya tarik.
Terdapat empat pedoman yang harus dilakukan dalam desain mereka meliputi:

1. Menjaga agar tampilan tetap sederhana.

2. Pertahankan tampilan presentasi secara konsisten.

3. Memfasilitasi pergerakan pengguna di antara layar tampilan dan halaman.

4. Buat tampilan yang menarik dan menyenangkan.

Pada subbagian berikutnya, kami mengembangkan masing-masing pedoman ini, dan kami
menyajikan banyak teknik desain untuk mengamati keempat pedoman ini.

Menjaga Tampilan Sederhana

Pedoman pertama untuk desain tampilan yang bagus adalah menjaga agar tampilan tetap
sederhana. Layar harus menunjukkan hanya tindakan yang diperlukan untuk tindakan tertentu
yang sedang dilakukan. Untuk pengguna sesekali, 50 persen area tampilan harus berisi
informasi bermanfaat.

THREE SCREEN SECTIONS. Tampilan output harus dibagi menjadi tiga bagian. Bagian
atas layar menampilkan bagian "heading". Judul berisi judul perangkat lunak dan file terbuka,
menu pull-down, dan ikon yang melakukan tugas tertentu.

Bagian tengahnya disebut "bodi" dari layar. Tubuh dapat digunakan untuk entri data dan
diatur dari kiri ke kanan dan dari atas ke bawah, karena orang-orang dalam budaya Barat
mengalihkan pandangan mereka ke halaman dengan cara ini. Keterangan dan petunjuk harus
disertakan dalam bagian ini untuk membantu pengguna memasukkan data yang bersangkutan
di tempat yang tepat. Bantuan sensitif konteks juga dapat disediakan dengan meminta
pengguna mengklik tombol mouse sebelah kanan di bagian bodi layar.

Bagian ketiga dari tampilan adalah bagian "komentar dan instruksi". Bagian ini mungkin
menampilkan menu singkat perintah yang mengingatkan pengguna dasar-dasar seperti cara
mengubah halaman atau fungsi, menyimpan file, atau menghentikan masuknya. Pencantuman
dasar-dasar seperti itu dapat membuat pengguna yang tidak berpengalaman merasa jauh lebih
aman tentang kemampuan mereka untuk menyelesaikan tugas mereka.

Cara lain untuk menjaga tampilan tetap sederhana adalah dengan menggunakan bantuan
konteks-sensitif, tombol roll-over yang mengungkapkan lebih banyak informasi, dan jendela
pop-up lainnya. Pengguna dapat meminimalkan atau memaksimalkan ukuran jendela sesuai
kebutuhan. Dengan cara ini, pengguna memulai dengan tampilan sederhana dan dirancang
dengan baik sehingga mereka dapat menyesuaikan dan mengendalikannya melalui
penggunaan banyak jendela. Hyperlink pada isi berbasis Web bentuk melayani tujuan yang
sama.
Menjaga Tampilan Konsisten

Panduan kedua untuk desain tampilan yang bagus adalah menjaga tampilan tetap konsisten.
Jika pengguna bekerja dari bentuk kertas, display harus mengikuti apa yang ditampilkan di
atas kertas. Tampilan dapat tetap konsisten dengan menemukan informasi di area yang sama
setiap kali tampilan baru diakses. Selain itu, informasi yang logik secara bersamaan harus
dikelompokkan secara konsisten: Nama dan alamat sama-sama, bukan nama dan kode pos.
Meskipun tampilan harus memiliki pergerakan alami dari satu wilayah ke daerah lain,
informasi seharusnya tidak tumpang tindih dari satu kelompok ke kelompok lainnya. Kamu
tidak ingin nama dan alamat di satu area dan kode pos yang lain.

Memfasilitasi Gerakan

Pedoman ketiga untuk desain tampilan yang bagus adalah memudahkan berpindah dari satu
halaman ke halaman lainnya. Aturan "tiga klik" mengatakan bahwa pengguna harus bisa
sampai ke halaman yang mereka butuhkan dalam tiga klik mouse atau keyboard. Formulir
berbasis web memudahkan pergerakan dengan penggunaan hyperlink ke halaman relevan
lainnya. Metode lain yang umum untuk gerakan adalah membuat pengguna merasa seolah-
olah mereka secara fisik pindah ke halaman baru. Ilusi gerakan fisik di antara layar ini dapat
diperoleh dengan menggulir menggunakan panah, jendela pop-up yang sensitif konteks, atau
dialog di layar.

Merancang Tampilan yang Menarik dan Menyenangkan

Panduan keempat untuk desain tampilan yang bagus adalah menciptakan tampilan yang
atraktif bagi pengguna. Jika pengguna menemukan tampilan yang menarik, mereka
cenderung lebih produktif, kurang membutuhkan pengawasan, dan buat lebih sedikit
kesalahan Menampilkan harus menarik pengguna ke dalamnya dan menahan perhatian
mereka. Tujuan ini tercapai dengan penggunaan banyak area terbuka seputar data entry field
sehingga tampilan mencapai penampilan yang tidak berantakan. Anda tidak akan pernah
berkerumun; Demikian pula, Anda seharusnya tidak melakukannya keramaian sebuah layar
Anda jauh lebih baik menggunakan banyak jendela atau hyperlink daripada membuat
segalanya macet ke satu halaman

Gunakan arus logis dalam rencana ke halaman tampilan Anda. Mengatur material untuk
memanfaatkan cara orang mengkonseptualisasikan karya mereka sehingga mereka dapat
dengan mudah menemukan jalan mereka. Dengan kemunculannya dari GUIs, adalah
mungkin untuk membuat input display yang sangat atraktif. Dengan menggunakan kotak
warna atau naungan dan membuat kotak tiga dimensi dan anak panah, Anda bisa membuat
bentuk yang user friendly dan menyenangkan untuk digunakan.

Saat merenungkan penggunaan berbagai gaya dan ukuran font, tanyakan pada diri Anda
apakah mereka benar-benar membantu pengguna dalam memahami dan menyetujui tampilan.
Jika mereka menarik perhatian yang tidak semestinya pada seni dari desain tampilan atau jika
mereka berfungsi sebagai pengalih perhatian, biarkan mereka keluar. Sadarilah bahwa tidak
semua halaman Web dilihat identik oleh browser yang berbeda. Uji bentuk prototipe Anda
dengan berbagai kombinasi untuk melihat apakah pengguna menyatakan preferensi untuk
kombinasi atau apakah mereka menyusahkan mayoritas pengguna Untuk font Web gunakan
Verdana atau Arial.

Menggunakan Ikon pada Desain Tampilan

Ikon bergambar, representasi di layar yang melambangkan tindakan komputer yang mungkin
dipilih pengguna menggunakan mouse, keyboard, lightpen, layar sentuh, atau joystick. Ikon
menyajikan fungsi yang mirip dengan kata-kata dan bisa menggantikannya dalam banyak
menu, karena artinya lebih cepat dipahami daripada kata-kata. Perangkat mobile seperti
iPhone dan iPod Apple telah mempopulerkan penggunaan ikon pada layar sentuh dan
menjadikan antarmuka ini akrab bagi banyak bisnis dan pengguna lainnya.

Ada beberapa panduan untuk desain ikon yang efektif. Bentuk harus mudah dikenali
sehingga pengguna tidak diharuskan untuk menguasai kosakata baru. Banyak ikon yang
sudah diketahui kebanyakan pengguna. Penggunaan ikon standar dapat dengan cepat
memasuki reservoir ini dengan makna umum. Seorang pengguna mungkin menunjuk ke
lemari arsip, "cabut" ikon folder file, "ambil" sepotong ikon kertas, dan "lempar" ke ikon
keranjang sampah. Dengan menggunakan ikon standar, desainer dan pengguna menghemat
waktu.

Ikon untuk aplikasi tertentu harus dibatasi hingga sekitar 20 bentuk yang dikenali, sehingga
kosa kata ikon tidak banyak dan sehingga skema pengkodean yang layak masih dapat
direalisasikan. Gunakan ikon secara konsisten di seluruh aplikasi di mana mereka akan
muncul bersama untuk memastikan kesinambungan dan kemampuan memahami. Umumnya,
ikon bermanfaat bagi pengguna jika mereka bermakna.

Desain Antarmuka Pengguna Grafis

Antarmuka pengguna grafis (GUI, diucapkan "goo'ë") adalah cara pengguna berinteraksi
dengan sistem operasi Windows dan Macintosh. Ini juga disebut sebagai antarmuka point-
and-click. Pengguna dapat menggunakan mouse untuk mengklik sebuah objek dan
menyeretnya ke posisi semula. Antarmuka pengguna grafis memanfaatkan fitur tambahan
dalam desain tampilan seperti kotak teks, kotak centang, kotak pilihan, daftar dan daftar drop-
down, tombol slider dan spin, kotak dialog kontrol tab, dan peta gambar.
TEXT BOXES. Kotak persegi mewakili kotak teks, seperti yang disebutkan sebelumnya,
dan digunakan untuk menguraikan bidang entri data dan tampilan. Perhatian harus diberikan
untuk memastikan bahwa kotak teks cukup besar untuk menampung semua karakter yang
harus dimasukkan. Setiap kotak teks harus memiliki judul di sebelah kiri, mengidentifikasi
apa yang akan dimasukkan atau apa yang ditampilkan di dalam kotak. Di Microsoft Access,
data karakter disejajarkan di sebelah kiri, dan data numerik sejajar di sebelah kanan.

CHECK BOXES. Pada contoh kontrol GUI, sebuah kotak centang digunakan untuk
menunjukkan pelanggan baru. Kotak cek berisi X atau kosong, sesuai dengan apakah
pengguna memilih pilihan; mereka digunakan untuk pilihan yang tidak eksklusif di mana satu
atau lebih pilihan dapat diperiksa. Notasi alternatif adalah dengan menggunakan tombol
persegi dengan tanda centang (✓) untuk menunjukkan bahwa pilihan telah dipilih. Perhatikan
bahwa kotak centang teks, atau label, biasanya diletakkan di sebelah kanan kotak. Jika ada
lebih dari satu kotak centang, label harus memiliki beberapa perintah pada mereka, baik huruf
alfabet atau item yang paling sering diperiksa muncul pertama kali dalam daftar. Jika ada
lebih dari 10 kotak cek, kelompokkan mereka bersama-sama dalam kotak berbatasan.

OPTIONS BUTTONS. Lingkaran, yang disebut tombol pilihan atau tombol radio,
digunakan untuk memilih pilihan eksklusif. Hanya satu dari beberapa pilihan yang bisa
dipilih. Dengan cara ini Anda dapat menjelaskan kepada pengguna bahwa mereka harus
memutuskan di antara opsi. Pilihan lagi tercantum di sebelah kanan tombol, biasanya dalam
beberapa urutan. Jika ada pilihan yang umum dipilih, biasanya dipilih sebagai default saat
halaman pertama kali ditampilkan. Seringkali ada persegi panjang, disebut kelompok pilihan,
mengelilingi tombol radio. Jika ada lebih dari enam tombol pilihan, pertimbangkan untuk
menggunakan kotak daftar atau kotak daftar drop-down.

LIST AND DROP-DOWN LIST BOXES. Daftar kotak menampilkan beberapa pilihan
yang bisa dipilih dengan mouse. Kotak daftar drop-down digunakan bila ada sedikit ruang
yang tersedia pada halaman. Sebuah persegi panjang tunggal dengan panah menunjuk ke arah
garis yang terletak di sisi kanan persegi panjang. Memilih panah ini menyebabkan kotak
daftar ditampilkan. Begitu pengguna membuat pilihan, itu ditampilkan di kotak pilihan drop-
down dan kotak daftar akan hilang. Jika ada pilihan yang umum, biasanya ditampilkan dalam
daftar drop-down secara default.

TAB CONTROL DIALOG BOXES. Kotak dialog kontrol tab adalah bagian lain dari
antarmuka pengguna grafis dan cara lain untuk membuat pengguna terorganisir dan masuk ke
materi sistem secara efisien. Dalam merancang kotak kontrol tab, buat tab terpisah untuk
setiap fitur unik, letakkan tab yang paling sering digunakan di depan dan tampilkan dulu, dan
sertakan tombol OK, Cancel, and Help.

SLIDERS AND SPIN BUTTONS. Slider dan tombol spin digunakan untuk mengubah data
yang memiliki rentang nilai terus menerus, memberi pengguna kontrol lebih saat memilih
nilai. Memindahkan slider ke satu arah atau yang lainnya (baik kiri / kanan atau atas / bawah)
akan meningkatkan atau menurunkan nilai.

IMAGES MAPS. Bidang peta gambar digunakan untuk memilih nilai dalam gambar.
Pengguna mengklik sebuah titik di dalam sebuah gambar dan koordinat x dan y yang sesuai
dikirim ke program. Peta gambar digunakan saat membuat halaman Web yang berisi peta
dengan petunjuk untuk mengklik area tertentu untuk melihat peta wilayah yang terperinci.

TEXT AREAS. Area teks digunakan untuk memasukkan teks dalam jumlah yang lebih
banyak. Area ini mencakup sejumlah baris, kolom, dan scroll bar yang memungkinkan
pengguna untuk masuk dan melihat teks lebih besar dari ukuran area kotak. Ada dua cara
untuk menangani teks ini. Salah satunya adalah dengan menghindari penggunaan kata wrap,
memaksa pengguna menekan tombol Enter untuk berpindah ke baris berikutnya; teks akan
bergulir ke kanan jika melebihi lebar area teks. Pilihan lainnya adalah membolehkan
membungkus kata.

MESSAGE BOXS. Kotak pesan digunakan untuk memperingatkan pengguna dan

memberikan pesan umpan balik lainnya di kotak dialog, seringkali tumpang tindih pada
tampilan. Kotak pesan ini memiliki format yang berbeda. Masing-masing harus muncul di
jendela persegi panjang dan harus dengan jelas menguraikan pesan sehingga pengguna tahu
persis apa yang sedang terjadi

COMMAND BUTTONS. Tombol perintah melakukan tindakan saat pengguna memilihnya

dengan mouse. Hitung Total, Add Order, dan OK adalah semua contohnya. Teks dipusatkan
di dalam tombol, yang memiliki bentuk persegi panjang. Jika ada tindakan default, teks itu
dikelilingi dengan garis putus-putus. Tombol juga bisa diarsir untuk menunjukkan bahwa itu
adalah default. Pengguna menekan tombol Enter untuk memilih tombol default.

Halaman Web Dinamis

Laman Web Dinamis mengubah dirinya sebagai hasil tindakan pengguna. Mereka
sering menggunakan JavaScript untuk memodifikasi beberapa bagian dari halaman Web atau
gaya. Mengubah gambar saat mouse bergerak melewatinya atau memutar gambar acak pada
interval waktu tertentu adalah contoh umum dari halaman Web dinamis.Halaman Web dapat
mendeteksi lebar jendela browser dan memodifikasi halaman yang sesuai.Menu yang meluas
saat pengguna mengeklik tanda tambah kecil di sebelah kiri menu atau saat Mouse yang
bergerak di atas menu adalah contoh lain dari halaman Web dinamis.

Dengan menggunakan JavaScript, formulir Web mungkin dapat berubah bentuk atau
berubah untuk menambahkan bidang baru atau menghapus bidang lama, atau mengganti
atribut bidang, seperti panjang bidang atau tombol radio yang berubah menjadi kotak
centang. Hal ini membuat halaman Web lebih responsif terhadap tindakan pengguna dan
seringkali akan menghilangkan kebutuhan untuk memuat halaman Web baru berdasarkan
pilihan pengguna.

Three-Dimensional Web Pages

Laman Web Dinamis juga dapat digunakan untuk menampilkan informasi sementara,
seperti blok informasi bantuan, kalender dengan tanggal yang dapat diklik yang digunakan
untuk membantu bidang entri tanggal, kode bandara, dan informasi lainnya. Informasi ini
dapat disimpan dengan menggunakan serangkaian lapisan bertumpuk (menggunakan properti
z-index cascading style) pada desain halaman Web, masing-masing di atas yang lain.
Halaman Web utama adalah bidang dasar, lapisan standar halaman Web yang menampilkan
atau memperoleh informasi, sementara yang lain di bawah halaman tidak terlihat.

Saat bantuan diminta atau pengguna mengklik kolom tanggal, lapisan akan
dipindahkan ke atas dan menjadi terlihat atau dihasilkan oleh kode JavaScript. Posisi lapisan
ditentukan oleh perancang atau analis, seperti kalender yang muncul di sisi kanan bidang
tanggal. Analis harus menentukan kapan masuk akal untuk memasukkan lapisan, sering
memeriksa setiap bidang pada halaman Web untuk menentukan apakah informasi tambahan
akan membantu memastikan informasi yang akurat dan komunikasi yang baik dengan
pengguna.

Analis harus menentukan hal berikut:

1. Bagaimana lapisan itu dibangun? Apakah itu dibuat dengan menggunakan kode JavaScript,
seperti kalender, atau informasi tambahan yang diperlukan untuk membangun lapisan? Jika
informasi tambahan diperlukan,dimana data berada dan bagaimana seharusnya diperoleh?

2. Kejadian apa yang menyebabkan lapisan dibuat?

3. Peristiwa apa yang menghapus lapisan, seperti tombol tutup, klik tanggal, klik di luar
daerah, atau memilih hotel dari daftar?

4. Di mana seharusnya blok permukaan ditempatkan? Biasanya di sebelah lapangan yang

dibuat blok, dalam koordinat x dan y.

5. Seberapa besar seharusnya blok tersebut, diukur dalam piksel?

6. Apa yang harus wilayah format atribut, menjadi sebuah warna dan perbatasan? Jika ada
serangkaian link, review penampilan mereka dengan pengguna. Tanyakan kepada pengguna
apakah mereka mau warna berubah saat mouse bergerak di atas setiap baris.

7. Apa yang harus terjadi bila pilihan dipilih?

Menggunakan lapisan(layer) adalah cara yang efektif untuk membangun situs Web
karena tidak memerlukan halaman pop-up (yang mungkin diblokir oleh perangkat lunak
keamanan Internet). Selain itu, halaman Web baru tidak harus memuat, dan karena
informasinya terkandung dalam lapisan, tidak ada ruang pada halaman Web utama.

Gambar 12.9 adalah contoh formulir Web yang digunakan oleh perusahaan asuransi
untuk mengubah informasi klien; untuk menambahkan lokasi baru untuk klien, seperti toko
baru atau restoran untuk klien yang sudah ada; atau untuk menghapus toko untuk klien.

Jika kotak cek Perusahaan dicentang, Nama Belakang, Nama Depan, dan Tengah
diubah menjadi bidang nama Perusahaan, dengan teks teks berubah juga. Jika tombol Add
New Property diklik, satu set bidang baru untuk properti ditambahkan. Perhatian harus
diberikan untuk menghasilkan nama unik yang akan dikenali server untuk bidang tambahan.
Ketika formulir diajukan, server memperbarui tabel database untuk bidang tambahan.

Contoh yang baik dari bentuk yang memodifikasi dirinya sendiri dapat ditemukan di
Expedia.com (www.expedia.com). Mengklik tombol radio untuk penerbangan, hotel, mobil,
atau kapal pesiar menyebabkan formulir berubah untuk mengumpulkan data yang sesuai
untuk memesan penerbangan, hotel, dan sebagainya.

Laman Web Dinamis memiliki keuntungan untuk memodifikasi diri dengan cepat,
dengan sedikit gangguan untuk mengirim dan menerima data dari server. Namun, ada
beberapa kelemahan saat membuat halaman Web dinamis. Salah satunya adalah mereka tidak
akan bekerja jika JavaScript dimatikan. Analis harus memutuskan apa yang harus dilakukan
dalam situasi ini.

Jika orang tersebut harus menggunakan situs Web (seperti di lingkungan intranet
perusahaan, di situs yang digunakan untuk mendapatkan pinjaman siswa, atau dalam kasus
pemrosesan pemerintah atau transaksi lainnya), halaman Web dapat menyatakan dengan jelas
bahwa itu tidak akan berfungsi jika JavaScript dimatikan dan kemudian mengarahkan
pengguna cara menyalakannya. Kelemahan kedua saat menggunakan halaman Web dinamis
adalah mereka mungkin tidak sesuai dengan American Disabilities Act.

Ajax (Asynchronous JavaScript and XML)

Ajax adalah teknik yang bekerja di browser Web yang lebih baru. Ini melibatkan
penggunaan JavaScript dan bahasa markup extensible (XML). Secara tradisional, setiap kali
sebuah halaman Web membutuhkan data dari tabel database yang berbeda, permintaan
dikirim ke server dan seluruh halaman baru dimuat. Ini adalah efektif tapi lambat, karena
keseluruhan halaman harus dimuat hanya untuk memberikan data tambahan untuk sebuah
daftar drop-down atau beberapa kontrol formulir Web lainnya berdasarkan yang dipilih
sebelumnya.

Ajax memungkinkan pengembang Web untuk membangun sebuah halaman web yang
bekerja lebih seperti program desktop tradisional. Karena data baru dibutuhkan, browser
mengirimkan permintaan ke server, dan server mengirimkannya sejumlah kecil data kembali
ke browser, yang memperbarui halaman saat ini. Ini berarti bahwa Penampil tidak mengalami
gangguan kerja dan halaman Web tidak muat ulang. Halaman diperbarui secara dinamis
dengan data baru. Data bisa berupa file teks kecil atau dokumen XML yang berisi banyak
pelanggan atau data berulang lainnya Jika data adalah file XML, setiap elemen pelanggan
disebut node, dan masing-masing elemen node diberi nomor (dimulai dengan nol) dari awal
dokumen XML. Hal ini memungkinkan Halaman web untuk pergi ke pelanggan pertama atau
terakhir atau untuk loop melalui semua pelanggan satu per satu dengan klik sebuah tombol.

Katakanlah seorang analis sistem sedang merancang sebuah situs Web tradisional,
tanpa Ajax, untuk membuat sebuah reservasi untuk feri Eropa Situs Web yang dihasilkan
mungkin berisi beberapa halaman. Pertama halaman akan menanyakan kepada pelanggan
tentang asal dan tujuan perjalanan, tanggal rencana perjalanan, dan jumlah penumpang.
Karena harga ditentukan oleh jumlah dan umur dari penumpang, halaman Web kedua akan
menampilkan permintaan untuk usia penumpang. Ketiga akan menanyakan jenis kendaraan
yang diinginkan untuk transportasi darat, dan sebagainya.
 Informasi yang sama dapat diperoleh dengan menggunakan teknik Ajax, yang
diilustrasikan pada Gambar 12.10.

Tujuan awal dan akhir yang sama, serta tanggal, dimasukkan di bagian atas formulir web.
Halaman Web menggunakan tujuan dan tanggal untuk menentukan apakah ada ruang yang
terrsedia. Setelah pelanggan mengubah jumlah penumpang, bentuknya secara dinamis
perubahan untuk menambahkan tiga daftar drop-down untuk setiap penumpang, bersama
dengan instruksi di sisi-tanpa memuat ulang keseluruhan halaman. Bila jenis kendaraan
berubah, dalam contoh ini ke Car, maka tipe kendaraan yang dipilih dikirim ke server.
Keterangan pada formulir akan mengubah teks dari kendaraan untuk membuat mobil Server
mengirimkan kemungkinan mobil, dan daftar drop-down Car Make diisi dengan data. Saat
mobil dibuat dipilih, nilai yang dipilih dikirim ke server danDaftar drop-down Car Model
dihuni, dan seterusnya.

Ajax memiliki keuntungan membuat karya Web lebih cepat dan memberikan tampilan
yang lebih halus bagi pengguna. Kelemahannya adalah JavaScript harus diaktifkan dan itu
Web halaman mungkin melanggar Amerika dengan Disabilities Act. Keamanan harus
dipertimbangkan jika diperlukan. Ada banyak contoh situs web Ajax. Beberapa yang
menonjol termasuk Google Earth (earth.google.com), dan Google Suggest, yang merespons
penekanan tombol pemirsa dengan menyediakan daftar drop-down dari istilah pencarian yang
mungkin.

Using Color in Display Design

Warna adalah cara yang menarik dan terbukti untuk memudahkan pengguna
mengerjakan tugas yang memerlukan input komputer. Penggunaan warna yang tepat pada
layar tampilan memungkinkan Anda untuk membedakan latar depan dan latar belakang, sorot
bidang penting pada bentuk, kesalahan fitur, sorot masukan kode khusus, dan perhatikan
banyak atribut spesial lainnya.
 Warna yang sangat kontras harus digunakan untuk tampilan foreground dan
background sehingga pengguna dapat menangkap apa yang disajikan dengan cepat. Warna
background akan mempengaruhi persepsi warna foreground. Misalnya, warna hijau tua
mungkin terlihat seperti warna yang berbeda jika diambil dari latar belakang putih dan
ditempatkan pada yang kuning

Lima kombinasi huruf latar depan yang paling mudah dibaca di latar belakang adalah (mulai

dengan kombinasi yang paling mudah dibaca):

1. Hitam - kuning.

2. Hijau-putih.

3. Biru-putih.

4. Putih-biru.

5. Kuning-hitam.

Yang paling tidak terbaca merah pada warna hijau dan biru pada warna merah. Seperti bisa
dikumpulkan dari latar depan ini dan kombinasi latar belakang, warna cerah harus digunakan
untuk latar depan, dengan warna kurang cerah untuk latar belakang Warna yang sangat
kontras harus diberikan terlebih dahulu ke bidang yang harus dibedakan; maka warna lain
bisa diberikan.

Gunakan warna untuk menyorot bidang penting pada display. Bidang yang penting bisa
diwarnai berbeda dari yang lain. Mempertimbangkan norma-norma budaya. Merah biasanya
berarti bahaya, tapi "merah "juga berarti perusahaan kehilangan uang. Hijau berarti "pergi"
dan merupakan warna yang aman di negara-negara Barat.

Seperti halnya perangkat tambahan lainnya, perancang perlu mempertanyakan nilai tambah
penggunaan warna. Penggunaan warna bisa berlebihan; heuristik yang berguna tidak lebih
dari empat warna untuk pengguna baru dan hanya sampai tujuh untuk yang berpengalaman.
Warna yang tidak relevan mengalihkan perhatian pengguna dan mengurangi kinerjanya.

Dalam banyak kasus, bagaimanapun, warna telah terbukti memfasilitasi penggunaan dengan
cara yang sangat spesifik. Warna harus dianggap sebagai cara penting untuk membedakan
latar depan dan latar belakang, sorot bidang dan data penting, menunjukkan kesalahan, dan
mengizinkan pengkodean input khusus.
 Intranet dan Internet Page Design

Di Bab 11, dasar-dasar merancang situs Web dibahas. Ada lebih banyak petunjuk
tentang penandatanganan formulir isi Internet atau intranet yang bagus yang harus diingat
sekarang bahwa Anda telah mempelajari beberapa aspek dasar dari bentuk input dan desain
tampilan. Gambar 12.11 menunjukkan halaman pesanan form isi yang menunjukkan banyak
elemen desain yang baik untuk Web. Pedoman untuk elemen desain yang baik meliputi :

1. Berikan instruksi yang jelas, karena pengguna Web mungkin tidak terbiasa
dengan istilah teknis.

2. Menunjukkan urutan entri logis untuk mengisi formulir, terutama karena

pengguna mungkin harus menggulir ke bawah ke wilayah halaman yang tidak
terlihat pada awalnya.

3. Gunakan berbagai kotak teks, tombol push, menu drop-down, kotak cek, dan
tombol radio untuk melayani fungsi tertentu dan untuk membuat minat dalam
formulir.

4. Berikan kotak teks bergulir jika Anda tidak yakin tentang berapa banyak ruang
yang dibutuhkan pengguna untuk menjawab sebuah pertanyaan, atau tentang
bahasa, struktur, atau bentuk yang akan digunakan pengguna untuk
memasukkan data.

5. Siapkan dua tombol dasar pada setiap isi formulir Web: Submit dan Clear
Form.

6. Jika formulirnya panjang dan pengguna harus menggulir secara berlebihan,

bagilah formulir menjadi beberapa bentuk sederhana di halaman terpisah.

7. Buat layar umpan balik yang menolak pengajuan formulir, kecuali jawaban
yang wajib diisi dengan benar. Layar formulir yang ditampilkan kembali
sebagai layar umpan balik diberi warna yang berbeda. Warna merah cocok
sebagai warna umpan balik. Misalnya, pengguna mungkin diminta untuk
mengisi negara di bidang negara, atau menunjukkan nomor kartu kredit jika
jenis pembayaran tersebut telah dicentang.

Seringkali bidang wajib dilambangkan pada layer input awal dengan tanda bintang
merah.
 Gambar 12.11
Layar pesanan dari situs Merchants Bay (www.merchantsbay.com) adalah contoh
bagus bagaimana merancang bentuk input yang jelas, mudah digunakan, dan fungsional.

Aplikasi e-commerce melibatkan lebih dari sekadar desain situs Web yang bagus.
Pelanggan perlu merasa yakin bahwa mereka membeli jumlah yang benar, bahwa mereka
mendapatkan harga yang tepat, dan bahwa total biaya pembelian Internet, termasuk biaya
pengiriman, adalah apa yang mereka harapkan. Cara yang paling umum untuk membangun
kepercayaan diri ini adalah dengan menggunakan gambar keranjang belanja atau tas belanja.
Gambar 12.12 menunjukkan isi keranjang belanja bagi pelanggan yang melakukan
pembelian. Fitur penting dari keranjang belanja adalah pelanggan dapat mengedit jumlah
item atau dapat menghapus item seluruhnya.

Aplikasi e-commerce menempatkan tuntutan tambahan pada analis yang harus

merancang situs Web untuk memenuhi beberapa tujuan pengguna dan bisnis, termasuk
menetapkan misi dan nilai perusahaan terkait kerahasiaan, melestarikan privasi pengguna,
dan pengembalian produk yang mudah dan cepat; pengolahan transaksi yang efisien; dan
membangun hubungan pelanggan yang baik.
 Gambar 12. 12
Situs Web Merchants Bay (www.merchantsbay.com) adalah contoh bagus dari
keranjang belanja.