GAYA INTERAKSI. Oky Dwi Nurhayati, ST, MT

(1)

GAYA INTERAKSI

Oky Dwi Nurhayati, ST, MT

email: okydn@undip.ac.id

(2)

Topik Bahasan

 _Pendahuluan  _Menus

 _{Rancangan nonantropomorfik}  _{Perancangan layar}

(3)

Pendahuluan

Interaction : dialog antara komputer dan pengguna

Bebeberapa aplikasi sangat berbeda dalam cara dan gaya (style) interaksinya Beberapa jenis style yang umum diantaranya adalah;

_{command line interface} _menus

_{natural language}

_{question/answer and query dialogue} _{form-fills and spreadsheets}

_{editor / word processor} _{direct manipulation}

(4)

Commnad line interface

 _{Sering disebut command entry}

 _{Membuat pemakai baru mengingat struktur and argumen}

perubah

 _{Kata perintah memberi “kebebasan” kepada pemakai}

 _{Sangat flexibel, bahkan dapat dirangkai dan memiliki banyak}

argumen

 _{Hanya sedikit membutuhkan ruang pada layar komputer}  _{Sebaiknya dipergunakan oleh pemakai berpengalaman atau}

ahli misalnya penggunaan system operasi seperti DOS, UNIX, linux

(5)

Menus dan Navigasi

 _{Memungkinkan pemakai mengingat berbagai pilihan yang}

tersedia

 _{Membimbing pemakai secara bertahap dalam menggunakan}

aplikasi

 _{Perlu di organisasikan, sehinga tidak fleksibel}

 _{Membutuhkan banyak tempat pada layar komputer}  _{Sebaiknya di gunakan oleh pemakai pemula}

(6)

Organisasi Semantik Menu

Single menu

Tree Structure

(7)

Type-tipe dari menu

 _{Single Menus}

- Satu dari dua pilihan (Binary menus)

- Extended menus, menampilkan banyak pilihan dengan menggunakan teknik-teknik seperti scrollbar, pulldown

menus and pup up menus: dilihat dari cara permunculannya di layar.

(8)

Single menus

Multiple selection:

beberapa pilihan dari banyak pilihan yang disediakan

(9)

Single Menu (

Lanj.

)

(10)

Single Menu (

Lanj.

)

(11)

Single Menu (

Lanj.

)

 _Alphasliders

 _{Embedded links}

 _{Iconic menus, toolbars, or palettes}

Actor: Connery, Sean

(12)

12/32

(13)

13/32

Tree-Structured Menus

 _{Ketika kumpulan item berkembang dan menjadi sulit}

dipelihara dalam kendali intelektual, perancang dapat

membentuk kategori item-item yang serupa, membentuk struktur tree.

 _{Contoh pengelompokan:}

 _{Laki-laki, perempuan}  _{Hewan, sayuran, mineral}  _{Fonts, size, style, spacing}

(14)

14/32

Tree-Structured Menus (

Lanj.

)



_{Depth versus Breadth:}

 _Depth_{: jumlah level.}

 _Breadth_{: jumlah item per level.}



_{Pengelompokan semantik:}

 _{Kelompokkan item-item yang serupa secara logis.}

 _{Bentuk kelompok yang melingkupi semua kemungkinan.}  _{Pastikan item tidak overlap.}

(15)

15/32

Acyclic & Cyclic Menu Networks



_{Kadang-kadang lebih cocok daripada struktur tree.}



_{Memungkinkan jalur dari bagian tree yang berbeda, tidak}

mengharuskan pemakai memulai dari menu utama.



_{Secara alami terdapat pada:}

 _{Hubungan sosial.}  _{Jalur transportasi.}

 _{Kutipan dalam jurnal ilmiah.}

(16)

16/32

Pergerakan Cepat pada Menu

 _{Menu dengan typeahead}

 _{Nama menu atau bookmarks}  _{Menu macros}

(17)

17/32

Menu dengan Typeahead

 _{Penting jika menu sudah sering digunakan sementara waktu}

respons atau kecepatan tampil lambat.

 _Pendekatan_BLT ₍_{Bacon, Lettuce, Tomato}_Sandwich):

pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.

(18)

18/32

Nama Menu atau Bookmarks

 _{Penamaan sederhana memudahkan pemakai mengakses menu}

secara langsung.

 _{Web browser menyediakan}_bookmarks_atau_favorites_sebagai

jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.

(19)

19/32

Menu Macros

 _{Perintah yang sering digunakan dapat direkam dan disimpan}

sebagai makro.

 _{Pada beberapa software, makro dapat ditempatkan di}_toolbar

(20)

20/32

