KATA PENGANTAR

Alhamdulillah, pertama penulis mengucapkan rasa syukur dan segala puji kepada

Allah SWT yang telah melimpahkan segala Rahmat dan KaruniaNYA, sehingga modul

Interaksi Manusia Komputer ini dapat diselesaikan. Modul Interaksi Manusia

Komputer ini diharapkan dapat mendukung mahasiswa dalam memahami matakuliah

Interaksi Manusia Komputer. Modul ini dibuat berdasarkan sumber-sumber yang

sudah banyak digunakan. Pada modul ini membahas mengenai konsep Interaksi

Manusia Komputer secara umum. Modul ini membahas mengenai Pengenalan IMK,

Faktor Manusia, Peranti Interaktif, Ragam Dialog, Desain Antarmuka, User

Experience dan User Experience Design, Graphical User Interface (GUI), Pembuatan

Komponen Antarmuka Grafis, Mendesain Window, Aspek Ergonomik dan Antarmuka

Masa Depan . Akhir kata, penulis menyampaikan terimakasih yang tulus kepada pihak-

pihak yang telah memberikan bantuan dan dukungannya sehingga penulis dapat

menyelesaikan penulisan modul ini. Pada akhir kata, penulis memohon maaf yang

sebesar-besarnya jika dalam penulisan modul ini masih banyak kekurangan dan

kelemahannya. Penulis memohon adanya sumbangan ide, kritik dan saran untuk

perbaikan penulisan modul ini supaya lebih baik ke depannya.

ii
 DAFTAR ISI

KATA PENGANTAR .................................................................................................... ii

DAFTAR ISI................................................................................................................. iii
Contents .................................................................................................................... iii
BAB I PENGENALAN INTERAKSI MANUSIA KOMPUTER ................................... 1
1.1 Konsep Dasar Interaksi Manusia Komputer (IMK) ........................................ 1
1.2 Bidang Studi.................................................................................................... 8
1.3 Piranti Pengembang Sistem ........................................................................... 10
1.4 Pengelompokkan Piranti Bantu..................................................................... 12
1.5 Strategi Pengembangan Antarmuka ............................................................. 13
BAB II FAKTOR MANUSIA ...................................................................................... 15
2.1 Aspek Sistem Komputer ................................................................................ 15
2.2 Faktor Manusia Dalam Merancang Antarmuka ........................................... 17
BAB III PERANTI INTERAKTIF .............................................................................. 25
3.1 Piranti Input ................................................................................................. 25
3.2 Peranti Penunjuk dan Pengambil .................................................................. 31
3.3 Pengambilan Gambar Terformat .................................................................. 36
3.4 Pengambilan Ganbar Tidak Terformat......................................................... 38
3.5 Gerakan ........................................................................................................ 38
3.6 Layar Tampilan ............................................................................................ 39
BAB IV RAGAM DIALOG ......................................................................................... 43
4.1 Pengertian Ragam Dialog .............................................................................. 43
4.2 Karakteristik Ragam Dialog ......................................................................... 45
4.3 Kategori Ragam Dialog ................................................................................. 47
BAB V DESAIN ANTARMUKA (INTERFACE) ........................................................ 58
5.1 Dasar Desain Antarmuka .............................................................................. 58
5.2 Prinsip Desain Antarmuka ............................................................................ 58
5.3 Interface Desain ............................................................................................ 59
5.4 Desain Software Yang Baik ........................................................................... 59
iii
 5.5 Keputusan Dalam Desain .............................................................................. 60
5.6 Desain Layout ............................................................................................... 61
5.7 Cara Pendekatan........................................................................................... 63
5.8 Prinsip dan Petunjuk Perancangan ............................................................... 64
5.9 Peranti Bantu Sederhana .............................................................................. 65
5.10 Jaringan Semantik Tampilan ........................................................................ 66
BAB VI USER EXPERIENCE (UX) dan USER EXPERIENCE DESIGN .................. 67
6.1 Pengertian User Experience .......................................................................... 67
6.2 Aspek-Aspek User Experience....................................................................... 67
6.3 Alasan Pentingnya User Experience .............................................................. 68
6.4 Aspek-Aspek Pemahanan User Experience ................................................... 69
6.5 Elemen User Experience................................................................................ 71
6.6 Faktor Kesuksesan User Experience ............................................................. 72
6.7 User Experience Design ................................................................................. 72
6.8 Komponen-Komponen User Experience Design ............................................ 73
BAB VII GRAPHICAL USER INTERFACE (GUI) .................................................... 74
7.1 Konsep Dasar GUI ........................................................................................ 74
7.2 Sistem Koordinat .......................................................................................... 74
7.3 Pengaturan Warna ........................................................................................ 75
7.4 Membuat Garis ............................................................................................. 77
7.5 Membuat Kotak, Oval dan Lingkaran .......................................................... 78
7.6 Membuat Grafik ........................................................................................... 79
7.7 Membuat Circle ............................................................................................ 79
BAB VIII PEMBUATAN KOMPONEN ANTARMUKA GRAFIS ................................ 81
8.1 Komponen Antarmuka Grafis ............................................................................. 81
8.2 Mockup .................................................................................................................. 86
8.3 Tools Mockup ........................................................................................................ 87
BAB IX MENDESAIN WINDOW ...................................................................................... 89
9.1 Memilih Jenis Window ......................................................................................... 89
9.2 Mendesain Bagian Window.................................................................................. 91
9.3 Mendesain Primary Window ............................................................................... 93
BAB X ASPEK ERGONOMIK ......................................................................................... 104

iv
 10.1 Pengertian Ergonomik.................................................................................... 104
10.2 Aspek Yang Berhubungan Dengan Ergonomik ........................................... 104
BAB XI ANTARMUKA MASA DEPAN.......................................................................... 108
11.1 Pendahuluan .................................................................................................... 108
11.2 Teknologi Masa Depan ................................................................................... 109
DAFTAR PUSTAKA .......................................................................................................... 117

v
 BAB I

PENGENALAN INTERAKSI MANUSIA KOMPUTER

1.1 Konsep Dasar Interaksi Manusia Komputer (IMK)

Menurut (Santoso, 2010), Istilah ramah dengan pengguna (user friendly) dan

WYSIWYG (what you see is what you get) sering digunakan ketika seseorang

menawarkan sebuah perangkat lunak atau program aplikasi. Anda yang baru pertama

kali mendengar istilah diatas, barangkali akan bingung, tidak mengerti akan arti dari

kedua istilah tersebut. Tetapi sejalan dengan pengalaman Anda mengoperasikan

perangkat lunak atau program aplikasi, secara tidak Anda sadari istilah-istilah diatas

akan merasuk kedalam kumpulan kosakata yang telah Anda miliki sebenarnya.

Istilah ramah dengan pengguna digunakan untuk merujuk kepada karakteristik

yang dimiliki oleh perangkat lunak atau program aplikasi yang mudah dioperasikan.

Istilah inilah yang sering dijadikan sebagai senjata andalan bagi para penjual program

aplikasi dalam memasarkan produknya dan menjadi salah satu kriteria utama bagi

pengembang program. Tetapi di sisi lain, penggunapun juga sering mensyaratkan agar

program aplikasi yang dia gunakan, selain dapat membantu untuk menyelesaikan

pekerjaan dengan hasil yang sesuai keinginan, juga memyediakan berbagai kemudahan

pada saat dia mengoperasikan program yang dimaksud.

Prinsip dasar sebuah sistem computer adalah masukan, proses dan keluaran.

Kepada computer, pengguna memberikan masukan, yang biasanya berupa angka

maupun deretan karakter. Data masukan ini kemudian diolah atau diproses oleh

computer menjadi keluaran yang diinginkan pengguna. Ketika seseorang bekerja

1
 2

dengan computer, secara disadari atau tidak, dia melakukan interaksi dengan computer

dengan menggunakan cara-cara tertentu. Interaksi terjadi ketika pengguna

memasukkan data, yang kemudian akan ditanggapi oleh computer dengan

menampilkan suatu keluaran ke layar tampilan atau ke pencetak.

Dari jargon “masukan, proses, keluaran” diatas, pemgguna memang tidak tahu

menahu (atau tidak ingin tahu) proses yang sesuangguhnya terjadi di dalam sistem

computer. Dengan kata lain, lewat masukan dan keluaranlah, pengguna dan computer

saling berinteraksi. Media interaksi diperlukan agar pengguna dan computer dapat ber

interaksi. Dengan adanya interaksi ini maka pengguna akan merasakan keramahan

sistem computer yang digunakannya.

1. Latar Belakang

a. User meminta pengoperasian komputer maupun masih awam dengan

menggunakan komputer diri sendiri.

b. User muncul rasa ingin tahu yang sangat tinggi maka user tersebut ingin tahu

proses apa yang dilakukan oleh komputer hingga bisa di operasikan oleh

manusia tersebut.

c. User Friendly adalah sebutan untuk komputer yang sering digunakan dan

sangat mudah digunakan oleh orang awam sekalipun pada dunia teknologi

elektronik, meskipun begitu komputer sangat membantu pekerjaan kalau di

operasikan dengan benar.

d. Prinsip yang ada pada komputer yaitu harus mempunyai inputan lalu di

proses dengan melakukan pemrosesan tersebut maka akan menjadi outputan

yang sempurna.
 3

2. Faktor diperlukan IMK

Dalam pembuatan IMK terdapat tiga faktor yang mempengaruhinya yaitu:

a. Manusia

Faktor ini adalah alasan terjadi interaksi karena adanya keinginan dan juga

manusia ingin dapat kemudahan dalam mengerjakan pekerjaannya.

b. Komputer

Faktor ini sebagai media yang digunakan dalam berinterkasi yaitu bahasa

pemrograman, input dan output.

c. Fungsi Pembuatan IMK terjadi karena faktor fungsi, yaitu hasil akhir yang

dapat membantu pekerjaan manusia.

3. Definisi IMK

Interaksi Manusia dan Komputer merupakan suatu disiplin ilmu yang berkaitan

dengan disain, implementasi dan evaluasi dari sistem komputasi yang interaktif untuk

digunakan oleh manusia dan studi tentang ruang lingkupnya (Nidhom, 2019). Interaksi

Manusia dan Komputer merupakan suatu jenis tindakan atau aksi yang terjadi antara

makhluk hidup yaitu manusia dengan sebuah alat yang digunakan untuk mengolah data

atau disebut juga komputer yang mempengaruhi atau memiliki efek satu sama lain

(Nidhom, 2019).

Sedangkan menurut Hewett dalam (Santoso, 2010), Interaksi Manusia

Komputer (IMK) adalah sebuah disiplin ilmu yang mempelajari perancnagan,

implementasi, dan evaluasi sistem komputasi interaktif dan berbagai aspek terkait. Dari

perspektif ilmu computer, focus IMK adalah pada interaksi, khususnya interaksi antara

satu atau lebih manusia (sebagai pengguna computer) dengan satu atau lebih mesin
 4

komputasi (konmputer). Situasi klasik yang sering kita jumpai adalah penggunaan

program berbasis grafik yang interaktif.

Istilh “interaksi manusia dan computer” atau “interaksi manusia dan mesin”

melingkupi dua sisi, yaitu mesin dan manusia. Istilah mesin lebih popular dengan

sebutan computer. Berbagai jenis computer yang kita kenal antara lain mainframe,

workstation dan computer pribadi. Dengan demikian, teknik untuk merancang

antarmuka pada computer dapat digunakan untuk merancang antarmuka pada mesin-

mesin terpadu seperti disebutkan diatas. Tetapi jika kita mengabaikan aspek komputasi

dan interaksi sebuah mesin dan memperlakukan perancangan mesin yang bersifat

mekanisme dan pasif, maka kita tidak akan menganggap hal itu bagian dari IMK.

Karena IMK mempelajari sisi mekanisme dan manusia, tetapi pad kemlompok peranti

yang lebih sempit.

Jika kita melihat “manusia” sebagai sekelompok orang atau sebuah organisasi,

maka antarmuka disini termasuk didalamnya antara lain sistem terdistribusi,

komunikasi antar manusia terbantu computer, atau suatu pekerjaan yang secara

kooperatif dikerjakan oleh sekelompok orang yang mneggunakan bantuan sistem

computer.

4. Antarmuka

Antar muka (User Interface) dapat diartikan gabungan dari elemen elemen dari

suatu sistem, pengguna dan komunikasi dan interaksi keduannya. Pengguna hanya

diperbolehkan berinteraksi dengan produk melalui antarmuka pengguna. Sedangkan

definisi Antarmuka Manusia dan Komputer, adalah merupakan media yang

 5

memungkinkan manusia berinteraksi dengan komputer untuk memberikan suatu

perintah kepada komputer.

5. Teknologi Saat Ini

a. Kondisi Teknologi Saat Ini

Saat ini komputer sudah jauh lebih murah, digunakan untuk hampir setiap

sisi kehidupan, kita mempunyai pengetahuan yang cukup bagaimana agar

computer dapat menyesuaikan dengan kebutuhan kerja manusia.

b. Perubahan Teknologi

Penurunan harga komputer yang sangat dramatis dihasilkan oleh adanya

perkembangan teknologi terutama teknologi microelectronic dalam bentuk

keping silicon (IC). Kemampuan teknologi untuk memperkecil ukuran

rangkaian serta mengkemas sejumlah rangkaian dalam satu keping tipis IC

merupakan langkah menuju perkembangan komputer yang powerful dengan

kapasitas penyimpan yang besar, namun dengan harga yang semakin murah.

Perubahan teknologi di atas telah membuka kemungkinan penggunaan

komputer yang lebih luas. Saat ini kehadiran komputer sudah tidak dapat

dilepaskan dari dunia bisnis dan industri modern. Komputer juga ditemukan

dalam penggunaan aplikasi rumah tangga. Agar komputer dapat diterima

secara luas dan digunakan secara efektif, maka perlu dirancang secara baik.

Hal ini tidak berarti bahwa semua sistem harus dirancang agar dapat

mengakomodasi semua orang, namun komputer perlu dirancang agar

memenuhi dan mempunyai kemampuan sesuai dengan kebutuhan pengguna

secara spesifik.
 6

6. Human Computer Interaction (HCI)

Istilah human-computer interaction (HCI) mulai muncul pertengahan tahun

1980-an sebagai bidang studi yang baru. Istilah HCI mengisyaratkan bahwa bidang

studi ini mempunyai fokus yang lebih luas, tidak hanya sekedar perancangan

antarmuka secara fisik. HCI didefinisikan sebagai disiplin ilmu yang berhubungan

dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk

digunakan oleh manusia dan studi tentang fenomena di sekitarnya. HCI pada

prinsipnya membuat agar sistem dapat berdialog dengan penggunanya seramah

mungkin.

Sebuah Program Aplikasi terdiri dari dua bagian:

a. Bagian Antarmuka

Contoh :

Gambar 1. Antarmuka Login

 7

b. Bagian Aplikasi

Gambar 2. Bagian Aplikasi

Media antarmuka manusia dan computer terbagi menjadi 2, yaitu :

a. Media Tekstual

Media Tekstual adalah “ bentuk sederhana dialog atau komunikasi antara

manusia dan komputer yang hanya berisi teks dan kurang menarik “.

Contoh: perintah “Printf” dalam Borland C++.

