BOOK-Systems Analysis and Design in A Changin-215-250

Machine Translated by Google
7
Merancang Pengguna dan
Antarmuka Sistem
Garis besar bab

ÿ Antarmuka Pengguna dan Sistem
ÿ Memahami Antarmuka Pengguna
ÿ Konsep Desain Antarmuka Pengguna
ÿ Transisi dari Analisis ke Desain Antarmuka Pengguna
ÿ Desain Antarmuka Pengguna
ÿ Mengidentifikasi Antarmuka Sistem
ÿ Merancang Input Sistem
ÿ Merancang Keluaran Sistem
Tujuan pembelajaran
Setelah membaca bab ini, Anda seharusnya dapat:
ÿ Jelaskan perbedaan antara antarmuka pengguna dan antarmuka sistem
ÿ Jelaskan sejarah perkembangan bidang interaksi manusia-komputer (HCI)
ÿ Diskusikan bagaimana visibilitas dan keterjangkauan mempengaruhi kegunaan
ÿ Jelaskan pedoman antarmuka pengguna yang berlaku untuk semua tipe antarmuka pengguna dan
pedoman tambahan khusus untuk halaman Web dan aplikasi seluler
ÿ Buat storyboard untuk memperlihatkan urutan bentuk yang digunakan dalam dialog
ÿ Diskusikan contoh antarmuka sistem yang ditemukan dalam sistem informasi
ÿ Tentukan input dan output sistem berdasarkan kebutuhan aplikasi
program
ÿ Rancang laporan yang dicetak dan ditampilkan di layar sesuai dengan penerimanya
187
188 BAGIAN 3 ÿ Esensi Perancangan Sistem
PEMBUKAAN KASUS
Desain Antarmuka di Aviation Electronics

Bob Crain mengagumi antarmuka pengguna untuk sistem pendukung Sara memiliki sikap yang sangat berbeda; dia memulai dengan
manufaktur yang baru-baru ini dipasang di Aviation Electronics (AE). Bob bertanya tentang peristiwa yang mempengaruhi proses produksi dan
adalah manajer pabrik untuk fasilitas manufaktur AE di Midwest, yang tentang kasus di mana pengguna memerlukan dukungan dari sistem.
memproduksi perangkat penerbangan yang digunakan pada pesawat Meskipun dia memiliki tim analis yang mengerjakan rincian transaksi
komersial. Perangkat penerbangan ini memberikan fungsi panduan dan akuntansi sejak awal, dia selalu fokus pada bagaimana pengguna akan
kontrol bagi awak penerbangan, serta menyediakan fitur keselamatan dan berinteraksi dengan sistem. Bob dan Sara melakukan pertemuan untuk
keamanan terkini yang dibutuhkan pilot saat menerbangkan pesawat melibatkan pengguna dalam diskusi tentang bagaimana mereka dapat
komersial. menggunakan sistem, bahkan meminta pengguna untuk memerankan
Sistem pendukung manufaktur digunakan untuk semua aspek proses peran pengguna dan sistem dalam melakukan percakapan.
manufaktur, termasuk perencanaan produk, pembelian, inventaris suku
cadang, pengendalian kualitas, inventaris barang jadi, dan distribusi. Bob Pada pertemuan lain, Sara menyajikan sketsa layar dan meminta
terlibat secara luas dalam pengembangan sistem selama beberapa tahun, pengguna menggambarnya untuk menunjukkan informasi yang ingin
termasuk perencanaan awal dan pengembangan. Sistem tersebut mereka lihat dan opsi yang ingin mereka pilih. Sesi ini menghasilkan
mencerminkan hampir semua yang dia ketahui tentang manufaktur. Tim banyak ide. Misalnya, banyak pengguna yang tidak duduk di depan meja
sistem informasi yang mengembangkan sistem ini sangat bergantung pada sepanjang hari; mereka membutuhkan tampilan grafis yang lebih besar
keahlian Bob. Itu adalah bagian yang mudah bagi Bob. dan lebih banyak yang dapat mereka lihat dari seberang ruangan. Banyak
pengguna perlu merujuk ke beberapa tampilan, dan mereka harus dapat
membacanya secara bersamaan. Beberapa fungsi paling baik dilakukan
Yang paling membuat Bob senang adalah antarmuka pengguna dengan menggunakan simulasi grafis dari proses manufaktur.
terakhirnya. Dia bersikeras agar tim pengembangan mempertimbangkan
keseluruhan pengalaman pengguna sejak awal. Dia tidak menginginkan Pengguna membuat sketsa yang menunjukkan bagaimana proses
sekadar sistem pemrosesan transaksi cookie-cutter. Dia menginginkan manufaktur sebenarnya bekerja, dan tim menggunakan sketsa ini untuk
sistem yang bertindak sebagai mitra dalam proses manufaktur—sama mendefinisikan sebagian besar antarmuka. Sara dan timnya terus datang
seperti antarmuka sistem panduan dan kontrol AE yang bertindak sebagai kembali setiap bulan atau lebih dengan lebih banyak contoh untuk
mitra percontohan. ditunjukkan, meminta lebih banyak saran.
Manajer pertama yang ditugaskan pada proyek ini menempatkan Ketika sistem akhirnya selesai dibangun dan diinstal, sebagian besar
prioritas rendah pada desain antarmuka pengguna. Ketika Bob bertanya pengguna sudah mengetahui cara menggunakannya karena mereka
mengapa desain antarmuka pengguna tidak menjadi fokus utama pada sangat terlibat dalam desainnya. Bob tahu semua yang bisa dilakukan
iterasi awal, manajer menjawab, “Kami akan menambahkan antarmuka sistem itu, tapi dia punya kegunaannya sendiri. Dia duduk di mejanya dan
pengguna nanti, setelah kami mengerjakan kontrol akuntansi.” Ketika Bob mengklik tombol Tinjau Proses yang Sedang Berlangsung di layar, dan
bersikeras agar manajer proyek diganti, departemen sistem informasi sistem dukungan manufaktur memberinya pengarahan pagi.
mengirim Sara Robinson untuk memimpin proyek tersebut.
Ringkasan
Sistem informasi berinteraksi dengan manusia dan dengan sistem lain. Karena hanya sedikit
sistem yang beroperasi secara mandiri atau terisolasi, merancang antarmuka (input dan output)
antara sistem dan pengguna serta lingkungannya merupakan tugas pengembangan sistem yang
penting. Antarmuka yang dirancang dengan buruk dengan manusia dapat mengakibatkan sistem
beroperasi kurang optimal atau tidak memenuhi tujuannya. Misalnya, sistem sumber daya manusia
yang memiliki antarmuka pengguna yang dirancang dengan buruk dapat mengurangi efisiensi
organisasi dan menjadi sumber kesalahan entri data. Sistem yang berhubungan dengan pelanggan
dengan antarmuka pengguna yang dirancang dengan buruk mungkin memotivasi pelanggan
untuk membawa bisnis mereka ke tempat lain. Seperti halnya antarmuka yang berorientasi
pengguna, antarmuka yang dirancang dengan buruk terhadap sistem otomatis lainnya dapat
menjadi sumber kesalahan atau ketidakefisienan. Dengan demikian, desain antarmuka sistem
merupakan bagian penting dari proyek pengembangan sistem.
Input dan output sistem merupakan perhatian awal dari setiap proyek pengembangan sistem.
Rencana proyek mencantumkan masukan dan keluaran utama yang diidentifikasi analis ketika
menentukan ruang lingkup sistem. Selama fase analisis, analis akan mendiskusikan masukan
dan keluaran sejak awal dan sering kali bersama
BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 189
pemangku kepentingan sistem untuk mengidentifikasi pengguna dan aktor yang mempengaruhi
sistem dan bergantung pada informasi yang dihasilkannya. Model persyaratan yang dihasilkan selama
analisis juga menekankan masukan dan keluaran. Misalnya, deskripsi use case mendefinisikan input
dan output yang terjadi selama use case. Input dan output selanjutnya didefinisikan sebagai pesan
dan pengembalian dalam diagram urutan sistem (SSD).
Antarmuka Pengguna dan Sistem Langkah penting dalam
desain sistem adalah mengklasifikasikan input dan output untuk setiap kejadian sebagai antarmuka
antarmuka sistem input atau output yang memerlukan sistem atau antarmuka pengguna. Antarmuka sistem adalah input dan output yang memerlukan
intervensi manusia minimal intervensi manusia minimal. Mereka mungkin berupa input yang ditangkap secara otomatis oleh
perangkat input khusus seperti pemindai, pesan elektronik ke atau dari sistem lain, atau transaksi
yang ditangkap oleh sistem lain.
Banyak keluaran yang dianggap sebagai antarmuka sistem jika keluaran tersebut terutama
mengirimkan pesan atau informasi ke sistem lain (misalnya, pemberitahuan pengambilan ke
perusahaan pelayaran) atau jika keluaran tersebut menghasilkan laporan, pernyataan, atau dokumen
untuk agen atau aktor eksternal tanpa banyak campur tangan manusia (misalnya , laporan kartu kredit
akhir bulan yang dikirimkan melalui email ke pemegang kartu).
antarmuka pengguna antarmuka sistem yang secara Antarmuka pengguna merupakan masukan dan keluaran yang lebih langsung melibatkan
langsung melibatkan pengguna sistem pengguna sistem. Antarmuka pengguna bisa untuk pengguna internal atau eksternal. Desainnya
sangat bervariasi tergantung pada faktor-faktor seperti tujuan antarmuka, karakteristik pengguna, dan
karakteristik perangkat antarmuka tertentu. Misalnya, meskipun semua antarmuka pengguna harus
dirancang untuk kemudahan penggunaan maksimal, pertimbangan lain, seperti efisiensi operasional,
mungkin penting bagi pengguna internal yang dapat dilatih untuk menggunakan antarmuka spesifik
yang dioptimalkan untuk perangkat keras tertentu (misalnya, keyboard, mouse, dan layar besar
beresolusi tinggi). Sebaliknya, antarmuka pengguna yang sangat berbeda mungkin dirancang untuk
sistem yang berhubungan dengan pelanggan yang mengasumsikan telepon seluler sebagai perangkat
input/output.
Di sebagian besar proyek pengembangan sistem, analis memisahkan desain antarmuka sistem
dari desain antarmuka pengguna karena masing-masing memerlukan keahlian dan teknologinya
sendiri. Namun seperti halnya desain komponen sistem apa pun, diperlukan koordinasi yang matang.
Memahami Antarmuka Pengguna Banyak orang berpikir antarmuka
pengguna dikembangkan dan ditambahkan ke sistem menjelang akhir proses pengembangan, namun
antarmuka pengguna jauh lebih penting dari itu. Ini adalah segala sesuatu yang berhubungan dengan
pengguna akhir saat menggunakan sistem—secara fisik, persepsi, dan konseptual (lihat Gambar 7-1).
Dari sudut pandang pengguna, antarmuka pengguna adalah keseluruhan sistem. Program,
skrip, database, dan perangkat keras di belakang antarmuka tidak relevan.
Teknik desain yang mewujudkan pandangan antarmuka pengguna ini secara kolektif disebut desain
teknik desain desain yang berpusat pada yang berpusat pada pengguna, yang menekankan tiga prinsip penting: ÿ Fokus sejak
pengguna yang mewujudkan pandangan bahwa
antarmuka pengguna adalah keseluruhan sistem awal pada pengguna dan pekerjaan mereka. ÿ Evaluasi
desain untuk memastikan kegunaan. ÿ Gunakan
pengembangan berulang.
Fokus awal pada pengguna dan pekerjaan mereka konsisten dengan pendekatan analisis sistem
dalam teks ini. Tugas analisis dan desain yang berorientasi pengguna dilakukan sedini mungkin dan
sering kali diberi prioritas lebih tinggi daripada tugas lainnya.
Misalnya, tugas analisis berorientasi pengguna seperti identifikasi pemangku kepentingan dan
wawancara terjadi di awal proyek. Antarmuka pengguna dirancang pada iterasi awal, dan keputusan
desain terkait pengguna mendorong keputusan dan tugas desain lainnya.
Fokus awal pada pengguna dan pekerjaan mereka lebih dari sekadar masalah pengurutan dan
prioritas tugas. Hal ini merupakan upaya menyeluruh untuk memahami pengguna dan menjawab
pertanyaan seperti: Apa yang mereka ketahui? Bagaimana mereka belajar? Bagaimana
GAMBAR 7-1
Desain yang berpusat pada pengguna
mereka lebih suka bekerja? Apa yang memotivasi mereka? Tingkat fokus berorientasi pengguna bervariasi
menurut jenis sistem yang dikembangkan. Misalnya, jika sistem adalah aplikasi desktop yang dipasarkan
langsung ke pengguna akhir, fokus pada pengguna dan preferensi mereka sangat kuat.
Prinsip kedua dari desain yang berpusat pada pengguna adalah mengevaluasi desain untuk
tingkat kegunaan dimana suatu sistem mudah memastikan kegunaan. Kegunaan mengacu pada sejauh mana suatu sistem mudah dipelajari dan
dipelajari dan digunakan
digunakan. Memastikan kegunaan tidaklah mudah; ada banyak jenis pengguna dengan preferensi dan
keterampilan berbeda. Fitur yang mudah digunakan oleh satu orang mungkin sulit digunakan oleh orang
lain. Jika sistem mempunyai pengguna akhir yang beragam, bagaimana perancang dapat yakin bahwa
antarmuka akan bekerja dengan baik untuk mereka semua? Misalnya, jika terlalu fleksibel, beberapa
pengguna akhir mungkin merasa bingung. Di sisi lain, jika antarmuka terlalu kaku, beberapa pengguna akan
merasa frustrasi.
Kemudahan belajar dan kemudahan penggunaan seringkali bertentangan. Misalnya, aplikasi berbasis
menu dengan berbagai bentuk, banyak kotak dialog, dan petunjuk serta instruksi ekstensif mudah dipelajari;
memang, semuanya sudah cukup jelas.
Dan antarmuka yang mudah dipelajari cocok untuk sistem yang jarang digunakan oleh pengguna akhir.
Namun jika pengguna internal menggunakan sistem sepanjang hari, penting untuk membuat antarmuka
cepat dan fleksibel, dengan pintasan, tombol pintas, perintah suara, dan layar intensif informasi. Antarmuka
kedua ini mungkin lebih sulit untuk dipelajari, namun akan lebih mudah digunakan setelah dipelajari.
Pengguna internal (dengan dukungan manajer mereka) bersedia menginvestasikan lebih banyak waktu
untuk mempelajari sistem agar menjadi pengguna yang efisien.
Pengembang menggunakan banyak teknik untuk mengevaluasi desain antarmuka guna memastikan
kegunaan. Desain yang berpusat pada pengguna memerlukan pengujian semua aspek antarmuka pengguna.
Beberapa teknik pengujian kegunaan mengumpulkan data objektif yang dapat dianalisis secara statistik
untuk membandingkan desain. Beberapa teknik mengumpulkan data subjektif tentang persepsi dan sikap
pengguna. Untuk menilai sikap pengguna, pengembang melakukan survei formal, pertemuan kelompok
fokus, penelusuran desain, evaluasi kertas dan pensil, evaluasi ahli, eksperimen laboratorium formal, dan
observasi informal.
Prinsip ketiga dari desain yang berpusat pada pengguna adalah pengembangan berulang—yaitu,
melakukan beberapa analisis, kemudian beberapa desain, kemudian beberapa implementasi, dan kemudian
mengulangi prosesnya. Setelah setiap iterasi, tim proyek mengevaluasi pekerjaan pada sistem hingga saat
ini. Pengembangan berulang menjaga fokus pada pengguna
terus-menerus kembali ke kebutuhan pengguna selama setiap iterasi dan dengan

mengevaluasi sistem setelah setiap iterasi. Seperti halnya prinsip fokus awal pada pengguna
dan pekerjaan mereka, prinsip ini tercermin di seluruh buku teks ini dalam pendekatannya
terhadap pengembangan sistem secara umum dan tugas-tugas analisis dan desain pada khususnya.
Metafora untuk Interaksi Manusia-Komputer Penggunaan

