IMK 1-13

Pertemuan 9
Graphical User Interface
(GUI)
 Pendahuluan
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
 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.
Hal-hal  tersebut  akan  terlihat  jika  anda  membuat
program animasi.  Sistem  koordinat  pada  pemrograman  Windows  terdiri
dari :
a.Koordinat Fisik
 Merupakan koordinat yang dipakai oleh peralatan fisik
(Ex : Layar monitor).
 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.
 Digunakan penulisan (x,y), dimana standart awal
berada di (0,0) yaitu pada titik paling kiri atas obyek yang
akan didefinisikan koordinatnya.
 b. Koordinat Logika
Merupakan koordianat yang dipakai dalam program.
Windows  akan  memetakan  sistem  koordinat  logika
dalam program ke koordit fisik. Pengaturan Warna (Pewarnaan)
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  maka  nilai
tersebut akan dianggap nilai 255

Model  warna  pada  windows  bisa  menangani  jumlah
warna maksimal  256 x 256 x 256 = 16777216/16,8
Juta warna
 • Tabel warna standar yang diambil dari warna primer
Warna  Nilai dari warna
Merah  Hijau   Biru
Hitam  0  0  0
Biru  0  0  255
Hijau  0  255  0
Merah  255  0  0
Kuning  255  255  0
Cyan  0  255  255
Putih  255  255  255 Contoh Program Visual Basic 6.0 Untuk Pewarnaan
Private Sub Form_Activate()
   MsgBox "Ingin warna HITAM , Klik OK"
    Form1.BackColor = RGB(0, 0, 0)
    MsgBox "Ingin warna MERAH , Klik OK"
    Form1.BackColor = RGB(255, 0, 0)
    MsgBox "Ingin warna HIJAU , Klik OK"
    Form1.BackColor = RGB(0, 255, 0)
    MsgBox "Ingin warna BIRU , Klik OK"
    Form1.BackColor = RGB(0, 0, 255)
    MsgBox "Ingin warna PUTIH , Klik OK"
    Form1.BackColor = RGB(255, 255, 255)
    MsgBox "Keluar dari Program ? , Klik OK"
   End
End Sub

Cara menjalankan program : Copy listing diatas, Paste di VB 6.0
 Membuat garis
• Membuat  garis  dapat  dilakukan  dengan  mengklik  icon
Line pada toolbox
• 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
 Icon Line pada
VB 6.0  Properti Border
Style pada
VB 6.0 Membuat kotak, Oval, Lingkaran
  Klik  Icon  Shape  kemudian  pilih  bentuk  pada  properti
shape
 Membuat Grafik
Langkah-langkah dalam pembuatan Grafik :
 Aktifkan  komponen  grafik  dengan  cara  buka  menu
Project dan klik Components
 Pada kotak dialog Components klik tab Controls
 Berikan checklist pada Microsoft Chart Control
 Muncul icon MSChart  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 :
 Buat sebuah form
 Ketik listing dibawah ini 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
 Tugas 1
• Mahasiswa  Mengembangkan  Program
GUI  dengan  visual  basic  dengan  contoh
program yang sudah ada, Kriteria Penilian
Tampilan Awal dengan GUI, Audio, Menu
dan Tampilan Toolbox yang tersedia.
• Tugas di buat Individual dan Di kumpulkan
Dalam bentuk CD Pada Pertemuan 10 Pertemuan 1

PENGENALAN IMK
 Apa itu IMK?

– Secara  sederhana  IMK  adalah  studi  tentang
manusia,teknologi  komputer  dan  cara  bagaimana
mereka saling berinteraksi.
– Kita  mempelajari  IMK  untuk  dapat  menentukan
bagaimana  membuat  agar  teknologi  komputer  dapat
lebih berguna bagi manusia
 Apa itu IMK?
Hal tersebut membutuhkan pemahaman tentang tiga hal,
yaitu:
• Teknologi komputer
• Manusia yang akan berinteraksi dengannya
• Dan  apa  yang  dimaksud  dengan  “lebih  berguna”    
(more usable) “IMK adalah apa yang terjadi saat pengguna
manusia  dan  sistem  komputer  bersama-
sama  menyelesaikan  suatu  tugas  /
pekerjaan”.
Apa itu IMK?
 Bidang Ilmu Interaksi Manusia dan Komputer adalah:
  “Ilmu  yang  mempelajari  bagaimana  mendesain,
mengevaluasi  dan  mengimplementasikan  sistem
komputer yang  interaktif sehingga dapat digunakan oleh
manusia dengan mudah ”

Definisi Interaksi Manusia dan Komputer :
  “Sebuah hubungan antara manusia dan komputer
yang  mempunyai  karakteristik  tertentu  untuk  mencapai
suatu  tujuan  tertentu  dengan  menjalankan  sebuah
sistem yang menggunakan antarmuka (interface).” 1 .Pendahuluan
• Saat ini perkembangan teknologi (komputer) sangat
pesat
• Hampir setiap saat kita berhubungan dengan teknologi
komputer
• Pada awal perkembangan komputer tahun 1950, masih
sangat sulit dioperasikan, tidak praktis, dan waktu
eksekusinya sulit diprediksi. Faktor Penyebabnya
• Ukurannya sangat besar dan harganya sangat mahal,
sehingga  jika  dibandingkan  tenaga  buruh  saat  itu
masih jauh lebih murah.
• Hanya  dapat  dioperasikan  oleh  tenaga  teknisi
spesialis  yang  sudah  terbiasa  melakukan
pemrograman  secara  on-line  dengan  menggunakan
kartu plong (punch card).
• Hanya  sedikit  yang  diketahui  tentang  bagaimana
membuatnya mudah untuk digunakan. ENIAC 1 Program ENIAC ILLIAC II Kondisi Saat ini
Saat  ini  komputer  sudah  jauh  lebih  murah,  digunakan
untuk  hampir  setiap  sisi  kehidupan,  kita  mempunyai
pengetahuan  yang  cukup  bagaimana  agar  komputer
dapat menyesuaikan dengan kebutuhan kerja manusia. 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
  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 Kebutuhan Perancangan yang Berbeda
  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. Istilah IMK / HCI
  Pada  tahun  1970 mulai  dikenal  istilah  antarmuka
pengguna  (user  interface),  yang  juga  dikenal  dengan
istilah Man-Machine  Interface  (MMI), dan mulai menjadi
topik perhatian bagi peneliti dan perancang sistem.
  Perusahaan  komputer  mulai  memikirkan  aspek
fisik  dari  antarmuka  pengguna  sebagai  faktor  penentu
keberhasilan dalam pemasaran produknya. Istilah IMK / 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. Istilah IMK / HCI
  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. Definisi Antarmuka Manusia dan Komputer
  “Media  yang  memungkinkan  manusia  berinteraksi
dengan komputer untuk memberikan suatu perintah
kepada komputer ”

Sebuah program aplikasi terdiri dari 2 bagian yaitu:
- Bagian Antarmuka.
- Bagian Aplikasi.
 Media  antarmuka  manusia  dan  komputer  terbagi
menjadi 2 yaitu :
  a. Media tekstual
  b. Media GUI (Graphical User Interface)

a.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++. Contoh listing program dengan Borland C++ :
#include <stdio.h>
#include <conio.h>
main()
{
clrscr();
printf("Selamat Belajar\n");
printf("Borland C++");
getch();
}
/------------------------------------/
OUTPUT : b. Media GUI (Graphical User Interface) 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).
   Untuk membuat media  interaksi manusia dan  komputer
yang lebih baik maka harus mempelajari dan memahami
bidang ilmu lain :
a. Teknik Elektronika dan ilmu komputer
  Berhubungan dengan perangkat keras untuk merancang
sistem interaksi manusia dan komputer.

b. Psikologi
  Memahami  bagaimana  pengguna  dapat  menggunakan
sifat  dan  kebiasaan  baiknya  agar  dapat  menjodohkan
mesin dengan manusia sehingga dapat bekerjasama.
 2. Bidang Studi c. Perancangan grafis dan tipografi
  Memanfaatkan  gambar  sebagai  sarana  dialog  yang
cukup efektif antara manusia dan komputer.

d. Ergonomik
  Berhubungan  dengan  aspek  fisik  untuk  mendapatkan
lingkungan  kerja  yang  nyaman  ketika  berinteraksi
dengan komputer.

e. Antropologi
  Pandangan mendalam  tentang  cara  kerja  berkelompok
yang  masing-masing  anggotanya  diharapkan
memberikan  kontribusi  teknologi  pengetahuan  sesuai
dengan bidangnya masing-masing. f. Linguistik
  Bahasa  merupakan  sarana  komunikasi  yang  akan
mengarahkan  pengguna  ketika  ia  berinteraksi  dengan
komputer.

g. Sosiologi
  Berkaitan  dengan  studi  tentang  pengaruh  sistem
manusia dengan komputer dalam struktur sosial.
  misal:  Dampak  komputerisasi  terhadap  keberadaan
seorang user di sebuah perusahaan.
    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).

3.Piranti (alat) Bantu Pengembang Sistem Keuntungan menggunakan piranti bantu adalah :

a. Antarmuka yang dihasilkan menjadi lebih baik
b. Program  antarmukanya  menjadi  mudah  ditulis  dan
lebih ekonomis dalam pemeliharaannya.  4. Pengelompokan Piranti Bantu
 
Berdasarkan  fungsinya  piranti  bantu  terbagi menjadi  2
yaitu :

a. Piranti bantu Aplikasi (application software)
  Program  yang  biasa  dipakai  oleh  pemakai  untuk
melakukan  tugas-tugas,  misalnya  membuat  dokumen,
manipulasi photo dan membuat laporan. b.Piranti bantu Sistem (System Software)
  Program  yang  digunakan  untuk  mengontrol
sumberdaya komputer seperti CPU dan hardware masukan
/ keluaran.

5.  Strategi  Pengembangan  Antarmuka  /  interface  
  Beberapa  hal  yang  harus  diperhatikan  :
Pengetahuan  tentang mekanisme  fungsi manusia  sebagai
pengguna komputer.  Pengetahuan tentang mekanisme fungsi manusia  
     sebagai pengguna komputer.
 Informasi tentang ragam dialog, struktur,isi tekstual  
    dan grafis, tanggapan waktu, kecepatan tampilan
 Penggunaan prototipe yang disusun secara
    bersama- sama antara calon pengguna dan  
    perancang sistem.
 Teknik evaluasi dengan menggunakan uji coba      
    sejumlah kasus, tanya jawab dan kuisioner. Pertemuan  2
FAKTOR MANUSIA Jenis-Jenis Komputer
• Super computer
• Mainframe computer
• Mini computer
• Micro computer, Personal Computer
 Desktop casing
 Minitower, mid-tower, tower casing
• Workstation : station (komputer tempat) bekerja.
• Notebook computer
• Personal Digital Assistant(PDA) / palmtop computer
 Cellular Phone
 Tablet PC