Gambar 3. Contoh media tekstual

b. Media GUI (Grapichal User Interface)

Media GUI adalah “bentuk dialog atau komunikasi antara manusia dan

komputer yang berbentuk grafis dan sangat atraktif”.

 8

Contoh antarmuka manusia dengan komputer yang berbentuk grafis

menggunakan pemrograman visual (Visual Basic, Visual Foxpro, Delphi

dan lain-lain).

Contoh :

Gambar 3. Contoh media GUI

1.2 Bidang Studi

Menurut (Santoso, 2004), Tujuan utama disusunnya berbaga cara interaksi

manusia dan computer, pada dasarnya adalah untuk memudahkan manusia dalam

mengoperasikan computer dan mendapatkan berbagai umpan balik yang ia perlukan

selama ia bekerja pada sebuah sistem computer. Dengan kata lain, perancang

antarmuka manusia dan computer berharap agar sistem computer yang ia rancang dapat

mempunyai sifat yang akrab dan ramah dengan penggunanya. Sehingga, jikakita ingin

mempelajari tentang interaksi manusia dan computer secara sungguh-sungguh, baik

secara langsung atau tidak langsung, maka sebenarnya ada beberapa bidang ilmu yang

juga harus kita pahami. Menurut (Santoso, 2004), bidang-bidang ilmu tersebut antara

lain :

1. Ilmu komputer dan teknik

Membahas tentang computer, khususnya dari sisi pernagkat keras, pastilah

tidak terlepas dari pembicaraan tentang teknik elektronika, karena dalam

 9

bidang inilah kita dapat mempelajari banyak sekali aspek yang berhubungan

dengan perangkat keras computer. Selain dari sisi perangkat keras, kita juga

perlu membekali diri dengan keahlian dan sisi perangkat lunak, sehingga kita

mmapu mengimplementaiskan hasil rancangan ke dalam program aplikasi.

2. Psikologi

Diatas telah disebutkan, bahwa kita selalu berharap agar program aplikasi yang

kita suusn dapat dimanfaatkan oleh pengguna lain. Pengguna sendiri

mempunyai sifat yang beraneka ragam. Sehingga, kita sebagai perancang

sistem interaksi manusia computer juga harus memperbaiki aspek psikologi

pengguna untuk dapat memahami bagaimana pengguna dapat menggunakan

sifat dan kebiasaan baiknya, menggunakan persepsi dan pengolahan kognitif

serta ketrampilan motoric yang dimilikinya agar kita dapat menjodohkan mesin

dengan manusia untuk mendapatkan kerjasama yang serasi.

3. Desain grafis dan tipografi

Ada kata bijak, yang mengatakan bahwa “sebuah gambar dapat bermakna sama

dengan seribu kata”. Dalam dunia computer, kata ini dapat diartikan bahwa

gambar dapat digunakan sebagai sarana dialog yang cukup efektif antara

manusia dan computer. Keahlian merancang garfik dan tipografi menjadi salah

satu kunci penting dalam menunjang keberhasilan sistem manusia-komputer,

karena antarmuka yang disusun dapat menjadi semakin luwes dan ampuh.

4. Ergonomik

Ergonomik berhubungan dengan aspek fisik untuk mendapatkan lingkungan

kerja yang nyaman. Bentuk fisik seperti meja dan kursi kerja, layar tampilan,
 10

bentuk papan ketik, posisi duduk, pengaturan lampu, kebersihan tempat kerja

dan beberapa aspek lain yang sangat berpengaruh pada kenyamaman

lingkungan kerja.

5. Antropologi

Pandangan mendalam tentang cara kerja berkelompok yang masing-masing

anggotanya diharapkan memberikan kontribusi teknologi pengetahuan sesuai

dengan bidangnya masingmasing.

6. Linguistik

Pada saat kita menggunakan computer, seolah-olah kita sedang melakukan

dialog dengan computer yang ada dihadapan kita. Untuk dapat melakukan

dialog tentunya kita memerlukan sarana komunikasi yang memadai. Sarana

komunikasi ini berbentuk bahasa khusus misalnya bahasa grafis, bahasa alami,

bahasa menu atau bahasa perinta. Linguistik merupakan cabnag ilmu

pengetahuan yang mempelajari tentang bahasa.

7. Sosiologi

Berkaitan dengan studi tentang pengaruh sistem manusia dengan komputer

dalam struktur sosial. Misal: Dampak komputerisasi terhadap keberadaan

seorang user di sebuah perusahaan.

1.3 Piranti Pengembang Sistem

Menurut (Santoso, 2010), salah satu kriteria yang harus dimiliki oleh sebuah

pernagkat lunak untuk mendapatkan predikat “ramah dengan pengguna” adalah

perangkat lunak itu mempunyai antarmuka yang bagus, mudah dioperasikan, mudah
 11

dipelajari dan pengguna selalu merasa senang untuk menggunakan perangkat lunak

tersebut.

Untuk mempercepat proses perancangan dan pengembangan antarmuka

(interface) diperlukan piranti pengembangan sistem seperti pemrogaman visual (Visual

Basic, Visual Foxpro, Delphi, Visual C++ dan lain-lain).

Menurut (Santoso, 2010), Keuntungan menggunakan piranti bantu adalah :

1. Antarmuka yang dihasilkan menjadi lebih baik

a. Hasil rancangan sementara segera dapat dibuat prototype dan

diimplementasikan, bahkan sebelum aplikasinya ditulis.

b. Perubahan yang diinginkan pengguna dapat segera dilakukan karena

antarmukanya mudah dimodifikasi.

c. Sebuah aplikasi dapat mempunyai lebih dari sebuah antarmuka.

d. Sejumlah aplikasi yang berbeda dapat mempunyai antarmuka yang

konsisten, karena mereka dapat dibangun dengan menggunakan peranti

bantu yang sama.

e. Membeirkan “wajah” yang unik dari sebuah program aplikasi, dan

“sentuhan” khusus kepada sebuah program aplikasi.

f. Memungkinkan sejumlah ahli bekerja bersama untuk memberikan

kontribusinya masing-masing, misalnya ahli grafis, psikolog, ahli kognitif,

maupun spesialis human factor.

2. Program antarmukanya menjadi mudah ditulis dan lebih ekonomis dalam

pemeliharaannya.
 12

a. Program antarmuka menjadi lebih terstruktur dan lebih modular karena

sudah dipisahkan dari aplikasinya. Hal ini memungkinkan pengguna untuk

mengubah antarmuka tanpa mempengaruhi aplikasinya, dan memungkinkan

pemrogram untuk mengubah program aplikasi tanpa mengubah

antarmukanya.

b. Program antarmuka lebih reusable karena peranti bantu menggabungkan

bagian-bagian yang sama.

c. Kehandalan antarmuka menjadi lebih tinggi, karena program itu

dibangkitkan secara otomatis dari tingkat spesifikasi yang lebih tinggi.

d. Spesifikasi antarmuka menjadi lebih mudah dinayatakan, divalidasi dan

dievaluasi serta dimodifikasi.

e. Ketergantungan peranti diisolasi didalam peranti bantu, sehingga

antarmukanya lebih mudah di port ke berbagai aplikasi pada lingkungan

yang berbeda.

1.4 Pengelompokkan Piranti Bantu

Berdasarkan fungsinya piranti bantu terbagi menjadi 2 yaitu :

1. Piranti bantu Aplikasi (application software)

Program yang biasa dipakai oleh pemakai untuk melakukan tugas-tugas,

misalnya membuat dokumen, manipulasi photo dan membuat laporan.

2. Piranti bantu Sistem (System Software)

Program yang digunakan untuk mengontrol sumber daya komputer seperti CPU

dan hardware masukan / keluaran.

 13

1.5 Strategi Pengembangan Antarmuka

Sebuah program aplikasi terdiri atas dua bagian penting. Bagian pertama adalah

bagian antarmuka yang berfungsi sebagai sarana dialog antara manusia dengan

computer yang menjalankan program aplikasi tersebut. Bagian kedua adalah bagian

aplikasi yang merupakan bagian yang berfungsi untuk menghasilkan informasi

berdasar olahan data menggunakan suatu algoritma tertentu. Bagian antarmuka dan

bagian aplikasi dapat dikatakan merupakan dua bagian terpisah yang masing-masing

diimplementasikan secara terpisah pula. Bagian antarmuka lebih banyak berurusan

dengan cara penyajian informasi yang semudah dan semenarik mungkin, dan bagian

aplikasi akan mengiplementasikan suatu atau beberapa algortima yang saling

berhubungan untuk menyelesaikan suatu persoalan. Implementasi bagian antarmuka

dan bagian aplikasi dapat dikerjakan secara parallel oleh tim yang berbeda.

Menurut (Santoso, 2010), secara garis besar, pengembangan bagian antarmuka

perlu memperhatikan beberapa hal berikut :

1. Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer.

2. Berbagai informasi yang berhubungan dengan karakteristik dialog, seperti

ragam dialog, struktur, isi tekstual dan grafis, tanggapan waktu dan kecepatan

tampilan.

3. Penggunaan prototipe yang didasarkan pada spesifikasi dialog formal yang

disusun secara bersama-sama antara (calon) pengguna dan perancang sistem,

serta peranti bantu yang mungkin dapat digunakan untuk mempercepat proses

pembuatan prototype.
 14

4. Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses prototype

yang telah dilakukan, antara lain berdasarkan pada analisis atas transaksi dialog

secara empiric menggunakan uji coba pada sejumlah kasus, umpan balik

pengguna yang dapat dikerjakan dengan Tanya jawab maupun kuesioner, dan

beberapa analiss yang dikerjakan oleh ahli antarmuka.

Seperti yang sudah dijelaskan diatas, IMK adalah bidang ilmu yang terbuka

untuk dipengaruhi dan mempengaruhi berbagai disiplin ilmu lain, yang cakupannnya

meliputi teknik dan ilmu computer sampai ilmu pengetahuan tentang manusia, seperti

psikologi, linguistic dan ergonomis.

 BAB II

FAKTOR MANUSIA

2.1 Aspek Sistem Komputer

Menurut (Santoso, 2010), sistem computer terdiri dari tiga aspek, yakni

perangkat keras (hardware), perangkat lunak (software) dan manusia (brainware).

Ketiga aspek itu saling bekerja sama agar sebuah sistem computer dapat bekerja dengan

sempurna. Dengan kata lain, untuk dapat merancang sebuah sistem interaksi manusia

dan computer yang sempurna, perancang tidak saja harus mengetahui aspek teknis dari

sistem computer tersebut, tetapi juga harus mengerti bagaimana manusia mengolah

informasi.

1. Pemodelan Sistem Pengolahan

Sistem pengolahan pada manusia dan komputer pada dasarnya masing-masing

mempunyai piranti masukan (input), sistem pengolahan (process), dan piranti keluaran

(output), ketiga piranti tersebut bekerja secara berurutan. Pada manusia piranti

masukan (input) terletak pada panca indera, yang selanjutnya informasi yang diperoleh

akan diproses, diolah didalam memori atau otak yang selanjutnya menghasilkan

keluaran yang sesuai dengan pengolahan dari memori yaitu informasi yang diterima

sebelumnya. Sistem adalah kumpulan dari elemen yang saling terkait dengan tujuan

tertentu. Dalam sistem komputer ada aspek-aspek yang harus diperhitungkan agar bisa

berjalan dengan baik.

Kita menyadari bahwa sistem pengolahan didalam diri seorang manusia

sangatlah kompleks dan tidak mudah dipahami sehingga memodelkan sistem

15
 16

pengolahan didalam diri manusia secara lengkap akan sangat sukar, bahkan tidak

mungkin dilakukan. Tetapi kita dapat melakukan pendekatan sebagai berikut : Sistem

pengolahan manusia terdiri atas pengolahan perseptual, pengolahan intelektial

(kognitif) dan pengolahan motoric, yang semuanya berinteraksi dengan pengingat

manusia. Model ini mempunyai kesamaan dengan sistem computer konvensional yang

mempunyai pengolah atau prosesor, pengingat dan interaksi diantara keduanya melalui

bus.

Perbandingan ini hanya dimaksudkan untuk memudahkan memahami cara

kerja computer dan sistem pengolahan didalam diri manusia, ynag tidak menyajikan

operasi yang sebenarnya terjadi didalam diri manusia.

2. Jenis-Jenis Aspek Sistem Komputer

Ada 3 Aspek Sistem Komputer:

a. Aspek Perangkat Keras (Hardware).

Serangkaian unsur-unsur yang terdiri dari beberapa perangkat keras

komputer yang digunakan untuk membantu proses kerja manusia

(Brainware ). Contoh : CPU, Monitor, Keyboard, Harddisk, Disk drive,

Laptop, Barcode dll.

b. Aspek Perangkat Lunak (Software).

Serangkaian unsur-unsur yang terdiri dari beberapa perangkat lunak

program komputer yang digunakan untuk membantu proses kerja manusia

( Brainware ). Contoh : Sistem Software, Application Software, Package

Software.
 17

c. Aspek Manusia (Brainware).

Tenaga pelaksana yang menjalankan serta mengawasi pengoperasian

sistem unit komputer didalam proses pengolahan data untuk menghasilkan

suatu informasi yang tepat waktu, tepat guna dan akurat. Contoh: Sistem

Analis, Programmer, operator, Technical Support.

2.2 Faktor Manusia Dalam Merancang Antarmuka

1. Penglihatan

Indera penglihatan atau mata, barangkali merupakan salah satu panca indera

manusia yang paling berharga. Dengan penglihatan yang baik kita dapat menikmati

berbagai keindahan dan aneka warna dunia nyata. Pada saat bekerja dengan komputer,

mata manusia sangat penting untuk berinteraksi. Banyaknya manusia pemakai

komputer ada yang normal atau kurang normal matanya misalnya plus atau minus,

perlu diperhatikan.

Menurut (Santoso, 2010), beberapa ahli bependapat bahwa mata manusia

terutama digunakan untuk menghasilkan persepsi yang terorganisir dari gerakan,

ukuran, bentuk, jarak, posisi relative, tekstur, dan warna. Dalam dunia nyata, mata

sellau digunakan untuk melihat semua bentuk tiga dimensi. Dalam sistem computer

yang menggunakan layar dua dimensi, mata kita “dipaksa” untuk dapat “mengerti”

bahwa obyek pada layar tampilan, yang sesungguhnya berupa obyek dua dimensi,

harus dipahami sebagai obyek tiga dimensi dengan teknik-teknik tertentu.

 18

a. Luminas

Luminasi adalah Banyaknya cahaya yang dipantulkan oleh permukaan

obyek. Besaran ini mempunyai satuan lilin/meter persegi. Semakin besar

luminans dari sebuah obyek, rincian obyek yang dapat dilihat oleh mata

juga akan semakin bertambah. Diameter bola mata akan mengecil

sehingga akan meningkatkan kedalaman fokusnya. Bertambahnya

luminasi sebuah obyek atau layar tampilan akan menyebabkan bertambah

sensitive terhadap kerdipan (flicker).

b. Kontras

Kontras adalah Hubungan antara cahaya yang dikeluarkan oleh suatu

obyek dan cahaya dari latar belakang obyek tersebut. Kontras didefinisikan

sebagai selisih antara luminasi obyek dengan latar belakangnya dibagi