antarmuka pengguna yang berorientasi visual secara luas memulai debutnya di pasar massal
dengan Apple Macintosh pada tahun 1980an dan menyebar luas dengan berbagai versi
Microsoft Windows pada tahun 1990an. Untuk membuat komputer lebih mudah digunakan
metafora analogi antara fitur antarmuka pengguna dan dipelajari, perancang antarmuka berorientasi visual awal mengadopsi metafora, yang
dan aspek realitas fisik yang familiar bagi merupakan analogi antara fitur antarmuka pengguna dan aspek realitas fisik yang familiar
pengguna
bagi pengguna. Metafora masih banyak diterapkan pada desain antarmuka pengguna, seperti
dijelaskan pada Tabel 7-1.
Gambar 7-2 adalah tangkapan layar komputer yang menjalankan Windows yang
metafora manipulasi langsung metafora di mengilustrasikan metafora manipulasi langsung, desktop, dan dokumen. Seluruh tampilan
mana objek pada tampilan dimanipulasi agar secara visual mirip dengan permukaan desktop fisik. Ikon dan gambar alat yang biasa
terlihat seperti objek fisik (gambar) atau
digunakan terletak di sisi kiri dan kanan. Ikon dapat langsung dimanipulasi dengan mouse
simbol grafis yang mewakili objek tersebut (ikon)
atau alat penunjuk lainnya.
Jendela di bingkai tengah adalah dokumen yang secara visual mirip dengan halaman kertas
metafora desktop metafora di mana tampilan visual yang diletakkan di permukaan meja, dengan catatan tempel ditempel di salah satu halamannya.
diatur ke dalam wilayah berbeda, dengan ruang
kerja kosong yang besar di tengah dan kumpulan
ikon alat di sekelilingnya
Manipulasi langsung, desktop, dan metafora dokumen menekankan objek yang
ditampilkan yang berinteraksi dengan pengguna. Metafora dialog menekankan komunikasi
yang terjadi antara pengguna dan komputer, dikonsep sebagai percakapan. Dalam percakapan
metafora dokumen metafora di mana data
atau dialog antara dua orang, masing-masing orang mendengarkan dan menanggapi
direpresentasikan secara visual sebagai halaman
pertanyaan dan komentar dari orang lain, dengan pertukaran informasi secara berurutan.
atau formulir kertas
Metafora dialog adalah cara berpikir lain tentang interaksi manusia-komputer karena komputer
metafora dialog metafora di mana pengguna “mendengarkan” dan “merespon” pertanyaan atau komentar pengguna, dan pengguna
dan komputer menyelesaikan tugas dengan
“mendengarkan” dan “merespon” pertanyaan dan komentar komputer. Gambar 7-3
terlibat dalam percakapan atau dialog melalui teks,
suara, atau alat seperti tombol berlabel
mengilustrasikan dialog konseptual antara pengguna dan komputer.
TABEL 7-1 Metafora yang umum digunakan untuk desain antarmuka pengguna
Metafora Keterangan Contoh
Langsung Memanipulasi objek pada tampilan yang terlihat seperti Pengguna menyeret ikon folder ke gambar recycle bin
manipulasi objek fisik (gambar) atau yang mewakili objek tersebut atau tempat sampah untuk menghapus kumpulan file.
(ikon)
Desktop Mengatur tampilan visual ke dalam wilayah berbeda, Saat komputer dinyalakan, pengguna Windows melihat
dengan ruang kerja kosong besar di tengah dan kumpulan desktop, dengan ikon jam, kalender, notepad, kotak
ikon alat di sekelilingnya masuk, dan catatan tempel (versi antarmuka komputer dari
catatan fisik Post-It).
Dokumen Secara visual mewakili data dalam file sebagai halaman Pengguna mengisi kolom formulir untuk produk yang
kertas atau formulir. Halaman-halaman ini dapat dimilikinya, dan situs Web produsen menemukan dan
dihubungkan satu sama lain melalui referensi (hyperlink) menampilkan manual produk sebagai file Adobe Acrobat,
yang berisi daftar isi hyper-link dan link tertanam ke
dokumen terkait.
Dialog Pengguna dan komputer menyelesaikan tugas dengan Pengguna mengklik tombol berlabel “pemecahan masalah”
terlibat dalam percakapan atau dialog menggunakan karena printer tidak berfungsi. Komputer mencetak
teks, suara, atau alat, seperti tombol berlabel pertanyaan pada layar, dan pengguna merespons dengan
mengetikkan jawaban atau memilih respons dari daftar
yang dicetak.
GAMBAR 7-2 Manipulasi langsung, desktop, dan metafora dokumen pada tampilan komputer pada umumnya
Metafora dialog dapat diimplementasikan dalam berbagai cara di antarmuka pengguna.

Pendekatan langsung menggunakan pembangkitan dan pengenalan ucapan melalui saluran
komunikasi suara, seperti yang biasa ditemui saat menghubungi nomor dukungan pelanggan
di sebuah perusahaan besar. Suara yang terkomputerisasi menanyakan serangkaian
pertanyaan, mendengarkan jawaban setiap pertanyaan, dan merespons jawabannya.
Implementasi lain dari metafora dialog menggunakan pertanyaan atau instruksi yang
ditampilkan oleh pengguna melalui teks dan tanggapan serta pertanyaan balasan yang
ditampilkan oleh komputer melalui teks. Untuk meminimalkan kebutuhan pengguna untuk
mengetik, respons terhadap pertanyaan komputer mungkin dibatasi pada serangkaian
kemungkinan tertentu yang ditampilkan kepada pengguna dalam bentuk daftar yang kemudian
pengguna dapat memilih respons yang paling tepat dengan mengklik mouse atau dengan menyentuh pe
Terlepas dari bentuk spesifik implementasinya, menentukan dialog antara pengguna dan
komputer adalah salah satu alat paling ampuh yang digunakan oleh perancang antarmuka
pengguna. Meskipun bahasa tertulis dan lisan berbeda-beda di seluruh dunia, percakapan
dan dialog merupakan keterampilan manusia yang mendasar dan universal. Memodelkan
GAMBAR 7-3
Metafora dialog untuk interaksi pengguna-komputer
Interaksi antara pengguna dan komputer sebagai dialog memungkinkan pengguna untuk menggabungkan
bahasa dan keterampilan terkait yang telah diasah sejak usia dini.
Konsep Desain Antarmuka Pengguna Banyak peneliti dan praktisi TI
telah menerbitkan artikel, buku, dan situs Web yang menawarkan panduan dalam desain antarmuka
pengguna. Meskipun beberapa pedoman telah berubah seiring dengan perubahan teknologi antarmuka
pengguna, banyak pedoman yang bersifat universal, telah ada selama beberapa dekade dan generasi
teknologi. Kami meninjau beberapa pedoman universal di bagian ini dan kemudian beralih ke pengembangan
antarmuka pengguna, dengan pedoman khusus untuk jenis antarmuka tertentu, nanti di bab ini.
Keterjangkauan dan Visibilitas Donald

bidang studi interaksi manusia-komputer (HCI) yang Norman adalah peneliti terkemuka dalam interaksi manusia-komputer (HCI), sebuah bidang studi yang
berkaitan dengan efisiensi dan efektivitas antarmuka pengguna berkaitan dengan efisiensi dan efektivitas antarmuka pengguna ke sistem komputer, teknologi input dan
sehubungan dengan sistem komputer, teknologi input dan
output yang berorientasi pada manusia, dan aspek psikologis pengguna. antarmuka. Norman mengusulkan
output yang berorientasi pada manusia, dan aspek psikologis
dua prinsip utama untuk memastikan interaksi yang baik antara manusia dan mesin: keterjangkauan dan
antarmuka pengguna
visibilitas. Kedua prinsip tersebut berlaku untuk kontrol antarmuka pengguna, yang merupakan elemen
antarmuka pengguna yang dimanipulasi pengguna untuk melakukan tugas. Contoh kontrol mencakup
menu, tombol, daftar tarik-turun, penggeser, dan kotak entri teks.
keterjangkauan ketika tampilan suatu kontrol tertentu Keterjangkauan berarti bahwa tampilan suatu pengendalian tertentu menunjukkan fungsinya, yaitu
menunjukkan fungsinya tujuan penggunaan pengendalian tersebut. Misalnya, kontrol yang tampak seperti roda kemudi
menunjukkan bahwa roda tersebut digunakan untuk berbelok.
Keterjangkauan juga dapat dicapai dengan kontrol antarmuka pengguna yang familiar bagi pengguna
dalam konteks lain. Misalnya, ikon kontrol pemutar media yang ditunjukkan pada Gambar 7-4 pertama kali
digunakan secara luas pada pemutar kaset audio dan video pada tahun 1970an dan terus digunakan pada
perangkat seperti DVD dan pemutar musik portabel. Mereka banyak dimasukkan ke dalam antarmuka
komputer karena begitu banyak pengguna yang mengenalnya.
visibilitas ketika suatu kontrol terlihat sehingga pengguna Visibilitas berarti suatu kontrol terlihat sehingga pengguna mengetahui bahwa kontrol tersebut
mengetahui bahwa kontrol tersebut tersedia, kontrol memberikan tersedia; hal ini juga berarti bahwa kendali memberikan umpan balik segera untuk menunjukkan bahwa
umpan balik langsung untuk menunjukkan bahwa
kendali tersebut merespons. Misalnya, tombol mute yang ditunjukkan pada Gambar 7-4(a) berubah
kontrol tersebut merespons pengguna
tampilannya ketika pengguna menggerakkan penunjuk tetikus ke atasnya, seperti yang ditunjukkan pada
Gambar 7-4(b). Saat pengguna menekan tombol, tampilannya akan berubah, seperti yang ditunjukkan pada Gambar 7
Visibilitas dan keterjangkauan relatif mudah dicapai ketika target desain adalah platform yang umum
digunakan, seperti iPad, ponsel yang menjalankan sistem operasi Android, atau PC yang menjalankan
Windows. Platform tersebut memiliki pedoman desain antarmuka pengguna yang jelas dan perpustakaan
fitur dan fungsi antarmuka pengguna yang dapat digunakan kembali oleh perangkat lunak aplikasi. Ketika
seorang desainer menggabungkan objek dan gaya antarmuka pengguna dari perpustakaan ini, dia
memanfaatkan pengalaman pengguna dengan antarmuka pengguna serupa dari aplikasi lain pada platform
tersebut.
Desain antarmuka pengguna web kurang terstandarisasi karena browser Web sengaja netral terhadap
platform. Desainer dapat memilih dari beragam pengguna-
GAMBAR 7-4 ac
Visibilitas dan keterjangkauan dalam kontrol
(A)
pemutar media
(B)
(C)
perpustakaan antarmuka, masing-masing dengan objek dan gaya antarmuka penggunanya sendiri.
Perhatian terhadap visibilitas dan keterjangkauan sangat penting dalam desain antarmuka Web karena
tidak ada standar nyata yang menyediakan kerangka keakraban pengguna yang sudah ada sebelumnya.
Konsistensi
Antarmuka pengguna harus dirancang untuk konsistensi dalam fungsi dan tampilan.
Cara informasi disusun pada formulir, nama dan susunan item menu, ukuran dan bentuk ikon, serta
urutan yang diikuti untuk melaksanakan tugas harus konsisten di seluruh sistem. Mengapa? Manusia
adalah makhluk yang memiliki kebiasaan. Setelah kita mempelajari satu cara dalam melakukan
sesuatu, sulit untuk mengubahnya. Saat kita mengoperasikan aplikasi komputer, banyak tindakan kita
menjadi otomatis; kita tidak memikirkan apa yang kita lakukan.
Gambar 7-5 menunjukkan tampilan Microsoft Word, yang menggambarkan banyak aspek
konsistensi antara aplikasi yang berjalan di Windows dan di berbagai komponen suite Microsoft Office.
Ikon yang muncul di sudut kiri atas dan kanan atas bingkai jendela merupakan standar di banyak
aplikasi Windows; dengan demikian, pengguna mengetahui di mana mencarinya dan apa fungsinya
secara sekilas. Demikian pula, bilah gulir di sebelah kanan dan penggeser perbesar/perkecil serta
pegangan pengubah ukuran di sudut kanan bawah adalah standar di banyak aplikasi Windows. Menu
atas dan toolbar serupa di Word, PowerPoint, Publisher, dan program lain dalam Microsoft Office.
Pengguna berpengalaman suatu program mempelajari program lain lebih cepat karena kesamaan ini.
Pintasan
Antarmuka pengguna dan dialog yang dirancang untuk pemula sering kali merupakan gangguan dan
hambatan bagi produktivitas pengguna berpengalaman. Pengguna yang bekerja dengan suatu
aplikasi berulang kali atau dalam jangka waktu lama menginginkan pintasan untuk fungsi yang sering
digunakan, yang meminimalkan jumlah penekanan tombol, klik mouse, dan pilihan menu yang
diperlukan untuk menyelesaikan tugas. Contohnya termasuk perintah suara serta tombol pintasan,
seperti urutan keyboard Windows Ctrl+C untuk menyalin dan Ctrl+V untuk menempel. Perancang
aplikasi harus menggunakan pintasan standar jika tersedia atau membuatnya sendiri.
GAMBAR 7-5 Fitur antarmuka Microsoft Word yang digunakan dalam berbagai aplikasi Windows
Umpan Balik
Setiap tindakan yang dilakukan pengguna harus menghasilkan beberapa jenis umpan balik dari komputer
sehingga pengguna mengetahui bahwa tindakan tersebut dikenali. Umpan balik dapat berbentuk banyak dalam
antarmuka pengguna, termasuk: ÿ Umpan balik
yang dapat didengar, seperti bunyi klik saat tombol ditekan dan berbunyi bip saat tombol di layar ditekan ÿ
Umpan balik yang terlihat, seperti perubahan ikon
yang ditunjukkan pada Gambar 7-4(b ) dan 7-4(c), atau pengukur kemajuan yang ditampilkan selama
pengunduhan file besar. Umpan balik memberi pengguna rasa konfirmasi dan perasaan
bahwa sistem responsif dan berfungsi dengan benar. Kurangnya umpan balik membuat pengguna bertanya-
tanya apakah suatu perintah atau masukan dikenali atau apakah sistem tidak berfungsi. Ketika pemrosesan
selanjutnya tertunda lebih dari satu atau dua detik, pengguna mungkin berulang kali menekan kontrol atau
memasukkan kembali informasi, yang mengakibatkan kesalahan pemrosesan dan frustrasi pengguna.
Dialog yang Menghasilkan Penutupan