• Cluster computer  : beberapa komputer  (biasanya PC)
bekerja bersama sebagai satu virtual computer.  Sistem Komputer terdiri atas 3 (tiga)
aspek :
1. 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,dll.

2. 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. 3. 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. Hadware(Perangkat keras) Input Device
• Peralatan  untuk  memasukkan  data  ke  dalam
representasi  yang  bisa  diterima  dan  dikomputasi  oleh
komputer
• Macam Representasi Data
– Character
– Integer
– Real
– Boolean
– Image (Bit Map)
– Video(kumpulan frame) Input Devices-Scanners
• Scanner   adalah  peralatan  input  data  yang
menangkap  satu  halaman  (teks/gambar)  dan
kemudian  menterjemahkan  ke  dalam  data  digital
berbentuk BitMap Input Device:Touch Screens
A touch screen adalah layar monitor yang bisa merespon
sentuhan  tangan  manusia  pada  permukaan  layarnya,
Sebagai alternatif untuk  memilih menu atau  Icon selain
dengan mouse.
Caranya jari kita menggantikan pointer mouse Prosesing
Suatu  tindakan yang di dilakukan untuk manipulasi data
dan eksekusi  Terdiri dari 5 komponen :
Memory
ALU (aritmatik dan Logic unit)
Register
Bus
Control Unit Memory
  Memori  menyimpan  berbagai  bentuk  informasi
sebagai  angka  biner.  Informasi  yang  belum  berbentuk
biner  akan  dipecahkan  (encoded)  dengan  sejumlah
instruksi yang mengubahnya menjadi sebuah angka atau
urutan angka-angka.

Contoh:  Huruf  F  disimpan  sebagai  angka  desimal  70
(atau  angka  biner  )  menggunakan  salah  satu  metode
pemecahan.  Output Device
  Output  device  bisa  diartikan  sebagai  peralatan
yang  berfungsi  untuk  mengeluarkan  hasil  pemrosesan
ataupun  pengolahan  data  yang  berasal  dari  CPU
kedalam  suatu media  yang  dapat  dibaca  oleh manusia
ataupun dapat digunakan untuk penyimpanan data hasil
proses  Monitor – Output device
  Monitor merupakan salah satu  jenis output device
yang  sangat  populer  dalam  sistem  komputer.  Secara
phisik, monitor mempunyai  bentuk  seperti  halnya  layar
televisi  dan  fungsinya  untuk  menampilkan  data  dan
informasi yang berguna bagi para pemakai komputer. Printer – Output device
  Printer  merupakan  media  output  dari  komputer
yang  bisa menghasilkan  tulisan,  gambar  ataupun  grafik
didalam media  kertas.  Banyak  sekali  jenis  printer  yang
bisa dijumpai, baik ditinjau dari segi ukuran, kecepatan,
harga, kualitas ataupun teknik peng-operasiannya.  Storage device
  Media  Storage  atau  media  penyimpanan  adalah
perangkat  keras  untuk  melakukan  operasi  penulisan,
pembacaan dan penyimpanan data.
  Media  penyimpanan  utama  sebuah  komputer
adalah  Harddisk.  Disinilah  data  dan  program  aplikasi
(software)  disimpan.  Disamping  Harddisk  media
penyimpanan yang lainnya adalah disket dan CD. 1. Penglihatan
  Dalam  dunia  nyata, mata  selalu  digunakan  untuk
melihat  semua  bentuk  tiga  dimensi.  Dalam  sistem
komputer,  yang menggunakan  layar  dua  dimensi, mata
kiri  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.
Faktor manusia (brainware) dalam merancang
Antarmuka adalah : a. Luminas
  banyaknya  cahaya  yang  dipantulkan  oleh
permukaan obyek. Semakin besar luminans dari sebuah
obyek,rincian  obyek  yang  dapat  dilihat  oleh  mata  juga
akan semakin bertambah.
b. Kontras
  hubungan  antara  cahaya  yang  dikeluarkan  oleh
suatu  obyek  dan  cahaya  dari  latar  belakang  obyek
tersebut.  c. Kecerahan
  tanggapan subyektif pada cahaya.

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
  sudut yang dibentuk ketika mata bergerak ke kiri
terjauh dan ke kanan terjauh

f.  Warna
  Cahaya tampak merupakan sebagian kecil dari
spektrum elektromagnetik    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
2. Pendengaran   Sentuhan  merupakan  sarana  manusia  untuk  
berinteraksi.
  contoh  dalam  penggunaan  papan   ketik
(keyboard)  atau  tombol,  maka  manusia  akan  lebih
nyaman apabila tombol atau keyboard tidak berat proses
penekanannya.

3. Sentuhan   Model  sistem  pengolahan  manusia  terdiri  dari
pengolahan  perseptual,  pengolahan  intelektual  dan
pengendalian motorik  yang  beinteraksi  dengan memori
manusia.
  Model  sistem  komputer  terdiri  dari  pengolah
(processor) dan memori. Interaksi keduanya melalui bus

4. Pemodelan Sistem Pengolahan Pengendalian motorik pada manusia dapat dilatih untuk
mencapai  taraf  tertentu  seperti  mengetik  10  jari  untuk
kecepatan 1000 huruf permenit

5. Pengendalian Motorik Pertemuan 3
RAGAM DIALOG “Cara  yang  digunakan  untuk  mengorganisasikan
berbagai tehnik dialog”
Beberapa Sifat setiap Ragam Dialog :
a.Inisiatif
b.Keluwesan
c.Kompleksitas
d.Kekuatan
e.Beban Informasi
Ragam dialog (Dialoque Style) : 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.
  Inisiatif  oleh  komputer  Pengguna  memberikan
tanggapan atas arahan dari Komputer Definisi himpunan
yang ditetapkan sebelumnya Contoh: yes/no, menu
  Inisiatif  oleh  pengguna  Keterbukaan  lebih  luas
Contoh: command line
a. Inisiatif   Kemampuan  untuk  mencapai  suatu  tujuan  lewat
cara  yang  berbeda,  Menyediakan  sejumlah  perintah
alternatif dengan hasil yang sama/setara
Shortcut  Menyesuaikan  diri  dengan  kemampuan
pengguna (customized) Menu pemula dan mahir
Shortcut, command line
b. Keluwesan Tidak  perlu  membuat  antarmuka  lebih  dari  yang
diperlukan  Pengelompokan  Hirarki,  Bayangkan  bila
tanpa hirarki Terlalu bertingkat juga merepotkan
c. Kompleksitas    Jumlah  kerja  yang  dapat  dilakukan  oleh  sistem
untuk  setiap  perintah  yang  diberikan  oleh  pengguna,
Pengguna mahir: merasa  tersiksa bila harus menempuh
jalan panjang
d. Kekuatan   Ragam  dialog  yang  terjadi  antara  komputer
dengan manusia  lebih menitik  beratkan  pada  penyajian
informasi  yang  dihasilkan  komputer  kepada  pengguna.
Agar penyampaian informasi itu dapat berdaya guna dan
berhasil  guna,  beban  informasi  yang  terkandung  di
dalam  suatu  ragam  dialog  seharusnya  disesuaikan
dengan aras pengguna.
e. Beban informasi Karakteristik Ragam Dialog
a. Konsistensi
b. Umpan balik
c. Observabilitas
d. Kontrolabilitas
e. Efisiensi
f. Keseimbangan a.  Konsistensi
  Atribut  yang  sangat  penting  untuk  membantu
pengguna dalam mengembangkan mentalitas yang
diperlukan  dalam  pengoperasian  sebuah  sistem
komputer. b. Umpan balik

  Ketika  sebuah  program  aplikasi  sedang
dijalankan, pengguna seringkali harus menunggu sampai
komputer  menampilkan  hasil  yang  ia  inginkan.  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.  c. Observabilitas
 
  Sistem  dikatakan  mempunyai  sifat  observabilitas
apabila  sistem  itu  berfungsi  secara  benar  dan  nampak
sederhana  bagi  pengguna,  meskipun  sesungguhnya
pengolahan secara internalnya sangat rumit  d. 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 melakukan
kendali. e. Efesiensi
 
  Efisiensi  dalam  sistem  komputer  yang  melibatkan
unjuk  kerja manusia  dan  komputer  secara  bersama-sama
adalah  throughput  yang  diperoleh  dari  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. f. Keseimbangan  
 
  Strategi  yang  diambil  dalam  perancangan
sembarang  sistem  manusia-komputer  haruslah  dapat
membagi-bagi  pekerjaan  antara manusia  dan  komputer
seoptimal mungkin Kategori Ragam Dialog :

1. Ragam Dialog Interaktif
a. Dialog  berbasis  perintah  tunggal  (Command  line
dialogue).
b. Dialog  berbasis  bahasa  pemrograman
(Programming language dialogue).
c. Antarmuka berbasis bahasa alami           (Natural
language interface). d. Sistem Menu.
e. Dialog  berbasis  pengisian  formulir
(Form filling dialogue).
f. Antarmuka Berbasis Ikon
g. Sistem  Penjendelaan  (windowing
system)
h. Manipulasi Langsung
i. Antarmuka Berbasis Interaksi Grafis “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 :
DOS (dir, delete, format, copy, dll)
Unix / Linux (ls, vi, who, passwd, dll)
2. Dialog berbasis perintah tunggal
(Command line dialogue). 3. Dialog  berbasis  bahasa  pemrograman
(Programming language dialogue).

“Dialog  yang  dikemas  sejumlah  perintah  ke  dalam  suatu
bentuk berkas (file) berupa 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   “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;
4. Antarmuka berbasis bahasa alami(Natural
language interface).
“ Dialog  yang menampilkan daftar  sejumlah pilihan dalam
jumlah terbatas ”
  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.
2 (dua) jenis sistem menu:
1. sistem  menu  datar  adalah  sistem  menu  yang
menampilkan semua pilihan secara lengkap.
5. Sistem Menu a. Sistem Menu Datar (Selektor pilihan)

  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 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 3.7) 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. Contoh Sistem menu Datar

                    Menu (1)
Makanan       Minuman
• Nasi goreng    Es the
• Mie ayam      Es jeruk
• Mie bakwan    Jus apokat
• Soto ayam     Contoh Sistem menu Datar
                                Menu (2) 2. 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  sub-subpilihan,  dan
seterusnya. Contoh Sistem Menu Tarik (Pulldown) “ 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)
6. Dialog berbasis pengisian formulir
(Form filling   dialogue). Contoh Dialog berbasis pengisian formulir
  (Form filling   dialogue).   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”.
7. Antarmuka berbasis ikon (icon) contoh Antarmuka berbasis ikon (icon) “Sistem  antarmuka  yang memungkinkan  pengguna  untuk
menampilkan  berbagai  informasi  pada  satu  atau  lebih
jendela (window) “.
Penampilan lebih banyak informasi
  Akses lebih banyak sumber informasi
  Kombinasi berbagai sumber informasi
  Kendali bebas atas sejumlah program
  Command context
  Penyajian jamak (multiple view)
  Reminder/pengingat
