3 PERANCANGAN PERANGKAT LUNAK
3.2.2 Perancangan Antar Muka
Perancangan antar muka merupakan salah satu kegiatan penting pada fase perancangan. Aktivitas ini meliputi perancangan antarmuka dengan pengguna (user) maupun dengan sistem lain. Beberapa aktivitas yang dilakukan dalam perancangan antar muka yaitu :
• Functionality requirements gathering – mengakomodasi semua kebutuhan fungsional dan kebutuhan potensial user.
• User analysis – menganalisis user potensial sistem dengan cara mewawancarai orang yang bekerja pada user atau user itu sendiri. Beberapa pertanyaan yang dapat diajukan misalnya :
o Apa yang diharapkan user dari sistem
o Bagaimana sistem berjalan sesuai dengan proses kerja atau aktivitas user harian.
o Bagaimana sistem memudahkan user secara teknis dan apakah ada sistem sejenis yang pernah digunakan
o Gaya tampilan antarmuka seperti apa yang disukai oleh user. • Information architecture – membangun aliran proses atau informasi sistem
(misalnya, jika sistem berupa situs web, maka aliran proses / informasi dapat berupa peta hirarki tampilan halaman).
• Prototyping – membangun prototype baik berupa sketsa pada kertas ataupun tampilan interaktif sederhana (simulasi).
• Usability testing – menguji prototype pada user yang sebenernya, sering juga disebut dengan teknik thinkaloud protocol, yaitu kita meminta pendapat user atas prototype yang sudah dibuat.
• Graphic Interface design – rancangan look and feel berupa antarmuka berbasis grafis (GUI).
Rancangan antarmuka grafis (GUI) menyajikan tampilan visual atas informasi yang disimpan pada komputer. Tampilan visual ini memudahkan user untuk memahami informasi tanpa harus memiliki keahlian komputer yang spesifik. Elemen antarmuka utama yang digunakan pada GUI adalah paradigma WIMP ("window, icon, menu, pointing device"). Element-elemen ini biasanya ditempelkan pada antarmuka melalui widget toolkit.
Window adalah area pada layar yang menampilkan informasi. Terdapat tiga jenis window khusus yaitu :
• Container window : window yang dibuka ketika user mengklik sebuah icon. • Browser window : memungkinkan user untuk bergerak maju/mundur sesuai
urutan dokumen. Contohnya adalah aplikasi web browser
• Text terminal: window yang dirancang untuk menampilkan interaksi berupa text yang disatukan dengan interaksi grafis, misalnya window konsol MS-DOS pada Windows.
• Child window : yaitu window yang terbuka secara otomatis sebagai akibat aktivitas user pada window induknya. Contohnya adalah pop-up window pada internet.
• Message window atau dialog box adalah salah satu jenis child window, yang biasanya berupa window kecil yang dibuka oleh program untuk menampilkan informasi pada user atau untuk menerima informasi dari user. Window ini biasanya memiliki tombol yang harus diklik untuk melanjutkan program. Menu digunakan oleh user untuk menjalankan perintah dengan cara memilih dari sekumpulan daftar pilihan. Daftar pilihan ini dapat ditelusuri menggunakan mouse atau piranti penunjuk lainnya, misalnya keyboard. Menu bar adalah menu yang ditampilkan secara horizontal di bagian atas layar. Menu pull-down merupakan pengembangan sub menu dari menu bar. Ketika user mengklik salah satu menu, maka menu ini akan menampilkan sub menu dalam bentuk pull-down.
Icon adalah gambar kecil yang mewakili suatu obyek misalnya file, program, halaman web atau perintah. Icon merupakan cara cepat untuk mengeksekusi program,
membuka dokumen atau menjalankan perintah tertentu.
Elemen antarmuka yang digunakan user untuk berinteraksi dikenal juga sebagai control atau widgets. Beberapa contoh control misalnya : Window, button, textbox, pointer, hyperlink, combobox, check box, data grid, dan lain-lain.
Interaction style adalah cara interaksi user dengan sistem. Beberapa jenis interaction style misalnya : Direct manipulation, menu selection, form fill-in, command language dan natural language.
Interaction style
Main advantages Main disadvantages Application
examples Direct
manipulation
Fast and intuitive interaction Easy to learn
May be hard to implement. Only suitable where there is a visual metaphor for tasks and objects.
Video games CAD systems Menu selection Avoids user error
Little typing required
Slow for experienced users.
Can become complex if many menu options.
Most general-purpose systems
Easy to learn
Checkable Causes problems where user options do not match the form fields. Personal loan processing Command
language
Powerful and flexible
Hard to learn.
Poor error management.
Operating systems, Command and control systems Natural language Accessible to casual users Easily extended
Requires more typing.
Natural language understanding systems are unreliable.
Information retrieval systems
Latihan
Latihan 3.1 (Pertemuan ke 5) :
M-ticket adalah pembelian tiket melalui piranti mobile / telpon seluler berupa SMS. Melalui aplikasi m-ticket user dapat membeli tiket kereta api dengan cara menjawab serangkaian pertanyaan dan melakukan konfirmasi pembayaran.
Mekaniskme transaksi pada m-ticket adalah sebagai berikut :
1. User mendaftar melalui sms, dan akan menerima konfirmasi berupa nomor pendaftaran.
2. Agen penjualan kereta api menyediakan semacam pusat informasi yang dapat diakses melalui sms, yang menyediakan informasi berupa : jadwal kereta, harga tiket, dan ketersediaan tiket.
3. User dapat membeli tiket dengan cara mengirimkan sms, dengan menyebutkan jadwal kereta dan jumlah tiket yang akan dibeli, dan akan menerima balasan berupa nomor pembelian tiket sementara.
4. User kemudian melakukan pembayaran melalui bank (dapat melalui m-banking atau atm) dengan menggunakan nomor pembelian tiket sementara sebagai referensi transaksi. Setelah membayar, user akan mendapat balasan dari bank berupa nomor pembelian tiket.
5. User melakukan konfirmasi melalui sms, bahwa tiket sudah dibayar dan akan menerima balasan berupa nomor tiket cetak.
6. User menyimpan nomor tiket cetak untuk ditukarkan dengan tiket fisik pada saat akan berangkat dari stasiun kereta api.
Berdasarkan deskripsi di atas, buatlah rancangan berupa : • Rancangan antarmuka
• Rancangan basis data untuk mendukung proses pembelian tiket.
Kembangkan daya analisis anda dan tambahkan asumsi-asumsi anda sendiri jika informasi di atas dirasa kurang memadai.
Latihan 3.2 (pertemuan ke 6)
Buatlah structure chart dari DFD berikut, dengan menggunakan pendekatan transaction analysis.
1. Registrasi Mahasiswa
DFD berikut merupakan turunan dari proses 3 pada DFD sebelumnya. Buatlah structure chart menggunakan pendekatan transform analysis
Latihan 3.3. (Pertemuan ke 7) :
Untuk setiap kelompok, buatlah laporan spesifikasi proses yang dilengkapi dengan rancangan antarmuka, rancangan modul program dalam bentuk structure chart, dan rancangan basis data.