Computer 
Hurriyatul Fitriyah [hfitriyah@ub.ac.id] 
Human- Computer Interaction Course 
Computer System – Information Technology & Computer Science Program
1. Introduction
Outline 
1.Elements of computer comprise: 
a.Input device 
b.Output display and paper 
2.Memory 
3.Processor
2. Computer Input 
Allowing text entry, pointing, selection and drawing from the screen
2.1. Text Entry 
a.Keyboard 
b.Phone pad 
c.Speech 
d.Hand writing
a. Keyboard 
Most common text entry input device 
QWERTY layout 
DVORAK layout 
 ABCDE layout
Desain Tombol Keyboard 
Ukuran huruf 12 mm; jarak antartombol 6 mm 
Tombol yang agak cekung 
Dibuat dengan bahan yang bersifat dof 
Jika ditekan masuk 3-5 mm 
Tombol-tombol khusus (enter, shift, etc) lebih besar 
Indikator bagi Caps Lock, Num Lock 
Warna yang informatif dan kontras 
Label harus cukup besar untuk dibaca 
Tombol F, J dan 5 pada tata letak QWERTY ditandai untuk pengetikan touch-type
In keyboard, there are also: 
1.Numeric keypad 
2.Function keys 
3.Arrow keys
Function Key 
Dedicated for special task/ function 
Labeled F1 - F12 or PF1 – PF24 
Advantage: decrease the number of typing and error made 
Disadvantage: the function of each label needs to be remembered, the functions of each label is vary between product
Arrow Keys 
The upside down T is the most popular arrangement 
Also used for typematic
b. Phone pad 
Each button can be used to entry text and numeric 
 It demonstrate how human had an amazing adaptability that can move between alphabet and numeric style easily 