8. Sistem Penjendelaan     Jenis-jenis jendela (window) :
  a. Jendela TTY
  b. Time-Multiplexed Windows
  c. Space multiplex window
  d. Non Homogen a. 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. b. Time-Multiplexed Windows
 
  Pemikiran  yang  mendasari  digunakannya  istilah
time-multiplexed  windowsadalah  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 c. 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.
Contoh :
- pada perangkat lunak Bravo
- pada pengolah kata Word Perfect versi DOS misalnya
  Word Perfect versi 5.0 atau5.1, pada Lotus 123 versi DOS  d. Non Homogen

  Jendela  non  homogen  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 a. Pengertian
  “  Penyajian  langsung  aktifitas  kepada
pengguna  (user)  sehingga  aktifitas
akan  dikerjakan  oleh  komputer  ketika
pengguna  memberikan  instruksi
langsung  yang  ada  pada  layar
komputer  “.
9. Manipulasi Langsung.  b. Penerapan :
 Kontrol Proses
 Editor Teks
 Simulator
 Kontrol Lalu lintas penerbangan
 Perancangan Bentuk/model
 (computer aided design )   “Dialog berbentuk pesan atau informasi pada suatu
gambar atau link yang tampil ketika pengguna melakukan
suatu aktifitas“.
Contoh Interaksi Grafis

10. Antarmuka Berbasis Interaksi Grafis. Pertemuan 4
Prinsip Desain
Antarmuka (Interface) Prinsip – prinsip desain antarmuka
• Merefleksikan model mental user :
    Merefleksikan  kombinasi  pengalaman  dunia  riil,
pengalaman  dari  software  lain,  dan  penggunaan
komputer secara umum

• 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.  • Direct Manipulation
    user mendapatkan dampaknya dengan segera
setelah melakukan suatu aksi.

• User Control
    mengijinkan user mengontrol dan menginisialisasi
aksi.

• Feedback and Communication
    selalu memberitahukan user apa yang terjadi dari
suatu aksi.
Prinsip desain antarmuka (lanjutan) Prinsip desain antarmuka (lanjutan)
• Consistency
    user  dapat  mentransfer  pengetahuan  dan
kemampuan dari suatu aplikasi ke aplikasi lain.

• WYSIWYG (What You See Is What You Get)
    tidak  ada  perbedaan  antara  yang  dilihat  di  layar
dengan hasil outputnya.

• Aesthetic Integrity
    informasi  diorganisasikan  dengan  baik  dan
konsisten dengan prinsip desain visual yang baik. Dokumentasi Desain
I. Lingkup Sistem
II. Desain Data
III. Desain Architectural
IV. Desain Antarmuka
V. Desain Prosedural
VI. Catatan Khusus Data  Design
• Mengubah  objek  data  yang  didefinisikan  pada model
analisis   menjadi  struktur  data  yang  ada  dalam
perangkat lunak
• Atribut  yang  dimiliki  objek  data,  hubungan  di  antara
objek  data,  dan  penggunaannya  dalam  program,
semuanya mempengaruhi pemilihan struktur data Architectural Design
• Menggunakan karakteristik aliran informasi dalam model
analisis untuk menghasilkan struktur program
• Sebuah  data  flow  diagram  dipetakan  menjadi  struktur
program menggunakan dua pendekatan :
– Transform mapping
– Transaction mapping
• Transform  mapping  :  diterapkan  untuk  sebuah  aliran
data  yang  menunjukkan  batas  yang  jelas  antara  data
yang masuk dan yang keluar Architectural Design (cont.)
• DFD  dipetakan  menjadi  sebuah  struktur  yang
mengalokasikan kontrol menjadi input, pemorsesan, dan
output bersama dengan hirarki modul

• Transaction  mapping  :  diterapkan  jika  sebuah  item
informasi menyebabkan percabangan

• DFD  dipetakan  menjadi  sebuah  struktur  yang
mengalokasikan  kontrol  menjadi  sebuah  substruktur
yang mendapatkan dan mengevaluasi sebuah transaksi Interface Design
• Meliputi antarmuka program internal dan eksternal
serta desain untuk antarmuka pengguna
• Desain antarmuka internal dan eksternal diarahkan
oleh informasi yang diperoleh dari model analisis
 Mengembangkan software yang baik.
• High Performance
  software  yang  dibuat  mempunyai  performance  yang  tinggi,
walaupun digunakan oleh beberapa user.

• Mudah digunakan
  software  yang  dibuat  mempunyai  sifat  easy  to  use  (mudah
digunakan)  sehingga  tidak membutuhkan  proses  yang  lama
untuk mempelajarinya

• Penampilan yang baik
  software  mempunyai  antarmuka  (interface)  yang  baik,
sehingga user tidak merasa jenuh.

• Reliability
  kehandalan,  sejauh  mana  suatu  software  dapat  diharapkan
untuk  melakukan  fungsinya  sesuai  dengan  ketelitian  yang
diperlukan. Mengembangkan software yang baik
(Lanjutan)
• Mampu beradaptasi
  sejauh mana  software  yang  dibuat mampu  beradaptasi
dengan perubahan-perubahan teknologi yang ada.

• Interoperability
  software  yang  dibuat  haruslah  mampu  berinteraksi
dengan aplikasi  lain. Biasanya dapat dilihat dari adanya
fasilitas untuk eksport dan import data dari aplikasi lain.
 
• Mobility
  software  yang  dibuat  dapat  berjalan  pada  bermacam-
macam sistem operasi. Mengambil Keputusan Dalam Desain
• Aplikasi semakin membesar, dan menjadi semakin
lambat.
• User Interface pada aplikasi semakin kompleks.
• Waktu yang diperlukan untuk mengembangkan fitur baru
menjadi lebih lama.
• Dokumentasi aplikasi dan dokumen help menjadi lebih
melebar.
• Resiko adanya efek pada fitur yang sudah ada.
• Meningkatkan waktu yang diperlukan untuk memvalidasi
aplikasi Mendesain Layout
Model Aplikasi
Ada 3 Model Aplikasi:
1. Berbasis Dokumen
Aplikasi ini menghasilkan sebuah dokumen berupa file-
file yang nantinya bisa dibuka dan dirubah kembali jika
perlu. Aplikasi yang berbasis dokumen misalnya: Microsoft
Word, Microsoft Excel, Open Office, Corel Draw,
Photoshop, dll. Model Aplikasi (lanjutan)
2. 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 Model Aplikasi (lanjutan)
3. 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) 1. Layout Berbasis Dokumen
Header
Menubar
Toolbar
pane
Lembar kerja Macromedia Flash MX 2004 2. Layout Berbasis Non Dokumen
Microsoft Outlook 2003 My SQL & M.Y.O.B  3. Layout Utilitas
Ada kecenderungan aplikasi seperti ini menekankan pula
pada style disamping fitur aplikasi
Contoh : Power DVD XP PERANTI INTERAKTIF

Pertemuan 5 PENDAHULUAN
• Kondisi  lingkungan,  faktor  keselamatan  kerja,  dan
variasi  dalam  tugas  dan  hubungannya  dengan
pekerjaan yang lain harus masuk dalam pertimbangan
saat memilih piranti dalam perancangan sistem.
• Demikian  pula  perlu  diperhatikan  karakteristik
pengguna.
• Pengguna  dapat  bervariasi  dalam  pengetahuan,
ketrampilan, kemampuan, pengalaman dan  lebih  jauh
variasi dalam kebudayaan dan gender.
 PIRANTI INPUT
• Input  berhubungan  dengan  proses  perekaman  dan
pemasukan  data  ke  dalam  sistem  komputer  dan
memberi perintah ke komputer.
• Agar  dapat  berinteraksi  dengan  sistem  komputer
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.
 Piranti Input (lanjutan)  
• 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. Piranti Input (lanjutan)
• 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.
 
Tombol  pada  papan  ketik  (keyboard)    dikelompokkan
menjadi 4 bagian :

a. Tombol Fungsi (function key)
b. Tombol Alphanumerik (alphanumeric key)
c. Tombol Kontrol (control key)
d. Tombol Numerik (numeric key)

1. Piranti Masukan Keyboard QWERTY Keyboard QWERTY
• Umumnya orang sudah familiar dengan layout keyboard
yang  disebut  dengan  “QWERTY”,  yaitu  susunan  huruf
tombol kiri atas.
• Rancangan  keyboard  ini  pertama  kali  digunakan  pada
mesin ketik di USA tahun 1874.
• Susunan  tombol  dipilih  untuk  mengurangi  loncatan
penekanan tombol yang tidak sengaja pada mesin ketik
manual.
• Misal  huruf  ‘s’,  ‘t’,  dan  ‘h’  diletakkan  berjauhan
meskipun  sering  digunakan  bersama  dalam  kalimat
bahasa Inggris.
• Diciptakan oleh Christopher Latham Sholes, 1870-an. Dvorak Layout
• Diciptakan oleh August Dvorak dan Willian L. Dealey,
1936.
• Dirancang untuk mengurangi jarak pergerakan jari.
• Mempercepat ketikan hingga 200 ketikan per menit.
• Penerimaannya lambat karena pemakai tidak bersedia
berusaha berpindah dari QWERTY. c. Tata Letak 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.

Alphabetik 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.

Klockenberg   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.

Papan Ketik untuk penyingkatan kata    Sistem Stenotype
  Sistem  Stenotype.  Seperti  Anda  ketahui,  steno
dalah  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.
 (Pointing and picking device)
  “  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 “.

Perbandingan (ratio) kontrol/tampilan :
                Gerakan tangan atau respon
K/T    =
              Gerakan kursor

2. Peranti Penuding dan Pengambil a. Mouse  
    - Mekanis
  Bola yang terdapat    di mouse akan menggerakan
  beberapa sensor ketika mouse digerakan.
  - 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

3. Peranti penuding dan pengambil  b. Joystick
 Gerakan  kursor  dikendalikan  oleh  gerakan  tuas  atau
dengan tekanan pada tuas.
Joystick elements:
1. Stick
2. Base
3. Trigger
4. Extra buttons
5. Autofire switch
6. Throttle
7. Hat Switch (POV Hat)
8. Suction Cup  c. Trackball
  Prinsip kerjanya sama dengan mouse, tapi berbeda
dalam cara penggunaanya. d. Pointing Stick
  Prinsip  kerjanya  sama  dengan  mouse  dan  cara
penggunaannya sama dengan trackball e. Touch Pad f. Touch Screen g. Digitizing tablet / Graphics tablet
  Peranti pengambil data dalam bentuk sederatan
koordinat (x,y) yang menentukan gerakan pena pada
media digitasi. h. Light Pen
  Prinsip  kerjanya  adalah  memantau  selisih  antara
waktu  saat  elektron  mulai  melakukan  gerakan  dan
pada saat lokasi tempat pena menyala. Dipergunakan  untuk  mengambil  citra  terformat,   bentuk
dan format hurufnya sudah ditentukan.
 
Kategori peranti ini adalah :
a. Bar code Reader
  Pola  garis-garis  hitam  putih  yang  sering  djumpai
