## ANALISIS DAN PERANCANGAN SISTEM
“Study Literasi Merancang Masukan Yang Efektif (Designing Effective Input)”
Ignatius Oki Dewa Brata ignatius.oki@widyatama.ac.id
Prodi Akuntansi D3 , Fakultas Ekonomi dan Bisnis, Universitas Widyatama

## ABSTRAK
Di masa  sekarang  Teknologi  Informasi  (TI)  sangat   berkembang.  Dalam kehidupan sehari - hari  pun  semua  sudah terkomputerisasi.  Seperti  di  sekolah - sekolah,  kantor, pusat  perbelanjaan,    dan    lain-lain    yang    telah    menggunakan    sistem    komputerisasi. Dengan    adanya  sistem    terkomputerisasi    ini    diharapkan    dapat    memudahkan    kita dalam  segala  aspek kehidupan. Dengan  kemajuan  teknologi  saat  ini,  sekarang  semua orang  berusaha  untuk membuat  suatu  sistem  komputerisasi  yang  baik  dan  mudah digunakan    untuk    membantu  pekerjaan  manusia.  Analisis  dan  perancangan  sistem merupakan  langkah      awal      dalam      pengembangan      sistem  untuk  menentukan kebutuhan,  Sedangkan  Sistem  Informasi  merupakan  suatu  sistem  di  dalam  organisasi yang  mempertemukan  kebutuhan      pengolahan      transaksi      harian      yang  mendukung fungsi      operasi      organisasi      yang  bersifat  manajerial.  Penelitan  ini  telah  mencakup elemen  desain  input  untuk  formulir,  tampilan,  dan  formulir  pengisian  Web.  Masukan yang  dirancang  dengan  baik  harus  memenuhi  tujuan  keefektifan,  akurasi,  kemudahan penggunaan,  kesederhanaan,  konsistensi,  dan  daya  tarik.  Pengetahuan  tentang  banyak elemen  desain  yang  berbeda  akan  memungkinkan  analis  sistem  untuk  mencapai  tujuan ini. Empat pedoman untuk formulir masukan yang dirancang dengan baik adalah sebagai berikut: (1) Buat formulir mudah diisi, (2) Memastikan bahwa formulir memenuhi tujuan yang  mereka  rancang,  (3)  formulir  desain  untuk  memastikan  penyelesaian  yang  akurat, dan (4) menjaga formulir tetap menarik.
Kata Kunci ; Analisis, Desain, Informasi, Perancangan, Sistem.

## 1. PENDAHULUAN
Di  masa    sekarang    Teknologi    Informasi    (TI)    sangat    berkembang.    Dalam kehidupan  sehari  -  hari    pun   semua    sudah  terkomputerisasi.    Seperti    di    sekolah  - sekolah,  kantor,  pusat perbelanjaan,  dan  lain-lain  yang  telah  menggunakan  sistem komputerisasi.    Dengan    adanya  sistem    terkomputerisasi    ini    diharapkan    dapat memudahkan    kita    dalam    segala    aspek  kehidupan.  Dengan    kemajuan    teknologi saat    ini,    sekarang    semua    orang    berusaha    untuk  membuat    suatu    sistem

## 2460-030X
komputerisasi    yang    baik    dan    mudah    digunakan    untuk    membantu  pekerjaan manusia.  Adanya  jaringan  yang  luas  dan  mudah  diakses  juga  merupakan  salah  satu langkah  untuk  mendapatkan  informasi  yang  mudah  dan  cepat.  Dengan  adanya pengembangan  inilah,  maka  setiap  perusahaan  ingin  mengubah  sistem  yang  lama  ke sistem yang baru agar tidak tertinggal dari yang lain (Risa, 2018) Analisis dan perancangan sistem merupakan langkah   awal   dalam   pengembangan sistem  untuk  menentukan    kebutuhan,  permasalah    yang  dapat    diatasi    dari    adanya sebuah    sistem    yang  akan    dibangun,    dan    sistem    seperti    apa    yang  akan  dibuat (Whitten & Bentley, 2007).
Sedangkan  Sistem  Informasi  merupakan  suatu  sistem  di  dalam  organisasi  yang mempertemukan  kebutuhan      pengolahan      transaksi      harian      yang  mendukung fungsi   operasi   organisasi   yang bersifat manajerial (Sutabri, 2016). Fase      selanjutnya      setelah      analisis      masalah  adalah      analisis      persyaratan/ kebutuhan      atau  requirements    analysis.  Fase    ini    sangat    penting  dalam menciptakan      sistem      informasi      baru.  Sistem    baru    akan    selalu    dievaluasi, terutama  seberapa    besar    persyaratan    yang    telah    dipenuhi  oleh    sistem    tersebut. Oleh  karena  itu,  fase  ini dapat  menentukan  persyaratan  dalam  sebuah sistem baru (Ariel dan kawan, 2018). Tahapan berikutnya setelah analis selesai dikerjakan adalah tahap  desain  sistem.  Pada  tahap  ini  kegiatan  yang  dilakukan  meliputi  kegiatan perancangan  sistem,  perancangan  database,  dan  perancangan  layout/user  interface system (Risa, 2018)

## 2. TINJAUAN PUSTAKA

## Sistem
Sistem adalah sekelompok unsur yang erat  hubungannya satu  sama lain, yang berfungsi bersama-sama untuk mencapai tujuan tertentu (Sutabri, 2012). Sistem adalah sekelompok elemen-elemen  yang  terintegrasi  dengan  tujuan  yang  sama  untuk  mencapai  tujuan tertentu.  Sistem  juga  merupakan  jaringan  kerja  dari  prosedur-prosedur  yang  saling berhubungan,  terkumpul  bersama-sama  untuk  melakukan  suatu  kegiatan  atau  untuk tujuan tertentu (Kenneth E. Kendall, Julie E, 2013).

## Informasi
Informasi  adalah  data  yang  diolah  menjadi  bentuk  lebih  berguna  dan  lebih  berarti  bagi yang menerimanya (Yakub, 2014). Informasi  adalah data yang di  klarifikasi  atau diolah atau  diinterpretasikan  untuk  digunakan  dalam  proses  pengambilan  keputusan  (Sutabri, 2012).

## Konsep Dasar Sistem Informasi
Sistem  informasi  merupakan  kombinasi  teratur  dari  orang-orang,  perangkat  keras, perangkat  lunak,  jaringan  komunikasi,  dan  sumber  daya  data  yang  mengumpulkan, mengubah,  menyebarkan  informasi  dalam  sebuah  organisasi  (Kenneth  E.  Kendall,  Julie E, 2013).

## 3. METODE PENELITIAN

## Studi Pustaka
Penelitian kepustakaan ini, dilakukan dengan cara membaca dan mempelajari buku -buku yang terkait pembahasan dari penelitian yang dilakukan (Risa, 2018)

## Studi Literatur
Studi  literatur  merupakan  salah  satu  teknik  pengumpulan  data  dengan  cara  membaca, memahami, mengkritik, dan me-review literatur dari  berbagai macam  sumber. Sumber  - sumber yang dapat dijadikan informasi (Sugiyono, 2012).

## 4. HASIL PENELITIAN DAN PEMBAHASAN

## Desain Bentuk yang Baik
Seorang  analis  sistem  harus  mampu  mendesain  formulir  yang  lengkap  dan  berguna. Formulir  yang  tidak  perlu  yang  menyia-nyiakan  sumber  daya  organisasi  harus dihilangkan. Formulir adalah instrumen penting untuk  mengarahkan jalannya pekerjaan. Mereka  adalah  makalah  yang  dicetak  sebelumnya  yang  mengharuskan  orang  untuk mengisi  tanggapan  dengan  cara  yang  terstandardisasi.  Formulir  memperoleh  dan menangkap informasi yang diperlukan oleh anggota organisasi yang sering akan menjadi input  ke  komputer.  Melalui  proses  ini,  formulir  sering  berfungsi  sebagai  dokumen sumber  untuk  pengguna  atau  untuk  memasukkan  ke  aplikasi  e-commerce  yang  harus dimasukkan manusia.
Untuk  mendesain  formulir  yang  menurut  orang  berguna,  empat  pedoman  untuk  desain formulir harus diamati :
1. Buat formulir mudah diisi.
2. Pastikan bahwa formulir memenuhi tujuan yang mereka rancang.
3. Formulir desain untuk memastikan penyelesaian yang akurat.
4. Buat formulir tetap menarik.
Masing-masing  dari  empat  pedoman  ini  dipertimbangkan  secara  terpisah  di  bagian berikut.
• Membuat Formulir Mudah Diisi
Untuk  mengurangi  kesalahan,  mempercepat  penyelesaian,  dan  memfasilitasi pemasukan data, adalah penting bahwa formulir mudah diisi. Biaya formulir sangat minim  dibandingkan  dengan  biaya  waktu  yang  dihabiskan  karyawan  untuk mengisinya dan kemudian memasukkan data ke dalam informasi. sistem. Seringkali mungkin untuk menghilangkan proses menyalin data yang dimasukkan pada formulir ke  dalam  sistem  dengan  menggunakan  penyerahan  elektronik.  Metode  tersebut sering  kali  menampilkan  data  yang  dimasukkan  oleh  pengguna  itu  sendiri,  yang mengunjungi situs web yang disiapkan untuk transaksi informasi atau e-niaga.
- ALIRAN  BUNGA.  Merancang  formulir  dengan  aliran  yang  tepat  dapat meminimalkan waktu dan usaha yang dikeluarkan karyawan dalam penyelesaian

