human computer interaction - · pdf filesoftwere engineering) cont..pendokumentasian ......
TRANSCRIPT
![Page 1: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/1.jpg)
A
HUMAN COMPUTER
INTERACTION
![Page 2: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/2.jpg)
DISUSUN OLEH :
1. ANDRI PUTRO PAMUNGKAS 43E57006135012
![Page 3: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/3.jpg)
Perancangan TampilanPerancangan Tampilan
4. Pendahuluan4. Pendahuluan
4.1 CARA PENDEKATAN4.1 CARA PENDEKATAN
4.2 PRINSIP DAN PETUNJUK PERANCANGAN
4.2 PRINSIP DAN PETUNJUK PERANCANGAN
4.3 PIRANTI BANTU SEDERHANA4.3 PIRANTI BANTU SEDERHANA
4.4 JARINGAN SEMATIK TAMPILAN4.4 JARINGAN SEMATIK TAMPILAN
4.21 URUTAN PERANCANGAN4.21 URUTAN PERANCANGAN
4.22 PERANCANGAN TAMPILAN BERBASIS TESK
4.22 PERANCANGAN TAMPILAN BERBASIS TESK
4.23 PERANCANGAN TAMPILAN BERBASIS GRAFIS
4.23 PERANCANGAN TAMPILAN BERBASIS GRAFIS
4.23 WAKTU TANGGAP4.23 WAKTU TANGGAP
4.24 PENANGAN KESALAHAN4.24 PENANGAN KESALAHAN
![Page 4: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/4.jpg)
Pendahuluan
Kriteria penting
Tampilan yang menarik
How To making a good display ?
![Page 5: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/5.jpg)
Mempunyai Jiwa SeniMempunyai Jiwa Seni
Dokumentasi prosesDokumentasi proses
Yakin Desain Dapat SelesaiDengan Tool yang Ada
Yakin Desain Dapat SelesaiDengan Tool yang Ada
Mengerti Selera Umum Mengerti Selera Umum
Syarat Perancanganyang Baik
Syarat Perancanganyang Baik
![Page 6: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/6.jpg)
Cara pendokumentasian rancangan
A)Membuat sketsa pada kertas
B)Menggunakan piranti prototype GUI,
C)Menuliskan tekstual yang menjelaskan keterkaitanantar jendela
D)Menggunakan piranti bantu yang disebut CASE(computer-aided
softwere engineering)
![Page 7: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/7.jpg)
Cont..pendokumentasian
Biasanya point “b” dan “d” jarang dipergunakan karena mahal kecuali untuk project besar.
Contoh piranti GUI :Corel draw,DENIM,MS.Visio dll
![Page 8: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/8.jpg)
4.1 Cara pendekatan
Pengelompokan Aplikasi :1)Special purpose softwere
aplikasi untuk keperluan kusus dengan user khusus
2)General purpose softwereaplikasi untuk banyak pengguna/general
softwere
![Page 9: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/9.jpg)
Special purpose softwere
a)Kelompok pengguna: inventori gudang,pengelolaan data akademisi mahasiswa,reservasi hotel dll.
b)Cara pendekatan yang digunakan “user-centered design ”
![Page 10: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/10.jpg)
User-centered design
➢ Perancangan antarmuka yang melibatkan pengguna
➢ Pengguna berperan aktif mengenai rancangan yang akan dibuat
➢ Perancang membuat rancangan berdasakan➢ Perancang dan pengguna bekerjasama dalam pembuatan rancangan
![Page 11: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/11.jpg)
User design Approach
Rancangan antarmuka murni dirancang oleh “pengguna”
![Page 12: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/12.jpg)
General purpose softwere/public softwere
➢ Aplikasi ini akan digunakan oleh berbagai macam user dengan karakteristik yang beragam
➢ Karena akan digunakan oleh berbagai macam user makan aplikasi harus dapat di “custom” oleh user
➢ Misalnya settingan default dapat dirubah sesuai keinginan user
![Page 13: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/13.jpg)
4.2 Prinsip dan petunjuk perancangan
Komponen utama antarmuka pengguna :➢ Model pengguna➢ Bahasa perintah➢ Umpan balik➢ Penampilan informasi
dasar dari semua komponen tersebut adalah model penguna
![Page 14: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/14.jpg)
Model pengguna
➢ Merupakan model konsep yang diinginkan pengguna untuk memanipulasi informasi dan proses yang diaplikasi pada informasi tersebut
➢ Memungkinkan pengguna mengembangkan pemahaman dasar tentang apa yang dikerjakan program,bahkan untuk pengguna yang tidak mengetahui teknologi
➢ Dapat berupa simulasi keadaan seperti pada dunia nyata
![Page 15: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/15.jpg)
Command leagauge(bahasa perintah)
➢ Piranti untuk memanipulasi model yang ada➢ Idealnya menggunakan bahasa alami sehingga mudah di mengerti dan diopersionalkan oleh model pengguna
![Page 16: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/16.jpg)
Umpanbalik
➢ Kemampuan sebuah program untuk membantu pengguna untuk mengoprasikan program itu sendiri
➢ Betuknya bisa berupa : pesan penjelasan,pesan penerimaan perintah,indikasi adanya objek yang dipilih,penampilan objek yang di ketik pada keyboard di layar/monitor
![Page 17: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/17.jpg)
Tampilan informasi
➢ Status informasi yang muncul ketika pengguna mekukan suatu tindakan
➢ Pesan yang ditampilkan seefektif mungkin agar mudah dipahami pengguna
![Page 18: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/18.jpg)
4.21 Urutan perancangan
1. Pemilihan ragam dialog2. Perancangan struktur dialog3. Perancangan format pesan4. Perancangan penangan masalah5. Perancangan stuktur data
![Page 19: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/19.jpg)
4.22 Perancangan tampilan berbasis tesk
Faktor yang perlu dipertimbangkan :1. Urutan penyajian2. Kelonggaran (spaciousness)3. Pengelompokan4. Relevansi5. Kosistensi6. Kesederhanaan
![Page 20: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/20.jpg)
4.23 Perancangan tampilan berbasis grafis
Kemudahan dalam hal pengontrolan format tampilan dapat dilakukan dengan lebih mudah dan flexibel
![Page 21: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/21.jpg)
Kendala dalam perancangan tampilan berbasis grafis
1. Waktu tanggap2. Kecepatan penampilan3. Lebar pita penampilan4. Tipe penampilan(tekstual atau grafis)
![Page 22: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/22.jpg)
4.24 Waktu tanggap
Keinginan user agar program aplikasinya memberikan waktu tanggap yang sependek-pendeknya>>>Jika waktu tanggap > 14 detik merupakan waktu tanggap yang lama>>>Jika waktu tanggap < 2 detik merupakan waktu tanggap yang cukup memadai
![Page 23: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/23.jpg)
Penanganan kesalahan
Pembagiannya :1. Pada saat implementasi program2. Kesalahan logika
![Page 24: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/24.jpg)
Kesalahan pada saat implementasi program
Kesalahan sintaksis yang langsung didteksi oleh kompiler(compile-time error)
![Page 25: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/25.jpg)
Kesalahan logika
Penyebabnya :1. Pengguna mengisikan data yang tidak sah2. Proses eksukusi➢ kesalahan sintaksis dapat dideteksi olehkompiler
➢ Kesalahan logika lebih susah diperkirakan
![Page 26: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/26.jpg)
Contoh penangan kesalahan logika
Penggunaan “error trapping”
![Page 27: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/27.jpg)
Faktor yang perlu diperhatikan dalam perancangan tampilan berbasis grafis
1. Ilusi pada objek yang dapat dimanipulasi2. Urutan visual dan fokus pengguna3. Struktur internal4. Kosakata grafis yang kosisten dan sesuia5. Kesesuain dengan media
![Page 28: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/28.jpg)
Piranti bantu sederhana
Tampilan :(sketsa tampilan yang akan muncul dilayar)
No :(nomor lembar kerja)
Navigasi : (menjelaskanKapan tampilan ini akan Muncul dan kapan akanBerubah yang disebabkanEvent sperti penekan to-Mbol mause/keyboardMenampilkan error)
Keterangan : (penjelasan singkat atribut tampilan yang akan dipakai sperti :jenis font,Ukuran font,color dll.)
![Page 29: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/29.jpg)
![Page 30: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/30.jpg)
Jaringan semantik tampilan
Gambaran secara grafis tentang hubungan antar objek
![Page 31: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/31.jpg)
Bensin
Keponakan
Motor Sekolah
Jono
Bulat
bola
Onde-onde
masjim
rumah
Pom bensin
Punya
Naik
Pergi
Bentuknya
Makan
Membutuhkan
Menyediakan
Dekat
Namanya
Bermain
Tinggal
Bentuknya
membawa
![Page 32: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/32.jpg)
Komponen jaringan semantik
1. Nomor tampilan2. Transisi yang menyebabkan perpindahan
ketampilan yang lain.
![Page 33: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/33.jpg)
Aspek penting “bagaimana membuat tampilan sebuah aplikasi
yang memungkinkan user berdialog dengan komputer”
![Page 34: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/34.jpg)
Source
Santoso, insap. 2004. Interaksi Manusia dan Komputer teori dan praktek. Yogyakarta : ANDI Yogyakarta.
![Page 35: HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ... aplikasi untuk keperluan kusus dengan user khusus 2)General purpose softwere aplikasi untuk](https://reader033.vdocuments.net/reader033/viewer/2022051507/5a74d8967f8b9a63638c0389/html5/thumbnails/35.jpg)