pada barang-barang yang dijual di toko swalayan.

4. Pengambilan Gambar Terformat b. 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. c. 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.

d. Optical Character Recognation (OCR)
  Peranti  yang  dapat  membaca  teks  dengan
mengonversikannya  ke  dalam  kode  digital.  Dapat
mengubah teks menjadi suara, merekam naskah.  
     Dipergunakan  untuk  mengambil  gambar  atau
citra yang belum memiliki format baku.
 
Kategori peranti ini adalah :
a.  Image Scanner
  Peranti  yang  dapat  mengambil  masukan  data
gambar,  foto  bahkan  juga  tulisan  tangan.  Hasilnya
kemudian diubah menjadi menjadi isyarat digital.
5. Pengambil Gambar tak Terformat b. Kamera digital
  Mengubah  citra optik  ke  sebuah  replika  film
atau  elektronis.  Menggunakan  lensa  untuk
membuat citra dari sebuah obyek.

c. Pembaca Retina Mata
   Berfungsi  membaca  retina  mata  dan
menghasilkan identitas retina mata.     Peranti yang digunakan untuk memantau gerakan
manusia  yang  banyak  dimanfaatkan  pada  virtual  reality
adalah :
a. Headset
      Peranti  yang  dipasang  di  kepala,  menutup
mata,  yang  digunakan  untuk menangkap  dan merekam
gerakan  kepala,  serta menayangkan   berbagai macam
gambar ke mata pemakai.
     
6. Gerakan b. Glove
  Peranti berbentuk sarung tangan yang digunakan
untuk  merekam  jenis  serta  kekuatan  gerakan  jari  dan
tangan pemakai.
   a. Pengingat digital (frame buffer)
  Citra  yang  akan  ditampilkan  ke  layar  disimpan
sebagai matrix  nilai  elemennya menunjukkan  intensitas
dari citra grafis yang akan ditampilkan.

b. Pengendali tampilan (display controller)
  Berfungsi  untuk  melewatkan  isi  pengingat  digital
dan mengolahnya untuk di tampilkan kelayar.
7. Layar Tampilan terdiri dari : • Pada  pengingat  digital
(frame buffer), citra grafis
ditampilkan sebagai pola
bit.
• Dengan  mengolah  pola
bit  menjadi  pixel.  Untuk
gambar  hitam-putih,
warna  hitam
menggunakan  bit  1  dan
warna  putih
menggunakan bit 0.

Gambar monitor c. 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).
Pada  saat  ini,  VGA  dan  SVGAlah  yang  paling  banyak
digunakan.
   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.
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).
8. Tipe Layar Tampilan   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
  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.
 Design Interface
(Perancangan Tampilan)
Pertemuan 6   Program  aplikasi,  pada  dasarnya  dapat
dikelompokkan ke dalam dua kategori:
a. Program  aplikasi  untuk  keperluan  khusus  dengan
pengguna yang khusus pula (special purpose software).
  Cara  Pendekatan  ini  dilakukan  dengan  User
centered design approach, dimana Perancangan  Interface
melibatkan Pengguna.

b. Program  aplikasi  yang  akan  digunakan  oleh  banyak
pengguna  (general  purpose  software),  yang  juga  sering
dikenal dengan sebutan public software.
  Cara Pendekatan  ini dilakukan dengan User design
approach.
1. Cara Pendekatan   a. Urutan Perancangan
    - Pemilihan ragam dialog
    - Perancangan struktur dialog
    - Perancangan format pesan
    - Perancangan penanganan kesalahan
    - Perancangan struktur data    
2. Prinsip dan Petunjuk Perancangan     b. Perancangan tampilan berbasis teks
    - Urutan penyajian
    - Kelonggaran
        - Pengelompokan
         - Relevansi
         - Konsistensi
         - Kesederhanaan     c. Perancangan tampilan berbasis Grafis
   Terdapat  5 faktor yang diperlukan yaitu :
    - Ilusi pada obyek-obyek.
    - Urutan visual dan fokus pengguna.
          - Struktur Internal.
          - Kosakata grafis yang konsistensi dan sesuai.
      - Kesesuaian dengan media.

       d. Waktu tanggap

      e. Penanganan Kesalahan
    Kesalahan dibagi menjadi dua :
      - Kesalahan compile-time error
      - Kesalahan run time error atau fatal error
   Peranti  bantu  yang  dijelaskan  hanya  berbentuk
lembaran  kertas  kosong  diberi  nama  dengan  Lembar
Kerja  Tampilan(LKT)  LKT  yang  disajikan  atas  empat
bagian yaitu:
a. Nomor lembar kerja
b.Bagian tampilan
c. Bagian Navigator
d.Bagian keterangan

3. Peranti Bantu Sederhana 4. Jaring Semantik Tampilan
  Jaring semantik tampilan terdiri atas dua komponen:
nomor  tampilan  (lembar  kerj)  dan  transisi  yang
menyebabkan  perpindahan  ke  tampilan  yang  lain  (sesuai
dengan isi bagian navigasi pada rancangan tampilan). Persentasi Analisa IMK
Pertemuan 15 ASPEK ERGONOMIK
Pertemuan 10 Aspek  Ergonomik
  Ergonomik  adalah  faktor  kenyamanan  kerja  yang
mempunyai  pengaruh  nyata  dalam  hal  peningkatan
maupun penurunan efisiensi dan efektifitas kerja.
Beberapa  Aspek  yang  berhubungan  dengan  Ergonomik
yaitu :
1. Pengukuran dan Antropometrik
2. Aspek Ergonomik dari stasiun kerja
3. Pencahayaan
4. Suhu dan Kualitas Udara
5. Gangguan Suara
6. Kesehatan dan Keamanan Kerja
7. Kebiasaan Dalam Bekerja 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.
 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 : 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 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 :
  Bekerja  dalam  keadaan  se-santai mungkin  dan  dalam
kondisi yang benar,
  Mengubah  posisi  duduk  secara  periodik  untuk
mencegah kelelahan otot,
  Berdiri  dan  mengambil  beberapa  menit  untuk
mengendurkan  ketegangan  otot  dan  lakukan  olahraga
ringan beberapa kali sehari.
  Mengusahakan  untuk  tidak  mengetik  dalam  jangka
waktu yang lama tanpa diselingi istirahat beberapa saat.
  Mengambil istirahat sejenak secara periodik. Pertemuan 11
Pembuatan 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.

• Untuk  itu  kita  harus  mempelajari  bagaimana  cara
pembuatan komponen antarmuka grafis. 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 :
1. Tombol Tekan
2. Spin Box
3. List Box
4. Combo Box
5. Tombol Radio
6. Check Box
7. Label Box 1. Tombol Tekan
• Digunakan  untuk  mengaktifkan  suatu  aktivitas  apabila
tombol  tersebut  ditekan  menggunakan  mouse  (Click
Mouse).

• Jenis tombol dinamakan tombol tekan 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. Contoh :
Ok   Cancel
Command Button pada
Microsoft Visual Basic 6.0
merupakan  salah satu contoh
Tombol Tekan 2. 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
• Pada  dasarnya,  sebuah  spin  box  digunakan  untuk
menampilkan  suatu  peubah  saat  itu  dan  kemudian  nilai
peubah  tersebut  akan  bertambah  ketika  user  menekan
tombol dengan anak panah ke atas, atau berkurang ketika
user menekan tombol anak panah ke bawah.
• Pertambahan  atau  pengurangan  nilai  peubah  tersebut
dapat diatur sesuai kebutuhan. • Dalam  spin  box,  nilai maksimum  dan minimum  peubah
harus  dinyatakan  dengan  jelas  agar  tombol  tidak
memutar (spinning) terus-menerus.
Spin
Box 3. List Box
 Digunakan  untuk  menampilkan  sejumlah  pilihan  yang
tersedia  yang  dapat  dipilih  oleh  pengguna  program.
Biasanya  pilihan  yang  dapat  dipilih  berupa  pilihan
tunggal, tetapi dalam kondisi tertentu juga dimungkinkan
untuk membuat pilihan jamak (multiple choices).
 Pada dasarnya, sebuah list box hanya terdiri atas bagian
yang digunakan untuk menampilkan pilihan-pilihan yang
tersedia.
 Terkadang  terjadi suatu keadaan dimana panjang suatu
pilihan lebih besar dibandingkan dengan lebar list box.
 Untuk  itu,  list  box  tersebut  harus  ditambahkan
penggeser (scrollbar), baik vertikal maupun horizontal.
 Contoh
List Box
List Box pada
Microsoft Visual
Basic 6.0

 List Box dengan  
scrollbar baik vertikal    
maupun horizontal 4. Combo Box
Mempunyai  fungsi  yang  sama  dengan  list  box,  yaitu
untuk  menampilkan  sejumlah  pilihan  yang  dapat  dipilih
secara bebas oleh pengguna.
2 perbedaan antara list box dengan combo box:
a. Jika  pada  list  box  semua  atau  sebagian  pilihan  yang
tersedia  langsung akan terlihat, sedangkan pada combo
box  pilihan  tidak  akan  terlihat  sampai  pengguna
menekan tombol kontrol.
b. Pada  list  box  pengguna  hanya  dapat  memilih  pilihan
yang tersedia, sedang pada combo box pengguna dapat
memasukkan  pilihan  yang  mungkin  tidak  ada  dalam
daftar pilihan yang tersedia.
 Contoh
Combo Box
Combo Box pada
Microsoft Visual
Basic 6.0 Kapan Penggunaan List Box dan Combo Box
• Telah  disebutkan  bahwa  list  box  dan  combo  box
mempunyai  fungsi  yang  sama,  yaitu  sama-sama  untuk
menampilkan  sejumlah  pilihan  yang  dapat  dipilih  oleh
user.
• Kapan  sebaiknya  menggunakan  list  box  dan  kapan
sebaiknya menggunakan combo box ???
• Pertimbangan  untuk  memilih  salah  satu  dari  kedua
komponen  tersebut,  terutama  tergantung  dari  seberapa
besar  bagian  layar  yang  akan  digunakan  untuk
menampilkan komponen-komponen tersebut.
 
• Jika layar cukup lebar, maka sebaiknya menggunakan list
box  karena  user  dapat  mengetahui  secara  langsung
sebagian atau seluruh pilihan yang tersedia.

• Tapi  jika  layar  tidak  cukup  luas  untuk  menampilkan
pilihan,  maka  jalan  terbaik  adalah  menggunakan  combo
box. 5. 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. Contoh
Radio
Button
Radio Button (Tombol
Radio) pada  Microsoft
Visual Basic 6.0 6. Check Box
Sejumlah  pilihan  yang  memungkinkan  pengguna  untuk
memilih salah satu atau lebih pilihan yang tersedia. Contoh
Check Box
Check Box
 pada  Microsoft Visual
Basic 6.0 7. Label Box
Digunakan  untuk  memberikan  komentar  atau  memberi
nama pada masing – masing komponen antarmuka grafis
Label Box
 pada  Microsoft Visual