There is T9 algorithm that is developed to simplify the writing in phone pad by using large dictionary to disambiguate word by simply typing the relevant letters once. Example: ‘3926753’ becomes “example”
c. Hand- Writing Recognition 
Purpose: making text entry as easy as the way human write, no need to push button 
Current technology is still fairly innacurate and so make a significant number of mistake in recognizing letters
d. Speech Entry 
The computer recognise the sound and respond it as a command 
Weakness: the innacuracy of speech recognition arise since human speech different accent 
It is helpful for auditory-disabled user
Speech Technology 
Pengenalan ucapan masih belum seperti yang digambarkan pada fiksi ilmiah: 
Lebih menuntut ingatan kerja pemakai. 
Derau latar belakang bermasalah. 
Variasi kinerja ucapan pemakai mempengaruhi keefektifan.
Pengenalan, Digitisasi, dan Penghasilan Ucapan 
Macam-macamnya: 
Discrete-word recognition 
Speech recognition 
Speech store and forward 
Speech generation 
Audio tones, audiolization, music
Discrete-Word Recognition 
Mengenali kata yang diucapkan orang satu per satu. 
Kehandalan 90-98% untuk kosakata 20-200 kata. 
Berguna jika: 
Tangan pembicara sibuk. 
Mobilitas diperlukan. 
Mata pembicara sibuk. 
Kondisi yang keras (di bawah air, perang) atau terkungkung (dalam kokpit) yang tidak memungkinkan pemakaian keyboard.
Speech Recognition 
Mengenali kata-kata yang diucapkan secara normal. 
Harapan: pendiktean dokumen, transkripsi rekaman suara. 
Contoh: Dragon NaturallySpeaking, IBM ViaVoice.
Speech Store and Forward 
Penyimpanan dan pengiriman kembali pesan yang diucapkan. 
Voice mail bekerja handal, berbiaya rendah, dan disukai pemakai.
Audio Tones, Audiolization, Music 
Umpan balik berupa suara (bukan ucapan). 
Audio tone: nada sebagai output komputer. 
Audiolization: presentasi informasi yang lebih kompleks dengan kombinasi suara.
e.Eyegaze 
Eyegaze systems allow you to control the computer by simply looking at it! 
How it works: 
1.A low-power laser is shone into the eye and is reflected off the retina 
2.The reflection changes as the angle of the eye alters 
3.By tracking the reflected beam, the eyegaze system can determine the direction in which the eye is looking.
Piranti penunjuk (pointing devices) digunakan untuk menunjuk dan memilih di layar pada sistem manipulasi langsung 
Kelebihan: 
Mengurangi kesalahan ketik pada keyboard 
Dapat memusatkan perhatian pada tampilan 
Ada dua kelompok piranti penunjuk: 
Direct pointing devices: kendali langsung di permukaan layar 
Indirect pointing devices: kendali tak langsung, terpisah dari permukaan layar 
2.2. Positioning, Pointing & Drawing
Tugas Interaksi Piranti Penunjuk 
Select: memilih dari seperangkat item 
Position: memindahkan titik pada ruang berdimensi satu, dua, tiga, atau lebih 
Orient: memilih arah pada ruang berdimensi satu, dua, tiga, atau lebih 
Path: serangkaian operasi position dan orient yang cepat untuk membentuk jalur atau kurva 
Quantify: menentukan nilai numerik 
Text: menandai lokasi penyisipan, penghapusan, perubahan teks
a. Direct Pointing Devices 
Light pen 
Touch screen 
Stylus
Light Pen 
Menunjuk langsung ke layar dengan pena yang mempunyai sel sensitif cahaya 
Kelemahan: 
Tangan menutupi layar 
Tangan jauh dari keyboard 
Light pen harus diangkat
Touch Screen 
Langsung menyentuh layar dengan jari 
Kelemahan: 
Melelahkan 
Tangan menutupi layar 
Tangan jauh dari keyboard 
Penunjukan tidak presisi 
Layar bisa kotor
Stylus 
Alat yang digunakan untuk menyentuh touch screen pada palmtop
b. Indirect Pointing Device 
Mouse 
Trackball 
Joystick 
Trackpad 
Touchpad 
Graphic Tablet
Mouse 
Kelebihan: 
Posisi tangan nyaman 
Tombolnya mudah ditekan 
Pergerakan panjang cepat 
Penempatan presisi 
Kelemahan: 
Tangan harus pindah dari keyboard 
Memakan tempat di meja 
Kabelnya mengganggu 
Harus diangkat dan diletakkan kembali untuk pergerakan panjang
Trackball 
“Mouse terbalik” 
Tidak memakan banyak tempat 
Banyak digunakan pada laptop
Joystick 
Baik untuk tracking. 
Pergerakan sedikit, perpindahan arah mudah
Trackpad 
Joystick mini isometrik dari bahan karet yang diletakkan di antara tombol-tombol keyboard dan digerakkan jari tangan
Touchpad 
Permukaan peka sentuh yang biasa digunakan pada laptop. 
Nyaman seperti touch screen namun tidak perlu langsung menyentuh layar
Graphics Tablet 
Permukaan peka sentuh yang terpisah dari layar. Mendeteksi gerakan stylus atau puck. 
Keuntungan: 
Posisi tangan nyaman 
Gerakan tangan fleksibel 
Sangat cocok untuk aplikasi drawing 
Tidak perlu menunjuk layar 
Permukaan luas
3. Computer Output
3.1.Teknologi Display 
Visual Display Unit (VDU) adalah sumber umpan balik utama bagi pemakai dari komputer. 
Bentuknya: 
Monitor 
Fotografi digital: Download ke komputer mudah. 
Video digital: Videodisk, CD-ROM, DVD-ROM. 
Proyektor 
Heads-up displays: pada kaca mobil/pesawat. 
Helmet-mounted displays
3.2. Printer 
Dot-matrix printer 
Menggunakan pita bertinta. 
Inkjet printer 
Tidak berisik, kualitas cetakan baik. 
Thermal printer 
Tidak berisik, murah. 
Menggunakan kertas khusus (berlilin) atau kertas biasa. 
Laser printer 
Hasil berkualitas tinggi.
CRT 
Senapan electron menembak layar berlapis phosphor yang akan berpendar dan menghasilkan intensitas warna 
Layar hitam putih memiliki 1 electron gun, sedangkan layar warna memiliki 3 
Isu kesehatan: menyebabkan sakit mata dan kelelahan mata karena keberadaan flicker dan kontras yang rendah 
Anjuran: jangan duduk terlalu dekat dengan layar, jangan menonton layar terlalu lama, tidak meletakkan layar tepat di depan jendela yang terang
LCD 
Liquid-crystal displays (LCD) 
Perubahan tegangan mempengaruhi polarisasi kapsul kristal cair 
Digunakan pada notebook, tv 
Keuntungan: lebih kecil, ringan, rendah konsumsi listrik daripada CRT, lebih tidak melelahkan mata karena cahaya yang diemisikan dari layar memiliki intensitas rendah
Plasma 
Plasma panel 
Gas neon dipendarkan oleh arus listrik 
Bekerja secara raster-scan dengan menyapukan warna baris demi baris (bukan bitmap display seperti CRT dan LCD) 
Banyak digunakan di layar besar
LED 
Light-emitting diodes (LED) 
Diode dinyalakan oleh arus listrik
3.2. Printer 
Dot-matrix printer 
Menggunakan pita bertinta (80-120 dpi, 50 cps) 
Inkjet printer 
Tidak berisik, kualitas cetakan baik (300-600 dpi) 
Thermal printer 
Tidak berisik, murah. 
Menggunakan kertas khusus (berlilin) atau kertas biasa. 
Laser printer 
Hasil berkualitas tinggi (600-2400 dpi)
Printer (Lanj.) 
Plotter 
Menggunakan pena untuk menggambar di atas gulungan kertas. 
Photographic printer 
Menghasilkan slide dan cetakan foto. 
Newspaper/magazine-layout systems 
Hasil berkualitas produksi.
3.3. Sound Output 
The sounds vary from beeps, bongs, clicks, clanks and its variant 
1.Attention 
2.Status information 
3.Confirmation 
4.Navigation 
Sound is also used for visual impaired communcation aid
3.4. Touch, feel and smell 
Touch/ haptic: such in computer gaming (vibration when the car off the track or crashes), electronic braille dispaly either uses pins that rise and fall or pins that vibrate 
Feel: in Virtual reality application, texture (still in research) 
Smell: the challenge is because smell is a complex multi- dimensional sense (still in research)
4. Memory
4.1. RAM 
RAM (Random Access Memory) 
It is like short-term memory in human 
Affect the general speed of computer 
Access time are of the order of 10 nanoseconds, information can be acessed at a rate around 100 Milion Bytes 
Volatile; its contents are lost when the power is turned off, though some computer has non-volatile RAM aided with small batery
4.2. Disks 
It is like longterm memory in human 
There are magnetic disks and optical disks 
Magnetic disks such floppy disk, hard disk, are coated with magnetic material on which the information is stored 
Optical disks such CD and DVD use laser light to read and write information on it.
5. Processing
The processing speed affect the user interface 
Effect of buffering: problem in cursor tracking, icon wars 
even though fast processing is preferable, designer shoud mind the user pace to read and understand the output or feedback 
Processing speed is limited by various factors: computation, memory access, graphics and networks delays
6. Network
Most of computer application nowadays is not a standalone mode of operation, but linked together in networks 
It allows users to much more extensive, faster and easier access to information

