HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ......

Post on 03-Feb-2018

232 views 1 download

Transcript of HUMAN COMPUTER INTERACTION - · PDF filesoftwere engineering) Cont..pendokumentasian ......

A

HUMAN COMPUTER

INTERACTION

DISUSUN OLEH :

1. ANDRI PUTRO PAMUNGKAS 43E57006135012

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

Pendahuluan

Kriteria penting

Tampilan yang menarik

How To making a good display ?

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

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)

Cont..pendokumentasian

Biasanya point “b” dan “d” jarang dipergunakan karena mahal kecuali untuk project besar.

Contoh piranti GUI :Corel draw,DENIM,MS.Visio dll

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

Special purpose softwere

a)Kelompok pengguna: inventori gudang,pengelolaan data akademisi mahasiswa,reservasi hotel dll.

b)Cara pendekatan yang digunakan “user-centered design ”

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

User design Approach

Rancangan antarmuka murni dirancang oleh “pengguna”

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

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

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

Command leagauge(bahasa perintah)

➢ Piranti untuk memanipulasi model yang ada➢ Idealnya menggunakan bahasa alami sehingga mudah di mengerti dan diopersionalkan oleh model pengguna

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

Tampilan informasi

➢ Status informasi yang muncul ketika pengguna mekukan suatu tindakan

➢ Pesan yang ditampilkan seefektif mungkin agar mudah dipahami pengguna

4.21 Urutan perancangan

1. Pemilihan ragam dialog2. Perancangan struktur dialog3. Perancangan format pesan4. Perancangan penangan masalah5. Perancangan stuktur data

4.22 Perancangan tampilan berbasis tesk

Faktor yang perlu dipertimbangkan :1. Urutan penyajian2. Kelonggaran (spaciousness)3. Pengelompokan4. Relevansi5. Kosistensi6. Kesederhanaan

4.23 Perancangan tampilan berbasis grafis

Kemudahan dalam hal pengontrolan format tampilan dapat dilakukan dengan lebih mudah dan flexibel

Kendala dalam perancangan tampilan berbasis grafis

1. Waktu tanggap2. Kecepatan penampilan3. Lebar pita penampilan4. Tipe penampilan(tekstual atau grafis)

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

Penanganan kesalahan

Pembagiannya :1. Pada saat implementasi program2. Kesalahan logika

Kesalahan pada saat implementasi program

Kesalahan sintaksis yang langsung didteksi oleh kompiler(compile-time error)

Kesalahan logika

Penyebabnya :1. Pengguna mengisikan data yang tidak sah2. Proses eksukusi➢ kesalahan sintaksis dapat dideteksi olehkompiler

➢ Kesalahan logika lebih susah diperkirakan

Contoh penangan kesalahan logika

Penggunaan “error trapping”

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

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

Jaringan semantik tampilan

Gambaran secara grafis tentang hubungan antar objek

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

Komponen jaringan semantik

1. Nomor tampilan2. Transisi yang menyebabkan perpindahan

ketampilan yang lain.

Aspek penting “bagaimana membuat tampilan sebuah aplikasi

yang memungkinkan user berdialog dengan komputer”

Source

Santoso, insap. 2004. Interaksi Manusia dan Komputer teori dan praktek. Yogyakarta : ANDI Yogyakarta.