Basic 6.0 Pertemuan 12
Mendesain Window Pembahasan
1. Memilih Jenis Window
  Document window
  Application window
  Utility window
  Dialogs and Alerts
2. Mendesain bagian window
  Mendesain Title
  Mendesain Border and Windows Command
  Modality
  Focus
3. Mendesain Primary Window Memilih Jenis Window
1. Document window 2. Application window 3. Utility window 4. Dialogs and Alerts
 Mendesain bagian window
Tampilan Windows XP Tampilan Windows Classic Tampilan Window B II for Linux 1. 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. 2. Mendesain Border and Windows Command
Border Window Shape Window 3. 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.  4. 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. 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
Aplikasi  Contoh Title
Microsoft Word  Document1 – Microsoft Word
Microsoft Excel  Microsoft Excel – Book1
Microsoft Project  Microsoft Project – Project1
Aplikasi  Contoh Title
Adobe Reader  Adobe Reader – [Document.pdf]
Macromedia Dreamweaver 8  Macromedia Dreamweaver 8 –
[Untitled-1(XHTML)]
 Aplikasi yang menyebutkan ekstensi file Aplikasi  Contoh Title
Macromedia Fireworks 8  Macromedia Fireworks 8 – [Untitled-
1.png@50%]
Aplikasi  Contoh Title
Calculator  Calculator
Norton Antivirus  Norton Antivirus
Aplikasi  Contoh Title
Address Book  Address Book – Main Identity
MySQL Query Browser  MySQL Query Browser –
root@localhost:3306
Aplikasi yang menyertakan informasi penting lainnya



Aplikasi yang tidak berbasis dokumen



Aplikasi  yang  memberikan  keterangan  tambahan
sehubungan dengan status aplikasi

 2. Window Commands
Pada  primary  window,  mempunyai  beberapa  perintah
yang terdapat pada control boxnya:
• Close : Keluar dari window
• Maximize : Memperbesar Window
• Minimize : Memperkecil tampilan window
• Restore Down : Kembali ke tampilan awal 3. Hubungan dengan dokumen dan window
• Single Document Interface (SDI)
  Aplikasi  single  document  interface  menempatkan
masing-masing  dokumen  pada  sebuah  primary window
tersendiri.  Jadi  tiap  –  tiap  dokumen  terasa  sebagai
sebuah aplikasi yang berdiri sendiri. Contoh aplikasi SDI adalah Microsoft Word
 • 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) Contoh aplikasi CSDI adalah GIMP • Multiple Document Interface (MDI)
 MDI menampilkan beberapa dokumen dalam window
tunggal.
 Window  ini  dapat  menggunakan  panned,  tabbed,
atau menampilkan lebih dari satu sekaligus. Contoh aplikasi MDI adalah Macromedia Flash MX 4. Mendesain Utility Window
• 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 • 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
 Contoh Explicit Apply • Property Window
  Adalah  tempat  user  dapat
melihat  dan  mengubah
karakteristik  sebuah  objek,
seperti  dokumen,  file,  atau
aplikasi.
Contoh property pada MS.Word • Preferences Window
  Adalah  window  tempat  user
dapat  memodifikasi  tampilan
window  maupun  tingkah
lakunya.

Contoh Option pada MS. Word • Toolboxes
Window  untuk  mengakses  sekumpulan  aksi  maupun
toggle dengan tampilan toolbar kecil seperti button.
Contoh Toolboxes pada VB 6.0 • Toolbox Categories
  Pengelompokkan Toolbox berdasarkan fungsinya
  Contoh : 5. Mendesain Alerts
  Alert  menyediakan  informasi  tentang  keadaan  sebuah
sistem  aplikasi  atau  menanyakan  informasi  penting
tentang proses selanjutnya dari sebuah task khusus. • 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. • 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 • Spacing and Positioning
Pedoman membuat alert:
- Border mengelilingi semua sisi alert
- Spasi antara icon dan teks adalah 12 pixel
- Spasi horizontal antar button adalah 6 pixel
- Spasi di bawah baik primary text maupun secondary text
adalah 24 pixel
Tigger Meltdown
Power Reactor is going to melt down
Running simulations on a nuclear reactor is dangerous and will
cause  it  to melt  down.  You  will  lose  your  life  and  all  saved
work
Cancel
12
12
12 12
24
12 6• Information Alerts
  Memberitahukan sebuah informasi kepada user sebelum
melanjutkan  aksinya  atau  menampilkan  informasi  yang
memang diminta oleh user.
Ok
You have an appointment with Mr. M. Haddil Fuad
in 30 MinutesNo
There were build errors. Contonue?
Yes
• Error Alerts
Digunakan  untuk  menampilkan  peringatan  error  saat
operasi  yang  diminta  tidak  dapat  dilakukan  secara
lengkap.
 • Confirmation Alerts
Melakukan  konfirmasi  ketika  user  ingin  menghapus
datanya  atau  melakukan  aktivitas  yang  akan
menimbulkan resiko.
 • Save Confirmation Alerts
Membantu  user  agar  tidak  kehilangan  dokumen/
perubahan pada dokumen ketika menutup aplikasi.
 User Name
Password
Ok
Authentication Pada Suatu Aplikasi  Authentication Pada Linux
• Authentication Alerts
Memaksa  user memasukkan  informasi  yang  diperlukan
untuk dapat mengakses informasi lebih lanjut.
 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  
• Pedoman umum membuat kotak dialog:
  Border  Ya
Modality  Dapat berupa modal maupun non modal
window
Title Format  Nama Perintah
Resizing  Biasanya tidak dapat diubah ukurannya oleh
user kecuali pada kasus khusus
Button  Dapat mengikuti pedoman yang digunakan
alerts. • Additional Button
Kita  dapat  menambahkan  button  tambahan  selain
affirmative button (tombol persetujuan) dan cancel
Pedoman memberi button tambahan :
 Tempatkan button  tambahan dalam satu area di bagian
bawah kotak dialog di sebelah kiri button standar.
 Aturlah  button  berdekatan  dengan  kontrol  yang
berhubungan dengan button tersebut.
 • 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. Contoh pada Macromedia Flash MX Pertemuan 13
Analisa Mengenai Antar Muka,
Desain Layar, Dan Usabilitas
IMK Berbasis Web Pendahuluan
  Bertujuan  untuk melihat  sejauh mana  tingkat  usabilitas
dari  fungsi-fungsi  pada  website  ini,  serta melihat  desain  antar
mukanya, dan  juga beberapa  saran perbaikan  fungsi-fungsi dan
antar  muka  yang  baik  untuk  meningkatkan  usabilitas  dari
website tersebut.
Diharapkan disiplin  ilmu Dalam pembelajaran  Interaksi Manusia
dan komputer  , dapat mempelajari  Perancangan,  Implementasi
dan Evaluasi.

Dosen  Memberikan  Penjelasan  Bentuk  dan  contoh  Paper
Analisa yang ada di LTM
 Contoh Analisa dan hasil analisa Bagian Kiri
• Navigasi yang Membingungkan dan Tidak Efisien
• Menu-menu Tidak Tersusun Rapi Bagian Tengah
• Kontrol yang Kurang Lengkap
• Inkonsistensi P enggunaan Bahasa
• Inkonsistensi Desain Link
• Inkonsistensi Desain Penulisan (dalam penggunaan font)
• Tampilan tidak tersusun rapi
• Grouping tanpa dasar pengelompokan yang jelas
• Inkonsistensi Desain Link
• Tampilan yang tidak tersus un dan kurang rapi
• Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan
Informasi
 Bagian Kanan
• Page scroling y ang tidak efisien
• Desain yang kurang rapi dan tidak konsisten
• Ketidak jelasan dalam penggunaan fungsi sebagai
pemenuhan kebutuhan pengguna.
• Tampilan tidak tersusun rapi dan fungsi serta control yang
membingungkan
• Derajad Kepentingan dalam Desain Tampilan Informasi
 Analisa WEB Bagian Kanan Analisa WEB Bagian Tengah Tugas 2.
Pembuatan Analisa IMK
• Mahasiswa dan dosen memberikan contoh studi kasus dibawah
ini :
 Website Pendidikan
 Website E-Commerce
 Website Portal (Website Berita, Pemerintahan, UKM,
Pariwisata, dan sebagainya)
 Website Internal Organisasi (Sistem Informasi
Perpustakaan, Sistem Informasi Swalayan dan sebagainya )

• Sebagai contoh mahasiswa dan dosen dapat melihat dari contoh
proposal yang sudah di sediakan Pertemuan 13 dan diharapkan
mahasiswa menjelaskan hasil analisa di kelas dengan melakukan
persentase kelompok pada pertemuan 14 dan 15. Persentasi Analisa IMK
Pertemuan 14

Read more ...

Interaksi Manusia Komputer

Pertemuan 1

PENGENALAN IMK
 Apa itu IMK?

– Secara  sederhana  IMK  adalah  studi  tentang
manusia,teknologi  komputer  dan  cara  bagaimana
mereka saling berinteraksi.
– Kita  mempelajari  IMK  untuk  dapat  menentukan
bagaimana  membuat  agar  teknologi  komputer  dapat
lebih berguna bagi manusia
 Apa itu IMK?
Hal tersebut membutuhkan pemahaman tentang tiga hal,
yaitu:
• Teknologi komputer
• Manusia yang akan berinteraksi dengannya
• Dan  apa  yang  dimaksud  dengan  “lebih  berguna”    
(more usable) “IMK adalah apa yang terjadi saat pengguna
manusia  dan  sistem  komputer  bersama-
sama  menyelesaikan  suatu  tugas  /
pekerjaan”.
Apa itu IMK?
 Bidang Ilmu Interaksi Manusia dan Komputer adalah:
  “Ilmu  yang  mempelajari  bagaimana  mendesain,
mengevaluasi  dan  mengimplementasikan  sistem
komputer yang  interaktif sehingga dapat digunakan oleh
manusia dengan mudah ”

Definisi Interaksi Manusia dan Komputer :
  “Sebuah hubungan antara manusia dan komputer
yang  mempunyai  karakteristik  tertentu  untuk  mencapai
suatu  tujuan  tertentu  dengan  menjalankan  sebuah
sistem yang menggunakan antarmuka (interface).” 1 .Pendahuluan
• Saat ini perkembangan teknologi (komputer) sangat
pesat
• Hampir setiap saat kita berhubungan dengan teknologi
komputer
• Pada awal perkembangan komputer tahun 1950, masih
sangat sulit dioperasikan, tidak praktis, dan waktu
eksekusinya sulit diprediksi. Faktor Penyebabnya
• Ukurannya sangat besar dan harganya sangat mahal,
sehingga  jika  dibandingkan  tenaga  buruh  saat  itu
masih jauh lebih murah.
• Hanya  dapat  dioperasikan  oleh  tenaga  teknisi
spesialis  yang  sudah  terbiasa  melakukan
pemrograman  secara  on-line  dengan  menggunakan
kartu plong (punch card).
• Hanya  sedikit  yang  diketahui  tentang  bagaimana
membuatnya mudah untuk digunakan. ENIAC 1 Program ENIAC ILLIAC II Kondisi Saat ini
Saat  ini  komputer  sudah  jauh  lebih  murah,  digunakan 
untuk  hampir  setiap  sisi  kehidupan,  kita  mempunyai
pengetahuan  yang  cukup  bagaimana  agar  komputer
dapat menyesuaikan dengan kebutuhan kerja manusia. 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
  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 Kebutuhan Perancangan yang Berbeda
  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. Istilah IMK / HCI
  Pada  tahun  1970 mulai  dikenal  istilah  antarmuka