dengan luminasi latar belakang. Nilai kontras positif akan diperoleh jika

cahaya yang dipancarkan oleh sebuah obyek lebih besar disbanding yang

dipancarkan oleh latar belakangnya. Nilai kontras negative dapat

menyebabkan obyek yang sesungguhnya “terserap” oleh latar belakang,

sehingga menjadi tidak tampak.

c. Kecerahan

Kecerahan adalah tanggapan subyektif pada cahaya. Tidak ada arti khusus

dari tingkat kecerahan seperti pada luminasi dan kontras, tetapi luminasi

yang tinggi berimplikasi pada kecerahan yang tinggi pula.

 19

d. Sudut dan Ketajaman Penglihatan

Sudut penglihatan (visual angle) didefinisikan sebagai sudut yang

berhadapan oleh objek pada mata. Ketajaman penglihatan (visual acuity)

adalah sudut penglihatan minimum ketika mata masih dapat melihat

sebuah objek dengan jelas

e. Medan Penglihatan

Medan penglihatan adalah sudut yang dibentuk ketika mata bergerak ke

kiri terjauh dan ke kanan terjauh. Menurut (Santoso, 2010) dibagi 4

daerah:

1) Daerah pertama adalah tempat kedua mata mampu melihat sebuah

obyek dalam keadaaan yang sama, juga disebut dengan penglihatan

binokuler

2) Daerah kedua adalah tempat terjauh yang dapat dilihat oleh mata kiri

ketika mata kiri kita gerakkan ke sudut paling kiri, disebut dengan

penglihatan monokuler kiri.

3) Daerah ketiga adalah tempat terjauh yang dapat dilihat oleh mata

kanan ketika mata kiri kita gerakkan le sudut paling kanan, disebut

dengan penglihatan monokuler kanan

4) Daerah keempat adalah daerah buta, yakni daerah yang sama sekali

tidak dapat dilihat oleh kedua mata.

f. Warna

Keselarasan penggunaan warna. :

1) Mata normal mampu membedakan 128 warna yang berbeda.

 20

2) Warna yang sesuai akan mempertinggi efektifitas tampilan grafis, tapi

jika tidak sesuai dengan pengguna justru pengguan akan menerima

informasi yang salah.

Berikut adalah Kombinasi warna terbaik :

Gambar 2.1 Kombinasi warna terbaik

Berikut Kombinasi warna terjelek

Gambar 2.2 Kombinasi warna terjelek

 21

Menurut (Santoso, 2010) ada 3 Aspek sebagai petunjuk dalam pemilihan

warna:

1) Aspek Psikologis

a) Hindari penggunaan tampilan yang secara simultan,

menampilkan warna tajam. Merah, jingga, kuning dan hijau

dapat dilihat bersama-sama tanpa perlu pemfokusan kembali,

tetapi cyn, biru dan merah tidak dapat dilihat secara serempak

dengan mudah.

b) Hindari warna biru muda untuk teks, garis tipis dan bentuk yang

kecil. Sistem penglihatan mata kita tidak diatur untuk rangsangan

yang terinci, tajam serta bergelombang pendek.

c) Hindarkan warna berdekatan yang berbeda dalam hal komponen

warna biru.

d) Untuk membedakan warna, pengamat yang lebih tua

memerlukan tingkat ketajaman yang lebih tinggi.

e) Warna akan berubah kenampakannya ketika cahaya sekeliling

berubah. Tampilan akan berubah dibawah cahay sekeliling yang

berbeda.

f) Besarnya perubahan warna yang dapat dideteksi bervariasi untuk

warna yang berbeda. Perubahan kecil dalam warna merah dan

ungu lebih sukar dideteksi disbanding warna lain seperti kuning

dan biru-hijau.
 22

g) Hindari warna merah dan hijau yang ditempatkan secara

berseberangan pada tampilan berskala besar. Warna yang cocok

adalah biru dan kuning.

h) Warna yang berlawanan dapat digunakan bersama-sama. Merah

dengan hijau, atau kuning dengan biru, merupakan kombinasi

yang baik untuk tampilan sederhana.

i) Untuk pengamat yang mempunyai kelemahan dalam melihat

warna, hindarkanlah perubahan warna tunggal.

2) Aspek Perseptual

a) Tidak semua warna mempunyai discernible yang sama. Secara

perseptual kita memerlukan peruabahan yang besar dalam

panjang gelombang agar kita dapat merasakan perubahan warna

pada suatu bagian spectrum, dan perubahan yang lebih kecil pada

bagian spectrum yang lain.

b) Luminasi tidak sama dengan kecerahan.

c) Ketajaman (lightness) dan kecerahan (brightness) dapat

dibedakan pada bentuk tercetak tapi tidak pada tampilan warna.

d) Tidak semua warna mudah dibaca. Warna latar belakang gelap

seperti merah, biru, magenta, coklat dll akan memberi

kenampakan yang lebih baik dibanding warna yang lebih cerah.

3) Aspek Kognitif

a) Jangan menggunakan warna yang berlebihan. Barangkali aturan

yang terbaik adalah menggunakan warna secara berpasangan.

 23

b) Waspadalah terhadap manipulasi warna secara tidak linier pada

layar tampilan dan bentuk cetakan.

c) Kelompokkan elemen-elemen yang saling berkaitan dengan latar

belakang yang sama.

d) Warna yang sama “membawa” pesan serupa.

e) Kecerahan akan menarik perhatian.

f) Urutkan warna sesuai dengan posisi spektralnya.

g) Warna hangat dan dingin sering digunakan untuk menujukkan

tingkat tindakan. Warna yang hangat (berpanjang gelombang

besar) biasanya digunakan untuk menunjukkan adanya tindakan

atau tanggapan yang diperlukan. Warna yang dingin biasanya

digunakan untuk menunjukkan status atau informasi latar

belakang. Warna-warna yang hangat akan Nampak lebih

mendekat kearah pengguna, sementara warna yang dingin

cenderung menjauhi pengguna.

2. Pendengaran

Kebanyakan manusia mendeteksi suara dalam frekuensi 20 Hertz – 20 Khertz

Manusia juga mendengar suara antara 50 dB (decible) – 70 dB. Telinga manusia akan

rusak mendengar lebih dari 140 dB. Manusia tidak mendengar frekuensi kurang dari

20 dB.

3. Sentuhan

Sentuhan merupakan sarana manusia untuk berinteraksi. Sentuhan menduduki

urutan ketiga setelah penglihatan dan pendengaran. Sentuhan barangkali merupakan

 24

sarana interaksi yang lebih penting, terutama pada orang buta, selain suara (jika ia tidak

tuli). Contoh dalam penggunaan papan ketik (keyboard) atau tombol, maka manusia

akan lebih nyaman apabila tombol atau keyboard tidak berat proses penekanannya.

Perkembangan teknologi mengarah pada pemakaian komputer dengan sistem sentuhan

layar atau touch screen.

4. Pemodelan Sistem Pengolahan

Model sistem pengolahan manusia terdiri dari pengolahan perseptual,

pengolahan intelektual dan pengendalian motorik yang berinteraksi dengan memori

manusia. Model sistem komputer terdiri dari pengolah (processor) dan memori.

Interaksi keduanya melalui bus

5. Pengendalian Motorik

Responder utama pada diri seorang manusia adlaah dua buah tangan yang

terdiri atas 10 jari, dua kaki dan satu suara. Kita perlu menyadari batasan yang dimiliki

oleh responder ini. Sebagai contoh, kebanyakan orang yang terbiasa melakukan tugas

pengetikan menggunakan 10 jari untuk mendapatkan kecepatan 1000 huruf per menit,

barnagkali merupakan kemmapuan yang umum. Namun demikian, bagi anda yang

mengetik dengan 2 jari (yakni jari telunjuk), kecepatan 400 huruh per menit pun

barnagkali sulit untuk dicapai. Contoh ini menunjukkan bahwa pengendalian motoric

pada diri manusia sebenarnya dapat dilatih untuk mencapai taraf kemampuan tertentu.
 BAB III

PERANTI INTERAKTIF

3.1 Piranti Input

Input berhubungan dengan proses perekaman dan pemasukan data ke dalam

sistem komputer dan memberi perintah ke komputer. Agar dapat berinteraksi dengan

sistem computer secara efektif, pengguna harus mampu mengkomunikasikan

keinginannya dengan cara yang dapat dimengerti sistem komputer.

Mengendalikan suatu kejadian dalam sistem adalah dengan membantu

pengguna untuk menyelesaikan pekerjaannya dengan aman, efektif, efisien, dan jika

mungkin menyenangkan. Pemilihan piranti input harus memberi kontribusi positif

terhadap penggunaan sistem.

Secara umum piranti input yang paling tepat akan memenuhi salah satu faktor

berikut: Pisikolog Pengguna, usia Pengguna tidak dibatasi, Familiar dan Pengalaman.

Misalnya tugas menggambar membutuhkan piranti input yang dapat melakukan

gerakan secara kontinyu, Untuk memilih dari suatu daftar pilihan membutuhkan piranti

input yang dapat melakukan gerakan secara diskret. Sebagai contoh, masukan suara

berguna pada situasi dimana tidak ada permukaan untuk meletakkan keyboard, tetapi

tidak cocok dengan kondisi berderau.

1. Piranti Masukan keyboard

Peranti masukan tekstual dapat dikatakan merupakan peranti masukan standar

yang dijumpai pada semua kompuer. Peranti masukan tekstual lebih dikenal dengan

sebutan papan ketik (keyboard). Oleh pengguna, data akan diketikkan lewat papan

25
 26

ketik yang tergandeng ke sistem computer sebelum data diolah oleh computer yang

dimaksud.

Tombol pada papan ketik (keyboard) dikelompokkan menjadi 4 bagian :

a. Tombol Fungsi (function key)

Keuntungan yang dapat diperoleh dengan adanya tombol fungsi antara lain

1) Mengurangi beban

2) Mudah dipelajari

3) Kecepatan yang lebih tinggi (karena berkurangnya penekanan tombol)

4) Mengurangi kesalahan

Sedangkan kelemahannya adalah tidak adanya standarisasi “isi tombol”

fugsi tersebut.

b. Tombol Alphanumerik (alphanumeric key)

c. Tombol Kontrol (control key)

d. Tombol Numerik (numeric key)

Keyboard QWERTY

a. Umumnya orang sudah familiar dengan layout keyboard yang disebut

dengan “QWERTY”, yaitu susunan huruf tombol kiri atas. Dimana tata

letaknya, mengambil enam tombol pada baris kedua dari tombol

alphanumeric, seperti gambar dibawah ini.

b. Rancangan keyboard ini pertama kali digunakan pada mesin ketik di USA

tahun 1874.
 27

c. Susunan tombol dipilih untuk mengurangi loncatan penekanan tombol

yang tidak sengaja pada mesin ketik manual.

d. Misal huruf ‘s’, ‘t’, dan ‘h’ diletakkan berjauhan meskipun sering

digunakan bersama dalam kalimat bahasa Inggris.

e. Diciptakan oleh Christopher Latham Sholes, 1870-an.

Gambar 3.1 Keyboard QWERTY

Dvorak Layout

a. Diciptakan oleh August Dvorak dan Willian L. Dealey, 1936.

b. Dirancang untuk mengurangi jarak pergerakan jari.

c. Mempercepat ketikan hingga 200 ketikan per menit.

d. Penerimaannya lambat karena pemakai tidak bersedia berusaha berpindah

dari QWERTY.

Gambar 3.2 Dvorak Layout

 28

e. Tata letak Dvorak menggunakan suusnan papan ketik yang sama, tetapi

suusnan hurufnya disusun sedemikian rupa sehingga tangan kanan

dibebani lebih banyak pekerjaan dibanding tangan kiri.

f. Tata letak Dvorak dirancang agar 70 persen dari ketukan jatuh pada home

row, sehingga jari-jemari yang harus mencapai huruf-huruf yang tidak

berada pada posisi home row mempunyai kerja yang lebih ringan, sehingga

mengurangi adanya kelelahan karena pengetikan.

Alphabetik

Tombol-tombol yang ada pada papan ketik dengan tata letak alphabetik disusun

persis seperti pada tata letak QWERTY maupun Dvorak, tetapi susunan

hurufnya berurutan seperti pada urutan alphabet. Bagi pengguna yang bukan

tukang ketik, barangkali tata letak ini cukup membantu. Tetapi, dari hasil

pengujian, penggunaan tata letak seperti ini justru memperlambat kecepatan

pengetikan. Papan ketik dengan tata letak alphabetic juga tidak dapat menyaingi

popularitas tata letak QWERTY, tetapi biasanya banyak ditemui pada mainan

anak-anak, sehingga anak-anak dapat diajar mengenal huruf alphabet.

Gambar 3.3 Alphabetik

 29

Klockenberg

Operator yang sering melakukan pengetikan sering mengeluh karena adanya

beban otot yang berlebihan, terutama pada jari-jemari dan pergelangan tangan.

Sehingga, diperlukan suatu tata letak yang dapat mengurangi beban otot yang

berlebihan tersebut yang salah satunya adalah tata letak Klockenberg.

Gambar 3.4 Klockenberg

Papan Ketik Penyingkatan Kata

Seringkali, seseorang hars menulis dengan cepat karena ia menulis sesuatu yang

sedang diucapkan seseorang, misalnya seorang wartawan yang sedang meliput

wawancara dengan seseorang pada suatu kegiatan tertentu. Jika kita

menggunakan papan ketik dengan berbagai tata letak yang dijelasakan diatas,

yang sering disebut one key at a time keyboard, maka untuk mengetik 10 huruf

kita hars melakukan sepuluh kali ketukan. Sehingga untuk tujuan-tujuan khusus

diatas, digunakanlah suatu papan ketik yang dikenal dengan sebutan chord

keyboard. Dengan chord keyboard ini seseorang dapat menekan kombinasi

tombol untuk menghasikan suat kata atau suku kata. Hal ini sangat cocok bagi

mereka yang harus mencatat ucapan seseorang, misalnya pada proses

pengadilan.
 30

a. Sistem Palantype

Sistem Palantype dapat merekam suara lebih dari 180 kata permenit. Sistem

ini paling sering digunakan untuk mencatat jalannya persidangan di suatu

gedung pengadilan dan sangat jarang digunakan di dalam lingkungan

perkantoran.

Gambar 3.5 Sistem Palantype

b. Sistem Stenotype

Sistem Stenotype. Seperti Anda ketahui, steno adalah jenis tulisan singkat

yang sering digunakan untuk mencatat ucapan seseorang. Jenis tulisan ini

paling banyak digunakan oleh para wartawan yang mencatat hasil

wawancara dengan seseorang.

Gambar 3.5 Sistem Stenotype

 31

3.2 Peranti Penunjuk dan Pengambil

Menurut (Santoso, 2010), peranti penuding dan pengambil (Pointing and

picking device) merupakan “Peranti interaktif yang digunakan untuk

menunjuk/menuding atau menempatkan kursor pada suatu posisi dilayar tampilan dan

untuk mengambil suatu item informasi untuk dipindahkan ketempat lain “. Selain itu,

peranti penuding juga sering digunakan untuk memutar obyek (pada program-program

aplikasi grafis), menggabar garis, menentukan nilai atau besaran, atau untuk