## 2460-030X
formulir.  Formulir  harus  mengalir  dari  kiri  ke  kanan  dan  dari  atas  ke  bawah. Aliran  tidak  logis  membutuhkan  waktu  ekstra  dan  membuat  frustrasi.  Suatu bentuk  yang  mengharuskan  orang  untuk  langsung  menuju  ke  bagian  bawah formulir dan kemudian melompat kembali ke atas untuk penyelesaian memiliki aliran yang buruk.
- TUJUH  SEKTOR  DARI  BENTUK.  Metode  kedua  yang  memudahkan  orang untuk  mengisi  formulir  dengan  benar  adalah  pengelompokan  informasi  yang logis. Tujuh bagian utama formulir adalah sebagai berikut :
1. Heading
2. Identifikasi dan akses
3. Instruksi
4. Tubuh
5. Tanda tangan dan verifikasi
6. Total
7. Komentar
Idealnya,  bagian  ini  harus  muncul  pada  halaman  yang  dikelompokkan sebagaimana  pada  Voucher  Biaya  Karyawan  Bakerloo  Brothers.  Perhatikan bahwa  tujuh  bagian  mencakup  informasi  dasar  yang  diperlukan  pada  sebagian besar bentuk. Bagian atas formulir dikhususkan untuk tiga bagian: judul, bagian identifikasi dan akses, dan bagian petunjuk.
Bagian  judul  biasanya  mencakup  nama  dan  alamat  bisnis  yang  berasal  dari formulir.  Bagian  identifikasi  dan  akses  termasuk  kode  yang  dapat  digunakan untuk  mengajukan  laporan  dan  mendapatkan  akses  ke  sana  di  kemudian  hari. (Di  Bab  13,  kami membahas  secara  terperinci  cara  mengakses  informasi  kunci khusus  dalam  database.)  Informasi  ini  sangat  penting  ketika  organisasi diperlukan untuk  menyimpan dokumen selama beberapa tahun tertentu. Bagian instruksi  menceritakan  bagaimana  formulir  harus  diisi  dan  di  mana  harus diarahkan ketika selesai.
Bagian  tengah  wujudnya  adalah  tubuhnya,  yang membentuk  kira-kira  setengah bentuk.  Bagian  formulir  ini  membutuhkan  detail  dan  pengembangan  paling banyak  dari  orang  yang  menyelesaikannya.  Tubuh  adalah  bagian  dari  bentuk yang paling mungkin berisi data variabel yang jelas. Bagian bawah formulir terdiri dari tiga bagian: tanda tangan dan verifikasi, total, dan  komentar.  Mewajibkan  jumlah  total  dan  ringkasan  komentar  adalah  cara yang logis untuk memberikan penutupan bagi orang yang mengisi formulir.
Ada  satu  lagi  fitur  yang  perlu  diperhatikan  tentang  bentuk  Bakerloo Brothers.  Desain  formulir  menyediakan  pemeriksaan  internal,  dengan  total kolom dan total baris yang diharapkan untuk ditambahkan ke nomor yang sama. Jika  total  baris  dan  kolom  tidak  ditambahkan  ke  nomor  yang  sama,  karyawan mengisi  formulir  dimana  ada  masalah  dan  dapat  memperbaikinya  di  tempat. Kesalahan  dicegah,  dan  karyawan  dapat  menerima  kembali  jumlah  yang  harus dibayar; kedua hasil diatribusikan ke bentuk desain yang sesuai.
| Ignatius Oki Dewa Brata
1835
- CAPTIONING.  Clear  captioning  adalah  teknik  lain  yang  dapat  mempermudah pengisian  formulir.  Keterangan  memberi  tahu  orang  yang  menyelesaikan formulir  apa  yang  harus  dimasukkan  ke  dalam  garis  kosong,  spasi,  atau  kotak. Dua  jenis  baris  keterangan,  dua  jenis  keterangan  check-off,  dan  contoh  dari judul kotak dan keterangan tabel ditampilkan.
Keuntungan  menempatkan  keterangan  di  bawah  garis  adalah  bahwa  ada  lebih banyak  ruang  pada  jalur  itu  sendiri  untuk  data.  Kerugiannya  adalah  bahwa kadang-kadang  tidak  jelas  garis  mana  yang  dikaitkan  dengan  teks  —  garis  di atas atau di bawah judul.
Judul  baris  dapat  di  sebelah  kiri  kosong  dan  pada  baris  yang  sama,  atau mereka  dapat  dicetak  di  bawah  garis  di  mana  data  akan  dimasukkan.  Cara lain untuk  keterangan  adalah  menyediakan  kotak  untuk  data,  bukan  garis. Keterangan  dapat  ditempatkan  di  dalam,  di  atas,  atau  di  bawah  kotak.  Kotak pada  formulir  membantu  orang  memasukkan  data  di  tempat  yang  benar,  dan mereka  juga  mempermudah  pembacaan  formulir  untuk  penerima  formulir. Judulnya harus menggunakan ukuran kecil agar tidak mendominasi area masuk. Tanda centang vertikal kecil mungkin disertakan dalam kotak jika data ditujukan untuk masuk ke sistem komputer. Jika tidak ada cukup ruang pada catatan untuk data,  orang  yang  mengisi  formulir,  daripada  operator  entri  data,  memiliki kebebasan untuk  menentukan bagaimana data harus disingkat. Keterangan juga dapat  mencakup  catatan  klarifikasi  kecil  untuk  membantu  pengguna memasukkan informasi dengan benar, seperti Tanggal (MM / DD / YYYY) atau Nama (Terakhir, Pertama, Awal Tengah). Apa  pun  gaya  teks  garis  yang  dipilih,  penting  untuk  menggunakannya  secara konsisten.  Misalnya,  membingungkan  untuk  mengisi  formulir  yang  memiliki keterangan di atas dan di bawah garis.
Keterangan  check-off  lebih  unggul  ketika  opsi  respons  dibatasi.  Perhatikan daftar metode perjalanan yang ditunjukkan untuk contoh check-off vertikal. Jika biaya karyawan untuk  perjalanan bisnis diganti  hanya untuk  metode perjalanan yang  terdaftar,  sistem  check-off  lebih  bijaksana  daripada  jalur  kosong.  Metode ini  memiliki  keuntungan  tambahan  untuk  mengingatkan  orang  yang memverifikasi  data  untuk  mencari  stub  tiket  tiket  pesawat  atau  tanda  terima lainnya.
Keterangan horizontal check-off juga lebih unggul daripada caption baris ketika informasi yang diperlukan bersifat rutin dan konstan. Contohnya adalah formulir yang  akan  meminta  layanan  dari  salah  satu  dari  berikut  ini  departemen:  Lab Foto,  Departemen  Percetakan,  Pemeliharaan,  atau  Persediaan.  Departemen- departemen  secara  kasar  menyediakan  layanan  kepada  orang  lain  dalam organisasi dan tidak mungkin berubah dengan cepat. Keterangan  tabel  bekerja  dengan  baik  di  badan  formulir  yang  rinciannya diperlukan. Ketika seorang karyawan mengisi formulir dengan keterangan tabel, ia  membuat  tabel  untuk  orang  berikutnya  yang  menerima  formulir,  sehingga membantu mengatur data secara koheren.

## 2460-030X
Kombinasi  keterangan  juga  dapat  digunakan  secara  efektif.  Misalnya, keterangan  tabel  dapat  digunakan  untuk  menentukan  kategori  seperti  kuantitas, dan  keterangan  baris  dapat  digunakan  untuk  menunjukkan  di  mana  subtotal, pajak  penjualan,  dan  total  seharusnya.  Karena  keterangan  berbeda  melayani tujuan yang berbeda, biasanya perlu menggunakan beberapa gaya teks di setiap formulir.
• Memenuhi Tujuan Yang Dituju
Formulir  dibuat  untuk  melayani  satu  tujuan  atau  lebih  dalam  pencatatan, pemrosesan, penyimpanan, dan pengambilan informasi untuk bisnis. Kadang-kadang diinginkan untuk  memberikan informasi  yang berbeda ke berbagai  departemen atau pengguna tetapi masih  berbagi  beberapa informasi  dasar. Situasi  ini adalah di mana bentuk-bentuk khusus berguna.
Bentuk  khusus  istilah  juga  dapat  merujuk  hanya  pada  cara  formulir  disiapkan  oleh stasioner.  Contoh  bentuk-bentuk  khusus  stasioner  adalah  bentuk  multi-bagian  yang digunakan  untuk  membuat  data  rangkap  tiga  instan,  formulir  umpan  kontinu  yang berjalan  melalui  printer  tanpa  intervensi,  dan  bentuk  berlubang  yang  meninggalkan stub di belakang sebagai catatan ketika mereka dipisahkan.
• Memastikan Penyelesaian Akurat
Tingkat  kesalahan  biasanya  terkait  dengan  pengumpulan  data  yang  menurun  tajam ketika  formulir  dirancang  untuk  memastikan  penyelesaian  yang  akurat.  Desain penting  untuk  memastikan  bahwa  orang-orang  melakukan  hal  yang  benar  dengan formulir  kapan  pun  mereka  menggunakannya.  Ketika  karyawan  layanan  seperti pembaca  meter  atau  pengguna  persediaan  menggunakan  perangkat  genggam  untuk memindai  atau  sebaliknya  memasukkan  data  di  situs  yang  sesuai,  langkah  ekstra transkripsi  selama  entri  data  dihindari.  Perangkat  genggam  menggunakan  transmisi nirkabel,  atau  dicolokkan  kembali  ke  sistem  komputer  yang  lebih  besar  sehingga mereka dapat mengunggah data yang telah disimpan oleh pekerja layanan. Tidak ada transkripsi lebih lanjut dari apa yang telah terjadi di lapangan diperlukan.
• Menjaga Bentuk Menarik.
Meskipun  kita  berurusan  dengan  daya  tarik  bentuk-bentuk  terakhir,  urutan penampilannya  tidak  dimaksudkan  untuk  mengurangi  pentingnya.  Sebaliknya,  ini dibahas  terakhir  karena  membuat  formulir  menarik  dilakukan  dengan  menerapkan teknik  yang  dibahas  di  bagian  sebelumnya.  Bentuk  estetika  menarik  orang  ke dalamnya dan mendorong penyelesaian.
Formulir harus terlihat rapi. Supaya menarik, formulir harus mendapatkan informasi dalam  urutan  yang  diharapkan;  konvensi  meminta  nama,  alamat  jalan,  kota,  negara bagian, dan kode pos atau pos (dan negara, jika perlu). Tata letak dan alur yang tepat berkontribusi pada daya tarik bentuk.
Menggunakan  jenis  font  yang  berbeda  dalam  bentuk  yang  sama  dapat  membantu membuatnya  menarik  bagi  pengguna  untuk  mengisi.  Memisahkan  kategori  dan subkategori dengan garis tebal dan tipis juga dapat mendorong minat dalam bentuk. Ketik  font  dan  garis  berat  adalah  elemen  desain  yang  berguna  untuk  menangkap
perhatian dan membuat orang merasa aman bahwa mereka mengisi formulir dengan benar.
Paket  desain  formulir  tersedia  untuk  semua  sistem  desktop.  Perangkat  lunak  yang memungkinkan seorang analis untuk  secara otomatis mengotomatisasi  proses bisnis di  mana  formulir  kertas  sudah  ada.  Analis  dapat  menggunakan  seperangkat  alat untuk  mengatur  bidang,  mencentang  kotak,  garis,  kotak,  dan  banyak  fitur  lainnya. Formulir kertas juga dapat dipindai dan kemudian dipublikasikan ke Web.
• Mengontrol Formulir Bisnis
Mengontrol  bentuk-bentuk  bisnis  adalah  tugas  yang  penting.  Bisnis  sering memiliki  spesialis  bentuk  yang  mengontrol  formulir,  tetapi  terkadang  pekerjaan  ini jatuh ke analis sistem, yang membuat dan menerapkan kontrol formulir.
Tugas-tugas  dasar  untuk  mengontrol  formulir  termasuk  memastikan  bahwa setiap  bentuk  yang  digunakan  memenuhi  tujuan  spesifiknya  dalam  membantu pekerja  menyelesaikan  tugas-tugas  mereka  dan  bahwa  tujuan  yang  ditentukan merupakan  bagian  integral  dari  fungsi  organisasi,  mencegah  duplikasi  informasi yang  dikumpulkan  dan  dari  bentuk-bentuk  yang  mengumpulkannya.  ,  merancang formulir  yang  efektif,  memutuskan  cara  mereproduksi  formulir  dengan  cara  yang paling  ekonomis,  dan  menetapkan  prosedur  yang  menyediakan  formulir  (bila diperlukan)  dengan  biaya  serendah  mungkin.  Seringkali  ini  mengharuskan pembuatan formulir tersedia di Web untuk dicetak. Nomor formulir unik dan tanggal revisi  (bulan / tahun) harus disertakan pada setiap formulir, terlepas dari apakah itu selesai  dan  dikirim  secara  manual  atau  elektronik.  Ini  membantu  pengguna  diatur dan efisien.