pengguna  (user  interface),  yang  juga  dikenal  dengan
istilah Man-Machine  Interface  (MMI), dan mulai menjadi
topik perhatian bagi peneliti dan perancang sistem.
  Perusahaan  komputer  mulai  memikirkan  aspek
fisik  dari  antarmuka  pengguna  sebagai  faktor  penentu
keberhasilan dalam pemasaran produknya. Istilah IMK / 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. Istilah IMK / HCI
  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. Definisi Antarmuka Manusia dan Komputer
  “Media  yang  memungkinkan  manusia  berinteraksi
dengan komputer untuk memberikan suatu perintah
kepada komputer ”

Sebuah program aplikasi terdiri dari 2 bagian yaitu:
- Bagian Antarmuka.
- Bagian Aplikasi.
 Media  antarmuka  manusia  dan  komputer  terbagi
menjadi 2 yaitu :
  a. Media tekstual
  b. Media GUI (Graphical User Interface)

a.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++. Contoh listing program dengan Borland C++ :
#include <stdio.h>
#include <conio.h>
main()
{
clrscr();
printf("Selamat Belajar\n");
printf("Borland C++");
getch();
}
/------------------------------------/
OUTPUT : b. Media GUI (Graphical User Interface) 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).
   Untuk membuat media  interaksi manusia dan  komputer
yang lebih baik maka harus mempelajari dan memahami
bidang ilmu lain :
a. Teknik Elektronika dan ilmu komputer
  Berhubungan dengan perangkat keras untuk merancang
sistem interaksi manusia dan komputer.

b. Psikologi
  Memahami  bagaimana  pengguna  dapat  menggunakan
sifat  dan  kebiasaan  baiknya  agar  dapat  menjodohkan
mesin dengan manusia sehingga dapat bekerjasama.
 2. Bidang Studi c. Perancangan grafis dan tipografi
  Memanfaatkan  gambar  sebagai  sarana  dialog  yang
cukup efektif antara manusia dan komputer.

d. Ergonomik
  Berhubungan  dengan  aspek  fisik  untuk  mendapatkan
lingkungan  kerja  yang  nyaman  ketika  berinteraksi
dengan komputer.

e. Antropologi
  Pandangan mendalam  tentang  cara  kerja  berkelompok
yang  masing-masing  anggotanya  diharapkan
memberikan  kontribusi  teknologi  pengetahuan  sesuai
dengan bidangnya masing-masing. f. Linguistik
  Bahasa  merupakan  sarana  komunikasi  yang  akan
mengarahkan  pengguna  ketika  ia  berinteraksi  dengan
komputer.

g. Sosiologi
  Berkaitan  dengan  studi  tentang  pengaruh  sistem
manusia dengan komputer dalam struktur sosial.
  misal:  Dampak  komputerisasi  terhadap  keberadaan
seorang user di sebuah perusahaan. 
    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).

3.Piranti (alat) Bantu Pengembang Sistem Keuntungan menggunakan piranti bantu adalah :

a. Antarmuka yang dihasilkan menjadi lebih baik
b. Program  antarmukanya  menjadi  mudah  ditulis  dan
lebih ekonomis dalam pemeliharaannya.  4. Pengelompokan Piranti Bantu
  
Berdasarkan  fungsinya  piranti  bantu  terbagi menjadi  2
yaitu :

a. Piranti bantu Aplikasi (application software)
  Program  yang  biasa  dipakai  oleh  pemakai  untuk
melakukan  tugas-tugas,  misalnya  membuat  dokumen,
manipulasi photo dan membuat laporan. b.Piranti bantu Sistem (System Software)
  Program  yang  digunakan  untuk  mengontrol
sumberdaya komputer seperti CPU dan hardware masukan
/ keluaran. 

5.  Strategi  Pengembangan  Antarmuka  /  interface   
  Beberapa  hal  yang  harus  diperhatikan  :
Pengetahuan  tentang mekanisme  fungsi manusia  sebagai
pengguna komputer.  Pengetahuan tentang mekanisme fungsi manusia  
     sebagai pengguna komputer.
 Informasi tentang ragam dialog, struktur,isi tekstual   
    dan grafis, tanggapan waktu, kecepatan tampilan
 Penggunaan prototipe yang disusun secara 
    bersama- sama antara calon pengguna dan   
    perancang sistem.
 Teknik evaluasi dengan menggunakan uji coba      
    sejumlah kasus, tanya jawab dan kuisioner.

Pertemuan  2
FAKTOR MANUSIA Jenis-Jenis Komputer 
• Super computer 
• Mainframe computer 
• Mini computer 
• Micro computer, Personal Computer 
 Desktop casing 
 Minitower, mid-tower, tower casing 
• Workstation : station (komputer tempat) bekerja. 
• Notebook computer 
• Personal Digital Assistant(PDA) / palmtop computer 
 Cellular Phone 
 Tablet PC 
• Cluster computer  : beberapa komputer  (biasanya PC)
bekerja bersama sebagai satu virtual computer.  Sistem Komputer terdiri atas 3 (tiga)
aspek :
1. 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,dll.

2. 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. 3. 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. Hadware(Perangkat keras) Input Device
• Peralatan  untuk  memasukkan  data  ke  dalam
representasi  yang  bisa  diterima  dan  dikomputasi  oleh
komputer
• Macam Representasi Data 
– Character
– Integer
– Real
– Boolean
– Image (Bit Map)
– Video(kumpulan frame) Input Devices-Scanners
• Scanner   adalah  peralatan  input  data  yang
menangkap  satu  halaman  (teks/gambar)  dan
kemudian  menterjemahkan  ke  dalam  data  digital 
berbentuk BitMap Input Device:Touch Screens
A touch screen adalah layar monitor yang bisa merespon
sentuhan  tangan  manusia  pada  permukaan  layarnya,
Sebagai alternatif untuk  memilih menu atau  Icon selain
dengan mouse. 
Caranya jari kita menggantikan pointer mouse Prosesing
Suatu  tindakan yang di dilakukan untuk manipulasi data
dan eksekusi  Terdiri dari 5 komponen :
Memory
ALU (aritmatik dan Logic unit)
Register 
Bus
Control Unit Memory
  Memori  menyimpan  berbagai  bentuk  informasi
sebagai  angka  biner.  Informasi  yang  belum  berbentuk
biner  akan  dipecahkan  (encoded)  dengan  sejumlah
instruksi yang mengubahnya menjadi sebuah angka atau
urutan angka-angka. 

Contoh:  Huruf  F  disimpan  sebagai  angka  desimal  70
(atau  angka  biner  )  menggunakan  salah  satu  metode
pemecahan.  Output Device
  Output  device  bisa  diartikan  sebagai  peralatan
yang  berfungsi  untuk  mengeluarkan  hasil  pemrosesan
ataupun  pengolahan  data  yang  berasal  dari  CPU
kedalam  suatu media  yang  dapat  dibaca  oleh manusia
ataupun dapat digunakan untuk penyimpanan data hasil
proses  Monitor – Output device
  Monitor merupakan salah satu  jenis output device
yang  sangat  populer  dalam  sistem  komputer.  Secara
phisik, monitor mempunyai  bentuk  seperti  halnya  layar
televisi  dan  fungsinya  untuk  menampilkan  data  dan
informasi yang berguna bagi para pemakai komputer. Printer – Output device
  Printer  merupakan  media  output  dari  komputer
yang  bisa menghasilkan  tulisan,  gambar  ataupun  grafik
didalam media  kertas.  Banyak  sekali  jenis  printer  yang
bisa dijumpai, baik ditinjau dari segi ukuran, kecepatan,
harga, kualitas ataupun teknik peng-operasiannya.  Storage device
  Media  Storage  atau  media  penyimpanan  adalah
perangkat  keras  untuk  melakukan  operasi  penulisan,
pembacaan dan penyimpanan data. 
  Media  penyimpanan  utama  sebuah  komputer
adalah  Harddisk.  Disinilah  data  dan  program  aplikasi
(software)  disimpan.  Disamping  Harddisk  media
penyimpanan yang lainnya adalah disket dan CD. 1. Penglihatan
  Dalam  dunia  nyata, mata  selalu  digunakan  untuk
melihat  semua  bentuk  tiga  dimensi.  Dalam  sistem
komputer,  yang menggunakan  layar  dua  dimensi, mata
kiri  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.
Faktor manusia (brainware) dalam merancang
Antarmuka adalah : a. Luminas
  banyaknya  cahaya  yang  dipantulkan  oleh
permukaan obyek. Semakin besar luminans dari sebuah
obyek,rincian  obyek  yang  dapat  dilihat  oleh  mata  juga
akan semakin bertambah.
b. Kontras
  hubungan  antara  cahaya  yang  dikeluarkan  oleh
suatu  obyek  dan  cahaya  dari  latar  belakang  obyek
tersebut.  c. Kecerahan
  tanggapan subyektif pada cahaya. 

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
  sudut yang dibentuk ketika mata bergerak ke kiri
terjauh dan ke kanan terjauh 

f.  Warna
  Cahaya tampak merupakan sebagian kecil dari
spektrum elektromagnetik    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
2. Pendengaran   Sentuhan  merupakan  sarana  manusia  untuk   
berinteraksi.
  contoh  dalam  penggunaan  papan   ketik
(keyboard)  atau  tombol,  maka  manusia  akan  lebih
nyaman apabila tombol atau keyboard tidak berat proses
penekanannya.

3. Sentuhan   Model  sistem  pengolahan  manusia  terdiri  dari
pengolahan  perseptual,  pengolahan  intelektual  dan
pengendalian motorik  yang  beinteraksi  dengan memori
manusia.
  Model  sistem  komputer  terdiri  dari  pengolah
(processor) dan memori. Interaksi keduanya melalui bus

4. Pemodelan Sistem Pengolahan Pengendalian motorik pada manusia dapat dilatih untuk
mencapai  taraf  tertentu  seperti  mengetik  10  jari  untuk
kecepatan 1000 huruf permenit

5. Pengendalian Motorik

Pengendalian motorik pada manusia dapat dilatih untuk
mencapai  taraf  tertentu  seperti  mengetik  10  jari  untuk
kecepatan 1000 huruf permenit