Setiap dialog harus disusun dengan urutan yang jelas—awal, tengah, dan akhir. Setiap tugas yang
terdefinisi dengan baik memiliki awal, tengah, dan akhir, sehingga tugas pengguna di komputer juga harus
terasa seperti ini. Pengguna bisa tersesat jika tidak jelas kapan tugas dimulai dan diakhiri. Selain itu,
pengguna sering kali fokus pada suatu tugas, sehingga ketika suatu tugas dipastikan selesai, pengguna
dapat menjernihkan pikirannya dan bersiap untuk fokus pada tugas berikutnya.
Jika persyaratan sistem pada awalnya didefinisikan sebagai peristiwa yang direspon oleh sistem, setiap
peristiwa mengarah pada pemrosesan satu aktivitas spesifik yang terdefinisi dengan baik. Setiap use case
dapat didefinisikan sebagai satu atau lebih dialog, masing-masing dengan alur langkah dan interaksi yang
terdefinisi dengan baik. Dekomposisi peristiwa menetapkan tahapan untuk dialog dengan penutupan.
Penanganan Kesalahan
Kesalahan pengguna hanya membuang-buang waktu untuk melakukan dan memperbaikinya. Desain
antarmuka pengguna yang baik mengantisipasi kesalahan umum dan membantu pengguna menghindarinya.
Salah satu cara untuk melakukan ini adalah dengan membatasi opsi yang tersedia, dengan hanya menyajikan
opsi yang valid kepada pengguna untuk titik tertentu dalam dialog. Umpan balik yang memadai, seperti dibahas
sebelumnya, juga membantu mengurangi kesalahan.
Ketika kesalahan memang terjadi, antarmuka pengguna memerlukan mekanisme untuk mendeteksinya.
Teknik validasi yang dibahas nanti dalam bab ini berguna untuk menangkap kesalahan, namun sistem juga harus
membantu pengguna memperbaiki kesalahan tersebut. Ketika sistem menemukan kesalahan, pesan kesalahan
harus menyatakan secara spesifik apa yang salah dan menjelaskan cara memperbaikinya. Pertimbangkan pesan
kesalahan ini yang terjadi setelah pengguna mengetikkan informasi layar penuh tentang pelanggan baru:
Informasi pelanggan yang dimasukkan tidak valid. Coba lagi.
Pesan ini tidak menjelaskan apa yang salah atau apa yang harus dilakukan selanjutnya.
Selanjutnya, setelah pesan ini muncul, bagaimana jika sistem menghapus formulir entri data dan menampilkannya
kembali? Pengguna harus memasukkan kembali semua yang diketik sebelumnya tetapi masih tidak tahu apa
yang salah. Pesan kesalahan tidak menjelaskannya, dan sekarang data yang diketik telah dihapus, pengguna
tidak dapat mengetahui apa yang mungkin salah. Pesan kesalahan yang lebih baik akan berbunyi lebih seperti
ini:
Tanggal lahir yang dimasukkan tidak valid. Periksa untuk memastikan hanya karakter numerik
dalam rentang yang sesuai yang dimasukkan di kolom Tanggal Lahir.
Sistem juga harus menyederhanakan tindakan perbaikan. Misalnya, jika pengguna memasukkan ID
pelanggan yang tidak valid, sistem harus memberi tahu pengguna bahwa hal ini telah terjadi dan kemudian
menempatkan titik penyisipan di kotak teks ID pelanggan, dengan nomor yang diketik sebelumnya ditampilkan
dan siap untuk diedit. Dengan begitu, pengguna
dapat melihat kesalahan dan mengeditnya daripada harus mengetik ulang seluruh ID. Sistem mungkin
juga menyarankan nilai yang valid berdasarkan pengalaman masa lalu atau informasi lain yang telah
dimasukkan pengguna.
Pembalikan Tindakan yang Mudah

Pengguna perlu merasa bahwa mereka dapat mengeksplorasi pilihan dan mengambil tindakan yang
dapat dibatalkan atau dibatalkan tanpa kesulitan. Ini adalah salah satu cara pengguna mempelajari
sistem—yaitu dengan bereksperimen. Ini juga merupakan cara untuk mencegah kesalahan; ketika
pengguna menyadari bahwa mereka telah melakukan kesalahan, mereka membatalkan tindakan
tersebut. Dalam permainan catur, suatu gerakan belum final sampai pemain melepaskan jarinya dari
bidak permainan; itu harus sama ketika pengguna menyeret suatu objek di layar. Selain itu, desainer
harus memastikan untuk menyertakan tombol batal di semua kotak dialog dan mengizinkan pengguna
untuk mundur satu langkah kapan saja. Terakhir, ketika pengguna menghapus sesuatu yang penting—
file, catatan, atau transaksi—sistem harus meminta pengguna untuk mengonfirmasi tindakan tersebut
dan, jika memungkinkan, menunda penerapan tindakan tersebut.
Persoalan utama yang memungkinkan terjadinya pembalikan tindakan adalah penataan dialog
dan tindakan sistem yang terkait. Perancang dan pemrogram pemula sering berasumsi bahwa struktur
dialog pengguna dan urutan tindakan sistem yang terkait harus benar-benar sesuai. Misalnya, transaksi
yang kompleks mungkin memerlukan beberapa langkah terpisah, yang masing-masing menerima data
dari pengguna dan beberapa di antaranya mengubah data yang disimpan oleh sistem. Meskipun dialog
pengguna harus mencerminkan struktur ini, pemrograman internal tidak selalu harus memproses data
saat diterima. Sebaliknya, mereka mungkin mengumpulkan data saat dialog berlangsung dan membuat
daftar “hal yang harus dilakukan” internal. Ketika pengguna menyelesaikan langkah terakhir dalam
dialog, sistem kemudian dapat menyelesaikan pemrosesan seluruh dialog sekaligus. Jika pengguna
memutuskan di dekat akhir dialog untuk membatalkan seluruh rangkaian, tidak ada perubahan internal
yang perlu dibatalkan. Selain itu, kinerja antarmuka pengguna dapat ditingkatkan karena potensi
penundaan pemrosesan antar langkah lebih sedikit.
Mengurangi Beban Memori Jangka Pendek Manusia

mempunyai banyak keterbatasan, dan memori jangka pendek adalah salah satu keterbatasan terbesarnya.
Psikolog telah menunjukkan bahwa orang hanya dapat mengingat sekitar tujuh bagian informasi dalam
satu waktu. Perancang antarmuka pengguna harus menghindari mengharuskan pengguna untuk
mengingat apa pun dari satu formulir ke formulir lainnya atau dari satu kotak dialog ke kotak dialog
lainnya selama interaksi dengan sistem. Jika pengguna harus berhenti dan bertanya “Apa nama filenya?
ID pelanggan? Deskripsi produk?” maka desainnya terlalu membebani memori pengguna. Keterbatasan
memori juga berlaku untuk langkah-langkah dalam proses yang kompleks. Antarmuka harus membantu
pengguna melacak posisi mereka dalam proses yang kompleks melalui isyarat visual dan bantuan
lainnya.
Transisi dari Analisis ke Desain Antarmuka Pengguna Landasan desain
antarmuka pengguna diletakkan ketika kasus
penggunaan diidentifikasi dan didokumentasikan, seperti yang dijelaskan dalam Bab 3. Kasus
penggunaan yang memerlukan interaksi langsung dengan pengguna (yaitu kasus penggunaan
interaktif) adalah titik awal untuk dialog, dan diagram kasus penggunaan, aktivitas, dan urutan sistem
yang sesuai adalah dokumentasi dialog awal. Kasus penggunaan interaktif mungkin mengharuskan
pengguna untuk memasukkan pilihan dan data ke dalam sistem (seperti saat membuat pesanan online)
atau mungkin menghasilkan output sebagai respons terhadap permintaan pengguna (seperti saat
melacak pengiriman). Selama desain, dialog untuk kasus penggunaan interaktif disempurnakan lebih
lanjut dengan mengembangkan menu, formulir, dan elemen antarmuka pengguna lainnya.
Dialog dan desain antarmuka pengguna dapat dilakukan secara top-down atau bottom-up. Dalam
pendekatan top-down, menu (kelompok kasus penggunaan terkait, dialog, dan antarmuka pengguna)
didefinisikan terlebih dahulu, diikuti dengan deskripsi rinci dari setiap dialog kasus penggunaan interaktif
dan pengembangan kasus penggunaan terkait.
elemen antarmuka pengguna. Dalam pendekatan bottom-up, kasus penggunaan interaktif

diprioritaskan, dan dialog terkait serta antarmuka pengguna dikembangkan satu per satu.
Menu ditambahkan kemudian dalam proyek ketika rangkaian antarmuka pengguna yang
diimplementasikan sepenuhnya telah selesai. Tidak ada pendekatan yang secara inheren lebih
baik; salah satu atau keduanya bisa cocok untuk proyek tertentu.
Kasus Penggunaan dan Hierarki Menu Menu adalah

cara mengelompokkan sejumlah besar kasus penggunaan atau dialog terkait dalam antarmuka
pengguna. Dalam semua sistem kecuali yang terkecil, menu diperlukan untuk menyajikan
kepada pengguna sejumlah pilihan yang dapat diatur per layar, untuk mengelompokkan fungsi-
fungsi terkait sehingga pengguna dapat lebih mudah menemukannya, dan untuk mengurutkan
antarmuka terkait dengan benar untuk dekomposisi peristiwa yang kompleks. Gambar 7-6
menunjukkan dua gaya menu yang berbeda. Pada Gambar 7-6(a), penunjuk tetikus diposisikan
di atas item Toko pada menu atas di halaman Web. Mengklik Toko akan menampilkan halaman
Web kedua yang berisi menu lain. Gambar 7-6(b) menunjukkan desain menu yang lebih
kompleks, dengan tiga level menu ditampilkan.
Bagaimana seorang desainer memutuskan kasus penggunaan dan antarmuka pengguna
mana yang akan disertakan dalam menu mana, menu mana yang diperlukan, dan berapa banyak
level menu yang diperlukan? Keputusan ini terutama didorong oleh jumlah kasus penggunaan
atau pilihan menu dan batasan kognisi manusia. Menu biasanya berisi lima hingga 10 pilihan
untuk menghindari kelebihan beban pengguna (lihat Gambar 7-6(a)). Dengan desain yang
cermat, lebih banyak pilihan dapat diberikan, terutama bagi pengguna berpengalaman (lihat
Gambar 7-6(b)). Untuk sistem bisnis pada umumnya, membagi jumlah total kasus penggunaan
interaktif dengan lima memberikan perkiraan awal jumlah menu yang mencakup semua kasus
penggunaan interaktif dan memungkinkan item menu tambahan, seperti opsi pengaturan atau
preferensi. Jika jumlah menu lebih dari 10, diperlukan menu tingkat lebih tinggi yang berisi tautan
ke menu lain.
Misalnya, pada Gambar 7-6(b), pilihan menu atas, seperti File, Home, dan Review, masing-
masing link ke menu tingkat kedua diformat sebagai toolbar. Beberapa pilihan dalam toolbar
merupakan tautan ke menu tingkat yang lebih rendah, misalnya menu Tampilkan Markup yang
ditampilkan.
GAMBAR 7-6 Dua gaya menu yang berbeda
(A)
(B)
TABEL 7-2 Kasus penggunaan RMO dikelompokkan berdasarkan aktor dan subsistem
Subsistem Kasus Penggunaan Pengguna/Aktor
Penjualan Cari barang Pelanggan, perwakilan layanan pelanggan,

perwakilan penjualan toko
Penjualan Lihat komentar dan peringkat produk Pelanggan, perwakilan layanan pelanggan,
Penjualan Lihat kombinasi aksesori Pelanggan, perwakilan layanan pelanggan,

Penjualan Isi keranjang belanja Pelanggan
Penjualan Keranjang belanja kosong Pelanggan
Penjualan Periksa keranjang belanja Pelanggan
Penjualan Isi keranjang cadangan Pelanggan
Penjualan Keranjang cadangan kosong Pelanggan
Penjualan Konversi keranjang cadangan Pelanggan
Penjualan Buat penjualan telepon Perwakilan layanan pelanggan
Penjualan Buat penjualan toko Perwakilan penjualan toko
Pemenuhan pesanan Kirimkan barang Pengiriman
Pemenuhan pesanan Kelola pengirim Pengiriman
Pemenuhan pesanan Buat pemesanan di awal Pengiriman
Pemenuhan pesanan Buat pengembalian barang Pengiriman, pelanggan
Pemenuhan pesanan Cari status pesanan Pengiriman, pelanggan, manajemen
Pemenuhan pesanan Lacak pengiriman Pengiriman, pelanggan, pemasaran
Pemenuhan pesanan Nilai dan komentari produk Pelanggan
Pemenuhan pesanan Berikan saran Pelanggan
Gunakan kasus dengan aktor umum dan dekomposisi peristiwa atau implementasinya
Tindakan CRUD untuk kelas domain tertentu adalah kandidat yang baik untuk dikelompokkan
menjadi satu menu atau kelompok menu terkait. Misalnya, pertimbangkan RMO
Kasus penggunaan CSMS ditunjukkan pada Tabel 7-2. Pengelompokan awal kasus-kasus ini berdasarkan aktor
dan subsistem adalah titik awal yang baik untuk desain menu.
Tabel 7-3 menunjukkan pengelompokan use case pada Tabel 7-2 menjadi empat menu.
Setiap menu mengumpulkan kasus penggunaan dari satu subsistem untuk pelanggan atau internal
perwakilan penjualan. Jumlah pilihan menu berkisar antara empat hingga tujuh,
yang tidak akan membebani satu menu mana pun dan dapat mengaktifkan beberapa level menu
ditampilkan pada satu waktu. Desain dialog dibuat untuk setiap opsi menu. Setelah
hasil desain dialog, perancang dapat mendefinisikan kembali opsi atau struktur menu.
Faktanya, desainer sering kali menemukan kasus penggunaan yang hilang atau tidak lengkap selama
desain antarmuka pengguna, yang mengakibatkan kembalinya aktivitas analisis secara singkat untuk diselesaikan.
dokumentasi.
Menu biasanya menyertakan opsi yang bukan merupakan aktivitas atau kasus penggunaan dari acara tersebut
daftar. Banyak opsi yang terkait dengan kontrol sistem, seperti pemeliharaan akun
atau pencadangan dan pemulihan basis data, yang akan dibahas nanti di bab ini. Lainnya
item yang ditambahkan mencakup tautan bantuan serta tautan ke menu atau subsistem lain.
TABEL 7-3 Kasus penggunaan RMO CSMS dikelompokkan ke dalam menu pilihan pertama berdasarkan fungsi dan pengguna yang serupa
Deskripsi Menu Pilihan Menu (Kasus Penggunaan) Pengguna yang dituju
Fungsi keranjang belanja ÿ Mencari barang ÿ Pelanggan

(utama atau cadangan) Melihat komentar dan peringkat produk ÿ Melihat
kombinasi aksesori ÿ Beralih troli (utama
untuk memesan atau sebaliknya) ÿ Isi keranjang belanja ÿ
Kosongkan keranjang
belanja ÿ Periksa keranjang
belanja
Penciptaan penjualan ÿ Cari item ÿ Lihat Layanan pelanggan dan perwakilan

komentar dan peringkat produk ÿ Lihat kombinasi penjualan toko
aksesori ÿ Buat penjualan
Pengiriman pesanan ÿ Mengirimkan Layanan pelanggan dan penjualan toko

barang ÿ Mengelola pengirim perwakilan
ÿ Membuat pemesanan di
awal ÿ Membuat pengembalian
barang ÿ Mencari status pesanan
ÿ Melacak pengiriman
Kontrol pesanan pelanggan ÿ Cari status pesanan ÿ Lacak Pelanggan

pengiriman ÿ Buat
pengembalian barang ÿ Beri
peringkat dan komentar pada produk ÿ Berikan
saran
Dialog dan Storyboard Setelah

mengidentifikasi semua dialog yang diperlukan, desainer harus mendokumentasikan dialog tersebut.
Ada banyak pilihan; tidak ada standar de facto. Salah satu pendekatannya adalah dengan membuat
daftar langkah-langkah penting yang diikuti untuk dialog dengan deskripsi tertulis tentang apa yang
dilakukan pengguna dan komputer pada setiap langkah. Format penulisan langkah-langkah tersebut
dapat mengikuti diagram aktivitas yang dijelaskan pada Bab 2 atau format deskripsi use case pada
Bab 4 atau bisa juga dalam bentuk lebih bebas.
Desainer juga dapat mendokumentasikan desain dialog dengan menuliskan bagaimana
pengguna dan sistem dapat berinteraksi jika mereka adalah dua orang yang terlibat dalam percakapan.
Terkadang, desainer dapat beralih dari dialog hingga membuat sketsa serangkaian layar yang
membuat desain lebih terlihat. Pertimbangkan kasus penggunaan Periksa keranjang belanja untuk
RMO CSMS. Dialog antara sistem dan pengguna mungkin mengikuti pola ini:
SISTEM:
Apa yang ingin kamu lakukan?
PENGGUNA: Saya ingin check out.
SISTEM:
Oke. Apa alamat email atau nomor rekening Anda?
PENGGUNA:
Alamat email saya adalah nwells22@gmail.com.
SISTEM:
Bagus. Anda adalah Nancy Wells di 1122 Silicon Avenue. Benar?
PENGGUNA: Ya.
SISTEM:
Semua item di keranjang Anda tersedia dan dapat dikirim hari ini.
Karena subtotal pesanan Anda lebih dari $100, Anda memenuhi syarat untuk
pengiriman darat UPS gratis (3–5 hari). Opsi pengiriman lainnya
termasuk hari berikutnya ($35,00), dua hari ($20,00), dan pos paket USPS
($11,70, 5–7 hari). Bagaimana Anda ingin barang Anda dikirim?
PENGGUNA: Pengiriman darat UPS gratis.