Tata Letak Menu

 _Judul

 _{Penamaan pilihan menu}  _{Tata letak dan desain grafis}

(21)

21/32

Tata Letak Menu: Judul

 _{Menu tunggal}_{: Judul yang deskriptif.}

 _{Menu tree}_{: Nama pilihan harus sama dengan judul halaman}

(22)

22/32

Tata Letak Menu: Penamaan Pilihan Menu

 _{Gunakan peristilahan yang dikenal dan konsisten.}  _{Pastikan item dapat dibedakan dari pilihan lain.}

 _{Gunakan pemilihan kata yang konsisten dan singkat.}  _{Tempatkan kata kunci di kiri.}

(23)

23/32

Tata Letak Menu: Tata Letak dan Desain

Grafis

 _{Perhatikan kendala seperti lebar dan tinggi layar, kecepatan}

tampil, character set, dan highlighting.

 _{Buat pedoman/panduan untuk komponen-komponen: judul,}

penempatan item, petunjuk, pesan kesalahan, dan laporan status.

(24)

Pesan Kesalahan

 _{Dasar-dasar untuk mempersiapkan pesan sistem yang baik:}

 _{Ketertentuan (}_specificity₎

 _{Panduan konstruktif dan nada positif}  _{Pemilihan kata berpusat pemakai}  _{Format fisik yang sesuai}

(25)

Ketertentuan (Specificity)

Buruk

Baik

SYNTAX ERROR

Unmatched left

parenthesis

ILLEGAL ENTRY

Type first letter: Send,

Read, or Drop

INVALID DATA

Days range from 1 to 31

BAD FILE NAME

File names must begin

(26)

Panduan Konstruktif dan Nada Positif



_Buruk

_{: DISASTROUS STRING OVERFLOW. JOB}

ABANDONED.

Buruk

: UNDEFINED LABELS.

Buruk

: ILLEGAL STA. WRN.



Baik

: String space consumed. Revise

program to use shorter strings or expand

string space.

Baik

: Define statement labels before use.

Baik

: RETURN statement cannot be used

in a FUNCTION subprogram.

(27)

Pemilihan Kata Berpusat Pemakai

 _{Minta maaf atas kesalahan.}  _{Jangan menyalahkan pemakai.}  _Contoh:

 _Buruk_{: Illegal telephone number. Call aborted. Error number}

583-2R6.9. Consult your manual for further information.

 _Baik_{: We’re sorry, but we were unable to complete your call}

as dialed. Please hang up, check your number, or consult the operator for assitance.

(28)

Format Fisik yang Sesuai

 _{Gunakan kombinasi huruf besar dan kecil.}

 _{Hindari tampilan hanya nomor kode kesalahan.}

 _{Peringatan dengan suara berguna tapi dapat memalukan;}

(29)

Pengembangan Pesan yang Efektif

 _{Tingkatkan perhatian pada perancangan pesan. Kejelasan dan}

konsistensi harus diperhatikan.

 _Lakukan_{quality control}_{. Pesan harus disetujui programmer,}

(30)

Pengembangan Pesan yang Efektif

(

Lanj.

)



_{Buat pedoman (}

_guidelines

_):

 _{Nada positif}

 _Hindari_{: ILLEGAL, INVALID, ERROR, WRONG PASSWORD.}

 _Sebaiknya_{: Your password did not match the stored password. Please try again.}

 _{Spesifik dan jelaskan masalah dalam istilah pemakai.}

 _Hindari_: _{SYNTAX ERROR, INVALID DATA.}  _Sebaiknya_{: Dress sizes range from 5 to 16.}

 _{Tempatkan pemakai pada kendali terhadap situasi.}

 _Hindari_{: INCORRECT COMMAND.}

 _Sebaiknya_{: Permissible commands are: SAVE, LOAD, or EXPLAIN.}

(31)

Pengembangan Pesan yang Efektif

(

Lanj.

)

 _{Lakukan uji penerimaan. Uji pesan kepada komunitas}

pemakai untuk mengetahui apakah dapat dipahami.

 _{Kumpulkan data kinerja pemakai. Bilamana mungkin, aksi}

(32)

Rancangan Nonantropomorfik

 _{Antropomorfik}_{: mempunyai sifat atau pribadi manusia.}  _{Contoh instruksi:}

 _{Antropomorfik}_{: Hi there, John! It’s nice to meet you, I see}

you’re ready now.

(33)

Rancangan Nonantropomorfik (

Lanj.

)

 _{Hal-hal yang perlu dipertimbangkan:}

 _{Pemberian sifat cerdas, bebas, berkehen-dak bebas, dan}

berpengetahuan kepada komputer dapat menipu,

membingungkan, dan menyesatkan pemakai.

 _{Penting untuk}_membedakan_{orang dengan komputer.}

 _{Antarmuka antropomorfik dapat}_{membuat ketegangan}_bagi

(34)

Rancangan Nonantropomorfik (

Lanj.

)

 _{Sebaiknya perancang memfokuskan pada pemakai dan}

menghindari kata ganti.

 _Buruk_{: I will begin the lesson when you press RETURN.}  _{Lebih baik}_{: You can begin the lesson by pressing RETURN.}  _{Paling baik}_{: To begin the lesson, press RETURN.}

(35)

Pedoman Perancangan

Nonantropomorfik

 _{Hindari menampilkan komputer sebagai manusia.}

 _{Pilih tokoh yang sesuai dalam pengenalan atau sebagai}

pemandu.

 _{Hati-hati dalam merancang wajah manusia atau tokoh kartun}

dengan komputer.

 _{Tokoh kartun cocok digunakan di game atau software}

(36)

Pedoman Perancangan

Nonantropomorfik (

Lanj.

)

 _{Rancang antarmuka yang dapat dimengerti, dapat}

diramalkan, dan dapat dikendalikan.

 _{Gunakan orientasi dan keadaan selesai dari sudut pandang}

pemakai.

 _{Jangan gunakan “I” ketika komputer menanggapi aksi}

pemakai.

 _{Gunakan “you” hanya untuk memandu pemakai dan}

(37)

Perancangan Layar

 _{Enam kategori prinsip yang menyingkapkan kompleksitas tugas perancang}

(Mullet dan Sano, 1995):

 _{Elegan dan sederhana}_{: kesatuan, dipikirkan dengan baik, dan cocok.}

 _{Skala, kontras dan proporsi}_{: kejelasan, harmoni, aktivitas, dan pembatasan.}  _{Organisasi dan struktur visual}_{: pengelompokan, hierarki, hubungan, dan}

keseimbangan.

 _{Modul dan program}_{: aplikasi yang fokus, fleksibilitas, dan konsisten.}

 _{Gambar dan representasi}_{: kesegeraan, keumuman, kohesi, dan karakterisasi.}  _Gaya_{: keunikan, keterpaduan, kelengkapan, dan kesesuaian.}

(38)

Perancangan Layar (

Lanj.

)



_{Beberapa butir dari pedoman tampilan layar dari Smith}

dan Mosier (1984):

 _{Pada setiap tahap dalam sekuens transaksi, pastikan bahwa data}

apapun yang dibutuhkan pemakai tersedia pada tampilan.

 _{Tayangkan data kepada pemakai dalam bentuk}_{yang langsung}

dapat digunakan; jangan mengharuskan pemakai mengonversikan data yang ditampilkan.

 _{Untuk setiap jenis tampilan data, pertahankan}_{format yang}

konsisten dari satu tampilan ke tampilan lainnya.

(39)

Perancangan Layar (

Lanj.

)



_{Pedoman Smith dan Mosier}

—

_Lanj.

 _Gunakan_pernyataan _positif_{, bukan negatif.}

 _Gunakan_{prinsip logis dalam pengurutan}_{senarai (list);}

jika tidak ada aturan khusus, urutkan secara alfabetis.

 _Buat_{kolom data alfabetis rata kiri}_{agar mudah ditelusuri.}  _{Pada tampilan banyak halaman, berikan}_{label pada setiap}

halaman untuk menunjukkan hubungan dengan halaman lainnya.

(40)

Perancangan Layar (

Lanj.

)



_{Pedoman Smith dan Mosier}

—

_Lanj.

 _{Awali setiap tampilan dengan}_{judul atau}_header_yang

menggambarkan secara singkat isi atau tujuan tampilan; sisakan paling sedikit satu baris kosong antara judul dan isi tampilan.

 _{Untuk kode ukuran, simbol yang lebih besar tingginya}_paling

sedikit 1.5 kali tinggi simbol berikut yang lebih kecil.

 _Gunakan_{kode warna untuk aplikasi}_{sehingga pemakai}

dapat membedakan dengan cepat berbagai kategori data, khususnya ketika data item terpencar pada tampilan.

(41)

Perancangan Layar (

Lanj.

)



_{Pedoman Smith dan Mosier}

—

_Lanj.

 _{Jika digunakan kedipan (blink), kecepatan}_{kedip harus}

antara 2-5 hertz, dengan minimum duty cycle (ON interval) 50 persen. Untuk tabel besar yang melebihi kapasitas display,

pastikan pemakai

 _dapat_{melihat kepala kolom dan label}_{baris di semua}

bagian.

 _{Jika kebutuhan tampilan data berubah, sediakan cara bagi}

pemakai (atau administrator sistem) untuk melakukan