GAYA INTERAKSI

Oky Dwi Nurhayati, ST, MT email: okydn@undip.ac.id

Topik Bahasan
Pendahuluan Menus Rancan an nonantropomor!ik Perancan an layar

Pendahuluan
"nteraction : dialo antara komputer dan pen una #e$e$erapa aplikasi san at $er$eda dalam cara dan aya %style& interaksinya #e$erapa 'enis style yan umum diantaranya adalah( command line inter!ace menus natural lan ua e )uestion*answer and )uery dialo ue !orm+!ills and spreadsheets editor * word processor direct manipulation ,"MP

Commnad line interface

Serin dise$ut command entry Mem$uat pemakai $aru men in at struktur and ar umen

peru$ah -ata perintah mem$eri .ke$e$asan/ kepada pemakai San at !le0i$el, $ahkan dapat diran kai dan memiliki $anyak ar umen 1anya sedikit mem$utuhkan ruan pada layar komputer Se$aiknya diper unakan oleh pemakai $erpen alaman atau ahli misalnya pen unaan system operasi seperti DOS, 2N"3, linu0 4ontoh : perintah+perintah pada DOS : type, dir

Menus dan Navigasi

Memun kinkan pemakai men in at $er$a ai pilihan yan

tersedia Mem$im$in pemakai secara $ertahap dalam men unakan aplikasi Perlu di or anisasikan, sehin a tidak !leksi$el Mem$utuhkan $anyak tempat pada layar komputer Se$aiknya di unakan oleh pemakai pemula 4ontoh : ,indows system

Organisasi Semantik Menu

Single menu

Linear Sequence

Tree Structure

Cyclic Network

Acyclic Network

T pe!tipe dari menu

Single Menus

+ Satu dari dua pilihan %#inary menus& + 50tended menus, menampilkan $anyak pilihan den an men unakan teknik+teknik seperti scroll$ar, pulldown menus and pup up menus: dilihat dari cara permunculannya di layar.

Single menus
Multiple selection: beberapa pilihan dari banyak pilihan yang disediakan

Multiple-item menus radio buttons

Single Menu "Lanj.#

Pull+down and pop+up menus

Single Menu "Lanj.#

Scrollin and two+dimensional menus

Single Menu "Lanj.#

6lphasliders
Actor: Connery! Sean A C "# $ % & 'N ( ) S T* +

5m$edded links "conic menus, tool$ars, or palettes

(inear Se)uen*es + Multiple Menus

$%&'%

Tree!Stru*tured Menus
-etika kumpulan item $erkem$an dan men'adi sulit

dipelihara dalam kendali intelektual, perancan dapat mem$entuk kate ori item+item yan serupa, mem$entuk struktur tree. 4ontoh pen elompokan:
7aki+laki, perempuan 1ewan, sayuran, mineral 8onts, si9e, style, spacin

$'&'%

Tree!Stru*tured Menus "Lanj.#

Depth :ersus #readth:
Depth: 'umlah le:el. Breadth: 'umlah item per le:el.

Pen elompokan semantik:

-elompokkan item+item yan serupa secara lo is. #entuk kelompok yan melin kupi semua kemun kinan. Pastikan item tidak o:erlap. ;unakan peristilahan yan dikenal.

$,&'%

A* *li* + . *li* Menu Net/orks

-adan +kadan le$ih cocok daripada struktur tree. Memun kinkan 'alur dari $a ian tree yan $er$eda, tidak

men haruskan pemakai memulai dari menu utama. Secara alami terdapat pada:
1u$un an sosial. <alur transportasi. -utipan dalam 'urnal ilmiah.

Mem$utuhkan penelusuran $alik.

$-&'%

Pergerakan .epat pada Menu

Menu den an typeahead Nama menu atau $ookmarks Menu macros

$0&'%

Menu dengan T peahead

Pentin 'ika menu sudah serin di unakan sementara waktu

respons atau kecepatan tampil lam$at. Pendekatan BLT %Bacon, Lettuce, Tomato Sandwich&: pem$entukan mnemonik dari pen a$un an huru!+huru! pilihan menu.

$1&'%

Nama Menu atau Bookmarks

Penamaan sederhana memudahkan pemakai men akses menu

secara lan sun . ,e$ $rowser menyediakan bookmarks atau favorites se$a ai 'alan pintas $a i pemakai untuk menu'u situs yan pernah dikun'un i.

$2&'%

Menu Ma*ros
Perintah yan serin di unakan dapat direkam dan disimpan