SISTEM: Kami memiliki alamat pengiriman untuk Anda (1122 Silicon
jalan raya). Apakah Anda ingin pesanan Anda dikirimkan ke alamat tersebut?
PENGGUNA: TIDAK.
SISTEM: Ke alamat mana Anda ingin pesanan dikirimkan?

PENGGUNA: John Wells, 1612 Jalan Jefferson NE, Albuquerque, NM 87123.
SISTEM: Oke, total biayanya adalah $125,56 ($117,90 item subtotal ditambah
pajak penjualan $7,66). Haruskah saya menagih jumlah itu ke kartu kredit Anda
tercatat (Visa dengan nomor rekening berakhiran 0899)?
PENGGUNA: Ya.
SISTEM: Pembayaran Anda telah disetujui dan pesanan Anda sedang diproses
disiapkan untuk pengiriman. Email konfirmasi telah dikirim ke
Anda, dan lainnya akan dikirim dengan nomor pelacakan pengiriman
bila pesanan dikirim hari ini juga. Bisakah saya membantu Anda
ada yang lain?
PENGGUNA: TIDAK.
Ada banyak kemungkinan penerapan skenario ini. Sebelum memutuskan implementasi tertentu,
seorang analis sering kali menggunakan teknik yang disebut
rangkaian sketsa storyboard storyboarding—yaitu , menampilkan rangkaian sketsa tampilan layar
layar tampilan selama dialog
selama dialog. Sketsanya tidak harus terlalu detail untuk menunjukkan dasar-dasarnya
konsep desain. Desainer dapat mengimplementasikan storyboard dengan pemrograman visual
alat, seperti Visual Basic, namun menggunakan sketsa sederhana yang digambar dengan paket grafis
dapat membantu menjaga fokus pada ide desain mendasar dan menghindari bias pada desain.
desain dengan kemampuan satu alat pengembangan aplikasi tertentu.
Gambar 7-7 menunjukkan storyboard untuk dialog berdasarkan Check out
kasus penggunaan keranjang belanja. Format layarnya cukup primitif
dirinci untuk menampilkan semua informasi yang disajikan dan dimasukkan oleh pengguna. Itu
storyboard dapat ditinjau oleh pengguna dan desainer untuk mengidentifikasi informasi yang hilang atau
tidak relevan dan untuk mendiskusikan berbagai opsi untuk implementasi akhir,
yang mungkin didasarkan pada halaman Web yang ditampilkan pada layar besar, tradisional
Dialog Windows, atau antarmuka pengguna untuk aplikasi perangkat seluler.
Desain Antarmuka Pengguna

Seiring dengan menjamurnya perangkat komputasi, tersedia perangkat dan teknologi untuk
antarmuka pengguna telah tumbuh lebih kuat dan beragam. Tampilan berkisar dari
monitor layar datar format besar yang digunakan dengan komputer desktop hingga yang jauh lebih kecil
ditampilkan di tablet dan ponsel. Tampilan dapat dilengkapi dengan itu
suara sederhana seperti klik dan bip, musik, atau ucapan. Masukan pengguna dapat ditangkap
melalui ucapan, layar sentuh, keyboard dan mouse, atau pencitraan digital (scanning).
Seiring dengan meningkatnya jangkauan teknologi antarmuka pengguna, kebutuhan akan hal tersebut pun meningkat
membuat beberapa antarmuka pengguna. Misalnya saja aplikasi e-commerce pada umumnya
memiliki satu antarmuka pengguna untuk komputer desktop dan laptop dengan layar besar,
satu lagi untuk ponsel dengan layar kecil, dan terkadang sepertiga untuk ponsel berukuran sedang
layar, seperti iPad. Bahkan mungkin ada variasi dalam antarmuka pengguna
di antara perangkat serupa. Misalnya, antarmuka pengguna yang ditujukan untuk ponsel
mungkin merupakan versi generik yang dirancang untuk dijalankan dalam browser Web ponsel atau
itu mungkin aplikasi yang disesuaikan dengan versi berbeda untuk iPhone dan ponsel berbasis Android.
Meskipun antarmuka pengguna mempunyai ukuran dan kemampuan yang luas, beberapa di antaranya
fitur digunakan di hampir semua perangkat komputasi. Kita mulai dengan diskusi
ciri-ciri umum dan kemudian menyelidiki perbedaannya.
BAB 7 ÿ Perancangan Antarmuka Pengguna dan Sistem 201
GAMBAR 7-7
Storyboard untuk dialog Periksa
keranjang belanja
Pedoman untuk Mendesain Windows dan Formulir Setelah

mengidentifikasi dialog, menu, dan formulir dengan storyboard atau teknik lain, pengembang
sistem dapat membangun antarmuka pengguna dengan menggunakan salah satu dari banyak
alat pembuatan prototipe yang tersedia. Permasalahan utama yang perlu dipertimbangkan
pada tahap desain antarmuka ini mencakup tata letak dan format antarmuka, penguncian dan
entri data, dan kontrol navigasi.
Tata Letak dan Pemformatan Antarmuka

Antarmuka berkualitas tinggi ditata dengan baik, dengan bidang yang mudah diidentifikasi dan
dipahami. Salah satu metode terbaik untuk memastikan bahwa antarmuka ditata dengan baik
adalah dengan membuat prototipe berbagai alternatif dan membiarkan pengguna mengujinya.
Pengguna akan memberi tahu Anda karakteristik mana yang bermanfaat dan mana yang
mengganggu. Saat Anda mendesain antarmuka, Anda
harus memikirkan hal-hal berikut: ÿ Konsistensi—Semua bentuk dalam sistem harus memiliki
tampilan dan nuansa yang sama. Penggunaan tombol fungsi, pintasan, tombol kontrol,
warna, dan tata letak yang konsisten menjadikan sistem jauh lebih berguna dan terlihat profesional. Jik
GAMBAR 7-8
Halaman beranda RMO
merancang antarmuka yang didukung OS (misalnya, Windows, iPhone, atau Android), ikuti panduan
yang dipublikasikan untuk meningkatkan konsistensi aplikasi dan formulir.
ÿ Label dan judul—Label juga harus mudah dikenali dan dibaca. A
judul yang jelas dan deskriptif di bagian atas antarmuka membantu meminimalkan kebingungan
tentang penggunaan formulir.
ÿ Distribusi dan pemesanan—Bidang terkait biasanya ditempatkan bersebelahan dan dapat dikelompokkan
dalam sebuah kotak. Urutan tab (pergerakan kursor atau fokus masukan) harus mengikuti urutan
pembacaan yang biasa dilakukan pengguna (kiri ke kanan dan atas ke bawah di Amerika Serikat
dan Eropa). Ruang kosong sebaiknya digunakan agar konten mudah dibedakan dan dibaca.
ÿ Font dan warna—Variasi tampilan dan ukuran font dapat membantu pengguna membedakannya
bagian formulir yang berbeda, namun hanya sedikit variasi font dan ukuran yang boleh digunakan
untuk layar yang lebih besar dan sesedikit mungkin sebaiknya digunakan untuk layar kecil.
Terlalu banyak variasi akan mengganggu penglihatan dan dapat menyebabkan kelelahan mata.
Ikuti pedoman serupa untuk warna. Hindari menggunakan terlalu banyak warna dan pastikan
warnanya saling melengkapi. Selain itu, berhati-hatilah saat mencampurkan warna biru dengan kuning
atau mencampurkan merah dengan hijau, agar tidak menyulitkan pengguna yang buta warna.
Gambar 7-8 menunjukkan halaman beranda yang ditampilkan ketika pelanggan melihat situs Web
RMO. Formulir ini mencakup dua bilah menu di dekat bagian atas yang mengelompokkan fungsi terkait
dalam bagian halaman yang sama. Jika pengguna menunjuk ke item Belanja Pakaian, submenu akan
ditampilkan tepat di bawahnya dengan skema warna dan font yang serupa. Jika pengguna menunjuk ke
item Belanja Perlengkapan, Belanja Pakaian ditampilkan dalam teks hitam dengan latar belakang putih,
Belanja Perlengkapan ditampilkan dalam teks putih dengan latar belakang biru, dan item submenu terakhir
ditampilkan sebagai gantinya. Label untuk item menu diberi jarak yang lebar dan menggunakan font yang
mudah dibaca. Kecuali logo dan gambar, halaman tersebut menggunakan sedikit warna pelengkap. Judul
diposisikan di dekat bagian atas gambar dan terlihat menonjol dari latar belakang gambar dan elemen
halaman lainnya.
Entri Data
Beberapa jenis kontrol entri data yang banyak digunakan di antarmuka pengguna, termasuk:
kotak teks kotak persegi panjang yang menerima
teks yang diketik pada keyboard atau dikenali dari ÿ Kotak teks— kotak persegi panjang yang menerima teks yang diketik pada keyboard atau dikenali
input ucapan
dari input ucapan. Contoh: ID Produk pada Gambar 7-9. ÿ Kotak daftar— kotak teks yang
list box kotak teks yang berisi daftar berisi daftar nilai data yang telah ditentukan sebelumnya.
nilai data yang telah ditentukan sebelumnya Contoh: Ukuran pada Gambar 7-9.
GAMBAR 7-9
Formulir Detail Produk RMO yang
menggambarkan kontrol entri data khas
Microsoft Windows
kotak kombo kotak teks yang berisi daftar entri yang ÿ Kotak kombo— kotak teks yang berisi daftar standar yang dapat diterima
dapat diterima yang telah ditentukan sebelumnya tetapi entri tetapi mengizinkan pengguna untuk memasukkan nilai baru ketika daftar tidak
mengizinkan pengguna memasukkan nilai baru ketika
berisi nilai yang diinginkan.
daftar tersebut tidak berisi nilai yang diinginkan
ÿ Tombol radio— sekelompok pilihan dimana pengguna hanya memilih satu; sistem kemudian
tombol radio sekelompok pilihan dimana pengguna secara otomatis mematikan semua tombol lain dalam grup.
hanya memilih satu; sistem kemudian secara otomatis Contoh: Metode Pengiriman di layar #4 pada Gambar 7-7. ÿ
mematikan semua tombol lain dalam grup
Kotak centang —mirip dengan tombol radio, namun pengguna dapat memilih beberapa
item dalam grup.
kotak centang mirip dengan tombol radio, tetapi pengguna
dapat memilih beberapa item dalam grup

Kontrol entri data ini dikembangkan untuk Apple Macintosh dan kemudian diadopsi oleh
Windows dan sistem operasi lainnya. Standar browser Web awal memiliki dukungan terbatas
untuk kontrol entri data, namun versi saat ini mendukung kontrol yang dijelaskan sebelumnya
dan banyak lainnya. Antarmuka iPhone dan Android mendukung kontrol serupa.
Formulir pada Gambar 7-9 dapat digunakan oleh karyawan RMO untuk mencari informasi
tentang suatu produk atau untuk mengubah informasi dalam katalog. Perhatikan bagaimana
judul dan label membuat formulir mudah dibaca. Aliran alami dari formulir adalah dari atas ke
bawah, dengan bidang terkait ditempatkan bersama. Tombol navigasi dan tutup mudah
ditemukan namun tidak menghalangi aktivitas entri data. Formulir menggunakan kontrol standar
Microsoft Windows, termasuk teks, daftar, dan kotak kombo. Meskipun tidak terlihat pada
gambar, formulir tersebut menyertakan fitur yang mengoptimalkannya untuk pengguna yang
sering menggunakannya, termasuk pintasan keyboard Windows standar, urutan tab dari atas
ke bawah dan dari kiri ke kanan, serta pelengkapan otomatis beberapa bidang berdasarkan
pencarian database dan patch untuk teks yang dimasukkan sebagian.
Kontrol Navigasi dan Dukungan

Antarmuka jendela standar menyediakan beberapa kontrol untuk navigasi dan manipulasi
jendela. Untuk aplikasi Microsoft, kontrol ini terdiri dari tombol Minimalkan, Maksimalkan, dan
Tutup di sudut kanan atas, bilah gulir horizontal dan vertikal, dan seterusnya (lihat Gambar 7-5
untuk contoh spesifik). Untuk menjaga konsistensi di seluruh aplikasi, sebaiknya gunakan
kontrol navigasi bawaan atau standar bila memungkinkan.
Pedoman Tambahan untuk Antarmuka Pengguna Peramban Web

Kebanyakan perancang antarmuka pengguna pertama-tama belajar mengembangkan
antarmuka berbasis Web yang beroperasi dalam browser Web, seperti Internet Explorer,
Mozilla, Chrome, atau Safari. Seiring dengan semakin matangnya teknologi dan standar
Web, perbedaan kemampuan antara antarmuka berbasis browser (misalnya, lihat
Gambar 7-11) dan antarmuka yang menggunakan pustaka dukungan sistem operasi
(misalnya, lihat Gambar 7-9) telah hilang. Dalam banyak hal, antarmuka berbasis
browser menjadi lebih canggih. Meskipun demikian, ada beberapa perbedaan yang
harus dipertimbangkan ketika mendesain halaman Web dan formulir berbasis browser.
Konsistensi
Konsistensi sangat penting dalam situs Web karena sebagian besar situs berisi halaman
dalam jumlah besar yang melayani berbagai tujuan dan audiens. Misalnya, situs Web
korporat pada umumnya menyediakan fungsi e-commerce (misalnya pemesanan online),
informasi kepada investor, direktori dan informasi kontak publik, serta informasi produk
seperti spesifikasi dan manual. Intinya, situs Web perusahaan adalah pintu gerbang ke
kumpulan besar sistem yang melayani banyak pengguna dan tugas berbeda. Meskipun
terdapat beragam pengguna dan tugas, situs secara keseluruhan merupakan sebuah
sistem tunggal yang harus mendukung satu tampilan dan nuansa serta harus
memproyeksikan citra yang konsisten, menarik, dan diinginkan bagi perusahaan secara keseluruha
Kebanyakan perusahaan menghabiskan banyak sumber daya untuk mengembangkan
dan memelihara halaman Web mereka dan memastikan konsistensi di antara halaman-
halaman tersebut. Dengan demikian, perancang antarmuka pengguna bagian tertentu
cascading style sheet (CSS) Standar pengkodean dari situs Web harus beroperasi dalam batasan desain perusahaan secara keseluruhan.
halaman web yang memungkinkan perancang Cascading style sheet (CSS) adalah standar pengkodean halaman Web, dan
situs Web menentukan bagian halaman yang akan
memungkinkan perancang situs Web menentukan bagian halaman yang akan selalu
selalu terlihat sama dan bagian yang berbeda
menurut tugas atau audiens
terlihat sama dan bagian yang berbeda menurut tugas atau audiens. Mereka juga dapat
membatasi pilihan dalam bagian “variabel” halaman, termasuk penempatan dan tampilan
toolbar dan menu, font, warna, dan gambar latar belakang.
Gambar 7-10 dan 7-11 menunjukkan halaman tambahan dari situs Web RMO yang
ditampilkan saat pelanggan mencari item dan menyelesaikan pesanan. Menu, garis besar
seputar konten detail, serta opsi warna dan font semuanya dibatasi oleh CSS. Saat
pengguna memilih item menu atau mengklik link atau kontrol, halaman yang ditampilkan
menggunakan kembali elemen ini untuk memastikan tampilan dan interaksi pengguna
yang konsisten.
GAMBAR 7-10
Halaman detail produk dari RMO
Situs web
GAMBAR 7-11
Halaman keranjang belanja dari RMO
Situs web
Pertimbangan Kinerja
Situs web pada umumnya dan bentuk berbasis browser pada khususnya sensitif terhadap
desain aplikasi dan kualitas koneksi jaringan antara perangkat komputasi pengguna dan server
yang menghosting situs tersebut. Ketika pengguna mengklik hyperlink atau kontrol yang
bertindak seperti hyperlink, browser mengirimkan informasi yang dimasukkan oleh pengguna
(jika ada) ke server Web, bersama dengan permintaan untuk halaman baru. Informasi tersebut
melintasi beberapa jaringan, diterima dan diproses oleh server, dan kemudian responsnya
(halaman baru yang akan ditampilkan) dikirim kembali melalui jaringan. Penundaan antara
mengklik hyperlink dan tampilan halaman yang diminta tergantung pada jumlah data yang akan
dikirim, tampilan dan kecepatan koneksi jaringan perangkat komputasi pengguna, kapasitas
jaringan yang membawa pesan, dan jumlah lainnya pengguna dan aplikasi yang bersaing untuk
mendapatkan kapasitas jaringan tersebut.
Ada trade-off antara jumlah informasi yang dikirimkan antara perangkat komputasi
pengguna dan server dan waktu yang diperlukan untuk menyegarkan halaman; semakin banyak
informasi yang dikirimkan, semakin lama penundaannya. Pertukaran ini sangat penting untuk
komunikasi melalui Internet, meskipun hal ini juga merupakan masalah yang signifikan dalam
jaringan perusahaan ketika desktop dan server pengguna berbagi koneksi berkecepatan tinggi.
Ada juga trade-off antara jumlah informasi dan lainnya