menunjukkan posisi awal dari pemasukan teks. Secara ringkas, peranti-peranti

penuding mempunyai tugas interaktif seperti pemilihan, penempatan, orientasi, jalur,

kuantisasi dan tekstual. Beberapa peranti penuding dan pengambil antara lain adalah

mouse, joystick, trackball, digitizing tablet, light pen dan touch sensitive oanel.

Untuk ulasan diatas, dalam pengontrolan kursor harus ada umpan balik yang

segera Nampak dilayar computer ketika ada gerakan dari suatu peranti. Hal ini

mengarah kepada suatu definisi perbandingan control/tampilan (K/T) yang dinyatakan

sebagai :

1. Mouse

Mouse dapat dikatakan merupakan salah satu peranti alternative yang paling

banyak digunakan. Pada sebagian besar pemakainnya, mouse digunakan untuk

menempatkan kursor (teks atau grafik) pada posisi tertentu di layar computer,

mengaktifkan menu pilihan pada suatu program aplikasi dan banhkan untuk
 32

menggambar. Hal ini bisa dilaksanakan dengan adanya peranti pemantau yang

ada didalan suatu mouse.

a. Mekanis

Bola yang terdapat di mouse akan menggerakan beberapa sensor ketika

mouse digerakan.

b. Mouse Optic

Terdiri dari 2 LED (Light Emitting Diode) dan 2 lensa (photo-transistor)

untuk medeteksi gerakan. Salah satu LED akan mengeluarkan cahaya

berwarna merah dan LED yang lain mengeluarkan cahaya inframerah

Gambar 3.6 Mouse

2. Joystick

Joystick merupakan peranti penuding tak langsung. Gerakan kursor

dikendalikan oleh gerakan tuas atau dengan tekanan pada tuas (pada joystick

absolut). Pada joystick biasanya terdapat tombol yang dapat dipilih atau

diasosiasikan dengan papan ketik. Dalam pengoperasiannya, joystick tidak

memerlukan tempat yang luas. Joystick mempunyai perbandingan K/T yang

berubah-ubah. Untuk joystick absolut, perbandingan K/T didefinisiakn

sebagai :
 33

K/T = prosentase gerakan melingkar x keliling lingkaran

Gerakan kursor

Gambar 3.7 Joustick

3. Trackball

Prinsip kerjanya sama dengan mouse, tapi berbeda dalam cara penggunaanya.

Perbedaan utamanya terletak pada konfigurasinya. Pada mouse, operator harus

menggerakan seluruh badan dari mouse tersebut, sedangkan pada trackball,

badan dari trackball tersebut tetap diam, tetapi tangan operatorlah yang

menggerakkan bola untuk menunjukkan perpindahan kursor.

Arah dan kecepatan kursor pada layar ditentukan oleh arah dan gerakan rotasi

bola yang ada diatas badan trackball. Perbandingan K/T nya sukar untuk

dihitung karena trackball mempunyai efek roda terbang. Tetapi jika efek ini

diabaikan, maka perbandingan K/T mirip dengan perbandingan K/T pada

joystick absolut.

Gambar 3.8 Trackball

 34

4. Pointing Stick

Prinsip kerjanya sama dengan mouse dan cara penggunaannya sama dengan

trackball

Gambar 3.9 Pointing Stick

5. Touch Pad

Gambar 3.10 Touch Pad

6. Touch Screen

Gambar 3.11 Touch Screen

 35

7. Digitizing Tablet / Graphic Tablet

Peranti pengambil data dalam bentuk sederatan koordinat (x,y) yang

menentukan gerakan pena pada media digitasi.

Gambar 3.12 Digitizing Tablet / Graphic Tablet

8. Light Pen

Prinsip kerjanya adalah memantau selisih antara waktu saat elektron mulai

melakukan gerakan dan pada saat lokasi tempat pena menyala. Digitizing

tablet (atau digitizer), juga sering disebut dengan graphic tablet, merupakan

peranti pengambil data dalam bentuk sederetan koordinat (x,y) yang

menentukan gerakan pena atau puck pada meja digitasi. Peranti ini mempunyai

ketelitian yang cukup tinggi. Peranti ini banyak digunakan untuk terapan-

terapan dalam bidang computer aided design (CAD), atau untuk menyalin

gambar yang tersedia kedalam bentuk digital untuk diolah lebih lanjut.

Perbandingan K/T pada digitizer baisanya ditentukan oleh program aplikasi

yang digunakan untuk mengoperasikan digitizer ini, tetapi biasanya bervariasi

antara 0.3 sampai 1.0. Nilai perbandingan K/T yang berada diluar kisaran ini,

khususnya untuk yang lebih besar dari 1.0 maka akan mengakibatkan adanya

distorsi.
 36

Gambar 3.13 Light Pen

3.3 Pengambilan Gambar Terformat

Dipergunakan untuk mengambil citra terformat, bentuk dan format hurufnya

sudah ditentukan. Kategori peranti ini adalah :

1. Bar code Reader

Pola garis-garis hitam putih yang sering djumpai pada barang-barang yang

dijual di toko swalayan.

Gambar 3.14 Bar Code Reader

2. Magnetic Ink Character Recognation (MICR)

Digunakan untuk membaca karakter-karakter khusus yang dicetak dengan tinta

khusus pula. Karakter yang telah diceak dengan tinta dimagnetisasi oleh Peranti

MICR, sehingga dapat dibaca dan diterjemahkan menjadi sinyal digital.

Gambar 3.15 MICR

 37

3. Optical Mark Recognation (OMR)

Peranti yang membaca tulisan pensil dan mengubahnya menjadi bentuk yang

dapat dibaca oleh komputer dengan bantuan refleksi optik dengan mengenali

ketebalan tulisan.

Gambar 3.16 OMR

4. Optical Character Recognation (OCR)

Peranti yang dapat membaca teks dengan mengonversikannya ke dalam kode

digital. Dapat mengubah teks menjadi suara, merekam naskah.

Gambar 3.17 OCR

5. Kode QR atau QR Code

Adalah bentuk evolusi dari kode batang atau bar code dari satu dimensi menjadi

dua dimensi.Caranya melakukan scan melalui koneksi internet dengan kamera

ponsel pintar.

Gambar 3.18 QRC

 38

3.4 Pengambilan Ganbar Tidak Terformat

Dipergunakan untuk mengambil gambar atau citra yang belum memiliki format

baku. Kategori peranti ini adalah :

1. Image Scanner

Peranti yang dapat mengambil masukan data gambar, foto bahkan juga tulisan

tangan. Hasilnya kemudian diubah menjadi menjadi isyarat digital.

2. Kamera digital

Mengubah citra optik ke sebuah replika film atau elektronis. Menggunakan

lensa untuk membuat citra dari sebuah obyek.

3. Pembaca Retina Mata

Berfungsi membaca retina mata dan menghasilkan identitas retina mata.

3.5 Gerakan

Peranti yang digunakan untuk memantau gerakan manusia yang banyak

dimanfaatkan pada virtual reality adalah :

1. Headset

Peranti yang dipasang di kepala, menutup mata, yang digunakan untuk

menangkap dan merekam gerakan kepala, serta menayangkan berbagai macam

gambar ke mata pemakai.

2. Glove

Peranti berbentuk sarung tangan yang digunakan untuk merekam jenis serta

kekuatan gerakan jari dan tangan pemakai.

 39

Gambar 3.19 Gerakan

3.6 Layar Tampilan

Layar tampilan meruapkan peranti yang dipastikan sellau ada pada sebuah

sistem computer, karena lewat layar tampilan inilah pengguna dapat melihat apa yang

ia ketikkan. Pada dasarnya, smua layar penmapil dengan kemampuan grafis

mempunyai tiga komponen, sebagai berikut :

1. Pengingat digital (frame buffer)

Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai elemennya

menunjukkan intensitas dari citra grafis yang akan ditampilkan.

2. Pengendali tampilan (display controller)

Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk di

tampilkan kelayar.

Cathode Ray Tube (CRT)

a. Pada pengingat digital (frame buffer), citra grafis ditampilkan sebagai pola

bit.

b. Dengan mengolah pola bit menjadi pixel. Untuk gambar hitam-putih, warna

hitam menggunakan bit 1 dan warna putih menggunakan bit 0.

 40

Gambar 3.20 CRT

3. Pengolah Tampilan (display processor)

Bagian yang mengubah pola bit dari pengingat digital menjadi tegangan analog,

yang selanjutnya akan membangkitkan elektron yang digunakan untuk

menembak fosfor pada layar tampilan. Adapter tampilan yang banyak

digunakan untuk komputer-kompter pribadi adalah

MDA(Monochrome Display Adapter),

CGA (Color Graphics Adapter),

MCGA (Multi-Color Graphics Array),

EGA (Enhanced Graphics Adapter),

VGA (Video Graphics Array), dan

SVGA (Super Video Graphics Array).

XGA (Extended Graphics Array)

SXGA (Super Extended Graphics Array)

UXGA (Ultra Extended Graphics Array)

Tipe Layar Tampilan

Berdasar jenis-jenis adapter yang disajikan di atas, dikenal pula beberapa jenis

layar tampilan untuk bisa dipakai bersama-sama dengan salah satu dari adapter

tampilan di atas. Layar tampilan bisa dikelompokkan ke dalam lima tipe yang

dijelaskan sebagai berikut.

 41

Beberapa jenis tipe layar tampilan :

a. Direct-drive Monochrome Monitor

Tipe layar tampilan ini biasanya digunakan untuk adapter dari jenis MDA

atau EGA. Layar tampilan jenis ini hanya menyajikan warna latar depan

(foreground) dan warna latar belakang (background).

b. Composite Monochrome Monitor

Tipe layar ini digunakan bersama-sama dengan adapter dari jenis CGA.

Tipe layar ini hanya bisa menyajikan sebuah warna latar depan, dan hanya

dapat digunakan bersama-sama dengan adapter dari jenis CGA. Saat ini,

layar dengan tipe ini sudah jarang ditemui, karena resolusi dan jumlah yang

dapat ditampilkannya memang tidak banyak.

c. Composite Color Monitor

Tipe layar ini dapat menghasilkan teks dan grafik berwarna (color).

Meskipun demikian, tipe layar ini mempunyai resolusi yang jelek, sehingga

gambar yang dihasilkan tidak bagus. Tipe layar tampilan ini harus

digunakan bersama-sama dengan adapter dari jenis CGA.

d. Red-Green-Blue Monitor

Tipe layar ini lebih dikenal dengan sebutan RGB Monitor (RGB=Red-

Green-Blue). Tipe layar RGB lebih baik dibanding dengan composite color

monitor karena layar tampilan ini memproses isyarat warna merah, hijau,

dan biru secara terpisah. Dengan demikian, teks dan grafik yang dihasilkan

juga lebih halus.

e. Variable Frequency
 42

Adapter tampilan yang berbeda seringkali membangkitkan isyarat yang

berbeda pula, sehingga ada beberapa layar tampilan yang tidak bisa

dipasang dengan adapter tertentu. Layar tampilan ini memungkinkan kita

untuk menggunakan adapter tampilan yang berbeda, sehingga apabila ada

teknologi adapter penampil yang lebih baru, kita tidak perlu layar tampilan

yang baru.
 43

BAB IV

RAGAM DIALOG

4.1 Pengertian Ragam Dialog

Secara umum, Dialog merupakan adalah proses komunikasi antara 2 atau lebih

agen, dalam dialog makna harus dipertimbangkan agar memenuhi kaidah semantic dan

pragmatis. Sedangkan dalam secara IMK, Dialog merupakan pertukaran instruksi dan

informasi yang mengambil tempat antara user dan sistem komputer. Ragam dialog bisa

diartikan sebagai proses pertukaran komunikasi antara satu atau lebih dalam

mengambilan kaidah informasi dalam user dan sistem komputer.

Tujuan dibuatnya Ragam dialog pada IMK adalah “Untuk menyajikan dan

mendiskusikan berbagai teknik dialog yang ada dan untuk mengidentifikasikan

beberapa kekuatan dan kelemahan dari setiap teknik dialog yang akan disajikan”.

Beberapa Sifat penting yang perlu dimiliki oleh setiap Ragam Dialog :

1. Inisiatif

Inisiatif merupakan sifat dasar dari sembarang dialog, karena inisiatif akan

menentukan keseluruhan ragam komunikasi sehingga dapat ditentukan tipe-

tipe pengguna yang dituju oleh sistem yang dibangun. Dua jenis inisiatif yang

paling sering digunakan oleh computer, adalah inisiatif oleh computer dan

inisiatif oleh pengguna. Dalam inisiatif computer, pengguna memberikan

tanggapan atas prompt yang berikan oleh komputer untuk memasukkan

perintah atau parameter perintah. Inisiatif oleh komputer, Pengguna

memberikan tanggapan atas arahan dari Komputer Definisi himpunan yang

 44

ditetapkan sebelumnya Contoh: yes/no. Sebalikny, inisiatif oleh pengguna, ,

mempunyai sifat kertebukaan yang lebih luas : pengguna diharapkan

memahmai sekumpulan perintah yang harus ditulis menurut aturan (sintaks)

tertetntu. Contoh: command line

2. Keluwesan

Sistem yang luwe atau fleksibel adalah sistem yang mempunyai kemmapuan

untuk mencapai suatu tujuan lewat sejumlah cara yang berbeda. Keluwesan

sistem tidak hanya sekedar menyediakan sejumlah perintah-perintah yang

memberikan hasil yang sama. Karakteristik penting dalam mencapai keluwesan

suatu sistem adalah bahwa sistem harus dapat menyesuaikan diri dengan

keinginan pengguna, dan bukan pengguna yang harus menyesuaikan diri

dengan kerangka sistem yang telah ditetapkan oleh perancanng sistem.

Keluwesan juga dapat dilihat dari adanya kesempatan bagi Pengguna untuk

melakukan customizing dan memperluas antarmuka dari sebuah sistem untuk

memenuhi kebutuhan.

3. Kompleksitas

Di atas sudah dijelaskan bahwa keluwesan yang sering dituntut pengguna harus

dibayar dengan kompleksitas implementasi yang semakin besar. Secara umum,

dapat dikatakan bahwa kita tidak perlu mengunakan atau membuat anatrmjka

lebih dari apa yang dipelrukan, karena tidak ada keuntungan yang dapat

diperoleh, malahan akan menjadikan implementasinya menjadi lebih sukar.

Dengan demikian, pengelompokan dalam menerapkan model yang diinginkan

pengguna ke dalam sistem dan hal ini dapat diperoleh dengan menggunakan
 45

hirarkhi atau ortogonalitas atau keduanya. Ortogonalitas adalah penstrukturan

perintah menurut karakteristik bebasnya.

4. Kekuatan

Kekuatan adalah jumlah kerja yang dapat dilakukan oleh sistem untuk setiap

perintah yang diberikan oleh pengguna. Pengguna (khususnya pengguna ahli

dan sudah berpengalaman) biasanya akan memberikan respon positif akan

ketersediaan perintah-perintah yang powerful, dan sebaliknya dapat merasa

seperti disiksa oleh sistem apabila ia harus melakukan sejumlah aktifitas untuk

mendapatkan respon yang ia inginkan.

5. Beban Informasi

