Antar Muka Pengguna /

Pengalaman Pengguna
(User Interface/User Experience ~ UI/UX)
Minggu 04: Aspek Komputer

Yonathan Dri Handarkho , S.T., M.Eng., Ph.D

Course Objective
• Menjelaskan aspek-aspek teknologi yang terkait dengan UI/UX,
khususnya piranti input dan output
• Mengetahui pentingnya aspek teknologi dalam merancang UI/UX,
khususnya piranti input dan output

2
Course Outline
• Piranti Input
• Piranti Output

3
Piranti Input
• Overview
• mengapa perlu memilih alat input yg tepat?
• untuk membantu user mengerjakan tugasnya dengan aman,
efektif, efisien dan enjoy
• secara umum, alat input yang tepat adalah yang:
• sesuai dengan karakteristik fisiologi & psikologi , pembelajaran
& pengalaman user
• sesuai dengan tugas yang akan dikerjakan
• sesuai dengan lingkungan kerja

4
Piranti Input
• Overview
• jenis
• text entry device
• pointing device

5
Text Entry Devices
• Keyboard
• tombol-tombol dalam keyboard biasanya dikelompokkan menjadi
4 bagian:
• tombol fungsi,
• tombol alpha,
• tombol kontrol,
• dan tombol numerik

6
Text Entry Devices
• Keyboard
• tata letak tombol-tombol pada keyboard bermacam-macam
• QWERTY
• Dvorak
• Alphabetik
• Klockenberg
• Palantype
• Stenotype

7
Text Entry Devices
• Keyboard
• tata letak QWERTY
• Ditemukan oleh Scholes, Glidden dan Soule
• menjadi standar mesin ketik komersial pada tahun 1905
• Keyboard QWERTY didesain sedemikian rupa sehingga key yang paling sering ditekan
terpisah letaknya sejauh mungkin
• meminimalkan kemacetan pada saat mengetik (pada mesin ketik mekanik)

1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M , .
SPACE
8
• Keyboard
• tata letak QWERTY
• 48 % gerakan untuk huruf yang berurutan harus dilakukan dengan sebuah tangan
• Dari sekian banyak ketukan yang harus dikerjakan, 32 % dilakukan pada home row,
sehingga untuk baris-baris yang lain, jari tangan harus melakukan pencapaian dengan
usaha yang besar

9
• Keyboard
• tata letak QWERTY
• beberapa kata harus diketik dengan tangan sebelah (56 %
beban pengetikan ada pada tangan kiri)
• jika yang diketik banyak menggunakan huruf A maka jari
kelingking (paling lemah) harus menanggung beban yang berat

10
Text Entry Devices
• Keyboard
• tata letak Dvorak
• tata letak ini didesain sedemikian rupa sehingga tangan kanan dibebani
lebih banyak pekerjaan dibanding tangan kiri
• 70 % ketukan jatuh pada home row sehingga jari-jemari yang harus
mencapai huruf yang tidak berada pada home row mempunyai kerja yang
lebih ringan

11
QWERTY vs DVORAK
• Studi independen tahun 1956 menunjukkan bahwa juru ketik yang
menggunakan QWERTY dan juru ketik DVORAK memiliki tingkat
kecepatan yang sama
• Studi lanjutan tidak menunjukkan pemenang antara keduanya dua.

12
Text Entry Devices
• Keyboard
• tata letak alphabetik
• tombol-tombol pada papan ketik disusun seperti tata letak QWERTY dan Dvorak tetapi
susunan hurufnya berurutan seperti pada urutan alphabet , biasa dipergunakan pada
mainan anak anak

13
14
Text Entry Devices
• Keyboard
• tata letak Klockenberg
• tata letak ini dirancang untuk mengurangi beban otot pada jari-jemari dan
pergelangan tangan serta beban otot pada tangan dan bahu
• menyempurnakan jenis keyboard yang sudah ada, yaitu dengan
memisahkan kedua bagian keyboard (bagian kiri dan kanan).

15
Text Entry Devices
tata letak Klockenberg
• Bagian kiri dan kanan keyboard dipisahkan dengan sudut 15 derajat dan dibuat miring ke
bawah. Selain dari pada itu, keyboard Klockenberg tombol-tombolnya dibuat lebih dekat
(tipis) dengan meja kerja sehingga terasa lebih nyaman untuk bekerja

16
Text Entry Devices
• Papan Ketik untuk Penyingkatan Kata
• Berbagai tata letak yang dijelaskan di atas sering disebut dengan one-key-at-
a-time keyboard, yang artinya untuk mengetik kata yang terdiri atas 10 huruf
kita harus melakukan sepuluh kali ketukan
• Terdapat suatu papan ketik yang dikenal dengan sebutan chord keyboard.
Dengan chord keyboard ini seseorang dapat menekan kombinasi tombol
untuk menghasilkan suatu kata. Hal ini sangat cocok bagi pihak yang harus
mencatat ucapan seseorang seperti petugas pencatat di pengadilan dll..