## Tampilan Baik dan Desain Bentuk Web
Sebagian besar dari apa yang telah kami katakan tentang desain  bentuk  yang baik  dapat dialihkan untuk menampilkan desain dan desain situs web, halaman web, telepon pintar, dan  tablet.  Sekali  lagi,  pengguna  harus  tetap  terdepan  dalam  pemikiran  analis  selama desain display.
Namun  ada  beberapa  perbedaan,  dan  analis  sistem  harus  berusaha  untuk  mewujudkan kualitas  unik  display  daripada  untuk  mengadopsi  secara  buta  konvensi  bentuk  kertas. Satu perbedaan besar adalah kehadiran kursor secara konstan di layar, yang mengarahkan pengguna ke posisi entri data saat ini. Saat data dimasukkan di layar, kursor bergerak satu karakter ke depan, menunjukkan jalan.
Perbedaan  utama  lainnya  di  antara  bentuk  elektronik,  Web,  dan  statis  adalah  bahwa perancang  dapat  menyertakan  bantuan  pengguna  yang  peka  konteks  dalam  bentuk pengisian  elektronik.  Praktik  ini  dapat  mengurangi  kebutuhan  akan  instruksi  yang ditampilkan untuk setiap baris, sehingga mengurangi  kekacauan bentuk  dan mengurangi panggilan  ke  dukungan  teknis.  Menggunakan  pendekatan  berbasis  Web  juga memungkinkan  perancang  untuk  memanfaatkan  hyperlink,  sehingga  memastikan  bahwa formulir  diisi  dengan  benar  dengan  memberikan  contoh  hyperlink  kepada  pengguna formulir yang diisi dengan benar.

## 2460-030X
Di  bagian  ini,  kami  menyajikan  pedoman  untuk  desain  tampilan  yang  efektif. Mereka  disajikan  untuk  membantu  pencapaian  tujuan  desain  input  secara keseluruhan  dari  keefektifan,  akurasi,  kemudahan  penggunaan,  kesederhanaan, konsistensi,  dan  daya  tarik.  Empat  pedoman  berikut  untuk  desain  tampilan  adalah penting tetapi tidak lengkap :
1. Pertahankan tampilan sederhana.
2. Pertahankan presentasi tampilan tetap konsisten.
3. Memfasilitasi pergerakan pengguna di antara tampilan layar dan halaman.
4. Buat tampilan yang menarik dan menyenangkan.
Pada subbagian berikutnya, kami mengembangkan masing-masing pedoman ini dan menyajikan banyak teknik desain untuk mengamati empat pedoman.
• Menjaga Tampilan yang Sederhana
Pedoman  pertama  untuk  desain  tampilan  yang  baik  adalah  menjaga  tampilan tetap  sederhana.  Layar  harus  menunjukkan  hanya  yang  diperlukan  untuk  tindakan tertentu  yang  sedang  dilakukan.  Untuk  pengguna  sesekali,  50  persen  dari  area tampilan harus berisi informasi yang berguna.
- TIGA  BAGIAN  SCREEN.  Output  tampilan  harus  dibagi  menjadi  tiga  bagian. Bagian atas layar menampilkan bagian judul. Judul berisi judul perangkat lunak dan  file  terbuka,  menu  pull-down,  dan  ikon  yang  melakukan  tugas-tugas tertentu.
Bagian tengah disebut badan layar. Tubuh dapat digunakan untuk entri data dan diatur dari kiri ke kanan dan atas ke bawah, karena orang-orang dalam budaya Barat mengalihkan  pandangan  mereka  ke  halaman  dengan  cara  ini.  Keterangan  dan instruksi harus diberikan di bagian ini untuk membantu pengguna memasukkan data yang bersangkutan di tempat  yang tepat. Bantuan sensitif konteks juga dapat dibuat tersedia  dengan  meminta  pengguna  mengklik  tombol  kanan  mouse  di  bagian  tubuh layar.
Bagian  ketiga  dari  tampilan  adalah  bagian  komentar  dan  instruksi.  Bagian  ini dapat  menampilkan  menu  perintah  singkat  yang  mengingatkan  pengguna  tentang dasar-dasar  seperti  cara  mengubah  halaman  atau  fungsi,  menyimpan  file,  atau mengakhiri  entri.  Pencantuman  dasar-dasar  semacam  itu  dapat  membuat  pengguna yang  tidak  berpengalaman  merasa  jauh  lebih  aman  tentang  kemampuan  mereka untuk menyelesaikan tugas mereka.
Cara  lain  untuk  menjaga  tampilan  sederhana  adalah  dengan  menggunakan  bantuan konteks-sensitif,  tombol  roll-over  yang  mengungkapkan  informasi  lebih  lanjut,  dan jendela  pop-up  lainnya.  Juga,  perlu  diingat  bahwa  pengguna  dapat  meminimalkan atau memaksimalkan jendela sesuai kebutuhan. Dengan cara ini, pengguna memulai dengan  tampilan  sederhana  yang  dirancang  dengan  baik  yang  dapat  mereka sesuaikan  dan  kontrol  melalui  penggunaan  beberapa  jendela.  Hyperlink  pada formulir pengisian berbasis Web melayani tujuan yang sama.
• Menjaga Display Konsisten
Pedoman  kedua  untuk  desain  tampilan  yang  baik  adalah  menjaga  layar  tetap konsisten.  Jika  pengguna  bekerja  dari  bentuk  kertas,  tampilan  harus  mengikuti  apa
yang  ditampilkan  di  atas  kertas.  Menampilkan  dapat  disimpan  konsisten  dengan mencari  informasi  di area yang sama setiap kali layar baru diakses. Juga, informasi yang secara logis dimiliki bersama harus secara konsisten dikelompokkan bersama: Nama  dan  alamat  disatukan,  bukan  nama  dan  kode  pos.  Meskipun  layar  harus memiliki  gerakan  alami  dari  satu  daerah  ke  daerah  lain,  informasi  tidak  boleh tumpang tindih dari satu kelompok ke kelompok lainnya. Anda tidak ingin nama dan alamat di satu wilayah dan kode pos di tempat lain.
• Memfasilitasi Gerakan
Pedoman ketiga untuk desain  tampilan yang baik adalah untuk  membuatnya mudah berpindah dari satu halaman ke halaman lain. Aturan "tiga-klik" mengatakan bahwa pengguna  harus  dapat  membuka  halaman  yang  mereka  butuhkan  dalam  tiga  klik mouse  atau  guratan  keyboard.  Formulir  berbasis  web  memfasilitasi  pergerakan dengan  menggunakan  hyper-link  ke  halaman  web  relevan  lainnya.  Metode  umum lainnya  untuk  gerakan  adalah  membuat  pengguna  merasa  seolah-olah  bergerak secara  fisik  ke  halaman  baru.  Ilusi  gerakan  fisik  di  antara  layar  ini  dapat  diperoleh dengan menggunakan panah bergulir, jendela pop-up yang sensitif terhadap konteks, atau dialog pada layar.
• Merancang Tampilan yang Menarik dan Menyenangkan
Pedoman  keempat  untuk  desain  tampilan  yang  baik  adalah  untuk  menciptakan tampilan yang menarik. Jika pengguna menemukan tampilan yang menarik, mereka cenderung  lebih  produktif,  membutuhkan  lebih  sedikit  pengawasan,  dan  membuat lebih  sedikit  kesalahan.  Layar  harus  menarik  pengguna  ke  dalamnya  dan  menarik perhatian  mereka.  Tujuan  ini  dicapai  dengan  penggunaan  banyak  area  terbuka  di sekitar  bidang  entri  data  sehingga  layar  mencapai  tampilan  yang  rapi.  Anda seharusnya  tidak  pernah  memadati  formulir;  sama  halnya,  Anda  tidak  boleh memadati layar. Anda jauh lebih baik menggunakan beberapa jendela atau hyperlink dari jamming semuanya ke dalam satu halaman.
Gunakan  alur  logis  dalam  rencana  ke  halaman  tampilan  Anda.  Mengatur  materi untuk memanfaatkan cara orang mengkonsepkan pekerjaan mereka sehingga mereka dapat  dengan  mudah  menemukan  jalan  mereka.  Dengan  munculnya  GUI,  adalah mungkin  untuk  membuat  tampilan  input  sangat  menarik.  Dengan  menggunakan kotak berwarna atau berarsir dan membuat kotak dan panah tiga dimensi, Anda dapat membuat formulir ramah pengguna dan menyenangkan untuk digunakan. Ketika merenungkan penggunaan gaya dan ukuran font yang berbeda, tanyakan pada diri  Anda  apakah  mereka  benar-benar  membantu  pengguna  dalam  memahami  dan menyetujui tampilan. Jika mereka menarik perhatian yang tidak semestinya terhadap seni  desain  tampilan  atau  jika  mereka  berfungsi  sebagai  pengalih  perhatian, tinggalkan  saja.  Ketahuilah  bahwa  tidak  semua  halaman  web  dilihat  secara  identik oleh  berbagai  browser.  Uji  formulir  prototipe  Anda  dengan  berbagai  kombinasi untuk melihat apakah pengguna menyatakan preferensi untuk kombinasi atau apakah mereka  menyesatkan  sebagian  besar  pengguna.  Untuk  font  Web,  gunakan  Verdana atau Arial.
• Menggunakan Ikon Dalam Desain Tampilan