Dalam hal ini menitik beratkan pada penyajian informasi yang dihasilkan

komputer kepada pengguna. Agar penyampaian informasi itu dapat berdaya

guna dan beban informasi yang terkandung di dalam suatu ragam dialog

seharusnya disesuaikan dengan aras pengguna.

4.2 Karakteristik Ragam Dialog

Menurut (Santoso, 2004), selain sifat-sifat diatas, maka dapat ditambhkan

Karakteristik Ragam Dialog yang lainnya, sebagai berikut :

1. Konsistensi

Konsistensi merupakan atribut yang sangat penting untuk membantu pengguna

dalam mengembangkan mentalitas yang diperlukan dalam pengoperasian

sebuah sistem computer. Sistem yang konsisten akan mendorong

pengembangan mentalitas dengan memberikan petunjuk kepada pengguna

 46

untuk mengekstrapolasi pengetahuan yang ia miliki untuk memahami perintah

yang baru lengkap dengan pilihan yang ada.

2. Umpan balik

Pada ragam dialog, jika pengguna melakukan kesalahan komputasi, maka

program akan menampilkan suatu pesan kesalahan. Tetapi, pada program

komputer yang tidak ramah, pengguna sering harus menunggu proses yang

sedang berjalan, sementara pengguna tidak mengetahui status proses saat itu,

apakah sedang melakukan komputasi, sedang mencetak hasil, atau bahkan

komputernya macet (hang) karena suatu sebab.

3. Observabilitas

Sistem dikatakan mempunyai sifat observabilitas apabila sistem itu berfungsi

secara benar dan nampak sederhana bagi pengguna, meskipun sesungguhnya

pengolahan secara internalnya sangat rumit

4. Kontrolabilitas

Kontrolabilitas merupakan kebalikan dari observabilitas, dan hal ini

berimplikasi bahwa sistem selalu berada di bawah kontrol pengguna. Agar hal

ini tidak tercapai, antarmukanya harus mempunyai sarana yang memungkinkan

pengguna untuk dapat menentukan dimana sebelumnya ia berada, dimana ia

sekarang berada, kemana ia dapat pergi dan apakah pekerjaan yang sudah

dilakukan dapat dibatalkan.

5. Efisiensi

Efisiensi dalam sistem komputer yang melibatkan unjuk kerja manusia dan

computer secara bersama-sama adalah throughput yang diperoleh dari

 47

kerjasama antara manusia dan komputer. Sehingga, meskipun efisiensi dalam

aspek rekayasa perangkat lunak sistem menjadi sangat penting jika mereka

berpengaruh pada waktu tanggap atau laju penampilan sistem, seringkali

perancang lebih memilih untuk memanfaatkan hasil teknologi baru untuk

meminimalkan ongkos pengembangan sistem. Sebaliknya, tidak dapat

dipungkiri bahwa biaya personal dari seorang ahli semakin meningkat dari

waktu ke waktu.

6. Keseimbangan

Strategi yang diambil dalam perancangan sembarang sistem manusia-komputer

haruslah dapat membagi-bagi pekerjaan antara manusia dan komputer

seoptimal mungkin

4.3 Kategori Ragam Dialog

Menurut (Santoso, 2004), Ragam Dialog interaktif dapat dikelompokkan

menjadi 9 kategori :

a. Dialog berbasis perintah tunggal (Command line dialogue).

“Perintah-perintah tunggal yang dioperasikan tergantung dengan sistem

operasi komputer yang dipakai “. Dialog berbasis perintah tunggal

(command line dialogue) dapat dikatakan merupakan ragam yang paling

konvensional. Bahasa perintah harus dirancang sedemikian rupa sehingga

mereka mempunyai sifat alamiah, yakni mudah dipelajari dan diingat oleh

kebanyakan pengguna. Meskipun bersifat buatan, bahasa buatan ini tetap

mempunyai struktur leksikal, sintaksis, dan semantik tertentu. contoh :

 48

DOS (dir, delete, format, copy, dll)

Unix / Linux (ls, vi, who, passwd, dll)

b. Dialog berbasis bahasa pemrograman (Programming language dialogue).

Dialog berbasis bahasa pemrograman merupakan ragam dialog yang

memungkinkan pengguna untuk mengemas sejumlah perintah kedalam

suatu bentuk berkas (file) yang sering disebut dengan batch file”. Dalam

keadaan tertentu, penggunaan dialog berbasis perintah tunggal sering tidak

memadai, khususnya ketika pengguna harus memberikan sederetan

perintah-perintah yang sama setiap kali ia menjalankan program aplikasi

tersebut. Dialog berbasis bahasa pemrograman merupakan ragam dialog

yang memungkinkan pengguna untuk mengemas sejumlah perintah ke

dalam suatu berkas yang sering disebut dengan batch file. Contoh :

Assembler, Pascal, C, FORTRAN, atau BASIC

c. Dialog berbasis pengisian formulir (Form filling dialogue).

Dialog dimana pengguna (user) dihadapkan ke suatu bentuk formulir

dilayar komputer yang berisi sejumlah pengisian data dan opsi (option)

yang telah ditentukan ”. Sebagai dasar untuk pendataan Layar berbentuk

formulir. Data diinputkan pada kolom-kolom yang telah tersedia. Perlu

rancangan yang baik dan ada fasilitas perbaikan (koreksi)

 49

Gambar 4.1 Contoh bentuk Form

d. Sistem Menu.

Sistem menu merupakan pilihan yang tepat untuk menunjukkan

kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi

kepada pengguna.. Menu adalah daftar sejumlah pilihan dalam jumlah

terbatas, yang biasanya berupa suatu kalimat atau kumpulan beberapa kata.

Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu.

Terdapat 2 (dua) jenis sistem menu:

1) Sistem Menu Datar

a) Selektor pilihan

Sistem menu datar adalah sistem menu yang menampilkan semua

pilihan secara lengkap. Dalam menentukan jenis selektor yang

akan digunakan (angka, huruf, atau kombinasinya) salah satu

bahan pertimbangannya adalah banyaknya pilihan yang akan

disediakan.Penggunaan selektor yang berupa angka (tidak

termasuk angka 10). Tetapi jika jumlah pilihan lebih dari 10 buah,

penggunaan selektor yang berupa angka kurang cocok, karena

 50

pengguna harus menekan dua buah tombol untuk memilih pilihan

dengan nomor elektor 10 atau lebih, Keadaan seperti ini tidak

selalu diinginkan, bagi pengguna. Jika menggunakan selektor

berupa huruf, karena kita mempunyai 26 huruf alphabet. Jika cacah

pilihan lebih besar dari 26 buah, selektornya dapat berupa

campuran angka dan huruf.

b) Penggunaan Tanda terang (highlight marker)

Cara lain untuk menentukan pilihan pada daftar menu datar adalah

menggunakan suatu mekanisme yang disebut tanda terang

(highlight marker) yang dapat digerakkan pada semua pilihan yang

ada dilayar (lihat contoh pada Gambar 4.2) Dengan cara ini,

pengguna – dengan bantuan tombol khusus seperti ¬, -, ®, atau ¯,

atau dengan menggunakan mouse – memenpatkan tanda terang ke

suatu pilihan yang ia inginkan. Kemudian, pengguan harus

menekan tombol Enter atau mengklik mouse untuk

mengkonfirmasikan pilihannya.
 51

Gambar 4.2 Contoh Sistem Menu Datar

2) Sistem Menu Tarik

a) Sistem menu tarik (pulldown) yang berbasis pada struktur hirarki

pilihan (struktur pohon pilihan). Sistem menu tarik adalah sistem

menu yang akan menampilkan pilihan dalam kelompok-kelompok

tertentu. Pada Sebuah subpilihan/submenu dari suatu

pilihan/menu utama dapat mempunyai satu atau labih

subsubpilihan, dan seterusnya. Contoh Sistem Menu Tarik

(Pulldown)

Gambar 4.3 Contoh Sistem Menu Tarik

 52

e. Dialog berbasis bahasa alami (Natural Language Interface).

“Dialog yang berisikan instruksi-instruksi dalam bahasa alami (manusia)

yang diterjemahkan oleh sistem penterjemah“. Jika dialog berbasis perintah

tunggal instruksinya sangat dibatasi oleh sintaksis yang digunakan Dengan

bahasa alami, pengguna dapat memberikan instruksinya dengan kalimat –

kalimat yang lebih manusiawi. Kata-kata/ bahasa sehari-hari bisa

digunakan, seperti DISPLAY ALL dalam dBase Contoh : dalam bahasa

Pascal:

While not eof(T) do

Begin
Readln(T,S);
If IpSem > 3.0 then
Writeln(namamahasiswa);
End;

f. Antarmuka Berbasis Ikon

Sejalan dengan penggunaan simbol-simbol dan tanda-tanda kehidupan kita

sehari-hari, antarmuka sering memanfaatkan simbol-simbol dan tanda-

tanda ini untuk memberitahukan pengguna akan kemampuan dan fasilitas

yang dimiliki oleh suatu program aplikasi. Ragam dialog yang banyak

menggunakan simbol-simbol dan tanda-tanda untuk menunjukkan suatu

aktifitas tertentu disebut dengan antarmuka berbasis ikon (icon-based user

interface) . “Dialog yang menggunakan simbol atau tanda untuk

menunjukan suatu pilihan aktifitas tertentu”.

 53

Gambar 4.4 Antarmuka berbasis Ikon

g. Sistem Penjendelaan (windowing system)

“Sistem antarmuka yang memungkinkan pengguna untuk menampilkan

berbagai informasi pada satu atau lebih jendela (window) “.

Penampilan lebih banyak informasi

1) Akses lebih banyak sumber informasi

2) Kombinasi berbagai sumber informasi

3) Kendali bebas atas sejumlah program

4) Command context

5) Penyajian jamak (multiple view)

6) Reminder/pengingat

Jenis-jenis jendela (window) :

1) Jendela TTY

Jendela TTY merupakan jenis jendela yang paling sederhana. Secara

sekilas jenis jendela ini mirip dengan tampilan apa adanya karena

jendela TTY hanya terdiri atas sebuah jendela yang mempunyai

fasilitas pemindahan halaman (scrolling) secara otomatis pada satu

arah. Contoh jendela TTY adalah : dot prompt.

 54

Gambar 4.5 Contoh jendela TTY

2) Time-Multiplexed Windows

Pemikiran yang mendasari digunakannya istilah time-multiplexed

windows adalah bahwa layar tampilan merupakan sumber daya yang

bisa digunakan secara bergantian oleh sejumlah jendela pada waktu

yang berlainan. Jenis jendela ini banyak diterapkan pada editor teks

Gambar 4.6 Contoh Time-Multiplexed Windows

3) Space multiplex window

Dalam space-multiplexed windows, lebar layar dibagi-bagi menjadi

beberapa jendela dengan ukuran yang bervariasi, dan jenis jendelanya

dapat ditentukan berdasarkan ketergantungan antara satu bisa

diletakkan “diatas” jendela yang lain, dan apakah masing-masing

jendela bisa diubah ukurannya. Jenis-jenis jendela yang tergolong

dalam kelompok ini adalah jendela satu dimensi, jendela dua dimensi
 55

dan jendelan dua setengah dimensi. Jendela satu dimensi adalah jenis

jendela dimana layar dapat dibagi mejadi beberapa bagian secar

vertical atau horisonal yang masing-masing dapat diubah ukurannya.

Ketika satu jendela diubah ukurannya, maka jendela juga kaan

berubah. Jendela-jendela yang termasuk dalam jendela satu dimensi

antara jendela yang satu dengan jendela yang lainnya tidak dapat

saling tumpangtindih. Pada jendela dua dimensi, lebar layar dapat

dibagi menjadi beberapa jendela baik arah vertical maupun horizontal,

sehingga seolah-olah membentuk tabel dari beberapa buah jendela.

Meskipun layar bisa dibagi-bagi ke arah vertical maupun horizontal,

tetapi antara satu jendela dengan jendela yang lainnya tidak dapt

saling tumpang tindih. Sedangkan jendela dua setengah dimensi, pada

pronsipnya sama dengan jendela dua dimensi, tetapi mempunyai

kelebihan bahwa jendela yang ada bisa saling tumpang tindih tanpa

menganggu informasi yang ada pada jendela yang lain.

Contoh :

a) pada perangkat lunak Bravo

b) pada pengolah kata Word Perfect

versi DOS misalnya Word Perfect versi 5.0 atau5.1, pada Lotus

123 versi DOS

 56

Gambar 4.7 Contoh Space multiplex window

4) Non Homogen

Jendela non homogeny adalah jenis jendela yang tidak dapat

dikelompokkan pada jenis jendela diatas. Dua dari beberpa jenis

jendela homogen adalah ikon, dan zooming window. Pada zooming

window, pengguna dapat melihat bagian tertentu dari obyek yang

diamati secara lebih terinci, karena jendela ini dapat di perbesar

maupun diperkecil sesuai dengan kebutuhan

Gambar 4.8 Contoh Non Homogen

 57

h. Manipulasi Langsung

1) Pengertian

Merupakan “ Penyajian langsung aktifitas kepada pengguna (user)

sehingga aktifitas akan dikerjakan oleh komputer ketika pengguna

memberikan instruksi langsung yang ada padalayar komputer “.

2) Penerapan :

a) Kontrol Proses

b) Editor Teks

c) Simulator

d) Kontrol Lalu lintas penerbangan

e) Perancangan Bentuk/model

f) (computer aided design )

i. Antarmuka Berbasis Interaksi Grafis

“Dialog berbentuk pesan atau informasi pada suatu gambar atau link yang

tampil ketika pengguna melakukan suatu aktifitas“.

Gambar 4.9 Contoh Antarmuka Berbasis Interaksi Grafis

 BAB V

DESAIN ANTARMUKA (INTERFACE)

5.1 Dasar Desain Antarmuka

Adapun dasar dalam desain antarmuka, adalah :

1. Merefleksikan model mental user :

Merefleksikan kombinasi pengalaman dunia riil, pengalaman dari software

lain, dan penggunaan komputer secara umum

2. Explicit and Implied Action :

Explicit actions adalah kondisi yang jelas dalam memberikan petunjuk untuk

manipulasi suatu obyek. Implied actions adalah kondisi yang hanya

memberikan kesan visual untuk memanipulasi obyek.

3. Direct Manipulation

User mendapatkan dampaknya dengan segera setelah melakukan suatu aksi.

4. User Control

Mengijinkan user mengontrol dan menginisialisasi aksi.

5. Feedback and Communication

Selalu memberitahukan user apa yang terjadi dari suatu aksi.

5.2 Prinsip Desain Antarmuka

Ada yang perlu diperhatikan dalam prinsip desain antarmuka, yaitu :

58
 59

1. Consistency

User dapat mentransfer pengetahuan dan kemampuan dari suatu aplikasi ke

aplikasi lain.

2. WYSIWYG (What You See Is What You Get)

Tidak ada perbedaan antara yang dilihat di layar dengan hasil outputnya.

3. Aesthetic Integrity

Informasi diorganisasikan dengan baik dan konsisten dengan prinsip desain

visual yang baik.

5.3 Interface Desain

Dalam interface desain, ada yang perlu diperhatikan :

1. Meliputi antarmuka program internal dan eksternal serta desain untuk

