Dokumen tersebut memberikan pedoman untuk merancang input, form, tampilan, antarmuka pengguna grafis, dan halaman web. Beberapa pedomannya adalah menjaga input, form, dan tampilan tetap sederhana, konsisten, dan mudah digunakan serta memfasilitasi perpindahan pengguna. Dokumen tersebut juga membahas kontrol antarmuka pengguna grafis seperti kotak teks, kotak centang, dan tombol radio serta pedoman untuk merancang halaman input

1. APSI KELOMPOK 10
Part 4 Chapter 12

2. Anggota Kelompok 10:
1. Mochammad Ihza Rizky Karim
2. Edriand imens Raygrandi
3. Faza Musyaffa

3. Topik Utama
● Input design
● Form design
● Display design
● GUI screen design
● GUI controls
● Web design guidelines

4. Input Design Objectives
Kualitas input sistem menentukan kualitas output sistem.
Tujuan masukan yang dirancang dengan baik:
● Efektivitas.
● Ketepatan.
● Kemudahan penggunaan.
● Konsistensi.
● Kesederhanaan.
● Daya tarik.

5. Form Design
Pedoman untuk desain formulir yang baik:
● Buat formulir mudah diisi
● Pastikan bahwa formulir memenuhi tujuan yang dirancang
● Rancang formulir untuk memastikan penyelesaian yang akurat
● Jaga agar formulir tetap menarik.

6. Form Completion
Untuk membuat formulir mudah diisi, teknik berikut digunakan:
● Pertama, desain bentuk dengan alur yang tepat, dari kiri ke kanan dan atas ke bawah
● Kedua, kelompokkan informasi secara logis menggunakan tujuh bagian formulir
● Ketiga, berikan keterangan yang jelas kepada orang-orang
● Keterangan memberi tahu orang yang mengisi formulir apa yang harus diletakkan pada baris, spasi,
atau kotak kosong.

7. Seven Sections of a Form
Tujuh bagian formulir adalah:
● Heading
● Identifikasi dan akses
● instruksi
● Tubuh
● Tanda tangan dan verifikasi
● Total
● Komentar

8. Caption Types
Teks dapat berupa salah satu dari berikut ini:
● Teks baris, menempatkan teks pada baris yang sama atau di bawah baris
● Keterangan kotak, menyediakan kotak untuk data, bukan garis
● Vertikal check off, mengurutkan pilihan atau alternatif secara vertikal
● Horizontal check off, mengurutkan pilihan atau alternatif secara horizontal

9. Meeting the Intended Purpose
● Analis sistem dapat menggunakan berbagai jenis formulir khusus untuk tujuan yang berbeda
● Formulir khusus juga dapat berarti formulir yang disiapkan oleh alat tulis

10. Ensuring Accurate Completion
● Untuk mengurangi tingkat kesalahan yang terkait dengan pengumpulan data, formulir harus
dirancang untuk memastikan penyelesaian yang akurat
● Rancang formulir untuk membuat orang melakukan hal yang benar dengan formulir
● Untuk mendorong orang mengisi formulir, analis sistem harus menjaga agar formulir tetap
menarik

11. Attractive Forms
● Agar lebih menarik, formulir harus terlihat rapi, dan memperoleh informasi dalam urutan yang
diharapkan.
● Bentuk estetika atau penggunaan font dan bobot garis yang berbeda dalam bentuk yang sama
dapat membantu membuatnya lebih menarik.

12. Computer Form Design Software
Banyak perangkat lunak desain bentuk komputer mikro tersedia
Fitur perangkat lunak desain formulir elektronik:
● Kemampuan untuk merancang formulir kertas, elektronik, atau berbasis web
● Desain formulir menggunakan template
● Desain bentuk dengan memotong dan menempelkan bentuk dan objek yang sudah dikenal.

13. Computer Form Design Software
(Continued)
Fitur perangkat lunak desain formulir elektronik
● Memfasilitasi penyelesaian melalui penggunaan perangkat lunak
● Mengizinkan menu, toolbar, keyboard, dan makro yang disesuaikan
● Mendukung database populer
● Memungkinkan penyiaran formulir elektronik
● Mengizinkan perutean formulir secara berurutan

14. Computer Form Design Software
(Continued)
Fitur perangkat lunak desain formulir elektronik
● Membantu pelacakan formulir
● Mendorong pengiriman dan pemrosesan otomatis
● Menetapkan keamanan untuk formulir elektronik

15. Controlling Business Forms
Formulir pengendalian meliputi:
● Memastikan bahwa setiap formulir yang digunakan memenuhi tujuan spesifiknya
● Memastikan bahwa tujuan yang ditentukan merupakan bagian integral dari fungsi organisasi
● Mencegah duplikasi informasi yang dikumpulkan dan formulir yang mengumpulkannya
● Merancang formulir yang efektif.

16. Controlling Business Forms (Continued)
Bentuk pengendalian meliputi:
● Memutuskan memproduksi ulang formulir sebanyak mungkin dengan cara ekonomis
● Menetapkan pengendalian stok dan prosedur inventaris yang membuat formulir tersedia saat
dibutuhkan, dengan biaya serendah mungkin

17. Display Design Guidelines
Pedoman untuk desain tampilan yang baik:
● Pertama, jaga agar tampilan tetap sederhana
● Kedua, menjaga tampilan presentasi tetap konsisten
● Ketiga, memfasilitasi pergerakan pengguna di antara tampilan layar
● Terakhir, buat tampilan yang menarik

18. Three Screen Sections
Untuk menjaga agar layar tetap sederhana, layar dibagi menjadi tiga bagian:
● Heading
● Body
● Comments and Instructions