## 2460-030X
Ikon  bergambar,  representasi  layar  melambangkan  tindakan  komputer  yang  dapat dipilih  pengguna  menggunakan  mouse,  keyboard,  lightpen,  layar  sentuh,  atau joystick.  Ikon  melayani  fungsi  yang  mirip  dengan  kata-kata  dan  dapat menggantikannya  di  banyak  menu,  karena  artinya  lebih  cepat  dipahami  daripada kata-kata.  Perangkat  seluler  seperti  Apple  iPhone  dan  iPod  telah  mempopulerkan penggunaan  ikon  pada  layar  sentuh  dan menjadikannya  antarmuka  yang  akrab  bagi banyak bisnis dan pengguna lain.
Ada  beberapa  panduan  untuk  desain  ikon  yang  efektif.  Bentuk  harus  siap  dikenali sehingga  pengguna  tidak  perlu  menguasai  kosakata  baru.  Banyak  ikon  sudah diketahui  oleh  sebagian  besar  pengguna.  Penggunaan  ikon  standar  dapat  dengan cepat  memasuki  waduk  ini  dengan  makna  umum.  Pengguna  dapat  menunjuk  ke sebuah lemari arsip, "tarik keluar" ikon folder file, "ambil" sepotong ikon kertas, dan "lempar"  di  ikon  keranjang  sampah.  Dengan  menggunakan  ikon  standar,  perancang dan pengguna semua menghemat waktu.
Ikon  untuk  aplikasi  tertentu  harus  dibatasi  hingga  sekitar  20  bentuk  yang  dapat dikenali  sehingga  ikon  kosakata  tidak  berlebihan  dan  sehingga  skema  pengkodean yang  bermanfaat  masih  dapat  direalisasikan.  Gunakan  ikon  secara  konsisten  di seluruh  aplikasi  di  mana  mereka  akan  muncul  bersama  untuk  memastikan kontinuitas  dan  mudah  dipahami.  Umumnya,  ikon  bermanfaat  bagi  pengguna  jika mereka bermakna.
• Desain Antarmuka Pengguna Grafis
Antarmuka  pengguna  dengan  sistem  operasi  (OS),  seperti  Windows  atau  Mac  OS, melalui  antarmuka  pengguna  grafis  (GUI,  dilafalkan  "GOO-ey"),  juga  disebut sebagai  antarmuka  titik-dan-klik.  Pengguna  dapat  menggunakan  mouse  untuk mengklik  objek  dan  tarik  ke  posisinya.  Antarmuka  pengguna  grafis  memanfaatkan fitur tambahan dalam desain tampilan seperti kotak teks, kotak centang, tombol opsi, daftar dan kotak daftar drop-down, slider dan tombol putar, kotak dialog kontrol tab, dan peta gambar.
- KOTAK  TEKS.  Sebuah  persegi  panjang  mewakili  kotak  teks  dan  digunakan untuk  menguraikan  entri  data  dan  bidang  tampilan.  Perawatan  harus  dilakukan untuk  memastikan  bahwa  kotak  teks  cukup  besar  untuk  menampung  semua karakter yang harus dimasukkan. Setiap kotak teks harus memiliki keterangan di sebelah  kiri,  mengidentifikasi  apa  yang  harus  dimasukkan  atau  apa  yang ditampilkan  di  kotak.  Di  Microsoft  Access,  data  karakter  rata  kiri,  dan  data numerik selaras kanan.
Dimulai dengan browser HTML5, fitur yang disebut placeholder memungkinkan  perancang  untuk  menempatkan  sejumlah  kecil  teks  ke  dalam  kotak teks, yang akan ditampilkan dalam warna yang lebih terang, memberi tahu penampil apa  yang  harus  dimasukkan  ke  dalam  kotak  teks.  Ketika  kursor  ditempatkan  di lapangan (mengklik atau tabbing ke dalamnya), teks menghilang. Beberapa  jenis  kotak  teks  baru  tersedia  dengan  HTML5.  Ini  adalah  email,  telepon, dan  URL  (alamat  Web).  Ini  muncul  sebagai  kotak  teks  biasa  di  komputer,  tetapi ketika  digunakan  di  tablet  atau  ponsel  cerdas,  mereka  dapat  digunakan  untuk menyesuaikan  keyboard  pop-up.  Misalnya,  jika  kotak  teks  digunakan  untuk  nomor
telepon,  layout  keyboard  virtual  berubah  menjadi  pad  nomor.  Jika  kotak  teks digunakan  untuk  memasukkan  URL,  keyboard  virtual  termasuk  tombol  .com. Akhirnya,  jika  kotak  teks  digunakan  untuk  memasukkan  alamat  email,  keyboard virtual  menyertakan  simbol  @.  Kustomisasi  ini  membantu  pengguna  memasukkan data dengan cepat dan akurat.
Datalist  adalah  fitur  baru  yang  termasuk  dalam  HTML5  yang  menampilkan  daftar drop-down  saran  yang  telah  ditetapkan  untuk  mempermudah  entri  bagi  pengguna. Saat  pengguna  mulai  mengetik  beberapa  huruf  pertama,  datalist  ditampilkan. Pengguna  dapat  memilih  salah  satu  item  dalam  daftar  untuk  membuat  pilihan.  Ini digunakan dalam fungsi autocomplete.
- LIHAT  KOTAK.  Dalam  contoh  kontrol  GUI,  kotak  centang  digunakan  untuk menunjukkan  pelanggan  baru.  Kotak  centang  berisi  X  atau  kosong,  tergantung pada  apakah  pengguna  memilih  opsi;  mereka  digunakan  untuk  pilihan  non- eksklusif  di  mana  satu  atau  lebih  dari  opsi  dapat  diperiksa.  Notasi  alternatif adalah  menggunakan  tombol  persegi  dengan  tanda  centang  ( ✓ )  untuk menunjukkan  bahwa  opsi  telah  dipilih.  Perhatikan  bahwa  kotak  centang  teks, atau label, biasanya ditempatkan di sebelah kanan kotak. Jika ada lebih dari satu kotak  centang,  label  harus  memiliki  beberapa  pesanan  untuk  mereka,  baik alfabetik  atau  dengan  item  yang  paling  sering  diperiksa  yang  muncul  pertama dalam  daftar.  Jika  ada  lebih  dari  10  kotak  centang,  Anda  dapat mengelompokkannya dalam kotak berbatasan.
- TOMBOL  OPSI.  Tombol  pilihan,  juga  disebut  tombol  radio,  digunakan  untuk memilih  pilihan  eksklusif.  Hanya  satu  dari  beberapa  opsi  yang  bisa  dipilih.
Dengan  menggunakan  tombol  opsi,  Anda  dapat  menjelaskan  kepada  pengguna bahwa mereka harus memutuskan di antara opsi. Pilihan lagi terdaftar di sebelah kanan  tombol,  biasanya  dalam  beberapa  urutan.  Jika  ada  opsi  yang  umum dipilih,  biasanya  dipilih  sebagai  default  ketika  halaman  pertama  kali ditampilkan.  Seringkali  ada  persegi  panjang,  yang  disebut  grup  opsi, mengelilingi tombol radio. Jika ada lebih dari enam tombol pilihan, Anda harus mempertimbangkan menggunakan kotak daftar atau kotak daftar drop-down.
- DAFTAR DAN DAFTAR KOTAK DROP-DOWN. Kotak daftar menampilkan beberapa  opsi  yang  dapat  dipilih  dengan  mouse.  Kotak  daftar  drop-down digunakan  ketika  ada  sedikit  ruang  yang  tersedia  di  halaman.  Satu  persegi panjang dengan panah menunjuk ke arah garis yang terletak di sisi kanan persegi panjang.  Memilih  panah  ini  menyebabkan  kotak  daftar  ditampilkan.  Setelah pengguna  membuat  pilihan,  itu  ditampilkan  di  drop-down  selection  rectangle dan  list  list  menghilang.  Jika  ada  pilihan  yang  umum  dipilih,  biasanya ditampilkan dalam daftar drop-down secara default.
- KOTAK  DIALOG  TAB  KONTROL.  Kotak  dialog  kontrol  tab  adalah  bagian lain  dari  antarmuka  pengguna  grafis  dan  cara  lain  untuk  membuat  pengguna terorganisir  dan  menjadi  bahan  sistem  secara  efisien.  Dalam  merancang  kotak kontrol  tab,  buat  tab  terpisah  untuk  setiap  fitur  unik,  letakkan  tab  yang  paling