17
Text Entry Devices
• Chord Keyboard
• tata letak Palantype
• tata letak ini dirancang untuk menghasilkan suatu kata atau suku kata hanya dengan
menekan kombinasi tombol
• memiliki 3 kelompok karakter, yaitu:
• kelompok pada bagian kiri yang menunjukkan konsonan awal sebuah kata,
• bagian tengah yang menunjukkan kelompok vokal
• bagian kanan yang menunjukkan konsonan terakhir dari sebuah kata atau suku kata
• tidak menjamin ejaan yang benar

18
 Text Entry Devices
• Chord Keyboard
tata letak Palantype
• Tidak seluruh huruf konsonan dan vokal dalam alphabet
terdapat disana
• konsonan itu dapat disajikan menggunakan kombinasi
beberapa tombol yang ada. Contoh: kombinasi T+ akan
menghasilkan bunyi D, dan kombinasi OU akan
menghasilkan bunyi OO.

19
 Text Entry Devices
• Chord Keyboard
• tata letak Stenotype
• tata letak ini hampir serupa dengan palantype, dirancang untuk
menghasilkan suatu kata atau suku kata hanya dengan menekan kombinasi
tombol , biasa digunakan oleh wartawan yang mencatat wawancara

20
Text Entry Devices
• Keyboard

21
22
Pointing & Picking Devices
• Pointing & Picking Devices
• piranti interaktif yang digunakan untuk:
• menunjuk atau menempatkan kursor pada suatu posisi pada layar tampilan
• mengambil suatu item informasi untuk dipindah ke tempat lain
• memutar objek
• menggambar garis
• menentukan nilai atau besaran, dll
• piranti penunjuk mempunyai tugas interaktif seperti pemilihan, penempatan,
orientasi, jalur, kuantisasi dan tekstual

23
Pointing & Picking Devices
• Mouse
• digunakan untuk menempatkan kursor pada posisi tertentu
di layar komputer, mengaktifkan menu pilihan pada suatu
program aplikasi dan untuk menggambar
• jenis
• mekanis
• optis

24
Pointing & Picking Devices
• Mouse
• mouse mekanis
• menggunakan sebuah bola karet yang dapat berputar bebas pada tempatnya sehingga
pada saat mouse digerakkan bola akan menggerakan beberapa sensor yang ada dalam
tubuh mouse

25
Pointing & Picking Devices
• Mouse
• mouse optis
• terdiri atas 2 buah LED yang mengeluarkan cahaya merah dan inframerah dan 2 buah
lensa (photo transistor) untuk mendeteksi gerakan (memerlukan landasan khusus yang
bisa mengubah warna LED)

26
Pointing & Picking Devices
• Mouse
• mouse laser
• Pada mouse laser, kerja LED digantikan oleh sebuah infrared laser diode. Prinsip kerjanya
kurang lebih sama dimana sebuah sensor peka cahaya disandingkan dengan sebuah
diode laser yang akan mendeteksi setiap sekecil apapun yang terjadi.

27
Pointing & Picking Devices
• Joystick
• merupakan piranti penunjuk tak langsung yang dikendalikan oleh gerakan
tuas atau dengan tekanan pada tuas

28
Pointing & Picking Devices
• Trackball
• prinsip kerja trackball mirip dengan mouse hanya saja badan dari trackball
tidak digerakkan (yang digerakkan hanya bola pada trackball)

29
Pointing & Picking Devices
• Digitizing Tablet
• digitizing tablet merupakan piranti pengambil data dalam bentuk sederetan
koordinat (x,y) yang menentukan gerakan pena atau puck pada meja digitasi
• teknologi yang digunakan pada digitizing tablet yaitu:
• digitizer resistif
• digitizer medan magnet
• kapasif
• elektrostatis
• sonik

30
Pointing & Picking Devices
• Pena Cahaya (Light Pen)

31
Pointing & Picking Devices
• Panel Sensitif Sentuhan
• panel sensitif sentuhan adalah piranti interaktif yang bekerja dengan cara
mendeteksi ada tidaknya sentuhan tangan atau stylus langsung ke layar
komputer
• prinsip kerjanya dengan cara menginterupsi matriks berkas cahaya atau
dengan mendeteksi adanya perubahan kapasitansi atau bahkan pantulan
ultrasonik
• kelemahan piranti ini adalah penggunaan jari tangan yang dapat
menyebabkan layar menjadi kotor dan tingkat presisi jari tangan yang rendah

32
Pointing & Picking Devices
• Panel Sensitif Sentuhan

33
-- db -- 34 34
35
36
Piranti Input untuk mereka yang berkebutuhan khusus

37
Piranti Input untuk mereka yang berkebutuhan khusus

38
Piranti Output

39
Piranti Output

40
Referensi
• Buku
• Dix, Alan; Finlay, Janet; Abowd, Gregory; Beale, Russell; 1998; Human-
Computer Interaction; Prentice Hall
• Preece, Jenny; Rogers, Yvonne; Sharp, Helen; Benyon, David; Holland, Simon;
Carey, Tom; 1998; Human-Computer Interaction; Addison Wesley
• Santoso, P. Insap; 1997; Interaksi Manusia & Komputer : Teori dan Praktek;
Penerbit Andi; Jogjakarta

41
Diskusi