REKAYASA PIRANTI LUNAK

METODE DESAIN (User Interface Design--UID) SESI - 8

am/page - 1 of 19

REKAYASA PIRANTI LUNAK

USER INTERFACE DESIGN /UID TUJUAN : MERANCANG INTERFACE YANG EFEKTIF UNTUK SISTEM PERANGKAT LUNAKSIAP DIGUNAKAN, DAN HASILNYA SESUAI DG KEBUTUHAN. GRAPHICAL USER INTERFACE : INTERFACE SOFTWARE. KEUNTUNGANNYA : 1. 2. 3. GAMPANG DIPELAJARI OLEH PENGGUNA YANG KURANG PENGALAMAN; BERPINDAH DARI SATU LAYAR KE LAYAR YANG LAIN TANPA KEHILANGAN INFORMASI; AKSES PENUH PADA LAYAR BEBERAPA MACAM TUGAS/KEPERLUAN. YANG BANYAK DIGUNAKAN DALAM

am/page - 2 of 19

REKAYASA PIRANTI LUNAK

KARAKTERISTIK GUI :

Gambar : Proses Merancang User Interface

am/page - 3 of 19

REKAYASA PIRANTI LUNAK

PROSES PERULANGAN : PROSES DILAKUKAN HINGGA MENGHASILKAN DESAIN YANG DIINGINKAN OLEH PENGGUNA. DESAIN BERSIFAT USER-CENTERED : PENGGUNA DESAIN. PROSES EVALUASI DILAKUKAN OLEH PENGGUNA HASIL DESAIN. SANGAT TERLIBAT DALAM PROSES

PRINSIP

PRINSIP

DALAM

MERANCANG

USER