se$a ai makro. Pada $e$erapa so!tware, makro dapat ditempatkan di toolbar se$a ai ikon.

$3&'%

Tata (etak Menu

<udul Penamaan pilihan menu Tata letak dan desain ra!is

%4&'%

Tata (etak Menu5 6udul

Menu tun al: <udul yan deskripti!. Menu tree: Nama pilihan harus sama den an 'udul halaman

yan dipan il.

%$&'%

Tata (etak Menu5 Penamaan Pilihan Menu

;unakan peristilahan yan dikenal dan konsisten. Pastikan item dapat di$edakan dari pilihan lain. ;unakan pemilihan kata yan konsisten dan sin kat. Tempatkan kata kunci di kiri.

%%&'%

Tata (etak Menu5 Tata (etak dan 7esain Gra8is

Perhatikan kendala seperti le$ar dan tin i layar, kecepatan

tampil, character set, dan highlighting. #uat pedoman*panduan untuk komponen+komponen: 'udul, penempatan item, petun'uk, pesan kesalahan, dan laporan status.

%'&'%

Pesan Kesalahan
Dasar+dasar untuk mempersiapkan pesan sistem yan $aik:
-etertentuan %specificity& Panduan konstrukti! dan nada positi! Pemilihan kata $erpusat pemakai 8ormat !isik yan sesuai

Ketertentuan "Spe*i8i*it #
Buruk S,NTA- #))() 0LL#$AL #NT), 0N*AL0" "ATA 3A" 40L# NAM# Baik .nmatched le/t parenthesis Type /irst letter: Send! )ead! or "rop "ays range /rom 1 to 21 4ile names must begin with a letter

Panduan Konstrukti8 dan Nada Positi8

6#6NDON5D. Buruk: 2ND58"N5D 76#57S. Buruk: "775;67 ST6. ,RN. Baik: String space consumed5 )e6ise program to use shorter strings or e7pand string space5 Baik: "e/ine statement labels be/ore use5 Baik: )#T.)N statement cannot be used in a 4.NCT0(N subprogram5
Buruk: D"S6STRO2S STR"N; O=5R87O,. <O#

Pemilihan Kata Berpusat Pemakai

Minta maa! atas kesalahan. <an an menyalahkan pemakai. 4ontoh:
Buruk: "lle al telephone num$er. 4all a$orted. 5rror num$er

>?@+ARB.C. 4onsult your manual !or !urther in!ormation. Baik: ,eDre sorry, $ut we were una$le to complete your call as dialed. Please han up, check your num$er, or consult the operator !or assitance.

9ormat 9isik ang Sesuai

;unakan kom$inasi huru! $esar dan kecil. 1indari tampilan hanya nomor kode kesalahan. Perin atan den an suara $er una tapi dapat memalukan(

pemakai harus dapat men endalikannya.

Pengem:angan Pesan ang E8ekti8

Tin katkan perhatian pada perancan an pesan. -e'elasan dan

konsistensi harus diperhatikan. 7akukan quality control. Pesan harus disetu'ui pro rammer, pemakai, dan spesialis "M-.

Pengem:angan Pesan ang E8ekti8 "Lanj.#

#uat pedoman %guidelines&: Nada positi!
Hindari: "775;67, "N=67"D, 5RROR, ,RON; P6SS,ORD. Sebaiknya: Eour password did not match the stored password. Please try a ain. Hindari: SENT63 5RROR, "N=67"D D6T6. Sebaiknya: Dress si9es ran e !rom > to FB.

Spesi!ik dan 'elaskan masalah dalam istilah pemakai. Tempatkan pemakai pada kendali terhadap situasi. 8ormat yan rapi, konsisten, dan dapat dipahami.

Hindari: "N4ORR54T 4OMM6ND. Sebaiknya: Permissi$le commands are: S6=5, 7O6D, or 53P76"N.

Pengem:angan Pesan ang E8ekti8 "Lanj.#

7akukan u'i penerimaan. 2'i pesan kepada komunitas

pemakai untuk men etahui apakah dapat dipahami. -umpulkan data kiner'a pemakai. #ilamana mun kin, aksi pemakai perlu direkam untuk studi le$ih lan'ut.

Ran*angan Nonantropomor8ik
Antropomorfik: mempunyai si!at atau pri$adi manusia. 4ontoh instruksi:
Antropomorfik: 1i there, <ohnG "tDs nice to meet you, " see

youDre ready now. Nonantropomorfik: Press the 5nter key to $e in session.

Ran*angan Nonantropomor8ik "Lanj.#

1al+hal yan perlu dipertim$an kan:
Pem$erian si!at cerdas, $e$as, $erkehen+dak $e$as, dan

$erpen etahuan kepada komputer dapat menipu, mem$in un kan, dan menyesatkan pemakai. Pentin untuk mem$edakan oran den an komputer. 6ntarmuka antropomor!ik dapat mem$uat kete an an $a i $e$erapa oran .

Ran*angan Nonantropomor8ik "Lanj.#

Se$aiknya perancan mem!okuskan pada pemakai dan

men hindari kata anti.

Buruk: " will $e in the lesson when you press R5T2RN. Lebih baik: Eou can $e in the lesson $y pressin R5T2RN. Paling baik: To $e in the lesson, press R5T2RN.

Pedoman Peran*angan Nonantropomor8ik

1indari menampilkan komputer se$a ai manusia. Pilih tokoh yan sesuai dalam pen enalan atau se$a ai

pemandu. 1ati+hati dalam merancan wa'ah manusia atau tokoh kartun den an komputer. Tokoh kartun cocok di unakan di ame atau so!tware anak+ anak.

Pedoman Peran*angan Nonantropomor8ik "Lanj.#

Rancan antarmuka yan dapat dimen erti, dapat

diramalkan, dan dapat dikendalikan. ;unakan orientasi dan keadaan selesai dari sudut pandan pemakai. <an an unakan ."/ ketika komputer menan api aksi pemakai. ;unakan .you/ hanya untuk memandu pemakai dan menye$utkan !akta+!akta.

Peran*angan (a ar
5nam kate ori prinsip yan menyin kapkan kompleksitas tu as perancan

%Mullet dan Sano, FCC>&: 5le an dan sederhana: kesatuan, dipikirkan den an $aik, dan cocok. Skala, kontras dan proporsi: ke'elasan, harmoni, akti:itas, dan pem$atasan. Or anisasi dan struktur :isual: pen elompokan, hierarki, hu$un an, dan keseim$an an. Modul dan pro ram: aplikasi yan !okus, !leksi$ilitas, dan konsisten. ;am$ar dan representasi: kese eraan, keumuman, kohesi, dan karakterisasi. ;aya: keunikan, keterpaduan, kelen kapan, dan kesesuaian.

Peran*angan (a ar "Lanj.#
#e$erapa $utir dari pedoman tampilan layar dari Smith

dan Mosier %FC?H&:

Pada setiap tahap dalam sekuens transaksi, pastikan $ahwa data

apapun yan di$utuhkan pemakai tersedia pada tampilan. Tayan kan data kepada pemakai dalam $entuk yang langsung dapat digunakan( 'an an men haruskan pemakai men on:ersikan data yan ditampilkan. 2ntuk setiap 'enis tampilan data, pertahankan format yang konsisten dari satu tampilan ke tampilan lainnya. ;unakan kalimat yang pendek dan sederhana.

Peran*angan (a ar "Lanj.#
Pedoman Smith dan Mosier Lanj. ;unakan pernyataan positif, $ukan ne ati!. ;unakan prinsip logis dalam pengurutan senarai %list&( 'ika tidak ada aturan khusus, urutkan secara al!a$etis. #uat kolom data alfabetis rata kiri a ar mudah ditelusuri. Pada tampilan $anyak halaman, $erikan label pada setiap halaman untuk menun'ukkan hu$un an den an halaman lainnya.

Peran*angan (a ar "Lanj.#
Pedoman Smith dan Mosier Lanj. 6wali setiap tampilan den an judul atau header yan men am$arkan secara sin kat isi atau tu'uan tampilan( sisakan palin sedikit satu $aris koson antara 'udul dan isi tampilan. 2ntuk kode ukuran, sim$ol yan le$ih $esar tin inya paling sedikit !" kali tin i sim$ol $erikut yan le$ih kecil. ;unakan kode #arna untuk aplikasi sehin a pemakai dapat mem$edakan den an cepat $er$a ai kate ori data, khususnya ketika data item terpencar pada tampilan.

Peran*angan (a ar "Lanj.#
Pedoman Smith dan Mosier Lanj. <ika di unakan kedipan %$link&, kecepatan kedip harus antara $%" hert&, den an minimum duty cycle %ON inter:al& >I persen. 2ntuk ta$el $esar yan mele$ihi kapasitas display, pastikan pemakai dapat melihat kepala kolom dan label $aris di semua $a ian. <ika ke$utuhan tampilan data $eru$ah, sediakan cara $a i pemakai %atau administrator sistem& untuk melakukan perubahan yang diinginkan!