data yang terkandung dalam halaman Web dan kinerja aplikasi berbasis Web. Halaman
dengan konten informasi yang luas atau dengan pemrograman tertanam dapat menghindari
atau menunda penyegaran halaman. Misalnya, halaman yang berisi formulir pemesanan kosong
mungkin berukuran cukup kecil. Namun banyak penyegaran halaman akan diperlukan jika
browser harus berinteraksi dengan server untuk memvalidasi setiap masukan saat pengguna
memasukkannya. Jika halaman yang berisi formulir juga berisi program validasi tertanam, maka
banyak interaksi server dan penyegaran halaman dapat dihindari. Namun, pengunduhan awal
halaman akan memakan waktu lebih lama karena terdapat lebih banyak konten dan program
validasi mungkin lambat jika perangkat komputasi pengguna tidak terlalu kuat (misalnya, telepon
seluler yang relatif murah).
Perancang antarmuka pengguna berbasis Web harus melakukan tindakan penyeimbangan yang hati-hati,
memberikan “kecerdasan” yang tertanam dalam halaman untuk menghindari penyegaran tetapi tidak membebani
konten halaman secara berlebihan sehingga menghindari penundaan yang lama ketika pengguna berpindah
dari halaman ke halaman. Pengujian menyeluruh adalah cara terbaik untuk memastikan keseimbangan yang tepat
GAMBAR 7-12
Halaman beranda RMO, dengan tiga level menu
telah ditemukan. Misalnya, pada Gambar 7-12, halaman Web RMO mencakup daftar item menu
untuk masing-masing menu utama (misalnya, Belanja Pakaian) dan sub-menu (misalnya,
Pakaian Wanita). Saat pengguna menunjuk ke item menu, konten submenu muncul secara
otomatis tanpa memerlukan penyegaran halaman. Bandingkan ini dengan gaya menu yang
ditunjukkan pada Gambar 7-6(a), di mana pengguna harus mengklik item menu dan menunggu
halaman baru dengan menu tingkat berikutnya diunduh dan ditampilkan. Halaman RMO
membutuhkan waktu lebih lama untuk diunduh karena konten menu yang tertanam dan
pemrograman terkait, namun menghindari penyegaran halaman dan penundaan yang terkait
saat menampilkan submenu.
Gambar, Video, dan Suara

Antarmuka berbasis web sering kali lebih disukai karena kemampuannya yang melekat dalam
mencampur teks, gambar, dan suara. Antarmuka yang kuat dan menarik dapat dibangun, dan
ini sangat penting dalam sistem yang berhubungan dengan pelanggan. Namun, penggunaan
suara dan gambar yang berlebihan memperburuk masalah kinerja yang telah dibahas
sebelumnya dan juga menimbulkan masalah kompatibilitas. Implikasi kinerja paling signifikan
pada video dan gambar diam resolusi tinggi, yang menghabiskan kapasitas jaringan dalam
jumlah besar. Misalnya, gambar latar belakang pada Gambar 7-8 memerlukan beberapa ratus
kilobyte data yang diunduh untuk tampilan berkualitas tinggi di laptop atau komputer desktop.
Gambar yang lebih kecil dapat menggantikan layar ponsel yang lebih kecil.
Masalah kompatibilitas muncul untuk suara dan video karena ada begitu banyak cara
untuk mengkodekannya. Kebanyakan browser Web mengandalkan komponen tambahan
(terkadang disebut plug-in) untuk memutar suara dan musik serta untuk menampilkan video.
Sayangnya, semua plugin tidak berfungsi pada semua browser, khususnya versi browser lama.
Oleh karena itu, perancang situs Web harus hati-hati memilih format dan plug-in mana yang
akan digunakan. Dalam banyak kasus, desainer harus membuat halaman berbeda untuk plug-
in berbeda dan menulis program kompleks untuk menanyakan browser yang memiliki plug-in
sehingga halaman yang tepat dapat diunduh.
Pengguna Penyandang
Disabilitas Perancang semua antarmuka pengguna harus peka terhadap kebutuhan khusus
penyandang disabilitas. Karena Web merupakan sumber daya fundamental di dunia modern,
standar telah dikembangkan untuk memastikan kegunaan maksimal bagi mereka yang memiliki
gangguan penglihatan atau memiliki ketangkasan terbatas. Pengguna tunanetra biasanya
berinteraksi dengan halaman Web melalui perangkat lunak text-to-speech yang memeriksa konten
halaman web dan membacanya dengan lantang. Pengguna dengan ketangkasan terbatas sering kali
menggunakan perangkat lunak pengenalan suara untuk menavigasi elemen dalam halaman dan
melakukan tugas yang biasanya dilakukan dengan keyboard, mouse, atau layar sentuh. Kedua jenis
perangkat lunak teknologi bantu (seperti utilitas perangkat lunak tersebut merupakan contoh kelas perangkat lunak umum yang disebut teknologi bantu.
text-to-speech dan pengenalan suara) yang World Wide Web Consortium (W3C) adalah organisasi yang menetapkan standar untuk banyak
menyesuaikan antarmuka pengguna dengan
aspek Web, termasuk kompatibilitas dengan teknologi bantu. Pada bulan Juni 2010, mereka telah
kebutuhan khusus penyandang disabilitas
menerbitkan rancangan kerja Pedoman Aksesibilitas Agen Pengguna (UAAG), versi 2.0. Meskipun draf
tersebut belum menerima persetujuan akhir hingga tulisan ini dibuat, banyak organisasi menggunakan
pedomannya atau standar sebelumnya untuk memandu pengembangan antarmuka pengguna berbasis
Web mereka.
Pedoman Tambahan untuk Perangkat Genggam

Merancang antarmuka pengguna berbasis web dan aplikasi untuk perangkat genggam menghadirkan
tantangan desain tambahan, termasuk:
ÿ Ukuran layar kecil ÿ

Keyboard dan layar sentuh kecil ÿ Kapasitas
jaringan terbatas ÿ Pedoman dan
perangkat desain aplikasi
Pada tahun 2012, ukuran layar ponsel pada umumnya adalah sekitar 3,52,25 inci dan sekitar
480.320 piksel. Area layar kecil menyediakan ruang yang relatif terbatas untuk menampilkan konten.
Oleh karena itu, desainer harus mengurangi konten antarmuka pengguna untuk memastikan keterbacaan
dan menghindari kekacauan layar. Gambar 7-13 menunjukkan contoh halaman Web RMO seluler.
Dibandingkan dengan halaman Web yang lebih besar yang ditampilkan sebelumnya, halaman seluler
menghilangkan banyak elemen, termasuk semua gambar kecuali logo yang diperkecil. Konten tekstual
lainnya disingkat, dan perhatian khusus diberikan pada kontras dan tata letak untuk memastikan
keterbacaan maksimal.
Keyboard kecil dan layar sentuh juga memberikan kemampuan terbatas untuk input pengguna.
Antarmuka pengguna perangkat seluler harus menghindari input tekstual terperinci bila memungkinkan
dan harus menyediakan kontrol sentuh yang ditempatkan dengan baik dan mudah ditemukan. Di banyak
ponsel, kemampuan ucapan-ke-teks yang disediakan oleh sistem operasi ponsel dapat digunakan untuk
menyederhanakan entri data dan navigasi, meskipun kondisi teknologi ini masih relatif sering
menyebabkan kesalahan. Oleh karena itu, desainer tidak boleh terlalu bergantung pada pengenalan
suara dan harus memastikan bahwa kesalahan mudah dideteksi dan diperbaiki.
Pada tahun 2012, sebagian besar ponsel menyertakan konektivitas melalui jaringan ponsel dan
Wi-Fi. Sebagian besar jaringan telepon seluler saat ini, digambarkan sebagai jaringan ketiga-
GAMBAR 7-13
Tata letak halaman Web
RMO untuk ponsel
jaringan generasi (3G), pada awalnya dirancang untuk komunikasi suara, dengan komunikasi data
yang dicangkokkan sebagai renungan. Throughput untuk jaringan 3G biasanya tidak lebih dari
sepersepuluh throughput jaringan Wi-Fi.
Pada tahun 2010, penyebaran jaringan 4G dimulai di Amerika Serikat. Jaringan 4G meningkatkan
throughput data hingga kira-kira setara dengan Wi-Fi, meskipun banyak pengguna bersaing untuk
mendapatkan akses ke bandwidth tersebut.
Karena throughput data ponsel jauh lebih terbatas dibandingkan perangkat komputasi lainnya,
masalah kinerja yang dijelaskan sebelumnya menjadi kendala desain yang jauh lebih signifikan.
Ukuran halaman harus dibatasi untuk mencapai tingkat pengunduhan dan penyegaran halaman
yang dapat diterima. Grafik resolusi tinggi hanya digunakan ketika benar-benar diperlukan, dan video
yang memakan bandwidth biasanya dihindari sepenuhnya. Untuk situs Web seluler RMO, grafik
latar belakang sepenuhnya dihindari dan gambar beresolusi tinggi hanya digunakan ketika pelanggan
ingin melihat detail produk.
Beberapa organisasi menerapkan aplikasi yang dikembangkan secara khusus sehingga

pengguna dapat menginstalnya di perangkat seluler mereka. Aplikasi tersebut berjalan dalam sistem
operasi seluler, seperti iPhone OS, iPad OS, atau Google Android OS. Setiap OS menyediakan
perangkat untuk pengembang antarmuka pengguna dan serangkaian pedoman pengembangan
yang memastikan kompatibilitas maksimal antar aplikasi. Jika memungkinkan, pengembang
antarmuka pengguna harus menggunakan perangkat dan pedoman ini.
Mengidentifikasi Antarmuka Sistem Antarmuka pengguna
mencakup input dan output yang secara langsung melibatkan pengguna sistem. Namun ada
banyak antarmuka sistem lain yang memproses masukan, berinteraksi dengan sistem lain
secara real time, dan mendistribusikan keluaran dengan intervensi manusia yang minimal. Kami
mendefinisikan antarmuka sistem secara luas sebagai masukan atau keluaran apa pun dengan
sedikit atau tanpa campur tangan manusia. Termasuk dalam istilah ini adalah keluaran yang
ditampilkan dan dicetak untuk manusia, seperti pemberitahuan penagihan, laporan, formulir
cetak, dan keluaran elektronik ke sistem otomatis lainnya. Input yang otomatis atau berasal dari
perangkat yang bukan antarmuka pengguna juga disertakan. Misalnya, masukan dari pemindai
otomatis, pembaca kode batang, perangkat pengenalan karakter optik, dan sistem komputer
lainnya disertakan sebagai bagian dari antarmuka sistem.
Berbagai input dan output dalam sistem informasi diilustrasikan

pada Gambar 7-14 dan dijelaskan di sini: ÿ
Input dari dan output ke sistem lain—Ini adalah antarmuka langsung dengan sistem informasi lain,
biasanya diformat sebagai pesan jaringan.
Pertukaran data elektronik (EDI) dan banyak sistem berbasis web terintegrasi dengan
sistem lain melalui pesan langsung. Misalnya, dalam sistem manajemen rantai
pasokan terintegrasi RMO dan sistem dukungan pelanggannya, kedatangan barang
inventaris dari pemasok mungkin memicu pengiriman barang yang dipesan kembali ke
pelanggan.
ÿ Input dan output yang sangat otomatis—Ini ditangkap oleh perangkat
(seperti pemindai) atau dihasilkan oleh orang-orang yang memulai suatu proses yang
berlangsung tanpa campur tangan manusia lebih lanjut. Misalnya, suatu barang di
gudang mungkin melewati pemindai kode batang yang mencatat lokasinya saat barang
tersebut melintas di ban berjalan. Selain itu, laporan bulanan dapat dicetak dan dikirimkan
melalui sistem yang sangat otomatis yang menempatkan laporan di dalam amplop,
menerapkan perangko, memilahnya berdasarkan kode pos, dan mengelompokkannya
untuk dikirim ke kantor pos.
ÿ Input dan output ke database eksternal—Ini dapat memberikan input ke atau
menerima keluaran dari suatu sistem. Pesan EDI lebih umum digunakan, namun interaksi
langsung dengan database sistem lain mungkin lebih efisien. Misalnya, sistem pembelian RMO
dapat langsung menempatkan pesanan produk ke dalam database pemasok.
GAMBAR 7-14 Berbagai macam input dan output dalam suatu sistem informasi
Salah satu tantangan utama EDI adalah menentukan format transaksi. Misalnya,
General Motors—salah satu pengguna awal EDI—memiliki ribuan pemasok dan ribuan
jenis transaksi berbeda, masing-masing dalam format berbeda. Untuk lebih memperumit
situasi, masing-masing pemasok ini mungkin terhubung melalui EDI dengan puluhan
atau ratusan pelanggan, banyak di antaranya juga menggunakan EDI. Jadi, satu jenis
transaksi mungkin memiliki selusin atau lebih format yang ditentukan. Sangat mudah
untuk melihat mengapa pengaturan dan pemeliharaan sistem EDI sangat mahal.
Meski begitu, EDI jauh lebih efisien dan efektif dibandingkan transaksi kertas yang harus
dicetak dan dimasukkan kembali.
Bahasa Markup yang Dapat Diperluas Pesan EDI modern umumnya diformat dalam Extensible Markup Language (XML).
(XML) ekstensi HTML yang menyematkan struktur XML adalah perpanjangan dari HTML yang menyematkan struktur data yang dapat
data yang dapat mendefinisikan dirinya sendiri dalam
mendefinisikan dirinya sendiri dalam pesan tekstual. Jadi, transaksi yang berisi field data
pesan tekstual
dapat dikirim dengan kode XML untuk mendefinisikan arti dari field data tersebut. Banyak
sistem baru menggunakan XML untuk menyediakan antarmuka sistem-ke-sistem yang umum.
Gambar 7-15 mengilustrasikan transaksi XML sederhana yang dapat digunakan untuk
Urutan karakter tag XML (seperti <nama> dan </nama>)
yang menentukan awal, akhir, dan arti teks
mentransfer informasi pelanggan antar sistem. Data dikelilingi oleh tag XML, seperti
yang muncul di antara keduanya
<name> dan </name>, yang menentukan awal, akhir, dan arti teks yang muncul di antara
keduanya.
GAMBAR 7-15
Informasi pelanggan diformat sebagai pesan <catatan pelanggan>
XML <accountNumber>RMO10989</accountNumber>
<name>William Jones</name>
<billingAddress>
<street>Jalan Bundaran 120</street> <city>Los Angeles</
city> <state>CA</state> <zip>98115</
zip></billingAddress>
<alamat pengiriman>
<street>Jalan Bundaran 120</street> <city>Los Angeles</
city> <state>CA</state> <zip>98115</
zip></shippingAddress>
<dayPhone>215.767.2334</dayPhone>
<nightPhone>215.899.8763</nightPhone> </catatan
pelanggan>
XML disebut bahasa yang dapat diperluas karena pengguna dapat menentukan tag apa pun yang ingin
mereka gunakan. Untuk EDI berbasis XML, kedua sistem harus mengenali tag, namun setelah serangkaian
kode lengkap dibuat, transaksi dapat mencakup banyak format berbeda dan masih dapat dikenali dan
diproses. Banyak industri dan organisasi profesional memiliki komite standar yang menentukan tag yang
digunakan untuk EDI.
Merancang Input Sistem

