April 1, 2019 | Author: Anggito Abimanyu | Category: N/A
pembelajaran mengenai GUI. Pembelajaran Rekayasa Interface...
Politeknik Telkom
Desain User Interface
INTERAKSI INTERAKSI MANUSIA & KOMPUTER
POLITEKNIK POLITEKNIK TELKOM BANDUNG 2009
i
Politeknik Telkom
Desain User Interface
PENULIS: AGUS PRATONDO
Dilarang menerbitkan kembali, menyebarluaskan, atau menyimpan baik sebagian maupun seluruh isi buku dalam bentuk dan dengan cara apapun tanpa izin tertulis dari Politeknik Telkom Hak cipta dilindungi undang-undang @ Politeknik Telkom 2009
No part of this document document may be copied, reproduced, printed, distributed, modified, removed and amended in any form by any means without prior written authorization authorization of Telkom Polytechnic. Copyright @ 2009 Telkom Polytechnic. All rights reserved ii
Politeknik Telkom
Desain User Interface
KATA PENGANTAR Assalamu‟alaikum Wr. Wb.
Segala puji bagi Allah SWT karena dengan karunia-Nya courseware courseware ini dapat diselesaikan. Atas nama Politeknik Telkom, kami sangat menghargai dan ingin menyampaikan terima kasih kepada penulis, penerjemah dan penyunting atas kontribusi yang telah diberikan sehingga courseware ini courseware ini dapat tersusun. Kami mendorong para pengajar & mahasiswa untuk memberikan masukan yang positif. Saran mereka akan akan menjadi bahan pertimbangan yang serius serius dan banyak yang akan dimasukkan sebagai bahan perbaikan di edisi berikutnya. Kami akan sangat mengahargai apabila semua pihak dapat menyampaikan pendapatnya melalui braincenter@politekniktelkom.
[email protected]. ac.id. Semoga courseware courseware ini dapat memberikan manfaat bagi seluruh Civitas Akademika Politeknik Telkom dalam memahami materi perkuliahan di Politeknik Telkom. Amin. Wassalamu‟alaikum Wr. Wb. Bandung, September 2009
Christanto Triwibisono Wakil Direktur I Bidang Akademik & Pengembangan
iii
Politeknik Telkom
Desain User Interface
DAFTAR ISI
KATA PENGANTAR ............................................. ...................... ......................................... .................. iii DAFTAR ISI ............................................ ..................... .............................................. .................................. ........... iv 1 PENGANTAR INTERAKSI MANUSIA DENGAN KOMPUTER ............................................................. 1 1.1 Pendahuluan...................................................................... 2 1.2 Model Interaksi.............................................. ........................ ......................................... ................... 6 1.3 Bidang yang Berkaitan........................................... ..................... .................................. ............ 7 1.4 Usability ............................................. ...................... ............................................. ............................. ....... 11 2 MANUSIA ............................. ............. ............................. ............................ ..................... ...... 20 2.1 Penglihatan............................................. ....................... ............................................. ......................... .. 21 2.2 Pendengaran .......................................... ................................................................. ......................... .. 28 2.3 Peraba ............................................ ..................... .............................................. ................................. .......... 30 2.4 Memori .............................................. ....................... ............................................. ............................. ....... 30 3 KOMPUTER ........................................................... 37 3.1 Sistem Komputer ..................................................... ............................... ............................ ...... 38 3.2 Layar monitor ............................................ ...................... ........................................... ..................... 38 3.3 Speaker dan Microphone ............................................... ........................... .................... 42 3.4 Keyboard ............................................... ......................... ............................................. ......................... .. 45 3.5 Mouse ............................................ ..................... .............................................. ................................. .......... 48 3.6 Touchscreen .............................................. ........................ ........................................... ..................... 51 4 KONSEP INTERAKSI ........................................... 61 4.1 Interaksi ............................................. ...................... ............................................. ............................. ....... 62 4.2 Baris Perintah Tunggal .............................................. ........................ ............................ ...... 63 4.3 Baris Perintah Terstruktur ............................................. ........................ ..................... 67 4.4 Menu dan WIMP (Window Icon Menu Pointer) ........... .... ....... 69 4.5 Bahasa Alami................................................................... 86 4.6 Query ............................................ ..................... .............................................. ................................. .......... 90 4.7 Form ............................................... ....................... .............................................. ................................ .......... 92
iv
Politeknik Telkom
5 5.1 5.2 5.3 5.4 5.5 6 6.1 6.2 6.3 6.4 6.5 7 7.1 7.2 7.3 7.4 8 8.1 8.2 9 9.1 9.2 9.3 9.4
Desain User Interface
PRINSIP DESAIN ................................................ 102 Evaluasi Antarmuka ...................................................... 103 Prinsip dalam Desain Antar Muka ................................ 109 Eight Golden Rules of Dialog Design ........................... 110 General Principles of User Interface Design ............... 114 Object Oriented User Interface from IBM .................. 116 WINDOW & MULTIPLE WINDOW ...................... 127 Persoalan pada Aplikasi Berbasis Window .................. 128 Komponen Utama Window ......................................... 128 Operasi pada Window ................................................. 129 Multipe Window .......................................................... 131 Koordinasi pada Multipe Window ............................... 132 FORM..................................................................... 142 Panduan Pembuatan Form............................................ 143 Sederhanakan Desain Form ......................................... 143 Sediakan Label yang Lugas pada Setiap Elemen ............ 146 Cegah Kesalahan dan Berikan Sarana Recovery .......... 147 HELP AND GUIDE................................................. 155 Help and Guide tidak penting? ..................................... 156 Model Help and Guide ................................................. 156 TEXT TO SPEECH ................................................. 167 Sejarah .......................................................................... 168 Text To Speech ............................................................ 172 TTS Bahasa Indonesia.................................................. 174 Pemrograman menggunakan TTS Bahasa Indonesia ... 177
v
Politeknik Telkom
10 10.1 10.2 10.3 10.4
vi
Desain User Interface
Speech Recognition ............................................... 188 Voice Recognition dan Speech Recognition.......................... 190 Skema Utama Speech Recognition .......................................... 191 Proses Pencocokan Pola Suara ................................................ 192 Aplikasi berbasis Speech Recogniton ..................................... 193
Politeknik Telkom
1
Desain User Interface
PENGANTAR INTERAKSI MANUSIA DENGAN KOMPUTER
Overview
Penggunaan komputer pada era teknolgi digital, telah mengambil peran yang cukup penting. Berbagai macam aplikasi yang pada komputer telah membantu manusia dalam meningkatkan efektifitas dan efisiensinya. Untuk mendapatkan tingkat efektifitas dan efisensi penggunaan yang optimum, diperlukan desain user interface antara manusia dengan komputer. Bab ini akan membahas uargensi desain antarmuka antara manusia dengan komputer.
Tujuan
Mahasiswa memahami urgensi desain antarmuka manusia dengan komputer.
Pengantar Interaksi Manusia dengan Komputer
1
Politeknik Telkom
1.1
Desain User Interface
Pendahuluan
Ilmu interaksi manusia dan komputer merupakan ilmu yang mempelajari tentang cara mendesain, mengevaluasi, dan mengimplementasikan sistem komputer yang interaktif sehingga user dapat menggunakannya dengan mudah. Pada prinsipnya, kerja komputer adalah menerima masukan (input), memproses (process), dan memberikan keluaran (output), yang sering dikenal dengan singkatan IPO. User memberikan memasukkan perintah atau data kepada komputer. Masukan ini dilakukan dengan berbagai macam piranti masukan (input device). Masukan ini akan direspon oleh komputer. Komputer melakukan pengolahan dan melaksanakan perintah sesuai dengan perintah user kemudian menyajikan kembali hasil pemrosesan tersebut kepada user. Hal ini terjadi berulang kali sehingga terjadi interaksi. Interaksi tersebut merupakan komunikasi dua arah antara manusia atau user dengan komputer. Perhatikan gambar berikut ini.
Input
(Thinking / Memorizing) Proses
Output
Gambar 1 Interaksi Manusia dengan Komputer. 2
Politeknik Telkom
Desain User Interface
Kerjakan latihan berikut ini! 1. Piranti masukan yang paling umum adalah keyboard dan mouse. Sebutkan piranti masukan yang lain dan apa fungsi dari piranti masukan tersebut? Piranti Masukan
2.
Piranti keluaran yang paling umum adalah layar monitor dan printer. Sebutkan piranti keluaran yang lain dan apa fungsi dari piranti keluaran tersebut ?
Piranti Keluaran
3.
Fungsi
Fungsi
Beberapa piranti komputer ada yang beguna sebagai piranti masukan dan sekaligus piranti keluaran. Sebutkan piranti masukan dan sekaligus piranti keluaran tersebut dan apa fungsinya?
Piranti I/O
Fungsi
Pengantar Interaksi Manusia dengan Komputer
3
Politeknik Telkom
Desain User Interface
Perintah dan masukan user merupakan bahasa atau simbol yang dapat dimengerti oleh manusia. Setelah masukan user diterima, komputer melakukan proses dengan kerumitan yang sangat tinggi. Semua data pada komputer dinyatakan dalam notasi biner. Notasi biner ini merupakan represntasi dari suatu treshold tegangan tertentu sedemikian sehingga nilai 1 untuk tegangan tertentu dan nilai O untuk tegangan yang lain. Tidak hanya representasi data saja yang rumit, pengolahan data komputer juga merupakan proses yang tidak kalah rumitnya. Pada processor, dilakukan operasi yang mengeksekusi perintah-perintah tingkat rendah yang dalam satu detik dapat melaksanakan jutaan instruksi. Satu instruksi tingkat rendah berlangsung sangat singkat, tergantung dari kecepatan processor yang digunakan. Berbagai kerumitan yang ada pada pemrosesan data pada komputer tidak akan diperlihatkan kepada user. User hanya diberikan interface tempat data dimasukkan dan hasil pengolahan dikeluarkan. Antarmuka yang paling umum adalah layar monitor.
Gambar 2 Interface komputer. Melalui interface yang baik, interaksi akan optimal. Waktu delay untuk memasukkan input dan waktu untuk memahami output dapat ditekan seminimal mungkin. Disadari atau tidak, pada dasarnya penggunaan komputer oleh manusia merupakan sebuah interaksi atau dialog. Interkasi terjadi antara manusia dengan layar monitor. Tidak hanya mata yang terlibat dengan melihat layar monitor. Berbagai macam aksi dilakukan tangan dengan menekan tombol pada keyboard berupa tombol angka dan huruf, atau dengan melakukan satu sentuhan kecil pada mouse. Hasil yang terlihat di layar monitor terus dipantau dan menentukan aksi selanjutnya. Contohnya, ketika seseorang mengetikkan 4
Politeknik Telkom
Desain User Interface
kata “selamat pagi” namun ternyata ia salah mengetik “selamta pagi” user segera melakukan aksi untuk memperbaiki. Aksi yang dilakukan mungkin berbeda untuk satu user dengan user yang lain. Ada yang menggunakan backspace, ada menggunakan key panah kiri, atau short cut dengan menggunakan CTRL untuk berpindah ke kata sebelumnya baru melakukan pergeseran. Berbagai macam aksi ini ditentukan oleh beberapa faktor. Misalnya dari aspek teknologi aplikasi, mungkin telah tersedia auto correct sehinga user tidak perlu memperbaikinya. Atau terdapat short cut untuk berpindah antar kata, sehingga user dapat berpindah dari satu kata ke kata yang lain dengan cepat. Selain itu, pengetahuan user terhadap aplikasi yang ia gunakan juga menentukan langkah-langkah yang diambilnya. Boleh jadi aplikais telah menyediakan berbagai macam fitur yang diperlukan, namun karena ketidakhatuan user, maka fitur tersebut tidak digunakan. User biasanya tidak menyadari adanya interaksi dengan komputer. User baru menyadari proses interaksi ini apabila terdapat masalah yang mengganggu interaksinya, misalnya proses atau respon yang lambat, layr yang kurang menarik, layar yang sulit dibaca, teks alert yang sulit dipahami dan sebagainya.
Gambar 3 Menu yang terlalu kecil pada Toolbar Microsoft Office. Tanpa mempelajari lebih jauh tentang konsep ineraksi manusia dengan komputer, sebutkan interaksi yang tidak baik/tidak nyaman dengan komputer berdasarkan pengalaman Anda!
Pengantar Interaksi Manusia dengan Komputer
5
Politeknik Telkom
1.2
Desain User Interface
Model Interaksi
Pada interaksi antara manusia dengan komputer terdapat beberapa model yang umum digunakan, antara lain: 1. Command line interface 2. Menu 3. Natural language 4. Question/answer and query dialogue 5. Form-fills and spreadsheets 6. Windows, Icons, Menus and Pointers Dengan melakukan browsing di internet, maupun berdasarkan pengalaman Anda dalam menggunakan Operating System maupun aplikasi komputer, cobalah cari contoh-contoh interaksi untuk model berikut: 1. Command line interface
2. Menu
3. Natural language
4. Question/answer and query dialogue
6
Politeknik Telkom
Desain User Interface
5. Form-fills and spreadsheets
6. Windows, Icons, Menus and Pointers
1.3
Bidang yang Berkaitan
Untuk mendapatkan interaksi yang baik antara manusia dengan komputer, pada perancangan desain antar muka diperlukan berbagai macam pertimbangan dari berbagai sudu disiplin ilmu. Bidang studi yang berperan dalam ilmu interaksi komputer adalah sebagai berikut: 1. Teknik elektronika & ilmu komputer. Bidang ini merupakan bidang dasar dalam pembahasan interaksi manusia dengan komputer karena komputer sendiri merupakan subjek dalam interaksi tersebut. Teknologi yang berkembang pada komputer akan sangat mempengaruhi pola interaksi yang terjadi. Teknologi tersebut tidak hanya teknologi perangkat keras, namun juga perangkat lunak. Berbagai macam piranti masukan maupun keluaran semakin memanjakan pengguna. Perangkat lunak yang memungkinkan penyajian data dalam berbgaia format seperti teks, video, maupun suara juga semakin maju. Keduanya merupakan hal fundamental dalam perancangan sistem interaksi antara manusia dengan komputer.
Pengantar Interaksi Manusia dengan Komputer
7
Politeknik Telkom
Desain User Interface
2. Psikologi. Bidang ini memperhatikan sifat, kebiasaan, persepsi, pengolahan kognitif, dan ketrampilan motorik pengguna. 3. Perancangan grafis dan tipografi. Bidang ini memperhatikan bagaimana representasi grafis (gambar) yang mewakili berbagai macam ram kalimat. Gambar digunakan sebagai sarana dialog yang cukup efektif saat terjadi interkasi antara manusia dengan komputer. Sebuah gambar atau ikon dapat secara cepat memberikan informasi atau makna bagi user tanpa harus bayak berkata-kata. Respon kecepatan pemahaman terhadap gambar juga lebih baik dari pada respont erhadap teks yang panjang. 4. Ergonomik. Bidang ini berkaitan dengan aspek fisik untuk mendapatkan lingkungan kerja yang nyaman. Aspek fisik ini misalnya berkaitan dengan meja, kursi, lampu, keyboadrd, mouse, dan sebagainya. 5. Antropologi Bidang ini merupakan cabang ilmu pengetahuan yang mempelajari tentang manusia, dan memberi suatu pandangan tentang cara kerja berkelompok yang masing – masing anggotanya dapat memberikan konstribusi sesuai dengan bidangnya. Kehadiaran teknologi informasi (dengan sarananya adalah komputer) sedikit banyak telah mempengaruhi cara kerja dan pola hubingan sekelompok orang. 6. Linguistik Bidang ini merupakan cabang ilmu pengetahuan yang mempelajari tentang bahasa. Bahasa sebagai sarana komunikasi mendasar diperlukan dalam pembuatan desain interaksi aantara manusia dengan komputer. Melalui bahasa, berbagai macam simbol dan suara diintepretasikan sebagai perintah yang akan dikerjakan oleh komputer. Contoh bahasa diantaranya bahasa grafis, bahasa alami, bahasa menu, dan bahasa perintah. Bahasa yang kita gunakan sehari-hari merupakan contoh bahasa alami. 7. Sosiologi Bidang ini mempelajari tentang pengaruh sistem manusia-komputer dalam struktur sosial. Berbagai macam dampak sosial dapat timbul oleh
8
Politeknik Telkom
Desain User Interface
adannya perkembangan teknologi komputer yang semakin canggihbaik dari sisi hardware maupun software.
Ergonomik
Antropologi
Tipografi
Linguistik
Psikologi
Teknik Elektro dan Ilmu Komputer
Sosiologi
1. Teknologi yang berkembang pada pada teknik elektro dan dan ilmu komputer berpengaruh besar pada pola interaksi yang terjadi antara manusia dengan komputer. Berikan contoh-contoh yang berkaitan dengan perkembangan teknologi ini baik hardware maupun software yang mempengaruhi pola interaksi tersebut.
2. Berikan contoh peranan bidang psikologi dalam interaksi antara manusia dengan komputer. Pengantar Interaksi Manusia dengan Komputer
9
Politeknik Telkom
Desain User Interface
3. Berikan contoh peranan bidang perancangan grafis dan tipografi.
4. Berikan contoh peranan bidang Ergonomik dalam interaksi antara manusia dengan komputer.
5. Berikan contoh peranan bidang Antropologi dalam interaksi antara manusia dengan komputer.
6. Berikan contoh peranan bidang Linguistik dalam interaksi antara manusia dengan komputer.
7. Berikan contoh peranan bidang Sosiologi dalam interaksi antara manusia dengan komputer. 10
Politeknik Telkom
1.4
Desain User Interface
Usability
Dalam mendesain antarmuka komputer, perlu diperhatikan faktor tingkat kebergunaan/ usability. Usability memegang peranan cukup besar agar sistem secara baik dapat diterima user dan seluruh pihak yang terkait dengan sistem. Menurut Nielsen ada lima hal yang menentukan usability yaitu: 1. Learnability : User dapat segera memulai pekerjaanya semenjak dimulainya penggunaan sistem. 2. Efficiency : User dapat meningkatkan produktifitasnya setelah pertama kali belajar. 3. Memorability : User dapat menggunakan sistem kembali dengan cepat setelah lama tidak menggunakan aplikasi tersebut tanpa perlu belajar dari awal kembali 4. Errors: User harus mampu diarahkan untuk sekecil mungkin berbuat kesalahan. Apabila user melakukan kesalahan harus ada langkah penanganan yang dapat memulihkan kesalahan tersebut dengan segera. 5. Satisfaction: User harus harus merasa nayaman dengan sistem aplikasi yang digunakannya. Nielson juga memperkenalkan prinsip dalam usability agar sistem menjadi user friendly yaitu: 1. Simple and natural dialogue 2. Speak the user s language 3. Minimise user memory load 4. Consistency 5. Feedback 6. Clearly marked exits 7. Shortcut 8. Good error messages 9. Prevent errors ’
Pengantar Interaksi Manusia dengan Komputer
11
Politeknik Telkom
1.
Desain User Interface
Cobalah lakukan googling dan jelaskan prinsip usability dari Nielson di atas! a. ________________________________________ b. ________________________________________ c. ________________________________________ d. ________________________________________ e. ________________________________________ f.
________________________________________
g. ________________________________________ h. ________________________________________ i. 2.
________________________________________
Shneiderman (1998), memperkenalkan 8 Golden Rules of Interface Design. Cobalah lakukan googling, kemudian sebutkan dan jelaskan kedelapan hal tersebut. a. ________________________________________ ________________________________________ b. ________________________________________ ________________________________________ c. ________________________________________ ________________________________________ d. ________________________________________ ________________________________________ e. ________________________________________ ________________________________________ f.
________________________________________ ________________________________________
g. ________________________________________ ________________________________________ 12
Politeknik Telkom
Desain User Interface
h. ________________________________________ ________________________________________ 3.
Seiring dengan evolusi usability dalam praktek sehari-hari, para praktisi kemudian mendefinisikan sekumpulan aturan tersendiri. Sebagain besar memperbaiki aturan yang telah dibuat para ahli sebelumnya dan sebagain lagi menambahkan aturan baru. Salah satunya adalah Raymond (2004) yang mendefinsikan sembilan aturan dalam usability. Cobalah lakukan googling kemudian sebutkan dan jelaskan sembilan aturan tersebut. a. ________________________________________ ________________________________________ b. ________________________________________ ________________________________________ c. ________________________________________ ________________________________________ d. ________________________________________ ________________________________________ e. ________________________________________ ________________________________________ f.
________________________________________ ________________________________________
g. ________________________________________ ________________________________________ h. ________________________________________ ________________________________________ i.
________________________________________ ________________________________________
Pengantar Interaksi Manusia dengan Komputer
13
Politeknik Telkom
Desain User Interface
Rangkuman
1.
Interaksi antara manusia dengan komputer melibatkan 2 buah pihak yaitu manusia sebagai pengguna dan komputer sebagai tools atau alat bantu. 2. Interaksi antara manusia dengan komputer dilakukan melakui interface berupa piranti masukan dan piranti keluaran. 3. Piranti masukan yang paling sering digunakan adalah keyboard dan mouse. Namun demikia, masih banyak lagi jenis piranti masukan yang merupakan saranan untuk berinteraksi dengan komputer. 4. Piranti keluaran yang sering digunakn adalah layar monitor, printer, dan speaker. Namun demikian masih banyak pula piranti keluaran yang merupakan sarana untuk berinteraksi dengan komputer. 5. Disiplin ilmu interaksi manusia dengan komputer melibatkan berbagai disiplin ilmu yang lain baik dari bidang. 6. Bidang Engineering pada interaksi manusia dan komputer berperan untuk membuat rekayasa baru dengan terknologi yang lebih baik. 7. Bidang sosoal dalam interkasi manusia dan komputer berperan alam mempelajari karakterisitik pengguna dan perubahan tingkah laku sebagai akibat adanya interaksi antara manusia dengan komputer. 8. Usability merupakan tingkat kebergunaan suatu sistem oleh user. 9. Usability menentukan seberapa jauh sistem dapat idterima oleh user dan seluruh pihak yang terkait. 10. Ada berbagai prinsip untuk meningkatkan usability yang dikemukanan oleh para ahli diantaranya oleh Nielson, Shneiderman, dan Raymond.
14
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Interaksi manusia dengan komputer melibatkan merupakan interaksi yang yang didukung oleh satu pihak yaitu user. 2. Manusia berinteraksi dengan komputer melalui semua proses yang terjadi didalam pengolahan data pada komputer 3. Interface berperan sebagai sarana untuk menyembunyikan kerumitan komputer dan menyajikan data yang dapat dipahami oleh user. 4. Printer dan Monitor merupakan sarana interaksi antara manusia dengan komputer. 5. Keyboard dan mouse merupakan piranti masukan pada interaksi antara manusia dengan komputer. 6. Plotter dan scanner merupakan piranti masukan pada interaksi manusia dengan komputer. 7. Sreen Touch merupakan piranti masukan sekaligus piranti keluaran. 8. Usability tidak mempengaruhi tinkat kenyamanan dalam interaksi antara manusia dengan komputer. 9. User harus menghafal sebanyakl mungkin untuk menjalankan aplikasi dengan baik merupakan prinsip dari memorability. 10. Error Message bukan bagian dari printsip pembangunan interkasi manusia dengan komputer.
Pengantar Interaksi Manusia dengan Komputer
15
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Pihak pada interkasi manusia dengan komputer adalah __________
A. B. C.
User Komputer Desainer
D E.
User dan Komputer User, desainer, dan komputer
2.
Interaksi manusia dengan komputer melibatkan ilmu: 1. Teknik Elektro 2. Ergonomi 3. Ilmu Komputer 4. Astronomi
A. B. C.
1,2,3 1,3 2,4
3.
Pada IMK, bidang ini berkaitan dengan aspek fisik untuk mendapatkan lingkungan kerja yang nyaman. Aspek fisik ini misalnya berkaitan dengan meja, kursi, lampu, keyboadrd, mouse, dan sebagainya. Nama bidang ini adalah
A. B. C.
Ergonomi Antropologi Psikologi
4.
Pada IMK, bidang ini memperhatikan sifat, kebiasaan, persepsi, pengolahan kognitif, dan ketrampilan motorik dari pengguna komputer. Nama bidang ini adalah______
A. B. C.
Ergonomi Antropologi Psikologi
16
D. E.
D. E.
D. E.
4 1,2,3,4
Fisiologi Sosiologi
Fisiologi Sosiologi
Politeknik Telkom
Desain User Interface
5.
Pada IMK, Bidang ini merupakan cabang ilmu pengetahuan yang mempelajari tentang manusia, dan memberi suatu pandangan tentang cara kerja berkelompok yang masing – masing anggotanya dapat memberikan konstribusi sesuai dengan bidangnya. Kehadiaran teknologi informasi (dengan sarananya adalah komputer) sedikit banyak telah mempengaruhi cara kerja dan pola hubingan sekelompok orang. Nama bidang ini adalah ________
A. B. C.
Ergonomi Antropologi Psikologi
6
Pada IMK, Bidang ini mempelajari tentang pengaruh sistem manusiakomputer dalam struktur sosial. Berbagai macam dampak sosial dapat timbul oleh adannya perkembangan teknologi komputer yang semakin canggih baik dari sisi perangkat keras maupun perangkat lunak. Nama bidang ini adalah _____
A. B. C.
Ergonomi Antropologi Psikologi
7 A B C
Perintah dalam DOS termasuk dalam type ______ Command line interface D Form-fills and spreadsheets Menu E Question/answer and query Natural language dialogue
8 A B C
Perintah – perintah pada operasi database termasuk type ________ Command line interface D Form-fills and spreadsheets Menu E Question/answer and query Natural language dialogue
D. E.
D. E.
Fisiologi Sosiologi
Fisiologi Sosiologi
Pengantar Interaksi Manusia dengan Komputer
17
Politeknik Telkom
Desain User Interface
9
Pengguna komputer sedapat mungkin tidak perlu banyak mengingat kembali bagaimaana penggunaan suatu aplikasi komputer. Prinisip ini selaras dengan _______
A B C
Shortcut Good error messages Prevent errors
10
Apluikasi harus mengarahkan agar user senantiasa tepat dalam memberikan input ke komputer. Prinsip ini selaras dengan _____
A B C
Shortcut Good error messages Prevent errors
18
D E
D E
Speak the user‟s language Minimise user memory load
Speak the user‟s language Minimise user memory load
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3. 4. 5. 6. 7.
Sebutkan ilmu-ilmu yang terkait dalam pembangunan interaksi antara manusia dengan komputer! Sebutkan berbagai macam type interaksi antara manusia dengan komputer! Sebutkan Prinsip Usability dari Shneiderman! Sebutkan Prinsip Usability dari Raymond! Jelaskan perbedaan mendasar antara IMK pada operating system DOS dan Windows 3.1 Bagimana pendapat Anda tentang usability pada Micrososft Word 2007 dibanding dengan Micrososft Word 2003? Bagaimana pendapat Anda tentang usability pada Micrososft Windows Vista dengan XP?
Pengantar Interaksi Manusia dengan Komputer
19
Politeknik Telkom
Desain User Interface
2
MANUSIA
Overview
Manusia merupakan pihak pertama pada interkasi antara manusia dengan komputer. Manusia dengan berbagai karakteristiknya menjadi dasar paling kuat dalam pembangunan desain interface pada IMK. Melalui pengenalan terhadap karakteristik manusia diharapak pembuat aplikasi memperhatikan berbagai hal yang dapat meningkat usability dan mencegah terjadinya penurunannya. Peran manusia pada interkasi antara manusia dengan komputer dapat dipandang sebagai sistem pengolah informasi yang menerima masukan dari panca intedranya yaitu mata, telinga, dan kulit. Untuk teknologi tertentu memungkinkan interaksi dengan indera lainya. Namun secara prinsip semua interaksi dilakukan melalui panca indera. Tidak ada interaksi yang dilakukan secara kebatinan. Teknologi terbaru adalah dengan menangkap sinyal otak, namun arti sinyal ini masih sulit untuk diterjemahkan. Melalui bab ini akan dibahas tentang manusia dan karakteristiknya khususnya yang berkaitan dengan pembangunan desain interface antara manusia dengan komputer.
Tujuan
1. 2.
20
Mahasiswa memahami karakteristik manusia yang berpengaruh pada IMK yaitu panca inderanya. Mahasiswa mengetahui sapek yang dapat meningkatkan dan menurunkan usability berdasarkan karakteristik tersebut.
Politeknik Telkom
2.1
Desain User Interface
Penglihatan
Bagi orang normal, mata merupakan media paling fundamental untuk mengetahui dunia luar. Pengetahuan akan dunia luar ini akan menghasilkan persepsi yang terorganisir akan gerakan, ukuran, bentuk, jarak, posisi relatif, tekstur dan warna. Hasil persepsi ini akan mempengaruhi respon dari individu yang bersangkutan. Semakin cepat persepsi yang didapat, semakin cepoat respon yang diberikan. Apabila persepsi yang diterima benar akan mendorong respon yang benar pula. Kecepatan persepsi ini juga mempengaruhi tingkat kenyamanan dari user. Apabila user menggunakan komputer, dan persepsi yang ia terima lebih lambat dari yang biasanya, maka user akan merasakan ketidaknyamanan. Cobalah kerjakan latihan berikut. 1. Bacalah kedua teks berikut. Mana yang lebih nyaman di baca? Faktor apa yang berpengaruh? Teks I: Salah satu aplikaisi yang populer dari Microsft adalah Aplikasi perkantoran (Office Application). Microsoft Word merupakan bagian dari aplikasi perkantoran yang ditujukan untuk pembuatan dan pengolahan dokumen secara cepat dan mudah. Dengan demikian dokumen yang dibuat tidak hanya untuk keperluan perkantoran saja tapi juga untuk keperluan yang lebih luas.
Teks II:
Selain itu HTMl pada awalnya termasuk format dokumen yang tidak langsung dapat dilihat segera hasil akhir tampilan dokumennya. Namun sekarang berbagai aplikasi telah menjadi penjembatan sehingga dokumen dapat di olah kedalam format HTML maupun latex dengan mudah dengan edtor yang mendukung WYISWYG pula. Dokumen yang dibuat di Microsoft Word pun dapat disimpan dalam format HTML. Namun hasilnya Manusia
21
Politeknik Telkom
Desain User Interface
tidak efisien. Untuk hal ini akan dipelajari di mata kuliah lain yang berkaitan dengan pemrograman web. 2. Bacalah kedua teks berikut. Mana yang lebih nyaman di baca? Faktor apa yang berpengaruh? Teks I:
Pemerintah pusat khususnya Departemen Komunikasi dan Informatika, sebagai pemegang simpul kebijakan informasi nasional ( National/Chief Information Officer ), memerlukan sistem informasi yang mampu membantu untuk melaksanakan percepatan observasi kondisi nyata dari masyarakat, sehingga presiden dapat melakukan orientasi, keputusan maupun tindakan secara tepat, akurat dan cepat. Teks II: Teknologi Informasi dan Komunikasi (TIK) diharapkan menjadi tulang punggung untuk mencapai tata nilai dan tata kelola masyarakat berpengetahuan tersebut. Penerapan TIK diselaraskan dengan sasaran strategi nasional yaitu pengelolalan pemerintahan yang baik (Good Government Governance ), peningkatan pertumbuhan ekonomi, dan mengubah pola pikir dan budaya masyarakat agar lebih berorientasi pada masyarakat yang berpengetahuan (knowledge based society). Strategi yang harus dijalankan untuk mewujudkan hal ini adalah dengan membangun sebuah suprastruktur informasi bagi pemerintah Indonesia yang pada dasarnya merupakan perwujduan dari e-Indoensia.
3. Mana yang lebih nyaman di baca? Faktor apa yang berpengaruh? Teks I: Data Mining merupakan teknologi baru yang sangat berguna untuk membantu perusahaan-perusahaan menemukan informasi yang sangat penting dari gudang data mereka.
22
Politeknik Telkom
Desain User Interface
Teks II Data mining meramalkan tren dan sifat-sifat perilaku bisnis yang sangat berguna untuk mendukung pengambilan keputusan penting. 4. Mana yang lebih panjang, balok yang atas atau yang bawah ? Fenomena ini dikenal dengan Ponzo Illusion.
5. Ruas grasi mana yang lebih panjang, yang atas atau yang bawah? Fenomena ini disebut Muller Lyer Illusion
Ada beberapa faktor yang berpengaruh pada penglihatan manusia yaitu: 1. Luminans (luminance) Merupakan banyaknya cahaya yang dipantulkan permukaan obyek. Mata manusia dapat melihat dengan bantuan cahaya. Cahaya yang mengenai benda akan dipantulkan sebagain oleh benda. Pantulan cahaya ini apabila ditangkap oleh mata menjadi informasi terlihatnya benda.
Manusia
23
Politeknik Telkom
Desain User Interface
2. Kekontrasan Merupakan perbandingan antara cahaya yang dikeluarkan oleh suatu obyek terhadap cahaya yang dikeluarkan oleh latar belakang obyek tersebut. Kekontrasan dapat dihitung sebagai selisih antara luminans obyek dengan latar belakangnya dibagi dengan luminans latar belakang. Nilai kontras positif apabila cahaya yang dipancarkan oleh sebuah obyek lebih besar dibandingkan dengan yang dipancarkan oleh latar belakangnya. Nilai kontras negatif menyebabkan obyek yang sesungguhnya „tertutup‟ oleh latar belakangnya. 3. Kecerahan Merupakan tanggapan subyektif pada cahaya. Semakin tinggi luminans semakin tinggi pula kecerahannya. 4. Sudut dan Ketajaman Penglihatan Sudut penglihatan adalah sudut yang dibentuk antara arah pandangan terhadap benda dengan garis normal benda. Garis normal adalah garis yang tegak lurus dengan permbukaan bidang benda. Sedangkan ketajaman penglihatan (visual acuity) merupakan sudut penglihatan minimum ketika mata masih dapat melihat benda dengan jelas. 5. Medan Penglihatan merupakan sudut yang dibentuk dari mata bergerak ke kiri terjauh hingga ke kanan terjauh. 6. Warna Cahaya yang terlihat oleh mata merupakan gelombang elektromagnetik. Gelombang elektromagnetik sendiri memiliki spektrum gelombang. Panjang gelombang cahaya tampak berkisar antara 400-700 nm. Apabila panjang gelombang adalah 400-700 nm, luminans konstan dan saturasinya (jumlah cahaya putih yang ditambahkan) dibuat tetap, seseorang dengan penglihatan warna normal mampu membedakan kira-kira 128 warna yang berbeda. Spektrum warna pada gelombang elektromagnetik dapat dilihat pada diagram gambar berikut.
24
Politeknik Telkom
Desain User Interface
Warna memegang peranan penting dalam desain antar muka grafis. Interaksi terbesar antara manusia dengan komputer sangat didominasi oleh antar muka layar monitor. Setiap saat, mata pengguna komputer senantiasa tertuju pada layar monitor. Evolusi tampilan antar muka grafis dapat kita lihat pada tampilan windows dari waktu ke waktu.
Manusia
25
Politeknik Telkom
Desain User Interface
Isi luminance dan pewarnaan merupakan isu penting dalam desain antar muka grafis. Perhatikan gambar-gambar berikut: 1. Teks manakah yang paling terlihat jelas?
Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design Human Computer Interface and Interaction Design
26
Politeknik Telkom
Manusia
2.
Teks mana yang terlihat paling jelas?
3.
Teks mana yang terlihat paling jelas?
4.
Teks mana yang terlihat jelas?
Desain User Interface
27
Politeknik Telkom
2.2
Desain User Interface
Pendengaran
Pendengaran pada manusia memiliki karakteristik tersendiri antara lain sebagai berikut: - Pada umumnya suara yang dapat didengar oleh indera pendegaran manusia berada pada frekuensi antara 20 Hz sampai dengan 20 Khertz. - Usia dan keadaan medis seseorang dapat mempengaruhi daerah frekuensi yang dapat didengarnya - Suara dengan frekuensi antara1000 – 4000 Hertz merupakan daerah sensitif. Secara fisis, frekuensi bunyi menentukan tinggi rendahnya bunyi. Gambaran tinggi rendahnya bunyi ini dapat terdengar pedeaanya pada tangga nada.
Nada do pada satu oktaf dengan nada do pada oktaf di atasnya dibedakan oleh frekuensinya. Sedangkan keras lemahnya bunyi dipengaruhi oleh amplitdo getaran. Amplitudo merupakan jarak terjauh dari titik setimbang. Semakin besar semakin keras bunyinya. Tingkat kerasnya bunyi ini dinyatakan dalam satuan Bell ( lebih sering dinyatakan dalam decibell, dB). Suara bisikan mempunyai tingkat kebisingan 50dB sampai 70 dB. Suara kebisingan yang lebih dari 140 dB dapat merusak sistem pendengaran seseorang. 28
Politeknik Telkom
Desain User Interface
Kedua telinga yang menghadap arah berlawanan juga dapat memberikan efek situasi lingkungan. Misalnya kedua mata seseorang ditutup, kemudian ada mobil yang melintas di dekat orang tersebut, maka dari suara mobil tersebut, dapat ditentukan dari mana arah mobil tersebut dan kemana tujuannya. 1.
Pada alat musik gitar, piano, seruling, dan sebagainya dapat mengeluarkan bunyi nada „do‟ dengan warna bunyi yang berbeda beda. Apakah yang menyamakan kesemua alat musik tersebut sehingga dapat menghasilkan nada „do‟ pada oktaf yang sama?
2.
Apa yang mempengaruhi kuat lemahnya bunyi?
3.
Pada komputer biasanya dilengkapi dengan spaker dua buah, seperti pada gambar berikut
Selain itu terdapat pula earphone seperti pada gambar:
Manusia
29
Politeknik Telkom
Desain User Interface
Pada perlengkapan tersebut biasanya ada petunjuk L (Left) dan R (Right). - Apa maksud simbol L dan R tersebut? - Sebaiknya kedua speaker di pasang sesuai petunjuk tersebut, mengapa demikian? Apa yang terjadi jika dipasang terbalik?
2.3
Peraba
Indera peraba menjadi sarana interaksi yang menduduki urutan ketiga setelah penglihatan dan pendengaran. Indera peraba dipengaruhi oleh tingkat ergonomi. Interaksi ini contohnya adalah keyboard dan tombol yang biasanya digunakan oleh tangan. 1. 2.
2.4
Sebutkan peripheral komputer yang melibatkan sentuhan tangan! Sebutkan peripheral komputer yang melibatkan sentuhan kaki!
Memori
Memori bukanlah panca idnera, namun ia memegang peranan penting dalam interaksi antara manusia dengan komputer. Contoh penggunaan memori adalah pilihan menu berbasis suara pada operator telepon. User sering lupa dengan menu yang telah di bacakan oleh mesin penjawab. Memori berkaitan dengan pengolahan di otak manusia. Hal ini dapat digambarkan pada diagram berikut:
30
Politeknik Telkom
M a n u s i a
Desain User Interface
P e n g o l a h a n o t o m a t i s
Perseptual
Intelektual
P e n g o l a h a n s a d a r
Perseptual
Memori
Intelektual
Kontrol Motorik
Kontrol Motorik
Sensor
Responder Umpan Balik
Antaramuka K o m p u t e r
Peranti keluaran
Peranti masukan
Pengontrol keluaran
Pengontrol masukan
Prosesor
Memori
Memori manusia dapat dikelompokan menjadi dua: 1.Memory jangka pendek (Shor Term Memory), merupakan memori jangka pendek, bersifat temporal dan cepat hilang. 2.Memory jangka panjang (Long Term Memory), merupakan memori dari proses yang berulang-ulang dan masuk ke dalam alam bawah sadar.
Manusia
31
Politeknik Telkom
Desain User Interface
Rangkuman
1. Interpretasi manusia dengan lingkungannya dilakukan melalui panca inderanya. 2. Panca indera yang paling dominan pada umumnya adalah mata. 3. Mata manusia mendeteksi lingkunan karena adanya cahaya 4. Cahaya yang masuk kemata pada dasarnya adalah gelombang elekteromagnetik yang merupakan bagian kecil dari spektru gelombang elektromagnetik. 5. Gelombang elektromagentik menentukan menetukan warna yang dideteksi oleh manusia. 6. Warna merupakan faktro penting dalam antar muka grafis. 7. Indera pendengaran merukan indera kedua setelah mata yang paling sering digunakan. 8. Pendegaran manusia dapat mendeteksi frekuensi suara antara 20 Hz hingga 20 KHz. 9. Pendengaran manusia mampu mengintepretasikan lingkungannya berkaitan dengan arah suara. 10. Peraba pada manusia berpengaruh pada tingkat ergonomis pada interaksi antara manusia dengan komputer.
32
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Interpretasi manusia dengan lingkungannya dilakukan melalui perasaanya. 2. Secara umum, pendengaran manusia lebih dominan dari pada penglihatannya. 3. Mata manusia dapat melihat melihat benda karena ada cahaya yang memantul dari benda ke mata. 4. Cahaya merupakan gelombang elektromagentik. 5. Semua gelombang elektromagnetik merupakan cahaya. 6. Perbedaan frekuensi menentukan warna pada spektrum cahaya. 7. Suara merupakan komponen paling dominan pada desain antarmuka grafis. 8. Keras lemahnya bunyi tergantung dari frekuensinya. 9. Tinggi rendahnya bunyi ditentukan oelh cepat rambatnya. 10. Indera peraba sangat berpengaruh ditinjau dari aspek sosiologi pada ingeraksi antara manusia dengan komputer.
Manusia
33
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Secara umum indera yang paling dominan pada manusia adalah ______
A. B. C.
Mata Telinga Hidung
D E.
Kulit Lidah
2.
Berikut ini warna yang terdapat pada spektrum warna 1. Hitam 2. Ungu 3. Putih 4. Merah
A. B. C.
1,2,3 1,3 2,4
3.
Banyaknya cahaya yang dipantulkan permukaan obyek disebut ______
A. B. C.
Luminans Kekontrasan Kecerahan
4.
Perbandingan antara cahaya yang dikeluarkan oleh suatu obyek terhadap cahaya yang dikeluarkan oleh latar belakang obyek tersebut disebut _______
A. B. C.
Luminans Kekontrasan Kecerahan
34
D. E.
D. E.
D. E.
4 1,2,3,4
Ketajaman Penglihatan warna
Ketajaman Penglihatan warna
Politeknik Telkom
Desain User Interface
5.
Mata manusia dapat melihat karena_______ karena_______
A. B. C.
Ada cahaya yang masuk ke mata Ada gelombang elektromagnetik Mata memancarkan sinyal
6
Aspek yang dominan dalam desain antarmuka grafis adalah _____
A. B. C.
Suara Warna Ukuran
7.
1. Mata manusia dapat melihat cahaya infra red 2. Mata manusia dapat melihat cahaya violet 3. Mata manusia dapat melihat cahaya ultra violet 4. Mata manusia dapat melihat cahaya merah Peryataan yang benar adalah
A B C
1,2,3 1,3 2,4
8 A B C
Keras lemahnya bunyi ditentukan oleh______ Frekuensinya D Cepat rambatnya Amplitudonya E Sumber suaranya Panjang gelombangya
9
Perbedaan Perbedaan nada pada tangga nada dipengaruhi oleh _______
A B C
Frekuensinya Amplitudonya Bahan alat musiknya
D. E.
D. E.
D E
D E
Terdapat sinar infra merah Terdapat sinar ultra violet
Getaran Permukaan
4 1,2,3,4
Cepat rambatnya Sumber suaranya
10 Game DDR melibatkan indera peraba pada bagian _______ A Telapak tangan D muka Perut B Jari tangan E C kaki Manusia
35
Politeknik Telkom
Desain User Interface
Latihan
1. 2.
Sebutkan panca indera manusia! Mengapa warna sangat dominan dalam desain antar muka pada komputer? 3. Berolah lima contoh kombinasi yang buruk antara warna font dengan background-nya! Tunjukkan dengan memperaktekan langsung di di komputer! 4. Berilah lima contoh kombinasi yang baik antara warna font dengan background-nya! Tunjukkan dengan memperaktekan langsung di komputer! 5. Film kartun dibuat dengan melakukan pergantian gambar dengan cepat dari kumpulan gambar statis. Cobalah eksplore di internet, berapakah gambar minimum perdetik untuk mendaptkan gerakan yang tidak patahpatah! 6. Cobalah eksplore di internet, apakah putih itu warna atau bukan! 7. Apakah yang menentukan tingkat kebisingan suara? 8. Apakah yang menentukan tinggi rendahnya rendahnya bunyi? 9. Pada frekuensi berapa suara dapat didengar oleh telingan manusia? 10. Sebutkan peripheral komputer yang melibatkan indera peraba! 11. Memori pada otak kita ada yang tergolong jangka panjang. Sebutkan contohnya!
36
Politeknik Telkom
Desain User Interface
3
KOMPUTER
Overview
Komputer menurut asal katanya artinya alat bantu hitung. Namun secara istilah, kata ini telah berkembang pengertiannya menjadi alat bantu elektronik yang bekerja secara digital dalam memproses data. Data yang masuk ke komputer serta hasil pengolahannya pada umumnya melibatkan manusia sehingga terjadi interaksi. Pada bab ini akan dibahas bagaimana komputer mendukung proses interkasi ini melalui berbagai media baik audio visual maupun ybang bukan.
Tujuan
1. 2.
Mahasiswa Mahasiswa memahami komputer sebagai bagian dari IMK. Mahasiswa Mahasiswa mengetahui komponen komputer yang menjadi interface dengan user.
Komputer
37
Politeknik Telkom
3.1
Desain User Interface
Sistem Komputer
Komputer secara sederhana sederhana dapat dipandang sebagai sistem IPO (Input Process Output) sebgaimana dijelaskan dijelaskan pada bab 1. Untuk mendukung proses tersebut diperlukan piranti pendukung baik software maupun hardware dari komputer yang digunakan. Kesinergisan antara hardware hardware dan dan software ini contohnya adalah adalah driver. Dengan driver, hardware dapat bekerja dengan optimal. Layar monitor dapat menampilkan grafis dengan baik, speaker dapat mengahsilkan bunyi dengan jelas, dan sebagainya. Berbagai piranti masukan tadi dapat di kategorikan sebagai piranti masukan, piranti keluaran, dan piranti keduanya secara se cara sekaligus. Berikut ini akan di bahas beberapa perangkat yang mendukung untuk interaksi antara manusia dengan komputer.
3.2
Layar monitor
Layar monitor merupakan media output yang sangat dominan. Hampir sebagian besar hasil pengolahan komputer di sajikan di layar monitor. Layar monitor memiliki sejarah panjang dari generasi pertamanya. Perkembangan ini dapat kita lihat antara lain sebagi berikut 1.Layar 1. Layar Monochrom, layar dengan warna background hitam dan warna teks satu warna. 2.Layar 2. Layar bewarna, dengan teknologi tabung CRT 3.Layar 3. Layar berwarna , dengan teknologi LCD Ditinjau dari bahannya, jenis layar monotir adalah: 1.Monitor 1. Monitor Catoda Ray Tube (CRT) Monitor jenis ini memiliki tabung yang menghasilkan elektron yang menembak layar sedemikian sehingga terbentuk gambar di layar. Cara kerja ini mirip dengan cara kerja pada televisi. Monitor ini menggunakan port 15 pin dengan 3 baris. 2.Monitor 2. Monitor Liquid Crystal Display (LCD) Monitor jenis ini bekerja dengan cara pemberian stimulasi st imulasi arus listrik ke liquid crystal (materi biphenyl), sedemikian sehingga terjadi perubahan properti dari cahaya yang dilewatkan pada crystal. 3.Monitor 3. Monitor TFT LCD Monitor jenis ini bekerja dengan liquid crystal yang diletakkan di antara dua pelat gelas, yaitu colour filter glass dan TFT glass. Colour filter glass memiliki filter warna yang akan memancarkan warna, sedangkan TFT glass memiliki Thin Film transistor sebanyak pixel yang ditampilkan. Liquid crystal bergerak 38
Politeknik Telkom
Desain User Interface
sesuai dengan perbedaan voltase antara colour filter glass dengan TFT glass. Banyaknya cahaya yang berasal dari Back Light ditentukan berdasarkan jumlah pergerakan liquid crystal yang pada akhirnya akan membentuk warna. Sedangkan jenis monitor menurut adapter, resolusi warna, dan jumlah pin. Adapter Card
Resolusi
Jumlah Warna
Jumlah Pin
MDA, EGA, Hercules
80 x 25
2
9
CGA (Digital dan Analog)
CGA, EGA
640 x 480
16/2
9
EGA (Digital dan Analog)
XGA, CGA, EGA
640 x 480
16/2, 16
9
VGA (Analog)
VGA
800 x 600
256
15
SVGA
VGA
1024 x 768
16 juta
15
Type Monitor
Monochrome (Digital)
Keterangan: MDA = Monochrome Display Adapter EGA = Enhanced Graphics Adapter VGA = Video Graphic Array CGA = Colour Graphic Adapter XGA = X-Graphic Adapter SVGA = Super Video Graphic Array Pada umumnya, setiap monitor dilengkapi dengan tombol menu pengaturan, seperti : Saklar ON/OFF yang berfungsi untuk memutuskan dan menghubungkan sumber daya listrik. Brightness Control, yaitu cerah atau redupnya layar. Contrast Control, yaitu untuk mengatur cerah atau redupnya obyek pada layar. Vertical Size Control (V. Hold), yaitu untuk mengatur area layar bagian bawah dan atas. Komputer
39
Politeknik Telkom
Desain User Interface
Vertical Line (V. Line), yaitu untuk mengatur tinggi rendahnya obyek pada layar. Horisontal Size Control (H. Hold), yaitu untuk mengatur area layar bagian kiri dan kanan. Berkaitan dengan layar monitor, warna pada layar monitor sangat menentukan kenyamanan antarmuka dengan pengguna. Warna dapat dikateorikan sebagai warna dasar dan warna campuran. Warna campuran merupakan warna yang dihasilkan dengan mencampurkan warna lain. Warna dasar cahaya ada tiga yaitu Red, Green, Blue atau yang sering dikenal dengan RGB. Warna cahaya lain dapat diturunkan dari campuran dua atau tiga warna tersebut.
Dalam komputer, setiap warna direpresentasikan dengan komninbasi ketiga warna dasar tersebut. Setiap warna diberi rentang nilai dari 0 sampai dengan 255. Rentang skala sebanyak 256 in didasarkan pada 1 byte yang terdiri dari 8 bit biner, dimana nilai tertinggi untuk 1 byte adalah 255. Karena setiap warna direpresentasikan dengan kombinasi ketiga warna dasar, jumlah kombinasi warna yang mungkin adalah 256 x 256 256 = 16.777.216 warna. Kombinasi untuk warna dapat dilihat pada tabel berikut. 40
Politeknik Telkom
Desain User Interface
Warna yang mirip memiliki kedekatan komposisi RGB seperti contoh berikut.
Sumber: http://msdn.microsoft.com/en-us/library/aa358800(VS.85).aspx Komputer
41
Politeknik Telkom
3.3
Desain User Interface
Speaker dan Microphone
Speaker digunakan untuk menyajikan data-data audio. Suara yang dikeluarkan memiliki tingkat kemiripan dengan suara aselinya. Semakin mirip dengan suara aselinya, semakin baik kualtias speaker tersebut. Namun distorsi suara ini tidak dapat terelakan mengingat data suara direpresentasikan di komputer melalui sampling suara. Contoh hasil sampling suara ditampilkan seperti dalam gambar.
Pada prinsipnya semua suara audio, baik vokal maupun bunyi tertentu merupakan hasil dari getaran dan merambat melalui udara dalam bentuk gelombang suara. Hal ini berimplikasi bahwa setiap suara memiliki bentuk gelombangnya masing-masing. Gelombang suara ini merambat dalam bentuk sinya analog seperti pada gambar di atas. Sinyal analog ini merupakan sinyal yang kontinu. Sinyal yang di tangkap oleh alat perekam sering disertai noise sehingga mengganggu kejernihan suara aslinya. Melalui teknik tertentu sinyalsinyal noise ini dapat dikurangi sehingga kualitas sinyalnya yang dihasilkan menjadi lebih baik. Sinyal analog ini apabila di hendak disimpan di komputer harus diubahke dalam format digital, mengingat komputer menyimpan data 42
Politeknik Telkom
Desain User Interface
senantiasa dalam bentuk bit bit. Teknik pengubahan ini disebut sampling. Pemrosesan Sinyal Digital (Digital Signal Prosessing ) merupakan ilmu yang mempelajari lebih lamjut mengenai teknik pengolahan sinyal. Sampling Sampling adalah proses pengambilan sinyal analog Pada proses ini terjadi suatu pencuplikan dari bentukan sinyal analog. Pencuplikan dilakukan pada bagian-bagian sinyal analog. Ini dilakukan dengan sinyal-sinyal sample. Ada suatu aturan tertentu dari sinyal ini. Teori Shannon menyatakan frekuensi sinyal ini paling sedikit adalah 2 kali frekuensi sinyal yang akan disampling(sinyal analog). Ini adalah batas minimum dari frekuensi sample agar nantinya cuplikan yang diambil menunjukkan bentukan sinyal yang asli (analog). Lebih besar tentunya lebih baik, karena cuplikan akan lebih menggambarkan sinyal yang asli. Setelah dilakukan proses ini maka terbentuklah suatu sinyal analog-diskrit yang bentuknya menyerupai aslinya namun hanya diambil diskrit-diskrit saja. [http://www.elektroindonesia.com/elektro/elek35a.html]
Quantisasi Ini adalah proses pembandingan level-level tiap diskrit sinyal hasil sampling dengan tetapan level tertentu. Level-level ini adalah tetapan angkaangka yang dijadikan menjadi bilangan biner. Sinyal-sinyal diskrit yang ada akan disesuaikan levelnya dengan tetapan yang ada. Jika lebih kecil akan dinaikkan dan jika lebih besar akan diturunkan. Prosesnya hampir sama dengan pembulatan angka. Tetapan level yang ada tergantung pada resolusi dari alat, karena tetapan level merupakan kombinasi angka biner, maka jika bitnya lebih besar kombinasinya akan lebih banyak dan tetapan akan lebih banyak. Ini membuat pembulatan level sinyal diskrit menjadi tidak jauh dengan level aslinya. Dan bentukan sinyal akan lebih bervariasi sehingga akan terbentuk seperti aslinya. Proses ini membuat sinyal lebih baik karena bentukkannya lebih tetap. Proses ini juga mengecilkan error dari suatu sinyal. [http://www.elektroindonesia.com/elektro/elek35a.html]
Setelah diquantisasi maka tiap-tiap diskrit yang ada telah memiliki tetapan tertentu. Tetapan ini dapat dijadikan kombinasi bilangan biner, maka terbentuklah bilangan-bilangan biner yang merupakan informasi dari sinyal. Setelah menjadi sinyal digital maka proses-proses perekayasaan dapat dilakukan. Yang harus dilakukan adalah merubah informasi digital tersebut Komputer
43
Politeknik Telkom
Desain User Interface
dengan proses digital sehingga menjadi suara-suara yang kita inginkan. Proses dapat dilakukan dengan berbagai macam alat-alat digital (komputer). Samplesample yang ada juga digunakan sebagai informasi untuk menciptakan suara dari berbagai macam alat elektronik (keyboard dan syntitizer). Penyimpanan suara juga akan lebih baik karena informasinya adalah digital sehingga berkembanglah CD dan DAT(Digital Tape). Proses pada speaker merupakan kebalikan dari proses sebelumnya. Data digital di ubah menjadi denyut listrik yang oleh speaker diubah menjadi getaran sehingga menghasilkan bunyi. Warna dan keras lemahnya bunyi ditentukan oleh denyut listrik tersebut. Perbedaan data menghasilkan denyut listrik yang berbeda. Bagian yang terpenting dari Speaker Dinamik adalah:Konus, Suspensi, Kumparan suara dan Magnet. Perubahan medan magnet di dalam speaker akan berinteraksi dengan medan konstan magnet yang menyebabkan kumparan bergerak sebagai reaksi akibat ada tidaknya arus. Konus ikut bergerak akibat kumparan suara bergerak sehingga pada udara sekita konus akan terbentuk gelombang tekanan. Gelombang inilah yang terdengar sebagai bunyi. Speaker tunggal biasa disebut juga driver. Driver dengan ukuran lebih dari 8 biasanya digunakan untuk menangani frekuensi rendah (bas), atau disebut juga Woofer. Driver yang digunakan untuk menangani frekuensi tinggi disebut Tweeter. Pada sistem loudspeaker 2 way, ada ditemukan Tweeter dan Woofer. Pada sistem loudspeaker 3 way, ada Woofer, Tweeter dan Midrange. Woofer biasanya berdiameter 8 digunakan untuk nada bas, jadi perlu membatasi frekuensi atasnya. Untuk memperoleh suara tengah yang baik maka perlu adanya driver midrange. Driver Midrange biasanya digunakan dalam sistem speaker 3 way. Untuk memproduksi frekuensi tinggi diperlukan tweeter dengan diameternya yang kecil. Speaker biasanya diletakkan pada box. Ada dua jenis box speaker yaitu: 1. Kotak Rapat: udara yang berada di dalm kotak berfungsi sebagai pegas terhadap konus. 2. Kotak Celah: Pada umumnya berfungsi sebagai resonator. Mempunyai keunggulan untuk mengontrol redaman yang ada pada speaker. ″
″
[Sumber : http://speakerbuilder.wordpress.com/category/cara-kerja-speaker/]
44
Politeknik Telkom
3.4
Desain User Interface
Keyboard
Key merupakan interface masukan paling dominan untuk saat ini. Berbagai macam keyboard pernah diproduksi namun yang terkenal dan dominan dipakai adalah model QWERTY.
Komputer
45
Politeknik Telkom
Desain User Interface
Keyboard model QWERTY lebih cocok untuk orang kidal, mengingat karakter „a‟ termasuk karakter yang ser ing muncul, namun harus dipencet oleh jari kelingking kiri yang secara kekuatan relatif paling lemah bagi orang yang tidak kidal. Model Keyboard yang lain diantaranya: a. Alfabetik Tombol-tombol diatur berdasarkan urutan abjad Tidak mempercepat bagi yang sudah mahir mengetik dengan 10 jari Tidak mempercepat juga untuk pemula Kalah populer dengan QWERTY Banyak ditemui pada mainan anak-anak untuk belajar mengenal alfabet b. Dvorak Huruf yang sering dipakai ditempatkan pada jari-jari yang dominan (lebih kuat) Huruf yang lain diletakkan diantaranya Condong pada pemakai tangan kanan (bukan kidal) Menambah kecepatan mengetik sekitar 10 – 15 % dan mengurangi rasa lelah Karena dominasi konsep QWERTY, membuat desain ini tidak berkembang c. Chord Keyboard Apabila menggunakan keyboard umum, untuk mengetik kata yang terdiri dari 10 huruf berarti menekan tombol sebanyak 10 kali ketukan maka pada chord keyboard dapat dilakukan penyingkatan kata, misal untuk mengetik kata terdiri dari 10 huruf cukup dengan menekan tombol kurang dari 10 kali. efektif untuk mencatat ucapan seseorang karena kecepatan seseorang menulis/mengetik biasa tidak akan mampu melebihi kecepatan orang berbicara. hanya sedikit tombol yang digunakan (empat / lima) huruf diketikkan sebagai kombinasi dari penekanan tombol berukuran kompak, ideal untuk aplikasi yang dibawa-bawa (portable) waktu belajar yang singkat, penekanan tombol merefleksikan bentuk dari huruf yang diinginkan cepat pengetikannya ada penolakan dari masyarakat karena terbiasa dengan QWERTY, dan adanya kelelahan yang terjadi setelah pemakaian dalam waktu lama. 46
Politeknik Telkom
Desain User Interface
Contoh chord keyboard (gambar diatas) : keyboard palantype untuk transkripsi kata demi kata, digunakan di Inggris untuk mencatat kejadiankejadian yang terjadi selama pengadilan berlangsung. Menggunakan paduan tombol yang ditekan bersamaan untuk menghasilkan suatu kata / suku kata, dan operator yang telah dilatih dengan baik dapat mencapai 200 kata permenit / lebih Contoh lain adalah keyboard stenotype, digunakan oleh para wartawan untuk mencatat ucapan seseorang. d. Numeric keypad untuk memasukkan bilangan/data numerik dengan cepat, orang lebih suka menggunakan tombol numerik yang tata letak tomboltombolnya dapat dijangkau dengan sebuah tangan. contoh : tombol numerik pada keyboard bagian kanan, tombol angka pada kalkulator, tombol angka pada telpon
Cara Kerja QWERTY
Setiap kali salah satu tombol keyboard ditekan atau dilepas, keyboard akan mengirim kode ke host (host adalah komputer kalau keyboard dihubungkan ke PC, atau berupa mikrokontroler kalau keyboard dihubungkan ke perlatan berbasis mikrokontroler). Kode tersebut dinamakan sebagai scan code. Scan code tombol „S‟ adalah 1B (angka heksadesimal setara dengan angka biner 00011011). Ketika tombol „S‟ ditekan keyboard akan mengirim 1B, jika tombol „S‟ ditekan terus maka keyboard akan mengirimkan 1B berikutnya terus menerus, sampai ada tombol lain yang ditekan atau tombol „S‟ tadi dilepas. Keyboard juga mengirim kode saat ada satu tombol yang dilepas, kodenya adalah F0 (angka heksadesimal setara dengan angka biner 11110000), jadi kalau tombol „S‟ tadi dilepa s keyboard akan mengirim F0 dan 1B. Kode-kode tersebut dikirim keyboard secara seri, artinya dikirimkan satu bit demi satu bit. Misalnya 1B dikirimkan dengan cara : mula-mula dikirim „1‟, sesaat kemudian „1‟ lagi dan menyusul „0‟ sampai akhirnya terkirim sebanyak 8 bit yang berbentuk 00011011 (dikirim mulai dari bit yang paling kanan kemudian beregeser satu per satu sampai yang paling kiri). Masing-masing tombol punya scan code sendiri, termasuk tombol „shift‟, tombol „ctrl‟ dan lain lain, jadi jika tombol „ctrl‟ ditekan bersama dengan „S‟, maka scan code yang dikirim adalah 14 (scan code untuk „ctrl‟) dan 1B Komputer
47
Politeknik Telkom
Desain User Interface
(scan code untul „S‟). Terserah host untuk mengintepretasi scan code itu sebagai apa, bearti merupakan tugas program dalam mikrokontroler untuk mengenal scan code. Scan code disusun sebagai kode 8 bit bisa dipakai untuk membedakan 256 macam kode, sedangkan keyboard PC hanya punya 101 tombol, jadi sesungguhnya kode 8 bit tadi cukup untuk semua tombol. Tapi tombol di keyboard PC dikelompokkan menjadi 2 bagian, bagian utama dan bagian tambahan, bagian utama cukup dinyatakan dengan scan code 1 byte saja, sedangkan bagian tambahan diwakili dengan beberapa byte scan code yang selalu diawali dengan E0. Misalnya tombol „ctrl‟ kiri diwakili dengan 14 sedangkan tombol „ctrl‟ kanan diwakili dengan E0 14. Gambar berikut menggambarkan scan code masing-masing tombol keyboard PC. Terlihat pada gambar tersebut, scan code tidak berupa kode ASCII yang biasa dipakai mewakili huruf , dan ditentukan secara acak, juga. Sehingga setelah diterima host, scan code harus dirubah menjadi kode ASCII dengan memakai cara „pencarian tabel‟.
3.5
Mouse
Tetikus atau yang lebih dikenal dengan nama mouse adalah alat yang digunakan untuk memasukkan data ke dalam komputer selain papan ketik. Tetikus berbentuk seperti seekor tikus sehingga dalam bahasa Inggris peranti ini disebut mouse. Mouse pertama kali dibuat pada tahun 1963 oleh Douglas Engelbart berbahan kayu dengan satu tombol. Model kedua sudah dilengkapi dengan 3 tombol. Pada tahun 1970, Douglas Engelbart memperkenalkan mouse yang dapat mengetahui posisi X-Y pada layar komputer, mouse ini dikenal dengan nama X-Y Position Indicator (indikator posisi X-Y). 48
Politeknik Telkom
Desain User Interface
Bentuk mouse yang paling umum mempunyai dua tombol, masingmasing di sebelah kiri atas dan kanan atas yang dapat ditekan. Walaupun demikian, komputer-komputer berbasis Macintosh biasanya menggunakan mouse satu tombol.
Mouse Pertama di Dunia Bagian Mouse
Bagian dalam mouse mekanik yang dipreteli. Bagian bawah adalah mouse, kiri atas adalah bola, dan kanan atas adalah pengait. Mouse bekerja dengan menangkap gerakan menggunakan bola yang menyentuh permukaan keras dan rata. Mouse yang lebih modern sudah tidak menggunakan bola lagi, tetapi menggunakan sinar optikal untuk mendeteksi gerakan. Selain itu, ada pula yang sudah menggunakan teknologi nirkabel, baik yang berbasis radio, sinar inframerah, maupun bluetooth. Saat ini, teknologi terbaru sudah memungkinkan mouse memakai sistem laser sehingga resolusinya dapat mencapai 2.000 titik per inci (dpi),
Komputer
49
Politeknik Telkom
Desain User Interface
bahkan ada yang bisa mencapai 4.800 titik per inci. Biasanya mouse semacam ini diperuntukkan bagi penggemar permainan video. Prinsip Kerja Mouse Mekanik
1. Bola akan berputar saat mouse digerakkan. 2. Penggulung X dan Y mencengkeram bola tersebut dan memindahkan gerakan. 3. Cakram menerjemahkan gerakan menjadi kode optikal lewat lubang cahaya. 4. LED inframerah memancar lewat cakram. 5. Sensor mengumpulkan pantulan cahaya untuk mengubah posisi X dan Y.
Mouse optikal buatan Logitech bersensor laser dengan ketelitian mencapai 4.800 titik per inci, nirkabel dengan memanfaatkan gelombang radio 50
Politeknik Telkom
3.6
Desain User Interface
Touchscreen
Layar sentuh atau dalam bahasa Inggris Touchscreens, touch screens, touch panels atau touchscreen panels adalah layar tampilan komputer yang sensitif terhadap sentuhan manusia, sehingga seseorang dapat berinteraksi dengan komputer dengan cara menyentuh gambar atau tulisan yang terpampang pada layar komputer. Touchscreen sering dipakai pada kios informasi ditempat-tempat umum, misalnya di bandara dan rumah sakit serta pada perangkat pelatihan berbasis komputer. Sistim touchscreen tersedia dalam bentuk monitor yang sudah memiliki kemampuan layar sensitif sentuhan dan ada juga kit touchscreen yang lebih ekonomis yang dapat dipasang pada monitor yang sudah ada.
Data yang dihasilkan dari sentuhan ini tentunya adalah data mengenai posisi tangan Anda yang menyentuh sinyal ultrasonik tersebut. Jika ini dilakukan secara kontinyu dan terdapat banyak sekali sensor gelombang ultrasonic pada media yang disentuhnya, maka jadilah sebuah perangkat touchscreen yang dapat Anda gunakan. Touchscreen jenis ini diklaim sebagai jenis touchscreen yang paling canggih dan memiliki banyak keunggulan daripada kedua jenis touchscreen lainnya. Komputer
51
Politeknik Telkom
Desain User Interface
Karena tidak menggunakan bahan pelapis metalik melainkan sebuah lapisan kaca, maka tampilan dari layar touchscreen jenis ini mampu meneruskan cahaya hingga 90 persen, sehingga lebih jernih dan terang dibandingkan dengan Resistive touchscreen. Tanpa adanya lapisan sensor juga membuat touchscreen jenis ini menjadi lebih kuat dan tahan lama karena tidak akan ada lapisan yang dapat rusak atau haus ketika di sentuh, tidak ada lapisan yang akan rusak ketika terkena air, minyak, debu, dan banyak lagi. Namun touchscreen ini juga bukannya tanpa kelemahan. Meskipun secara fisik kebal terhadap gangguan elemen-elemen luar, kinerja dari touchscreen ini dapat diganggu oleh elemen-elemen seperti debu, air, dan benda-benda padat lainnya. Sedikit saja terdapat debu atau benda lain yang menempel di atasnya maka touchsreen dapat mendeteksinya sebagai suatu sentuhan. Sensor-sensor ultrasonicnya akan langsung bekerja dengan baik. Maka itu touchscreen jenis ini harus dijaga dengan ekstra hati-hati. Touchscreen jenis ini sangat cocok digunakan pada ruangan training komputer, keperluan dalam ruangan untuk menampilkan informasi dengan sangat jernih dan tajam, presentasi dalam ruangan, dan banyak lagi. Capasitive Touchscreen Touchscreen jenis ini memiliki cara kerja yang cukup rumit, namun sangat andal dalam ketahanan dan kejernihannya. Capasitive touchscreen memiliki sebuah lapisan pembungkus yang merupakan kunci dari cara kerjanya, yaitu pembungkus yang bersifat capasitive pada seluruh permukaannya. Panel touchscreen ini dilengkapi dengan sebuah lapisan pembungkus berbahan indium tinoxide yang dapat meneruskan arus listrik secara kontiniu untuk kemudian ditujukan ke sensornya. Lapisan ini dapat memanfaatkan sifat capacitive dari tangan atau tubuh manusia, maka dari itu lapisan ini dipekerjakan sebagai sensor sentuhan dalam touchscreen jenis ini. Ketika lapisan berada dalam status normal (tanpa ada sentuhan tangan), sensor akan mengingat sebuah nilai arus listrik yang dijadikan referensi. Ketika jari tangan Anda menyentuh permukaan lapisan ini, maka nilai referensi tersebut berubah karena ada arus-arus listrik yang berubah yang masuk ke sensor. Informasi dari kejadian ini yang berupa arus listrik akan diterima oleh sensor yang akan diteruskan ke sebuah controller. Controller ini berfungsi untuk meneruskan informasi tersebut ke mesin pengalkulasi posisi dari gangguan atau sentuhan tersebut. Proses kalkulasi posisi akan dimulai di sini. Kalkulasi ini menggunakan posisi dari ke empat titik sudur pada panel touchscreen sebagai referensinya. Ketika hasil perhitungannya didapat, maka 52
Politeknik Telkom
Desain User Interface
koordinat dan posisi dari sentuhan tadi dapat di ketahui dengan baik. Akhirnya informasi dari posisi tersebut akan diintegrasikan dengan program lain untuk menjalankan sebuah aplikasi. Capasitive touchscreen sangat berbeda dengan kedua jenis touchscreen sebelumnya. Touchscreen jenis ini baru dapat bekerja jika sentuhan-sentuhan yang ditujukan kepadanya berasal dari benda yang bersifat konduktif seperti misalnya jari-jari Anda. Tidak seperti Resistive atau Surface wave yang dapat disentuh dengan jari tangan ataupun stylus, touchscreen ini hanya dapat dioperasikan dengan jari saja. Tetapi dengan adanya sifat seperti ini, maka touchscreen ini tidak mudah terpengaruh oleh gangguan dari benda-benda lain di atasnya seperti misalnya debu atau air. Tampilan layarnya pun sangat jernih daripada jenis Resistive touchscreen sehingga sangat cocok untuk digunakan dalam berbagai keperluan interaksi dalam publik umum seperti misalnya di restoran, kios elektronik, lokasi Point Of Sales, dan banyak lagi. Bagaimana Sebuah Layar Touchscreen Bekerja? Sebuah layar touchscreen yang paling sederhana terdiri dari tiga buah komponen utama dalam bekerja. Komponen tersebut adalah sebagai berikut: 1. Touch Sensor Touch sensor merupakan sebuah lapisan penerima input dari luar monitor. Input dari touchscreen adalah sebuah sentuhan, maka dari itu sensornya juga merupakan sensor sentuh. Biasanya sensor sentuh berupa sebuah panel terbuat dari kaca yang permukaannya sangat responsif jika disentuh. Touch sensor ini diletakkan di permukaan paling depan dari sebuah layar touchscreen, dengan demikian area yang responsif terhadap sentuhan menutupi area pandang dari layar monitor. Maka dari itu ketika Anda menyentuh permukaan layar monitornya, input juga telah diberikan oleh Anda. Teknologi touch sensor yang kini banyak digunakan terdiri dari tiga macam, seperti yang telah dijelaskan di atas, yaitu Resistive touchscreen, Capasitive touchscreen, dan Surface wave touchscreen. Semua jenis sensor ini memiliki cara kerja yang sama, yaitu menangkap perubahan arus dan sinyalsinyal listrik yang ada pada sensor tersebut, merekamnya dan mengubahnya menjadi titik-titik koordinat yang berada di atas layar, sehingga posisi tepat dari sebuah sentuhan dapat langsung diketahui dengan benar. 2. Controller Controller merupakan sebuah perangkat yang digunakan untuk menghubungkan antara sensor dengan perangkat komputer yang akan memproses sentuhansentuhan tersebut. Ketika sensor-sensor merekam Komputer
53
Politeknik Telkom
Desain User Interface
sebuah even sentuhan, maka data yang dimilikinya diteruskan ke sebuah controller. Controller tersebut kemudian akan melakukan penerjemahan informasi dari sensor-sensor tersebut menjadi informasi yang dimengerti oleh prosessor komputer. Setelah informasi masuk dan diproses oleh processor, maka hasil akhirnya akan dikeluarkan lagi ke monitor untuk ditampilkan. Kembali controller bertugas untuk menterjemahkan informasi dari processor untuk diubah menjadi sebentuk gambar yang ditampilkan di atas layar monitor. 3. Software driver Software driver merupakan sebuah software pengatur yang diinstal pada perangkat komputer atau PC Anda yang tugasnya adalah untuk mengatur agar perangkat touchscreen dan komputer dapat bekerja sama untuk digunakan dalam berbagai macam keperluan. Software driver akan mengatur operating system dari perangkat komputer bagaimana caranya menangani even-even sentuhan yang berasal dari sensor-sensor di atas layar touchscreen. Kebanyakan dari driver touchscreen saat ini sudah menggunakan driver yang hampir sama dengan driver sebuah mouse. Hal ini akan membuat sebuah even sentuhan pada satu titik di layar monitor seperti sebuah even klik pada mouse di posisi yang sama. Dengan menggunakan driver dari perangkat mouse, maka para developer program tidak perlu pusing-pusing lagi memikirkan bagaimana programnya dapat berinteraksi dengan sebuah touchscreen [http://www.indoforum.org/showthread.php?p=555275]
54
Politeknik Telkom
Desain User Interface
Rangkuman
1.
Dalam proses interaksi antara manusia dengan komputer terdapat peripheral yang berfungsi untuk memberikan input dan menampilkan output. 2. Monitor komputer merupakan media output yang sangat dominan yang berkerja dengan menggunakan pengolahan warna cahaya. 3. Ditinjau dari bahannya, monitor dapat dikategorikan menjadi 3 macam yaitu: CRT, LCD dan TFT LCD 4. Ditinjau dari adapternya, monitor dapat dikategorikan menjadi MDA, EGA, VGA, CGA, XGA, SVGA 5. Warna pada komputer direpresenasikan oleh tiga warna dasar yaitu merah, hijau, dan biru. 6. Setiap warna dasar RGB diberi skala 0 sampai dengan 255 yang berasal dari pengkodean 8 bit. 7. Total warna yang dapat direpresentasikan oleh RGB aalah 256x256x256 warna 8. Keyboard yang paling berkembang saat ini adalah model QWERTY dengan berbagai kelebihan dan kekurangannya. 9. Mouse merupakan piranti masukan untuk aplikasi berbasis windows. 10. Touch Screen bekerja berdasar sensor untuk menentukan posisi dan pilihan user.
Komputer
55
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Pada komputer terdapat piranti yang berfungsi sebagai masukan sekaligus keluaran. 2. Layar monitor komputer bekerja bersasarkan pengolahan cairan berwarna. 3. Teknologi LCD lebih kuno dibandingkan dengan tabung CRT. 4. Warna dasar cahaya terdiri dari merah, kuning, dan biru. 5. Setiap warna pada komputer pada dasarnya merukan kombinasi dari tiga warna dasar. 6. FF0000 merukan warna merah sempurna. 7. Warna dasar dalam sistem RGB diberi derajat dari 1 sampai dengan 255. 8. Total warna yang dapat direpresentasikan oleh sistem RGB pada komputer adalah 255x255x255. 9. Keyboard QWERTY cenderung lebih cocok untuk orang kidal dibandingkan bukan kidal. 10. Piranti masukan mouse hadir lebih belakangan dibandingkan dengan keyboard. 11. Touch screen merupakan media input output.
56
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Yang berfungsi sebagai piranti masukan sekaligus keluaran adalah ______
A. B. C.
Mouse Speaker Keyboard
D E.
Layar Monitor Touchscreen
2.
Berikut ini warna yang merupakan warna dasar cahaya adalah pada komputer adalah ______ 1. Merah 2. Kuning 3. Hijau 4. Biru 5. Hitam 6. Putih
A. B. C.
1,2,3 1,2,4 2,3,4
3.
Urutan Kombinasi warna dasar pada komputer adalah ______
A. B. C.
Merah – Kuning – Biru Merah – Hijau – Biru Merah – Oranye – Ungu
4.
Yang merupakan warna kuning adalah _____
A. B. C.
FFFF00 FFFFFF FF0000
Komputer
D. E.
D. E.
D. E.
4,5 2,4,5
Merah – Kuning – Hijau Kuning – Oranye – Ungu
00FF00 0000FF
57
Politeknik Telkom
Desain User Interface
5.
Yang menghasilkan warna abu abu adalah_______
A. B. C.
FF00FF CC9900 ABCDEF
6
Warna merah yang paling kuat adalah _____
A. B. C.
FF0000 FF9999 990000
7.
1. 2. 3. 4. 5.
D. E.
D. E.
909090 112233
110000 AA0000
Keyboard QWERTY paling banyak digunakan Keyboard QWERTY cenderung menguntungkan orang kidal Keyboard QWERTY disusun berdasarkan kode ASCII Keyboard QWERTY disusun berdasarkan Abjad Keyboard QWERT memiliki scan code yang sama dengan kode ASCII
Peryataan yang benar adalah A B C
1,2,3 1,3,5 1,2,5
8.
1. 2. 3. 4.
D E
2,4,5 1,2,3,5
Mouse mekanik menggunakan bola untuk memutar rora penetu koordinat pada monitor. Mouse Optik menggunakan sensor cahaya untuk mendeteksi perubahan koordinat. Mouse mekanik lebih mudah bekerja pada permukaan yang kesat. Mouse Optik lebih mudah bekerja pada permukaan yang licin dan menkilap.
Peryataan yang benar adalah A B C 58
1,2,3 1,3 2,4
D E
4 1,2,3,4
Politeknik Telkom
Desain User Interface
9
Peralatan elektronik yang paling banyak menggunakan teknologi touch screen adalah _______
A B C
Televisi Handphone PDA
10
1. Resistive touchscreen memiliki permukaan yang relatif buram. 2. Capasitive touchscreen bekerja oleh sentuhan jari ataupun stylus 3. Surface wave Touchscreen dapat terganggu oleh debu dan air.
D E
Monitor CRT Calculator
Pernyataan yang benar adalah ______ A B C
1,2 1,3 2,3
Komputer
D E
1,2,3 1 saja
59
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3.
Sebutkan warna dasar cahaya! Bagaimana representasi warna pada komputer? Buatlah tabel heksa desimal untuk warna – warna utama berikut: a. Merah b. Jingga c. Kuning d. Hijau e. Biru f. Ungu 4. Carilah program kecil di internet yang dapat memberikan visualisasi mengenai kombinasi warna denngan bilangan heksa desimal yang menjadi representasinya! 5. Bagaimana cara kerja mouse mekanik? 6. Bagaimana cara kerja mouse optik? 7. Apa kelebihan dan kekurang keyboard model QWERT? 8. Sebutkan jenis keyboard selain model QWERTY! 9. Sebutkan jenis touchscreen dan sifatnya! 10. Carilah video di internet yang menampilkan penggunaan touchscreen!
60
Politeknik Telkom
Desain User Interface
4
KONSEP INTERAKSI
Overview
Komputer dan Manusia dapat saling berinteraksi dengan menggunakan antarmukan yang terdapat diantara prosesor komputer dengan manusia. Interaksi yang timbul sangat dipengaruhi teknologi yang berkaitan dan disesuiakan berdasarkan kebutuhan. Melalui bab ini akan dibahas berbagai macam pola interaksi antara manusia dengan komputer.
Tujuan
1. 2.
Mahasiswa memahami konsep interaksi. Mahasiswa mengetahui berbagai macam pola interaksi antara manusia dan komputer. komponen komputer yang menjadi interface dengan user.
Konsep Interaksi
61
Politeknik Telkom
4.1
Desain User Interface
Interaksi
Interkasi antara manusia dengan komputer dapat dipandang sebagai dialog antara keduanya. Sebagaimana telah dijelaskan pada bab 1, interaksi ini melibatkan manusia sebagai pengguna, prosesor komputer, dan antarmuka diantara keduanya yang menjadi sarana input dan output. Output
Manusia
Komputer Input
Setiap aplikasi memiliki pola interaksi sendiri-sendiri sesuai dengan kebutuhan dan teknologi yang ada. Beberapa pola yang telah diperkenalkan pada bab 1 adalah: 1. Antarmuka dengan baris perintah tunggal 2. Antarmuka dengan baris perintah terstuktur 3. Menu dan WIMP (Window Icon Menu Pointer) 4. Bahasa sehari-hari/alami 5. Dialog dengan tanya jawab terstruktur/Query 6. Formulir isian dan kertas kerja
62
Politeknik Telkom
4.2
Desain User Interface
Baris Perintah Tunggal
Interaksi ini merupakan interaksi yang paling primitif. Perintah yang dilakukan dilakukan melalui keyboard dengan sebuah key maupun beberapa karakter yang membentuk kata kunci tertentu. Bukalah Aplikasi MS DOS untuk menjalankan perintah Command Line. Dengan bantuan informasi di internet cobalah eksplore perintah-perintah ini dan cobalah untuk mempraktekannya! 1. DIR
2. DIR /P
3. DIR /W
4. EDIT HALO.TXT
5. TYPE HALO.TXT
6. COPY HALO.TXT CALO.TXT
7. REN HALO.TXT BALO.TXT
Konsep Interaksi
63
Politeknik Telkom
Desain User Interface
8. DEL H*.TXT
9. DEL *.TXT
10. DEL *.*
11. MKDIR ALOHA
Berbagai macam perintah di atas sangatlah familiar bagi pengguna komputer sampai dengan awal 90-an. Perintah-perintah tersebut cukup sering dilakukan sampai akhirnya hadirlah windows eksplorer yang menutup semua kerumitan tersebut dan menggantinya dengan click and drop.
Perintah kombinasi keyboard pada window juga dapat dilakukan dengan menekan kombinasi tombol tertentu! Cobalah perintahperintah dibawah ini dan tentukan efek perintah tersebut! 1. [Ctrl]+[d]
2. [Ctrl]+[e]
64
Politeknik Telkom
Desain User Interface
3. [Alt] + [F4] Natural language
4. [Alt] + [Tab]
Perintah kombinasi keyboard pada aplikasi Microsoft Word juga dapat dilakukan untuk mempercepat operasi. Cobalah buka aplikasi Microsoft Word, kemudian identifikasi perintah key berikut ini: 1. F1
2. F2
3. F5
4. F12
5. [Ctrl]+[f]
Konsep Interaksi
65
Politeknik Telkom
Desain User Interface
Perintah kombinasi keyboard juga terdapat pada berbagai macam aplikasi yang lain, misalnya pada browser Mozilla. Cobalah ekplore dari fungsi tombol/key berikut ini: 1. F3
2. F5
3. F6
4. [Ctrl] + [u]
5. [Alt]+[d]
6. [Ctrl]+[f]
Perintah baris tunggal dapat disarikan sebagai berikut: • Cara memberi instruksi kepada komputer secara langsung, dapat berupa tombol fungsi, karakter kata, atau kombinasi • Cocok untuk perintah berulang • Lebih tepat untuk pengguna yang ahli • Menyediakan Menyediakan akses langsung pada fungsi sistem • Baris perintah harus mempunyai makna/arti 66
Politeknik Telkom
Keuntungan Cepat Efisien Akurat Ringkas Luwes Inisiatif oleh pengguna Mendidik User lebih berhati-hati dan faham dengan setiap perintah yang dijalankan
Desain User Interface
Kerugian
Memerlukan latihan yang lama Membutuhkan penggunaan yang teratur Beban ingatan yang tinggi Jelek dalam menangani kesalahan
Sebagai kesimpulan akhir, perintah tunggal dengan tombol atau kombinasinya akan optimal apabila ditujukan sebagai perintah pelengkap, bukan perintah utama sebagai mana perintah pada shell operating system.
4.3
Baris Perintah Terstruktur
Pola interaksi ini merupakan kumpulan dari banyak perintah tunggal menjadi satu rangkaian. Pola ini sering dijumpai pada file .BAT pada operting system windows dan .sh pada Linux (Catatan: pada linux, ekstension ini bukanlah hal yang wajib dan dapat diubah sesuai kebutuhan). Dalam interaksi tingkat tinggi, pola interaksi ini relatif jarang ditemui.
Konsep Interaksi
67
Politeknik Telkom
1.
Desain User Interface
Sebagai latihan, cobalah buat file halo.BAT pada Operating System Windows. Windows. File halo.BAT dapat dapat dibuat dari notepad atau editor teks lainnya. Isi file halo.BAT adalah sebagai berikut.
mkdir coba cd coba mkdir dir1 mkdir dir2 mkdir dir3 cd dir1 mkdir 1-a mkdir 1-b cd .. cd dir2 mkdir 2-p mkdir 2-q cd.. cd dir3 mkdir 3-x mkdir 3-y
68
2.
Cobalah halankan file BAT dari command line maupun dari windows eksplorer. (Catatan : untuk mengulangi perintah yang sama, direktori yang terbentuk di hapus dulu.)
3.
Cobalah buat file .BAT untuk perintah yang lain yang berkaitan dengan operasi-operasi dasar command line! (Misalnya DIR /P, DIR /W, COPY, RENAME, dan sebagainya.
4.
Cobalah cari di internet sebuah file .sh kemudian perhatikan isi file tersebut.
Politeknik Telkom
4.4
Desain User Interface
Menu dan WIMP (Window Icon Menu Pointer)
Menu merupakan sekumpulan pilihan yang diberikan kepada user. WIMP atau Window Icon Menu Pointer merupakan model interaksi standar yang berkembang pesat saat ini khususnya pada PC. Window Merupakan area pada layar komputer yang umunya berbentuk kotak. Merupakan sebuah terminal yang mandiri. Untuk sebuah aplikasi dapat memiliki window dengan jumlah lebih besar dari satu, namun masing – masing dapat bekerja mandiri dan tidak saling mempengaruhi. Berisi teks, gambar, dan untuk aplikasi tertentu terndapat visualisasi untuk hansil interaksi (misalnya hasil pengetikan, pemilihan warna, dan sebagainya). Umumnya window berbentuk kotak dengan mengikuti pola tertentu, namun ada pula window yang sudah di modifikasi sehingga berbentuk lain.
-
Satu window dengan window lainya dapat saling bertumpukan, disembunyikan, atau ditampilkan semua.
Konsep Interaksi
69
Politeknik Telkom
-
Icon -
-
70
Desain User Interface
Pada window umumnya terdapat scrollbars untuk menggulung layar naik turun atau menggeser layar kanan kiri Pada bagian atas terdapat Tittle bar yang berisi judul/nama dari window.
Icon merupakan gambar atau simbol yang berukuran kecil yang berfungsi merepresentasikan suatu objek Berbagai macam window aplikasi dapat diperkecil menjadi ikon-ikon sehingga dapat diakses dengan mudah. Icon dapat berbentuk apa saja dengan berbagai macam variasinya, namun tetap mencermikan objek yang dimaksud. Berikut ini adalah kelebihan Icon: o icon merupakan variasi dari menu, karena satu ikon menunjukkan suatu aktifitas, yang dalam sistem menu dinyatakan dalam bentuk teks o merupakan terobosan besar karena mempunyai sifat yang alamiah, ringkas, mudah diingat, mudah dipelajari & dikenal o gambar lebih bersifat umum daripada tekstual o menyingkat waktu dan memperkecil usaha untuk mempelajari software
Politeknik Telkom
Desain User Interface
kinerja user lebih tinggi dan adanya penurunan tingkat kesalahan o bagi pemrogram dapat dengan mudah mengelompokkan ikon berdasarkan atributnya Kekurangan : o penggunaan ikon menyembunyikan penurunan produktifitas dibalik penampilan yang ramah o penggunaan ikon bisa membingungkan dan boros tempat o tidak efektif bila berurusan dengan perintah-perintah yang banyak tetapi serupa o user tertentu lebih suka membaca suatu teks karena lebih jelas o membutuhkan waktu lama dan sulit untuk menemukan ikon yang cocok dengan aktifitas yang akan dijalankan, solusi : dapat diperjelas dengan menambahkan pesan (2 atau 3 kata) dapat permanen atau sementara (h o anya muncul pada saat mouse/kursor berada pada ikon tersebut) o tidak adanya standarisasi o
-
Pointer Pointer merupakan bagian yang unik dan sangat menonjol pada model WIMP Pointer dapat dikendalikan dengan berbagai macam piranti misalnya joystick, trackball, tombol kursor, namun yang paling populer adalah mouse. Berikut ini adalah contoh bentuk mouse pointer yang terdapat pada Operating System Windows (Vista).
Konsep Interaksi
71
Politeknik Telkom
Desain User Interface
Untuk melakukan pengaturan tampilan pointer pada Windows Vista, dapat dilakukan dengan cara:
o o o o
72
Klik Start Klik Control Panel Klik Hardware Klik Mouse
Politeknik Telkom
Desain User Interface
Berbagai pengaturan mouse (dapat dilakukan pada jendela berikut ini.
-
Window dapat diperkecil menjadi ikon-ikon untuk mempermudah akses.
Konsep Interaksi
73
Politeknik Telkom
Desain User Interface
Menu Sekumpulan pilihan pada menu dapat disajikan dengan beberapa cara misalnya: 1. Secara Audio Menu semacam ini banyak dijumpai pada peralatan berbasis suara, misalnya telepon dan handphone. Menu pengisian pulsa adalah contoh dari model menu ini. Secara umum menu berbasis suara mengarahkan dari hal global ke yang spesifik: Contoh: “Selamat datang di layanan isi ulang o Tekan 1 untuk bahasa Indonesia o Or press 2 for English”
Jika user memasukkan bilangan selain 1 dan 2 akan muncul pesan “Masukkan Anda salah, silakan ulangi lagi” o “Tekan 1 untuk bahasa Indonesia o Or press 2 for English” Jika user memilih 1 menu akan dilanjutkan: o “Untuk pengisian pulsa tekan 1” o “Untuk Informasi sisa pulsa tekan 2” o “Untuk informasi masa aktif atau masa tenggang tekan 3”
diikuti pengulangan menu yang ada. Dan seterusnya sampai user dapat menggunakan menu level terdalam.
2.
74
Secara Visual. Menu secara visual merupakan menu yang banyak dijmpai pada aplikasi dengan antarmuka layar monitor.
Politeknik Telkom
Desain User Interface
Selain itu, menu icon pada windows merupakan contoh menu jenis ini. Menu pada windows telah mengalami perkembangan teknologi secara pesat dan sering disebut sebagai WIMP (Window Icon Menu Pointer) Beberapa komponen tambahan dalam model WIMP, diantaranya - Button (tombol) : radio button Radio button merupakan sekumpulan pilihan yang harus dipilih salah satu oleh user. User tidak diperkenankan memilih lebih dari 1 pilihan. Apabila user memilih pilihan yang lain setelah sebelmnya menentukan pilihan, maka piliha terakhir yang akan digunakan. Di bawah ini contoh penggunaan radio button untuk quiz online. Contoh lain adalah polling online, dimana setiap responden diminta memilih salah satu dari jawaban yang disediakan.
Konsep Interaksi
75
Politeknik Telkom
Desain User Interface
check box : kumpulan dari pilihan-pilihan yang boleh memilih 1/lebih dari 1. Check box dapat juga digunakan untuk polling yang memungkinkan pilihan lebih dari 1. Contoh check box seperti pada gambar berikut:
76
Politeknik Telkom
Desain User Interface
- Pallettes (palet) : Merupakan kumpulan kemungkinan mode yang tersedia, ditambah mode yang aktif saat itu, biasanya adalah sekumpulan icon yang ditata secara berdampingan (tiled icons) contoh : paket untuk menggambar memiliki palet yang mengindikasikan apakah kotak, lingkaran, garis atau teks yang akan digambar, dan yang lain lagi mengindikasikan warna-warna yang tersedia pada paket tersebut.
Konsep Interaksi
77
Politeknik Telkom
Desain User Interface
- Combo box Combo Box merupaka kombinasi antara a drop-down list atau list box dengan sebuah single-line textbox , yang memungkinkan user memilih pilihan yang disediakan.
- List box Llist box merupakan sebuah komponen GUI yang mengijinkan user memilih satu atau lebih item dari sebuah list. Pemilihan lebih dari satu ini dibantu dengan tombol Shift atau Control.
78
Politeknik Telkom
Desain User Interface
- Kotak dialog : jendela yang berisi informasi penting, seperti pada saat user akan menyimpan file, maka muncul kotak dialog untuk memberi nama file tersebut. Setelah file disimpan, kotak dialog selesai tugasnya dan menghilang dari layar.
Konsep Interaksi
79
Politeknik Telkom
Desain User Interface
- Kotak peringatan, muncul untuk memberitahu kesalahan atau tuntunan
Perkembangan antarmuka grafis yang secara umum dikenal secara luas adalah perkembagan windows dari waktu ke waktu. Windows menjadi raja operating system di dunia saat menjamurnya personal computer (PC). Kemudahan penggunaan Windows dan kompatibilitas terhadap berbagai hardware menjadi pemicu utama berkembangnya sistem operasi ini, meskipun secara sistem masih memiliki banyak kelemahan, dan secara grafis masih relatif di bawah Mac OS.
80
Politeknik Telkom
Desain User Interface
(Sumber : http://www.guidebookgallery.org/screenshots/win31)
Konsep Interaksi
81
Politeknik Telkom
82
Desain User Interface
Politeknik Telkom
Konsep Interaksi
Desain User Interface
83
Politeknik Telkom
Desain User Interface
Bandingkan format windows menu pada windows 3.1 , Windows 95, Windows XP, dan Windows Vista. (Catatan : Screen shoot menu yang lebih lengkap dapat Anda peroleh di internet dengan bantuan Google) Manakah yang paling user freindly menurut Anda? Jelaskan dengan menyebutkan kelebihan dan kukurangannya.
3.
84
Secara Audio Visual Menu ini pada dasarnya merupakan pengembagan dari menu visual. Pada menu jenis ini, menu misual diiringi dengan audio yang membedakan pilihan satu dengan pilihan yang lain. Menu jenis ini paling sering dikumpai pada permainan / game baik pada komputer, handphone maupun PS2.
Politeknik Telkom
4.
Desain User Interface
Secara Hardware: Menu jenis ini melibatkan piranti eksternal yang membantu dalam menentukan pilihan. Pilihan direpresentasikan melalui alat fisik tertentu. Game-game simulator biasanya memberikan menu melalui hardware yang terhubung dengan sistem. Contoh game yang populer adalah driving simulator dan flight simulator. Berikut ini gambar Flight Simulator Boeing 747.
Piranti-piranti fisik tersebut merupakan menu yang dapat dipilih modenya sebagaimana sistem yang di adopsinya. Layar monitor berfungsi sebagai jendela dunia nyata yang menggambarkan efek dari menu-menu yang telah dipilih.
Konsep Interaksi
85
Politeknik Telkom
Desain User Interface
Pada simulator mobil, layar nonitor juga berfugnsi sebagai jendela kaca depan mobil dan kaca spion
4.5
Bahasa Alami
Pola interaksi dengan menggunakan bahasa alami lebih luas dari perintah baris (command line). Interaksi dengan bahasa alami dapat dikategorikan menjadi dua macam: Interaksi secara tidak langsung Contoh untuk interaksi ini adalah bahasa pemrograman. Dengan bahasa pemrograman manusia memerintahkan komputer melalui source code untuk melakukan suatu tugas tertentu. Walaupun bahasa pemrogaman ini tidak langsung di mengerti oleh komputer, namun interface terdepan antara komputer dengan user adalah bahasa alami. Contoh bahasa pemrograman dalam bahasa Pascal, LISP, dan Prolog:
86
Politeknik Telkom
Desain User Interface
http://www.learn-programming.za.net/programming_pascal_learn12.html
http://forrest.psych.unc.edu/teaching/p285/p285pgmexmpchap3.html Konsep Interaksi
87
Politeknik Telkom
Desain User Interface
parent(adam,peter). % means adam is parent of peter parent(eve,peter). parent(adam,paul). parent(marry,paul). father(F,C):-man(F),parent(F,C). mother(M,C):-woman(M),parent(M,C). is_father(F):-father(F,_). is_mother(M):-mother(M,_).
?-father(X,paul).
http://kti.mff.cuni.cz/~bartak/prolog/genealogy.html Interaksi secara langsung Contoh pola interaksi ini adalah Speech Recognition. Dengan teknologi Speech Recognition, user dapat memerintahkan secara lisan tanpa harus mengetik perintah ke komputer. Pembahasan tentang Speech recognition akan dilanjutkan lebih dalam pada akhir buku ini.
http://www.microsoft.com/enable/aging/scan3_large.aspx
88
Politeknik Telkom
Desain User Interface
Contoh lain adalah Speec to Text. Dengan teknologi ini, data yang berupa plain text dapat disajikan dalam suara manusia melalui pola pembacaan tertentu.
http://www.text-to-speech-software.com/
Text To Speech Application
http://www.sxsoftware.com/img/notepad_sx.gif
Konsep Interaksi
89
Politeknik Telkom
4.6
Desain User Interface
Query
Interaksi jenis ini sering digunakan pada sistem informasi, dimana user mengajukan serangkaian pertanyaan atau perintah yang akan dikerjakan oleh komputer. Query merupakan pengembagan lebih lanjut dari interaksi dengan bahasa alami yang difokuskan untuk tujuan terntentu. Perintah Query biasanya berkaitan dengan dengan aplikasi database. Berikut ini contoh query pada sutu data base.
SELECT UserId, Name, Position, EntryDate FROM UserTable WHERE Location=”BANDUNG”
Pada Microsoft Office tersedia juga terdapat fasilitas untuk membangun query seperti pada gambar berikut.
Dengan menggunakan Query Designer terlihat lebih mudah dan cepat. Namun pada kenyataanya, untuk para pakar database penggunaan query dengan mengetik langsung lebih cepat dibandingkan dengan tools semacam ini.
90
Politeknik Telkom
Desain User Interface
Query Designer lebih tepat digunakan oleh para pemula. Untuk query yang lebih kompleks, para programmer lebih senang membangunnya secara langsung. Query tidak hanya terdapat di database. Dalam pemrograman inteligensia buatan, query juga memegang pernanan penting untuk mendapatkan suatu jawaban dari kerangkaian fakta dan aturan. /* upper case used for variables, lower case for constants. Terminate each clause by a period. A clause can be written on multiple lines. Do not leave any blank space. */ /* these are rules */ parent(X,Y):-mother(X,Y). parent(X,Y):-father(X,Y). grandparent(X,Y):-parent(X,Z),parent(Z,Y). /* and these facts */ mother(sonja,mary). mother(sonja,jane). father(john,jim). father(john,bob). father(bob,bill). father(bob,dan). /* and these are goals Find all X that are grandparents of Y. the first answer is returned to see more answers.
Type ; after
grandparent(X,Y). Find who John is a granparent of grandparent(john,X). */ Konsep Interaksi
91
Politeknik Telkom
Desain User Interface
Source: http://www-users.cs.umn.edu/~gini/prolog/parent Pada program prolog Query dapat digunakan untuk mendapatkan fakta baru dari dari fakta dan aturan yang sudah ada, misalnya: menentukan hubungan kekerabatan: - Siapa saja Anak X - Siapa saja saudara X - Siapakah orang tua X - Siapa saja sepupu X untuk bidang kesehatan: - Apa saja gejala penyakit Thypus? - Penyakit apa saja yang terdapat gejala demam? - Jika terdapat gejala demam, pusing, muntah, penyakit apa saja yang mungkin? menentukan klasifikasi makhuk hidup. - Apa saja yang termasuk vertebrata? - Apa saja ciri ikan? - Apakah Ikan Paus termasuk jenis ikah?
4.7
Form
Form merupakan tabulasi isian yang yang merupakan bentuk elektronik dari borang. Form yang baik harus mendukung kemudahan dan kenyamanan dengan tetap mejaga kualitas data. Berikut ini contoh dari form Menu merupakan sekumpulan pilihan yang diberikan kepada user. Sekumpulan pilihan ini dapat disejadikan dengan beberapa cara misalnya pada registerasi yahoo, calon pengguna diminta mengisi form seperti gambar berikut:
92
Politeknik Telkom
Desain User Interface
Pada form registrasi yahoo, cobalah eksplorasi form teresbut dengan menjawab pertanyaan berikut ini. ( Untuk dapat melihat halamannya secara komplit, silakan akses yahoo.com)
1. Apakah protokol yang digunakannya?
Konsep Interaksi
93
Politeknik Telkom
Desain User Interface
2. Mengapa menggunakan protokol di atas?
3. Dapatkah kita memasukkan tanggal lahir 29 Februari tahun 1981? Mengapa?
4. Apa yang terjadi apabila mengisi tahun masa yang akan datang, misalnya 2110?
5. Apa yang terjadi apabila apabila user mengsi password kurang dari enam karakter?
6. Apakah fungsi tombol
7. Apakah nama gambar seperti ini?
8. Apakah fungsi gambar di atas?
94
Politeknik Telkom
Desain User Interface
9. Apakah ada teknologi untuk mengelabunya? Jika ada , apa namanya?
Konsep Interaksi
95
Politeknik Telkom
Desain User Interface
Rangkuman
1.
Antarmuka dengan baris perintah tunggal merupakan intarksi yang paling primitif yang sering dijumpai pada perintah console operating system. 2. Antarmuka dengan baris perintah terstuktur merupakan kelanjutan dari baris perintah tunggal yang bersifat jamak. 3. Menu dan WIMP (Window Icon Menu Pointer) merupakan standar interaksi grafis saat ini. 4. Window merupakan area pada layar komputer yang umunya berbentuk kotak, merupakan sebuah terminal yang mandiri. Untuk sebuah aplikasi dapat memiliki window dengan jumlah lebih besar dari satu, namun masing – masing dapat bekerja mandiri dan tidak saling mempengaruhi. 5. Icon merupakan gambar atau simbol yang berukuran kecil yang berfungsi merepresentasikan suatu objek 6. Pointer merupakan bagian yang unik dan sangat menonjol pada model WIMP, dapat dikendalikan dengan berbagai macam piranti misalnya joystick, trackball, tombol kursor, namun yang paling populer adalah mouse. 7. Menu merupakan sekumpulan pilihan yang diberikan kepada user yang dapat disajikan dalam berbagai cara. 8. Pola interaksi dengan menggunakan bahasa alami lebih luas dari perintah baris (command line). 9. Dengan teknologi Speech Recognition, user dapat memerintahkan secara lisan tanpa harus mengetik perintah ke komputer. 10. Dialog dengan tanya jawab terstruktur/Query biasa digunakan pada basis data dan intelegensia buatan. 11. Form merupakan tabulasi isian yang yang merupakan bentuk elektronik dari borang.
96
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Teknologi antarmuka grafis sudah ada sejak komputer pertama kali ditemukan. 2. Perintah baris tunggal sudah seharusnya ditinggalkan dan tidak diperlukan lagi di era komputer modern. 3. Icon disket artinya menyimpan ke dalam disket. 4. Pointer merupakan simbol yang berukuran kecil dan berfungsi untuk merepresentasikan objek. 5. Pada komputer terdapat piranti yang berfungsi sebagai masukan sekaligus keluaran. 6. Ikon biasanya berupa image berukuran besar. 7. Query dapat digunakan untuk mencari fakta baru pada intelegensia buatan. 8. Text to speech mengubah file audio menjadi suara manusia. 9. Speech Recogniton merupakan interaksi modern dimana user memberikan perintah secara lisan. 10. Windows Vista memiliki fasilitas Speech recogniton.
Konsep Interaksi
97
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Yang merupakan interaksi paling primitif adalah ______
A. B. C.
WIMP Query Speech Recognition
D E.
Perintah baris Text to Speech
2.
Yang merupakan interaksi paling modern adalah ______
A. B. C.
WIMP Query Speech Recognition
3.
Gambar atau simbol yang berukuran merepresentasikan suatu objek disebut
A. B. C.
Windows Button Icon
4.
Gambar berikut merupakan menu ______
98
D. E.
D. E.
Perintah baris Text to Speech
Menu Pointer
kecil
yang
berfungsi
Politeknik Telkom
Desain User Interface
A. B. C.
Check Box List Box Combo Box
5.
Gambar berikut merupakan menu _______
A. B. C.
Check Box List Box Combo Box
6
Teknologi yang memungkinkan pembacaan sms adalah:
A. B. C.
Speech Recording Sampling Poliphonic
7.
1. Window aplikasi tidak selalu berbentuk kotak 2. Pointer pada Micorsoft Windows dapat diubah bentuknya 3. Short cut dapat berbentuk ikon 4. Graphical User Interface identik dengan WIMP. Peryataan yang benar adalah
A B C
1,23 1,3 2,4
8.
Interaksi yang paling sering ada pada oprasi database adalah______
A B C
Short cut menu Query Text to Speeh
Konsep Interaksi
D. E.
D. E.
D. E.
D E
D E
Radio Button Drop Down
Radio Button Drop Down
Text to Speech Speech Recognition
4 1,2,3,4
Speech Recogntion Pallet
99
Politeknik Telkom
Desain User Interface
9
Misalkan 2 orang dari dua negara berbeda dengan bahasa yang berbeda pula, saling menelepon dengan menggunakan bahasa masing-masing. Teknologi yang mendukung hal ini adalah_____
A B C
Pointing Device Touch Screen WIMP
10
Operasi-operasi dasar pada sistem operasi yang sering digunakan oleh hacker menggunakan pola interaksi
A B C
Perintah baris Speech to Text Speech Recognition
100
D E
D E
Text To Speech Speech Recognition
WIMP Form
Politeknik Telkom
Desain User Interface
Latihan
1. Sebutkan pola-pola interaksi dan jelaskan dengan singkat! 2. Jelaskan dengan singkat teknologi Text to Speech 3. Jelaskan dengan singkat teknologi Speech Recogniton. 4. Cobalah cari di internet aplikasi yang menggunakan intelgensia buatan. Bagaimana antarmukanya? 5. Apa yang di maksud dengan query builder? 6. Sebutkan komponen – komponen dalam HTML yang sering digunakan pada form. 7. Bagaimana caranya agar form di internet dapat dikirm secara aman? 8. Bagaimana caranya agar seserang tidak dapat mengirim form ribuan kali dengan maksud membuat sistem down? 9. Bagaimana caranya mengubah tampilan pointer pada Micorsoft Windows? 10. Sebutkan kelebihan dan kekurangan perintah baris!
Konsep Interaksi
101
Politeknik Telkom
Desain User Interface
5
PRINSIP DESAIN
Overview
Untuk membangun antarmuka yang baik harus diperhatikan prinsip-prinsip dasar pada antarmuka antara user dengan komputer. Melalui bab ini akan dibahas prinsip-prinsip pembangunan antarmuka dari berbagai kalangan yang merupakan pakar di bidangnya.
Tujuan
1. 2. 3.
102
Mahasiswa mengetahui prinsip-prinsip dasar dalam pembangunan antar muka dengan komputer. Mahasiswa mampu memberikan penilaian seberapa baik suatu antar muka. Mahasiswa dapat membangun antar muka yang baik berdasarkan prinsip-prinsip dasar.
Politeknik Telkom
5.1
Desain User Interface
Evaluasi Antarmuka
Sebagai pengguna aplikasi komputer, user akan memiliki penilaian terhadap aplikasi yang dijalankannya. Berbagai macam penilaian akan muncul terhadap suatu aplikasi yang sama. Seorang user akan mengatakan bahwa aplikasi Micorsoft Word itu sulit digunakan. Pernyataan ini akan sangat mungkin dilontarkan oleh seorang pengguna yang baru pertama kali menggunakan aplikasi tersebut. Pernyataan yang berbeda akan dilontarkan oleh user yang sudah lama berkecimpung dalam dunia pengolahan kata semenjak dari jaman Aplikasi Chi-Writer dan Wordstar. Bagi pengguna yang terkahir ini, aplikasi Microsoft Word merupakan aplikasi yang sangat mudah dan menjadi suatu keajaiban dibandingkan aplikasi pengolah kata sebelumnya. Namun pengguna pertama pun dapat menganggap bahwa aplikasi Micorsoft Word itu sangat mudah setelah ia belajar sepekan. Pada kasus di atas ada beberapa hal yang berpengaruh terhadap penilaian user kepada Microsoft Word yaitu: - Pengalaman User kedua sudah berpengalaman dalam pengolah kata, sehingga mampu membuat perbandingan dengan segera - Kebiasaan User kedua sudah terbiasa dengan aplikasi Microsfot Word selama sepekan belajar sehingga mengubah persepsinya dari semula aplikasi yang sulit menjadi aplikasi yang mudah - Lama belajar Aplikasi Micrososft Word mendukung waktu pembelajaran yang relatif singkat (learning time) sehingga user dapat menyesuaikan dengan cepat dan memiliki tingkat kenyamanan yang tinggi. - Kemudahan panduan Boleh jadi, pengguna yang pertama dapat lebih cepat mengubah persepsinya setelah dibantu penggunaan help yang interaktif dan tepat sasaran. Help yang panjang, bertele-tele, tidak visual dan berbentuk prosa, cenderung ditinggalkan oleh user. Dengan pengalaman dan obeservasi, seseorang dapat menentukan kualitas desain suatu aplikasi. Berikut ini beberapa contoh berkaitan dengan desain aplikasi.
Prinsip Desain
103
Politeknik Telkom
Perhatikan kedua gambar berikut ini.
104
Desain User Interface
Politeknik Telkom
Cobalah analisis dari kedua perbandingan pada keduanya.
Desain User Interface
Window
di
atas.
Lakukan
1. Berupa jumlah kata pada gambar pertama?
2. Berupa jumlah kata pada gambar kedua?
3. Berapa lama (order detik) Anda memahami tampilan window pertama?
4. Berapa lama (order detik) Anda memahami tampilan window kedua?
5. Mana yang lebih disukai user, banyak petunjuk dengan mengorbankan waktu yang singkat, atau sedikit petunjuk namun lebih cepat waktunya?
6. Dalam kehidupan sehari-hari, apakah Anda selalu membaca semua manual saat Anda membeli software/hardware baru terlebih dahulu?
7. Saat mengoperasikan software/hardware baru, apakah Anda membaca manual terlebih dahulu baru melakukan aksi terhadap software/hardware Anda?
Prinsip Desain
105
Politeknik Telkom
Desain User Interface
Berikut ini adalah contoh lain terhadap perbandingan alert.
Cobalah analisis dari kedua perbandingan pada keduanya.
Window
di
atas.
Lakukan
1. Berupa jumlah kata pada gambar pertama?
2. Berupa jumlah kata pada gambar kedua?
3. Berapa lama (order detik) Anda memahami tampilan window pertama?
4. Berapa lama (order detik) Anda memahami tampilan window kedua?
106
Politeknik Telkom
Desain User Interface
5. Mana yang lebih disukai kebanyakan user?
http://www.joelonsoftware.com/index.html Contoh gambar berikut berkaitan dengan form.
Prinsip Desain
107
Politeknik Telkom
Desain User Interface
Cobalaha analisis dari kedua Window di atast. Lakukan perbandingan pada keduanya. 1. Berupa jumlah kata pada gambar pertama?
2. Berupa jumlah kata pada gambar kedua?
3. Berapa lama (order detik) Anda memahami tampilan window pertama Sebagai sebuah form?
108
Politeknik Telkom
Desain User Interface
4. Berapa lama (order detik) Anda memahami tampilan window kedua sebagai sebuah form?
5. Mana yang lebih disukai oleh kebanyakan user?
http://www.startvbdotnet.com/forms/design.aspx
5.2
Prinsip dalam Desain Antar Muka
Untuk mendapatkan antar muka yang baik, perlu diperhatikan prinsipprinsip dasarnya pada saat mendesain. Para ahli mencoba memformulasikan berbagai macam prinsip pembangunan antar muka yang baik. Prinsip desain merupakan serangkaian panduan yang akan membantu desainer mengambil keputusan perancangan selama proses tersebut berjalan. Prinsip ini juga merupakan petunjuk umum yang dihasilkan dari pengalaman para pakar, yang boleh jadi bebeda antara seorang pakar dengan pakar yang lain. Namun diantara berbagai pendapat tersebut terdapat prinsip umum yang berlaku untuk semua. Beberapa prinsip yang akan dibahas adalah sebagai berikut. 1. Ben Shneiderman's dengan prinsipnya yang dikenal sebagai "Eight Golden Rules of Dialog Design", 2. Deborah J. Mayhew's melalui "General Principles of User Interface Design", 3. IBM's melalui "Design Principles for Tomorrow"
Prinsip Desain
109
Politeknik Telkom
5.3
Desain User Interface
Eight Golden Rules of Dialog Design
Ben Shneiderman mengusulkan delapan prinsip yang didasarkan pada pengalamannya secara heuristik namun dapat diterpkan pada berbagai macam sistem yang interaktif setelah melalui proses yang panjang dengan pemilahan, perluasan, dan penginterpretasian. Kedelapan prinsip tersebut adalah: 1. Upayakan untuk tetap konsisten Konsisten pada serangkaian aksi yang mirip merupakan hal yang penting. Konsistensi ini berkaitan dengan tampilan, menu, bantuan, perintah, pesan-pesan yang disampaikan, dan istilah yang digunakan di layar.
Pada gambar tersebut terdapat berbagai macam button „Yes‟ dengan berbagai macam variasinya. Namun aplikasi yang konsisten, sekali memilih bentuk button „Yes‟ maka bentuk tersebut harus senantiasa digunakan pada setiap kali dibutuhkan.
Pada gambar berikut sebuah form untuk melakukan registrasi secara online. Perhatikan bahwa terdapat inkonsistensi pada form tersebut yaitu: a. Penggunaan istilah Form (pada judul window), Formulir (pada judul halaman), dan borang (pada pernyataan keaslian) untuk mengacu kepada terminologi yang sama. b. Penggunaan istilah registrasi (judul halaman) dan daftar (pada button bawah) untuk terminologi yang sama.
110
Politeknik Telkom
2.
Desain User Interface
Gunakan short cut pada bagian yang sering digunakan. Dengan short cut, banyaknya interaksi dapat ditekan seminimal mungkin. Semakin sedikit interaksi semakin mudah penggunaan, semakin kecil pula kesalahan. Berbagai macam singkatan, tombol, perintah cepat dengan menggunakan key tertentu (Function, shit, control, tab, dsb.) sangat berguna bagi user yang mahir dengan aplikasi yang digunakannya. Contoh short cut dengan key: - [Alt] + [tab] - [Windows]+[e], - [Windows]+[d], - [Windows]+[r] - [alt]+[f4]. - [Control]+[Alt]+[Del]
Prinsip Desain
111
Politeknik Telkom
Desain User Interface
Perhatikan Window di atas. Window tersebut adalah pengaturan jaringan pada Internet Eksplorer. 1. Berapa langkah Anda dapat menemukan window tersebut?
2. Apakah window tersebut sering digunakan untuk orang yang mobile?
112
Politeknik Telkom
Desain User Interface
3. Apakah perlu short cut untuk wondow tersebut atau tidak? Jelaskan!
3.
Sediakan feedback yang informatif. Untuk operasi yang umum berikan feedback yang umum sedangkan untuk operasi yang khusus apalagi berbahaya berikan feedback dengan penekanan. Desain yang dibuat harus tetap menginformasikan kepada pengguna mengenai aksi atau interpretasi, perubahan status, adanya kesalahan, atau adanya ekspesi yang relevan dan menarik secara melalui bahasa yang jelas, singkat, tidak ambigu, dan familiar bagi pengguna.
Prinsip Desain
113
Politeknik Telkom
4.
5.
6.
7.
8.
5.4
Desain User Interface
Dialog memiliki lingkup tertentu. Serangkaian akasi harus diatur kedalam kelompok sedemikian sehingga terdapat bagian awal, pertengahan, dan penutup. Feedback yang informatif pada sekelompok aksi tersebut memberikan kenyamanan bagi pengguna dan selanjutnya menjadikan petunjuk untuk serangkaian langkah berikutnya. Sediakan penanganan kesalahan yang sederhana Dalam mendesain sistem, harus dibuat sedapat mungkin pengguna tidak melakukan kesalahan yang fatal. Apabila terjadi kesalahan yang serius, sistem harus dapat mendeteksi dan melakukan penanganan kesalahan secara sederhana dan komprehensif. Perbolehkan user melakukan aksi mundur atau pembatalan. Fitur ini menghilangkan kekhawatiran pengguna karena pengguna melakukan kesalahan, maka aksi tersebut dapat di batalkan. Pembatalan ini mungkin dapat berupa pembatalan sebuah aksi, sekelompok data entri, ataupun sekelompok aksi. Berikan kontrol internal Pengguna cenderung merasa tahu dan mereka mampu mengendalikan sistem. Oleh karena itu desain yang baik harus memposisikan pengguna sebgaia inisiator ketimbang sepagai respoender dari sistem. Kurangi aktifitas mengingat. Keterbatasan manusia yang berkaitan dengan memori jangka pendek menuntut desainer sistem membuat antarmukayang sederhana. Sedapat mungkin user tidak perlu mengignat terlalu banyak.
General Principles of User Interface Design
Deborah J. Mayhew, memperkenalkan General Principles Of UI Design, atau Prinsip Umum Desain User Interface. Ada 17 prinsip yang harus dipahami para perancang sistem, terutama untuk mendapatkan hasil maksimal dari tampilan yang dibuat. 1. User Compatibility User Compatibility artinya kesesuaian tampilan dengan tipikal dari user. karena berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya, jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah atau tampilan orang dewasa. 114
Politeknik Telkom
Desain User Interface
2. Product Compatibility istilah ini mengartikan bahwa produk aplikasi yang dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa. baik untuk user yang awam maupun yang ahli. 3. Task Compatibility berarti fungsional dari task/tugas yang ada harus sesuai dengan tampilannya. misal untuk pilihan report, orang akan langsung mengartikan akan ditampilkan laporan. sehingga tampilan yang ada bukanlah tipe data (dari sisi pemrogram). 4. Work Flow Compatibility aplikasi bisa dalam satu tampilan untuk berbagai pekerjaan. Jika tampilan yang ada hanya untuk satu pekerjaan saja. misal untuk kirim mail, maka kita harus membuka tampilan tersendiri untuk daftar alamat. 5. Consistency Konsisten. Contohnya, jika anda menggunakan istilah save yang berarti simpan, maka gunakan terus istilah tersebut. 6. Familiarity Icon disket akan lebih familiar jika digunakan untuk perintah menyimpan. 7. Simplicity aplikasi harus menyediakan pilihan default untuk suatu pekerjaan. 8. Direct Manipulation manipulasi secara langsung. misalnya untuk mempertebal huruf, cukup dengan ctrl+B. 9. Control berikan kontrol penuh pada user, tipikal user biasanya tidak mau terlalu banyak aturan. 10. WYSIWYG What You See Is What You Get, buatlah tampilan mirip seperti kehidupan nyata user. dan pastikan fungsionalitas yang ada berjalan sesuai tujuan. 11. Flexibility tool/alat yang bisa digunakan user. jangan hanya terpaku pada keyboard atau mouse saja. 12. Responsiveness tampilan yang dibuat harus ada responnya. misal, yang sering kita lihat ketika ada tampilan please wait... 68%...
Prinsip Desain
115
Politeknik Telkom
Desain User Interface
13. Invisible Technology user tidak penting mengetahui algoritma apa yang digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst) 14. Robustness handal. Dapat mengakomodir kesalahan user. jangan malah error, apalagi sampai crash. 15. Protection melindungi user dari kesalahan yang umum dilakukan. misalnya dengan memberikan fitur back atau undo. 16. Ease of Learning aplikasi. mudah dipelajari. 17. Ease of use aplikasi harus mudah digunakan
5.5
Object Oriented User Interface from IBM
IBM memiliki prinsip-prinsip desain, yang diturunkan dari prinsip desain klasik dengan perluasan yang mengkaitkan dengan antrmuka modern berdasarkan pengalamannya pada object-oriented user interface (OOUI. Prinsip-prinsip tersebut adalah sebagai berikut.
116
1.
Kesederhanaan: Tidak menabaikan usability demi fungsionalitas tertentu. Antarmuka yang baik harus tetap menjaga kesederhanaan. Sebuah fungsionalitas yang handal namun sangat sulit untuk digunakan tetap saja merupakan hal yang tidak disukai pengguna. Untuk fungsi-fungsi dasar, harus segera terlihat oleh pengguna sedangkan fungsi lanjutan dapat diberikan menu pilihan tersendiri. Namun harus senantiasa diuhakan bahwa akses terhadap suatu fungsi memerlukan langkah seminimum mungkin.
2.
Support: pengguna tetap terkendali melalui panduan proaktif. User senantiasa tetap dalam kendali. Keadaan sistem senantiasa terkendali dan stabil. Apabila itnerkasi dihentikan, user dapat memeperoleh sistem seperti keadaan saat dihaentikan, misalnya user meninggalkan pekerjaanya sejam atau seharian.
Politeknik Telkom
Desain User Interface
3.
Familiarity: Bangun pemahaman pengguna. Interaksi yang didasarkan pengalaman pengguna akan suatu sistem akan sangat membantu dalam interaksi pada suatu sistem baru. Pengalaman ini dapat berasal dari pengalaman sehari-harinya maupun pengalaman menggunakan sistem yang lain.
4.
Obviousness: Buat Objek fungsinya dapat terlihat dan intuitif. Berbagai macamrepresentasi objek dapat di ambil dari dunia nyata. Misalnya lamabang disket, mengindikasikan bahwa ikon tersebut digunakan untuk menyimpan data. Contoh lainnya ikon telephone, artinya pengguna dapa melakukan panggilan dengan menggunakan menu tersebut.
5.
Encouragement: Buat aksi dapat diperkirakan hasilnya dan dapat dibatalkan. Berbagai aksi pengguna harus menghasilkan hasil sebagaimana yang diinginkan pengguna. Untuk itu desainer harus memahami benarbenar pekerjaan pengguna, tujuannya, dan model mentalnya. User dapat memperkirakan hasil atau akibat dari berbagai macam tindakan yang dilakukannya pada sistem. Apabila hasilnya tidak seperti yang diharapkan, pengguna harus diberi kesempatan untuk membatalkan aksi tersebut, dan keadaan dipulihkan seperti sedia kala.
6.
Satisfaction: Berikan pencapaian progress Setiap aksi yang dilakukan user, berikan informasi yang cukup kepada user mengenai aksi yang telah ia lakukan. Misalnya saat user mengubah jenis font, maka jenis font yang diubah harus segera di tampilkan agar user dapat segera mengevaluasi apakah font yang dipilih cocok atau tidak. Apabila user tidak cocok dengan font baru tersebut, maka dapat segera di ambil keputusan untuk mengubah font kembali. Contoh lain, apabila user mendelete file, maka setelah operasi penghapusan, file tersebut harus hilang dari daftar file dengan segera. Contoh penampilan progress adalah progress bar saat mendownload file atau menginstall suatu aplikasi.
Prinsip Desain
117
Politeknik Telkom
Desain User Interface
7. Accessibility: Buat semua object dapat di akses setiap saat. Pengguna harus dapat mengakses semua objek setiap saat. Hindari sedapat mungkin adanya 'mode' dalam penggunaan aplkasi yang menyebabkan perbedaan state pada interface. Misalnya adanya menu yang tidak berjalan karena masalah hak akses, atau pesan "no longer available". 8.
Safety: Pastikan pengguna terbebas dari masalah. Pengguna harus dilindungi dari kemungkinan melakukan kesalahan. Pencegahan kesalahan ini sangat dintentukan oleh desain dari sistem yang dibangun. Berbagai macam pencegahan kesalahan dapat dilakukan denga pemberian alaternatif nilai masukan melalui combo box, dropdwon, check box, radio button, autocomplete, dan sebagainya.
9.
Versatility: Berikan alternatif teknik interaksi. Berikan kesempatan kepada pengguna untuk menentukan teknik interkasi yang paling sesuai dengan keadaanya. Antarmuka yang flexible akan sangat membantu pengguna pada berbagai macam tingkatan keahlian, sering tidaknya berinteraksi, atau lingkungan penggunaan. Misalnya seorang pengguna yang sudah mahir dalam operasi file, lebih menyukai command line dari pada interkasi melalui window. Dalam beberapa kasus, operasi command line lebih cepat dari pada operasi dengan menggunakan window. Contoh lainnya adalah pembangunan query database. Query dapat dilakukan dengan menggunakan tool atau dapat dibangun sendiri melalui console. Berbagai macam piranti akan optimal untuk pengguna tertentu tergantung siatuasi dan kondisinya. Misalnya microphone yang digunakan pada aplikasi speech recognition akan sangat membantu pada model entri secara hands-free.
10. Personalization: Berikan kesempatan pengguna untuk kustomisasi Interface yang baik memberikan kepada pengguna melakukan kustomisasi dengan antarmukanya. Tidak ada seroang pengguna pun yang memiliki kesamaan selera dalam semua hal. Melalui kustomisasi akan membuat pengguna merasa nyaman. Melalui personalisasi dapat meningkatkan produktifitas. Misalnya adanya pengaturan nilai default dapat mempercepat proses input. 118
Politeknik Telkom
Desain User Interface
11. Affinity: Sesuaikan objek dengan kehidupan nyata melalui desain visual Dengan desain visual pada antarmuka, pengguna dapat meningkatkan kualitas interaksi bersama sama dengan prinsip desain yang lain. Desai visual yang dibangun harus mencerminkan model pengguna dan juga fungsi yang diberikan tanpa menimbulkan ambiguitas.
Prinsip Desain
119
Politeknik Telkom
Desain User Interface
Rangkuman
1.
Prinsip desain merupakan panduan agar dipereoleh performansi interaksi yang optimal. 2. Dialog sebaiknya sederhana dengan bahasa yang dipahami pengguna. 3. Desain senatiasa konsisten dengan urutan langkah, aksi, perintah, layout, dan terminologi sehingga antarmuka yang ada dapat segera dimengerti oleh pengguna 4. Desain sebagikanya memberikan feedback yang informatif, khususnya untuk aksi yang jarang dan penting. 5. Sedapat mungkin penggunaan ingatan pengguna diminimalkan. 6. Pengguna sedapat mungkin dapat melakukan langkah mundur (undo) 7. Langkah operasi /akses suatu fungsi harus seminimal mungkin, misalnya menggunakan short cut. 8. Berikan kesempatan kepada pengguna untuk mengontrol sistem. 9. Deasin yang handal harus mencegak kesalahan penggunaan sedini mungkin. 10. Desain yang baik harus terdokumentasi dan dapat dibaca dengan mudah oleh penggguna sebagai user manual.
120
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Button untuk sebuahfungsi yang sama sebaiknya berbeda untuk tiap windows aplikasi. 2. Panjang Button sebaiknya mengikuti panjang teks button. 3. Sebuah aplikais perlu merancang antarmuka sendiri, tidak perlu memperhatikan antarmukan yang sudah ada. 4. Berikut ini bentuk urutan opsi yang lazim.
5. Berikut ini bentuk urutan opsi yang lazim.
6. Berikut ini adalah input tanggal yang baik.
7. Antarmuka yang canggih lebih sulit digunakan. 8. Antarmuka yang bagus memerlukan waktu pebelajaran yang semakin lama. 9. User harus banyak mengingat agar dapat menggunakan sistem dengan baik. 10. Warna background oranye sangat cocok untuk teks berwarna kuning.
Prinsip Desain
121
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
A. B. C. 2.
Berikut ini adalah beberapa program keuangan yang sedang dipelajari oleh seorang user untuk sebuah fitur yang sama. Aplikasi Waktu Belajar I 5 menit II 10 menit III 12 menit IV 20 menit V 30 menit Ditinjau dari konsep interaksi antarmuka, aplikasi yang paling baik adalah aplikasi no __________ I D IV II E. V III Berikut ini Font yang tepat digunakan untuk registrasi sebuah account Bank adalah:
1. Nama Gadis Ibu Kandung 2. Nama Gadis Ibu Kandung
3. Nama Gadis Ibu Kandung
4. Nama Gadis Ibu Kandung A. B. C.
122
1,2,3 1,3 2,4
D. E.
4 1,2,3,4
Politeknik Telkom
Desain User Interface
3.
Dari ketiga macam inputan tanggal di atas, urutan dari yang paling buruk sampai yang paling baik adalah_________ A. B. C.
I-II-II III-II-I II-III-I
D. E.
II-I-III I-III-II
4.
Susunan menu yang paling baik adalah _______
A. D. B. E. C. 5.
Pengguna harus dapat mengakses semua objek setiap saat. Hindari sedapat mungkin adanya 'mode' dalam penggunaan aplkasi yang menyebabkan perbedaan state pada interface. Misalnya adanya menu yang tidak berjalan karena masalah hak akses, atau pesan "no longer available". Isu di atas berkaitan dengan______
Prinsip Desain
123
Politeknik Telkom
Desain User Interface
A. B. C.
Safety Support Personalization
6
Dari hal-hal berikut yang mempengaruhi user satisfaction adalah 1. Jenis font 2. Warna 3. Kemiripan dengan aplikasi lain secara umum 4. Kemudahan penggunaan
A. B. C.
1,2,3 1,3 2,4
7
Interaksi yang didasarkan pengalaman pengguna akan suatu sistem akan sangat membantu dalam interaksi pada suatu sistem baru. Pengalaman ini dapat berasal dari pengalaman sehari-harinya maupun pengalaman menggunakan sistem yang lain. Isu di atas berkaitan dengan ______
A B C
Affinity Familiarity Personalization
8.
Aplikasi yang pertama kali di install dan digunakan harus secepat mungkin dapat difahami oleh user berkaitan dengan cara menggunakannya. Hal ini berkaitan dengan ____
A B C
ease of learning ease of use satisfaction
9
Antarmuka input yang baik harus mencegah pengguna dari inputan yang salah yang dapat mengganggu sistem. Hal ini merupakan prinsip dari _____ Robustness D Satisfaction Simplicity Familiarity E Protection
A B C 124
D. Simplicity E. Accessibility
D. E.
D. E.
D E
4 1,2,3,4
Simplicity Obviousness
Support Familiarity
Politeknik Telkom
Desain User Interface
10
Untuk membuka Windows Explorer secara cepat pada Micrososft Windows dapat dilakukan dengan cara: 1. [Windows]+[e] 2. [Start] > [All Programs] > [Accessories] > Windows Explorer 3. Klik kanan [Start] > Explore...... 4. Klik kanan [Start] > Search.... 5. [Windows]+[d]
A B C
1 2 3
11
Pesan terbaik untuk memberi tahu bahwa nama yang dimasukkan salah karena tidak terdaftar di database adalah ______
D E
4 5
A. “Ah elo.... masukin nama aja salah! B. “Maaf, Anda telah memasukakan nama yang sepertinya kurang tepat untuk aplikasi ini. Pastikan kembali bahwa nama yang Anda masukkan benar sesuai nama yang terdaftar pada waktu registrasi, agar Anda dapat menjalankan program sistem informasi akademik ini dengan baik.” C. “Masukan Nama Salah!” D. “Nama Tidak Terdaftar!” E. “Masukanmu Salah!”
Prinsip Desain
125
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3. 4. 5.
126
Bagaimana suatu desain dikatakan baik atau buruk? Jelaskan! Sebutkan dan jelaskan prinsip desain dari Ben Shneiderman's dengan prinsipnya yang dikenal sebagai "Eight Golden Rules of Dialog Design"! Sebutkan dan jelaskan prinsip desain dari Deborah J. Mayhew's melalui "General Principles of User Interface Design"! Sebutkan dan jelaskan prinsip desain dari IBM's melalui "Design Principles for Tomorrow" ! Apa yang dimaksud dengan User Centered Design?
Politeknik Telkom
6
Desain User Interface
WINDOW & MULTIPLE WINDOW
Overview
Antarmuka sebuah aplikasi seringkali tidak cukup untuk dapat disajikan dalam sebuah halaman window. Untuk itu diperlukan kembali window lain yang berkaitan langsung dengan window utama. Melalui bab ini akan dibahas strategi untuk membangun multiple window.
Tujuan
1. 2.
Siswa memahami perlunya multiple window pada aplikasi tertentu. Siswa dapat merancang aplikasi multiple window dengan baik berdasarkan kaidah prinsip desain.
Window & Multiple Window
127
Politeknik Telkom
6.1
Desain User Interface
Persoalan pada Aplikasi Berbasis Window
Antarmuka Grafis telah menjadi antarmuka yang berkembang pesat saat ini. Antarmuka ini sangat mengedepankan pengolahan grafis untuk menyajikan berbagai aplikasi semenarik mungkin. Namun apabila ditelah lebih lanjut, dasar antarmuka ini adalah window aplikasi. Window menjadi tempat aplikasi bertumpu untuk berinteraksi dengan pengguna. Aplikasi berbasis antarmuka window pada kenyataanya memiliki beberapa kendala pada implementasinya diantaranya: - Pengguna memerlukan informasi dari window lain dengan cepat. - Pada window berukuran besar diperlukan pergerakan mata yang berefek pada visibility berbagai menu pada window tersebut. - Pada window kecil mengganggu ruang gerak bekerja. Berbagai persoalan di atas memerlukan strategi untuk membuat window yang memiliki komposis yang tepat sedemikian sehingga dapat mendukung kemudahan penyelesaian tugas pengguna.
6.2
Komponen Utama Window Sebuah window memiliki komponen dasar berikut: - Judul window Judul window memberikan informasi secara singkat mengenai fungsi suatu window. Boleh jadi sebuah window tidak memiliki judul, namun hal ini sangat tidak disarankan. Bar tempat judul berada dapat pula diberi indikator apakah window tersebut sedang aktif atau tidak. Indikator tersebut misalnya perubahan warna bar yang lebih terang untuk window yang sedang aktif. - Bingkai window Bingkai window (border atau frame) merupakan batas suatu window dengan lingkungannya (antarmukanya) - Scroll bar Merupakan kompone window yang berguna menggeser (ada yang menggunakan istilah menggulung) isi window ke atas/bawah maupun kiri/kanan. - Menu dasar window Menu dasar pada window merupakan menu untuk operasi window itu sendiri, misalnya maximize, minimize, close.
128
Politeknik Telkom
Desain User Interface
Judul window Menu dasar window
Scroll Bar Border/Frame
6.3
Operasi pada Window
Sebuah window dapat dilakukan bermacam operasi yang akan berefek kepada atribut window. Berikut ini beberapa operasi pada window yang sering digunakan. - Membuka Window Untuk membuka window suatu aplikasi dapat dilakukan dari menu atau short cut/icon melalui: Perintah yang diketik dan perintah baris Misalnya membuka aplikasi Run dilakukan dengan perintah [Ctrl] + [R]. Selanjutnya apabila dikehendaki window aplikasi DOS dapat dilakuan dengan perintah cmd (Enter).
Window & Multiple Window
129
Politeknik Telkom
Desain User Interface
Perintah suara Perintah dengan menggunakan suara merupakan implementasi dari Speech Recognition dan akan menjadi topik lanjut dari mata kuliah ini. Untuk dapat menerapkan perintah ini, desainer sistem harus memastikan bahwa komputer yang digunakan memiliki sepsifikasi yang cukup untuk dapat menjalankan Klik Klik ganda Membuka window dengan mengklik menu atau mengklik ganda icon merupakan pilihan yang paling umum. Namun dmeikina untuk kedaan tertentu pilihan lain merupakan pilihan yang lebih tepat, misalnya komputer untuk orang tuna netra, maka pilihan dengan perintah suara merupakan pilihan yang paling tepat (walaupun bentuk window dan isinya sendiri tidaklah penting bagi user tersebut). -
Menempatkan dan menentukan ukuran window Window yang akan ditampilkan perlu diperhatikan posisi dan ukurannya. Desainer harus menentukan apakah window yang ditampilkan full screen atau tidak. Apabila tidak full screen, maka harus ditentukan pada posisi mana window akan ditampilkan. Secara umum, window akan ditampilkan secara full screen untuk pertama kalinya. Pada awal aplikasi sering pula dijumpai dimana pengguna diminta memasukkan user id dan password. Kedua macam isian ini sangat sedikit memakan ruang window. Untuk itu diperlukan keseimbangan dan keserasian dalam penyajiannya. Misalkan dengan menambahkan gambar latar tipis atau banner pada halaman window tersebut.
Sederhana namun kaku 130
Politeknik Telkom
-
-
-
6.4
Desain User Interface
Mengubah ukuran window Window yang telah ditampilkan perlu diperhatikan apakah pengguna diperkenankan untuk mengubah ukurannya atau tidak. Secara umum user dapat mengubah ukuran window tersebut, namun untuk beberapa kasus window tidak boleh di ubah untuk memastikan bahwa informasi dari window tersebut sampai secara utuh sebagai satu kesatuan. Beberapa saran berkiatn dengan pengubahan window. Window ditampilkan pada ukruan dan tempat terakhir kali dilakukan perubahan. Mempertimbangkan window-window lain yang sudah dibuka Sebaiknya diletakkan di daerah fokus Untuk window pesan (alert, message) ditampilkan secara otomatis Memindahkan window Pada operating system terntentu window dapat dipindah dengan mendrag pada title bar -nya. Mengaktifkan window. Menutup window. Umumnya window dapat aktif dengan mengklik sembarang di atas window yang tidak aktif. Untuk berpindah ke window lain pada OS Windows, dapat dilakukan dengan short cut [Alt] + [Tab].
Multipe Window
Seringkali berbagai macam informasi yang hendak disampaikan ke pengguna tidak cukup disajikan dalam sebuah window. Dalam hal tertentu pula, informasi perlu dijadikan sebagai window bertingkat, artinya isi dari suatu window bergauntung dari keadaan (state) window yang lain. Berbagai macam cara dilakukan untuk memberikan informasi kedalam window lebih dari satu buah, diantaranya: - Multiple monitor Dengan cara ini, berbagai macam informasi dapat disjaikan sekaligus. Misalnya pusat secutiry dapat melihat seluruh ruangan dan lorong dengan melihat monitor CCTV dimana tiap CCTV satu monitor. Pada model ini, jarak antar monitor sangat mempengaruhi kinerja pengguna. Perindahan mata, atau bahkan arah duduk dapat mengganggu fisik pengguna untuk jangka pengamatan yang lama. - Rapid display flipping Window & Multiple Window
131
Politeknik Telkom
Desain User Interface
Merupakan teknik untuk menampilkan secara bergantian isi dari monitor. Penggantian isi tampilan secara cepat dapat dilakukan dengan otomatis maupun diatur oleh pengguna. - Split window Cara ini dilakukan dengan membagi dua atau lebih suatu window. - Cascades Cara ini dilakukan dengan mengurutkan window secara berundak dari atas ke kanan bawah atau dari kiri bawah ke kanan.
6.5
Koordinasi pada Multipe Window
Untuk mengkoordinasi multiple window dapat dilakukan dalam berbagai cara, diantaranya: - Synchronized scrolling Langkah ini dilakukan dengan sinkronisasi dua buah scroll bar pada window yang berbeda. Pergerakan scroll bar satu akan mempengaruhi scroll bar yang lain. Model ini sudah banyak digunakan, misalnya pada Microsoft Power Point.
132
Politeknik Telkom
Desain User Interface
- Hierarchical browsing Cara kerja teknik ini adalah pilihan pada satu window akan menyebabkan window lainnya berubah content-nya berdasarkan urutan tertentu. Misalnya Windows Explorer.
Window & Multiple Window
133
Politeknik Telkom
Desain User Interface
- Two dimensional browsing Cara ini umumnya diimplementasikan pada peta, grafik, foto atau gambar. Pemilihan suatu area akan ditampilkan detilnya di window yang lain.
134
Politeknik Telkom
Desain User Interface
- Dependent windows opening Cara ini dilakukan dengan menampilkan window-window lainnya yang berkaitan secara berdekatan.
Window & Multiple Window
135
Politeknik Telkom
Desain User Interface
Rangkuman
1. 2. 3. 4. 5. 6. 7.
136
Secara umum window memiliki judul, bingkai, scroll, dan menu dasar Window berukuran lebar dapat memperlambat kinerja user Window berukuran kecil mengganggu ruang gerak user Window dapat dibuka dengan cara perintah yang diketik, perintah suara, klik, dan klik ganda Window Aplikasi dapat dibuka melalui ikon/shortcut aplikasi tersebut Multiple window dapat disasjikan dengan beberapa cara misalnya multiple monitor, rapid display flipping, split window, dan cascades. Koordinasi antar window dapat dilakukan dengan Synchronized scrolling, Hierarchical browsing, Two dimensional browsing, dan Dependent windows opening
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. 2. 3. 4. 5. 6.
Ukuran terbaik window sebuah aplikasi adalah memenuhi layar monitor. Window tanpa judul lebih baik dari pada yang menggunakan judul. Window dapat memiliki frame, dapat juga tidak. Aplikasi Windows Explorer dapat dibuka dengan Short cut Key Aplikasi Microsoft Word dapat dibuka dengan perintah baris. Perintah suara untuk membuka window aplikasi melibatkan teknologi Text To Speech 7. Pada Operating System Microsoft Windows, sebuah window dapat diaktifkan dengan mengklik sembarang tempat pada area window tersebut. 8. Pada Operating System Microsoft Windows, sebuah window dapat digeser dengan men-drag title bar-nya. 9. Rapid Display Flipping dapat menyebabkan mata cepat lelah. 10. Window pada WinAmp selalu berbentuk kotak.
Window & Multiple Window
137
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Ukuran window yang besar dapat mempengaruhi ______
A. B. C.
D . E.
Luminans Kekontrasan Kecerahan
Visibiliti warna
2.
1. Window yang besar dapat menurunkan visibiliti 2. Window yang besar dapat menaikkan visibiliti 3. Window yang besar dapat menaikkan kekontrasan 4. Window yang besar dapat menurukan kekontrasan Pernyataan yang benar adalah _____
A. B. C.
1,2,3 1,3 2,4
D. E.
1,2 1,2,3,4
3.
1
2
3
Title Bar ditunjukkan oleh nomor _________ 138
4
5
Politeknik Telkom
Desain User Interface
A. B. C.
1 2 3
4.
Menu dasar window ditunjukan oleh nomor_______
A. B. C.
1 2 3
5.
1. Perintah suara 2. Klik Ganda Ikon 3. Perintah batin Untuk membuka window aplikasi dpat dilakukan dengan cara: i atas berkaitan dengan______
A. B. C.
1 2 3
6
Dari cara membuka aplikasi berikut: 1. Perintah baris 2. Perintah suara 3. Klik Menu Urutan dari yang paling kuno ke yang paling modern adalah ______
A. B. C.
1,2,3 1,3,2 2,3,1
7
Pada Microsoft Windows, perintah key untuk menurtup window aplikasi adalah ______
A B C
[Ctrl] + [F4] [Ctrl] + [F2] [Alt] + [F4]
Window & Multiple Window
D. E.
D. E.
D. E.
D. E.
D. E.
4 5
4 5
1,2 1,3
2,1,3 3,2,1
[Ctrl] + [Alt] + [Del] [Alt] + [Tab]
139
Politeknik Telkom
Desain User Interface
8.
Cara menampilkan banyak dengan mengurutkan window secara berundak dari atas ke kanan bawah atau dari kiri bawah ke kanan disebut _______
A B C
Multiple monitor Rapid display flipping Split window
9
Teknik untuk menampilkan secara bergantian isi dari monitor disebut________ Multiple monitor D Tiling Rapid display flipping E Cascade Split window
A B C 10
D E
Tiling Cascade
Microsoft Powerpoint membagi window seperti berikut:
Scrolling window sebelah kiri mengakibatkan scrolling disebelah kanan. Cara ini merupakan bentuk koordinasi dari_______ A B C
140
Synchronized scrolling Two dimensional browsing Hierarchical browsing
D E
Dependent windows opening Independent windows Opening
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3. 4. 5. 6. 7. 8.
Sebutkan masalah yang timbul apabila window aplikasi berukuran kecil! Sebutkan masalah yang timbul apabila window aplikasi berkukuran besar! Sebutkan keuntungan yang diperoleh apabila window aplikasi berukuran kecil! Sebutkan keuntungan yang diperoleh apabila window aplikasi berkukuran besar! Sebutkan komponen-komponen pada window! Sebutkan dan jelaskan operasi-operasi pada window! Sebutkan dan jelaskan cara-cara penyajian window lebih dari satu! Sebutkan dan jelaskan cara koordinasi antar window!
Window & Multiple Window
141
Politeknik Telkom
Desain User Interface
7
FORM
Overview
Berbagai macam aplikasi khususnya yang berkaitan dengan Sistem Informasi, melakukan interaksi dengan pengguna melalui media form. Form merupakan halaman yang terdiri dari sekumpulan isian. Form Pada komputer merupakan bentuk transformasi dari form manual (borang). Hal mendasar dalam form elkteronik adalah penjagaan integritas data. Berbagai macam isian user harus diusahakan sevalid mungkin. Namun demikian tampilah form yang baik tetap harus memperhatikan estetika dalam pembuatannya. Melalui bab ini akan dibahas strategi pembuatan form pada aplikasi berbasis antarmuka grafis.
Tujuan
1. 2.
142
Siswa mengetahui desain form yang baik. Siswa dapat merancang form yang baik.
Politeknik Telkom
7.1
Desain User Interface
Panduan Pembuatan Form
Panduan pembuatan form, pada dasarnya merupakan penjabaran teknis dari prinsip desain. Panduan pembuatan form berikut merupakan panduan untuk aplikasi berbasis web, namun demikian untuk aplikasi desktop pun panduan berikut masih relevan. Perbedaan yang timbul hanyalah pada tataran implementasi. Misalnya pada aplikasi berbasis web, pengaturan warna lebih dan style diimplementasikan dengan menggunakan CSS. Berikut ini merupakan panduan dalam pembuatan form yang dapat membantu pada saat mendesain form. 1. Sederhanakan desain form melalui pengaturan ruang dan pengelompokkan 2. Sediakan label yang lugas pada setiap elemen dan tempatkan dengan baik 3. Tingkatkan tampilan dengan teknologi yang mendukung 4. Cegah kesalahan dan berikan sarana recovery apabila terjadi kesalahan.
7.2
Sederhanakan Desain Form
Untuk mendesain form yang sederhana melalui pengaturan ruang dan pengelompokan, berikut ini merupakan hal-hal yang harus diperhatikan untuk mewujudkannya. Form dengan layout yang baik akan berdampak kepada kemudahan dalam penggunaan. Sebaliknya Form yang buruk hanya akan memberikan kebingungan dan keruwetan bagi pengguna yang pada akhirnya menjadi pemicu kesalahan dalam pengisian form. Beberapa hal yang perlu diperhatikan dalam membuat form yang sederhana diantaranya: 1. Berikan isian yang memang diperlukan. 2. Buat alur yang jelas dalam pengisian form. a. Hindari bentuk multi kolom (isian yang sejajar) kecuali benar-benar diperlukan. b. Hindari ketidak rapihan dalam penampilan. 3. Kelompokkan item yang mirip dan urutkan sesuai logik. a. Berikan judul untuk setiap kelompok dan berikan perbedaan antara satu kelompok dengan kelompok yang lain. b. Bagi form yang panjang menjadi beberapa halaman sesuai urutan logik. i. Berikan progress pada tiap form , misalnya halaman 2 dari 5, langkah 3 dari 5, dsb. Form
143
Politeknik Telkom
4.
5.
144
Desain User Interface
ii. Berikan sarana untuk mundur ke isian sebelumnya. Letakkan label dekat dengan elemen isian dan hindari jarak yang terlalu jauh. a. Sebaiknya label rata kanan dan langsung berdampingan elemen input b. Label juga dapat diletakkan langsung di atas elemn input Gunakan elemen form sesederhana mungkin a. Opsi dropdown dapat meringkas sekumpulan pilihan yang panjang pada radio button. b. Apabila pilihan sedikit (berkisar 2 s.d. 6) maka pilihan dapat disajikan dengan radio button agar semua pilihan dapat segera terlihat oleh pengguna
Politeknik Telkom
Form
Desain User Interface
145
Politeknik Telkom
7.3
Desain User Interface
Sediakan Label yang Lugas pada Setiap Elemen
Kembali perlu ditekankan bahwa label sangat penting untuk sebuah form. Berikut ini panduan yang berkaitan dengan label: 1. Labeli setiap elemen 2. Gunakan Asosiasi yang jelas untuk setiap elemen. Misalnya Tanggal Lahir, disertai format penulisannnya. 3. Letakkan label pada tempat yang benar Untuk teks dan list down, berada di kiri atau diatas elemen. Untuk radio button dan check box berada di kanan. 4. Label harus jelas dan tidak memberikan peluang adanya ambiguitas.
146
Politeknik Telkom
7.4
Desain User Interface
Cegah Kesalahan dan Berikan Sarana Recovery R ecovery
Salah satu prindsip dasar yang harus didukung oleh antarmuka yang baik adalah pencegahan kesalahan input oleh user. Hal-hal berikut ini dapat dijadikan dijadikan panduan untuk mengimplementasikan mengimplementasikan hal ini: 1. Berikan penekanan tentang informasi penting yang harus ada. a. Berikan indikator melalui kata, misalny a : “Harus ada”, “Required”. b. Apabila isian yang harus ada jumlahnya banyak, berikan tanda “*” dan beri keterangan arti tanda “*” c. Berikan penjelasa yang lugas sehingga tidak ada makana ganda. Sebagai contoh penggunaan kata „field‟. Bagi orang yang sudah faham database, istilah filed tidak ada masalah, namun bagi kebanyakan orang, field difahamai sebagai tempat sapi merumput. 2. Berikan penjelasan dan instruksi singkat tetapi jelas di awal form. Beberapa penjelasan penjelasan yang dapat diberikan di awal antar lain. a. Tujuan form Form
147
Politeknik Telkom
3.
4.
148
Desain User Interface
b. Jumlah halaman form form c. Peringatan pentingnya beberapa informasi yang harus tersedia agar aplikasi dapat berjalan dengan baik. d. Peringatan mengenai batasan wakatu pengisian (expired), kemungkinan time out, dan sebagainya. Pencegahan kesalahan sedini mungkin. Pencegahan dilakukan semenjak user memasukkan data ke form. Beberapa contoh misalnya: a. Inputan User ID tidak mengijinkan karakter selain alfabet dan numerik ditambah karakter titik (.), underscore (_) (_) dan dash (-). Ketika user mengetikkan karakter tersebut otomatis tidak dimunculkan di inputan. b. Inputan Nomor Pelanggan tidak mengjinkan adanya karakter selain numerik. c. Pemeriksaan Pemeriksaan terhadap instruksi berbahaya. Misalnya inputan teks tertentu dapat disisipi SQL (SQL Injection) yang dapat mengacaukan server. Contoh lainnya adalah perintah java script yang akan mengacaukan tampilan. Apabila user mencoba hal di atas segera dicegah dengan alert atau warning. Apabila terjadi kesalahan, berikan pesan secara jelas dan bermakna bagi pengguna.
Politeknik Telkom
Desain User Interface
Source: - http://accessit.nda.ie/web-resources/gui http://accessit.nda.ie/web-resources/guidance/developers/form dance/developers/forms/dev-7.1 s/dev-7.1 - http://accessit.nda.ie/web-resources/gui http://accessit.nda.ie/web-resources/guidance/developers/form dance/developers/forms/dev-7.2 s/dev-7.2 - http://accessit.nda.ie/web-resources/g http://accessit.nda.ie/web-resources/guidance/developers/fo uidance/developers/forms/dev-7.3 rms/dev-7.3 - http://accessit.nda.ie/web-resources/gui http://accessit.nda.ie/web-resources/guidance/developers/form dance/developers/forms/dev-7.4 s/dev-7.4
Form
149
Politeknik Telkom
Desain User Interface
Rangkuman
1. 2. 3. 4. 5. 6.
Form yang baik bersifat sederhana namun tidak kaku Pengaturan ruang (space) pada form mempengaruhi mempengaruhi baik tidaknya form Pengelompokan item dapat meningkatkan kualitas form Label harus ada pada setiap elemen input pada form Label harus diletakkan pada tempat yang sesuai. Teknologi bahasa pemrograman dapat dipergunakan untuk meningkatkan kualitas form 7. Form yang baik mencegah pengguna berbuat kesalahan 8. Teknologi pemrograman dapat digunakan untuk mencegah kesalahan pengguna dalam memamsukkan data 9. Recovery kesalahan harus disediakan apabila terjadi kesalahan yang tidak terhindarkan 10. Bahasa yang dipergunakan untuk pesan harus singkat, jelas, dan lugas.
150
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. 2. 3.
Semakin kompleks suatu form semakin baik form tersebut. Semakin canggih suatu form semakin sulit digunakan. Informasi tinggi badan seseorang merupakan informasi yang sangat penting pada form registrasi nasabah bank. 4. Dalam form biodata, Informasi Tempat dan Tanggal Lahir biasa disajikan setelah informasi Pendidikan yang telah ditempuh. 5. Nama, alamat, tempat tanggal lahir merupakan informasi yang yang dapat menjadi satu kelompok tertentu. 6. Riwayat organisasi biasa disajikan setelah informasi Riwayat Pendidikan. 7. Label elemen tidak terlalu penting pada sebuah form. 8. Asal propinsi seseorang, sebaiknya disajikan dalam pilihan radio button. 9. Pada survey kesenangan terhadap 10 jenis olah raga, bentuk check box bukan pilihan yang tepat karena opsi sudah lebih dari 7. 10. Pencegahan kesalahan senantiasa merepotkan user karena terlalu banyak aturan.
Form
151
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Form di atas __________ A. B. C. D. E.
Baik karena rapih Buruk karena tidak ada informasi yang mana yang wajib diisi Baik karena terurut logik Buruk karena label diletakkan bukan pada tempat yang tepat Baik karena jarak antara elemen input dengan tabel tidak terlalu jauh
2.
Isian yang berkaitan dengan tempat menempuh pendidikan dari tingkat dasar sampai tinggi dikategorikan dengan nama
A. B. C.
Riwayat Sekolah Riwayat Pendidikan Riwayat Kuliah
3.
Beriktut ini yang BUKAN merupakan data umum pribadi adalah
A. B. C.
Nama Alamat No. Telepon
4.
Berikut ini yang dapat dimasukkan pada inputan nama secara umum adalah
A B C
asa @gus Dela1977
152
D. E.
D. E.
D. E.
Riwayat Pelatihan Riwayat Gelar
Jenis Kelamin Indeks Prestasi
*agus Vera+Riandari
Politeknik Telkom
Desain User Interface
5.
Perpindahan dari isian satu field ke isian field berikutnya, secara umum dapat digunakan key ____
A B C
[Alt] [Alt]+[enter] [Enter]
6
Apabila form telah selesai diisi, maka untuk mensubmit-nya secara umum dapat digunakan key _____
A B C
[Alt] [Alt]+[enter] [Enter]
7
Isian Form reply berikut yang dapat mengganggu tampilan adalah
A B C
OK, pendapatmu Bagus Jo! Lihat nih
8 A B C
Apabila terjadi kesalahan inputan oleh user maka sitem harus ______ Berhenti D Memarahi user Menggantung (nge-hang ) Shut down E Recovery
9 A B C
Gangguan keamanan pada form berupa peritnah – perintah SQL melalui Form disebut ______ Worm D SQL Injection Virus SQL Programming E DOS
10 A B C
Form yang baik pasti ______ Nyaman digunakan Terdapat baraneka warna Terdapat baraneka macam font
Form
D E
D E
D E
D E
[Tab] [Alt]+[Tab]
[Tab] [Alt]+[Tab]
Bagus Banget... Trims ya Bo
Lebar Penuh multimedia
153
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3. 4. 5.
154
Apa yang dimakasud dengan form? Apa fungsi label pada form? Bagaimana pengelompokan item dalam form? Bagaimana cara mencegah pengguna berbuat kesalahan? Apa yang harus dilakukan sistem jika pengguna memasukkan data yang tidak dikehendaki?
Politeknik Telkom
Desain User Interface
8
HELP AND GUIDE
Overview
Salah satu hal penting dalam kualitas antarmuka adalah sedikitnya waktu untuk pembelajaran terhadap aplikasi baru (Time of learning ). Untuk memulai aplikasi user dapat melakukan coba-coba atau dengan melihat panduan aplikasi. Melalui bab ini akan dibahas pembangunan panduan untuk pengguna baik yang berbasis teks maupun video.
Tujuan
1. 2.
Siswa memahami pentingnya mempersingkat waktu pembelajaran. Siswa dapat merancang panduan yang baik berbasis teks maupun audio video.
Help and Guide
155
Politeknik Telkom
8.1
Desain User Interface
Help and Guide tidak penting?
Sebuah aplikasi yang masih baru tidak dapat secara langsung dipergunakan oleh pengguna. Sebelum pengguna menggunakan apikasi tersebut diperlukan proses belajar. Semakin sedikit waktu pembelajran semakin baik. Dalam proyek perangkat lunak, waktu belajar menjadi penting, karena waktu belajar yang lama hanya memboroskan waktu dan biaya. Untuk itu berbagai macam panduan diperlukan untuk menekan waktu belajar pengguna Sayangnya, ada kecenderungan bahwa pengguna malas membuka dokumen panduan. Sebagian besar lebih memilih coba-coba dan apabila menemui kesulitan barulah membuka dokumen panduan. Ada beberapa faktor yang membuat pengguna enggan mempergunakan dokumen Help and Guide, diantaranya sebagai berikut. 1. Panduan yang dibuat memiliki tampilan yang tidak menarik. 2. Panduan yang dibuat terlalu komplek, padahal pengguna hanya menginginkan satu atau beberapa fitur saja. 3. Ego pengguna, diamana pengguna cenderung merasa sok tahu terhadap suatu aplikasi.
8.2
Model Help and Guide
Help and Guide yang berkembang saat ini dapat dikategorikan kedalam beberapa model. Umumnya model tersebut tidak berdiri sendiri, boleh jadi suatu model merupakan gabungan dari model yang lain. Model tersebut diantarnya sebagai berikut. 1. Plain Text Model ini biasa terdapat pada paket instalasi, dimana diasumsikan aplikasi lain (penampil dokumen) belum terinstall. Bebragai macam nama sering digunakan untuk model ini antara lain o README.TXT o README.FIRST o INSTALL.TXT Model ini merupakan model yang paling sederhana yang terdiri dari dari palin text. Tips untuk model ini. o Buatlah sesingkat mungkin o Informasika hal-hal yang sangat penting saja, misalnya syaratsyarat apa saja yang harus ada sebelum instalasi dan ritual apa saja yang harus dijalani selama instalasi berlangusng. o Letakkan pada tempat yang mudah dijangkau oleh pengguna, misalkan pada driektori induk 156
Politeknik Telkom
Desain User Interface
o Tetap memperhatikan layout tampilan. Walaupun dibangun dari text editor yang sangat sederhana (bahkan primitif) tetap harus diperhatikan layout panduan teresbut, misalnya dengan tidak membiarkan teks memanjang kekanan.
Help and Guide
157
Politeknik Telkom
Desain User Interface
2. Frequently Asked Question (FAQ) Model ini merupakan panduan yang didasarkan pada permasalahan yang sering dijumpai oleh pengguna. Model ini berupa daftar berbagai macam pertanyaan beserta jawabannya. Model ini sering pula berbentuk sebagai Trobuble Shooting Guide, dimana isinya adalah penyelesaian terhadap masalah-masalah selama penggunaan aplikasi.
158
Politeknik Telkom
Desain User Interface
3. Document Guide Dokumen model ini biasanya berupa dokumen yang lebih resmi dan memiliki layout yang jauh lebih baik. Berbagai macam ilustrasi warna, font, gambar, dan citra sangat dominan dalam dokumen ini. Dokumen jenis ini ada ada yang melekat pada aplikasi dan ada yang terpisah. Panduan yang melekat pada aplikasi dapat langsung di akses dengan memilih menu Help.
Help and Guide
159
Politeknik Telkom
Desain User Interface
Panduan lain yang sekarang berkembang adalah dokumen .chm
160
Politeknik Telkom
Desain User Interface
Model chm merupakan model yang cukup baik menggambarkan struktur panduan. Model ini juga di adopsi menjadi model e-book seperti pada gambat di atas. 4. Audio Video Help Model ini merupakan model yang memadukan pengolahan grafis dan audio video, sehingga user cukup melihat „file‟ men genai aplikasi yang diajarkan. Model ini sangat tepat untuk dikempangkan pada training training. Model ini juga merupakan model panduan modern dimana kapasitas bandwtih dan memori bukanlah halangan utama. Bebagai macam tools berkembang untuk memperagakan penggunaan aplikasi secara langsung dari rekaman layar monitor (misalnya screencam, screen recorder, camsatasia, dal sebagainya), hingga pengolahan visualisasi tiga dimensi secara dinamis (misalnya flash).
Help and Guide
161
Politeknik Telkom
Desain User Interface
Rangkuman
1.
Tampilan panduan yang tidak menarik dapat menyebabkan user tidak mengindahkan panduan yang diberikan 2. Paduan yang terlalu komplek dapat menyebabkan user lebih memilih mencoba coba sendiri suatu aplikasi yang baru 3. Pengguna cenderung merasa sok tahu dan lebih menyukai mengeksplore terlebih dahulu daripada membaca panduan terlebih dahulu. 4. Panduan dalam bentuk plain text harus dibuat seringkas mungkin 5. Panduan dalam bentuk plain text hanya digunakan di awal sebelum instalasi dan memuat hal-hal yang penting saja. 6. Panduan dalam bentuk plain text tetap harus memperhatikan layout tampilan. 7. FAQ merupakan sekumpulan pertanyaan dan jawaban yang seringkali diajukan oleh pengguna 8. Trouble shooting dapat disajikan sebagai bentuk panduan FAQ. 9. Document guide memanfaatkan teknologi pengolah kata dan penampil dokumen untuk dapat menyajikan layotu yang baik melalui penataan warna, font, ruang, gambar,dan citra. 10. Panduan berbentuk audio video merupakan panduan yang paling mutahir dan dapat memvisualisasi secara langsung kasus-kasus yang hendak diajarkan.
162
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Panduan berbentuk plain text sudah kuno dan sudah tidak digunakan lagi. 2. Panduan berbentuk plain text tidak perlu memperhatikan layout tampilan 3. Panduan berbentuk palin text biasanya panjang dan rinci dalam menjelaskan hal tertentu. 4. Panduan berbentuk plain text perlu disertakan warna dan gambar. 5. Panduan dalam bentuk video memerlukan spesifikasi yang sama dengan panduan lainnya. 6. Panduan berbentuk .CHM terdiri dari tiga buah window. 7. Panduan berbentuk .chm dapat memuat gambar dan citra. 8. Panduan dokumen dapat dilihat langsung dari aplikasi yang sedang dijalankan. 9. Untuk keperluan training dan presentasi, panduan videolah paling jelas untuk menggambarkan fungsional aplikasi. 10. E-Book dapat disajikan dengan menggunakan .chm
Help and Guide
163
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Panduan yang paling modern adalah ______
A. B. C.
Plain text FAQ .CHM
D E.
Video Document guide
2.
README.FIRST merupakan panduan jenis ________
A. B. C.
Plain text FAQ .CHM
3.
Trouble shooting paling tepat disajikan dalam _________
A. B. C.
Plain text FAQ .CHM
4.
Pandun singkat bentuk______
A. B. C.
Plain text FAQ .CHM
5
Untuk mengisi acara training suau aplikasi keuangan pada sebuah bank, maka panduan yang paling tepat adalah
A. B. C.
Plain text FAQ .CHM
164
D. E.
Video Document guide
D. E.
sebelum
instalasi
D. E.
D. E.
Video Document guide
paling
tepat
dibuat
dalam
Video Document guide
Video Document guide
Politeknik Telkom
Desain User Interface
7
Buku ajar yang tersusun dalam beberapa bab dan sub bab lebih nyaman disajikan dalam ______
A B C
Plain text FAQ .CHM
8.
Yang menjadi ciri khas pada panduan palin text adalah
A B C
Karakter alfabet & alfanumerik Gambar Citra
9
Dari dokumen berikut yang tidak mendukung layout secara grafis dan warna adalah _______
A B C
Plain text FAQ .CHM
D. E.
D E
D. E.
Video Application Guide
Warna Grafik
Video Document guide
10
A B C
Panduan di atas termasuk jenis _____ Plain text D. Video FAQ E. Document guide .CHM
Help and Guide
165
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3. 4. 5.
Mengapa pengguna cenderung tidak menggunakan panduan? Jelaskan tentang panduan berbentuk Plain text! Jelaskan tentang panduan berbentuk FAQ! Jelaskan tentang panduan berbentuk Video! Jelaskan tentang panduan berbentuk .CHM!
166
Politeknik Telkom
Desain User Interface
9
TEXT TO SPEECH
Overview
Antarmuka modern telah berkembang sangat pesat. Hal ini didukung oleh disiplin ilmu di bidang ilmu komputer khususnya pengolahan bahasa alami. Salah satu teknologi pada pengolahan bahasa alami adalah Text To Speech. Melalui bab ini akan dibahas prinsip kerja Text To Speech dan bagaimana membuat aplikasi Text To Speech secara sederhana.
Tujuan
1. 2. 3.
Siswa memahami prinsip kerja Text To Speech. Siswa dapat merancang aplikasi yang menggunakan teknologi Text To Speech. Siswa dapat mengimplentasikan aplikasi yang memiliki fitur Text To Speech.
Text to Speech
167
Politeknik Telkom
9.1
Desain User Interface
Sejarah
Perkembangan teknologi untuk membuat ucapan manusia atau yang sering disebut sebagai teknologi pensitesa ucapan, telah mengalami perbaikan dari masa ke masa. Perkembangan ini dapat dibagi menjadi tiga generasi. Generasi pertama adalah sebelum tahun 1930. Pada masa ini penelitianpenelitian lebih banyak ditujukan untuk memahami karakteristik sinyal ucapan serta pengembangan pensintesa ucapan berbasis mekanik atau elektromekanik. Geenerasi kedia dimulai sejak tahun 1930-an sampai dengan ditemukannya komputer digital. Masa ini ditandai dengan pengembangan berbagai alat pensintesa ucapan menggunakan teknologi elektronik analog. Generasi ketiga dimulai sejak ditemukannya komputer digital hingga sekarang. Pada masa ini, sintesa ucapan dilakukan menggunakan pendekatan-pendekatan pemrosesan sinyal digital. Generasi Pertama Penelitian tentang ucapan dimulai dengan penelitian-penelitian untuk melakukan pemahaman tentang sinyal ucapan. Berikut ini perkembagannya.
Tahun 1779: Imperial Academy of St. Petersburg menyelenggarakan suatu kompetisi dengan tujuan untuk mengetahui hal-hal berikut. “What is the nature and character of the sounds of the vowels a, 1. e, i, o, u that make them different from one another ?” “Can an instrument be constructed like the vox humana pipes of 2. an organ, which shall accurate express the sounds of the vowels?” Seorang peneliti dari Rusia yang bernama Christian Gottlieb Kratzenstein memenangkan kompetisi tersebut dengan membuat satu set resonator akustik yang mensimulasikan mulut manusia. Resonator Kratzenstein terdiri dari 5 bentuk tabung, masing-masing untuk mensimulasikan satu bunyi vokal.
Resonator Kratzenstein Tahun 1892: Robert Willis mengubah sintesa Kratzenstein menjadi sebuah tabung tunggal yang dapat diatur panjangnya. 168
Politeknik Telkom
Desain User Interface
Tahun 1791: Wolfgang von Kempelen membuat pensintesa ucpan dengan menggunakan cara kerja seperti hembusan paru-paru, sebagaimana yang terjadi pada manusia.
Gambar 2. Model Kedua Pensintesa Ucapan Buatan Wolfgang von Kempelen Di Perancis, pada waktu yang hampir bersamaan dengan von Kempelen, Abbe‟ Mical mengembangkan mesin lain yang dikenal sebagai “two talking head”.
Hermann Helmholtz, seorang perintis peneliti akustik, pada pertengahan abad ke-19 membuat perangkat elektro-mekanik yang terdiri dari sejumlah garpu yang dapat ditala, kumparan elektrik, dan sejumlah resonator yang dapat mensintesa suara komposit yang sangat mirip suara vokal manusia. Perangkat ini mungkin tidak memperlihatkan hubungan langsung dengan berbagai penemuan alat-alat lainnya yang berhubungan dengan aplikasi suara, tetapi keberadaan mesin tersebut memberikan ilham bagi Alexander Graham Bell yang menghasilkan beberapa penemuan di bidang aplikasi mesin yang berhubungan dengan suara manusia. Text to Speech
169
Politeknik Telkom
Desain User Interface
Tahun 1835, Wheatstone mendemonstrasikan mesin pensintesa ucapan ciptaannya kepada Dublin Association.
Gambar 4. Versi Wheatstone dari Model Ketiga Pensintesa Ucapan Buatan Wolfgang von Kempelen [Pel93] Tahun 1863: Alexander Graham Bell dan dua saudaranya (Melly dan Ted) pernah melakukan pengembangan mesin yang dapat menirukan ucapanucapan manusia. Namun pada akhirnya Bell justru menemukan telepon. Generasi Kedua Tahun 1930: para peneliti mulai menggunakan model elektrik untuk analisis dan menirukan ucapan uaitu VODER. Gambar 6 memperlihatkan blok diagram VODER serta ekivalensinya dengan alat-alat ucap manusia. Suara bersumber dari dua buah sumber bunyi, yaitu : noise dan osilator. Sumber noise disediakan untuk mensintesa ucapan yang menyerupai noise, sedangkan osilator untuk ucapan lainnya. Frekuensi osilator dikendalikan oleh pedal. Frekuensi yang dihasilkan akan menentukan pitch dari bagian ucapan yang dihasilkan. Sumber yang dihasilkan akan dilewatkan pada sepuluh bandpass filter yang dihubungkan secara paralel dan masing-masing frekuensinya dapat diatur. Tiga pengatur lainnya disediakan untuk mengatur proses transien, yaitu untuk reproduksi konsonan stop, yaitu t, d, p, b, k, g.
170
Politeknik Telkom
Desain User Interface
Generasi Ketiga Tahun 1960-an: Teknik analisis dan sintesa ucapan terbagi menjadi dua paradigma. Pendekatan pertama disebut articulatory synthesis. Dalam pendekatan ini, mekanisme produksi ucapan dimodelkan secara fisiologi dengan cukup rinci. Pendekatan kedua adalah terminal-analogue synthesis. Pada pendekatan kedua ini, ucapan dimodelkan dengan model apapun. Text to Speech
171
Politeknik Telkom
Desain User Interface
Orientasinya lebih ditekankan pada usaha untuk memodelkan sinyal ucapan, bukan pada bagaimana cara membangkitkannya. Tahu 1990: Dennis Klatt pada mengembangkan Synthesizer bebasis komputer digital yang sudah dirancang oleh Klatt pada seja tahun 1980.
9.2
Text To Speech
Text To Speech (TTS) adalah suatu sistem yang dapat mengubah teks atau bahasa tulisan dalam suatu bahasa menjadi ucapan atau bahasa lisan dalam bahasa yang sama[3]. Prinsip Sistem TTS dapat dibagi menjadi dua yaitu: Konverter Teks ke Fonem (Text to Phoneme) Konverter Teks ke Fonem berfungsi mengubah kalimat masukan dalam suatu bahasa tertentu yang berbentuk teks menjadi rangkaian kode-kode bunyi yang biasanya direpresentasikan dengan kode fonem, durasi serta pitch-nya. Bagian ini bersifat sangat language dependant. Untuk suatu bahasa baru, bagian ini harus dikembangkan secara lengkap khusus untuk bahasa tersebut. Konverter Fonem to Ucapan (Phoneme to Speech). Konverter Fonem ke Ucapan akan menerima masukan berupa kodekode fonem serta pitch dan durasi yang dihasilkan oleh bagian sebelumnya. Berdasarkan kode-kode tersebut, bagian Konverter Fonem ke Ucapan akan menghasilkan bunyi atau sinyal ucapan yang sesuai dengan kalimat yang ingin diucapkan. Ada beberapa alternatif teknik yang dapat digunakan untuk implementasi bagian ini. Dua teknik yang banyak digunakan adalah - formant synthesizer Formant synthesizer bekerja berdasarkan suatu model matematis yang akan melakukan komputasi untuk menghasilkan sinyal ucapan yang diinginkan. Synthesizer jenis ini telah lama digunakan pada berbagai aplikasi. Walaupun dapat menghasilkan ucapan dengan tingkat kemudahan interpretasi yang baik, synthesizer ini tidak dapat menghasilkan ucapan dengan tingkat kealamian yang tinggi. - diphone concatenation Synthesizer yang menggunakan teknik diphone concatenation bekerja dengan cara menggabung-gabungkan segmen-segmen bunyi yang telah direkam sebelumnya. Setiap segmen berupa diphone (gabungan dua buah fonem). Synthesizer jenis ini dapat
172
Politeknik Telkom
Desain User Interface
menghasilkan bunyi ucapan dengan tingkat kealamian (naturalness) yang tinggi
9.3
Diphone Concatenation
Pembentukan ucapan pada pensintesa ucapan menggunakan metoda diphone concatenation pada prinsipnya dilakukan dengan cara menyusun sejumlah diphone yang bersesuaian sehingga diperoleh ucapan yang diinginkan. Sebagai contoh, pada gambar diperlihatkan pembentukan kata atau ucapan “komputer” yang disusun dari diphone -diphone /_k/, /ko/, /om/ dan seterusnya.
Gambar. Pembentukan Ucapan “komputer” dari Diphone -Diphone nya
Supaya pensitesa ucapan dapat mengucapkan semua kemungkinan kata atau kalimat yang ada dalam suatu bahasa, sehingga sistem tersebut harus didukung oleh diphone database yang terdiri dari semua kombinasi diphone yang ada dalam bahasa tersebut. Diphone concatenation engine atau unit pemroses diphone akan menerima masukan berupa daftar fonem yang ingin diucapkan, masing-masing disertai oleh durasi pengucapannya, serta pitch atau frekuensinya. Berdasarkan daftar Text to Speech
173
Politeknik Telkom
Desain User Interface
fonem yang diterima, unit ini akan menentukan susunan diphone yang sesuai. Selanjutnya, unit ini akan melakukan smoothing sambungan antar diphone, melakukan manipulasi durasi pengucapan serta manipulasi pitch (lihat Gambar di bawah). Pada akhirnya, diphone concatenation engine akan menghasilkan sinyal ucapan yang sesuai.
Gambar. Pembentukan Ucapan “komputer” dari Diphone -Diphone nya
Sejumlah teknik untuk pemrosesan diphone telah dikembangkan oleh berbagai pihak, diantaranya adalah autoregressive (AR), Glottal AR, hybrid harmonic/stocastic, time domain PSOLA (TD-PSOLA), multiband resynthesis-PSOLA (MBR-PSOLA), serta Linear Prediction-PSOLA (LPPSOLA) [Dut97]. Source : http://teknologibahasa.wordpress.com/2008/03/14/sintesa-ucapan-denganteknik-diphone-concatenation/
9.4
TTS Bahasa Indonesia
Pada saat ini telah ada TTS bahasa Indonesia yang dikenal dengan nama IndoTTS yang dikembangkan oleh Arry Akhmad Arman dosen Departemen Elektro Institut Teknologi Bandung (ITB)[2]. 174
Politeknik Telkom
Desain User Interface
IndoTTS dibangun dengan teknologi diphone concatenation, yaitu suatu teknik untuk membangkitkan ucapan dengan cara menyambungnyambung diphone yang direkam dari ucapan manusia. Diphone-diphone tersebut dikumpulkan dan disimpan di dalam sebuah diphone database yang dalam hal ini berupa diphone database bahasa Indonesia[2]. Diphone adalah dua fonem berurutan. Dari 35 fonem akan tercipta 1.296 diphone yang di dalamnya sudah termasuk diphone "silence" untuk awal dan akhir kata. Unit terkecil bentuk tulisan adalah huruf, sedangkan unit terkecil bentuk lisan adalah fonem. Fonem tidak identik dengan huruf, contohnya gabungan huruf "n" dan "g" akan menjadi fonem "ng". Karena hasil akhir TTS adalah berupa ucapan, maka yang menjadi fokus di dalam pengembangannya adalah fonem, bukan huruf. Di dalam bahasa Indonesia, fonem yang ada berjumlah 35 buah[2].
Setelah diphone database tersedia, maka IndoTTS siap bekerja. Rangkaian huruf yang dimasukkan akan diubah menjadi rangkaian fonem lengkap dengan durasi dan frekuensinya. Data-data tersebut kemudian diumpankan ke modul Mbrola, yaitu metode speech synthesizer (penyusunan ucapan) dengan menggunakan metode diphone produk Belgia, yang kemudian akan menyambung diphone sesuai dengan database yang disediakan serta
Text to Speech
175
Politeknik Telkom
Desain User Interface
memanipulasi durasi dan frekuensinya. Akhirnya, keluarlah ucapan dari IndoTTS yang beraksen Indonesia. Konfigurasi sistem IndoTTS ditunjukkan pada Gambar 2.1 berikut ini[2].
Gambar 2.1 Konfigurasi Sistem IndoTTS[2] IndoTTS juga dapat digabungkan dengan program lain yang berbahasa Borland Delphi, Visual Basic atau C++ dengan memanfaatkan System Development Kit (SDK) yang tersedia sehingga menghasilkan program aplikasi baru. Diagram pengembangannya adalah sebagai berikut[2].
Gambar 2.2 Diagram Pengembangan Aplikasi Menggunakan IndoTTS[2] 176
Politeknik Telkom
9.5
Desain User Interface
Pemrograman Menggunakan TTS Bahasa Indonesia
Untuk membangun aplikasi yang menggunakan TTS sangatlah mudah. Dr Ary Akhmad Arman telah membuat library yang dapa dipergunakan secara bebas sepanjang tidak untuk komersial. Libary Indo TTS dapat di downlad di..... Untuk menggunakan library ini sangatlah mudah. Langkah pertama adalah menginstall MBROLA terlebih dahulu. Installer ini dapat didownload secara bebas di internet. Selanjutnya saat membuat program yang menggunakan modul TTS. Cukup memanggil library IndoTTS. Sebagai contoh pada pemrograman Delphi cukup menambahkan deklarasai seperti pada potongan berikut.
unit Unit1; //Unit 1 merupakan implementasi dari Form 1 pada Project1 interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, Buttons, ITTS_DLL_Interface, ExtCtrls, Qt; //Nama library yang digunakan pada unit ini type TForm1 = class(TForm) BitBtn1: TBitBtn; BitBtn2: TBitBtn; BitBtn3: TBitBtn; BitBtn4: TBitBtn; Memo1: TMemo; BitBtn7: TBitBtn; Image1: TImage; Label1: TLabel;
//..... dan seterusnya
Pada deklarasi tersebut, program memanggil library IndoTTS dengan menyertakan ITTS_DLL_Interface. Dengan menggunakan library ini, pemrogram terbebas dari kerumitan pemrosesan TTS itu sendiri. Namun Text to Speech
177
Politeknik Telkom
Desain User Interface
untuk dapat memodifikasi intonasi, lama ucapan fonem, dan sebagainya pemrogram tetap memerlukan pengetahuan bagaimana TTS dibangun dan bagaimana sinyal ucapan direpresentasikan. Untuk mencoba menjalankan TTS, cukup dipanggil prosedur IndoTTS_Say().
procedure TForm1.BitBtn1Click(Sender: TObject); { I.S. : Button1 di klik, IndoTTS siap membacakan Teks. Terdapat File yang siap di-load untuk mengisi Memo1 F.S. : IndoTTS membacakan teks yang berada pada Memo1 } begin Memo1.Visible:=True; BitBtn7.Visible:=True; Memo1.Lines.LoadFromFile('pol.txt'); IndoTTS_Say(PChar(Memo1.Text)); end;
Pada Prosedur di atas, parameter teks di ambil dari teks yang berada pada Memo1. Ketika BitBtn1 diklik. Maka IndoTTS akan mulai membacakan teks yang berada pada Memo1.
procedure TForm1.BitBtn1Enter(Sender: TObject); { I.S. : Button1 di aktif, IndoTTS siap membacakan Teks F.S. : IndoTTS membacakan teks yang berada pada parameter IndoTTS_Say. } begin IndoTTS_Say('Berita Politik'); end;
Pada Prosedur di atas, parameter teks di ambil dari teks yang diberikan secara langsung. Teks dalam parameter tersebut akan secara langsung dibaca oleh IndoTTS dan terdap at output suara ucapan “ Berita Politik” ketika BitBtn1 aktif.
178
Politeknik Telkom
Desain User Interface
Untuk mengehentikan pembacaan yang dilakukan oleh IndoTTS digunakan prosedur IndoTTS_SpeakOFF().
procedure TForm1.BitBtn7Click(Sender: TObject); { I.S. : IndoTTS sedang aktif memabacakan Teks. F.S. : IndoTTS menghentikan pembacaan Teks. } begin IndoTTS_SpeakOFF; end;
Text to Speech
179
Politeknik Telkom
Desain User Interface
Rangkuman
1. 2.
Sejarah TTS dapat dikategorikan menjadi tiga generasi Generasi pertama difokuskan kepada alat yang dapat mengahsilkan suara manusia secara mekanik 3. Generasi pertama difokuskan kepada alat yang dapat mengahsilkan suara manusia secara elektrik 4. Generasi pertama difokuskan kepada alat yang dapat mengahsilkan suara manusia secara digital dengan salah satu paradigma yang berkembang adalah pemodelan sinyal ucapan 5. Text To Speech (TTS) adalah suatu sistem yang dapat mengubah teks atau bahasa tulisan dalam suatu bahasa menjadi ucapan atau bahasa lisan dalam bahasa yang sama. 6. Prinsip Sistem TTS dapat dibagi menjadi dua yaitu: Konverter Teks ke Fonem dan Konverter Fonem to Ucapan 7. Konverter Teks ke Fonem berfungsi mengubah kalimat masukan dalam suatu bahasa tertentu yang berbentuk teks menjadi rangkaian kode-kode bunyi yang biasanya direpresentasikan dengan kode fonem, durasi serta pitch-nya. 8. Konverter Fonem ke Ucapan akan menerima masukan berupa kodekode fonem serta pitch dan durasi yang dihasilkan oleh bagian sebelumnya. 9. Formant synthesizer bekerja berdasarkan suatu model matematis yang akan melakukan komputasi untuk menghasilkan sinyal ucapan yang diinginkan. 10. Synthesizer yang menggunakan teknik diphone concatenation bekerja dengan cara menggabung-gabungkan segmen-segmen bunyi yang telah direkam sebelumnya.
180
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Pekembangan pensintesa ucapan sudah berkembang sejak ratusan tahun silam. 2. Pengolahan sintesa ucapan secara digital sudah berkembang sejak tahun 1779. 3. Resonator Kratzenstein merupaka pensintesa ucapan yang pertama. 4. Resonator Kratzenstein diperkenalkan pada perlombaan di Imperial Academy of St. Petersburg. 5. Voder merupapakan pensintesa ucapan pada generasi kedua. 6. Pada articulatory synthesis, mekanisme produksi ucapan dimodelkan secara fisiologi dengan cukup rinci. 7. Pada terminal-analogue synthesis, ucapan dimodelkan dengan model apapun. 8. Dennis Klatt memperkenalkan pensintesa ucapan berbasis digital. 9. TTS bahasa indonesia menggunakan diphone database Belgia 10. Diphone database bahasa Indoensia dibuat pertama kali oleh Arry Akhmad Arman.
Text to Speech
181
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Perkembangan pensintesa ucapan pertama kali dimulai dari penemuan ________
A.
Arry Akhmad Arman
B. C.
Alexander Graham Bell Dennis Klatt
D . E.
Wolfgang von Kempelen Kratzenstein
2.
Berikut ini adalah model pensintesa ucapan dari ______
A. B. C.
Hermann Helmholtz Alexander Graham Bell Dennis Klatt
3.
Berikut ini adalah model pensintesa ucapan dari ______
182
D. E.
Wolfgang von Kempelen Kratzenstein
Politeknik Telkom
Desain User Interface
A. B. C.
Hermann Helmholtz Alexander Graham Bell Dennis Klatt
4.
Berikut ini adalah model pensintesa ucapan dari ______
A. B. C.
Hermann Helmholtz Alexander Graham Bell Dennis Klatt
5.
Berikut ini adalah model pensintesa ucapan dari ______
Text to Speech
D. E.
D. E.
Wolfgang von Kempelen Kratzenstein
Wolfgang von Kempelen Kratzenstein
183
Politeknik Telkom
Desain User Interface
A. B. C.
Hermann Helmholtz Alexander Graham Bell Dennis Klatt
6
Text To Speech Speech dengan diphone database database Bahasa Indonesia pertama kali dikembangkan dikembangkan oleh _____
A. B. C.
Arry Akhmad Arman Alexander Graham Bell Dennis Klatt 1.
7.
2.
3.
4.
D. E.
D. E.
Wolfgang von Kempelen Kratzenstein
Wolfgang von Kempelen Kratzenstein
Konverter Teks ke Fonem berfungsi mengubah kalimat masukan dalam suatu bahasa tertentu yang berbentuk teks menjadi rangkaian kode-kode bunyi yang biasanya direpresentasikan direpresentasikan dengan kode fonem, durasi serta pitch-nya. Konverter Fonem ke Ucapan akan menerima masukan berupa kode-kode fonem serta pitch dan durasi yang dihasilkan oleh bagian sebelumnya. Formant synthesizer bekerja berdasarkan suatu model matematis yang akan melakukan komputasi untuk menghasilkan sinyal ucapan yang diinginkan. Synthesizer yang menggunakan teknik diphone concatenation c oncatenation bekerja dengan cara menggabung-gabungkan segmen-segmen bunyi yang telah direkam sebelumnya.
Pernyataan yang benar tentang konsep TTS adalah adalah ______
184
Politeknik Telkom
Desain User Interface
A B C
1,2,3 1,3 2,4
8.
Untuk mereprenstasikan mereprenstasikan kode fonem frase “kancingnya lepas” seperti pada kalimat “Kancingnya lepas satu buah” adalah ____
A B C D E
k/a/n/c/i/n/g/n/y/a/_/l/e/p/a/s k/a/n/c/i/ng/ny/a/_/l/e/p/a/s k/V/n/tS/i/N/nY/a/_/l/@/p/V/s k/V/n/tS/i/N/nY/a/_/l/e/p/V/s k/V/n/tS/i/nG/nY/a/_/l/@/p/V/s
9 A B C
Untuk membacakan teks pada IndoTTS digunakan perintah _____ IndoTTSSay() D IndoTTS_Speak() IndoTTS_Begin() IndoTTS_Say() E IndoTTS_Start()
10
Untuk menghentikan pembacaan teks pada IndoTTS digunakan perintah ______
A B C
IndoTTS_Stop IndoTTS_Silent IndoTTS_Off
Text to Speech
D. E.
D E
4 1,2,3,4
IndoTTS_SpeakOFF IndoTTS_SpeakStop
185
Politeknik Telkom
Desain User Interface
Latihan
1. Jelaskan dengan dengan singkat sejarah sejarah perkembangan pensintesa pensintesa ucapan? 2. Apa yang dimaksud dengan Fonem? 3. Apa yang dimaksud dengan Konverter Teks ke Fonem? 4. Apa yang dimaksud dengan Konverter Fonem to Ucapan? 5. Apa yang dimaksud dengan formant synthesizer ? 6. Apa yang dimaksud dengan diphone concatenation? concatenation? 7. Siapakah yang mengembangkan mengembangkan IndoTTS pertama kali? 8. Jelaskan cara kerja kerja Indo TTS! 9. Representasikan Representasikan teks berikut menjadi kedalam fonem! a. Penjelasannya Penjelasannya sangat menyebalkan b. Cara mereduksi persamaan linier c. Bunganya memerah disiang hari 10. Sebutkan fungsi-fungsi dasar yang dapt dipanggil dari IndoTTS dan jelaskan fungsinya! fungsinya!
186
Politeknik Telkom
Desain User Interface
Project
Buatlah sebuah aplikasi yang memanfaatkan IndoTTS. Delivery dari project ini adalah: 1. sebuah CD yang berisi a. Program executable b. Laporan Project yang berkaitan dengan : i. Pendahuluan Latar Belakang Rumusan Masalah Tujuan Batasan Masalah Sistematika Penulisan Jadwal Pengerjaan dan pembagian tugas ii. Dasar Teori iii. Perancangan iv. Implementasi v. Pengujian vi. Kesimpulan c. Panduan berupa: i. Plaint text ii. Document Guide iii. Video Guide iv. FAQ d. Slide Presentation 2.
Presentasi / sidang di kelas
Ketentuan Tugas: 1. Dikerjakan berkelompok, maksimal 4 orang 2. Peran serta/pemahaman anggota menentukan nilai individu. 3. Tidak Boleh terlambat, pada saat deadline harus dikumpulkan sedapatnya. Apabila tidak mengumpulkan nilai project otomatis NOL!
Text to Speech
187
Politeknik Telkom
Desain User Interface
10 Speech Recognition
Overview
Voice Recognition merupakan model interaksi yang relatif masih sangat baru. Berbagai riset masih terbuka lebar untuk mempebaiki model interaksi ini. Melalui bab ini akan dibahas salah satu cabang dari Voice Recognition yaitu Speech Recogniton.
Tujuan
1. 2.
188
Siswa memahami cara kerja Speech Recognition. Siswa dapat merancang dan membangun aplikasi yang menggunakan interaksi Speech Recogniton.
Politeknik Telkom
Desain User Interface
10.1 Voice Recognition dan Speech Recognition Biometrik, termasuk di dalamnya speech recognition, secara umum digunakan untuk identifikasi dan verifikasi. Identifikasi ialah mengenali identitas seseorang, dilakukan perbandingan kecocokan antara data biometric seseorang dalam database berisi record karakter seseorang. Sedangkan verifikasi adalah menentukan apakah seseorang sesuai dengan apa yang dikatakan terhadap dirinya. Biometric recognition merupakan sistem pengenalan atau identifikasi seseorang berdasarkan karakteristik biologis khusus yang dimiliki oleh orang tersebut. Fungsinya selain untuk sistem keamanan dengan mengenali identitas seseorang, juga untuk identifikasi penyakit yang diderita seseorang, keperluan militer, dan lain-lain. Aplikasi biometric recognition antara lain retinal scan (identifikasi berdasarkan pola pembuluh darah pada retina mata), fingerprint recognition (identifikasi pola sidik jari unik pada setiap orang), face recognition (pengenalan seseorang berdasarkan raut dan ekspresi seseorang dengan kunci utama pada letak mata dan mulut), dan voice recognition. Speech recognition adalah proses identifikasi suara berdasarkan kata yang diucapkan. Parameter yang dibandingkan ialah tingkat penekanan suara yang kemudian akan dicocokkan dengan template database yang tersedia. Sedangkan sistem pengenalan suara berdasarkan orang yang berbicara dinamakan speaker recognition. Pada pembahasan selanjutnya akan difokuskan kepada speech recogntion dimana komputer diminta untuk mengenali isi ucapan dari pengguna. Selain itu speech recognition memiliki kompleksitas algoritma yang lebih sederhana daripada speaker recognition. Voice Recognition secara harfiah dapat diartikan sebagai pengenalan suara. Secara istilah terdapat beberapa pengertian lain dari berbagai sumber diantararnya: 1. http://www.hitl.washington.edu/scivw/EVE/IV.Definitions.html The technology by which sounds, words or phrases spoken by humans are converted into electrical signals, and these signals are transformed into coding patterns that can be identified by a computer. Based on this identification, the computer usually takes some action. 2. www.phonedog.com/cell-phone-buying-guide/glossary-of-cellularterms.aspx Is a technology that makes your wireless device or computers capable of being activated and controlled by voice commands.
Speech Recognition
189
Politeknik Telkom
Desain User Interface
3. http://searchcrm.techtarget.com/sDefinition/0,,sid11_gci213318,00.html Voice or speech recognition is the ability of a machine or program to receive and interpret dictation, or to understand and carry out spoken commands. Sebagai ilustrasi mengenai voice recogntion, misalkan terdapat dua orang yaitu orang A dan orang B, keduanya sama-sama mengucapkan “Selamat Pagi”. Pada Speech Recogniton komputer cukup diminta mengen ali bahwa suar yang dimasukkan adalah “Selamat Pagi”. Namun Pada Speaker Recogniton, komputer tidak cukup hanya mengenali suara “Selamat Pagi”, namun lebih jauh ia harus mampu membedeakan yang mana suara orang A dan yang mana suara orang B.
10.2 Skema Utama Speech Recognition Skema Utama Speech Recognition dapat digambar sebagai berikut.
190
Politeknik Telkom
Desain User Interface
Pada Speech Recognition terdapat empat tahapan utama yaitu: 1. Penerimaan data input 2. Ekstraksi yaitu penyimpanan data masukan sekaligus pembuatan database template 3. Pembandingan/pencocokan, yaitu tahap pencocokan data baru dengan data suara pada template. 4. Validasi suara pengguna.
10.3 Proses Pencocokan Pola Suara Secara umum speech recogntion mengolah data secara digital. Suara aseli merupakan sinyal analog. Sebelum diolah suara ini harus diubah menjadi sinyal digital melalui teknik sampling.
Dari sinyal diatas dilakukan sampling sehingga menjadi sinyal sebagai berikut.
Speech Recognition
191
Politeknik Telkom
Desain User Interface
Sinyal hasi representasi ini yang menjadi dasar dalam perbandingan. Sinyal hasil pengolahan suara dari pengguna dibandingkan dengan databse sinyal yang sudah ada sebelumnya. Pembandingan sinya ini sangat rumit dan membutuhkan alogoritma yang komplek mengingat sinyal yang diperbandingkan jumlahnya sangat banyak dan perlu diperthatikan jarak sampling dan intonasi suatu ucapan. Beberapa faktor dapat menyebabkan kesalahan dalam proses pencocokan ini antara lain: 1. Kesalahan dalam pengucapan (misspoken) dan pembacaan (misread) frasa 2. Keadaan emosional yang ekstrim (misalnya stress, sedang marah, sedang sedih) 3. Pergantian penempatan microphone (intrasession atau intersession) 4. Kekurangan atau ketidak-konsistenan akustik dari ruangan (misalnya multipath dan noise) 5. channel mismatch (misalnya penggunaan microphone yang berbeda dalam perekaman dan verifikasi) 6. Sakit (misalnya flu yang dapat merubah vocal tract) 7. Penuaan / aging (model vocal tract dapat berubah berdasarkan usia)
10.4 Aplikasi berbasis Speech Recogniton Saat ini telah banyak vendor-vendor yang menawarkan aplikasi yang menggunakan teknolog Speech Recognition. Bahkan Microsoft Windows (pada XP dan Vista) telah dilengkapi fitur ini. Tentu saja fitur ini belumlah sempurna apalagi jika digunakan dalam bahasa Indonesia. Berbagai aplikasi freeware pun sudah banyak tersedia di internet. Dengan aplikasi freeware inipun, seseorang dapat membuat aplikasi speech recognition sederhana yang mampu merperlihatkan keunggulan penggunaan Speech Recogntion. Sebagai contoh, perintah pada game yang menekan tombol panah atas sebagai perintah untuk menembak, dapat diganti dengan perintah “Tembak!” ke komputer. Tentu saja, sebelumnya harus ada training untuk memperkenalkan ucapan “Tembak” tersebut. Dengan training kualitas pengenalan suara dapat ditingkatkan. Semakin banyak latihan, semakin baik kemampuan pengenalan suaranya.
192
Politeknik Telkom
Desain User Interface
Rangkuman
1.
Voice Recognition merupakan model interaksi yang relatif masih sangat baru dibanding meodel interakasi lain yang telah ada. 2. Biometrik, termasuk di dalamnya speech recognition, secara umum digunakan untuk identifikasi dan verifikasi. 3. Speech recognition adalah proses identifikasi suara berdasarkan kata yang diucapkan. 4. Pada Speaker Recogniton, komputer tidak cukup hanya mengenali suara namun lebih jauh ia harus mampu mengenali siapa yang mengucapkan suatu kata. 5. Secara umum speech recogntion mengolah data secara digital. 6. Suara aseli merupakan sinyal analog. 7. Data dari sinyal analog dikonversi menjadi sinyal digital dilakukan melalui proses sampling 8. Terdapat beberapa faktor yang dapat mempengaruhi kegagalan pengenlan suara pada Speech Recognition. 9. Untuk dapat meningkatkan kualitas pengengenalan suara pada Speech Recogntion diperlukan training. 10. Berbagai aplikasi Speech Recogntion freeware sudah banyak tersedia di internet dan dapat digunakan untuk membuat program sederhana.
Speech Recognition
193
Politeknik Telkom
Desain User Interface
Kuis Benar Salah
1. Voice Recoginiton termasuk bagian dari Biometrik 2. Voice Recognition lebih luas dari Speech Recognition 3. Speaker Recognition lebih mudah diimplementasikan dibanding Speech Recogniton. 4. Speech recognition adalah proses identifikasi suara berdasarkan kata yang diucapkan. 5. Suara manusia merupakan sinyal analog. 6. Suara manusia disimpan dalam komputer secara analog. 7. Suara manusia disimpan dalam komputer telah mengalamai perubahan sinyal. 8. Proses Sampling mengubah sinyal digital menjadi sinyal analog. 9. Speech recogntion merupakan teknologi modern dan belum ada versi freewarenya. 10. Pola suara seseorang senantiasa tetap setiap saat.
194
Politeknik Telkom
Desain User Interface
Pilihan Ganda
1.
Berikut ini yang tidak termasuk biomertik adalah ______
A. B. C.
Suara manusia Password Rajah Tangan
D E.
Sidik jari Retina mata
2.
Pernyataan yang benar dari ketiga pernyataan berikut adalah____ 1. Kesalahan dalam pengucapan (misspoken) dan pembacaan (misread) frasa mempengaruhi keakuratan speech recognition. 2. Keadaan emosional yang ekstrim (misalnya stress, sedang marah, sedang sedih) mempengaruhi keakuratan speech recognition. 3. Pergantian penempatan microphone (intrasession atau intersession) tidak berpengaruh pada interaksi speech recognition.
A. B. C.
1,2,3 1,3 1,2
3.
1. Perbedaan ruangan 2. Perbedaan peralatan 3. Sakit 4. Penuaan Dari keempat hal di atas, yang berpengaruh pada kegagalan pengenalan suara adalah_________
A. B. C.
1,2,3 1,3 2,4
Speech Recognition
D. E.
D. E.
1saja 2,3
4 saja 1,2,3,4
195
Politeknik Telkom
Desain User Interface
4.
Sampling merupakan proses mengubah sinyal _____ ke sinyal _____
A. B. C.
Digital – Radio Digital – Analog Analog – Digital
D. E.
Analog – Analog Radio – Analog
5.
Speech Recognition tidak mementingkan siapa pengucap suara 2. Speaker Recognition lebih mudah dibandung Speech Recognition. 3. Speaker Recognition merupakan Voice Recogntion Pernyataan yang benar dari ketiga pernyataan di atas adalah ____
A. B. C.
1,2,3 1,2 1,3
6
1. Windows 3.1 2. Windows 95 3. Windows XP 4. Windows Vista Operating System Windows yang mendukung Speech Recogntion adalah _____
A. B. C.
Tak satupun 4 3,4
7
1. Pantai 2. Puncak gedung 3. Pegunungan 4. Ruang kamar dengan dinding karpet dan kapas Pada saat merekam suara, tempat di atas yang dapat memberikan hasil suara yang terbebas dari noise adalah _______
196
1.
D. E.
D. E.
2,3 2 saja
2,3,4 1,2,3,4
Politeknik Telkom
Desain User Interface
A B C
Tak satupun 4 saja 3,4
8.
Tujuan utama Speaker Recogniton adalah _____
A B C
Mengenali kata yang diucapkan Mengenali siapa yang berbicara Menyimpan data suara
9
Yang merupakan sinyal analog adalah_______ 1. Suara manusia berbicara 2. Suara Speaker dari komputer 3. Suara Burung berkicau 4. Suara kipas komputer 1 saja D 1,2,3,4 1,2 4 saja E 1,2,3
A B C
D. E.
D E
2,3,4 1,2,3,4
Pencocokan data suara Mengubah sinyal Analog ke digital
10
Speech Recogntion bermanfaat untuk: 1. Menulis di text editor tanpa mengetik ke kyeboard 2. Bermain game cukup dengan perintah oral 3. Mebuka email dari jarak jauh 4. Mematikan komputer secara lisan
A B C
1,2,3 2,3,4 1,2,4
Speech Recognition
D E
1,3,4 1,2,3,4
197
Politeknik Telkom
Desain User Interface
Latihan
1. 2. 3. 4. 5. 6. 7.
Sebutkan contoh biometrik! Apa yang dimaksud dengan Voice Recongnition? Apa yang dimaksud dengan Speech Recognition? Apa yang dimaksud dengan Speaker Recognition? Apa yang dimaksud dengan Sampling? Apa perbedaan sinyal analog dan digital? Apa yang mempengaruhi kegagalan pola pengenalan suara pada Voice Recognition? 8. Sebutkan Operating System yang support untuk voice Recogniton! 9. Sebutkan softare komersial Speech Reconition! 10. Sebutkan softare freeware Speech Reconition!
198