INTERFACE : (1) USER FAMILIARITY / MUDAH DIKENALI : GUNAKAN ISTILAH, KONSEP DAN KEBIASAAN USER BUKAN COMPUTER (MISAL: SISTEM PERKANTORAN GUNAKAN ISTILAH LETTERS, DOCUMENTS, FOLDERS BUKAN DIRECTORIES, FILE, IDENTIFIERS. CONTOH : JENIS DOCUMENT OPEN OFFICE;
am/page - 4 of 19

REKAYASA PIRANTI LUNAK

(2) CONSISTENCY/ SELALU BEGITU : KONSISTEN DALAM OPERASI DAN ISTILAH DI SELURUH SISTEM SEHINGGA TIDAK MEMBINGUNGKAN. CONTOH : LAYOUT MENU DI OPEN OFFICE MIRIP DGN LAYOUT MENU DI MS OFFICE. (3) MINIMAL SURPRISE / TIDAK BUAT KAGET USER : OPERASI BISA DIDUGA PROSESNYA BERDASARKAN PERINTAH YANG DISEDIAKAN. (4) RECOVERABILITY/PEMULIHAN : RECOVERABILITY ADA DUA MACAM: - CONFIRMATION OF DESTRUCTIVE ACTION - KETERSEDIAAN FASILITAS PEMBATALAN (UNDO); (5) USER GUIDANCE/ BANTUAN : SISTEM MANUAL ONLINE, MENU HELP, CAPTION PADA ICON KHUSUS TERSEDIA;

am/page - 5 of 19

REKAYASA PIRANTI LUNAK

(6) USER DIVERSITY/KEBERAGAMAN : FASILITAS INTERAKSI UNTUK TIPE USER YANG BERBEDA DISEDIAKAN. MISALNYA UKURAN HURUF BISA DIPERBESAR. PERMASALAHAN PERANCANG SISTEM (USER INTERACTION) : (1) BAGAIMANA INFORMASI DARI USER BISA DISEDIAKAN UNTUK SISTEM KOMPUTER? MISALNYA PADA SAAT INPUT DATA (2) BAGAIMANA INFORMASI DARI SISTEM KOMPUTER DITAMPILKAN UNTUK USER? HASIL DARI PEMROSESAN DATA USER INTERFACE YANG BAIK : MENYATUKAN INTERAKSI PENGGUNA (USER INTERACTION) DAN PENYAJIAN INFORMASI (INFORMATION PRESENTATION).

am/page - 6 of 19

REKAYASA PIRANTI LUNAK

ADA

TIPE

UTAMA

INTERAKSI

UNTUK

USER

INTERACTION: 1. DIRECT MANIPULATION--PENGOPERASIAN SECARA LANGSUNG: INTERAKSI LAYAR. CONTOH : DELETE FILE DENGAN MEMASUKKANNYA KE TRASH; VIDEO GAMES. KELEBIHAN: WAKTU PEMBELAJARAN USER SANGAT SINGKAT, FEEDBACK LANGSUNG DIBERIKAN PADA TIAP AKSI SEHINGGA KESALAHAN TERDETEKSI DAN DIPERBAIKI DENGAN CEPAT. KEKURANGAN : INTERFACE TIPE INI RUMIT DAN MEMERLUKAN BANYAK FASILITAS PADA SISTEM KOMPUTER, COCOK UNTUK PENGGAMBARAN SECARA VISUAL UNTUK SATU OPERASI ATAU OBJEK. LANGSUNG DENGAN OBJEK PADA

am/page - 7 of 19

REKAYASA PIRANTI LUNAK

2. MENU SELECTION--PILIHAN BERBENTUK MENU: MEMILIH CONTOH : SAAT CLICK KANAN DAN MEMILIH AKSI YANG DIKEHENDAKI. KELEBIHAN : USER TIDAK PERLU INGAT NAMA PERINTAH. PENGETIKAN MINIMAL. KESALAHAN RENDAH. PERINTAH DARI DAFTAR YANG DISEDIAKAN.

KEKURANGAN : TIDAK ADA LOGIKA AND ATAU OR. PERLU ADA STRUKTUR MENU JIKA BANYAK PILIHAN. MENU DIANGGAP LAMBAT OLEH EXPERT USER DIBANDING COMMAND LANGUAGE. 3. FORM FILL-IN--PENGISIAN FORM :

am/page - 8 of 19

REKAYASA PIRANTI LUNAK

MENGISI AREA-AREA PADA FORM. CONTOH: STOCK CONTROL. KELEBIHAN : MASUKAN DATA YANG SEDERHANA. MUDAH DIPELAJARI.

KEKURANGAN : MEMERLUKAN BANYAK TEMPAT DI LAYAR. HARUS MENYESUAIKAN DENGAN FORM MANUAL DAN KEBIASAAN USER. 4. COMMAND LANGUAGE--PERINTAH TERTULIS: MENULISKAN PERINTAH YANG SUDAH DITENTUKAN PADA PROGRAM. CONTOH : OPERATING SYSTEM. KELEBIHAN : PERINTAH DIKETIKAN LANGSUNG PADA SYSTEM. CONTOH : UNIX, DOS COMMAND. BISA DITERAPKAN PADA TERMINAL YANG MURAH. KOMBINASI PERINTAH BISA DILAKUKAN.

am/page - 9 of 19

REKAYASA PIRANTI LUNAK

CONTOH : COPY FILE DAN RENAME NAMA FILE. KEKURANGAN: PERINTAH HARUS DIPELAJARI DAN DIINGAT CARA PENGGUNAANNYA. TIDAK COCOK UNTUK USER BIASA. KESALAHAN PAKAI PERINTAH SERING TERJADI. PERLU ADA SISTEM PEMULIHAN KESALAHAN. KEMAMPUAN MENGETIK PERLU.

5. NATURAL LANGUAGE--PERINTAH DENGAN BAHASA ALAMI: GUNAKAN BAHASA ALAMI UNTUK MENDAPATKAN HASIL. CONTOH: SEARCH ENGINE DI INTERNET. KELEBIHAN: PERINTAH CONTOH : KATA KUNCI YANG KITA TENTUKAN UNTUK DICARI OLEH SEARCH ENGINE. ADA KEBEBASAN MENGGUNAKAN KATA-KATA. DALAM BENTUK BAHASA ALAMI, DENGAN KOSA KATA YANG TERBATAS (SINGKAT)

am/page - 10 of 19

REKAYASA PIRANTI LUNAK

KEKURANGAN: TIDAK SEMUA SISTEM COCOK GUNAKAN INI. MEMERLUKAN BANYAK PENGETIKAN.

PENYAJIAN INFORMASI (INFORMATION PRESENTATION) : SISTEM YANG INTERAKTIF PASTI MENYEDIAKAN CARA UNTUK MENYAJIKAN INFORMASI UNTUK PENGGUNA. PENYAJIAN DIBERIKAN LANGSUNG (SEPERTI DARI TEKS INPUT PADA YANG WORD

PROCESSING) ATAU DISAJIKAN DENGAN GRAFIK.

BEBERAPA FAKTOR SEBELUM MENENTUKAN BENTUK PENYAJIAN INFORMASI: APAKAH PENGGUNA PERLU INFORMASI DENGAN KETEPATAN TINGGI ATAU DATA YANG SALING BERHUBUNGAN? SEBERAPA CEPAT NILAI INFORMASI BERUBAH? HARUS ADA INDIKASI PERUBAHAN SEKETIKA?

am/page - 11 of 19

REKAYASA PIRANTI LUNAK

APAKAH PENGGUNA HARUS MEMBERI RESPON PADA PERUBAHAN? APAKAH APAKAH PENGGUNA INFORMASI PERLU BERUPA MELAKUKAN TEKS ATAU PERUBAHAN PADA INFORMASI YANG DISAJIKAN? NUMERIK? NILAI RELATIF PERLU ATAU TIDAK? KARAKTERISTIK INFORMASI : 1. STATIC INFORMATION: DITENTUKAN SAAT AWAL SESI. TIDAK BERUBAH SELAMA SESI BERJALAN. BISA BERUPA INFORMASI NUMERIS ATAU TEKS CHART DI MS-EXCEL DISAJIKAN DENGAN JENIS HURUF KHUSUS YANG MUDAH DIBACA ATAU DIBERI HIGHLIGHT DENGAN WARNA TERTENTU. MENGGUNAKAN ICON YANG MEWAKILI. 2. DYNAMIC INFORMATION: PERUBAHAN BERLANGSUNG TERJADI DAN SELAMA PERUBAHAN SESI HARUS

DIKOMUNIKASIKAN/DITUNJUKKAN KE USER

am/page - 12 of 19

REKAYASA PIRANTI LUNAK

BISA BERUPA INFORMASI NUMERIS ATAU TEKS. CONTOH : DEFRAGMENTATION, SCANNING VIRUS, DOWNLOAD.

INFORMASI

DENGAN

NUMERIK

DAPAT

DISAJIKAN

DENGAN CARA DIGITAL ATAU ANALOG DENGAN KARAKTERISTIK : 1. DIGITAL PRESENTATION A. SINGKAT HANYA PERLU SEDIKIT TEMPAT PADA LAYAR B. KETEPATAN NILAI DITUNJUKKAN 2. ANALOGUE PRESENTATION A. NILAI TERLIHAT SAMBIL LALU B. UNTUK MENUNJUKKAN NILAI RELATIF C. MUDAH MELIHAT DATA NILAI YANG BERBEDA

am/page - 13 of 19

REKAYASA PIRANTI LUNAK

Gambar 2: Alternatif presentation

am/page - 14 of 19

REKAYASA PIRANTI LUNAK

Gambar 3: Informasi yang dinamis dan nilai relatif

PENJELASAN GAMBAR 3: NILAI-NILAI RELATIF. NILAI YANG DISAJIKAN RELATIF, INFORMASINYA BERSIFAT DINAMIS BERUBAH SAAT SESI BERJALAN. NILAI DIGITAL MENUNJUKKAN JAM JAM SISTEM DI KOMPUTER. KETEPATAN DIPERLUKAN, PERUBAHANNYA TIDAK TERJADI SECARA CEPAT.

am/page - 15 of 19

REKAYASA PIRANTI LUNAK

Gambar 4 : Textual Highlighting

PENGGUNAAN WARNA PADA DESAIN INTERFACE : WARNA MENAMBAH DIMENSI EKSTRA PADA SUATU INTERFACE BISA DAN MEMBANTU UNTUK USER MEMAHAMI STRUKTUR YANG KOMPLEKS; DIPAKAI MEWARNAI-TERANG (HIGLIGHT) HAL-HAL KHUSUS; KESALAHAN UMUM DALAM PENGGUNAAN WARNA PADA DESAIN USER INTERFACE: MENGGUNAKAN WARNA UNTUK MENGKOMUNIKASIKAN, MERAH : PERINGATAN ATAU ADA KESALAHAN; TERLALU BANYAK GUNAKAN MACAM WARNA.

am/page - 16 of 19

REKAYASA PIRANTI LUNAK

PETUNJUK INTERFACE : 1. HINDARI PENGGUNAAN TERLALU BANYAK WARNA; 2. GUNAKAN OPERASI; 3. PENGGUNA KODE; 4. DESAIN MONOCHROME KEMUDIAN TAMBAHKAN WARNA; 5. GUNAKAN WARNA KODE SECARA KONSISTEN; 6. HINDARI 7. GUNAKAN PASANGAN WARNA WARNA UNTUK YANG TIDAK COCOK/NORAK; MENUNJUKKAN PERUBAHAN STATUS. USER SUPPORT : USER GUIDANCEDALAM USER INTERFACE-MELIPUTI FASILITAS SISTEM TERMASUK ON-LINE HELP, ERROR MESSAGES, DAN USER MANUAL. BISA KENDALIKAN WARNA UNTUK KODE WARNA UNTUK MENDUKUNG PENGGUNAAN WARNA DESAIN

am/page - 17 of 19

REKAYASA PIRANTI LUNAK

FAKTOR-FAKTOR PADA DESAIN ERROR MESSAGE :

FORM INPUT DARI PENGGUNA :

ERROR

MESSAGE

DENGAN

ORIENTASI

YANG

BERBEDA : BERORIENTASI PADA SISTEM :

am/page - 18 of 19

REKAYASA PIRANTI LUNAK

PESAN MEMBUAT PENGGUNA MERASA TIDAK BERDAYA KARENA TIDAK ADA JALAN KELUAR YANG JELAS. BAHASA YANG DIGUNAKAN ADALAH BAHASA TEKNIS YANG TIDAK BERARTI APA-APA. BERORIENTASI PADA PENGGUNA : PESAN LEBIH JELAS DAN MEMBERIKAN ALTERNATIF JALAN KELUAR. MESKIPUN INFORMASI YANG DIBERIKAN LEBIH BANYAK DAN TERKESAN PENUH, TAPI PENGGUNA MERASA TERTOLONG.
REFERENSI : 1. Sommerville, Ian. "Software Engineering" .6th . Addison Wesley. 2001

am/page - 19 of 19