Saat merancang masukan untuk suatu sistem, pengembang sistem harus fokus pada tiga hal
bidang:
ÿ Mengidentifikasi perangkat dan mekanisme yang akan digunakan untuk memasukkan input ÿ
Mengidentifikasi semua input sistem dan mengembangkan daftar dengan isi data
setiap
ÿ Menentukan jenis pengendalian apa yang diperlukan untuk setiap masukan sistem
Perangkat Input Otomatis Tujuan

utamanya adalah memasukkan atau memperbarui data bebas kesalahan ke dalam sistem. Istilah kuncinya
di sini adalah bebas dari kesalahan. Beberapa praktik baik yang dapat membantu mengurangi kesalahan
input: ÿ Gunakan perangkat elektronik dan entri otomatis bila memungkinkan. ÿ Sebisa
mungkin hindari keterlibatan manusia. ÿ Jika informasi tersedia dalam
bentuk elektronik, gunakanlah informasi tersebut daripada memasukkan kembali informasi tersebut. ÿ
Validasi dan perbaiki
informasi pada waktu dan lokasi yang dimasukkan.
Mengotomatiskan entri data dan menghindari keterlibatan manusia pada dasarnya adalah dua sisi
yang berbeda, meskipun penggunaan perangkat elektronik tidak secara otomatis menghindari keterlibatan
manusia. Ketika pengembang sistem berpikir secara hati-hati untuk meminimalkan masukan manusia dan
menggunakan media masukan elektronik, mereka dapat merancang sistem dengan bentuk masukan
elektronik yang lebih sedikit dan menghindari salah satu sumber kesalahan masukan yang paling umum:
kesalahan pengetikan oleh pengguna. Berikut adalah beberapa perangkat yang umum digunakan untuk
menghindari penekanan tombol oleh
manusia: ÿ Pembaca strip kartu magnetik

ÿ Pembaca kode batang
ÿ Pembaca dan pemindai pengenalan karakter optik ÿ Tag

identifikasi frekuensi radio ÿ Layar sentuh dan
perangkat ÿ Pena elektronik dan
permukaan tulisan ÿ Digitizer, seperti kamera
digital dan perangkat audio digital ÿ Perangkat lunak pengenalan ucapan
Prinsip pengurangan kesalahan berikutnya adalah menggunakan kembali informasi

yang telah diambil dalam bentuk otomatis bila memungkinkan. Misalnya, pertimbangkan
proses check-in maskapai penerbangan otomatis untuk pelanggan tanpa bagasi terdaftar.
Pelanggan menggesek kartu kredit atau SIM, dan sistem menanyakan databasenya sendiri atau
database eksternal untuk mengidentifikasi pelanggan dan mengambil informasi reservasi. Informasi
yang diambil ditampilkan kepada pelanggan untuk konfirmasi. Karena informasi yang diambil hampir
selalu benar, tugas entri data dikurangi menjadi hanya menggesek kartu dan menekan tombol pada
layar sentuh, menghilangkan entri data manual dan tingkat kesalahan yang terkait. Jika data yang
ditampilkan salah, prinsip akhir pengurangan kesalahan diterapkan dengan meminta pelanggan
langsung memasukkan data yang diperbaiki.
Mendefinisikan Rincian Input Sistem Pendekatan

mendasar yang digunakan analis untuk mengidentifikasi input pengguna dan sistem
adalah dengan mencari dokumen yang dikembangkan selama aktivitas analisis untuk
arus informasi yang melintasi batas sistem. Analis memeriksa diagram urutan sistem
untuk mengidentifikasi pesan masuk dan keluar untuk setiap aktivitas atau kasus
penggunaan, dan diagram kelas desain untuk mengidentifikasi dan mendeskripsikan data
isi.
Gambar 7-16 adalah diagram urutan sistem parsial untuk versi sistem
penggajian berorientasi objek. Berbagai kasus penggunaan telah digabungkan
untuk mengkonsolidasikan masukan utama pada satu diagram. Pesan yang
melintasi batas sistem mengidentifikasi masukan—masukan sistem dan masukan
antarmuka pengguna. Tiga
input melintasi batas sistem: ÿ updateEmployee
(empID, empInformation) ÿ updateTaxRate (taxTableID,
rateID, rateInformation) ÿ inputTimeCard (empID, tanggal, jam)
Masukan pertama adalah bagian dari antarmuka pengguna. Dua masukan
lainnya berasal dari sistem eksternal dan tidak memerlukan keterlibatan
pengguna. Informasi dari biro pajak dapat dikirim sebagai sekumpulan pesan
real-time atau dalam bentuk file masukan yang diunduh. Informasi kartu waktu
dapat masuk ke sistem dalam berbagai format. Mungkin kartu waktu fisik
dimasukkan melalui pembaca kartu elektronik. Atau masukan dari subsistem,
seperti pembaca kartu ID karyawan elektronik, mungkin mengirimkan informasi
kartu waktu pada akhir setiap hari kerja. Dua pesan masukan terakhir ini perlu
didefinisikan secara tepat, termasuk metode transmisi, isi, dan formatnya. Hal
yang perlu diperhatikan di sini adalah bahwa diagram urutan memberikan
perspektif rinci tentang masukan pengguna dan sistem untuk mendukung kasus penggun
acara ness.
Merancang Keluaran Sistem Tujuan utama keluaran sistem
adalah menyajikan informasi di tempat yang tepat dan waktu yang tepat kepada orang yang tepat.
Tugas dalam kegiatan ini fokus pada empat bidang:
ÿ Menentukan jenis setiap keluaran sistem ÿ Membuat

daftar keluaran sistem yang dibutuhkan berdasarkan desain aplikasi
GAMBAR 7-16
Diagram urutan sistem parsial untuk kasus
penggunaan sistem penggajian
:Sistem
Pengelola
perbaruiEmployee (empID, empInformation)
Sistem Biro Pajak
Karyawan
*perbaruiTaxRate (taxTableID, rateID, rateInformation)
Sistem Kartu Waktu
*masuk (waktu)
*keluar (waktu)
*inputTimeCard (empID, tanggal, jam)
ÿ Menentukan pengendalian yang diperlukan untuk melindungi informasi yang disediakan dalam
keluaran
ÿ Merancang dan membuat prototipe tata letak keluaran
Tujuan dari dua tugas pertama adalah untuk mengevaluasi berbagai alternatif dan merancang
pendekatan yang paling tepat untuk setiap keluaran yang dibutuhkan. Daftar keluaran sistem yang
diperlukan biasanya ditentukan selama kegiatan analisis sebagai bagian dari pemodelan persyaratan
sistem. Selama desain, tugasnya adalah mengoordinasikan produksi keluaran tersebut dengan metode
yang diidentifikasi selama desain arsitektur aplikasi.
Tugas ketiga memastikan bahwa perancang mengevaluasi nilai informasi bagi organisasi dan
melindunginya. Seringkali, organisasi menerapkan kontrol pada input dan akses sistem tetapi lupa
bahwa laporan output sering kali memiliki informasi sensitif.
Seperti halnya masukan sistem, keluaran ditunjukkan oleh pesan dalam diagram berurutan yang
melintasi batas sistem—berasal dari objek sistem internal dan mengalir ke aktor eksternal. Pesan
keluaran yang didasarkan pada objek (atau catatan) individual biasanya merupakan bagian dari metode
kelas objek tersebut. Untuk melaporkan semua objek dalam suatu kelas, metode tingkat kelas
digunakan. Metode tingkat kelas adalah metode yang bekerja pada seluruh objek kelas, bukan objek
tunggal. Misalnya, konfirmasi pelanggan atas suatu pesanan adalah pesan keluaran yang berisi
informasi untuk satu objek pesanan. Namun, untuk menghasilkan laporan ringkasan semua pesanan
dalam seminggu, metode tingkat kelas melihat semua pesanan di kelas Pesanan dan mengirimkan
informasi keluaran untuk masing-masing pesanan dengan tanggal pesanan dalam periode waktu minggu
tersebut.
Merancang Laporan, Pernyataan, dan Dokumen Penyelesaian Sistem

informasi modern telah membuat informasi tersedia lebih luas, dengan
menjamurnya semua jenis laporan—baik dalam bentuk kertas maupun elektronik.
Salah satu tantangan besar yang dihadapi organisasi saat ini adalah mengatur jumlah informasi
yang sangat banyak untuk mendukung pengambilan keputusan manajerial. Salah satu aspek
tersulit dalam desain keluaran adalah memutuskan informasi apa yang harus disediakan dan
bagaimana menyajikannya untuk menghindari banyaknya data kompleks yang membingungkan.
Jenis Laporan
Ada empat jenis laporan keluaran yang biasa disediakan oleh sistem informasi:
laporan rinci laporan yang berisi informasi spesifik ÿ Laporan terperinci—Laporan ini berisi informasi spesifik mengenai bisnis
tentang transaksi bisnis transaksi—misalnya, daftar semua rekening yang telah jatuh tempo, dengan setiap baris
laporan menyajikan informasi tentang rekening tertentu. Manajer kredit dapat
menggunakan laporan ini untuk meneliti rekening yang telah jatuh tempo dan menentukan
tindakan untuk menagih jumlah yang telah
laporan ringkasan laporan yang merangkum rincian jatuh tempo. ÿ Laporan ringkasan—Laporan ini sering digunakan untuk merekap aktivitas berkala. Sebuah
atau merekap aktivitas berkala contohnya adalah ringkasan harian atau mingguan seluruh transaksi penjualan, dengan
jumlah total penjualan dalam dolar. Manajer sering menggunakan jenis laporan ini untuk
melacak kinerja departemen atau divisi.
laporan pengecualian laporan yang memberikan rincian ÿ Laporan pengecualian—Laporan ini memberikan rincian atau ringkasan informasi tentang
atau ringkasan informasi tentang transaksi atau hasil
transaksi atau hasil operasi yang berada di luar kisaran nilai normal yang telah ditentukan
operasi yang berada di luar kisaran nilai normal yang
sebelumnya. Ketika bisnis berjalan normal, tidak diperlukan laporan. Misalnya, sebuah
telah ditentukan sebelumnya
organisasi manufaktur mungkin menghasilkan laporan yang berisi daftar suku cadang
yang gagal dalam uji kendali mutu lebih dari 0,2 persen.
laporan eksekutif laporan yang digunakan oleh manajer ÿ Laporan eksekutif—Laporan ini digunakan oleh manajer tingkat tinggi untuk menilai kesehatan
tingkat tinggi untuk menilai kesehatan dan kinerja dan kinerja organisasi secara keseluruhan. Dengan demikian, mereka berisi ringkasan
organisasi secara keseluruhan
informasi dari aktivitas dalam perusahaan. Mereka mungkin juga menunjukkan kinerja
komparatif dengan rata-rata industri secara keseluruhan. Dengan menggunakan laporan ini,
para eksekutif dapat menilai kekuatan atau kelemahan kompetitif perusahaan mereka.
Keluaran Internal versus Keluaran

Keluaran yang dicetak diklasifikasikan menjadi keluaran internal atau keluaran eksternal.
laporan keluaran internal atau keluaran lain yang Output internal diproduksi untuk digunakan dalam organisasi. Jenis laporan yang baru saja dibahas
dihasilkan untuk digunakan dalam organisasi termasuk dalam kategori ini. Keluaran eksternal mencakup pernyataan, pemberitahuan, dan
laporan keluaran eksternal atau keluaran lain yang
dokumen lain yang dibuat untuk orang-orang di luar organisasi. Karena merupakan dokumen bisnis
dihasilkan untuk digunakan oleh orang-orang di luar resmi untuk audiens luar, dokumen tersebut harus diproduksi dengan grafis dan warna berkualitas
organisasi tertinggi.
Contohnya termasuk laporan bank bulanan, pemberitahuan keterlambatan, konfirmasi pesanan
dan slip pengepakan (seperti yang diberikan kepada pelanggan Ridgeline Mountain Outfitters),
dan dokumen hukum (seperti polis asuransi). Beberapa keluaran eksternal disebut sebagai
turnaround mendokumentasikan keluaran eksternal dokumen turnaround karena dikirim ke pelanggan tetapi mencakup bagian sobek yang dikembalikan
yang mencakup satu atau lebih bagian yang dimaksudkan untuk dimasukkan kemudian, seperti tagihan yang berisi bukti pembayaran yang akan dikembalikan
untuk dikembalikan dengan data atau informasi baru
dengan cek. Semua hasil cetakan ini harus dirancang dengan hati-hati, namun organisasi
mempunyai lebih banyak pilihan untuk hasil cetakan. Printer laser warna berkecepatan tinggi saat
ini memungkinkan semua jenis laporan dan keluaran lainnya diproduksi.
Contoh laporan rinci untuk keluaran eksternal ditunjukkan pada Gambar 7-17. Ketika
pelanggan melakukan pemesanan di Web, sistem akan dapat mencetak informasi pesanan
sebagai konfirmasi. Tentu saja, pengguna selalu dapat mencetak tampilan layar Web dengan
menggunakan kemampuan cetak browser, namun hal ini memakan waktu karena mencakup
semua gambar dan
GAMBAR 7-17 Laporan pesanan keranjang belanja RMO
Ridgeline Mountain Outfitters—Pesanan Keranjang Belanja
Nama Pelanggan: Fred Westing Nomor Pesanan: 4673064

Nomor Pelanggan: 6747222 Tanggal Hari Ini: 18 Mei 2013
Alamat pengiriman: Alamat tagihan:
Jalan Putar 936 N Jalan Putar 936 N

Hillville, Ohio 59222 Hillville, Ohio 59222
Diperpanjang
Jumlah
ID Produk Keterangan Ukuran Warna Harga Harga
1 458238WL Tim Jumpman Putra Jordan J 12 Putih/Biru Muda $119,99 $119,99
1 347827OP Kemeja Backpacker Pria Woolrich XL Kotak-kotak Oatmeal $41,99 $41,99
2 8759425SH Nike DRI – Kemeja Pas M Hitam $30,00 $60,00
1 5858642ATAU Celana Pendek Mendaki Puma L Tan $15,00 $15,00
Subtotal $236,98
Pengiriman $8,50
Pajak $11,25
Pengiriman Informasi: Informasi Pembayaran:
Total $256,73
Metode pengiriman: Biasa 7–10 hari American Express MasterCard VISA X Menemukan
Perusahaan perkapalan: UPS Nomor akun
Melacak nomor: Untuk dikirim melalui email

XXXX – XXXX – XXXX – 5 7 8 4 MO TAHUN
Alamat email: FredW253@aol.com
05/15
Tanggal habis tempo
Terima kasih atas pesanan Anda. Senang melayani Anda.

Periksa kembali minggu depan untuk spesial mingguan baru!!
tautan indeks pada halaman. Akan jauh lebih ramah pengguna jika menyediakan konfirmasi
pesanan yang “ramah printer” kepada pembeli selain tampilan berbasis Web, seperti
yang ditunjukkan pada Gambar 7-11.
Gambar 7-18 adalah contoh keluaran internal berdasarkan catatan persediaan.
Laporan tersebut mencakup bagian detail dan ringkasan, meskipun gambar tersebut tidak
menampilkan bagian ringkasan. Jeda kontrol adalah item data yang membagi bagian
detail menjadi beberapa kelompok. Dalam contoh ini, jeda kontrol ada pada nomor item
produk—disebut ID pada laporan. Setiap kali nilai ID baru ditemukan pada catatan
masukan, laporan memulai bagian pemutusan kontrol baru. Bagian rinci mencantumkan
transaksi catatan dari database, dan bagian ringkasan memberikan total dan rekap
informasi. Laporan diurutkan dan disajikan berdasarkan produk. Namun, di dalam setiap
produk terdapat daftar setiap item inventaris yang menunjukkan jumlah yang ada saat ini.
Keluaran eksternal dapat terdiri dari dokumen multi-halaman yang kompleks. Contoh
yang terkenal adalah kumpulan laporan dan pernyataan yang Anda terima bersama
laporan asuransi mobil Anda. Pernyataan ini biasanya berupa dokumen multi halaman
yang terdiri dari informasi dan tarif asuransi mobil terperinci, halaman ringkasan, kartu
pembayaran premi turnaround, dan kartu asuransi untuk setiap mobil. Contoh lainnya
adalah laporan tunjangan kerja, dengan beberapa halaman informasi yang disesuaikan
dengan masing-masing karyawan. Terkadang, dokumen dicetak berwarna, dengan
highlight atau logo khusus. Gambar 7-19 adalah salah satu halaman contoh laporan
perlindungan korban dari buku tunjangan karyawan. Teksnya adalah kata-kata standar,
dan angka-angkanya disesuaikan dengan masing-masing karyawan.
GAMBAR 7-18 Laporan inventaris RMO
Ridgeline Mountain Outfitters — Produk dan Barang
PENGENAL Musim Kategori Harga Satuan Pemasok Harga Khusus Dihentikan $39,00 $34,95
RMO12587 Musim Semi/Musim Gugur Pria C 8201 TIDAK
Deskripsi Jaket Nilon Luar Ruangan dengan Lapisan
Ukuran Warna Gaya Unit dalam Stok Tingkat Penyusunan Ulang Unit Sesuai Pesanan
Kecil Biru 691 150
Hijau 723 150
Merah 569 150
Kuning 827 150
Sedang Biru 722 150
Hijau 756 150
Merah 698 150
Kuning 590 150
Besar Biru 1289 150
Hijau 1455 150
Merah 1329 150
Kuning 1370 150
Xbesar Biru 1498 150
Hijau 1248 150
Merah 1266 150
Kuning 1322 150
PENGENAL Musim Kategori Harga Satuan Pemasok Harga Khusus Dihentikan

