Penggunaan W arna pada Desain Interface

PERANCANGAN ANTAR M UKA

5. Natural language

5.3.5 Penggunaan W arna pada Desain Interface

Warna menambah dimensi ekstra pada suatu int erfacedan membantu user memahami struktur yang kompleks. Warna juga dapat dipakai untuk memberikan tanda penting berupa highlightpada hal-hal khusus.

Kesalahan umum dalam penggunaan warna pada desain UI:

1. Menggunakan warna untuk mengkomunikasikan arti, merah bisa jadi peringatan atau ada kesalahan.

2. Terlalu banyak menggunakan kombinasi warna.

Dalam menggunakan warna pada desain int erface ada beberapa petunjuk yang dapat diikuti seperti berikut ini:

1. Hindari penggunaan terlalu banyak warna. 2. Gunakan kode warna untuk mendukung operasi. 3. Gunakan warna secara konsisten.

4. Hindari pasangan warna yang tidak cocok/norak. 5. Gunakan warna untuk menunjukkan perubahan status.

5.3.6 User Guidance

User guidance merupakan fasilitas sistem untuk mendukung user termasuk on-line help, error messages, dan user manual. User guidance perlu disatukan dengan UI untuk membantu user saat membutuhkan informasi tentang sistem atau saat ada kesalahan yang dilakukan sistem dan tidak dimengerti oleh user. Syst em help dan syst em message (pesan kesalahan) adalah bentuk dari user guidance. Error M essages sangat penting, karena error message yang buruk cenderung ditolak oleh user maka error message sebaiknya berpedoman pada faktor-faktor dibawah ini.

Context User guidance memberikan pesan sesuai dengan konteks yang dialami oleh pengguna

82

pengguna baru, pesan yang pendek membingungkan. User guidance perlu menjawab kebutuhan ini.

Skill level Pesan dibuat sesuai dengan kemampuan pengguna dan pengalamannya.

Style Harus bersifat positif. Lebih baik bersifat aktif dari pada pasif. Harus sopan, tidak menghina, atau bergurau.

Culture Jika mungkin, pesan disesuaikan dengan budaya. Mungkin kata atau warna yang digunakan disesuaikan dengan budaya setempat.

Dibawah ini ada dua macam pesan kesalahan: berorientasi pada sistem dan berorientasi pada pengguna. Pada pesan yang berorientasi pada sistem, pesan cenderung hanya singkat, tidak memberikan solusi yang jelas kepada user, bahasa yang digunakan adalah bahasa teknis yang tidak berarti apa-apa. Pada pesan yang berorientasi pada pengguna, pesan lebih jelas dan memberikan alternatif jalan keluar. Sekalipun informasi yang diberikan lebih banyak dan terkesan penuh, tapi userakan merasa tertolong.

5. 4. Langkah-langkah praktikum

1. Klik StartAll ProgramsBalsamiq M ockups 2. Akan muncul tampilan utama dari Balsamiq Mockups

3. Klik Tab All  cari Rectangle / Canvas / Panel, kemudian drag ke Workspace. Atur size Rectangle / Canvas / Panel menjadi 800x1200.

4. Klik Tab Textdrag Label / String of Textke Workspace. Ketikkan kata-kata seperti gambar dibawah ini kemudian pada menu pop-up atur text menjadi it alic.

84

5. Klik Tab M edia drag Icon and Text Label ke Workspace. Untuk Text tulis Logo Prodase, untuk Logo atur Icon pada menu pop-up.

7. Klik Tab Alldrag Rectangle / Canvas / Panel, atur size menjadi 750x200 pada menu popup.

8. Klik Tab All drag 2 (dua) buah Icon pada Workspace. Klik 2x pada Icon tersebut lalu cari icon seperti gambar di bawah. Tambahkan Text, beri nama SLIDE SHOW dengan font size : 18.

86

9. Klik Layout drag Vertical Tabske Workspace. Atur size menjadi 750x770. Isikan value pada Vertical Tabs seperti gambar dibawah ini.

10. Klik Tab Textdrag Title / Headline. Tuliskan : Modul V APSI.

11. Klik Tab Textdrag Text Area. Atur size 640x85 dan ketikkan tulisan dibawah ini.

12. Klik Tab All  drag Rectangle / Canvas / Panel. Atur size menjadi 460x310 yang akan digunakan untuk meletakkan form input nilai mahasiswa.

13. Pada Tab Text, buat NIM, Nama Lengkap, Modul-1, Modul-2, Modul-n menggunakan Label. Masih pada Tab Text, drag Text Input / Text Fielddan pada Tab Buttonsdrag Button. Hasilnya seperti gambar dibawah ini.

88

14. Drag Text dan ketikkan : DAFTAR NILAI MAHASISWA. Klik Tab Textdrag Data Grid / Table untuk membuat tabel.

Catatan : pisahkan dengan tanda koma (,) untuk mengisi field.

15. Drag Linkpada Tab Textuntuk membuat pagging. Tulis seperti gambar dibawah ini.

16. Klik Rectangle / Canvas / Panel, atur size menjadi 750x50.

5. 5. Soal Praktikum

Perpustakaan Nastar merupakan perpustakaan milik negara yang berpusat di Bandung. Perpustakaan ini mempunyai jumlah anggota yang sangat banyak, serta koleksi buku yang sangat banyak. Untuk menangani data mengenai anggota, administrasi, dan pengelolaan buku , maka diperlukan suatu sistem untuk mengatur jalannya transaksi data mengenai hal-hal tersebut.

Perpustakaan Nastar juga mempunyai beberapa officer yang bertugas untuk menginputkan data peminjaman dan pengembalian buku, penginputan anggota baru, serta penginputan data- data buku baru.

Dengan sistem yang dibuat, anggota perpustakaan juga dapat mencari buku yang diinginkan melalui sistem. Anggota perpustakaan yang ingin meminjam buku harus membawa kartu anggota dan memperlihatkannya kepada officer untuk diiputkan ke data peminjaman. Anggota dapat meminjam maksimal 3 buku dalam satu kali peminjaman, dan tidak dapat peminjaman apabila buku yang sebelumnya dipinjam belum dikembalikan. Jika anggota meminjam melewati batas buku peminjaman, maka anggota akan dikenakan denda.

Saat anggota akan meminjam buku, officer yang melayani setelah mendapatkan kartu anggota dari peminjam akan mengecek status peminjaman dari anggota tersebut dengan cara memasukkan ID anggota. Apabila masih meminjam buku, maka anggota tidak dapat meminjam buku lagi selama buku sebelumnya belum dikembalikan. Namun, jika tidak, dapat dilanjutkan dengan menginputkan data-data peminjaman.

Jika terdapat buku – buku yang baru masuk, maka officer akan menginputkan data-data buku tersebut ke dalam sistem, lengkap dengan stok, dan informasi-informasi lainnya. Officer juga akan melayani calon-calon anggota perpustakaan yang akan mendaftar.

Untuk menjalankan sistem-sistem di dalam perpustakaan Nastar ini, diperlukan suatu aplikasi untuk mendukungnya. Anda sebagai developer aplika tersebut, buatlah desain atau prototype interface aplikasi yang akan digunakan nantinya. Gunakan aplikasi Balsamiq Moockup untuk membantu membuat desain aplikasi yang akan anda buat.