antarmuka pengguna

2. Desain antarmuka internal dan eksternal diarahkan oleh informasi yang

diperoleh dari model analisis

5.4 Desain Software Yang Baik

Desain Software yang baik, adalah :

1. High Performance

Software yang dibuat mempunyai performance yang tinggi, walaupun

digunakan oleh beberapa user.

 60

2. Mudah digunakan

Software yang dibuat mempunyai sifat easy to use (mudah digunakan) sehingga

tidak membutuhkan proses yang lama untuk mempelajarinya

3. Penampilan yang baik

Software mempunyai antarmuka (interface) yang baik, sehingga user tidak

merasa jenuh.

4. Reliability

Kehandalan, sejauh mana suatu software dapat diharapkan untuk melakukan

fungsinya sesuai dengan ketelitian yang diperlukan.

5. Mampu beradaptasi

Sejauh mana software yang dibuat mampu beradaptasi dengan perubahan-

perubahan teknologi yang ada.

6. Interoperability

Software yang dibuat haruslah mampu berinteraksi dengan aplikasi lain.

Biasanya dapat dilihat dari adanya fasilitas untuk eksport dan import data dari

aplikasi lain.

7. Mobility

Software yang dibuat dapat berjalan pada bermacammacam sistem operasi.

5.5 Keputusan Dalam Desain

Beberapa hal yang perlu diperhatikan dalam keputusan dalam desain, adalah :

1. Aplikasi semakin membesar, dan menjadi semakin lambat prosesnya.

2. User Interface pada aplikasi semakin kompleks.

 61

3. Waktu yang diperlukan untuk mengembangkan fitur baru menjadi lebih lama.

4. Dokumentasi aplikasi dan dokumen help menjadi lebih melebar.

5. Resiko adanya efek pada fitur yang sudah ada.

6. Meningkatkan waktu yang diperlukan untuk memvalidasi aplikasi

5.6 Desain Layout

1. Model Aplikasi

Ada 3 model dalam Model Aplikasi, yaitu :

a. Berbasis Dokumen

Aplikasi ini menghasilkan sebuah dokumen berupa filefile yang nantinya

bisa dibuka dan dirubah kembali jika perlu. Aplikasi yang berbasis

dokumen misalnya: Microsoft Word, Microsoft Excel, Open Office,

Corel Draw, Photoshop, dll.

Gambar 5.1 Contoh Layout Berbasis Dokumen

 62

Gambar 5.2 Macromedia Flas MX 2004

b. Berbasis Non Dokumen

Aplikasi ini sifatnya tidak menghasilkan dokumen yang bisa dibuka dan

dirubah kembali. Contoh dari aplikasi berbasis non dokumen ini adalah:

Microsoft Outlook, MySQL, MYOB, dll

Gambar 5.3 Microsoft Outlook 2003

 63

Gambar 5.4 MySQL dan MYOB

c. Utilitas

Aplikasi ini sifatnya adalah untuk penunjang saja (sifatnya hanya

tambahan). Ada kecenderungan aplikasi seperti ini menekankan pula pada

style disamping fitur aplikasi. Contoh dari aplikasi ini adalah seperti

aplikasi untuk mendengarkan musik atau menonton video (Winamp,

Media Player, PowerDVD), aplikasi untuk anti virus (Kaspersky, Norton,

F-Secure). Ada kecenderungan aplikasi ini menekankan pada style

dismaping fitur aplikasi

Gambar 5.5 Power DVD

5.7 Cara Pendekatan

Terdapat 2 pendekatan dalam merancang tampilan :

 64

1. User centered design approach.

Pendekatan perancangan berbasis pengguna merupakan istilah yang yang pakai

untuk menggambarkan filosofi perancangan. Konsepnya user menjadi pusat

dalam proses pengembangan sistem dan tujuan/sifat-sifat, konteks dan

lingkungan sistem semua didasarkan dari pengalaman pengguna.

2. User design approach.

Pendekatan perancangan interface yang dibuat oleh programmer untuk user.

Programmer berusaha membuat interface sebaik-baiknya berdasarkan

pengalamannya, setelah jadi diberikan ke user.

5.8 Prinsip dan Petunjuk Perancangan

Prinsip dan Petunjuk Perancangan, sebagai berikut:

1. Urutan Perancangan

a. Pemilihan ragam dialog

b. Perancangan struktur dialog

c. Perancangan format pesan

d. Perancangan penanganan kesalahan

e. Perancangan struktur data

2. Perancangan tampilan berbasis teks

a. Urutan penyajian

b. Kelonggaran

c. Pengelompokan

d. Relevansi
 65

e. Konsistensi

f. Kesederhanaan

3. Perancangan tampilan berbasis Grafis Terdapat 5 faktor yang diperlukan yaitu

a. Ilusi pada obyek-obyek.

b. Urutan visual dan fokus pengguna.

c. Struktur Internal.

d. Kosakata grafis yang konsistensi dan sesuai

e. Kesesuaian dengan media.

4. Waktu tanggap

5. Penanganan Kesalahan.

Penanganan Kesalahan dibagi menjadi dua :

a. Kesalahan compile-time error

b. Kesalahan run time error atau fatal error

5.9 Peranti Bantu Sederhana

Peranti bantu yang dijelaskan hanya berbentuk lembaran kertas kosong diberi

nama dengan Lembar Kerja Tampilan(LKT) LKT yang disajikan atas empat bagian

yaitu:

1. Nomor lembar kerja

2. Bagian tampilan

3. Bagian Navigasi

4. Bagian keterangan
 66

Gambar 5.6 Contoh Lembar Kerja Tampilan

5.10 Jaringan Semantik Tampilan

Dipakai untuk mempermudah programmer saat ia menulis program untuk

disesuaikan dengan navigasi pada setiap lembar kerja. Pada jaring semantik tampilan

terdiri atas dua komponen: nomor tampilan (biasa diberi notasi dengan lingkaran) dan

transisi yang menyebabkan perpindahan perpindahan ke tampilan yang lain (biasa

diberi notasi dengan anak panah).

Gambar 5.7 Contoh Jarinagn Semantik Tampilan

 BAB VI

USER EXPERIENCE (UX) dan USER EXPERIENCE DESIGN

6.1 Pengertian User Experience

User Experience adalah cara mengungkapkan atau meluapkan perasaan

pengguna ketika telah berhadapan dengan sebuah system atau aplikasi. Hal ini juga

meliputi persepsi pengguna mengenai ke praktisan dalam menggunakan sebuah

perangkat lunak seperti kemudahan penggunaan yang intinya subyektif dari para

pengguna. Sifatnya dinamis sesuai perkembangan zaman.

Gambar 6.1 Hubungan UX dengan aspek Pengguna

6.2 Aspek-Aspek User Experience

User Experience membutuhkan pengguna untuk menjawab beberapa

pertanyaan:

1. Bisakah Pengguna menggunakan ?

2. Apakah user bisa mencari ?

3. Apakah sudah memenuhi ekspektasi ?

67
 68

4. Apakah pengguna ingin menggunakannya ?

5. Apakah system dibutuhkan ?

6. Apakah Bisa Dipercaya ?

7. Bisa Diakses Tidak ??

6.3 Alasan Pentingnya User Experience

Alasan pentingnya user experienve adalah:

1. Memudahkan Pengguna

User Experience di zaman Sekarang akan mempermudah pengguna dalam

menggunakan sebuah produk.Karena sebuah produk harus memiliki aspek-

aspek terkait dengan User Experience, hal ini berkaitan juga dengan aspek

Usability mengenai produk.

2. Meningkatkan Minat Pengguna

Selain memudahkan, User Interface juga bisa menarik perhatian pengguna

untuk menggunakan produk yang serupa karena kemudahan dalam

menggunakan produk yang dipasarkan.Tujuan penciptaan produk oleh

developer harusnya supaya banyak pengguna yang menggunakannya.

3. Menjadi Faktor Kesuksesan

Semakin banyak peminat dari suatu produk pastinya juga meningkatkan

permintaan terhadap suatu. Dalam hal ini pengguna akan semakin banyak dan

developer akan diminta untuk melakukan update produk,hal ini lah yang

membuat suatu produk dikatakan sukses.

 69

4. Pasti Memiliki User Interface yang baik

Jika suatu produk memiliki User Interface yang baik seperti tampilan yang

sederhana akan tetapi menarik, hal ini disebabkan karena User Experience dari

pengguna jugalah baik sehingga menghasilkan produk yang bagus seperti

perangkat lunak yang ada di pasaran saat ini.

5. Menjadi Pesaing Produk Lain

Whatsapp, Facebook, Instagram, dan lainnya bisa memenangkan produk di

pasaran dikarenakan hal apa? Karena pengembang sistemnya menggunakan

User Experience yang baik meskipun hasil keluaran dari sistemnya sederhana

dan memiliki fitur yang kurang lebih sama dengan pesaing lainnya.Hal itu

dikarenakan dalam penggunaan User Experience yang baik secara keseluruhan

dari pengembang sehingga menghasilkan produk yang menarik serta User

Interface yang baik.

6.4 Aspek-Aspek Pemahanan User Experience

Berikut aspek-aspek pemahaman User Experience :

1. Berubah-ubah

Perlu dijelaskan kepada pengguna bahwa dalam pengembangan User

Experience itu selalu berubah-ubah dan tidak pasti. Google, Whatsapp dan

Twitter saja pasti memiliki fitur yang berubah-ubah mengikuti zaman dan

permintaan dari penggunanya.

 70

2. Harus Memperhatikan Pengguna

Developer harus mendengar dan melihat permintaan dari user. Observasi

terhadap pengguna akan menjadi penting karena akan menggambarkan apa

yang diinginkan sehingga menghasilkan User Experience yang baik.

3. Tidak Memiliki Metodologi

User Experience tidak memiliki langkah-langkah yang harus diikuti sesuai

standart itu sendiri karena User Experience lebih ke cara untuk pendekatan

tertentu dan bukan dari tahapan standart.

4. Bukan User Interface

User Experience itu penerapanya lebih daripada User Interface. User

Experience digunakan sebagai landasan dari User Interface dalam pembuatan

sebuah produk

5. Testing pada pengguna

Langsung bisa dicoba kepada pengguna untuk kemudian akan ada feedback

entah itu kekurangan maupun kelebihan dari produk. Dalam hal ini biasanya

produk akan bersifat beta dalam masa pengujian ini.

6. Bukanlah Usability

User Experience mencakup hampir keseluruhan hal yang dialami oleh user,

berbeda dengan Usability yang hanya mencakup sebagian dari User

Experience.

7. Sulit Dikerjakan Sendirian

User Experience dikerjakan dalam beberapa spesialisasi seperti bagian

research, prototype, usability, testing, dan lain-lain.

 71

6.5 Elemen User Experience

Elemen pada user experience ada 5, yang meliputi :

1. Surface

Surface ini berkaitan dengan perancangan sensory designer yang meliputi

bagaimana panca indra manusia berinteraksi (user melihat, user mendengar,

user menyentuh, user mencium, user merasakan).

2. Skeleton

Skeleton ini berguna untuk memikirkan interface design yang meliputi atribut-

atribut produk.

3. Structure

Structure disini bermakna memahami perilaku dan pemikiran user dengan

tujuan dapat memahami dalam penentuan struktur produk agar sesuai dnengan

keinginan user..

4. Scope

Scope ini berguna untuk memilah apa yang akan dibuat dan apa yang tidak akan

dibuat. Dan produk dibagi 2 menurut sifatnya yaitu produk sebagai

fungsionalitas dan produk sebagai informasi.

5. Strategy

Strategi di dalam sini tentang bagaimana user menggunakan produk dan

bagaimana produk yang dibuat telah sesuai dengan kebutuhan yang dinginkan

user.
 72

6.6 Faktor Kesuksesan User Experience

Faktor-faktor kesuksesan user experience, sebagai berkut :

1. Utility

Untuk mengetahui nilai atau rating subyektif dari suatu isi dan fungsi untuk

batasan target tertentu.

2. Accesibility

Untuk mengetahui seberapa baik aksesibilitas dan komatibilitas sebuah produk,

dengan mengetahui yang user rasakan pada performance produknya.

3. Usability

Untuk mengetahui seberapa efektif dan memuaskan sebuah produk ketika

digunakan oleh user.

4. Brand Promise

Untuk mengetahui apakah sebuah produk sudah sesuai dengan keinginan user.

6.7 User Experience Design

User Experience Design mempunyai sebuah makna yaitu suatu proses yang

dilakukan developer mencobaa untuk menentukan desain apa yang terbaik untuk

pengguna dengan mengacu pada pengalaman pengguna yang melibatkan kondisi yang

dibutuhkan pengguna. Tujuan dibuatnya User Experience Design ialah untuk membuat

sebuah interaksi yang sangat efisien dan sederhana dalam mencapai tujuan yang

diinginkan user sedemikian rupa.

 73

6.8 Komponen-Komponen User Experience Design

Berikut komponen-komponen User Expereince Design :

1. Usability

2. Desain Interaksi

3. Desain Visual

4. Information Architecture

5. Strategi Konten

6. User Research
 BAB VII

GRAPHICAL USER INTERFACE (GUI)

7.1 Konsep Dasar GUI

Graphical User Interface (GUI) adalah bentuk dialog atau komunikasi antara

manusia dan komputer yang berbentuk grafis dan sangat atraktif”. Contoh antarmuka

manusia dengan komputer yang berbentuk grafis menggunakan pemrograman visual

(Visual Basic, Visual Foxpro, Delphi dan lain-lain). Sistem Operasi Windows

merupakan sistem operasi berbasis Grafis.

Windows menyediakan suatu pustaka yang berisi kumpulan dari ratusan fungsi

yang disebut Windows API (Application Programming Interface). Pemrograman

grafis pada sistem operasi Windows selalu menggunakan antar muka yang disebut GDI

(Graphics Device Interface). Dalam pembahasan GUI akan digunakan bahasa

pemrograman Visual Basic 6.0. Visual Basic 6.0 merupakan salah satu bahasa

pemrograman yang mendukung GUI.

Desain Suatu Program Grafis ditentukan oleh komposisi gambar-gambar yang

digunakan meliputi Letak dari obyek gambar pada screen (Sistem Koordinat), Tata

warna yang digunakan (Pewarnaan), Ukuran dll

7.2 Sistem Koordinat

Sistem Koordinat merupakan letak dari objek gambar di monitor. Sebagian

besar kegiatan pada pemrograman grafis bekerja dengan sistem kordinat, seperti

berpindah tempat, perubahan ukuran dan sebagainya.

74
 75

Hal-hal tersebut akan terlihat jika anda membuat program animasi. Sistem

koordinat pada pemrograman Windows terdiri dari :

1. Koordinat Fisik

a. Merupakan koordinat yang dipakai oleh peralatan fisik (Ex : Layar

monitor).

b. Layar monitor mempunyai titik PUSAT koordinator fisik di kiri atas

dengan sumbu “x” positif berasal dari pusat menuju ke kanan dan sumbu

“y” positif berasal dari pusat menuju ke bawah.

c. Digunakan penulisan (x,y), dimana standart awal berada di (0,0) yaitu pada

titik paling kiri atas obyek yang akan didefinisikan koordinatnya.

2. Koordinat Logika