## 2460-030X
sering  digunakan  di  depan  dan  tampilkan  terlebih  dahulu,  dan  sertakan  tombol untuk OK, Batal, dan Bantuan.
- SLIDER  DAN  TOMBOL  SPIN.  Tombol  slider  dan  spin  digunakan  untuk mengubah  data  yang  memiliki  rentang  nilai  berkelanjutan,  memberikan pengguna  lebih  banyak  kontrol  ketika  memilih  nilai.  Memindahkan  slider  ke satu arah atau yang lain (baik kiri / kanan atau atas / bawah) meningkatkan atau menurunkan  nilai.  Gambar  12.5  mengilustrasikan  penggunaan  slider  untuk mengubah  jumlah  warna  merah,  hijau,  dan  biru  saat  memilih  warna  baru. Tombol  spin  juga  digunakan  untuk  mengubah  nilai  kontinu  dan  ditampilkan  di sebelah kanan slider.
- KONTROL  KALENDER.  Dimulai  dengan  HTML5,  perancang  dapat menyertakan  kontrol  kalender  untuk  memilih  tanggal,  tanggal  dan  waktu,  atau tanggal  dan  waktu  setempat.  Kalender  ditampilkan,  dan  pengguna  memilih tanggal default atau dapat mengubahnya dengan mengklik tanggal atau bergulir melalui  kalender.  Ini  biasa  terjadi  di  situs  reservasi  hotel.  Tanggal  default mungkin hari  ini, tetapi  pengguna akan mengubahnya ke hari  kedatangan yang sebenarnya.  Setelah  pengguna  menempatkan  tanggal  kedatangan  di  kalender, kalender  kedua  akan  muncul  dengan  hari  berikutnya  sebagai  tanggal keberangkatan  default.  Pengguna  kembali  mengubah  ini  ke  tanggal keberangkatan yang benar, tetapi proses pemilihan tanggal dari kalender pop-up masih lebih mudah dan kurang rawan kesalahan daripada memasukkan teks.
- IMAGE  MAPS.  Bidang  peta  gambar  digunakan  untuk  memilih  nilai  dalam gambar. Pengguna mengklik pada suatu  titik di  dalam gambar, dan koordinat x dan  y  yang  sesuai  dikirim  ke  program.  Peta  gambar  digunakan  saat  membuat halaman web yang berisi  peta dengan instruksi untuk  mengklik  di area tertentu untuk melihat peta wilayah secara mendetail.
- WILAYAH  TEKS.  Area  teks  digunakan  untuk  memasukkan  jumlah  teks  yang lebih  besar.  Area  ini  mencakup  sejumlah  baris,  kolom,  dan  bilah  gulir  yang memungkinkan pengguna untuk  memasukkan dan melihat teks lebih besar dari ukuran area kotak. Ada dua cara untuk menangani teks ini. Salah satunya adalah untuk  menghindari  penggunaan  kata  bungkus,  memaksa  pengguna  untuk menekan tombol Enter untuk pindah ke baris berikutnya; teks akan bergeser ke kanan  jika  melebihi  lebar  area  teks.  Pilihan  lainnya  adalah  membolehkan pengemasan kata.
- KOTAK PESAN. Kotak pesan digunakan untuk memperingatkan pengguna dan memberikan  pesan  umpan  balik  lainnya  di  kotak  dialog,  sering  kali  tumpang tindih  dengan  tampilan.  Kotak  pesan  memiliki  format  berbeda.  Masing-masing harus muncul di jendela persegi  panjang dan harus dengan jelas mengeja pesan sehingga pengguna tahu persis apa yang terjadi dan tindakan apa yang mungkin.
- TOMBOL COMMAND. Tombol perintah melakukan tindakan ketika pengguna memilihnya  dengan  mouse.  Hitung  Total,  Tambah  Pesanan,  dan  OK  adalah semua contoh. Teksnya berpusat di dalam tombol, yang memiliki bentuk persegi panjang.  Jika  ada  tindakan  default,  teks  dikelilingi  dengan  garis  putus-putus.
Tombol  juga  dapat  diarsir  untuk  menunjukkan  bahwa  itu  adalah  default. Pengguna menekan tombol Enter untuk memilih tombol default.
• Kontrol Formulir dan Nilai
Setiap  kontrol  yang  termasuk  dalam  antarmuka  GUI  harus  memiliki  beberapa  cara untuk menyimpan data yang terkait dengan kontrol. Pada halaman web ini dilakukan menggunakan nama dan pasangan nilai yang dikirimkan ke server atau dalam email yang  dikirim  bersama  dengan  formulir  (seperti  nama  kota  dan  nilai  Paris).  Nama didefinisikan  pada  formulir  halaman  web,  dan  perangkat  lunak  server  harus mengenali nama untuk  memahami apa yang harus dilakukan dengan nilai  atau data yang dikirim dengan formulir Web.
Bagaimana nilai yang diperoleh berbeda untuk setiap kontrol bentuk Web. Di kotak teks  atau  area  teks,  nilainya  terdiri  dari  karakter yang  dimasukkan  ke  dalam  kotak. Pada tombol radio dan kotak centang, teks yang ditampilkan di sebelah kanan setiap tombol radio atau kotak centang hanya untuk digunakan manusia. Nilai didefinisikan dalam  formulir  Web  dan  ditransmisikan  ketika  formulir  dikirim.  Jika  data  ini digunakan  untuk  memperbarui  database,  nilainya  sering  kali  merupakan  kode  yang dikirim dan kemudian disimpan di server, dan ana-lyst  harus memutuskan nilai  apa yang  seharusnya  tepat  ketika  setiap  tombol  radio  atau  kotak  centang  diklik.  Daftar drop-down  agak  berbeda  dari  tombol  radio  atau  kotak  centang  karena  ada  banyak opsi  untuk  daftar  drop-down  yang  diberikan.  Nilai  harus  diputuskan  untuk  masing- masing  opsi  daftar  drop-down  dan,  ketika  opsi  dipilih,  nilai  yang  dipilih  dikirim bersama  formulir.  Nilai  formulir  juga  dapat  digunakan  dalam  perhitungan  yang dilakukan  menggunakan  JavaScript  pada  browser.  Ini  dapat  digunakan  untuk mengalikan, menambah, dan membuat keputusan.

## 2460-030X
Gambar diatas adalah contoh formulir yang digunakan untuk mendapatkan harga dan mendaftar untuk pelayaran. Teks di area Nama, Alamat, Kota, Negara, Zip, Telepon, dan  Email  dikirim  ke  server  saat  formulir  dikirim.  Hanya  satu  dari  tombol  radio untuk  pelayaran  4  hari,  7  hari,  atau  14  hari  yang  dapat  dipilih.  Nilai  yang  dikirim adalah S untuk jangka pendek jika pelayaran 4 hari dipilih, A untuk panjang rata-rata jika  7  hari  telah  dipilih,  dan  L  untuk  pesiar  panjang  jika  pelayaran  14  hari  dipilih. Selain itu, ketika salah satu dari kapal pesiar ini dipilih, jumlah dolar dimasukkan ke dalam salah satu kotak teks di sisi kiri formulir Web, dan setiap tombol  dan jumlah radio  yang  dipilih  sebelumnya  akan  dihapus.  Jika  kotak  centang  ruang  sisi  laut diperiksa,  nilai  Y  untuk  ya  dikirimkan  ke  server,  jumlah  tersebut  dimasukkan  ke dalam  kotak  teks  sisi  kiri,  dan  totalnya  diperbarui.  Jika  pelanggan  mencoba  untuk mengubah  jumlah  dalam  kotak  teks  yang  dihitung,  mereka  direset.  Ketika  tombol submit diklik, jumlah yang dikirim ke server bersama dengan semua data lainnya.
• Bidang Tersembunyi
Jenis kontrol lain yang ditemukan pada formulir Web adalah bidang tersembunyi. Ini tidak terlihat oleh pemirsa, tidak mengambil ruang di halaman web, dan hanya boleh berisi  nama  dan  nilai.  Seringkali  bidang  tersembunyi  digunakan  untuk  menyimpan nilai  yang dikirim dari satu  formulir Web ke server. Ini biasanya harus dimasukkan pada  formulir  kedua  ketika  beberapa  formulir  diperlukan  untuk  mengambil  semua data  transaksi.  Terkadang  mereka  digunakan  untuk  menyimpan  informasi  tentang jenis  browser  yang  digunakan,  pemirsa sistem  operasi,  dan  seterusnya.  Terkadang, bidang  tersembunyi  berisi  bidang  kunci  yang  digunakan  untuk  mencari  rekaman untuk pelanggan atau sesi penelusuran.
• Grafik Peristiwa-Tanggapan
Ketika ada interaksi yang rumit pada formulir Web (atau bentuk GUI lainnya), bagan kejadian-respons  dapat  digunakan  untuk  mencantumkan  berbagai  peristiwa  yang dapat  terjadi.  Grafik-grafik  kejadian-respons  dapat  digunakan  pada  tingkat  tinggi untuk  memodelkan  kejadian  dan  respons  bisnis  (dibahas  dalam  Bab  7),  tetapi peristiwa  yang  terjadi  pada  formulir  Web  atau  tampilan  lain  biasanya  terbatas  pada tindakan  pengguna.  Peristiwa  ini  mungkin  mengklik  tombol,  mengubah  nilai, memfokuskan  bidang  (memindahkan  kursor  di  dalam  bidang  atau  ke  tombol  radio, kotak centang, atau kontrol lainnya), mengaburkan bidang (pengguna memindahkan kursor  keluar  dari  bidang)  ,  memuat  halaman  web,  mendeteksi  penekanan  tombol, dan  banyak  acara  lainnya.  Tanggapan  tersebut  mencantumkan  bagaimana  halaman web  akan  bereaksi  ketika  peristiwa  itu  terjadi.  Acara  adalah  untuk  objek  tertentu, seperti tombol, bidang teks, seluruh halaman web, dan sebagainya.
| Ignatius Oki Dewa Brata 1845
Gambar diatas adalah situs web yang digunakan untuk memperkirakan biaya tinggal di Azure Islé Resort. Pengguna dapat memasukkan jumlah orang, mengubah tanggal awal  dan  akhir,  dan  memasukkan  jumlah  orang  untuk  berbagai  kegiatan  ekstra, seperti scuba diving atau golf.
Perhatikan bahwa mungkin ada sejumlah peristiwa untuk setiap kontrol bentuk Web. Karena pengguna dapat  melakukan sejumlah tindakan dalam urutan apa pun, bagan kejadian-respons  berguna  untuk  menunjukkan  apa  yang  seharusnya  terjadi. Misalnya,  pengguna  dapat  mengklik  tombol  Hitung  dulu,  mengubah  tanggal  awal dan  akhir,  atau  mengubah  jumlah  orang.  Grafik  event-response  juga  berguna  untuk membangun  formulir  Web  yang  membutuhkan  tindakan  minimal  dari  pengguna. Contoh  dari  ini adalah ketika pengguna mengubah bulan atau hari  awal; bulan atau hari  akhir  kemudian  diubah  untuk  mencocokkan  bulan  atau  hari  awal.  Tahun berubah ketika bulan lebih awal dari bulan saat ini, karena orang tidak bisa tinggal di resor sebelum hari ini di tahun yang sama.
Terkadang  bagan  kejadian-respons  dapat  digunakan  untuk  mengeksplorasi peningkatan  pada  halaman  web.  Anggaplah  bahwa  Azure  Islé  Resort  menentukan bahwa  sebagian  besar  pelanggannya  tinggal  selama  7  hari.  Ketika  bulan  atau  hari awal  berubah,  tanggal  akhir  dapat  ditetapkan  untuk  7  hari  di  masa  depan  sebagai default.  Mungkin  juga  ide  yang  bagus  untuk  memiliki  tombol  radio  yang memungkinkan  pelanggan  memilih  masa  tinggal 4,  7,  atau  14  hari  dan  menghitung tanggal  akhir.  Perbaikan  lain  untuk  halaman  web  mungkin  mendeteksi  ketika sejumlah  karakter  telah  dimasukkan, misalnya  tiga  digit  yang  terdiri  dari  kode  area telepon A.S., dan kemudian memindahkan kursor ke bidang berikutnya.

