Pertemuan 1
PENGENALAN IMK
IMK adalah apa yang terjadi saat pengguna manusia dan sistem komputer bersama-sama menyelesaikan suatu tugas/pekerjaan
- Bidang Ilmu Interaksi Manusia dan Komputer adalah:
- Definisi Interaksi Manusia dan Komputer:
1. Pendahuluan
• Saat ini perkembangan teknologi (komputer) sangat pesat
• Hampir setiap saat kita berhubungan dengan teknologi komputer
• Pada awal perkembangan komputer tahun 1950, masih sangat sulit dioperasikan, tidak praktis, dan waktu eksekusinya sulit diprediksi.
Faktor Penyebabnya
•Ukurannya sangat besar dan harganya sangat mahal, sehingga jika dibandingkan tenaga buruh saat itu masih jauh lebih murah.
•Hanya dapat dioperasikan oleh tenaga teknisi spesialis yang sudah terbiasa melakukan pemrograman secara on-line dengan menggunakan kartu plong(punchcard).
•Hanya sedikit yang diketahui tentang bagaimana membuatnya mudah untuk digunakan.
Kondisi Saat ini
Saat ini komputer sudah jauh lebih murah, digunakan untuk hampir setiap sisi kehidupan, kita mempunyai pengetahuan yang cukup bagaimana agar komputer dapat menyesuaikan dengan kebutuhan kerja manusia.
Perubahan Teknologi
Penurunan hargakomputer yang sangat dramatis dihasilkan oleh adanya perkembangan teknologi terutama teknologi microelectronic dalam bentuk keping silicon (IC).
Kemampuan teknologi untuk memperkecil ukuran rangkaian serta mengkemas sejumlah rangkaian dalam satu keping tipis IC merupakan langkah menuju perkembangan komputer yang powerful dengan kapasitas penyimpan yang besar, namun dengan harga yang semakin murah.
Perubahan teknologi diatas telah membuka kemungkinan penggunaan komputer yang lebih luas.
Saat ini kehadiran komputer sudah tidak dapat dilepaskan dari dunia bisnis dan industri modern. Komputer juga ditemukan dalam penggunaan aplikasi rumah tangga.
Istilah IMK / HCI
Pada tahun 1970 mulai dikenal istilah antarmuka pengguna (userinterface), yang juga dikenal dengan istilah Man-Machine Interface (MMI), dan mulai menjadi topik perhatian bagi peneliti dan perancang sistem.
Perusahaan komputer mulai memikirkan aspek fisik dari antarmuka pengguna sebagai faktor penentu keberhasilan dalam pemasaran produknya.
Istilah human-computer interaction (HCI) mulai muncul pertengahan tahun 1980-an sebagai bidang studi yang baru.
Istilah HCI mengisyaratkan bahwabidang studi ini mempunyai fokus yang lebih luas, tidak hanya sekedar perancangan antarmuka secara fisik.
Sebuah program aplikasi terdiri dari 2 bagian yaitu:
-Bagian Antarmuka.
-Bagian Aplikasi.
Media antarmuka manusia dan komputer terbagi menjadi 2yaitu:
- Media tekstual
- Media GUI (Graphical User Interface)
a. Media Tekstual adalah bentuk sederhana dialog atau komunikasi antara manusia dan komputer yang hanya berisi teks dan kurang menarik.
Contoh : perintah “Printf” dalam Borland C++
b. Media GUI (Graphical ser Interface) adalah bentuk dialog atau komunikasi antara manusia dan komputer yang berbentuk grafis dan sangat atraktif.
Contoh antarmuka manusia dengankomputer yang berbentuk grafis menggunakan pemrograman visual (Visual Basic,Visual Foxpro,Delphi dan lain-lain).
2. Bidang Studi
Untuk membuat media interaksi manusia dan komputer yang lebih baik maka harus mempelajari dan memahami bidang ilmu lain:
a. Teknik Elektronika dan ilmu komputer
Berhubungan dengan perangkat keras untuk merancang sistem interaksi manusia dan komputer.
b. Psikologi
Memahami bagaimana pengguna dapat menggunakan sifat dan kebiasaan baiknya agar dapat menjodohkan mesin dengan manusia sehingga dapat bekerja sama.
c. Perancangan grafis dan tipografi
Memanfaatkan gambar sebagai sarana dialog yang cukup efektif antara manusia dan komputer.
d. Ergonomik
Berhubungan dengan aspek fisik untuk mendapatkan lingkungan kerja yang nyaman ketika berinteraksi dengan komputer.
e. Antropologi
Pandangan mendalam tentang cara kerja berkelompok yang masing-masing anggotanya diharapkan memberikan kontribusi teknologi pengetahuan sesuai dengan bidangnya masing-masing.
f. Linguistik
Bahasa merupakan sarana komunikasi yang akan mengarahkan pengguna ketika ia berinteraksi dengan komputer.
g. Sosiologi
Berkaitan dengan studi tentang pengaruh sistem manusia dengan komputer dalam struktur sosial.
misal : Dampak komputerisasi terhadap keberadaan seorang user disebuah perusahaan.
3. Piranti (alat) Bantu Pengembang Sistem
Keuntungan menggunakan piranti bantu adalah:
a. Antarmuka yang dihasilkan menjadi lebih baik
b. Program antarmukanya menjadi mudah ditulis dan lebih ekonomis dalam pemeliharaannya.
4. Pengelompokan Piranti Bantu
Berdasarkan fungsinya piranti bantu terbagi menjadi 2 yaitu:
a. Piranti bantu Aplikasi (application software)
Program yang biasa dipakai oleh pemakai untuk melakukan tugas-tugas, misalnya membuat dokumen, manipulasi photo dan membuat laporan.
b. Piranti bantu Sistem(System Software)
Program yang digunakan untuk mengontrol sumberdaya komputer seperti CPU dan hardware masukan/keluaran.
5. Strategi Pengembangan Antarmuka/interface
Beberapa hal yang harus diperhatikan :
- Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer.
- Pengetahuan tentang mekanisme fungsi
manusia sebagai pengguna komputer.
- Informasi tentang ragam dialog, struktur, isitekstual
dangrafis, tanggapan waktu, kecepatan tampilan
- Penggunaan prototipe yang disusun secara
bersama-sama antara calon pengguna dan perancang sistem.
- Teknik evaluasi dengan menggunakan uji coba sejumlah kasus, tanya jawab dan kuisioner.
Pertemuan 2
FAKTOR MANUSIA
- Super computer
- Mainframe computer
- Mini computer
- Micro computer,Personal Computer
- Desktop casing
- Minitower, mid-tower, towercasing
- Workstation : station (komputer tempat) bekerja.
- Notebook computer
- Personal Digital Assistant (PDA) /palm top computer
- Cellular Phone
- Tablet PC
- Cluster computer: beberapa komputer (biasanyaPC) bekerja bersama sebagai satu virtual computer.
Sistem Komputer terdiri atas 3 (tiga) aspek :
1. Aspek Perangkat Keras (Hardware).
Serangkaian unsur-unsur yang terdiri dari beberapa perangkat keras komputer yang digunakan untuk membantu proses kerja manusia (Brainware).
Contoh: CPU, Monitor, Keyboard, Harddisk, Diskdrive, dll.
2. Aspek Perangkat Lunak (Software).
Serangkaian unsur-unsur yang terdiri dari beberapa perangkat lunak program komputer yang digunakan untuk membantu proses kerja manusia (Brainware).
Contoh: Sistem Software, Application Software, Package Software.
3.Aspek Manusia (Brainware).
Tenaga pelaksana yang menjalankan serta mengawasi pengoperasian sistem unit komputer didalam proses pengolahan data untuk menghasilkan suatu informasi yang tepat waktu, tepat guna dan akurat.
Contoh: Sistem Analis, Programmer, operator, Technical Support.
Input Device
Peralatan untuk memasukkan data ke dalam representasi yang bisa diterima dan dikomputasi oleh komputer
- Scanner
- Touch Screens
Prosesing
Suatu tindakan yang di dilakukan untuk manipulasi data dan eksekusi
Terdiri dari 5 komponen:
- Memory
- ALU (aritmatik dan Logic unit)
- Register
- Bus
- Control Unit
Memori menyimpan berbagai bentuk informasi sebagai angka biner.
Output Device
Output device bisa diartikan sebagai peralatan yang berfungsi untuk mengeluarkan hasil pemrosesan ataupun pengolahan data yang berasal dari CPU kedalam suatu media yang dapat dibaca oleh manusia
Output device - Monitor
Monitor merupakan salah satu jenis output device yang sangat populer dalam sistem komputer.
Output device - Printer
Printer merupakan media output dari komputer yang bisa menghasilkan tulisan, gambar ataupun grafik didalam media kertas.
Storage device
Media Storage atau media penyimpanan adalah perangkat keras untuk melakukan operasi penulisan, pembacaan dan penyimpanan data.
Media penyimpanan utama sebuah komputer adalah Harddisk.
Faktor manusia (brainware) dalam merancang Antarmuka adalah :
1.Penglihatan
- Luminas
- Kontras
- Kecerahan
- Sudutdan Ketajaman Penglihatan
- Medan Penglihatan
- Warna
3.Sentuhan
4.Pemodelan Sistem Pengolahan
5.Pengendalian Motorik
Pertemuan 3
RAGAM DIALOG
Ragam dialog (Dialoque Style) :
“Cara yang digunakan untuk mengorganisasikan berbagai tehnik dialog”
Beberapa Sifat setiap Ragam Dialog:a.Inisiatif
b.Keluwesan
c.Kompleksitas
d.Kekuatan
e.BebanInformasi
a. Inisiatif
Inisiatif merupakan sifat dasar dari sembarang dialog, karena inisiatif akan menentukan keseluruhan ragam komunikasi sehingga dapat ditentukan tipe-tipe pengguna yang dituju oleh sistem yang dibangun.
Inisiatif oleh pengguna Keterbukaan lebih luas Contoh:commandline
b. Keluwesan
Kemampuan untuk mencapai suatu tujuan lewatcarayangberbeda, Menyediakan sejumlah perintah alternatif dengan hasil yang sama/setara
c. Kompleksitas
Tidak perlu membuat antarmuka lebih dari yang diperlukan Pengelompokan Hirarki, Bayangkan bila tanpa hirarki Terlalu bertingkat juga merepotkan
d. Kekuatan
Jumlah kerja yang dapat dilakukan oleh sistem untuk setiap perintah yang diberikan oleh pengguna, Pengguna mahir: merasa tersiksa bila harus menempuh jalan panjang
e. Beban informasi
Ragam dialog yang terjadi antara komputer dengan manusia lebih menitikberatkan pada penyajian informasi yang dihasilkan komputer kepada pengguna.Agar penyampaian informasi itu dapat berdaya guna dan berhasil guna, beban informasi yang terkandung didalam suatu ragam dialog seharusnya disesuaikan dengan aras pengguna.
Karakteristik Ragam Dialog
a.Konsistensi
b.Umpanbalik
c.Observabilitas
d.Kontrolabilitas
e.Efisiensi
f.Keseimbangan
Kategori Ragam Dialog:
1. Ragam Dialog Interaktif
a. Dialog berbasis perintah tunggal (Command line dialogue).
b. Dialog berbasis bahasa pemrograman (Programming language dialogue).
c. Antarmuka berbasis bahasa alami (Natural language interface).
d. Sistem Menu.
e. Dialog berbasis pengisian formulir (Formfilling dialogue).
f. Antarmuka Berbasis Ikon
g. Sistem Penjendelaan (windowing system)
h. Manipulasi Langsung
i. Antarmuka Berbasis Interaksi Grafis
2. Dialog berbasis perintah tunggal (Command line dialogue).
“Perintah-perintah tunggal yang dioperasikan tergantung dengan sistem operasi komputer yang dipakai“.
contoh:
DOS (dir,delete,format,copy, dll)
Unix / Linux (ls, vi, who, passwd, dll)
3. Dialog berbasis bahasa pemrograman (Programming language dialogue).
“Dialog yang dikemas sejumlah perintah ke dalam suatu bentuk berkas (file) berupa batch file”.
Contoh:
Assembler, Pascal, C, FORTRAN, atau BASIC
4.Antarmuka berbasis bahasa alami (Natural language interface).
“Dialog yang berisikan instruksi-instruksi dalam bahasa alami (manusia) yang diterjemahkan oleh sistem penterjemah“.
Contoh: dalam bahasa Pascal
While not eof (T) do
Begin
Readln (T, S);
If IpSem > 3.0 then
Write ln (nama mahasiswa);
End;
5. Sistem Menu
“Dialog yang menampilkan daftar sejumlah pilihan dalam jumlah terbatas”
Menu adalah daftar sejumlah pilihan dalam jumlah terbatas, yang biasanya berupa suatu kalimat atau kumpulan beberapa kata. Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu.
2 (dua) jenis sistem menu:
1. Sistem Menu Datar (Selektor pilihan)
adalah sistem menuyang menampilkan semua pilihan secara lengkap.
- Sistem Menu Datar (Selektor pilihan)
- Penggunaan Tanda terang (highlight marker)
2. Sistem menu tarik (pulldown)
Sistem menu tarik adalah sistem menu yang akan menampilkan pilihan dalam kelompok-kelompok tertentu.
6. Dialog berbasis pengisian formulir (Form filling dialogue).
“Dialog dimana pengguna (user) dihadapkan ke suatu bentuk formulir dilayar komputer yang berisi sejumlah pengisian data dan opsi (option) yang telah ditentukan”.
7. Antarmuka berbasis ikon (icon)
“Dialog yang menggunakan simbol atau tanda untuk menunjukan suatu pilihan aktifitas tertentu”.8. Sistem Penjendelaan
“Sistem antarmuka yang memungkinkan pengguna untuk menampilkan berbagai informasi pada satu atau lebih jendela (window)“.
Jenis-jenis jendela (window) :
a. Jendela TTY
b. Time-Multiplexed Windows
c. Space multiplex window
d. Non Homogen
9. Manipulasi Langsung.
a. Pengertian
“Penyajian langsung aktifitas kepada pengguna (user) sehingga aktifitas akan dikerjakan oleh komputer ketika pengguna memberikan instruksi langsung yang ada pada layar komputer“.
b.Penerapan:
- Kontrol Proses
- Editor Teks
- Simulator
- Kontrol Lalulintas penerbangan
- PerancanganBentuk/model
- (computer aided design)
Pertemuan 4
Prinsip Desain Antarmuka (Interface)
• Merefleksikan model mental user :
Merefleksikan kombinasi pengalaman dunia riil, pengalaman dari software lain , dan
penggunaan komputer secara umum
• Explicit and Implied Action :
Explicit actions adalah kondisi yang jelas dalam memberikan petunjuk untuk manipulasi
suatu obyek.
• Implied actions adalah kondisi yang hanya memberikan kesan visual untuk memanipulasi obyek.• Direct Manipulation
user mendapatkan dampaknya dengan segera setelah melakukan suatu aksi.
• User Control
mengijinkan user mengontrol dan menginisialisasi aksi.
• Feedback and Communication
selalu memberitahukan user apa yang terjadi dari suatu aksi.
• Consistency
user dapat mentransfer pengetahuan dan kemampuan dari suatu aplikasi ke aplikasi lain.
• WYSIWYG (What You See Is What You Get)
tidak ada perbedaan antara yang dilihat dilayar dengan hasil outputnya.
• Aesthetic Integrity
informasi diorganisasikan denganbaik dan konsisten dengan prinsip desain visual yang baik.
Dokumentasi Desain
- Lingkup Sistem
- Desain Data
- Desain Architectural
- Desain Antarmuka
- Desain Prosedural
- Catatan Khusus
Mengembangkan software yang baik.
• High Performance
• Mudah digunakan
• Penampilan yangbaik
• Reliability
• Mampu beradaptasi
• Interoperability
• Mobility
Mengambil Keputusan Dalam Desain
• Aplikasi semakin membesar, dan menjadi semakin lambat.
• User Interface pada aplikasi semakin kompleks.
• Waktu yang diperlukan untuk mengembangkan fitur baru menjadi lebih lama.
• Dokumentasi aplikasi dan dokumen help menjadi lebih melebar.
• Resiko adanya efek pada fitur yang sudah ada.
• Meningkatkan waktu yang diperlukan untuk memvalidasi aplikasi
Mendesain Layout
Model Aplikasi
Ada 3 Model Aplikasi:
1. Berbasis Dokumen
Contoh : Microsoft Word, Microsoft Excel, Open Office, Corel Draw, Photoshop, dll.
2. BerbasisNon Dokumen
Contoh : Microsoft Outlook, MySQL, MYOB, dll
3. Utilitas
Contoh :Winamp, Media Player, Power DVD, Kaspersky, Norton, F-Secure
Pertemuan 5
PERANTI INTERAKTIF
• Kondisi lingkungan , faktor keselamatan kerja,dan variasi dalam tugas dan hubungannya dengan pekerjaan yanglain harus masuk dalam pertimbangan saat memilih piranti dalam perancangan sistem.
• Demikian pula perlu diperhatikan karakteristik pengguna.
• Pengguna dapat bervariasi dalam pengetahuan, ketrampilan, kemampuan, pengalaman dan lebih jauh variasi dalam kebudayaan dan gender.
PIRANTI INPUT
• Input berhubungan dengan proses perekaman dan pemasukan data kedalam sistem komputer dan
memberi perintah ke komputer.
• Agar dapat berinteraksi dengan sistem komputer secara efektif, pengguna harus mampu
mengkomunikasikan keinginannya dengan cara yang dapat dimengerti sistem komputer.
• Mengendalikan suatu kejadian dalam sistem adalah dengan membantu pengguna untuk menyelesaikan pekerjaannya dengan aman, efektif, efisien,dan jika mungkin menyenangkan.
• Pemilihan piranti input harus memberi kontribusi positif terhadap penggunaan sistem.
• Secara umum piranti input yang paling tepat akan memenuhi salah satu faktor berikut: Pisikolog Pengguna, usia Pengguna tidak dibatasi, Familiar dan Pengalaman.
1. Piranti Masukan Keyboard
Tombol pada papan ketik (keyboard)
dikelompokkan menjadi 4 bagian:
a.Tombol Fungsi (function key)
b.Tombol Alphanumerik (alphanumeric key)
c.Tombol Kontrol (control key)
d.Tombol Numerik (numeric key)
Jenis-jenis Keyboard :
QWERTY
DVORAK
ALPHABETIK
KLONKENBERG
PALANTYPE
STENOTYPE
2. Peranti Penuding dan Pengambil
(Pointingan dpicking device)
“Peranti interaktif yang digunakanuntuk menunjuk / menuding atau menempatkan kursor pada suatu posisi dilayar tampilan dan untuk mengambil suatu item informasi untuk dipindahkan ketempatlain“.
3. Peranti penuding dan pengambil
a. Mouse
b.Joystick
c.Trackball
d.Pointing Stick
e. Touch Pad
f. Touch Screen
g. Digitizing tablet / Graphics tablet
h. LightPen
4. Pengambilan Gambar Terformat
Dipergunakan untuk mengambil citra terformat, bentuk dan format hurufnya sudah ditentukan.
Kategori peranti ini adalah:
a. Barcode Reader
Polagaris-garis hitam putih yang sering djumpai pada barang-barang yang dijual ditoko swalayan.
b. Magnetic Ink Character Recognation (MICR)
Digunakan untuk membaca karakter-karakter khusus yang dicetak dengan tinta khusus pula.
c. Optical Mark Recognation (OMR)
Peranti yang membaca tulisan pensil dan mengubahnya menjadi bentuk yang dapat dibaca oleh
komputer dengan bantuan refleksi optikdengan mengenali ketebalan tulisan.
d. Optical Character Recognation (OCR)
Peranti yang dapat membaca teks dengan mengonversikannya kedalam kode digital.Dapatmengubah teks menjadi suara , merekam naskah.
5. Pengambil Gambar tak Terformat
Dipergunakan untuk mengambil gambar atau citra yang belum memiliki format baku.
Kategori peranti ini adalah:
a. Image Scanner
Peranti yang dapat mengambil masukan data gambar, foto bahkan juga tulisan tangan. Hasilnya kemudian diubah menjadi menjadi isyarat digital.
b. Kamera digital
Mengubah citra optik kesebuah replika film atau elektronis. Menggunakan lensa untuk membuat citra dari sebuah obyek.
c. Pembaca Retina Mata
Berfungsi membaca retina mata dan menghasilkan identitas retina mata
6. Gerakan
Peranti yang digunakan untuk memantau gerakan manusia yang banyak dimanfaatkan pada virtual reality adalah:
a. Headset
Peranti yang dipasang dikepala , menutup mata, yang digunakan untuk menangkap dan merekam gerakan kepala , serta menayangkan berbagai macam gambar kemata pemakai.
b.Glove
Peranti berbentuk sarung tangan yang digunakan untuk merekam jenis serta kekuatan gerakan jari dan tangan pemakai
7. Layar Tampilan terdiri dari :
a. Pengingat digital (frame buffer)
b. Pengendali tampilan (display controller)
c. Pengolah Tampilan (display processor)
8. Tipe Layar Tampilan
a. Direct-drive Monochrome Monitor
b. Composite Monochrome Monitor
c. Composite Color Monitor
d. Red-Green-Blue Monitor
e. Variable Frequency
Pertemuan 6
Design Interface
(Perancangan Tampilan)
1. Cara Pendekatan
a. Program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula (special purpose software).
b. Program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software), yang juga sering dikenal dengan sebutan public software.
2. Prinsip dan Petunjuk Perancangan
a. Urutan Perancangan
- Pemilihan ragam dialog
- Perancangan struktur dialog
- Perancangan format pesan
- Perancangan penanganan kesalahan
- Perancangan struktur data
b. Perancangan tampilan berbasis teks
- Urutan penyajian
- Kelonggaran
- Pengelompokan
- Relevansi
- Konsistensi
- Kesederhanaan
c. Perancangan tampilan berbasis Grafis
Terdapat 5 faktor yang diperlukan yaitu:
- Ilusi pada obyek-obyek.
- Urutan visual dan fokus pengguna.
- StrukturInternal.
- Kosa kata grafis yang konsistensi dan sesuai.
- Kesesuaian dengan media.
d. Waktu tanggap
e. Penanganan Kesalahan
Kesalahan dibagi menjadi dua:
-Kesalahan compile-time error
-Kesalahan run time error atau fatal error
3. Peranti Bantu Sederhana
Peranti bantu yang dijelaskan hanya berbentuk lembaran kertas kosong diberi nama dengan Lembar Kerja Tampilan (LKT)
LKT yang disajikan atase mpat bagian yaitu:
a.Nomor lembar kerja
b.Bagian tampilan
c.Bagian Navigator
d.Bagian keterangan
4. Jaring Semantik Tampilan
Jaring semantik tampilan terdiri atas dua komponen: nomor tampilan (lembar kerja) dan transisi yang menyebabkan perpindahan ketampilan yang lain (sesuai dengan isi bagian navigasi pada rancangan tampilan).
Pertemuan 9
Graphical User Interface (GUI)
Pendahuluan
Graphical User Interface (GUI) adalah bentuk dialog atau komunikasi antara manusia dan komputer yang berbentuk grafis dan sangat atraktif”.
Contoh antarmuka manusia dengan komputer yang berbentuk grafis menggunakan pemrograman visual (Visual Basic, Visual Foxpro, Delphi dan lain-lain).
Sistem Operasi Windows merupakan sistem operasi berbasis Grafis Windows menyediakan suatu pustaka yang berisi kumpulan dari ratusan fungsi yang disebut
Windows API (Application Programming Interface)
Pemrograman grafis pada sistem operasi Windows selalu menggunakan antarmuka yang disebut GDI (Graphics Device Interface)
Dalam pembahasan GUI akan digunakan bahasa pemrograman Visual Basic 6.0 Visual Basic 6.0 merupakan salah satu bahasa pemrograman yang mendukung GUI
Desain Suatu Program Grafis ditentukan oleh komposisi gambar-gambar yang digunakan meliputi Letak dari obyek gambar pada screen (Sistem Koordinat), Tata warna yang digunakan (Pewarnaan), Ukuran dll
Desain Suatu Program Grafis ditentukan oleh komposisi gambar-gambar yang digunakan meliputi Letak dari obyek gambar pada screen (Sistem Koordinat), Tata warna yang digunakan (Pewarnaan), Ukuran dll
Sistem Koordinat
Sistem Koordinat merupakan letak dari objekgambar dimonitor.
Sebagian besar kegiatan pada pemrograman grafis bekerja dengan sistem kordinat ,seperti berpindah tempat,perubahan ukuran dan sebagainya.
Hal-hal tersebut akan terlihat jika anda membuat program animasi
Sistem koordinat pada pemrograman Windows terdiri dari:
a.Koordinat Fisik
b.Koordinat Logika
Pengaturan Warna (Pewarnaan)
- Pemakaian warna dalam pemrograman grafis bisa dikatakan sangat dominan
- Pemakaian kombinasi warna yang serasi akan membuat tampilan objek lebih menarik
- Visual Basic 6.0 menyediakan fungsi RGB (Red Green Blue)
- Pada dasarnya seluruh warna yang ada bermula dari Merah, Hijau dan Biru
- Semua warna bisa dihasilkan dari campuran ketiga warna primer tersebut
Membuat garis
- Membuat garis dapat dilakukan dengan mengklik icon Line pada toolbox
Membuat kotak, Oval, Lingkaran
- Klik Icon Shape kemudian pilih bentuk pada properti shape
Membuat Grafik
Langkah-langkah dalam pembuatan Grafik:
- Aktifkan komponen grafik dengan cara buka menu Project dan klik Components
- Pada kotak dialog Components klik tab Controls
- Berikan checklist pada Microsoft Chart Control
- Muncul icon MSChart
Membuat Circle
Digunakan untuk menggambar lingkaran, ellips atau garis lengkung. Bentuk penulisan dari metode circle adalah sbb:
Object Circle [step] (x,y), Radius, [Color, start, end, aspect]
Pertemuan 10
ASPEK ERGONOMIK
Aspek Ergonomik
Ergonomik adalah faktor kenyamanan kerja yang mempunyai pengaruh nyata dalam hal peningkatan maupun penurunan efisiensi dan efektifitas kerja.
Beberapa Aspek yang berhubungan dengan Ergonomik yaitu:
1. Pengukuran dan Antropometrik
2. Aspek Ergonomik dari stasiun kerja
3. Pencahayaan
4. Suhu dan Kualitas Udara
5. Gangguan Suara
6. Kesehatan dan Keamanan Kerja
7. Kebiasaan Dalam Bekerja
Pertemuan 11
Pembuatan Komponen
Antarmuka Grafis
Komponen Antarmuka Grafis
Adalah bentuk–bentuk tampilan antarmuka yang dipakai pada paket–paket program aplikasi, baik yang bekerja pada mode teks maupun pada mode grafik
Komponen Antarmuka grafis antaralain:
1. Tombol Tekan
Digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut ditekan menggunakan mouse (Click Mouse).
2. Spin Box
Pada dasarnya, sebuah spinbox digunakan untuk menampilkan suatu peubah
3. List Box
Pada dasarnya, sebuah listbox hanya terdiri atas bagian yang digunakan untuk menampilkan pilihan-pilihan yang tersedia.
4. Combo Box
Mempunyai fungsi yang sama dengan listbox, yaitu untuk menampilkan sejumlah pilihan yang dapat dipilih secara bebas oleh pengguna.
5. Tombol Radio
Sejumlah pilihan yang memungkinkan pengguna untuk memilih salah satu pilihan yang tersedia, pilihan tersebut dapat bernilai on atau off yang ditandai dengan tanda tertentu.
6. Check Box
Sejumlah pilihan yang memungkinkan pengguna untuk memilih salah satu atau lebih pilihan yang tersedia.
7. Label Box
Digunakan untuk memberikan komentar atau memberi nama pada masing–masing komponen antarmuka grafis
1. Memilih Jenis Window
2. Mendesain bagian window
- Shape Window
3. Mendesain Primary Window
Primary window umumnya mempresentasikan data user seperti dokumen teks pada aplikasi word processor, gambar pada aplikasi pengolah gambar, spread sheet pada aplikasi seperti excel, dsb.
2. Window Commands
Pada primary window, mempunyai beberapa perintah yang terdapat pada control boxnya :
• Close:Keluar dari window
• Maximize: Memperbesar Window
• Minimize: Memperkecil tampilan window
• Restore Down: Kembali ke tampilan awal
3. Hubungan dengan dokumen dan window
- Window ini dapat menggunakan panned, tabbed, atau menampilkan lebih dari satu sekaligus.
4. Mendesain Utility Window
• Instanst Apply
Window yang mengijinkan user mengubah nilai atau setting seperti property atau preference, update nilai–nilai atau setting akan serta merta membuat perubahan pada window
• Explicit Apply
Window yang dapat merubah suatu nilai–nilai dengan secara eksplisit.
Ciri khas explicit apply yaitu mempunyai 3 button:
1.Apply
2.Cancel
3.Ok
• Property Window
Adalah tempat user dapat melihat dan mengubah karakteristik sebuah objek, seperti dokumen ,file , atau aplikasi.
• Preferences Window
Adalah window tempat user dapat memodifikasi tampilan window maupun tingkah lakunya.
• Toolboxes
Window untuk mengakses sekumpulan aksi maupun toggle dengan tampilan toolbar kecil seperti button.
• Toolbox Categories
Pengelompokkan Toolbox berdasarkan fungsinya
5. Mendesain Alerts
Alert menyediakan informasi tentang keadaan sebuah sistem aplikasi atau menanyakan informasi penting tentang proses selanjutnya dari sebuah task khusus
• Alert Text
Terdiri dari dua jenis:
1.Primary text,
2.Secondary text
• Alerts Button
Button–button yang biasa ada di alert:
Cancel, Help, Yes, No, Save, Abort, dsb
• Spacing and Positioning
Pedoman membuat alert:
- Border mengelilingi semua sisi alert
- Spasi antara icon dan teks adalah 12 pixel
- Spasi horizontal antar button adalah 6 pixel
- Spasi di bawah baik primary text maupun secondary text adalah 24 pixel
• Information Alerts
Memberitahukan sebuah informasi kepada user sebelum melanjutkan aksinya atau menampilkan informasi yang memang diminta oleh user.
• Error Alerts
Digunakan untuk menampilkan peringatan error saat
operasi yang diminta tidak dapat dilakukan secara
lengkap.
• Confirmation Alerts
Melakukan konfirmasi ketika user ingin menghapus datanya atau melakukan aktivitas yang akan menimbulkan resiko.
• Save Confirmation Alerts
Membantu user agar tidak kehilangan dokumen / perubahan pada dokumen ketika menutup aplikasi.
• Authentication Alerts
Memaksa user memasukkan informasi yang diperlukan
untuk dapat mengakses informasi lebih lanjut.
6. Mendesain Dialog Boxes
Dialogboxes (kotak dialog) menyediakan pertukaran informasi, atau dialog, antara user dan aplikasi. Dapat menggunakan kotak dialog untuk menangkap informasi yang diperlukan dari user untuk tugas atau aksi tertentu, misalkan percetakan
• Pedoman umum membuat kotak dialog:
• Additional Button
Kita dapat menambahkan button tambahan selain affirmative button (tombol persetujuan) dan cancel
• Layout
Sebaiknya menyusun kontrol dengan memperhatikan arah pengguna aplikasi membaca dimana umumnya biasanya dari kiri kekanan dan dari atas kebawah.
Pendahuluan
Bertujuan untuk melihat sejauh mana tingkat usabilitas dari fungsi-fungsi pada website ini,serta melihat desain antarmukanya, dan juga beberapa saran perbaikan fungsi-fungsi dan antarmuka yang baik untuk meningkatkan usabilitas dari website tersebut.
Contoh Analisa dan hasil analisa
Bagian Kiri
• Navigasi yang Membingungkan danTidak Efisien
• Menu-menu Tidak Tersusun Rapi
Bagian Tengah
• Kontrol yang Kurang Lengkap
• Inkonsistensi Penggunaan Bahasa
• Inkonsistensi Desain Link
• Inkonsistensi Desain Penulisan (dalam penggunaan font)
• Tampilan tidak tersusun rapi
• Grouping tanpa dasar pengelompokan yang jelas
• Inkonsistensi Desain Link
• Tampilan yang tidak tersusun dan kurang rapi
• Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi
Bagian Kanan
• Page scroling yang tidak efisien
• Desain yang kurang rapi dan tidak konsisten
• Ketidakjelasan dalam penggunaan fungsi sebagai pemenuhan kebutuhan pengguna.
• Tampilan tidak tersusun rapi dan fungsi serta control yang membingungkan
• Derajad Kepentingan dalam Desain Tampilan Informasi
Pertemuan 12
Mendesain Window
- Document window
- Application window
- Utility window
- Dialogs and Alerts
2. Mendesain bagian window
- Mendesain Title
- Mendesain Border and Windows Command
- Shape Window
- Modality
- Focus
3. Mendesain Primary Window
2. Window Commands
Pada primary window, mempunyai beberapa perintah yang terdapat pada control boxnya :
• Close:Keluar dari window
• Maximize: Memperbesar Window
• Minimize: Memperkecil tampilan window
• Restore Down: Kembali ke tampilan awal
3. Hubungan dengan dokumen dan window
- Single Document Interface (SDI)
- Controlled Single Document Interface (CSDI)
- Multiple Document Interface (MDI)
- Window ini dapat menggunakan panned, tabbed, atau menampilkan lebih dari satu sekaligus.
4. Mendesain Utility Window
• Instanst Apply
Window yang mengijinkan user mengubah nilai atau setting seperti property atau preference, update nilai–nilai atau setting akan serta merta membuat perubahan pada window
• Explicit Apply
Window yang dapat merubah suatu nilai–nilai dengan secara eksplisit.
Ciri khas explicit apply yaitu mempunyai 3 button:
1.Apply
2.Cancel
3.Ok
• Property Window
Adalah tempat user dapat melihat dan mengubah karakteristik sebuah objek, seperti dokumen ,file , atau aplikasi.
• Preferences Window
Adalah window tempat user dapat memodifikasi tampilan window maupun tingkah lakunya.
• Toolboxes
Window untuk mengakses sekumpulan aksi maupun toggle dengan tampilan toolbar kecil seperti button.
• Toolbox Categories
Pengelompokkan Toolbox berdasarkan fungsinya
5. Mendesain Alerts
Alert menyediakan informasi tentang keadaan sebuah sistem aplikasi atau menanyakan informasi penting tentang proses selanjutnya dari sebuah task khusus
• Alert Text
Terdiri dari dua jenis:
1.Primary text,
2.Secondary text
• Alerts Button
Button–button yang biasa ada di alert:
Cancel, Help, Yes, No, Save, Abort, dsb
• Spacing and Positioning
Pedoman membuat alert:
- Border mengelilingi semua sisi alert
- Spasi antara icon dan teks adalah 12 pixel
- Spasi horizontal antar button adalah 6 pixel
- Spasi di bawah baik primary text maupun secondary text adalah 24 pixel
• Information Alerts
Memberitahukan sebuah informasi kepada user sebelum melanjutkan aksinya atau menampilkan informasi yang memang diminta oleh user.
• Error Alerts
Digunakan untuk menampilkan peringatan error saat
operasi yang diminta tidak dapat dilakukan secara
lengkap.
• Confirmation Alerts
Melakukan konfirmasi ketika user ingin menghapus datanya atau melakukan aktivitas yang akan menimbulkan resiko.
• Save Confirmation Alerts
Membantu user agar tidak kehilangan dokumen / perubahan pada dokumen ketika menutup aplikasi.
• Authentication Alerts
Memaksa user memasukkan informasi yang diperlukan
untuk dapat mengakses informasi lebih lanjut.
6. Mendesain Dialog Boxes
Dialogboxes (kotak dialog) menyediakan pertukaran informasi, atau dialog, antara user dan aplikasi. Dapat menggunakan kotak dialog untuk menangkap informasi yang diperlukan dari user untuk tugas atau aksi tertentu, misalkan percetakan
• Pedoman umum membuat kotak dialog:
• Additional Button
Kita dapat menambahkan button tambahan selain affirmative button (tombol persetujuan) dan cancel
• Layout
Sebaiknya menyusun kontrol dengan memperhatikan arah pengguna aplikasi membaca dimana umumnya biasanya dari kiri kekanan dan dari atas kebawah.
Pertemuan 13
Analisa Mengenai Antarmuka, Desain Layar, Dan Usabilitas IMK Berbasis Web
Bertujuan untuk melihat sejauh mana tingkat usabilitas dari fungsi-fungsi pada website ini,serta melihat desain antarmukanya, dan juga beberapa saran perbaikan fungsi-fungsi dan antarmuka yang baik untuk meningkatkan usabilitas dari website tersebut.
Contoh Analisa dan hasil analisa
• Navigasi yang Membingungkan danTidak Efisien
• Menu-menu Tidak Tersusun Rapi
Bagian Tengah
• Kontrol yang Kurang Lengkap
• Inkonsistensi Penggunaan Bahasa
• Inkonsistensi Desain Link
• Inkonsistensi Desain Penulisan (dalam penggunaan font)
• Tampilan tidak tersusun rapi
• Grouping tanpa dasar pengelompokan yang jelas
• Inkonsistensi Desain Link
• Tampilan yang tidak tersusun dan kurang rapi
• Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi
Bagian Kanan
• Page scroling yang tidak efisien
• Desain yang kurang rapi dan tidak konsisten
• Ketidakjelasan dalam penggunaan fungsi sebagai pemenuhan kebutuhan pengguna.
• Tampilan tidak tersusun rapi dan fungsi serta control yang membingungkan
• Derajad Kepentingan dalam Desain Tampilan Informasi