19. Display Design Concepts for Simplicity
● Menampilkan beberapa perintah dasar yang diperlukan menggunakan windows atau hyperlink
adalah cara lain untuk menjaga layar tetap sederhana.
● Untuk pengguna sesekali, hanya 50 persen layar yang harus berisi informasi yang berguna.
● Desain sederhana termasuk memaksimalkan atau meminimalkan ukuran jendela sesuai kebutuhan
● Gunakan bantuan peka konteks dan menu pop-up lainnya
● Konsistensi dicapai dengan menampilkan informasi di area yang sama atau dengan
mengelompokkan informasi secara logis

20. Facilitating Movement
Pedoman untuk memfasilitasi perpindahan dari satu halaman ke halaman lain:
● Mengklik--aturan tiga klik mengatakan bahwa pengguna harus dapat membuka layar yang mereka
butuhkan dalam tiga klik mouse atau keyboard
● Menggulir--menggunakan panah atau tombol PgDn
● Menggunakan jendela pop-up peka konteks
● Menggunakan dialog di layar

21. Designing an Attractive Screen
Untuk membuat layar menarik gunakan:
● Ketebalan garis pemisah yang berbeda antar subkategori
● Video terbalik dan kursor berkedip
● Kombinasi warna yang berbeda
● Jenis font yang berbeda

22. Using Icons in Screen Design
● Ikon digunakan di layar grafis untuk menjalankan program dan menjalankan perintah
● Graphical User Interface (GUI) digunakan bersama dengan mouse, keyboard, light pen, atau joystick
untuk membuat pilihan dan memasukkan data.

23. Graphical User Interface (GUI) Controls
Kontrol atau bidang GUI:
● Kotak teks
● Kotak centang
● Opsi atau tombol radio
● Daftar
● Kotak daftar drop-down
● Slider dan tombol putar
● Peta gambar
● Daerah teks
● Kotak pesan.

24. GUI Screen Example

25. Text Boxes
● Kotak teks harus cukup besar untuk menampung semua karakter bidang
● Keterangan harus di sebelah kiri kotak teks
● Data karakter harus dibiarkan rata di dalam kotak
● Data numerik rata kanan

26. Check Boxes
● Kotak centang digunakan untuk pilihan non eksklusif
● Teks kotak centang atau label ditempatkan di sebelah kanan kotak centang
● Jika ada lebih dari 10 kotak centang, kelompokkan dalam kotak berbatas.

27. Option Buttons and Drop-down List Boxes
● Option atau tombol radio digunakan untuk pilihan eksklusif
● Seringkali mereka ditempatkan dalam persegi panjang yang disebut grup opsi
● Daftar dan kotak daftar drop-down digunakan untuk memilih satu dari banyak pilihan

28. Sliders, Spin Buttons, and Image Maps
● Slider dan tombol putar digunakan untuk mengubah data yang memiliki rentang nilai yang
berkelanjutan
● Peta gambar digunakan untuk memilih nilai dalam gambar
● Koordinat x dan y dikirim ke program.

29. Slider and spin button example

30. Text Area
● Area teks digunakan untuk memasukkan teks dalam jumlah besar
● Area ini mungkin memiliki teks yang terbungkus saat teks mencapai akhir kotak.
Ada dua cara untuk menangani teks:
● Pengembalian keras digunakan untuk memaksa baris baru
● Gunakan bungkus kata di dalam area teks.

31. Message Boxes and Command Buttons
● Kotak pesan digunakan untuk menampilkan peringatan dan pesan lainnya di jendela persegi
panjang
● Tombol perintah melakukan suatu tindakan.

32. Tab Control Dialogue Boxes
Kotak dialog kontrol tab membantu mengatur fitur GUI (kontrol) untuk
pengguna
Setiap kotak dialog tab harus memiliki tiga tombol dasar:
● OK
● Cancel
● Help

33. Web Page Dialogue Boxes
● Jenis kotak dialog baru memiliki tampilan dan nuansa halaman Web
● Tombol disebut tempat dan ditautkan ke item yang ingin diakses pengguna.

34. Color
Lima kombinasi warna latar depan/latar belakang yang paling mudah dibaca untuk monitor tampilan
adalah:
● Hitam di atas kuning
● Hijau diatas putih
● Biru di atas putih
● Putih di atas biru
● Kuning diatas hitam.

35. Skins
Skin adalah lapisan grafis yang memungkinkan pelanggan mengubah tampilan situs Web tergantung pada
preferensi mereka untuk jenis gambar tertentu.

36. Internet and Intranet Design Guidelines
Panduan untuk membuat halaman input intranet dan Internet:
● Berikan instruksi yang jelas
● Gunakan urutan entri logis untuk mengisi formulir
● Gunakan berbagai kotak teks, tombol tekan, tombol radio, daftar drop-down, dan fitur GUI lainnya.

37. Guidelines for creating intranet and Internet
input pages (continued)
● Berikan kotak teks bergulir jika Anda tidak yakin berapa banyak teks yang akan dimasukkan
● Sertakan dua tombol dasar: Kirim dan Hapus
● Jika formulirnya panjang, bagilah menjadi beberapa bentuk yang lebih sederhana pada halaman
terpisah
● Buat layar umpan balik yang mencantumkan pesan kesalahan jika formulir belum diisi dengan
benar

38. Ecommerce Applications
● Aplikasi e-niaga melibatkan lebih dari sekadar desain situs Web yang bagus
● Pelanggan harus yakin dengan situs, termasuk privasi dan keamanan.

39. Terima Kasih