## 2460-030X
Acara  tidak  terbatas  untuk  bekerja  dalam  satu  halaman  web.  Mereka  juga  dapat digunakan  untuk  navigasi  trol  antar  halaman  web.  Ini  dapat  terjadi  saat  mengubah pilihan  dalam  daftar  drop-down  atau  mengklik  tombol  radio.  Acara  juga  dapat digunakan untuk mengubah isi daftar drop-down. Misalnya, pada halaman pencarian pekerjaan,  dengan memilih  satu  kategori  pekerjaan,  posisi  rinci  untuk  pekerjaan  itu muncul dalam daftar drop-down kedua.
• Halaman Web Dinamis
Halaman web dinamis mengubah diri mereka sebagai  hasil dari tindakan pengguna. Mereka  sering  menggunakan  JavaScript  untuk  memodifikasi  beberapa  bagian  dari halaman  web  atau  gaya.  Mengubah  gambar  ketika  mouse  bergerak  di  atasnya  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  mengembang  ketika  pengguna mengklik  tanda  plus  kecil  di  sebelah  kiri  menu  atau  ketika  mouse  bergerak  di  atas menu adalah contoh lain dari halaman web dinamis.
Kekuatan halaman web dinamis telah sangat berkembang di browser Web baru-baru ini.  Dengan  menggunakan  JavaScript,  formulir  Web  dapat  berubah  atau  berubah sendiri  untuk  menambahkan  bidang  baru  atau  menghapus  bidang  lama,  atau mengubah atribut lapangan, seperti panjang bidang atau tombol radio  yang berubah menjadi kotak centang. Ini membuat halaman web lebih responsif terhadap tindakan pengguna  dan  sering  akan  menghilangkan  kebutuhan  untuk  memuat  halaman  web baru berdasarkan pilihan pengguna.
Seorang analis harus berpikir tentang informasi yang masuk akal bagi pemirsa situs web.  Misalnya,  menempatkan  daftar  pilihan  negara  pada  halaman  web  sebelum elemen  alamat  lain  akan  memungkinkan  pengguna  untuk  mengubah  daftar  negara dan  kemudian  mengubah  keterangan  untuk  mencerminkan  negara  tersebut.  Jika orang  tersebut  memilih  Amerika  Serikat  dari  daftar  drop-down,  keterangan  akan mengatakan  Negara  dan  Kode  Pos.  Jika  negara  itu  Kanada,  keterangan  akan mengatakan  Provinsi  dan  Kode  Pos.  Jika  negara  itu  adalah  Jepang,  keterangannya akan mengatakan Prefektur dan Kode Pos.
• Halaman Web Tiga Dimensi
Halaman  web  dinamis  dapat  digunakan  untuk  menampilkan  informasi  sementara, seperti blok informasi bantuan, kalender dengan tanggal yang dapat diklik digunakan untuk  membantu  bidang  entri  tanggal,  kode  bandara,  dan  informasi  lainnya. Informasi  ini  dapat  disimpan  dengan  menggunakan  serangkaian  lapisan  yang ditumpuk  (menggunakan  properti  z-indeks  gaya  cascading)  dalam  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  di  bidang  tanggal,  lapisan  tersebut akan  dipindahkan  ke  atas  dan  terlihat  atau  dihasilkan  oleh  kode  JavaScript  dan muncul. Posisi  lapisan ditambang oleh perancang atau analis, seperti kalender yang muncul di sisi kanan bidang tanggal. Ketika tanggal dipilih, tautan dekat diklik, atau
pengguna  mengklik  di  luar  kalender,  lapisan  kemudian  bergerak  di  bawah permukaan  halaman  web  atau  dihapus.  Seorang  analis  harus  menentukan  kapan masuk  akal  untuk  menyertakan  lapisan,  sering  memeriksa  setiap  bidang  pada halaman web untuk  menentukan apakah informasi  tambahan akan membantu  untuk memastikan informasi yang akurat dan komunikasi yang baik dengan pengguna.
Analis harus menentukan yang berikut:
- Bagaimana  layer  dibangun?  Apakah  ini  dibuat  menggunakan  kode  JavaScript, seperti  kalender,  atau  informasi  tambahan  yang  diperlukan  untuk  membangun lapisan?  Jika  informasi  tambahan  diperlukan,  di  manakah  data  berada  dan bagaimana  seharusnya  informasi  itu  diperoleh?  Idealnya,  informasi  diperoleh dari hanya satu tabel database di server menggunakan teknik Ajax.
- Peristiwa  apa  yang  menyebabkan  lapisan  dibuat?  Ini  termasuk  pengguna mengklik  atau  tabbing  ke  lapangan,  mengklik  tautan,  atau  menghitung  jumlah penekanan  tombol  yang  dimasukkan  ke  dalam  bidang.  Contohnya  adalah jaringan  hotel  dengan  banyak  lokasi.  Untuk  memasukkan  semua  lokasi  dalam daftar  drop-down  akan  membuat  daftar  terlalu  panjang.  Saat  pengguna memasukkan  tiga  karakter,  sebuah  permukaan  blok  mencantumkan  hotel  yang dimulai  dengan  tiga  huruf  tersebut,  termasuk  negara,  kota,  negara  bagian  atau provinsi,  dan  informasi  lainnya.  Jika  acara  hanya  mendeteksi  dua  huruf,  daftar mungkin terlalu besar untuk blok tampilan.
- Peristiwa apa yang menghapus lapisan, seperti tombol tutup, mengeklik tanggal, mengeklik di luar wilayah, atau memilih hotel dari daftar?
- Di  mana  sebaiknya  blok  permukaan  itu  ditempatkan?  Biasanya  di  sebelah bidang yang membuat blok, di koordinat x dan y.
- Seberapa besar seharusnya blok itu, diukur dalam piksel? Jika informasi  terlalu besar  untuk  blok,  seperti  daftar  hotel,  analis  harus  memutuskan  bagaimana menangani informasi tambahan. Pilihan termasuk menambahkan scroll bar atau memposisikan tautan di bagian bawah ke halaman informasi berikutnya.
- Apa  yang  harus  atribut  format  wilayah,  seperti  warna  dan  batas,  menjadi?  Jika ada serangkaian tautan, tinjau penampilan mereka dengan pengguna. Tanyakan kepada pengguna apakah mereka ingin warnanya berubah saat mouse berpindah ke setiap baris.
- Apa yang harus terjadi ketika opsi dipilih? Dalam hal kalender reservasi, ketika tanggal  diklik,  tanggal  ditempatkan  pada  tanggal  awal.  Jika  hotel  dipilih,
informasi kota, negara bagian atau provinsi, dan negara, bersama dengan tautan ke hotel, harus mengisi kolom formulir Web.
Menggunakan  lapisan  adalah  cara  yang  efektif  untuk  membuat  situs  web  karena tidak  memerlukan  laman  sembulan  (yang  mungkin  diblokir  oleh  perangkat  lunak keamanan  Internet).  Selain  itu,  halaman  web  baru  tidak  harus  memuat,  dan,  karena informasi  yang  terkandung  dalam  lapisan,  itu  tidak  mengambil  ruang  di  halaman web utama.
Sebagai  contoh  formulir  Web  yang  digunakan  oleh  perusahaan  asuransi  untuk mengubah informasi klien; untuk menambahkan lokasi baru untuk klien, seperti toko