Pertemuan 3
RAGAM DIALOG “Cara  yang  digunakan  untuk  mengorganisasikan
berbagai tehnik dialog”
Beberapa Sifat setiap Ragam Dialog :
a.Inisiatif
b.Keluwesan
c.Kompleksitas
d.Kekuatan
e.Beban Informasi
Ragam dialog (Dialoque Style) : 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.
  Inisiatif  oleh  komputer  Pengguna  memberikan
tanggapan atas arahan dari Komputer Definisi himpunan
yang ditetapkan sebelumnya Contoh: yes/no, menu
  Inisiatif  oleh  pengguna  Keterbukaan  lebih  luas
Contoh: command line
a. Inisiatif   Kemampuan  untuk  mencapai  suatu  tujuan  lewat
cara  yang  berbeda,  Menyediakan  sejumlah  perintah
alternatif dengan hasil yang sama/setara
Shortcut  Menyesuaikan  diri  dengan  kemampuan
pengguna (customized) Menu pemula dan mahir
Shortcut, command line
b. Keluwesan Tidak  perlu  membuat  antarmuka  lebih  dari  yang
diperlukan  Pengelompokan  Hirarki,  Bayangkan  bila
tanpa hirarki Terlalu bertingkat juga merepotkan
c. Kompleksitas    Jumlah  kerja  yang  dapat  dilakukan  oleh  sistem
untuk  setiap  perintah  yang  diberikan  oleh  pengguna,
Pengguna mahir: merasa  tersiksa bila harus menempuh
jalan panjang
d. Kekuatan   Ragam  dialog  yang  terjadi  antara  komputer
dengan manusia  lebih menitik  beratkan  pada  penyajian
informasi  yang  dihasilkan  komputer  kepada  pengguna.
Agar penyampaian informasi itu dapat berdaya guna dan
berhasil  guna,  beban  informasi  yang  terkandung  di
dalam  suatu  ragam  dialog  seharusnya  disesuaikan
dengan aras pengguna. 
e. Beban informasi Karakteristik Ragam Dialog
a. Konsistensi
b. Umpan balik
c. Observabilitas
d. Kontrolabilitas
e. Efisiensi
f. Keseimbangan a.  Konsistensi
  Atribut  yang  sangat  penting  untuk  membantu
pengguna dalam mengembangkan mentalitas yang
diperlukan  dalam  pengoperasian  sebuah  sistem
komputer. b. Umpan balik

  Ketika  sebuah  program  aplikasi  sedang
dijalankan, pengguna seringkali harus menunggu sampai
komputer  menampilkan  hasil  yang  ia  inginkan.  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.  c. Observabilitas
  
  Sistem  dikatakan  mempunyai  sifat  observabilitas
apabila  sistem  itu  berfungsi  secara  benar  dan  nampak
sederhana  bagi  pengguna,  meskipun  sesungguhnya
pengolahan secara internalnya sangat rumit  d. 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 melakukan
kendali. e. Efesiensi
  
  Efisiensi  dalam  sistem  komputer  yang  melibatkan
unjuk  kerja manusia  dan  komputer  secara  bersama-sama
adalah  throughput  yang  diperoleh  dari  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. f. Keseimbangan  
  
  Strategi  yang  diambil  dalam  perancangan
sembarang  sistem  manusia-komputer  haruslah  dapat
membagi-bagi  pekerjaan  antara manusia  dan  komputer
seoptimal mungkin Kategori Ragam Dialog :

1. Ragam Dialog Interaktif
a. Dialog  berbasis  perintah  tunggal  (Command  line
dialogue).
b. Dialog  berbasis  bahasa  pemrograman
(Programming language dialogue).
c. Antarmuka berbasis bahasa alami           (Natural
language interface). d. Sistem Menu.
e. Dialog  berbasis  pengisian  formulir
(Form filling dialogue).
f. Antarmuka Berbasis Ikon
g. Sistem  Penjendelaan  (windowing
system)
h. Manipulasi Langsung
i. Antarmuka Berbasis Interaksi Grafis “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 : 
DOS (dir, delete, format, copy, dll)
Unix / Linux (ls, vi, who, passwd, dll)
2. Dialog berbasis perintah tunggal 
(Command line dialogue). 3. Dialog  berbasis  bahasa  pemrograman
(Programming language dialogue).

“Dialog  yang  dikemas  sejumlah  perintah  ke  dalam  suatu
bentuk berkas (file) berupa 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   “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; 
4. Antarmuka berbasis bahasa alami(Natural
language interface). 
“ Dialog  yang menampilkan daftar  sejumlah pilihan dalam
jumlah terbatas ”
  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. 
2 (dua) jenis sistem menu: 
1. sistem  menu  datar  adalah  sistem  menu  yang
menampilkan semua pilihan secara lengkap. 
5. Sistem Menu a. Sistem Menu Datar (Selektor pilihan)

  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 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 3.7) 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. Contoh Sistem menu Datar

                    Menu (1)
Makanan       Minuman
• Nasi goreng    Es the
• Mie ayam      Es jeruk
• Mie bakwan    Jus apokat
• Soto ayam     Contoh Sistem menu Datar
                                Menu (2) 2. 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  sub-subpilihan,  dan
seterusnya. Contoh Sistem Menu Tarik (Pulldown) “ 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) 
6. Dialog berbasis pengisian formulir
(Form filling   dialogue). Contoh Dialog berbasis pengisian formulir 
  (Form filling   dialogue).   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”. 
7. Antarmuka berbasis ikon (icon) contoh Antarmuka berbasis ikon (icon) “Sistem  antarmuka  yang memungkinkan  pengguna  untuk
menampilkan  berbagai  informasi  pada  satu  atau  lebih
jendela (window) “.
Penampilan lebih banyak informasi
  Akses lebih banyak sumber informasi
  Kombinasi berbagai sumber informasi
  Kendali bebas atas sejumlah program
  Command context
  Penyajian jamak (multiple view)
  Reminder/pengingat
8. Sistem Penjendelaan     Jenis-jenis jendela (window) :
  a. Jendela TTY
  b. Time-Multiplexed Windows
  c. Space multiplex window
  d. Non Homogen a. 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. b. Time-Multiplexed Windows
  
  Pemikiran  yang  mendasari  digunakannya  istilah
time-multiplexed  windowsadalah  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 c. 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.
Contoh : 
- pada perangkat lunak Bravo
- pada pengolah kata Word Perfect versi DOS misalnya 
  Word Perfect versi 5.0 atau5.1, pada Lotus 123 versi DOS  d. Non Homogen

  Jendela  non  homogen  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 a. Pengertian
  “  Penyajian  langsung  aktifitas  kepada
pengguna  (user)  sehingga  aktifitas
akan  dikerjakan  oleh  komputer  ketika
pengguna  memberikan  instruksi
langsung  yang  ada  pada  layar
komputer  “.
9. Manipulasi Langsung.  b. Penerapan :
 Kontrol Proses
 Editor Teks
 Simulator
 Kontrol Lalu lintas penerbangan
 Perancangan Bentuk/model 
 (computer aided design )   “Dialog berbentuk pesan atau informasi pada suatu
gambar atau link yang tampil ketika pengguna melakukan
suatu aktifitas“.
Contoh Interaksi Grafis

10. Antarmuka Berbasis Interaksi Grafis. 

Dialog berbentuk pesan atau informasi pada suatu
gambar atau link yang tampil ketika pengguna melakukan
suatu aktifitas“.

Pertemuan 4
Prinsip Desain
Antarmuka (Interface) Prinsip – prinsip desain antarmuka
• Merefleksikan model mental user :
    Merefleksikan  kombinasi  pengalaman  dunia  riil,
pengalaman  dari  software  lain,  dan  penggunaan
komputer secara umum

• 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.  • Direct Manipulation
    user mendapatkan dampaknya dengan segera
setelah melakukan suatu aksi.

• User Control
    mengijinkan user mengontrol dan menginisialisasi
aksi.

• Feedback and Communication
    selalu memberitahukan user apa yang terjadi dari
suatu aksi.
Prinsip desain antarmuka (lanjutan) Prinsip desain antarmuka (lanjutan)
• Consistency
    user  dapat  mentransfer  pengetahuan  dan
kemampuan dari suatu aplikasi ke aplikasi lain.

• WYSIWYG (What You See Is What You Get)
    tidak  ada  perbedaan  antara  yang  dilihat  di  layar
dengan hasil outputnya. 

• Aesthetic Integrity
    informasi  diorganisasikan  dengan  baik  dan
konsisten dengan prinsip desain visual yang baik. Dokumentasi Desain
I. Lingkup Sistem
II. Desain Data
III. Desain Architectural
IV. Desain Antarmuka
V. Desain Prosedural
VI. Catatan Khusus Data  Design
• Mengubah  objek  data  yang  didefinisikan  pada model
analisis   menjadi  struktur  data  yang  ada  dalam
perangkat lunak
• Atribut  yang  dimiliki  objek  data,  hubungan  di  antara
objek  data,  dan  penggunaannya  dalam  program,
semuanya mempengaruhi pemilihan struktur data Architectural Design
• Menggunakan karakteristik aliran informasi dalam model
analisis untuk menghasilkan struktur program
• Sebuah  data  flow  diagram  dipetakan  menjadi  struktur
program menggunakan dua pendekatan :
– Transform mapping
– Transaction mapping
• Transform  mapping  :  diterapkan  untuk  sebuah  aliran
data  yang  menunjukkan  batas  yang  jelas  antara  data
yang masuk dan yang keluar Architectural Design (cont.)
• DFD  dipetakan  menjadi  sebuah  struktur  yang
mengalokasikan kontrol menjadi input, pemorsesan, dan
output bersama dengan hirarki modul

• Transaction  mapping  :  diterapkan  jika  sebuah  item
informasi menyebabkan percabangan

• DFD  dipetakan  menjadi  sebuah  struktur  yang
mengalokasikan  kontrol  menjadi  sebuah  substruktur
yang mendapatkan dan mengevaluasi sebuah transaksi Interface Design
• Meliputi antarmuka program internal dan eksternal
serta desain untuk antarmuka pengguna
• Desain antarmuka internal dan eksternal diarahkan
oleh informasi yang diperoleh dari model analisis
 Mengembangkan software yang baik.
• High Performance
  software  yang  dibuat  mempunyai  performance  yang  tinggi,
walaupun digunakan oleh beberapa user.

• Mudah digunakan
  software  yang  dibuat  mempunyai  sifat  easy  to  use  (mudah
digunakan)  sehingga  tidak membutuhkan  proses  yang  lama
untuk mempelajarinya 

• Penampilan yang baik
  software  mempunyai  antarmuka  (interface)  yang  baik,
sehingga user tidak merasa jenuh.

• Reliability
  kehandalan,  sejauh  mana  suatu  software  dapat  diharapkan
untuk  melakukan  fungsinya  sesuai  dengan  ketelitian  yang
diperlukan. Mengembangkan software yang baik
(Lanjutan)
• Mampu beradaptasi
  sejauh mana  software  yang  dibuat mampu  beradaptasi
dengan perubahan-perubahan teknologi yang ada.

