System Analysis and Design Designing Effective Input
Oleh
Gita Rahayu (14105!054" #ut$i %tami &ulanda$i (1410510" D'ifa a)se a)se Da$mi (15105100!" (15105 100!" &idya O*taviani (141051010" +a,ia +e-$iani .uas (151051050" /hai$ani +a$in (1510510"
%R%SA2 A/%23A2SI +A/%3AS E/O2O.I %2IERSI3AS A2DAAS 3A6%2 AARA2 !0178!019 #ERA2:A2GA2 +OR.%IR A2G ;AI/
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: . Buatlah Formulir mudah untuk diisi. !. "astikan formulir memenuhi tujuan yang dirancangnya. #. "erancangan formulir untuk memastikan penyelesaian yang akurat. $. %aga agar bentuknya menarik. Masing-masing dari keempat pedoman tersebut dipertimbangkan secara terpisah pada bagian berikut:
.em-uat +)$muli$ .udah Diisi &ntuk mengurangi kesalahan, mempercepat penyelesaian, dan mempermudah masuknya data, penting agar formulir mudah diisi. Biaya formulirnya minimal dibandingkan dengan biaya 'aktu yang dikeluarkan karya'an untuk mengisi dan kemudian memasukkan data ke dalam sistem (nformasi. )eringkali 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 *eb yang disiapkan untuk transaksi informasi atau e-niaga. BE+& A&) Merancang bentuk dengan aliran yang tepat dapat meminimalkan 'aktu dan tenaga yang dikeluarkan oleh karya'an dalam bentuk penyelesaian. Formulir harus mengalir dari kiri ke kanan dan atas ke ba'ah. Aliran logis membutuhkan 'aktu ekstra dan membuat frustrasi. &%&/ BA0(A+ 1A( F2M&3( Metode kedua yang memudahkan orang mengisi formulir benar adalah pengelompokan logis informasi. ujuh bagian utama dari sebuah formulir adalah sebagai berikut: . %udul !. (dentifikasi dan akses. #. (nstruksi. $. ubuh. 4. anda tangan dan 5erifikasi. 6. otal. 7. omentar. (dealnya, bagian ini akan muncul di halaman yang dikelompokkan seperti pada 8oucher Beban arya'an Bakerloo Brothers pada 0ambar. "erhatikan bah'a
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. . 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. (nformasi 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. !. 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. ubuh itu bagian dari bentuk yang paling mungkin mengandung data 5ariabel eksplisit. #. Bagian ba'ah formulir terdiri dari tiga bagian: tanda tangan dan 5erifikasi, total, dan komentar. Membutuhkan jumlah akhir dan ringkasan komentar adalah cara logis untuk memberikan penutupan bagi orang yang mengisi formulir. :A#3IO2 9aption adalah teknik lain yang bisa mempermudah kerja mengisi formulir. eterangan memberitahu orang yang mengisi formulir yang harus dimasukkan ke dalam kotak kosong, spasi, atau kotak. Beberapa pilihan untuk captionin ditunjukkan pada 0ambar !.!.
1ua jenis caption, dua jenis caption checkoff, dan contoh judul kotak dan caption tabel ditampilkan. euntungan menempatkan caption di ba'ah garis adalah bah'a ada lebih banyak ruang pada garis itu sendiri untuk data. erugiannya adalah terkadang tidak jelas garis mana yang terkait dengan judul: baris di atas atau di ba'ah judul. %udul baris bisa berada di sebelah kiri yang kosong dan pada baris yang sama, atau bisa dicetak di ba'ah garis data yang akan dimasukkan. 9ara lain untuk keterangan adalah menyediakan kotak data bukan sebuah garis. eterangan dapat ditempatkan di dalam, di atas, atau di ba'ah kotak. otak pada formulir membantu orang memasukkan data ke tempat yang benar, dan mereka juga membuat pembacaan formulir lebih mudah bagi penerima formulir. %udul harus menggunakan huruf ukuran kecil sehingga tidak mendominasi area entri. anda centang 5ertikal kecil mungkin disertakan dalam kotak jika data ditujukan untuk masuk ke sistem komputer. %ika tidak ada cukup ruang untuk data, orang yang mengisi formulir memiliki kebebasan untuk menentukan bagaimana data harus disingkat. eks mungkin juga menyertakan catatan klarifikasi kecil untuk membantu pengguna memasukkan informasi
dengan benar, seperti anggal MM ; 11 ; <<<<= atau +ama 3ast, First, Middle (nitial=. Apapun gaya caption yang dipilih, penting untuk menggunakannya secara konsisten. Misalnya, membingungkan mengisi formulir yang memiliki teks di atas dan di ba'ah baris. anda baca berguna bila pilihan respons dibatasi. "erhatikan daftar metode perjalanan yang ditunjukkan untuk contoh check-off 5ertikal pada gambar sebelumnya. %ika biaya karya'an untuk perjalanan bisnis diganti hanya untuk metode perjalanan yang tercantum, sistem checkoff lebih bijaksana daripada garis kosong. Metode ini memiliki keuntungan tambahan untuk mengingatkan orang yang sedang mem5erifikasi data untuk mencari tulisan rintisan tiket penerbangan atau tanda terima lainnya. )ebuah horisontal check-off caption juga lebih unggul dari judul baris ketika informasi diperlukan konstan.eterangan tabel bekerja dengan baik di badan formulir yang rinciannya diperlukan. etika seorang karya'an mengisi formulir dengan benar di tabel, dia membuat tabel untuk orang berikutnya yang menerima formulir tersebut, sehingga membantu mengatur data secara koheren. ombinasi 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. arena berbagai caption melayani tujuan yang berbeda, umumnya perlu menggunakan beberapa gaya teks dalam setiap formulir. .emenuhi 3uuan yang Dituu*an
Formulir dibuat untuk melayani satu atau lebih tujuan dalam rekaman, pemrosesan, penyimpanan, dan pengambilan informasi untuk bisnis. erkadang diinginkan untuk memberikan informasi yang berbeda ke berbagai departemen atau pengguna namun masih berbagi beberapa informasi dasar. )ituasi ini adalah dimana bentuk-bentuk khusus berguna. .emasti*an penyelesaian yang a*u$at
ingkat kesalahan yang biasanya dikaitkan dengan pengumpulan data akan turun bila formulir dirancang untuk memastikan penyelesaian yang akurat. 1esain penting untuk memastikan bah'a orang melakukan hal yang benar dengan bentuk kapan pun mereka menggunakannya. .enaga ;entu* .ena$i*
Meski daya tarik formulir itu diatasi dengan yang terakhir, urutan penampilannya tidak dimaksudkan untuk mengurangi kepentingannya. )ebaliknya, 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: kon5ensi menentukan untuk meminta nama, alamat jalan, kota, negara bagian, dan kode pos
atau pos dan negara, jika perlu=. ata 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. %enis tulisan dan garis adalah elemen desain yang berguna untuk menangkap perhatian dan membuat orang merasa aman sehingga mereka mengisi formulir dengan benar. .eng)nt$)l +)$muli$ ;isnis
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. ugas dasar untuk mengendalikan formulir mencakup memastikan bah'a setiap formulir yang digunakan memenuhi tujuan spesifiknya untuk membantu pekerja menyelesaikan tugas mereka dan bah'a 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 DIS#A A2D &E;S +RO. DESIG2
Banyak dari apa yang telah kita katakan tentang desain bentuk yang baik adalah transfer untuk menampilkan desain dan desain situs *eb dan halaman *eb. )ekali lagi, pengguna harus tetap terdepan dalam pemikiran analis selama disain display. Ada perbedaan, bagaimanapun, dan analis sistem harus berusaha untuk me'ujudkan kualitas display yang unik daripada mengadopsi standar kon5ensi bentuk kertas. )atu perbedaan besar adalah kehadiran konstan kursor pada layar, yang mengarahkan pengguna ke posisi entri data saat ini. )aat data dimasukkan ke layar, kursor akan mengarahkan satu karakter ke depan, menunjukkan jalannya. "erbedaan utama lainnya antara bentuk elektronik, *eb, dan statis adalah bah'a perancang dapat menyertakan bantuan pengguna konteks-sensitif dalam bentuk pengisian elektronik. "raktik ini dapat mengurangi kebutuhan akan instruksi yang ditunjukkan untuk setiap baris, sehingga mengurangi kekacauan formulir dan mengurangi panggilan ke 1ukungan eknis. Menggunakan pendekatan berbasis *eb juga memungkinkan perancang untuk memanfaatkan hyperlink, sehingga memastikan bah'a formulir diisi dengan benar dengan memberi pengguna contoh hyperlink formulir yang dilengkapi dengan benar. "ada 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 tar ik.
erdapat empat pedoman yang harus dilakukan dalam desain mereka meliputi: . Menjaga agar tampilan tetap sederhana. !. "ertahankan tampilan presentasi secara konsisten. #. Memfasilitasi pergerakan pengguna di antara layar tampilan dan halaman. $. Buat tampilan yang menarik dan menyenangkan. "ada subbagian berikutnya, kami mengembangkan masing-masing pedoman ini, dan kami menyajikan banyak teknik desain untuk mengamati keempat pedoman ini. .enaga 3ampilan Sede$hana
"edoman pertama untuk desain tampilan yang bagus adalah menjaga agar tampilan tetap sederhana. 3ayar harus menunjukkan hanya tindakan yang diperlukan untuk tindakan terte ntu yang sedang dilakukan. &ntuk pengguna sesekali, 4> persen area tampilan harus berisi informasi bermanfaat. 36REE S:REE2 SE:3IO2S< ampilan output harus dibagi menjadi tiga bagian. Bagian atas layar menampilkan bagian ?heading?. %udul berisi judul perangkat lunak dan file terbuka, menu pull-do'n, dan ikon yang melakukan tugas terten tu.
Bagian tengahnya disebut ?bodi? dari layar. ubuh dapat digunakan untuk entri data dan diatur dari kiri ke kanan dan dari atas ke ba'ah, karena orang-orang dalam budaya Barat mengalihkan pandangan mereka ke halaman dengan cara ini. eterangan 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. "encantuman dasar-dasar seperti itu dapat membuat pengguna yang tidak berpengalaman merasa jauh lebih aman tentang kemampuan mereka untuk menyelesaikan tugas mereka. 9ara lain untuk menjaga tampilan tetap sederhana adalah dengan menggunakan bantuan konteks-sensitif, tombol roll-o5er yang mengungkapkan lebih banyak informasi, dan jendela pop-up lainnya. "engguna dapat meminimalkan atau memaksimalkan ukuran jendela sesuai kebutuhan. 1engan cara ini, pengguna memulai dengan tampilan sederhana dan dirancang dengan baik sehingga mereka dapat menyesuaikan dan mengendalikannya melalui penggunaan banyak jendela. /yperlink pada isi berbasis *eb bentuk melayani tujuan yang sama.
.enaga 3ampilan /)nsisten
"anduan kedua untuk desain tampilan yang bagus adalah menjaga tampilan tetap konsisten. %ika pengguna bekerja dari bentuk kertas, display harus mengikuti apa yang ditampilkan di atas kertas. ampilan dapat tetap konsisten dengan menemukan informasi di area yang sama setiap kali tampilan baru diakses. )elain itu, informasi yang logik secara bersamaan harus dikelompokkan secara konsisten: +ama dan alamat sama-sama, bukan nama dan kode pos. Meskipun tampilan harus memiliki pergerakan alami dari satu 'ilayah ke daerah lain, informasi seharusnya tidak tumpang tindih dari satu kelompok ke kelompok lainnya. amu tidak ingin nama dan alamat di satu area dan kode pos yang lain. .emfasilitasi Ge$a*an
"edoman ketiga untuk desain tampilan yang bagus adalah memudahkan berpindah dari satu halaman ke halaman lainnya. Aturan ?tiga klik? mengatakan bah'a pengguna harus bisa sampai ke halaman yang mereka butuhkan dalam tiga klik mouse atau keyboard. Formulir berbasis 'eb memudahkan pergerakan dengan penggunaan hyperlink ke halaman rele5an lainnya. Metode lain yang umum untuk gerakan adalah membuat pengguna merasa seolaholah mereka secara fisik pindah ke halaman baru. (lusi gerakan fisik di antara layar ini dapat diperoleh dengan menggulir menggunakan panah, jendela pop-up yang sensitif konteks, atau dialog di layar. .e$ancang 3ampilan yang .ena$i* dan .enyenang*an
"anduan keempat untuk desain tampilan yang bagus adalah menciptakan tampilan yang atraktif bagi pengguna. %ika pengguna menemukan tampilan yang menarik, mereka cenderung lebih produktif, kurang membutuhkan penga'asan, dan buat lebih sedikit kesalahan Menampilkan harus menarik pengguna ke dalamnya dan menahan perhatian mereka. ujuan ini tercapai dengan penggunaan banyak area terbuka seputar data entry field sehingga tampilan mencapai penampilan yang tidak berantakan. Anda tidak akan pernah berkerumun@ 1emikian pula, Anda seharusnya tidak melakukannya keramaian sebuah layar Anda jauh lebih baik menggunakan banyak jendela atau hyperlink daripada membuat segalanya macet ke satu halaman 0unakan 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. 1engan kemunculannya dari 0&(s, adalah mungkin untuk membuat input display yang sangat atraktif. 1engan menggunakan kotak 'arna atau naungan dan membuat kotak tiga dimensi dan anak panah, Anda bisa membuat bentuk yang user friendly dan menyenangkan untuk digunakan. )aat merenungkan penggunaan berbagai gaya dan ukuran font, tanyakan pada diri Anda apakah mereka benar-benar membantu pengguna dalam memahami dan menyetujui tampilan. %ika mereka menarik perhatian yang tidak semestinya pada seni dari desain tampilan atau jika mereka berfungsi sebagai pengalih perhatian, biarkan mereka keluar. )adarilah bah'a tidak semua halaman *eb dilihat identik oleh bro'ser yang berbeda. &ji bentuk prototipe Anda
dengan berbagai kombinasi untuk melihat apakah pengguna menyatakan preferensi untuk kombinasi atau apakah mereka menyusahkan mayoritas pengguna &ntuk font *eb gunakan 8erdana atau Arial. .engguna*an I*)n pada Desain 3ampilan
(kon bergambar, representasi di layar yang melambangkan tindakan komputer yang mungkin dipilih pengguna menggunakan mouse, keyboard, lightpen, layar sentuh, atau joystick. (kon menyajikan fungsi yang mirip dengan kata-kata dan bisa menggantikannya dalam banyak menu, karena artinya lebih cepat dipahami daripada kata-kata. "erangkat mobile seperti i"hone dan i"od 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. "enggunaan ikon standar dapat dengan cepat memasuki reser5oir ini dengan makna umum. )eorang pengguna mungkin menunjuk ke lemari arsip, ?cabut? ikon folder file, ?ambil? sepotong ikon kertas, dan ?lempar? ke ikon keranjang sampah. 1engan menggunakan ikon standar, desainer dan pengguna menghemat 'aktu. (kon untuk aplikasi tertentu harus dibatasi hingga sekitar !> bentuk yang dikenali, sehingga kosa kata ikon tidak banyak dan sehingga skema pengkodean yang layak masih dapat direalisasikan. 0unakan ikon secara konsisten di seluruh aplikasi di mana mereka akan muncul bersama untuk memastikan kesinambungan dan kemampuan memahami. &mumnya, ikon bermanfaat bagi pengguna jika mereka bermakna. Desain Anta$mu*a #engguna G$afis
Antarmuka pengguna grafis 0&(, diucapkan ?goo?= adalah cara pengguna berinteraksi dengan sistem operasi *indo's dan Macintosh. (ni juga disebut sebagai antarmuka pointand-click. "engguna 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 dropdo'n, tombol slider dan spin, kotak dialog kontrol tab, dan peta gambar.
3E=3 ;O=ES. otak persegi me'akili kotak teks, seperti yang disebutkan sebelumnya, dan digunakan untuk menguraikan bidang entri data dan tampilan. "erhatian harus diberikan untuk memastikan bah'a kotak teks cukup besar untuk menampung semua karakter yang harus dimasukkan. )etiap kotak teks harus memiliki judul di sebelah kiri, mengidentifikasi apa yang akan dimasukkan atau apa yang ditampilkan di dalam kotak. 1i Microsoft Access, data karakter disejajarkan di sebelah kiri, dan data numerik sejajar di sebelah kanan. :6E:/ ;O=ES. "ada contoh kontrol 0&(, sebuah kotak centang digunakan untuk menunjukkan pelanggan baru. otak cek berisi C atau kosong, sesuai dengan apakah pengguna memilih pilihan@ mereka digunakan untuk pilihan yang tidak eksklusif di mana satu atau lebih pilihan dapat diperiksa. +otasi alternatif adalah dengan menggunakan tombol
persegi dengan tanda centang ✓= untuk menunjukkan bah'a pilihan telah dipilih. "erhatikan bah'a kotak centang teks, atau label, biasanya diletakkan di sebelah kanan kotak. %ika 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. %ika ada lebih dari > kotak cek, kelompokkan mereka bersama-sama dalam kotak berbatasan. O#3IO2S ;%33O2S< 3ingkaran, yang disebut tombol pilihan atau tombol radio, digunakan untuk memilih pilihan eksklusif. /anya satu dari beberapa pilihan yang bisa dipilih. 1engan cara ini Anda dapat menjelaskan kepada pengguna bah'a mereka harus memutuskan di antara opsi. "ilihan lagi tercantum di sebelah kanan tombol, biasanya dalam beberapa urutan. %ika ada pilihan yang umum dipilih, biasanya dipilih sebagai default saat halaman pertama kali ditampilkan. )eringkali ada persegi panjang, disebut kelompok pilihan, mengelilingi tombol radio. %ika ada lebih dari enam tombol pilihan, pertimbangkan untuk menggunakan kotak daftar atau kotak daftar drop-do'n. IS3 A2D DRO#>DO&2 IS3 ;O=ES< 1aftar kotak menampilkan beberapa pilihan yang bisa dipilih dengan mouse. otak daftar drop-do'n digunakan bila ada sedikit ruang yang tersedia pada halaman. )ebuah 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 dropdo'n dan kotak daftar akan hilang. %ika ada pilihan yang umum, biasanya ditampilkan dalam daftar drop-do'n secara default. 3A; :O23RO DIAOG ;O=ES< otak dialog kontrol tab adalah bagian lain dari antarmuka pengguna grafis dan cara lain untuk membuat pengguna terorganisir dan masuk ke materi sistem secara efisien. 1alam 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 2, 9ancel, and /elp.
SIDERS A2D S#I2 ;%33O2S< )lider 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 ; ba'ah= akan meningkatkan atau menurunkan nilai. I.AGES .A#S< Bidang peta gambar digunakan untuk memilih nilai dalam gambar. "engguna mengklik sebuah titik di dalam sebuah gambar dan koordinat D dan y yang sesuai dikirim ke program. "eta gambar digunakan saat membuat halaman *eb yang berisi peta dengan petunjuk untuk mengklik area tertentu untuk melihat peta 'ilayah yang terperinci. 3E=3 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. )alah satunya adalah dengan menghindari penggunaan kata 'rap, memaksa pengguna menekan tombol Enter untuk berpindah ke baris berikutnya@ teks akan bergulir ke kanan jika melebihi lebar area teks. "ilihan lainnya adalah membolehkan membungkus kata. .ESSAGE ;O=S< otak pesan digunakan untuk memperingatkan pengguna dan memberikan pesan umpan balik lainnya di kotak dialog, seringkali tumpang tindih pada tampilan. otak 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 :O..A2D ;%33O2S< ombol perintah melakukan tindakan saat pengguna memilihnya dengan mouse. /itung otal, Add 2rder, dan 2 adalah semua contohnya. eks dipusatkan
di dalam tombol, yang memiliki bentuk persegi panjang. %ika ada tindakan default, teks itu dikelilingi dengan garis putus-putus. ombol juga bisa diarsir untuk menunjukkan bah'a itu adalah default. "engguna menekan tombol Enter untuk memilih tombol default.
6alaman &e- Dinamis 3aman *eb 1inamis mengubah dirinya sebagai hasil tindakan pengguna. Mereka sering menggunakan %a5a)cript untuk memodifikasi beberapa bagian dari halaman *eb atau gaya. Mengubah gambar saat mouse bergerak mele'atinya atau memutar gambar acak pada inter5al 'aktu tertentu adalah contoh umum dari halaman *eb dinamis./alaman *eb dapat mendeteksi lebar jendela bro'ser 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 *eb dinamis. 1engan menggunakan %a5a)cript, formulir *eb 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. /al ini membuat halaman *eb lebih responsif terhadap tindakan pengguna dan seringkali akan menghilangkan kebutuhan untuk memuat halaman *eb baru berdasarkan pilihan pengguna. hree-1imensional *eb "ages 3aman *eb 1inamis 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. (nformasi ini dapat disimpan dengan menggunakan serangkaian lapisan bertumpuk menggunakan properti -indeD cascading style= pada desain halaman *eb, masing-masing di atas yang lain. /alaman *eb utama adalah bidang dasar, lapisan standar halaman *eb yang menampilkan atau memperoleh informasi, sementara yang lain di ba'ah halaman tidak terlihat. )aat bantuan diminta atau pengguna mengklik kolom tanggal, lapisan akan dipindahkan ke atas dan menjadi terlihat atau dihasilkan oleh kode %a5a)cript. "osisi 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 *eb untuk menentukan apakah informasi tambahan akan membantu memastikan informasi yang akurat dan komunikasi yang baik dengan pengguna. Analis harus menentukan hal berikut: . Bagaimana lapisan itu dibangun Apakah itu dibuat dengan menggunakan kode %a5a)cript, seperti kalender, atau informasi tambahan yang diperlukan untuk membangun lapisan %ika informasi tambahan diperlukan,dimana data berada dan bagaimana seharusnya diperoleh !. ejadian apa yang menyebabkan lapisan dibuat
#. "eristi'a apa yang menghapus lapisan, seperti tombol tutup, klik tanggal, klik di luar daerah, atau memilih hotel dari daftar $. 1i mana seharusnya blok permukaan ditempatkan Biasanya di sebelah lapangan yang dibuat blok, dalam koordinat D dan y. 4. )eberapa besar seharusnya blok tersebut, diukur dalam piksel 6. Apa yang harus 'ilayah format atribut, menjadi sebuah 'arna dan perbatasan %ika ada serangkaian link, re5ie' penampilan mereka dengan pengguna. anyakan kepada pengguna apakah mereka mau 'arna berubah saat mouse bergerak di atas setiap baris. 7. Apa yang harus terjadi bila pilihan dipilih Menggunakan lapisanlayer= adalah cara yang efektif untuk membangun situs *eb karena tidak memerlukan halaman pop-up yang mungkin diblokir oleh perangkat lunak keamanan (nternet=. )elain itu, halaman *eb baru tidak harus memuat, dan karena informasinya terkandung dalam lapisan, tidak ada ruang pada halaman *eb utama. 0ambar !.G adalah contoh formulir *eb 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.
%ika kotak cek "erusahaan dicentang, +ama Belakang, +ama 1epan, dan engah diubah menjadi bidang nama "erusahaan, dengan teks teks berubah juga. %ika tombol Add +e' "roperty diklik, satu set bidang baru untuk properti ditambahkan. "erhatian harus diberikan untuk menghasilkan nama unik yang akan dikenali ser5er untuk bidang tambahan. etika formulir diajukan, ser5er memperbarui tabel database untuk bidang tambahan. 9ontoh yang baik dari bentuk yang memodifikasi dirinya sendiri dapat ditemukan di EDpedia.com '''.eDpedia.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. 3aman *eb 1inamis memiliki keuntungan untuk memodifikasi diri dengan cepat, dengan sedikit gangguan untuk mengirim dan menerima data dari ser5er. +amun, ada beberapa kelemahan saat membuat halaman *eb dinamis. )alah satunya adalah mereka tidak akan bekerja jika %a5a)cript dimatikan. Analis harus memutuskan apa yang harus dilakukan dalam situasi ini. %ika orang tersebut harus menggunakan situs *eb seperti di lingkungan intranet perusahaan, di situs yang digunakan untuk mendapatkan pinjaman sis'a, atau dalam kasus pemrosesan pemerintah atau transaksi lainnya=, halaman *eb dapat menyatakan dengan jelas bah'a itu tidak akan berfungsi jika %a5a)cript dimatikan dan kemudian mengarahkan pengguna cara menyalakannya. elemahan kedua saat menggunakan halaman *eb dinamis adalah mereka mungkin tidak sesuai dengan American 1isabilities Act. AjaD Asynchronous %a5a)cript and CM3= AjaD adalah teknik yang bekerja di bro'ser *eb yang lebih baru. (ni melibatkan penggunaan %a5a)cript dan bahasa markup eDtensible CM3=. )ecara tradisional, setiap kali sebuah halaman *eb membutuhkan data dari tabel database yang berbeda, permintaan dikirim ke ser5er dan seluruh halaman baru dimuat. (ni adalah efektif tapi lambat, karena keseluruhan halaman harus dimuat hanya untuk memberikan data tambahan untuk sebuah daftar drop-do'n atau beberapa kontrol formulir *eb lainnya berdasarkan yang dipilih sebelumnya. AjaD memungkinkan pengembang *eb untuk membangun sebuah halaman 'eb yang bekerja lebih seperti program desktop tradisional. arena data baru dibutuhkan, bro'ser mengirimkan permintaan ke ser5er, dan ser5er mengirimkannya sejumlah kecil data kembali ke bro'ser, yang memperbarui halaman saat ini. (ni berarti bah'a "enampil tidak mengalami gangguan kerja dan halaman *eb tidak muat ulang. /alaman diperbarui secara dinamis dengan data baru. 1ata bisa berupa file teks kecil atau dokumen CM3 yang berisi banyak pelanggan atau data berulang lainnya %ika data adalah file CM3, setiap elemen pelanggan disebut node, dan masing-masing elemen node diberi nomor dimulai dengan nol= dari a'al dokumen CM3. /al ini memungkinkan /alaman 'eb untuk pergi ke pelanggan pertama atau terakhir atau untuk loop melalui semua pelanggan satu per satu dengan klik sebuah tombol. atakanlah seorang analis sistem sedang merancang sebuah situs *eb tradisional, tanpa AjaD, untuk membuat sebuah reser5asi untuk feri Eropa )itus *eb yang dihasilkan mungkin berisi beberapa halaman. "ertama halaman akan menanyakan kepada pelanggan tentang asal dan tujuan perjalanan, tanggal rencana perjalanan, dan jumlah penumpang. arena harga ditentukan oleh jumlah dan umur dari penumpang, halaman *eb kedua akan menampilkan permintaan untuk usia penumpang. etiga akan menanyakan jenis kendaraan yang diinginkan untuk transportasi darat, dan sebagainya.
(nformasi yang sama dapat diperoleh dengan menggunakan teknik AjaD, yang diilustrasikan pada 0ambar !.>.
ujuan a'al dan akhir yang sama, serta tanggal, dimasukkan di bagian atas formulir 'eb. /alaman *eb menggunakan tujuan dan tanggal untuk menentukan apakah ada ruang yang terrsedia. )etelah pelanggan mengubah jumlah penumpang, bentuknya secara dinamis perubahan untuk menambahkan tiga daftar drop-do'n untuk setiap penumpang, bersama dengan instruksi di sisi-tanpa memuat ulang keseluruhan halaman. Bila jenis kendaraan berubah, dalam contoh ini ke 9ar, maka tipe kendaraan yang dipilih dikirim ke ser5er. eterangan pada formulir akan mengubah teks dari kendaraan untuk membuat mobil )er5er mengirimkan kemungkinan mobil, dan daftar drop-do'n 9ar Make diisi dengan data. )aat mobil dibuat dipilih, nilai yang dipilih dikirim ke ser5er dan1aftar drop-do'n 9ar Model dihuni, dan seterusnya. AjaD memiliki keuntungan membuat karya *eb lebih cepat dan memberikan tampilan yang lebih halus bagi pengguna. elemahannya adalah %a5a)cript harus diaktifkan dan itu *eb halaman mungkin melanggar Amerika dengan 1isabilities Act. eamanan harus dipertimbangkan jika diperlukan. Ada banyak contoh situs 'eb AjaD. Beberapa yang menonjol termasuk 0oogle Earth earth.google.com=, dan 0oogle )uggest, yang merespons penekanan tombol pemirsa dengan menyediakan daftar drop-do'n dari istilah pencarian yang mungkin. &sing 9olor in 1isplay 1esign *arna adalah cara yang menarik dan terbukti untuk memudahkan pengguna mengerjakan tugas yang memerlukan input komputer. "enggunaan 'arna 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.
*arna yang sangat kontras harus digunakan untuk tampilan foreground dan background sehingga pengguna dapat menangkap apa yang disajikan dengan cepat. *arna background akan mempengaruhi persepsi 'arna foreground. Misalnya, 'arna hijau tua mungkin terlihat seperti 'arna yang berbeda jika diambil dari latar belakang putih dan ditempatkan pada yang kuning 3ima kombinasi huruf latar depan yang paling mudah dibaca di latar belakang adalah mulai dengan kombinasi yang paling mudah dibaca=: . /itam - kuning. !. /ijau-putih. #. Biru-putih. $. "utih-biru. 4. uning-hitam.
Int$anet dan Inte$net #age Design 1i Bab , dasar-dasar merancang situs *eb dibahas. Ada lebih banyak petunjuk tentang penandatanganan formulir isi (nternet atau intranet yang bagus yang harus diingat sekarang bah'a Anda telah mempelajari beberapa aspek dasar dari bentuk input dan desain tampilan. 0ambar !. menunjukkan halaman pesanan form isi yang menunjukkan banyak elemen desain yang baik untuk *eb. "edoman untuk elemen desain yang baik meliputi : . Berikan instruksi yang jelas, karena pengguna *eb mungkin tidak terbiasa dengan istilah teknis. !. Menunjukkan urutan entri logis untuk mengisi formulir, terutama karena pengguna mungkin harus menggulir ke ba'ah ke 'ilayah halaman yang tidak terlihat pada a'alnya. #. 0unakan berbagai kotak teks, tombol push, menu drop-do'n, kotak cek, dan tombol radio untuk melayani fungsi tertentu dan untuk membuat minat dalam formulir. $. Berikan kotak teks bergulir jika Anda tidak yakin tentang berapa banyak ruang yang dibutuhkan pengguna untuk menja'ab sebuah pertanyaan, atau tentang bahasa, struktur, atau bentuk yang akan digunakan pengguna untuk memasukkan data. 4. )iapkan dua tombol dasar pada setiap isi formulir *eb: )ubmit dan 9lear Form. 6. %ika 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 ja'aban yang 'ajib diisi dengan benar. 3ayar formulir yang ditampilkan kembali sebagai layar umpan balik diberi 'arna yang berbeda. *arna merah cocok sebagai 'arna umpan balik. Misalnya, pengguna mungkin diminta untuk mengisi negara di bidang negara, atau menunjukkan nomor kartu kredit jika jenis pembayaran tersebut telah dicentang.
)eringkali bidang 'ajib dilambangkan pada layer input a'al dengan tanda bintang merah.
0ambar !. 3ayar pesanan dari situs Merchants Bay '''.merchantsbay.com= adalah contoh bagus bagaimana merancang bentuk input yang jelas, mudah digunakan, dan fungsional.
Aplikasi e-commerce melibatkan lebih dari sekadar desain situs *eb yang bagus. "elanggan perlu merasa yakin bah'a mereka membeli jumlah yang benar, bah'a mereka mendapatkan harga yang tepat, dan bah'a total biaya pembelian (nternet, termasuk biaya pengiriman, adalah apa yang mereka harapkan. 9ara yang paling umum untuk membangun kepercayaan diri ini adalah dengan menggunakan gambar keranjang belanja atau tas belanja. 0ambar !.! 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 *eb untuk memenuhi beberapa tujuan pengguna dan bisnis, termasuk menetapkan misi dan nilai perusahaan terkait kerahasiaan, melestarikan pri5asi pengguna, dan pengembalian produk yang mudah dan cepat@ pengolahan transaksi yang efisien@ dan membangun hubungan pelanggan yang baik.
0ambar !. ! )itus *eb Merchants Bay '''.merchantsbay.com= adalah contoh bagus dari keranjang belanja.