## 2460-030X
atau  restoran  baru  untuk  klien  yang  sudah  ada;  atau  menghapus  toko  untuk  klien. Jika kotak centang Korporasi dicentang, Nama Belakang, Nama Depan, dan Tengah diubah  ke  bidang  Nama  perusahaan,  dengan  teks  teks  juga  berubah.  Jika  tombol Tambahkan  Properti  Baru  diklik,  seperangkat  bidang  baru  untuk  properti  ketiga ditambahkan.  Perawatan  harus  diambil  untuk  menghasilkan  nama  unik  yang  akan dikenali  server  untuk  bidang  tambahan.  Ketika  formulir  dikirimkan,  server memperbarui tabel database untuk bidang tambahan. Analis harus memutuskan kapan penggunaan halaman web dinamis sesuai. Jika data berubah ketika bagian lain dari halaman web berubah (seperti mengklik tombol radio atau  memilih  item  dari  daftar  drop-down),  mungkin  kebijakan  yang  baik  untuk mendesain  halaman web sebagai  bentuk dinamis. Namun, jika beberapa bagian dari formulir Web tidak aman dan bagian lain memerlukan enkripsi, mungkin sebaiknya tidak menggunakan bentuk dinamis.
Contoh  yang  baik  dari  bentuk  yang  memodifikasi  dirinya  dapat  ditemukan  di Expedia.com (www.expedia.com). Mengklik tombol radio untuk penerbangan, hotel, mobil,  atau  pelayaran  menyebabkan  formulir  berubah  untuk  mengumpulkan  data yang sesuai untuk memesan penerbangan, hotel, dan sebagainya. Halaman  web  dinamis  memiliki  keuntungan  memodifikasi  sendiri  dengan  cepat, dengan  lebih  sedikit  inter-ruptions  untuk  mengirim  dan  menerima  data  dari  server. Namun,  ada  beberapa  kerugian  saat  membuat  halaman  web  dinamis.  Salah  satunya adalah bahwa mereka tidak akan berfungsi jika JavaScript dimatikan. Seorang analis harus memutuskan apa yang harus dilakukan dalam situasi ini. Jika  seseorang  harus  menggunakan  situs  web  (seperti  dalam  lingkungan  intranet perusahaan,  di  situs  yang  digunakan  untuk  mendapatkan  pinjaman  mahasiswa,  atau dalam  kasus  pemrosesan  transaksi  pemerintah  atau  lainnya),  halaman  web  dapat menyatakan  dengan  jelas  bahwa  itu  tidak  akan  berfungsi  jika  JavaScript  dimatikan dan kemudian mengarahkan pengguna tentang cara menyalakannya. Sebagian besar situs  web  komersial  tidak  memerlukan  JavaScript  untuk  dihidupkan  dan  memiliki situs web alternatif untuk pelanggan.
Kerugian  kedua  ketika  menggunakan  halaman  web  dinamis  adalah  bahwa mereka mungkin tidak sesuai dengan Amerika dengan Disabilities Act. (Untuk lebih lanjut tentang aksesibilitas Web untuk semua pengguna, silakan lihat Bab 14 tentang mendesain interaksi manusia-komputer.)
• Ajax (Asynchronous JavaScript and XML)
Ajax  adalah  teknik  yang  berfungsi  di  browser  Web  terbaru.  Ini  melibatkan penggunaan JavaScript dan Extensible Markup Language (XML). Secara tradisional, setiap  kali  halaman  web  membutuhkan  data  dari  tabel  database  yang  berbeda, permintaan  dikirim  ke  server,  dan  halaman  baru  dimuat.  Ini  efektif  tetapi  lambat karena  seluruh  halaman  harus  dimuat  hanya  untuk  menyediakan  data  tambahan untuk daftar drop-down atau beberapa bentuk kontrol Web lainnya berdasarkan yang dipilih sebelumnya.
Ajax  memungkinkan  pengembang  Web  untuk  membangun  halaman  web  yang berfungsi  lebih  seperti  program  desktop  tradisional.  Karena  data  baru  diperlukan, browser  mengirim  permintaan  ke  server,  dan  server  mengirim  sejumlah  kecil  data
kembali  ke browser, yang memperbarui halaman saat  ini. Ini berarti bahwa pemirsa tidak mengalami gangguan pekerjaan dan halaman web tidak dimuat ulang. Halaman ini diperbarui secara dinamis dengan data baru.
Data dapat berupa file teks kecil atau dokumen XML yang berisi banyak pelanggan atau data pengulangan lainnya. Jika data adalah file XML, setiap elemen pelanggan disebut node, dan setiap node diberi nomor (dimulai dengan nol) dari awal dokumen XML. Hal  ini memungkinkan halaman web untuk  pergi  ke pelanggan pertama atau terakhir  atau  untuk  melewati  semua  pelanggan  satu  per  satu  dengan  mengklik tombol.
Katakanlah analis sistem sedang merancang situs web tradisional, tanpa Ajax, untuk membuat  reservasi  untuk  feri  Eropa.  Situs  web  yang  dihasilkan  mungkin  berisi beberapa  halaman.  Halaman  pertama  akan  menanyakan  kepada  pelanggan  tentang asal  dan  tujuan  perjalanan,  tanggal  perjalanan  yang  direncanakan,  dan  jumlah penumpang.  Karena  harga  ditentukan  oleh  jumlah  dan  usia  penumpang,  halaman web  kedua  akan  menampilkan  menanyakan  usia  penumpang.  Sepertiga  akan menanyakan  jenis  kendaraan  yang  diinginkan  untuk  transportasi  darat,  dan seterusnya.
Informasi  yang  sama  dapat  diperoleh  dengan  menggunakan  teknik  Ajax.  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 tersedia di feri. Setelah pelanggan mengubah jumlah penumpang, formulir akan berubah  secara  dinamis  untuk  menambahkan  tiga  daftar  drop-down  untuk  setiap penumpang,  bersama  dengan  petunjuk  di  samping  —  tanpa  memuat  ulang  seluruh halaman.  Ketika  jenis  kendaraan  berubah,  dalam  contoh  ini  ke  Mobil,  jenis kendaraan yang dipilih dikirim ke server. Keterangan pada formulir mengubah teks dari kendaraan ke Car Make. Server mengirim kemungkinan mobil, dan daftar drop- down  Buat  Mobil  diisi  dengan  data.  Ketika  mobil  dibuat  dipilih,  nilai  yang  dipilih dikirim ke server dan daftar drop-down Model Mobil diisi, dan seterusnya. Halaman web yang digunakan dalam contoh ini merespon jauh lebih cepat daripada alternatif,  yang  memiliki  beberapa  halaman  yang  berbeda  ditampilkan,  dan  lebih mudah  bagi  pengguna  untuk  bekerja  dengan.  Masih  ada  kebutuhan  untuk  memiliki halaman web konfirmasi  (meskipun  halaman tersebut  dapat  berubah secara dinamis untuk  menghapus kolom formulir dan menggantikannya dengan teks), dan halaman web lain untuk  nama, alamat, dan informasi  kartu kredit. Analis harus memutuskan bagaimana membagi transaksi menjadi serangkaian halaman, beberapa menggunakan  Ajax  dan  beberapa  tidak.  Jika  sejumlah  kecil  data  perlu  diperoleh untuk melanjutkan transaksinya, dan data secara logis cocok pada satu formulir Web atau  halaman,  kemudian  menggunakan  Ajax  mungkin  merupakan  pendekatan terbaik.  Terkadang  lebih  baik  menggunakan  beberapa  halaman,  seperti  ketika pengguna  membuat  reservasi  maskapai  penerbangan.  Satu  formulir  Web  dapat memperoleh semua informasi penerbangan, dan halaman lain dapat digunakan untuk menampilkan penerbangan. Halaman ketiga mungkin digunakan untuk mendapatkan informasi  penumpang,  dan  halaman  keempat  mungkin  menggunakan  Ajax  untuk

## 2460-030X
memilih lokasi tempat duduk, makanan, dan kebutuhan individu lainnya untuk setiap penumpang.
Ajax  memiliki  keuntungan  membuat  Web  bekerja  lebih  cepat  dan  memberikan pengalaman menonton yang lebih lancar bagi pengguna. Kerugiannya adalah bahwa JavaScript  harus  diaktifkan  dan  halaman  web  dapat  melanggar  Amerika  dengan Disabilities  Act.  Keamanan  harus  dipertimbangkan,  jika  diperlukan.  Ada  banyak contoh  situs  web  Ajax.  Beberapa  yang  penting  adalah  Google  Earth (earth.google.com)  dan  Google  Suggest,  yang  menanggapi  penekanan  tombol pemirsa dengan menyediakan daftar drop-down kemungkinan istilah pencarian. Ajax Write  (www.ajaxlaunch.com/ajaxwrite)  adalah  pengolah  kata  berbasis  Web.  Ada juga spreadsheet Ajax dan alat sketsa.
• Menggunakan Warna dalam Desain Tampilan
Menggunakan  warna  adalah  cara  yang  menarik  dan  terbukti  untuk  memfasilitasi tugas yang membutuhkan input komputer. Penggunaan warna yang tepat dalam layar tampilan  memungkinkan  Anda  untuk  membedakan  latar  depan  dan  latar  belakang, menyorot  bidang  penting  pada  formulir,  kesalahan  fitur,  menyorot  masukan  kode khusus, dan menarik perhatian ke banyak atribut khusus lainnya. Warna  yang  sangat  kontras  harus  digunakan  untuk  tampilan  latar  depan  dan  latar belakang  sehingga  pengguna  dapat  memahami  apa  yang  disajikan  dengan  cepat. Warna  latar  belakang  akan  mempengaruhi  persepsi  warna  latar  depan.  Misalnya, hijau  tua  mungkin  terlihat  seperti  warna  yang  berbeda  jika  diambil  dari  latar belakang putih dan ditempatkan pada yang kuning.
Lima  kombinasi  huruf  depan  yang  paling  mudah  dibaca  di  latar  belakang  adalah (dimulai dengan kombinasi yang paling mudah dibaca):
1. Hitam dengan warna kuning
2. Hijau dengan warna putih
3. Biru dengan warna putih
4. Putih dengan warna biru
5. Kuning dengan warna hitam
Yang  paling  mudah  dibaca  berwarna  merah  pada  hijau  dan  biru  di  merah.  Seperti yang  dapat  dikumpulkan  dari  kombinasi  latar  depan  dan  latar  belakang  ini,  warna- warna  cerah  harus  digunakan  untuk  latar  depan,  dengan  warna  yang  kurang  terang untuk latar belakang. Warna yang sangat kontras harus ditetapkan terlebih dahulu ke bidang yang harus dibedakan; maka warna lain dapat ditetapkan. Gunakan  warna  untuk  menyorot  bidang  penting  pada  display.  Bidang  yang  penting dapat  diwarnai  berbeda  dari  yang  lain.  Mempertimbangkan  norma-norma  budaya. Merah  biasanya  berarti  bahaya,  dan  "merah"  juga  berarti  perusahaan  kehilangan uang. Hijau berarti "pergi" dan merupakan warna yang aman di negara-negara Barat. Ketika  mengamati  pedoman  aksesibilitas  Web,  Anda  juga  akan  ingin mempertimbangkan  bahwa  8  hingga  10  persen  populasi  pria  memiliki  buta  warna, tetapi  kurang  dari  1  persen  wanita  menderita  karenanya.  Gunakan  indikator  lain selain warna untuk mendukung pengguna dalam menyelesaikan tugas-tugas mereka.
Seperti  halnya  peningkatan  lainnya,  desainer  perlu  mempertanyakan  nilai menggunakan warna. Penggunaan warna bisa berlebihan; heuristik yang  bermanfaat tidak  lebih  dari  empat  warna  untuk  pengguna  baru  dan  hanya  hingga  tujuh  untuk yang  berpengalaman.  Warna  yang  tidak  relevan  mengalihkan  perhatian  pengguna dan  mengurangi  kinerja  mereka.  Dalam  banyak  contoh,  warna  telah  ditunjukkan untuk  memfasilitasi  penggunaan  dengan  cara  yang  sangat  spesifik.  Warna  harus dianggap  sebagai  cara  penting  untuk  membedakan  latar  depan  dan  latar  belakang, menyorot  bidang  dan  data  penting,  menunjukkan  kesalahan,  dan  memungkinkan pengkodean input khusus.
• Desain Situs Web
Harus  mencatat  beberapa  petunjuk  tentang  mendesain  internet  yang  bagus  atau formulir pengisian intranet sekarang setelah Anda mempelajari beberapa aspek dasar dari  bentuk  input  dan  desain  tampilan.  Gambar  dibawah    menunjukkan  halaman urutan formulir pengisian yang menunjukkan banyak elemen desain yang baik untuk Web.
Pedoman termasuk yang berikut:
- Berikan instruksi yang jelas karena pengguna web mungkin tidak akrab dengan istilah teknis.
- Tunjukkan urutan entri logis untuk mengisi formulir, terutama karena pengguna mungkin harus menggulir ke bawah ke wilayah halaman yang tidak terlihat pada awalnya.

