Professional Documents
Culture Documents
Introduction
Teknik Elektronika-Teknik Komputer Psikologi Human-Computer Interaction (HCI) Grafis-Tipologi (Seni Cetak/Tata huruf) Bidang yang mengkaji bagaimana interaksi Ergonomik manusia dan komputer berlangsung Antropologi (Tentang manusia) sehingga memudahkan manusia Linguistik mengoperasikan komputer dan Sosiologi mempertimbangkan umpan balik yang Kesimpulan berdasarkan penelitian : diberikan komputer selama manusia 40 sampai 50 % bagian Source code menggunakannya program/ aplikasi adalah untuk Secara hardware : I/O Device, secara interface (Myers : 1989) Software : Pengontrolan I/O Device dan Motivasi Pengembangan Desain-Evaluasi-Implementasi Interface interface : (umumnya GUI) Life-Critical Systems Pada awalnya pengkajian ini lebih dominan Industrial and Commercial uses dilakukan di dunia akademis (universitas) Office, House, and entertainment ketimbang di dunia praktis/Industri application Exploratory, Creative, Cooperative Formalisasi perancangan GUI Systems Istilah yang berkaitan : User-friendly, Dibutuhkan Development Tools Usability
Struktur Aplikasi
Tiga elemen pembangun aplikasi : Presentation User Interface Application Logic - Application Data Service File / DataBase Server
Bagaimana setiap elemen berhubungan pada suatu aplikasi menentukan jenis aplikasi tersebut apakah : one-tier two-tier atau multi-tier/n-tier.
One-tier
Two-tier
Multi-tier/n-tier
Human Factor
Aplikasi yang mempertimbangkan faktor manusia akan menghasilkan sistem interaksi yang menarik Lima faktor manusia yang dapat diukur :
Time to learn Speed of performance Rate of errors by users Retention over time Subjective satisfaction
(universal approach)
Karakteristik interaksi manusia :
Penglihatan Luminans, kontras, brightness, sharpness Sudut dan medan penglihatan Warna : psikologi, persepsi, kognisi guidelines Pendengaran Sentuhan Model sistem manusia Pengolahan sadar dan otomatis Register memori Kanal kapasitas rendah Memori jangka pendek dan panjang Sikap dan kecemasan Pengendalian motorik
Seperti pentingnya pe-modelan sistem komputer, maka perlu juga dibuat model sistem manusia . Beragamnya karakter manusia membuat hal ini lebih sulit
Perseptual Me mo ri
Perseptual
Intelektual
Intelektual
Kontrol Motorik
Kontrol Motorik
Model Manusia
Sensor
Responder
Umpan Balik
Piranti Keluaran
Piranti Masukan
Pengontrol Keluaran
Pengontrol Masukan
Prosesor
Memori
e P e P g n a lo o a l a h a h n n a S a S a d r r
KOMPUTER KOMPUTER
Interface
ol og is
Warna persepsi
ko gn iti f
Kombinasi warna
Garis Tebal dan Teks H itam , Biru, M erah Kuning, Putih, H ijau H itam , Kuning, Putih, Cyan H itam , M erah Biru Kuning, M agenta, H itam M erah, Biru, H itam , M agenta Biru, H itam Kuning M erah, Biru, H itam
Garis Tebal dan Teks Kuning, Cyan Biru, M agenta Cyan, M agenta, Kuning H ijau, M erah, H itam Kuning, H ijau, Putih Cyan, H ijau, M erah Putih, Cyan, H ijau
Petunjuk Secara Khusus 1 Buatlah warna-warna untuk membedakan sesuatu maksud tertentu, jangan menggunakan satu warna untuk maksud yang berbeda. 2 Jangan menggunakan warna yang beraneka macam jika informasi yang ditampilkan hanya akan diakses oleh monitor monochrome. 3 Pada Sistem Informasi Manajemen warna lebih sering digunakan untuk mengindikasikan suatu asosiasi dan grup daripada untuk melindungi data dan status. Sewaktu digunakan untuk melindungi data, gunakan warna dengan masing-masing pengertian :
4. 1. 1.
sambungan
Warna M e ra h t e ra n g
Merah
Kuning
Hijau
Pengertian Menunjukkan data yang hilang atau pemberitahuan tentang sesuatu yang akan segera terjadi tanpa campur tangan pemakai (misalnya sistem jaringan yang akan segera off-line). Menunjukkan data yang akan hilang atau pemberitahuan suatu hal dengan terlebih dahulu meminta aksi dari pemakai (misalnya menghapus file). Menunjukkan suatu peringatan, aksi tidak dapat dikembalikan atau informasi yang mungkin hilang atau berubah (misalnya menyimpan atau menghapus file). Menunjukkan status siap atau setelah suatu pekerjaan selesai (misalnya proses selesai, sukses, dan kontrol dikembalikan kepada pemakai). Tanpa status tertentu, menampilkan suatu informasi (misalnya untuk field data dan header). Pesan-pesan nasehat, saran.
4.
Gunakan warna yang berbeda untuk membedakan sekumpulan informasi yang kompleks, banyak, dan penting. Tetapi pertahankan jangan sampai terjadi konflik dengan penggunaan warna pada no. 3 di atas. Gunakan aturan penggunaan warna dalam keseluruhan sistem untuk menjaga konsistensi.
1.
Sisi Hardware
Beberapa I/O devices
Kemajuan kecepatan processor dan kemampuan penyimpanan data juga diimbangi dengan kemajuan pada peralatan Input/Output Ex. : Keyboard menjadi More precision device, Teletype ( 10 Char/sec) menjadi high-speed mega pixel graphical display I/O masa depan :
- Gestural input (isarat) - Three dimensional pointing - Voice input-output - Whole-body involvement I/O devices
-Keyboard :
Mouse Joystick Tracball Digittizing Tablet Light Pen Touch Sensititive Panel
1 A K U B
2 C L V
3 D M W
4 E N X
5 F O Y
6 G P Z
7 H Q
8 I R
9 J S
Joystick
Tracball
Light Pen
Counting and measuring Accurate storage and recall Rapid and consistent responses Data processing/calculation Repetitive actions Simple and sharply defined things (George Miller)
Kecakapan komputer : Kalkulasi akurat, deduksi logika, aktivitas perulangan, konsistensi, multitasking,Pengolahan rutin, penyimpanan dan pengambilan kembali, pengambilan keputusan deterministik, pengolahan data, pengetahuan dominan, bebas dari kesalahan (P. Insap S)
Let humans do what humans do well and let computers do what computers do well
Petunjuk Praktis
ra se ha t
Dialoque Style
Yaitu :
o o o o
(Ragam Dialog)
Ragam dialog :
o o o
o o o
Dialog berbasis perintah tunggal Dialog berbasis bahasa pemrograman Interface berbasis bahasa alami Sistem menu Menu Datar : Selektor pilihan, penggunaan tanda terang Menu tarik : status, shortcut Dialog berbasis pengisian form Interface berbasis icon Sistem penjendelaan Jendela TTY Time Mulitplexed Windows Space Muliplexed Windows Manipulasi langsung Interface interaksi berbasis grafis Interface interaksi berbasis suara
Question
Aspek Pemrograman
Type Interface dan Pemrogramannya :
Interface berbasis text Interface berbasis grafis : Grafis DOS Grafis Windows Interface berbasis text - Contoh : Masukkan angka pertama:5 Masukkan angka kedua :3 Hasil penjumlahannya : 8 Ingin hitung lagi ? [Y,T]:T
CheckBox, RadioButton(OptionButton), ComboBox, ScrollBar, Komponen output : Label, Memo, Komponen tombol : Button (Command), Komponen Peng-group : GroupBox(Frame) , Panel,TabControl(SSTab,TabStrip),Frame Komponen penghubung data : Table (Data,Adox), Komponen menu : MainMenu, PopupMenu, Komponen image : Image,
Form adalah komponen utama tempat semua komponen lain diletakkan Sebagai konsekuensi implementasi OOP maka setiap komponen memiliki : Property, Event dan Method
Loop
Tampilan
Navigasi
Esc Alt-S
T 2
Alt-X Alt-E Simpan Esc
T 1
T 3
Keterangan
Selesai Cetak
T 4
Exit
Exit
Penjelasan : - No, Nomor lembar kerja, biasanya sebuah aplikasi memiliki beberapa tampilan - Tampilan, berisi sketsa tampilan yang akan muncul di layar - Navigator, tempat menjelaskan setaip kejadian (event) pada tampilan, misalnya kapan tampilan muncul dan kapan tampilan bealih ke tampilan lain. - Keterangan, berisi penjelasan singkat tentang atribut tampilan yang akan dipakai. Contohnya teks judul menggunakan font Tomes New Roman, 20 point, warna cyan, warna latar belakang birutua, teks pada button menggunakan font Arial, 16 point, dan seterusnya
T 5
Alt-Q
Esc Exit
T 6
T 7
http://www.carettasoftware.com/
Shackel juga menekankan pentingnya Shackel(1990) mengajukan formalisasi pendekatan User-centered kriteria perancangan interface dengan dibandingkan System-centered
istilah : Usability menggantikan istilah user-friendly yang menurutnya sukar untuk diukur
Effectiveness , seberapa efektif unjuk kerja pekerjaan terbantukan dengan interface tersebut Learnability , berapa lama pelatihan dibutuhkan untuk dapat menggunakan interface tersebut secara efektive Flexibility , jika ada perubahan pekerjaan seberapa efektive interface masih bisa digunakan Attitude , apakah user yang menggunakan interface tersebut menjadi cepat lelah atau frustasi atau justru menjadi tambah semangat
GUI Design
Smith dan Mosier (1986) menyarankan 5 high-level objectives untuk perancangan tampilan :
1. Consistency of data display 2. Efficient information assimilation by the user 3. Minimal memory load on user 4. Compatibility of data display 5. Flexibility of user control of data display
Present digital value only when necessary Use high-level resolution monitors Design a display in monochrommatic form Involve operators in the depelopment of new display
Important Issue : Should user interface be copy right Masalah Response Time dan Display rate Petunjuk :
Users prefer shorter response time Longer response times (greater than 15 seconds) are disruptive Users change usage profile with response time Shorter response time lead to short user thenk times Response time should be appropriate to the task
The Electric Power Research Institute (Lockheed, 1981) menambahkan komentar seperti berikut :
Be consistent in labelling and graphic convention Standardize abbreviation Use consistent format in all displays Present a page number on each display page
DialogStyleAnalys:
DialogStylevsUserCharacteristics KlasifikasiDialogStyle:
Menu : Fill-Form: Q/A(Question/Answer) : Command DM(DirectManipulation): NaturalLanguage:
KarakteristikUser
Psychological Characteristics:
Cognitive Style: - Verbal/analytic - Spatial/Intuitive Attitude: - Positive - Neutral - Negative Motivation: - High - Moderate - Low
lanjutan
Karakteristik User
lanjutan
Karakteristik User
SystemUse:
- Mandatory - Discretionary
IdentifikasiRagamdialogyangbersesuaian dengankarakteristikuser:
DialogStyle
Menu Psychology Attitude Motivation Typing Skill System Exp Task Exp App. Exp Use of Other Syst Comp. Lit Negative Low Low Low Low Low Frequent Low Fill-Form Neutral Moderate High Moderate High Moderate Frequent High Q/A Negative Low High Moderate Low Moderate Frequent Low Command Positive High High High High High Infrequent High DM Negative Low Low Moderate Low Moderate Frequent Low Natural L. Negative Low High Low High Low Frequent Low
UserProfile
Knowledge&Experience
DialogStyle
Menu Job&TaskCharacteristics Fill-Form High Some
Discretionary
DM Low Some
Discretionary
UserProfile
Low None
Discretionary
Hgh
Moderate
High
Low
High
High
ExampleofUserCharacteristics
Kasus1 Kasus2
- Attitude - Motivation - Typing skill - System Experience - Task Experience - App. Experience - Use of other systems - Computer literacy - Freq. of use - Primary training - System use - Turnover use
Negative Low High Low High Low Infrequent Low Low None Discretionary High
Negative Low High High Low High Frequent High High Formal Mandatory Low
UserProfile
DialogStyle
Menu Job&TaskCharacteristics Fill-Form High Some Q/A Low None Command High Formal Mandatory Low DM Low Some Natural L. Low None
UserProfile
Low None
UserProfile
Knowledge&Experience
DialogStyle
Menu Job&TaskCharacteristics Fill-Form High Some Q/A Low None Command High Formal Mandatory Low 3 DM Low Some Natural L. Low None
UserProfile
Low None
Jenis Aplikasi
Layout :
Header Menu
Side bar
Body
Side bar
Footer
1. 1. 1. 1. 1. 1. 1. 1. 1.
Elemen-elemen navigasi
1. Navigasi Menu Adalah navigasi utama untuk user. Pada menu utama semua item menu harus digarisbawahi. Jika user memilih menu, maka menu tsb highlighted Navigasi Sub Menu Setelah memilih menu, maka level selanjutnya dipresentasikan dalam box warna untuk membedakan item yang digarisbawahi. Misal jika ukuran font adalah 12 pixel. Jika text berwarna putih, dan background gelap maka font ditebalkan. Selain itu berarti biasa, dengan teks gelap background putih. Teks awal harus berjarak 4 pixel dari atas dan kiri. Pada box pertama yang diatas harus diberi garis dibawah item. Disamping box ditaruh image (biasanya gif) untuk merealisasikan spasi. Navigasi dalam situs bisnis Navigasi item yang general Elemen-elemen umum navigasi diletakkan
di bawah menu navigasi. Terdiri atas link yang tertuju ke home, peta situs sendiri, kontak person, page sesudahnya, tombol kembali (optional) dan link ke atas page. Tombol ke atas page, biasanya diletakkan dibawah tiap page. Tombol ini tidak bisa diedit user.
1.
1. 1.
Menghadapi kemungkinan aksi user : 1. Sediakan list dari pilihan-pilihan control, melayani home base atau starting point yang konsisten untuk kontrol entries. 1. Tunjukkan pilihan-pilihan transaksi yang mungkin tgerjadi 1. Buat menu yang aplikabel dan pilihan kontrol yang availabel untuk user di setiap waktu 1. Sediakan fungsi batal, interup dan kontinue. Bedakan antara file yang bisa diedit dengan file yang tidak bisa diedit.
7 elemen yang menjadi pertimbangan dalam men-desain interface Customer ECommerse : 1 Context : S ites layout and design 2 Content : Text, pictures, sound and video that web pages contain 3 Community : The ways sites enable user-to-user 4 Communication : That ways sites enable site-to user communication or two-way communication 5 Customization : Sites ability to self-tailor to different users or to allow users to personalize the site 6 Connection : Degree site is linked to other sites 7 Commerse : Sites capabilities to enable commercial transactions
Aksi user
Context
Amazon.com :
Content
Commerse
Community
Connection Communication
Customization
CMS :
- Engine -Themes - Plug-in
Web 3.0
PHP Framework :
Zend Postnuke
GWT
Ajax
JAVA Applet
1. Dengan webblog
(tidak perlu membuat aplikasi web sendiri), misal : blogspot, wordpress, multiply
(harus
1. Syarat : memiliki account email 2. Membuka http://www.wordpress.com 3. Mengclick SIGNUP 4. Mengisi form signup
5nhj
1.
Memiliki sejumlah file berikut : xampp, engine wordpress, themes WP, plug-in WP
2. Aktifkan xampp (apache, mysql) 3. Buat database baru melalui mysql (phpmyadmin) 4. Copy file dari engine WP ke : xampp\htdocs 5. Jalankan web WP anda dengan : http://localhost/belajarwp 6. Isikan beberapa parameter berkaitan dengan database 7. Run install, jangan lupa mencatat password admin 8. Web anda selesai (default) 9. Untuk mencoba berbagai themes, copy kan file thems ke : \xampp\htdocs\IMKYarsi\wpcontent\themes, ubah the
- Arsitektur -
- Volumetric Displays
- Arsitektur-
1. 2.
4. Beri penilaian terhadap interface dari sebuah aplikasi berikut dan modifikasi berdasarkan kritik anda :
5. Bagaimana penilaian anda terhadap pesan error dibawah ini. Bila pesan error
tersebut tidak memenuhi kaidah-kaidah penyampaian pesan error, jelaskan kaidah yang seperti apa serta bagaimana seharusnya !
a.
b.
c.
d.
Contact Me :