a. Merupakan koordianat yang dipakai dalam program.

b. Windows akan memetakan sistem koordinat logika dalam program ke

koordit fisik.

7.3 Pengaturan Warna

Pemakaian warna dalam pemrograman grafis bisa dikatakan sangat dominan.

Pemakaian kombinasi warna yang serasi akan membuat tampilan objek lebih menarik.

Visual Basic 6.0 menyediakan fungsi RGB (Red Green Blue). Pada dasarnya seluruh

warna yang ada bermula dari Merah, Hijau dan Biru. Semua warna bisa dihasilkan dari

campuran ketiga warna primer tersebut. Setiap warna primer dinyatakan dengan

bilangan bulat antara 0 Sampai dengan 255. Jika nilai yang diberikan lebih dari 255
 76

maka nilai tersebut akan dianggap nilai 255. Model warna pada windows bisa

menangani jumlah 256 x 256 x 256 = 16777216/16,8 Juta warna

Tabel 7.1

Warna standar yang diambil dari warna primer

Cara menjalankan program : Copy listing diatas, Paste di VB 6.0

 77

Contoh Program Java Untuk Pewarnaan

Gambar 7.1 Contoh Pewarnaan dengan Program Java

7.4 Membuat Garis

Cara membuat Garis :

1. Membuat garis dapat dilakukan dengan mengklik icon Line pada toolbox

2. Pilih jenis garis yang diinginkan

0 – Transparant : bentuk garis tidak ditampilkan

1 – Solid : Bentuk garis utuh

2 – Dash : Bentuk garis terputus-putus dalam bentuk garis

3 – Dot : Bentuk garis terputus-putus dalam bentuk Titik

4 – Dash-Dot : Bentuk garis terputus-putus dalam bentuk garis dan titik

5 – Dah-Dot-Dot : Bentuk garis terputus-putus dalam bentuk garis dan dua titik

6 – Inside solid : Bentuk garisnya sama dengan solid

 78

Gambar 7.2 Membuat Garis

7.5 Membuat Kotak, Oval dan Lingkaran

Cara membuat kotak, oval dan lingkaran :

1. Klik Icon Shape kemudian pilih bentuk pada property shape

Gambar 7.3 Membuat Kotak, Oval dan Lingkaran

 79

7.6 Membuat Grafik

Langkah-langkah dalam pembuatan Grafik :

1. Aktifkan komponen grafik dengan cara buka menu Project dan klik

Components

2. Pada kotak dialog Components klik tab Controls

3. Berikan checklist pada Microsoft Chart Control

4. Muncul icon MSChart

Gambar 7.4 Membuat Grafik

7.7 Membuat Circle

Digunakan untuk menggambar lingkaran, ellips atau garis lengkung. Bentuk

penulisan dari metode circle adalah sbb:

Object Circle [step](x,y), Radius, [Color,start,end,aspect]

Langkah pembuatan circle :

1. Buat sebuah form

2. Ketik listing dibawah ini

 80

Private Sub Form_Click()

Dim cx, cy, radius, limit
ScaleMode = 3
cx = ScaleWidth / 2
cy = ScaleHeight / 2
If cx > cy Then limit = cy Else limit = cx
For radius = 0 To limit
Circle (cx, cy), radius, RGB(Rnd * 255, Rnd * 255,
Rnd * 255)
Beep
Next radius
End Sub

Gambar 7.5 Circle

Membuat Grafik di Java

 BAB VIII

PEMBUATAN KOMPONEN ANTARMUKA GRAFIS

8.1 Komponen Antarmuka Grafis

Salah satu kriteria penting agar program aplikasi yang kita buat mempunyai

sifat ramah dengan pengguna (user friendly) adalah program aplikasi tersebut haruslah

mempunyai tampilan yang menarik perhatian user, biasanya berkaitan dengan

antarmuka grafis yang mampunyai banyak kelebihan dalam memperindah tampilan

dibandingkan dengan tektual.

Komponen antarmuka grafis adalah bentuk–bentuk tampilan antarmuka yang

dipakai pada paket–paket program aplikasi, baik yang bekerja pada mode teks maupun

pada mode grafik . Komponen Antarmuka grafis antara lain : Tombol Tekan, Text

Field, Text Area, Spin Box, Check Box, Tombol Radio, List Box, Combo Box, Label

Box.

1. Tombol Tekan

a. Digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut

ditekan menggunakan mouse (Click Mouse).

b. Jenis tombol dinamakan tombol tekan (button) karena ketika kita

menekan (click) tombol tersebut maka akan terlihat bahwa seolah-olah

tombol “masuk” ke dalam layar monitor, seperti halnya ketika kita

menekan sebuah tombol pada HP.

Gambar 8.1 Tombol Tekan

81
 82

2. Text Field

Text Field adalah berupa kolom isian satu baris yang digunakan untuk

memasukkan data

Gambar 8.2 Text Field

Tabel 8.1 Fungsi property

3. Text Area

Text area adalah berupa kolom isian yang bisa lebih dari 1 baris

Gambar 8.3 Text Area

Jenis-jenis komponen pada Text Area:

a. Atribut Name

b. Atribut Placeholder

c. Atribut Autofocus

d. Atribut Maxlength
 83

e. Atribut Cols dan Rows

f. Atribut Readonly dan Disabled

g. Atribut id dan class

4. Spin Box

Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu

peubah, biasanya bertipe numerik, dengan menambah atau mengurangkannya dengan

suatu nilai tertentu dan nilai maksimum dan minimum peubah dinyatakan dengan jelas

agar tombol tidak memutar (spinning) terus-menerus.

Gambar 8.4 Spin Box

5. Check Box

Sejumlah pilihan yang memungkinkan pengguna untuk memilih salah satu atau

lebih pilihan yang tersedia.

Gambar 8.5 Check Box

 84

6. Tombol Radio

Sejumlah pilihan yang memungkinkan pengguna untuk memilih salah satu

pilihan yang tersedia, pilihan tersebut dapat bernilai on atau off yang ditandai

dengan tanda tertentu.

Gambar 8.6 Tombol Radio

7. List Box

Digunakan untuk menampilkan sejumlah pilihan yang tersedia yang dapat

dipilih oleh pengguna program. Terkadang terjadi suatu keadaan dimana

panjang suatu pilihan lebih besar dibandingkan dengan lebar list box. List box

tersebut harus ditambahkan penggeser (scrollbar), baik vertical maupun

horizontal.

Gambar 8.7 List Box

 85

8. Combo Box

Mempunyai fungsi yang sama dengan list box.

Perbedaannya:

a. Pada combo box pilihan tidak akan terlihat sampai pengguna menekan

tombol kontrol.

b. Pada combo box pengguna dapat memasukkan pilihan yang mungkin

tidak ada dalam daftar pilihan yang tersedia.

Gambar 8.8 Combo Box

9. Label Box

Digunakan untuk memberikan komentar atau memberi nama pada masing-

masing komponen antarmuka grafis.

Gambar 8.9 Label Box

 86

8.2 Mockup

Mockup adalah rancangan yang menunjukkan contoh bagaimana penampilan

dari input maupun output yang mengandung data sebenarnya. Mockup menyampaikan

aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup memberikan

gambaran secara detail sebelum produk dibuat.

Kelebihan mockup:

1. Mengorganisir detail dari proyek

2. Menemukan error

3. Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders

4. Menyampaikan ide kepada anggota tim

5. Implementasi desain

6. Perspektif user

Hal-hal yang harus dilakukan dalam membuat Mockup:

1. Buat Mockup asli dari awal

Dapat dilakukan dengan menggunakan kombinasi foto / gambar sendiri

2. Gunakan Smart Object untuk menerapkan desain ke template

Smart Objects “mempertahankan konten dan sumber gambar sesuai dengan

karakteristik aslinya sehingga memungkinkan melakukan pengeditan tanpa

merusaknya”.

3. Gunakan Photoshop untuk mockup 3D.

 87

8.3 Tools Mockup

1. MOCKPLUS

Alat seret-dan-lepas sederhana untuk membuat prototype interaktif aplikasi

desktop, seluler, dan web dengan cara yang lebih cepat.

Fitur utama:

a. Prototipe interaktif

b. Komponen pra-desain

c. Menguji pada perangkat nyata

d. Beberapa opsi ekspor

Gambar 8.10 MockPlus

2. UI FLUIDA

Fluid membantu Anda membuat prototipe web dan seluler, membuatnya mudah

untuk berkomunikasi tampilan, rasa, interaktivitas, dan animasi.

Fitur utama:

a. Perpustakaan bawaan untuk Android, iOS, web, desktop.

b. Tambahkan interaksi dan animasi

c. Kolaborasi tim
 88

d. Proyek ekspor

Gambar 8.11 UI Fluida

3. BALSAMIQ

4. MOCKINGBIRD

5. MOCKUP BUILDER

6. MAKET IPHONE (untuk aplikasi Iphone)

 BAB IX

MENDESAIN WINDOW

9.1 Memilih Jenis Window

1. Document Window

Berikut ini merupakan contoh tampilan document window :

Gambar 9.1 Document Window

2. Application Window

Berikut ini merupakan contoh tampilan application window :

Gambar 9.2 Application Window

89
 90

3. Utility Window

Berikut ini merupakan contoh tampilan utility window :

Gambar 9.3 Utility Window

4. Dialogs dan Alert

Berikut ini merupakan contoh tampilan dialogs dan alert :

Gambar 9.4 Dialogs dan Alert

 91

9.2 Mendesain Bagian Window

1. Mendesain Window

Berikut ini adalah tampilan dari Windows XP :

Gambar 9.5 Tampilan Windows XP

Berikut ini adalah tampilan dari Windows Classic :

Gambar 9.6 Tampilan Windows Classic

Berikut ini adalah tampilan dari Windows B II for Linux :

Gambar 9.7 Tampilan Windows B II for Linux

 92

2. Mendesain Title

Setiap window sebaiknya diberi judul (title). Sebuah judul window yang bagus

berisi informasi yang relevan. Beri judul yang berbeda pada tiap window yang sedang

dibuka.

Gambar 9.8 Mendesain Title

3. Mendesain Border dan Windows Command

a. Border Window

Gambar 9.9 Border Window

b. Shape Window

Gambar 9.10 Shape Window

 93

4. Modality

Sebuah modal window melarang user berinteraksi dengan window lain dalam

aplikasi yang sama (application modal) atau aplikasi yang lain termasuk desktop itu

sendiri (system modal). Non-Modal window tidak melarang berhubungan dengan

aplikasi utama atau window lain.

5. Focus

Focus berarti user menentukan window mana yang seharusnya menerima data

dari keyboard, mouse, atau device input yang lain. Tiga mekanisme:

a. Click to focus : berarti sebuah window mendapat focus karena diklik oleh

user

b. Point to focus : berarti sebuah window mendapat focus karena ditunjuk

oleh mouse. Dikenal juga dengan “sloppy focus”

c. Keyboard focus : berarti sebuah window mendapat focus karena dipilih

user menggunakan shortcut keyboard seperti Alt+Tab.

9.3 Mendesain Primary Window

Primary window umumnya mempresentasikan data user seperti dokumen teks

pada aplikasi word processor, gambar pada aplikasi pengolah gambar, spreadsheet

pada aplikasi seperti excel, dsb. Normalnya primary window mempunyai sebuah

border, sebuah menubar, dan sebuah status bar, dan mungkin juga mempunyai satu atau

lebih toolbar.

1. Mendesain Title

a. Aplikasi yang menyebutkan ekstensi file

 94

Gambar 9.11 Contoh Aplikasi yang menyebutkan ekstensi file

b. Aplikasi yang menyertakan informasi penting lainnya

Gambar 9.12 Contoh Aplikasi yang menyertakan informasi penting lainnya

c. Aplikasi yang tidak berbasis dokumen

Gambar 9.13 Contoh Aplikasi yang tidak berbasis dokumen

d. Aplikasi yang memberikan keterangan tambahan

Gambar 9.14 Contoh Aplikasi yang memberikan keterangan tambahan

 95

2. Window Commands

Pada primary window, mempunyai beberapa perintah yang terdapat pada

control boxnya:

a. Close : Keluar dari window

b. Maximize : Memperbesar Window

c. Minimize : Memperkecil tampilan window

d. Restore Down : Kembali ke tampilan awal

3. Hubungan dengan Dokumen dan Window

a. Single Document Interface (SDI)

Aplikasi single document interface menempatkan masing-masing dokumen

pada sebuah primary window tersendiri. Jadi tiap – tiap dokumen terasa

sebagaisebuah aplikasi yang berdiri sendiri.

Gambar 9.15 Contoh SDI

 96

b. Controlled Single Document Interface (CSDI)

CSDI adalah aplikasi yang ruangnya untuk menu tidak cukup untuk

masing – masing dokumen yang terbuka, sehingga tampak ada primary

window yang hanya terdiri dari menu, sedangkan primary window lainnya

berisi dokumen, dimana dokumen tersebut dikontrol melalui primary

window control (yang berisi menu)

Gambar 9.16 Contoh CSDI

c. Multiple Document Interface (MDI)

1) MDI menampilkan beberapa dokumen dalam window tunggal.

2) Window ini dapat menggunakan panned, tabbed, atau menampilkan

lebih dari satu sekaligus.

Gambar 9.17 Contoh MDI

 97

4. Mendesain Utility Window

a. Instanst Apply

Window yang mengijinkan user mengubah nilai atau setting seperti

property atau preference, update nilai – nilai atau setting akan serta merta

membuat perubahan pada window. Contoh Instant Apply adalah

Customize pada Microsoft Word.

Gambar 9.18 Contoh Instant Apply

b. Explicit Apply

Window yang dapat merubah suatu nilai – nilai dengan secara eksplisit.

Ciri khas explicit apply yaitu mempunyai 3 button :

1) Apply : Mengimplementasikan semua setting dalam window, tetapi

utility window tidak langsung ditutup

2) Cancel : Mereset semua perubahan pada setting dimana nilai – nilai

dikembalikan ke keadaan saat window ini dibuka.

3) Ok : Mengimplementasikan semua setting pada window dan menutup

window preference
 98

Gambar 9.19 Contoh Explicit Apply

c. Property Window

Adalah tempat user dapat melihat dan mengubah karakteristik sebuah

objek, seperti dokumen, file, atau aplikasi. Contoh property pada

MS.Word

Gambar 9.20 Contoh Property window

d. Preferences Window

Adalah window tempat user dapat memodifikasi tampilan window

maupun tingkah lakunya. Contoh Option pada MS. Word

 99

Gambar 9.21 Contoh Preferences window

e. Toolboxes

Window untuk mengakses sekumpulan aksi maupun toggle dengan

tampilan toolbar kecil seperti button. Contoh Toolboxes pada VB 6.0

Gambar 9.22 Contoh Toolboxes

f. Toolbox Categories

Pengelompokkan Toolbox berdasarkan fungsinya. Contoh :

Gambar 9.23 Contoh Toolbox Categories

 100

5. Mendesain Alert

Alert menyediakan informasi tentang keadaan sebuah sistem aplikasi atau

menanyakan informasi penting tentang proses selanjutnya dari sebuah task khusus.

a. Alert Text

Terdiri dari dua jenis :

1) Primary text , menyediakan informasi singkat atau usulan tindakan