## 2460-030X
- Gunakan  berbagai  kotak  teks,  tombol  tekan,  menu  drop-down,  kotak  centang, dan  tombol  radio  untuk  melayani  fungsi-fungsi  tertentu  dan  untuk  membuat minat dalam bentuk.
- Berikan  kotak  teks  bergulir  jika  Anda  tidak  yakin  tentang  seberapa  banyak ruang  yang  diperlukan  pengguna  untuk  menanggapi  pertanyaan,  atau  tentang bahasa,  struktur,  atau  bentuk  apa  yang  akan  digunakan  pengguna  untuk memasukkan data.
- Siapkan dua tombol dasar pada setiap formulir pengisian Web: Kirim dan Hapus Formulir.
- Jika  formulirnya  panjang  dan  pengguna  harus  menggulir  secara  berlebihan, bagilah formulir menjadi beberapa formulir yang lebih sederhana pada halaman terpisah.
- Buat layar umpan balik yang menolak pengiriman formulir kecuali kolom wajib diisi dengan benar. Layar formulir yang dikembalikan dapat memberikan umpan balik  terperinci  kepada  pengguna  dalam  warna  yang  berbeda.  Merah  tepat  di sini. Misalnya, pengguna mungkin diminta untuk mengisi suatu negara di bidang negara,  atau  menunjukkan  nomor  kartu  kredit  jika  jenis  pembayaran  tersebut telah dicentang.
- Seringkali bidang yang diminta dilambangkan pada layar masukan awal dengan tanda bintang merah.
Aplikasi  e-niaga  melibatkan  lebih  dari  sekadar  desain  situs  web  yang  bagus. Pelanggan harus merasa yakin bahwa mereka membeli kuantitas yang benar, bahwa mereka  mendapatkan  harga  yang  tepat,  dan  bahwa  total  biaya  pembelian  internet, termasuk  biaya  pengiriman,  adalah  apa  yang  mereka  harapkan.  Cara  paling  umum untuk  membangun  kepercayaan  diri  ini  adalah  dengan  menggunakan  metafora  dari keranjang  belanja  atau  tas  rongsokan.  Gambar  dibawah  menunjukkan  isi  keranjang belanja untuk pelanggan yang melakukan pembelian.
Fitur penting dari keranjang belanja adalah pelanggan dapat mengedit jumlah barang yang dipesan atau dapat menghapus item seluruhnya. Aplikasi  E-commerce  menempatkan  tuntutan  tambahan  pada  analis  yang  harus mendesain  situs  web  untuk  memenuhi  beberapa  tujuan  pengguna  dan  bisnis, termasuk  menetapkan  misi  dan  nilai-nilai  korporat  terkait  kerahasiaan,  menjaga privasi  pengguna,  dan  pengembalian  produk  yang  mudah  dan  cepat;  pemrosesan transaksi yang efisien; dan membangun hubungan pelanggan yang baik.

## 5. KESIMPULAN
Penelitian ini telah mencakup elemen desain input untuk formulir, tampilan, dan formulir pengisian  Web.  Masukan  yang  dirancang  dengan  baik  harus  memenuhi  tujuan keefektifan, akurasi, kemudahan penggunaan, kesederhanaan, konsistensi, dan daya tarik. Pengetahuan  tentang  banyak  elemen  desain  yang  berbeda  akan  memungkinkan  analis sistem untuk mencapai tujuan ini.
Empat  pedoman  untuk  formulir  masukan  yang  dirancang  dengan  baik  adalah  sebagai berikut: (1) Buat formulir mudah diisi, (2) Memastikan bahwa formulir memenuhi tujuan yang  mereka  rancang,  (3)  formulir  desain  untuk  memastikan  penyelesaian  yang  akurat, dan (4) menjaga formulir tetap menarik.
Desain  bentuk  yang  bermanfaat,  tampilan,  dan  formulir  pengisian  Web  tumpang  tindih dengan  banyak  cara  penting,  tetapi  ada  beberapa  perbedaan.  Menampilkan  mungkin menunjukkan  kursor  yang  terus-menerus  mengarahkan  pengguna.  Menampilkan  sering memberikan  bantuan  dengan  masukan,  sedangkan  dengan  pengecualian  instruksi  yang dicetak  sebelumnya,  mungkin  sulit  untuk  mendapatkan  bantuan  tambahan  dengan formulir. Dokumen berbasis web memiliki kemampuan tambahan, seperti hyperlink yang disematkan, fungsi bantuan yang peka terhadap konteks, dan formulir umpan balik, untuk mengoreksi masukan sebelum pengiriman akhir.
Empat pedoman untuk tampilan yang dirancang dengan baik  adalah sebagai  berikut: (1) Pertahankan  tampilan  sederhana,  (2)  pertahankan  penyajian  tampilan  konsisten,  (3) fasilitasi  pergerakan  pengguna  di  antara tampilan  layar  dan  halaman,  dan (4)  buat  yang menarik  dan  menyenangkan  tampilan.  Banyak  elemen  desain  yang  berbeda memungkinkan analis sistem untuk memenuhi panduan ini. Aliran  bentuk  kertas  yang  tepat,  layar  tampilan,  dan  formulir  pengisian  di  Web  adalah penting. Formulir harus mengelompokkan informasi secara logis ke dalam tujuh kategori, dan  tampilan  harus  dibagi  menjadi  tiga  bagian  utama.  Keterangan  pada  formulir  dan tampilan  dapat  bervariasi,  begitu  juga  jenis  huruf  dan  bobot  garis  yang  membagi subkategori  informasi.  Formulir  multi-bagian  adalah  cara  lain  untuk  memastikan  bahwa formulir  memenuhi  tujuan  yang  dimaksudkan.  Desainer  dapat  menggunakan  jendela, pop-up, kotak dialog, dan layar default untuk memastikan keefektifan desain. Grafik-grafik  kejadian-respons  membantu  analis  untuk  mendokumentasikan  apa  yang seharusnya terjadi ketika peristiwa terjadi. Halaman web dinamis memodifikasi halaman web  sebagai  tanggapan  atas  peristiwa.  Ini  dapat  dibangun  sebagai  halaman  web  tiga

## 2460-030X
dimensi.  Teknik  Ajax  meminta  dan  menerima  sejumlah  kecil  data  dari  server  dan menggunakan data untuk mengubah halaman web dengan cepat.

## DAFTAR  PUSTAKA
[1]. Ariel  Riedsa  Adiguna,  Mochamad  Chandra  Saputra,  ,Fajar  Pradana,  2018. Analisis  dan  Perancangan  Sistem  Informasi  Manajemen  Gudang  pada  PT  Mitra
Pinasthika  Mulia.  Jurnal  Pengembangan  Teknologi  Informasi  dan  Ilmu
Komputere-ISSN:  2548-964XVol.  2,  No.  2,  Februari  2018,  hlm.  612-621http://j- ptiik.ub.ac.id.
[2]. Kenneth E. Kendall, Julie E. Kendall-Systems Analysis and Design (9th Edition)- Pearson (2013).
[3]. Risa  Sekarningtyas,  2018,  Analisis  dan  Perancangan  Sistem  Informasi Pengelolaan Perjalanan Dinas ( Studi Kasus :  Kantor Pengawasan dan Pelayanan Bea  dan  Cukai  Tipe  Madya  Pabean  B  Sidoarjo),  Jurusan  Sistem Informasi,Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.
[4]. Sugiyono, P. D. 2012. Metode Penelitian Kuantitatif, Kualitatif, R&D. Bandung: Alfabeta.
[5]. Sutabri, T., 2016. Sistem Informasi Manajemen (edisi revisi), Yogyakarta: ANDI
[6]. Whitten, J. L. dan Bentley, L. D., 2007.  Systems Analysis and Design Methods. [e-book] New York: McGraw-Hill. Tersedia di: https://www.academia.edu/87878 30/Whitten_and_Bentley_2007_System_GV9Jm2u7rmsCe65wKzPTw5jtS38n2tV
EGiition?auto=download [diakses 13 Desember 2021]