Imk introduction

  • 1.
    Computer Hurriyatul Fitriyah[hfitriyah@ub.ac.id] Human- Computer Interaction Course Computer System – Information Technology & Computer Science Program
  • 2.
  • 3.
    Outline 1.Elements ofcomputer comprise: a.Input device b.Output display and paper 2.Memory 3.Processor
  • 4.
    2. Computer Input Allowing text entry, pointing, selection and drawing from the screen
  • 5.
    2.1. Text Entry a.Keyboard b.Phone pad c.Speech d.Hand writing
  • 6.
    a. Keyboard Mostcommon text entry input device QWERTY layout DVORAK layout  ABCDE layout
  • 7.
    Desain Tombol Keyboard Ukuran huruf 12 mm; jarak antartombol 6 mm Tombol yang agak cekung Dibuat dengan bahan yang bersifat dof Jika ditekan masuk 3-5 mm Tombol-tombol khusus (enter, shift, etc) lebih besar Indikator bagi Caps Lock, Num Lock Warna yang informatif dan kontras Label harus cukup besar untuk dibaca Tombol F, J dan 5 pada tata letak QWERTY ditandai untuk pengetikan touch-type
  • 8.
    In keyboard, thereare also: 1.Numeric keypad 2.Function keys 3.Arrow keys
  • 9.
    Function Key Dedicatedfor special task/ function Labeled F1 - F12 or PF1 – PF24 Advantage: decrease the number of typing and error made Disadvantage: the function of each label needs to be remembered, the functions of each label is vary between product
  • 10.
    Arrow Keys Theupside down T is the most popular arrangement Also used for typematic
  • 11.
    b. Phone pad Each button can be used to entry text and numeric  It demonstrate how human had an amazing adaptability that can move between alphabet and numeric style easily There is T9 algorithm that is developed to simplify the writing in phone pad by using large dictionary to disambiguate word by simply typing the relevant letters once. Example: ‘3926753’ becomes “example”
  • 12.
    c. Hand- WritingRecognition Purpose: making text entry as easy as the way human write, no need to push button Current technology is still fairly innacurate and so make a significant number of mistake in recognizing letters
  • 13.
    d. Speech Entry The computer recognise the sound and respond it as a command Weakness: the innacuracy of speech recognition arise since human speech different accent It is helpful for auditory-disabled user
  • 14.
    Speech Technology Pengenalanucapan masih belum seperti yang digambarkan pada fiksi ilmiah: Lebih menuntut ingatan kerja pemakai. Derau latar belakang bermasalah. Variasi kinerja ucapan pemakai mempengaruhi keefektifan.
  • 15.
    Pengenalan, Digitisasi, danPenghasilan Ucapan Macam-macamnya: Discrete-word recognition Speech recognition Speech store and forward Speech generation Audio tones, audiolization, music
  • 16.
    Discrete-Word Recognition Mengenalikata yang diucapkan orang satu per satu. Kehandalan 90-98% untuk kosakata 20-200 kata. Berguna jika: Tangan pembicara sibuk. Mobilitas diperlukan. Mata pembicara sibuk. Kondisi yang keras (di bawah air, perang) atau terkungkung (dalam kokpit) yang tidak memungkinkan pemakaian keyboard.
  • 17.
    Speech Recognition Mengenalikata-kata yang diucapkan secara normal. Harapan: pendiktean dokumen, transkripsi rekaman suara. Contoh: Dragon NaturallySpeaking, IBM ViaVoice.
  • 18.
    Speech Store andForward Penyimpanan dan pengiriman kembali pesan yang diucapkan. Voice mail bekerja handal, berbiaya rendah, dan disukai pemakai.
  • 19.
    Audio Tones, Audiolization,Music Umpan balik berupa suara (bukan ucapan). Audio tone: nada sebagai output komputer. Audiolization: presentasi informasi yang lebih kompleks dengan kombinasi suara.
  • 20.
    e.Eyegaze Eyegaze systemsallow you to control the computer by simply looking at it! How it works: 1.A low-power laser is shone into the eye and is reflected off the retina 2.The reflection changes as the angle of the eye alters 3.By tracking the reflected beam, the eyegaze system can determine the direction in which the eye is looking.
  • 21.
    Piranti penunjuk (pointingdevices) digunakan untuk menunjuk dan memilih di layar pada sistem manipulasi langsung Kelebihan: Mengurangi kesalahan ketik pada keyboard Dapat memusatkan perhatian pada tampilan Ada dua kelompok piranti penunjuk: Direct pointing devices: kendali langsung di permukaan layar Indirect pointing devices: kendali tak langsung, terpisah dari permukaan layar 2.2. Positioning, Pointing & Drawing
  • 22.
    Tugas Interaksi PirantiPenunjuk Select: memilih dari seperangkat item Position: memindahkan titik pada ruang berdimensi satu, dua, tiga, atau lebih Orient: memilih arah pada ruang berdimensi satu, dua, tiga, atau lebih Path: serangkaian operasi position dan orient yang cepat untuk membentuk jalur atau kurva Quantify: menentukan nilai numerik Text: menandai lokasi penyisipan, penghapusan, perubahan teks
  • 23.
    a. Direct PointingDevices Light pen Touch screen Stylus
  • 24.
    Light Pen Menunjuklangsung ke layar dengan pena yang mempunyai sel sensitif cahaya Kelemahan: Tangan menutupi layar Tangan jauh dari keyboard Light pen harus diangkat
  • 25.
    Touch Screen Langsungmenyentuh layar dengan jari Kelemahan: Melelahkan Tangan menutupi layar Tangan jauh dari keyboard Penunjukan tidak presisi Layar bisa kotor
  • 26.
    Stylus Alat yangdigunakan untuk menyentuh touch screen pada palmtop
  • 27.
    b. Indirect PointingDevice Mouse Trackball Joystick Trackpad Touchpad Graphic Tablet
  • 28.
    Mouse Kelebihan: Posisitangan nyaman Tombolnya mudah ditekan Pergerakan panjang cepat Penempatan presisi Kelemahan: Tangan harus pindah dari keyboard Memakan tempat di meja Kabelnya mengganggu Harus diangkat dan diletakkan kembali untuk pergerakan panjang
  • 29.
    Trackball “Mouse terbalik” Tidak memakan banyak tempat Banyak digunakan pada laptop
  • 30.
    Joystick Baik untuktracking. Pergerakan sedikit, perpindahan arah mudah
  • 31.
    Trackpad Joystick miniisometrik dari bahan karet yang diletakkan di antara tombol-tombol keyboard dan digerakkan jari tangan
  • 32.
    Touchpad Permukaan pekasentuh yang biasa digunakan pada laptop. Nyaman seperti touch screen namun tidak perlu langsung menyentuh layar
  • 33.
    Graphics Tablet Permukaanpeka sentuh yang terpisah dari layar. Mendeteksi gerakan stylus atau puck. Keuntungan: Posisi tangan nyaman Gerakan tangan fleksibel Sangat cocok untuk aplikasi drawing Tidak perlu menunjuk layar Permukaan luas
  • 34.
  • 35.
    3.1.Teknologi Display VisualDisplay Unit (VDU) adalah sumber umpan balik utama bagi pemakai dari komputer. Bentuknya: Monitor Fotografi digital: Download ke komputer mudah. Video digital: Videodisk, CD-ROM, DVD-ROM. Proyektor Heads-up displays: pada kaca mobil/pesawat. Helmet-mounted displays
  • 36.
    3.2. Printer Dot-matrixprinter Menggunakan pita bertinta. Inkjet printer Tidak berisik, kualitas cetakan baik. Thermal printer Tidak berisik, murah. Menggunakan kertas khusus (berlilin) atau kertas biasa. Laser printer Hasil berkualitas tinggi.
  • 37.
    CRT Senapan electronmenembak layar berlapis phosphor yang akan berpendar dan menghasilkan intensitas warna Layar hitam putih memiliki 1 electron gun, sedangkan layar warna memiliki 3 Isu kesehatan: menyebabkan sakit mata dan kelelahan mata karena keberadaan flicker dan kontras yang rendah Anjuran: jangan duduk terlalu dekat dengan layar, jangan menonton layar terlalu lama, tidak meletakkan layar tepat di depan jendela yang terang
  • 38.
    LCD Liquid-crystal displays(LCD) Perubahan tegangan mempengaruhi polarisasi kapsul kristal cair Digunakan pada notebook, tv Keuntungan: lebih kecil, ringan, rendah konsumsi listrik daripada CRT, lebih tidak melelahkan mata karena cahaya yang diemisikan dari layar memiliki intensitas rendah
  • 39.
    Plasma Plasma panel Gas neon dipendarkan oleh arus listrik Bekerja secara raster-scan dengan menyapukan warna baris demi baris (bukan bitmap display seperti CRT dan LCD) Banyak digunakan di layar besar
  • 40.
    LED Light-emitting diodes(LED) Diode dinyalakan oleh arus listrik
  • 41.
    3.2. Printer Dot-matrixprinter Menggunakan pita bertinta (80-120 dpi, 50 cps) Inkjet printer Tidak berisik, kualitas cetakan baik (300-600 dpi) Thermal printer Tidak berisik, murah. Menggunakan kertas khusus (berlilin) atau kertas biasa. Laser printer Hasil berkualitas tinggi (600-2400 dpi)
  • 42.
    Printer (Lanj.) Plotter Menggunakan pena untuk menggambar di atas gulungan kertas. Photographic printer Menghasilkan slide dan cetakan foto. Newspaper/magazine-layout systems Hasil berkualitas produksi.
  • 43.
    3.3. Sound Output The sounds vary from beeps, bongs, clicks, clanks and its variant 1.Attention 2.Status information 3.Confirmation 4.Navigation Sound is also used for visual impaired communcation aid
  • 44.
    3.4. Touch, feeland smell Touch/ haptic: such in computer gaming (vibration when the car off the track or crashes), electronic braille dispaly either uses pins that rise and fall or pins that vibrate Feel: in Virtual reality application, texture (still in research) Smell: the challenge is because smell is a complex multi- dimensional sense (still in research)
  • 45.
  • 46.
    4.1. RAM RAM(Random Access Memory) It is like short-term memory in human Affect the general speed of computer Access time are of the order of 10 nanoseconds, information can be acessed at a rate around 100 Milion Bytes Volatile; its contents are lost when the power is turned off, though some computer has non-volatile RAM aided with small batery
  • 47.
    4.2. Disks Itis like longterm memory in human There are magnetic disks and optical disks Magnetic disks such floppy disk, hard disk, are coated with magnetic material on which the information is stored Optical disks such CD and DVD use laser light to read and write information on it.
  • 49.
  • 50.
    The processing speedaffect the user interface Effect of buffering: problem in cursor tracking, icon wars even though fast processing is preferable, designer shoud mind the user pace to read and understand the output or feedback Processing speed is limited by various factors: computation, memory access, graphics and networks delays
  • 51.
  • 52.
    Most of computerapplication nowadays is not a standalone mode of operation, but linked together in networks It allows users to much more extensive, faster and easier access to information