• Interoperability
  software  yang  dibuat  haruslah  mampu  berinteraksi
dengan aplikasi  lain. Biasanya dapat dilihat dari adanya
fasilitas untuk eksport dan import data dari aplikasi lain.
 
• Mobility
  software  yang  dibuat  dapat  berjalan  pada  bermacam-
macam sistem operasi. Mengambil Keputusan Dalam Desain
• Aplikasi semakin membesar, dan menjadi semakin
lambat.
• User Interface pada aplikasi semakin kompleks.
• Waktu yang diperlukan untuk mengembangkan fitur baru
menjadi lebih lama.
• Dokumentasi aplikasi dan dokumen help menjadi lebih
melebar.
• Resiko adanya efek pada fitur yang sudah ada.
• Meningkatkan waktu yang diperlukan untuk memvalidasi
aplikasi Mendesain Layout
Model Aplikasi 
Ada 3 Model Aplikasi:
1. Berbasis Dokumen
Aplikasi ini menghasilkan sebuah dokumen berupa file-
file yang nantinya bisa dibuka dan dirubah kembali jika
perlu. Aplikasi yang berbasis dokumen misalnya: Microsoft
Word, Microsoft Excel, Open Office, Corel Draw,
Photoshop, dll. Model Aplikasi (lanjutan)
2. 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 Model Aplikasi (lanjutan)
3. 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) 1. Layout Berbasis Dokumen
Header
Menubar
Toolbar
pane
Lembar kerja Macromedia Flash MX 2004 2. Layout Berbasis Non Dokumen
Microsoft Outlook 2003 My SQL & M.Y.O.B  3. Layout Utilitas
Ada kecenderungan aplikasi seperti ini menekankan pula
pada style disamping fitur aplikasi
Contoh : Power DVD X

PERANTI INTERAKTIF

Pertemuan 5
ENDAHULUAN 
• Kondisi  lingkungan,  faktor  keselamatan  kerja,  dan
variasi  dalam  tugas  dan  hubungannya  dengan
pekerjaan yang lain harus masuk dalam pertimbangan
saat memilih piranti dalam perancangan sistem.
• Demikian  pula  perlu  diperhatikan  karakteristik
pengguna.
• Pengguna  dapat  bervariasi  dalam  pengetahuan,
ketrampilan, kemampuan, pengalaman dan  lebih  jauh
variasi dalam kebudayaan dan gender.
 PIRANTI INPUT
• Input  berhubungan  dengan  proses  perekaman  dan
pemasukan  data  ke  dalam  sistem  komputer  dan
memberi perintah ke komputer.
• Agar  dapat  berinteraksi  dengan  sistem  komputer
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.
 Piranti Input (lanjutan)  
• 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. Piranti Input (lanjutan)
• 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.
 
Tombol  pada  papan  ketik  (keyboard)    dikelompokkan
menjadi 4 bagian :

a. Tombol Fungsi (function key)
b. Tombol Alphanumerik (alphanumeric key)
c. Tombol Kontrol (control key)
d. Tombol Numerik (numeric key) 

1. Piranti Masukan Keyboard QWERTY Keyboard QWERTY
• Umumnya orang sudah familiar dengan layout keyboard
yang  disebut  dengan  “QWERTY”,  yaitu  susunan  huruf
tombol kiri atas.
• Rancangan  keyboard  ini  pertama  kali  digunakan  pada
mesin ketik di USA tahun 1874.
• Susunan  tombol  dipilih  untuk  mengurangi  loncatan
penekanan tombol yang tidak sengaja pada mesin ketik
manual.
• Misal  huruf  ‘s’,  ‘t’,  dan  ‘h’  diletakkan  berjauhan
meskipun  sering  digunakan  bersama  dalam  kalimat
bahasa Inggris.
• Diciptakan oleh Christopher Latham Sholes, 1870-an. Dvorak Layout 
• Diciptakan oleh August Dvorak dan Willian L. Dealey,
1936.
• Dirancang untuk mengurangi jarak pergerakan jari.
• Mempercepat ketikan hingga 200 ketikan per menit.
• Penerimaannya lambat karena pemakai tidak bersedia
berusaha berpindah dari QWERTY. c. Tata Letak 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. 

Alphabetik 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. 

Klockenberg   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.

Papan Ketik untuk penyingkatan kata    Sistem Stenotype 
  Sistem  Stenotype.  Seperti  Anda  ketahui,  steno
dalah  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.
 (Pointing and picking device)
  “  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 “.

Perbandingan (ratio) kontrol/tampilan :
                Gerakan tangan atau respon
K/T    =
              Gerakan kursor

2. Peranti Penuding dan Pengambil a. Mouse  
    - Mekanis
  Bola yang terdapat    di mouse akan menggerakan
  beberapa sensor ketika mouse digerakan.
  - 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

3. Peranti penuding dan pengambil  b. Joystick
 Gerakan  kursor  dikendalikan  oleh  gerakan  tuas  atau
dengan tekanan pada tuas.
Joystick elements:
1. Stick
2. Base
3. Trigger
4. Extra buttons
5. Autofire switch
6. Throttle
7. Hat Switch (POV Hat)
8. Suction Cup  c. Trackball
  Prinsip kerjanya sama dengan mouse, tapi berbeda
dalam cara penggunaanya. d. Pointing Stick
  Prinsip  kerjanya  sama  dengan  mouse  dan  cara
penggunaannya sama dengan trackball e. Touch Pad f. Touch Screen g. Digitizing tablet / Graphics tablet
  Peranti pengambil data dalam bentuk sederatan
koordinat (x,y) yang menentukan gerakan pena pada
media digitasi. h. Light Pen
  Prinsip  kerjanya  adalah  memantau  selisih  antara
waktu  saat  elektron  mulai  melakukan  gerakan  dan
pada saat lokasi tempat pena menyala. Dipergunakan  untuk  mengambil  citra  terformat,   bentuk
dan format hurufnya sudah ditentukan.
  
Kategori peranti ini adalah :
a. Bar code Reader 
  Pola  garis-garis  hitam  putih  yang  sering  djumpai
pada barang-barang yang dijual di toko swalayan.

4. Pengambilan Gambar Terformat b. 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. c. 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.

d. Optical Character Recognation (OCR)
  Peranti  yang  dapat  membaca  teks  dengan
mengonversikannya  ke  dalam  kode  digital.  Dapat
mengubah teks menjadi suara, merekam naskah.  
     Dipergunakan  untuk  mengambil  gambar  atau
citra yang belum memiliki format baku.
 
Kategori peranti ini adalah :
a.  Image Scanner
  Peranti  yang  dapat  mengambil  masukan  data
gambar,  foto  bahkan  juga  tulisan  tangan.  Hasilnya
kemudian diubah menjadi menjadi isyarat digital.
5. Pengambil Gambar tak Terformat b. Kamera digital
  Mengubah  citra optik  ke  sebuah  replika  film
atau  elektronis.  Menggunakan  lensa  untuk
membuat citra dari sebuah obyek.

c. Pembaca Retina Mata
   Berfungsi  membaca  retina  mata  dan
menghasilkan identitas retina mata.     Peranti yang digunakan untuk memantau gerakan
manusia  yang  banyak  dimanfaatkan  pada  virtual  reality
adalah :
a. Headset
      Peranti  yang  dipasang  di  kepala,  menutup
mata,  yang  digunakan  untuk menangkap  dan merekam
gerakan  kepala,  serta menayangkan   berbagai macam
gambar ke mata pemakai.
      
6. Gerakan b. Glove
  Peranti berbentuk sarung tangan yang digunakan
untuk  merekam  jenis  serta  kekuatan  gerakan  jari  dan
tangan pemakai.
   a. Pengingat digital (frame buffer)
  Citra  yang  akan  ditampilkan  ke  layar  disimpan
sebagai matrix  nilai  elemennya menunjukkan  intensitas
dari citra grafis yang akan ditampilkan.

b. Pengendali tampilan (display controller)
  Berfungsi  untuk  melewatkan  isi  pengingat  digital
dan mengolahnya untuk di tampilkan kelayar. 
7. Layar Tampilan terdiri dari : • Pada  pengingat  digital
(frame buffer), citra grafis
ditampilkan sebagai pola
bit.
• Dengan  mengolah  pola
bit  menjadi  pixel.  Untuk
gambar  hitam-putih,
warna  hitam
menggunakan  bit  1  dan
warna  putih
menggunakan bit 0.

Gambar monitor c. 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). 
Pada  saat  ini,  VGA  dan  SVGAlah  yang  paling  banyak
digunakan.
   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.
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).
8. Tipe Layar Tampilan   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
  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.

Design Interface
(Perancangan Tampilan)
Pertemuan 6
Program  aplikasi,  pada  dasarnya  dapat
dikelompokkan ke dalam dua kategori:
a. Program  aplikasi  untuk  keperluan  khusus  dengan
pengguna yang khusus pula (special purpose software).
  Cara  Pendekatan  ini  dilakukan  dengan  User
centered design approach, dimana Perancangan  Interface
melibatkan Pengguna.

b. Program  aplikasi  yang  akan  digunakan  oleh  banyak
pengguna  (general  purpose  software),  yang  juga  sering
dikenal dengan sebutan public software. 
  Cara Pendekatan  ini dilakukan dengan User design
approach.
1. Cara Pendekatan   a. Urutan Perancangan
    - Pemilihan ragam dialog
    - Perancangan struktur dialog
    - Perancangan format pesan
    - Perancangan penanganan kesalahan
    - Perancangan struktur data    
2. Prinsip dan Petunjuk Perancangan     b. Perancangan tampilan berbasis teks
    - Urutan penyajian
    - Kelonggaran
        - Pengelompokan
         - Relevansi
         - Konsistensi
         - Kesederhanaan     c. Perancangan tampilan berbasis Grafis
   Terdapat  5 faktor yang diperlukan yaitu :
    - Ilusi pada obyek-obyek.
    - Urutan visual dan fokus pengguna.
          - Struktur Internal.
          - Kosakata grafis yang konsistensi dan sesuai.
      - Kesesuaian dengan media.

       d. Waktu tanggap

      e. Penanganan Kesalahan
    Kesalahan dibagi menjadi dua :
      - Kesalahan compile-time error
      - Kesalahan run time error atau fatal error
   Peranti  bantu  yang  dijelaskan  hanya  berbentuk
lembaran  kertas  kosong  diberi  nama  dengan  Lembar
Kerja  Tampilan(LKT)  LKT  yang  disajikan  atas  empat
bagian yaitu:
a. Nomor lembar kerja
b.Bagian tampilan
c. Bagian Navigator
d.Bagian keterangan

3. Peranti Bantu Sederhana 4. Jaring Semantik Tampilan
  Jaring semantik tampilan terdiri atas dua komponen:
nomor  tampilan  (lembar  kerj)  dan  transisi  yang
menyebabkan  perpindahan  ke  tampilan  yang  lain  (sesuai
dengan isi bagian navigasi pada rancangan tampilan).

Read more ...