RMO28497 Semua kaki kita 7993 $49,95 $44,89 TIDAK
Deskripsi Pejalan Kaki Mendaki dengan Tapak Bermotif Bagian Atas yang Tahan Lama
Ukuran Warna Gaya Unit dalam Stok Tingkat Penyusunan Ulang Unit Sesuai Pesanan
7 Cokelat 389 100

Tan 422 100
8 Cokelat 597 100
Tan 521 100
9 Cokelat 633 100
Tan 654 100
10 Cokelat 836 100
Tan 954 100
11 Cokelat 862 100
Tan 792 100
12 Cokelat 754 100
Tan 788 100
13 Cokelat 830 100
Tan 921 100
Laporan Elektronik
Organisasi menggunakan berbagai jenis laporan elektronik, masing-masing memiliki
tujuan berbeda dan masing-masing memiliki kekuatan dan kelemahannya masing-
masing. Laporan elektronik memberikan fleksibilitas besar dalam pengorganisasian
dan penyajian informasi. Dalam beberapa kasus, keluaran layar diformat seperti laporan
tercetak tetapi ditampilkan secara elektronik. Namun, laporan elektronik juga dapat
menyajikan informasi dalam berbagai format lainnya. Beberapa memiliki bagian detail
dan ringkasan, beberapa menampilkan data dan grafik secara bersamaan, yang lain
berisi huruf tebal dan penyorotan, yang lain dapat mengubah organisasi dan
ringkasannya secara dinamis, dan yang lainnya berisi hotlink ke informasi terkait.
Manfaat penting dari pelaporan elektronik adalah sifatnya yang dinamis; itu dapat
berubah untuk memenuhi kebutuhan spesifik pengguna dalam situasi tertentu. Faktanya, banyak
GAMBAR 7-19 Contoh laporan imbalan kerja
kemampuan pelaporan ad hoc sehingga pengguna dapat merancang laporan mereka sendiri dengan cepat.
Misalnya, laporan elektronik dapat memberikan link ke informasi lebih lanjut.
menelusuri teknik desain antarmuka pengguna Salah satu teknik, yang disebut penelusuran, memungkinkan pengguna untuk mengaktifkan “hot spot
yang memungkinkan pengguna memilih hyperlink” pada laporan, yang memberitahu sistem untuk menampilkan laporan tingkat rendah yang
ringkasan informasi dan melihat detail pendukung
memberikan informasi lebih rinci. Misalnya, Gambar 7-20 berisi ringkasan penjualan bulanan. Laporan
tersebut memberikan total penjualan yang dikelompokkan berdasarkan kategori produk dan musim. Namun,
jika pengguna mengklik hotlink untuk musim apa pun, laporan terperinci akan muncul dengan data penjualan
yang lebih rinci.
Variasi lain dari kemampuan hotlink ini memungkinkan pengguna mengkorelasikan informasi dari
satu laporan ke informasi terkait di laporan lain. Kebanyakan orang akrab dengan hotlink dari browser
Internet mereka. Dalam laporan elektronik, hotlink dapat merujuk ke informasi lain yang berkorelasi atau
memperluas informasi utama. Kemampuan yang sama ini bisa sangat berguna dalam laporan bisnis yang,
misalnya, menghubungkan laporan tahunan perusahaan-perusahaan penting di industri tertentu.
Aspek dinamis lainnya dari laporan elektronik adalah kemampuan untuk melihat data dari sudut
pandang yang berbeda. Misalnya, mungkin bermanfaat untuk melihat data komisi penjualan berdasarkan
wilayah, manajer penjualan, lini produk, atau periode waktu
GAMBAR 7-20 Laporan ringkasan RMO dengan penelusuran hingga laporan terperinci
Ringkasan Penjualan Bulanan
Tahun 2013 Bulan Januari
Kategori Musim jaring Surat Telepon Total

Kode Penjualan Penjualan Penjualan Penjualan
Alas kaki Semua $289.323 $1.347.878 $540.883 $2.178.084
Pakaian Pria Musim Semi $ 1.768.454 $ 2.879.243 $ 437.874 213.938 $4.691.484

Musim panas 387.121 123.590 142.823 129.873 112.234 724.649
Jatuh 2.980.489 6.453.896 675.290 1.839.729 384.930
Musim dingin 4.897, 235 349.234 $6.945.433 $14.747.368 10.109.675
Semua $1.698.222 7.086.198
Total $23.391.023
Wanita Musim semi 387.432 $ 454.329 $ 123.849 89.322 187.987 965.610

Pakaian Musim panas 34.879 78.398 99.873 56.890 782.982 312.188
Jatuh 782.982 899.490 899.490 278.389 278.389 235.161
Musim dingin 778,39
4 778.394 678.987328.122
678.987328.122 $2.116.528 1.960.861
Semua $
2.320.666 $ 822.129
116.528 $ 2.320.666
822.129
$ 1.785.503
Total $3.359.323
$ 3.359.323
Detail Penjualan Bulanan
Tahun 2013 Bulan Januari Kategori Pakaian Pria Musim Dingin
Produk Produk jaring Telepon Surat Total

PENGENAL
Keterangan Penjualan Penjualan Penjualan Penjualan
RMO12987 Jaket Musim Dingin $1.490.245 $3.226.948 $337.640 $5.054.833

Sarung Tangan Berlapis Bulu RMO13788 149.022 322.695 33.765 505.482
Sweater Wol RMO23788 596.097 1.290.775 135.058 2.021.930
Celana Dalam Panjang RMO12980 298.050 645.339 68.556 1.003.005
Jaket Berlapis Bulu RMO32998 447.075 1.258.079 100.271 1.805.425
Total $2.980.489 $6.743.836 $675.290 $10.394.615
atau membandingkan data saat ini dengan data musim lalu. Daripada mencetak semuanya
laporan ini, Anda dapat menggunakan format elektronik untuk menghasilkan tampilan berbeda
diperlukan. Terkadang, laporan yang panjang atau rumit menyertakan daftar isi, dengan
hotlink ke berbagai bagian laporan. Beberapa program penghasil laporan
menyediakan kemampuan pelaporan elektronik yang mencakup semua fungsi yang ditemukan
pada halaman Web, termasuk frame, hotlink, grafik, dan bahkan animasi.
Presentasi Grafis dan Multimedia

Penyajian data secara grafis adalah salah satu manfaat terbesar dari era informasi. Alat yang
memungkinkan data disajikan dalam bagan dan grafik telah dibuat
pelaporan informasi jauh lebih ramah pengguna untuk format cetak dan elektronik. Informasi
semakin banyak digunakan untuk pengambilan keputusan strategis
pebisnis memeriksa data mereka untuk mengetahui tren dan perubahan. Selain itu, hari ini
sistem sering kali menyimpan data dalam jumlah besar—lebih banyak daripada manusia
dapat meninjau. Satu-satunya cara efektif untuk menggunakan sebagian besar data ini adalah dengan membuat ringkasan
dan menyajikannya dalam bentuk grafik. Gambar 7-21 menyajikan diagram lingkaran dan batang
grafik—dua cara umum untuk menyajikan data ringkasan.
Output multimedia baru-baru ini tersedia sebagai alat multimedia
kemampuan telah meningkat. Saat ini, kita dapat melihat presentasi informasi secara grafis
(mungkin dalam bentuk animasi) di layar dan mendapatkan deskripsi audio mengenai poin-poin
penting. Menggabungkan output visual dan audio adalah cara yang ampuh
untuk menyajikan informasi. (Tentu saja, video game mendorong batas realitas virtual dengan
menyertakan keluaran visual, audio, sentuhan, dan penciuman.)
GAMBAR 7-21 Contoh diagram lingkaran dan laporan grafik batang
Penjualan Pakaian Pria - Januari 2013
Penjualan Web
Penjualan Telepon
Penjualan Toko
Penjualan Pakaian Pria Berdasarkan Musim - Januari 2013
7.000.000
6.000.000
5.000.000
Penjualan Web
4.000.000
Penjualan Telepon
3.000.000
Penjualan Toko
2.000.000
1.000.000
0
Musim Semi Musim Panas Musim Gugur Musim dingin
Seiring dengan kemajuan desain keluaran sistem, akan bermanfaat untuk mengevaluasi
berbagai alternatif presentasi. Paket pelaporan dapat diintegrasikan ke dalam sistem untuk
memberikan alternatif pelaporan yang lengkap. Pengembang harus menganalisis dengan cermat
setiap laporan keluaran untuk menentukan tujuan keluaran dan memilih bentuk keluaran yang
paling sesuai dengan informasi dan penggunaannya.
Ringkasan Bab Input dan output
dapat diklasifikasikan sebagai antarmuka sistem atau antarmuka kontrol input, navigasi, dan bantuan. Pedoman ini berlaku untuk
pengguna. Antarmuka pengguna adalah segala sesuatu yang formulir windows dan formulir browser yang digunakan dalam sistem
berhubungan dengan pengguna saat menggunakan sistem—secara berbasis web. Merancang dialog untuk situs Web mirip dengan
fisik, persepsi, dan konseptual. Ada banyak cara berbeda untuk membuat dialog lainnya, kecuali pengguna memerlukan lebih
mendeskripsikan antarmuka pengguna, termasuk metafora desktop, banyak informasi dan lebih banyak fleksibilitas. Pedoman desain
metafora dokumen, dan metafora dialog. Desain dialog dimulai Web tambahan berlaku untuk mendesain media komputer,
dengan mengidentifikasi dialog berdasarkan aktivitas atau kasus mendesain keseluruhan situs, dan mendesain untuk pengguna.
penggunaan. Storyboard yang memperlihatkan sketsa layar secara Selain itu, karena situs Web mencerminkan citra perusahaan di
berurutan dapat digambar untuk menyampaikan desain untuk mata pelanggan, desainer grafis dan profesional pemasaran harus
ditinjau oleh pengguna, atau prototipe dapat dibuat menggunakan dilibatkan.
alat seperti Visual Basic. Pendekatan berorientasi objek menyediakan Saat merancang masukan sistem, pengembang mengidentifikasi
model UML yang dapat mendokumentasikan desain dialog, termasuk perangkat masukan dan mengidentifikasi semua masukan sistem
diagram urutan, diagram aktivitas, dan diagram kelas. dan membuat daftar konten data masing-masing. Untuk
mengembangkan daftar masukan ke sistem, perancang
Setiap layar dan formulir yang digunakan dalam dialog perlu menggunakan diagram urutan dan desain kelas. Proses merancang
dirancang, dan ada pedoman untuk tata letak, pemilihan keluaran dari sistem terdiri dari langkah-langkah yang sama seperti merancang
Istilah-Istilah Utama
keterjangkauan 193 interaksi manusia-komputer (HCI) 193 keluaran internal

teknologi bantu 207 cascading style 213
sheet (CSS) 204 kotak centang 203 kotak daftar 202
metafora 191
kotak kombo 203 tombol radio 203
metafora desktop 191 laporan storyboard 200 laporan

terperinci 213 metafora dialog ringkasan 213 antarmuka
191 metafora manipulasi sistem 189
langsung 191 metafora dokumen 191 kotak teks 202
dokumen penyelesaian 213
menelusuri 216 kegunaan 190
laporan pengecualian 213 antarmuka pengguna 189
laporan eksekutif 213 desain yang berpusat pada pengguna

Extensible Markup Language (XML) 209 keluaran 189 visibilitas 193
eksternal 213 Tag XML 209
Tinjau Pertanyaan
1. Mengapa desain antarmuka sering disebut dialog 9. Diagram UML apa yang dapat digunakan untuk menunjukkan
desain? bagaimana objek antarmuka dihubungkan antara aktor dan
2. Apa tiga aspek sistem yang membentuk antarmuka pengguna kelas domain masalah selama dialog?
bagi pengguna? 10. Apa sajakah kontrol masukan yang dapat digunakan untuk
memilih item dari daftar?
3. Apa saja contoh aspek fisik, persepsi, dan konseptual
antarmuka pengguna? 11. Dua jenis pengendalian masukan apa yang termasuk dalam kelompok?
4. Apa tiga metafora yang digunakan untuk menggambarkan 12. Analogi populer apa yang digunakan untuk akses pelanggan
interaksi manusia-komputer? langsung ke situs Web ketika pelanggan berbelanja online?
5. Desktop di layar merupakan contoh manakah dari tiga metafora 13. Apa kepanjangan dari XML? Jelaskan bagaimana XML mirip
yang digunakan untuk menggambarkan interaksi dengan HTML. Diskusikan juga perbedaan XML dan
manusia-komputer? HTML.
6. Jenis dokumen apa yang memungkinkan pengguna mengklik 14. Bagaimana Anda mengidentifikasi bidang data antarmuka
link dan melompat ke bagian lain dari dokumen? sistem dengan menggunakan UML dan pendekatan
berorientasi objek?
7. Sebutkan dan jelaskan secara singkat empat pedoman tata letak
dan pemformatan antarmuka yang berlaku untuk semua jenis 15. Apa saja pertimbangan berbeda untuk desain layar keluaran
tampilan pengguna dan perangkat input. Garis panduan dan desain laporan keluaran?
tambahan apa yang berlaku untuk situs/halaman Web dan 16. Apa yang dimaksud dengan penelusuran? Berikan contoh bagaimana
antarmuka pengguna untuk perangkat komputasi seluler? Anda dapat menggunakannya dalam desain laporan.
8. Teknik apa yang menampilkan rangkaian sketsa tampilan 17. Apa bahaya dari informasi yang berlebihan?
layar saat berdialog? Solusi apa yang dapat Anda pikirkan untuk menghindarinya?
Soal dan Latihan