kepada user yang terdiri dari satu kalimat.

2) Secondary text, menyediakan informasi yang lebih detail tentang

problem atau anjuran tindakan kepada user.

b. Alerts Button

Menyediakan tombol persetujuan untuk melupakan alert atau melakukan

tindakan selanjutnya berdasarkan informasi pada Primary text. Button–

button yang biasa ada di alert : Cancel, Help, Yes, No, Save, Abort, dsb

c. Spacing and Positioning

Pedoman membuat alert:

1) Border mengelilingi semua sisi alert

2) Spasi antara icon dan teks adalah 12 pixel

3) Spasi horizontal antar button adalah 6 pixel

4) Spasi di bawah baik primary text maupun secondary text adalah 24

pixel
 101

Gambar 9.24 Contoh Pembuatan alert

d. Information Alerts

Memberitahukan sebuah informasi kepada user sebelum melanjutkan

aksinya atau menampilkan informasi yang memang diminta oleh user.

Gambar 9.25 Contoh Information alert

e. Error Alerts

Digunakan untuk menampilkan peringatan error saat operasi yang

diminta tidak dapat dilakukan secara lengkap.

Gambar 9.26 Contoh error alert

f. Confirmation Alerts

Melakukan konfirmasi ketika user ingin menghapus datanya atau

melakukan aktivitas yang akan menimbulkan resiko.

 102

Gambar 9.27 Contoh Confirmation alert

g. Save Confirmation Alerts

Membantu user agar tidak kehilangan dokumen/ perubahan pada

dokumen ketika menutup aplikasi.

Gambar 9.28 Contoh Save Confirmation alert

6. Mendesain Dialog Boxes

Dialog boxes (kotak dialog) menyediakan pertukaran informasi, atau dialog,

antara user dan aplikasi. Dapat menggunakan kotak dialog untuk menangkap informasi

yang diperlukan dari user untuk tugas atau aksi tertentu, misalkan percetakan

a. Pedoman umum membuat kotak dialog:

Tabel 9.1 Pedoman umum membuat kotak dialog

 103

b. Additional Button

Kita dapat menambahkan button tambahan selain affirmative button

(tombol persetujuan) dan cancel. Pedoman memberi button tambahan :

1) Tempatkan button tambahan dalam satu area di bagian bawah kotak

dialog di sebelah kiri button standar.

2) Aturlah button berdekatan dengan kontrol yang berhubungan dengan

button tersebut.

c. Layout

Sebaiknya menyusun kontrol dengan memperhatikan arah pengguna

aplikasi membaca dimana umumnya biasanya dari kiri ke kanan dan dari

atas ke bawah. Karena itu tempatkan kontrol utama sedekat mungkin

dengan posisi ujung kiri atas.

Gambar 9.28 Contoh Layout Microsoft Flash Mx 2004

 BAB X

ASPEK ERGONOMIK

10.1 Pengertian Ergonomik

Ergonomik adalah faktor kenyamanan kerja yang mempunyai pengaruh nyata

dalam hal peningkatan maupun penurunan efisiensi dan efektifitas kerja.

10.2 Aspek Yang Berhubungan Dengan Ergonomik

Beberapa Aspek yang berhubungan dengan Ergonomik yaitu :

1. Pengukuran dan Antropometrik

Antropometrik : Bidang ilmu yang berhubungan dengan pengukuran tubuh

manusia. Misal: tinggi badan dan jangkauan tangan. Tujuan dari mempelajari

antropometrik adalah untuk memperoleh keseimbangan antara teori yang diperoleh

dari sejumlah acuan dan suasana kerja yang sebenarnya sehingga kenyamanan kerja

dapat dicapai yang pada gilirannya akan meningkatkan efisiensi kerja.

2. Aspek Ergonomik dari stasiun kerja

a. Pemasukan data.

Pekerjaan berorientasi pada hardcopy, lebih banyak memerlukan

pengetikan daripada melihat ke layar tampilan. Operator membutuhkan

kursi yang baik dan dapat diatur, papan ketik yang dapat diatur, posisi

dokumen yang tepat dan kualitas dokumen sumber yang baik.

104
 105

b. Akuisisi data dan Pengolahan Kata

Pekerjaan yang lebih banyak menatap layar tampilan. User sebaiknya

disediakan layar tampilan dengan kualitas karakter yang baik, kontrat

karakter ke layar yang tinggi serta kendali kilau yang memadai.

c. Pekerjaan Interaktif.

Pekerjaan yang variatif, user tidak diam ditempat tetapi bergerak dalam

pekerjaannya.

3. Pencahayaan

Untuk menghindari adanya kilau yang ditimbulkan oleh layar monitor adalah

dengan memasang filter anti kilau dan pengaturan pencahayaan. Tujuan utama dari

perancangan pencahayaan mengenai peletakkan layar monitor antara lain :

a. Menghindarkan user dari cahaya terang langsung maupun pantulannya

yang mengenai layar monitor.

b. Menghindari adanya kecerahan pada bagian depan user yang berlebihan

dibandingkan kecerahan layar monitor.

c. Memberikan keyakinan bahwa adanya pencahayaan yang cukup untuk

pekerjaan yang tidak menggunakan layar monitor.

Cahaya dalam sebuah ruangan dapat berupa :

a. Cahaya tak langsung

b. Cahaya langsung

Contoh letak layar monitor yang menyebabkan silau :

 106

Gambar 10.1 Pencahayaan

4. Suhu dan Kualitas Udara

Suhu dan kelembaban merupakan faktor yang sangat penting dalam kualitas

udara. Suhu udara yang panas dapat membuat berkurangnya konsentrasi kerja.

Solusinya adalah dengan pemasangan pengontrol udara dalam ruangan. Letak

pengontrol udara harus diatur sedemikian rupa sehingga arah aliran udara yang

dihasilkan tidak langsung mengenai user.

5. Gangguan Suara

Manusia sebenarnya sangat sensitif terhadap perubahan suara yang kecil

sekalipun. Manusia seringkali tidak sadar dengan adanya suatu suara yang tetap

asalkan suara tersebut tidak berlebihan (kebiasaan). Kepekaan masing-masing orang

terhadap gangguan suara tidaklah sama. Tetapi orang cenderung tidak menyukai

adanya suara yang selalu mengalami perubahan keras dan tinggi rendah secara tidak

beraturan.

6. Kesehatan dan Kenyamanan Kerja

Aspek keamanan dan kenyamanan kerja dapat dipengaruhi oleh kondisi umum

kesehatan seseorang. Rutinitas pekerjaan juga dapat menyebabkan penurunan kondisi

kesehatan seseorang. Sebagai contoh adalah pekerjaan seorang sekretaris yang

 107

mengharusnya duduk lama untuk melakukan tugas pengetikan dan pengecekan

dokumen, sehingga lambat laun ia akan mengalami kelelahan otot dan persendian.

7. Kebiasaan dalam Bekerja

Agar seseorang selalu merasa nyaman dalam bekerja, sebaiknya membiasakan

diri untuk selalu :

a. Bekerja dalam keadaan se-santai mungkin dan dalam kondisi yang benar,

b. Mengubah posisi duduk secara periodik untuk mencegah kelelahan otot,

c. Berdiri dan mengambil beberapa menit untuk mengendurkan ketegangan

otot dan lakukan olahraga ringan beberapa kali sehari.

d. Mengusahakan untuk tidak mengetik dalam jangka waktu yang lama tanpa

diselingi istirahat beberapa saat.

e. Mengambil istirahat sejenak secara periodik.

Gambar 10.2 Posisi Duduk dalam Bekerja

 BAB XI

ANTARMUKA MASA DEPAN

11.1 Pendahuluan

Interaksi Manusia dan Komputer memiliki 3 fase perkembangan yaitu :

1. Era Mainframe (1960-an) : 1 komputer banyak pengguna

2. Era PC (1980-an) : 1 komputer 1 user

3. Era Mobile (2000-an) : beberapa komputer per user.

Kemudian apabila dilihat dari evolusi antarmuka, dibagi menjadi 6 fase yaitu:

1. Tahun 50an : antarmuka pada tingkatan hardware untuk teknik, contoh : switch

panel

2. Tahun 60-70an : antarmuka pada tingkatan pemrograman, contoh : COBOL,

FORTRAN

3. Tahun 70-90an : antarmuka pada tingkatan instruksi

4. Tahun 80an : antarmuka pada tingkatan dialog interaksi, contoh : GUI,

Multimedia

5. Tahun 90an : antarmuka pada tingkatan lingkungan kerja, contoh : Sistem

Network, Groupware

6. Tahun 2000an-sekarang : antarmuka berkembang luas kearah sistem interaktif

User Interface di masa depan akan meningkat pada unsur audio, animasi objek,

3D, hingga UI modern pada realitas maya. Untuk perkembangannya sendiri yaitu

integrasi UI lebih banyak menggunakan Orientasi Objek daripada pengolahan fungsi.

108
 109

11.2 Teknologi Masa Depan

1. Teknologi Holographic

Teknologi holographic merupakan teknologi yang menggunakan hologram

untuk menampilkan outputnya.

Gambar 11.1 Contoh Holographic

2. Future Gadget

Future gadget merupakan masa depan dari gadget gadget yang ada di masa

sekarang, tentunya akan sangat berbeda dan sangat canggih.

Gambar 11.2 Contoh Future Gadget

3. Teknologi Digital

Teknologi digital merupakan perkembangan digital dimana di masa sekarang

seperti tv, kertas, lemari es hanya dapat digunakan sebagaimana fungsinya, di

masa depan benda-benda tersebut akan memiliki banyak fungsi.

 110

Gambar 11.3 Contoh Teknologi Digital

4. Display glass

Display glass merupakan teknologi dimana input beserta outputnya dapat

dilakukan bersama dalam satu tempat berupa kaca, yang mana fungsi kaca di

masa sekarang sangat berbeda dengan teknologi display glass di masa depan.

Gambar 11.4 Contoh Display Glass

5. 3D Virtual Reality

3D Virtual Reality yaitu sebuah interaksi yang memberikan suatu bentuk

seakan-akan user ada di dalam komputer, atau perwujudan interaksi dunia nyata

ke dalam dunia maya. Interaksi ini digunakan pada game 3D, seperti game The

Sims2.
 111

Gambar 11.5 Contoh 3D Virtual Reality

6. Sensing Affect

Diwaktu abad 20-an komputer telah bisa memahami pengaruh dari lingkungan.

Misalnya merasakan suhu, mendengar suara, melihat lingkungan. Sistem

sensing affect begitu membantu manusia dalam melakukan aktifitas sehari-hari

dan juga biasanya digunakan pada wearable komputer dan aksesorisnya.

Gambar 11.6 Contoh Sensing Affect

7. Sensor Network

Sensor Network suatu sensor ditempatkan pada tempat yang jauh dari

komputer, selain itu bisa mendeteksi vision dan sound yang ada di lingkungan

dimana sensor itu ditempatkan. Aspek dari perkembangan teknologi jaringan

komputer sistem wireless dan peralatan yang menggunakan sensor network

sering digunakan untuk aktivitas mata-mata.

 112

Gambar 11.7 Contoh Sensor Network

8. Arsitektur Multishop WSN

Biasanya melibatkan beberapa jenis pemantauan, pelacakan atau

mengendalikan, untuk lebih spesifiknya aplikasi yang termasuk seperti

pemantauan habitat, pelacakan objek, deteksi kebakaran, deteksi lahan slide

dan pemantauan lalu lintas. Aplikasi umum WSN tersebar didaerah manapun

yang dimaksudkan untuk mengumpulkan data melalui node sensornya.

Gambar 11.8 Contoh Arsitektur Multishop WSN

9. Cyborg

Merupakan aspek dari artifical intelligent. Perkembangan interaksi manusia

dengan komputer semakin meluas, di mana komputer mini yang dimasukkan

ke dalam suatu robot atau cyborg sehingga berfungsi sebagaimana mestinya.

 113

Gambar 11.9 Contoh Cyborg

10. Alat Penerjemah Bahasa Hewan

Para ilmuan mengembangkan sebuah rancangan alat kecerdasan buatan yang di

gunakan untuk menganalisa suara dan ekspresi hewan untuk diterjemahakan ke

Bahasa yang dapat di pahami manusia.

Gambar 11.10 Contoh Alat Penerjemah Bahasa Hewan

11. Emboided Interaction

Ketika user dapat melakukan input hanya dengan sentuhan tangan atau bagian

tubuh lainnya dan tanpa digunakan mouse atau keyboard.

Gambar 11.11 Contoh Emboided Interaction

 114

12. Komputer Model Pena

Komputer model pena disebut P-ISM, yang diambil dari Bahasa Rusia ‘Pism’

berarti ‘tulisan’. Konsep pembuatan P-ISM ialah paket computer pena dengan

5 fungsi, yaitu:

a. Ponsel berbentuk pena dengan cara input data menggunakan tulisan

tangan.

b. Memiliki virtual keyboard.

c. Mempunyai proyektor dengan ukuran kecil.

d. Terdapat camera scanned.

e. Dilengkapi dengan personal ID password yang berfungsi sebagai identitas

pemilik.

Secara prinsip ciri – ciri computer masa mendatang adalah lebih canggih, lebih

murah, memiliki kemampuan diantaranya melihat, mendengar, berbicara, dan

berpikir serta kemampuan membuat kesimpulan seperti manusia.

Gambar 11.12 Contoh Komputer Model Pena

 115

13. Human Interface Using Eye Movement

Dalam bahasa Indonesia disebut pengendali pointer lewat gerakan mata.

Tujuannya: Memudahkan pengguna khususnya pada orang-orang yang

mengalami difabel fisik terutama bagian tangan. Cara Kerja:

a. Menggunakan sensor gerakan mata

b. Memanfaatkan sinyal yang dipancarkan oleh bagian mata.

c. Sinyal diolah sehingga dapat dimanfaatkan untuk mengendalikan pointer

pada komputer.

d. Alat ini dikoneksi ke komputer dengan memanfaatkan USB yang biasanya

digunakan untuk alat printer.

Gambar 11.13 Contoh Human Interface Using Eye Movement

14. Self Driving Cars

Gambar 11.14 Contoh Self Driving Cars

 116

15. Tablet Keping

Tablet dengan bentuk tidak satu kesatuan yang utuh, melainkan terdiri dari

banyak keping – keping. Setiap kepingan memiliki prosesor dan sumber daya

tersendiri. Semakin banyak keeping disatukan, maka bentuk tablet akan

semakin besar dan semakin powerful.

Gambar 11.15 Contoh Tablet Keping

16. Laptop atau Tablet Tenaga Surya

Penggunaan dengan tenaga surya melalui pemasangan panel tenaga surya akan

dipasang si sekeliling bagian badan dari perangkat. Semakin panas pemancaran

sinar matahari, maka semakin banyak tenaga listrik yang bisa dikumpulkan.

Gambar 11.16 Contoh Laptop atau Tablet Tenaga Surya

 DAFTAR PUSTAKA

Nidhom, A. M. (2019). Interaksi Manusia & Komputer. Ahlimedia Book.

Santoso, I. (2004). Interaksi Manusia dan Komputer (Teori dan Praktek). Andi

Offset.

Santoso, I. (2010). Interaksi Manusia dan Komputer. Andi Offset.

117