1. Pikirkan semua perangkat lunak yang Anda gunakan. Apa saja jelas? Diskusikan beberapa perbedaan dalam visibilitas dan
contoh kemudahan belajar yang bertentangan dengan keterjangkauan antar kontrol.
kemudahan penggunaan?
3. Pepatah umum dalam merancang antarmuka manusia-mesin
2. Kunjungi beberapa situs Web dan kemudian identifikasi semua adalah lebih baik mengganti mesin daripada mencoba
kontrol yang digunakan untuk navigasi dan input. Apakah semuanya? mengubah manusia untuk mengakomodasi
mesin. Apakah ada mesin (atau sistem) yang tidak fleksibel? Dalam hal apa informasi diperlukan tidak
Anda gunakan dalam kehidupan sehari-hari yang memiliki ruang untuk tersedia? Apakah terlalu banyak informasi yang diberikan itu
peningkatan? Apakah generasi saat ini mengalihkan perhatian dari tugas yang ada?
PC Windows dan Apple Mac dapat digunakan sebagaimana mestinya 6. Evaluasi sistem katalog online di perpustakaan universitas anda.
mungkin? Jika tidak, perbaikan apa yang bisa Anda sarankan? Tulis dialog yang menunjukkan interaksi antara pengguna dan
Apakah World Wide Web dapat digunakan semaksimal mungkin sistem. Tulis ulang
menjadi? Jika tidak, perbaikan apa yang bisa Anda sarankan? Adalah dialog untuk memperbaikinya. Buat papan cerita untuk ditampilkan
kami baru mulai melihat beberapa terobosan bagaimana desain Anda akan terlihat dan terasa.
kegunaan, atau memiliki sebagian besar peningkatan besar
7. Temukan situs Web dengan pemesanan pelanggan langsung. Jelajahi
sudah dibuat?
melalui beberapa deskripsi produk dan perhatikan
4. Unduh dan instal App Inventor dari Google. desain dialog dan halaman Web. Apa yang kamu
Gunakan ini untuk mengembangkan antarmuka prototipe yang suka dan tidak suka tentang desainnya? Evaluasi Web
mengimplementasikan storyboard pada Gambar 7-7. situs berdasarkan visibilitas dan keterjangkauan. Apakah situsnya
5. Evaluasi sistem pendaftaran kursus di Anda mencapai keseimbangan optimal antara jumlah
Universitas. Buat daftar langkah-langkah dasar dialog pengguna penyegaran halaman dan penundaan antara penyegaran halaman?
dengan sistem. Apa sajakah masalahnya Apakah jawaban Anda akan berubah jika Anda menggunakan a
dengan sistem dari sudut pandang kemudahan perangkat komputasi yang berbeda, jaringan yang berbeda, atau
pembelajaran dan kemudahan penggunaan? Dalam hal apa sistemnya mengakses sistem pada waktu yang berbeda?
Studi kasus
Layanan Penyewaan Video

kedua dirilis pada tahun 1997 dan dibintangi
Kembangkan storyboard yang mencakup hal-hal berikut Leonardo DiCaprio dan Kate Winslet. Yang
contoh dialog. Sistem mendukung penyewaan dan pengunduhan apakah kamu ingin menyewa?
film atau acara televisi ke komputer atau digital
PENGGUNA: Keduanya.
perangkat perekaman dan pemutaran video. Dialog antara
SISTEM: Bagus. Yaitu Titanic (rilis tahun 1953) dengan a
sistem dan pengguna mungkin mengikuti pola ini:
biaya sewa $2,99 selama tujuh hari dan
SISTEM: Apa yang ingin kamu lakukan? Titanic (rilis tahun 1997) dengan biaya sewa
PENGGUNA: Saya ingin menyewa film. sebesar $5,99 selama tujuh hari. Apakah Anda mau
menambahkan lebih banyak sewa?
SISTEM: Oke. Apa alamat email Anda atau
nomor akun? PENGGUNA: Itu saja.
SISTEM: Oke. Total biayanya adalah $8,98. Haruskah saya

PENGGUNA: Alamat email saya adalah nwells22@gmail.com.
membebankan jumlah tersebut ke file kartu kredit Anda
SISTEM: Bagus. Anda adalah Nancy Wells di 1122
(Visa dengan nomor rekening berakhiran
Jalan Silikon. Benar?
0899)?
PENGGUNA: Ya.
PENGGUNA: Ya.
SISTEM: Film apa yang ingin Anda sewa?
SISTEM: Film Anda sedang diunduh ke
PENGGUNA: Raksasa.
komputer sekarang. Mereka akan kedaluwarsa pada tengah malam
SISTEM: Saya memiliki dua film yang tersedia bernama Titanic. tujuh hari dari sekarang.
Yang pertama dirilis pada tahun 1953 dan dibintangi
PENGGUNA: Oke. Terima kasih.
Barbara Stanwyck dan Clifton Webb. Itu
MENJALANKAN STUDI KASUS
Dewan Komunitas Realtors
Salah satu kasus penggunaan utama untuk sistem layanan beberapa Pertimbangkan informasi yang harus dimasukkan saat membuat
listingan adalah Buat listingan baru, di mana makelar barang tak daftar baru, dan buat daftar langkah-langkah dialog yang diperlukan.
bergerak memasukkan semua informasi penting tentang listingan baru Ingatlah bahwa saat mendesain untuk ponsel cerdas, lebih sedikit
yang diperolehnya. Agen properti ingin dapat membuat listing baru informasi yang dapat dimasukkan di setiap langkah dibandingkan
sesegera mungkin sehingga agen properti lain dan calon pembeli dengan aplikasi Web layar penuh.
dapat menemukan listing tersebut secara online. Beberapa orang suka Ingatlah juga bahwa pengetikan rawan kesalahan dan canggung
memasukkan informasi saat berbicara dengan pemilik atau saat bagi banyak pengguna, jadi pikirkan peluang untuk menggunakan
memeriksa properti. Agen properti jarang berada di kantor mereka kotak centang, tombol radio, dan kotak daftar untuk membantu pemilihan.
saat ini, jadi kemampuan membuat listing baru di perangkat seluler Buat storyboard kasus penggunaan ini untuk perangkat seluler, yang
adalah fitur utama dari sistem layanan multi-listing. memperlihatkan setiap langkah dialog yang memaksimalkan
penggunaan kotak centang, tombol radio, dan kotak daftar.
Layanan Kurir Di Tempat
Tinjau deskripsi kasus dan solusi Anda untuk skenario Web dari kasus dialog yang menunjukkan bagaimana hal ini dapat didukung dengan
penggunaan Minta pengambilan paket dari Bab 5. Kemudian, dengan perangkat digital portabel. Anda dapat menggunakan teknologi terkini
menggunakan alat presentasi, seperti Microsoft PowerPoint atau apa pun yang Anda anggap dapat diterapkan, seperti pelacakan GPS,
Apple Keynote, buatlah papan cerita dari halaman Web yang perangkat lunak peta dan petunjuk arah, serta pembaruan lokasi
diperlukan untuk mendukung kasus penggunaan. penjemputan secara real-time. Pertimbangkan kemungkinan bahwa
Deskripsi kasus di Bab 5 juga mengidentifikasi kasus penggunaan pengemudi ingin mendapatkan ikhtisar perhentiannya selama
baru, yang dapat kita sebut Lihat pengambilan/pengiriman terjadwal. perjalanan, melihat beberapa perhentian berikutnya, atau sekadar
Berdasarkan teknologi saat ini, tulislah mendapatkan petunjuk arah ke perhentian berikutnya.
Layanan Perjalanan Liburan Musim Semi 'R' Us
Subsistem jejaring sosial Spring Breaks R Us memerlukan desain yang diketahui berbahaya, pihak keamanan dapat melakukan patroli
antarmuka pengguna yang intuitif dan menarik untuk perangkat seluler. ekstra. Meskipun banyak orang menganggap penggunaan informasi
Namun subsistem jejaring sosial juga dapat memainkan peran penting pribadi ini tidak pantas, sebagian lainnya—khususnya orang tua—
dalam keamanan resor. Misalnya, setiap resor dapat menggunakan menganggapnya penting.
lokasi, minat, aktivitas, dan “kesukaan” wisatawan—semuanya tersedia Bayangkan keamanan resor dengan monitor layar lebar yang
melalui aplikasi—untuk memantau kesejahteraan wisatawan yang memantau aktivitas wisatawan. Rancang layar utama yang mencakup
menginap di resor. Kebanyakan wisatawan yang berlibur di musim beberapa lokasi, jalur dan jalan, lokasi dan status wisatawan, pesan
semi masih muda, dan orang tua mereka mengkhawatirkan perjalanan dari wisatawan ke wisatawan, dan fitur lain yang harus
keselamatan mereka—khususnya di resor terpencil di luar negeri. dipantau oleh keamanan.
SBRU dan resor-resor yang berpartisipasi dapat melacak keberadaan Buat storyboard yang memperlihatkan contoh peringatan pop-up dan
wisatawan dan siapa saja yang berada di dekat mereka, memantau menu opsi yang mungkin dipilih oleh keamanan setelah peringatan.
pesan tentang aktivitas dan pesta, serta mengantisipasi kondisi Haruskah Anda juga menunjukkan lokasi dan status anggota staf
keramaian atau wisatawan rentan yang berkeliaran di luar lokasi. keamanan? Bagaimana kalau mengklik anggota staf keamanan untuk
Peringatan dapat memberi tahu pihak keamanan jika kondisinya tidak mengirimi mereka pesan? Bagaimana kalau mengklik lokasi untuk
normal atau jika pesan menunjukkan adanya masalah. Misalnya, jika menyalakan lampu atau menutup gerbang keamanan? Jadilah kreatif
kolam terlalu penuh, beberapa tindakan dapat diambil. Jika pesan saat Anda memikirkan kemungkinan desain. Anda harus menyertakan
merujuk ke tempat di luar lokasi empat atau lima tata letak layar untuk storyboard.
(lanjutan di halaman 222)

(lanjutan dari halaman 221)
Pemantauan Glukosa Waktu Nyata Sistem Medis Sandia

Pengembang telah membuat pilihan berikut mengenai format akan dikirim segera setelah aplikasi ponsel mengirimkan
dan metode transmisi antara aplikasi ponsel dan komponen kadar glukosa ke server.
perangkat lunak berbasis server: ÿ Pembacaan
Belum ada kelompok industri yang mendefinisikan tag XML
tingkat glukosa dalam kisaran normal akan dikirim ke server satu yang cocok untuk aplikasi RTGM. Oleh karena itu, desainer
kali per jam sebagai pesan XML melalui HTTP aman. harus mengembangkan tag yang sesuai untuk aplikasi ini.
Karena kadar glukosa disimpan setiap lima menit oleh Jika Anda belum familiar dengan XML, lakukan setidaknya
aplikasi ponsel, pesan normal ke server akan berisi 12 30 menit riset latar belakang di Web.
kadar glukosa dan stempel waktu. Jika lebih dari dua Lihat diagram kelas pada kasus Bab 4 RTGM untuk menentukan
kadar glukosa berturut-turut berada di luar kisaran konten data yang diperlukan. Kemudian, rancang tag XML dan
normal, aplikasi ponsel akan segera mengirimkannya format pesan yang sesuai untuk mengirimkan kadar glukosa
ke server. ÿ Dokter dan tenaga medis lainnya akan memulai berdasarkan waktu dari aplikasi ponsel ke server dan untuk
kontak langsung mengirimkan kondisi peringatan terbaru dari server ke aplikasi
dengan pasien melalui pesan teks, pesan suara, atau panggilan ponsel.
suara real-time. ÿ Perubahan pada kondisi peringatan dan Jika petugas medis memilih untuk mengirim pesan teks ke
pembaruan pada perangkat lunak pasien, bagaimana server mengirimkan pesan tersebut? Untuk
membantu menjawab pertanyaan tersebut, lakukan riset pada
ware akan dikirim dari server ke aplikasi ponsel pasien Short Message Service (SMS), Enhanced Messaging Service
sebagai pesan XML. Pesan XML (EMS), dan SMS gateway.
Sumber Daya Lebih Lanjut
Randolph G. Bias dan Deborah J. Mayhew, Kegunaan yang Janice Redish, Melepaskan Kata-kata: Menulis Konten Web yang
Membenarkan Biaya: Pembaruan untuk Era Internet (edisi Berfungsi. Morgan Kaufmann, 2007.
ke-2). Morgan Kaufmann, 2005.
Paul C. Brown, Implementasi SOA: Total Ben Shneiderman, Catherine Plaisant, Maxine
Arsitektur dalam Praktek. Addison-Wesley, 2008. Cohen, dan Steven Jacobs, Merancang Antarmuka
Patrick Carey, Perspektif Baru dalam Membuat Halaman Web Pengguna: Strategi Interaksi Manusia-Komputer yang
dengan HTML, XHTML, dan XML (Edisi ke-3rd). Efektif (edisi ke-5). Addison Wesley, 2009.
Pembelajaran Cengage, 2010.
Donald Norman, Desain Benda Sehari-hari. Joel Sklar, Prinsip Desain Web (Edisi ke-5).
Buku Dasar, 2002. Pembelajaran Cengage, 2012.

BOOK-Systems Analysis and Design in A Changin-215-250

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

BOOK-Systems Analysis and Design in A Changin-215-250

Diunggah oleh

Hak Cipta:

Format Tersedia

Machine Translated by Google

Garis besar bab

ÿ Memahami Antarmuka Pengguna

ÿ Konsep Desain Antarmuka Pengguna

ÿ Transisi dari Analisis ke Desain Antarmuka Pengguna

ÿ Desain Antarmuka Pengguna

ÿ Mengidentifikasi Antarmuka Sistem

ÿ Merancang Input Sistem

ÿ Merancang Keluaran Sistem

ÿ Jelaskan perbedaan antara antarmuka pengguna dan antarmuka sistem

ÿ Jelaskan sejarah perkembangan bidang interaksi manusia-komputer (HCI)

ÿ Diskusikan bagaimana visibilitas dan keterjangkauan mempengaruhi kegunaan

ÿ Diskusikan contoh antarmuka sistem yang ditemukan dalam sistem informasi

ÿ Tentukan input dan output sistem berdasarkan kebutuhan aplikasi

188 BAGIAN 3 ÿ Esensi Perancangan Sistem

Desain Antarmuka di Aviation Electronics

BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 189

Antarmuka Pengguna dan Sistem Langkah penting dalam

Memahami Antarmuka Pengguna Banyak orang berpikir antarmuka

190 BAGIAN 3 ÿ Esensi Perancangan Sistem

BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 191

terus-menerus kembali ke kebutuhan pengguna selama setiap iterasi dan dengan

Metafora untuk Interaksi Manusia-Komputer Penggunaan

Metafora Keterangan Contoh

192 BAGIAN 3 ÿ Esensi Perancangan Sistem

Metafora dialog dapat diimplementasikan dalam berbagai cara di antarmuka pengguna.

BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 193

Konsep Desain Antarmuka Pengguna Banyak peneliti dan praktisi TI

Keterjangkauan dan Visibilitas Donald

194 BAGIAN 3 ÿ Esensi Perancangan Sistem

BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 195

Dialog yang Menghasilkan Penutupan

Informasi pelanggan yang dimasukkan tidak valid. Coba lagi.

196 BAGIAN 3 ÿ Esensi Perancangan Sistem

Pembalikan Tindakan yang Mudah

Mengurangi Beban Memori Jangka Pendek Manusia

Transisi dari Analisis ke Desain Antarmuka Pengguna Landasan desain

antarmuka pengguna diletakkan ketika kasus

BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 197

elemen antarmuka pengguna. Dalam pendekatan bottom-up, kasus penggunaan interaktif

Kasus Penggunaan dan Hierarki Menu Menu adalah

GAMBAR 7-6 Dua gaya menu yang berbeda

198 BAGIAN 3 ÿ Esensi Perancangan Sistem

Subsistem Kasus Penggunaan Pengguna/Aktor

Penjualan Cari barang Pelanggan, perwakilan layanan pelanggan,

Penjualan Lihat kombinasi aksesori Pelanggan, perwakilan layanan pelanggan,

Penjualan Isi keranjang belanja Pelanggan

Penjualan Keranjang belanja kosong Pelanggan

Penjualan Periksa keranjang belanja Pelanggan

Penjualan Isi keranjang cadangan Pelanggan

Penjualan Keranjang cadangan kosong Pelanggan

Penjualan Konversi keranjang cadangan Pelanggan

Penjualan Buat penjualan telepon Perwakilan layanan pelanggan

Penjualan Buat penjualan toko Perwakilan penjualan toko

Pemenuhan pesanan Kirimkan barang Pengiriman

Pemenuhan pesanan Kelola pengirim Pengiriman

Pemenuhan pesanan Buat pemesanan di awal Pengiriman

Pemenuhan pesanan Buat pengembalian barang Pengiriman, pelanggan

Pemenuhan pesanan Cari status pesanan Pengiriman, pelanggan, manajemen

Pemenuhan pesanan Lacak pengiriman Pengiriman, pelanggan, pemasaran

Pemenuhan pesanan Nilai dan komentari produk Pelanggan

Pemenuhan pesanan Berikan saran Pelanggan

BAB 7 ÿ Merancang Antarmuka Pengguna dan Sistem 199