Pertemuan 1
PENGENALAN IMK
Apa itu IMK?
– Secara sederhana IMK adalah studi tentang
manusia,teknologi komputer dan cara bagaimana
mereka saling berinteraksi.
– Kita mempelajari IMK untuk dapat menentukan
bagaimana membuat agar teknologi komputer dapat
lebih berguna bagi manusia
Apa itu IMK?
Hal tersebut membutuhkan pemahaman tentang tiga hal,
yaitu:
• Teknologi komputer
• Manusia yang akan berinteraksi dengannya
• Dan apa yang dimaksud dengan “lebih berguna”
(more usable) “IMK adalah apa yang terjadi saat pengguna
manusia dan sistem komputer bersama-
sama menyelesaikan suatu tugas /
pekerjaan”.
Apa itu IMK?
Bidang Ilmu Interaksi Manusia dan Komputer adalah:
“Ilmu yang mempelajari bagaimana mendesain,
mengevaluasi dan mengimplementasikan sistem
komputer yang interaktif sehingga dapat digunakan oleh
manusia dengan mudah ”
Definisi Interaksi Manusia dan Komputer :
“Sebuah hubungan antara manusia dan komputer
yang mempunyai karakteristik tertentu untuk mencapai
suatu tujuan tertentu dengan menjalankan sebuah
sistem yang menggunakan antarmuka (interface).” 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 (punch card).
• Hanya sedikit yang diketahui tentang bagaimana
membuatnya mudah untuk digunakan. ENIAC 1 Program ENIAC ILLIAC II 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 harga komputer 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
Perubahan teknologi di atas 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 Kebutuhan Perancangan yang Berbeda
Agar komputer dapat diterima secara luas dan
digunakan secara efektif, maka perlu dirancang secara
baik. Hal ini tidak berarti bahwa semua sistem harus
dirancang agar dapat mengakomodasi semua orang,
namun komputer perlu dirancang agar memenuhi dan
mempunyai kemampuan sesuai dengan kebutuhan
pengguna secara spesifik. Istilah IMK / HCI
Pada tahun 1970 mulai dikenal istilah antarmuka
pengguna (user interface), 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 IMK / HCI
Istilah human-computer interaction (HCI) mulai
muncul pertengahan tahun 1980-an sebagai bidang studi
yang baru.
Istilah HCI mengisyaratkan bahwa bidang studi ini
mempunyai fokus yang lebih luas, tidak hanya sekedar
perancangan antarmuka secara fisik. Istilah IMK / HCI
HCI didefinisikan sebagai disiplin ilmu yang
berhubungan dengan perancangan, evaluasi, dan
implementasi sistem komputer interaktif untuk digunakan
oleh manusia dan studi tentang fenomena di sekitarnya.
HCI pada prinsipnya membuat agar sistem dapat
berdialog dengan penggunanya seramah mungkin. Definisi Antarmuka Manusia dan Komputer
“Media yang memungkinkan manusia berinteraksi
dengan komputer untuk memberikan suatu perintah
kepada komputer ”
Sebuah program aplikasi terdiri dari 2 bagian yaitu:
- Bagian Antarmuka.
- Bagian Aplikasi.
Media antarmuka manusia dan komputer terbagi
menjadi 2 yaitu :
a. Media tekstual
b. 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++. Contoh listing program dengan Borland C++ :
#include <stdio.h>
#include <conio.h>
main()
{
clrscr();
printf("Selamat Belajar\n");
printf("Borland C++");
getch();
}
/------------------------------------/
OUTPUT : b. Media GUI (Graphical User Interface) 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).
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 bekerjasama.
2. Bidang Studi 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 di sebuah perusahaan.
Untuk mempercepat proses perancangan dan
pengembangan antarmuka (interface) diperlukan piranti
pengembangan sistem seperti pemrogaman visual
(Visual Basic, Visual Foxpro, Delphi, Visual C++ dan
lain-lain).
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,isi tekstual
dan grafis, 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 Jenis-Jenis Komputer
• Super computer
• Mainframe computer
• Mini computer
• Micro computer, Personal Computer
Desktop casing
Minitower, mid-tower, tower casing
• Workstation : station (komputer tempat) bekerja.
• Notebook computer
• Personal Digital Assistant(PDA) / palmtop computer
Cellular Phone
Tablet PC
• Cluster computer : beberapa komputer (biasanya PC)
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, Disk drive,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. Hadware(Perangkat keras) Input Device
• Peralatan untuk memasukkan data ke dalam
representasi yang bisa diterima dan dikomputasi oleh
komputer
• Macam Representasi Data
– Character
– Integer
– Real
– Boolean
– Image (Bit Map)
– Video(kumpulan frame) Input Devices-Scanners
• Scanner adalah peralatan input data yang
menangkap satu halaman (teks/gambar) dan
kemudian menterjemahkan ke dalam data digital
berbentuk BitMap Input Device:Touch Screens
A touch screen adalah layar monitor yang bisa merespon
sentuhan tangan manusia pada permukaan layarnya,
Sebagai alternatif untuk memilih menu atau Icon selain
dengan mouse.
Caranya jari kita menggantikan pointer mouse 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 Memory
Memori menyimpan berbagai bentuk informasi
sebagai angka biner. Informasi yang belum berbentuk
biner akan dipecahkan (encoded) dengan sejumlah
instruksi yang mengubahnya menjadi sebuah angka atau
urutan angka-angka.
Contoh: Huruf F disimpan sebagai angka desimal 70
(atau angka biner ) menggunakan salah satu metode
pemecahan. 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
ataupun dapat digunakan untuk penyimpanan data hasil
proses Monitor – Output device
Monitor merupakan salah satu jenis output device
yang sangat populer dalam sistem komputer. Secara
phisik, monitor mempunyai bentuk seperti halnya layar
televisi dan fungsinya untuk menampilkan data dan
informasi yang berguna bagi para pemakai komputer. Printer – Output device
Printer merupakan media output dari komputer
yang bisa menghasilkan tulisan, gambar ataupun grafik
didalam media kertas. Banyak sekali jenis printer yang
bisa dijumpai, baik ditinjau dari segi ukuran, kecepatan,
harga, kualitas ataupun teknik peng-operasiannya. 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. Disinilah data dan program aplikasi
(software) disimpan. Disamping Harddisk media
penyimpanan yang lainnya adalah disket dan CD. 1. Penglihatan
Dalam dunia nyata, mata selalu digunakan untuk
melihat semua bentuk tiga dimensi. Dalam sistem
komputer, yang menggunakan layar dua dimensi, mata
kiri dipaksa untuk dapat mengerti bahwa obyek pada
layar tampilan, yang sesungguhnya berupa obyek dua
dimensi, harus dipahami sebagai obyek tiga dimensi
dengan teknik-teknik tertentu.
Faktor manusia (brainware) dalam merancang
Antarmuka adalah : a. Luminas
banyaknya cahaya yang dipantulkan oleh
permukaan obyek. Semakin besar luminans dari sebuah
obyek,rincian obyek yang dapat dilihat oleh mata juga
akan semakin bertambah.
b. Kontras
hubungan antara cahaya yang dikeluarkan oleh
suatu obyek dan cahaya dari latar belakang obyek
tersebut. c. Kecerahan
tanggapan subyektif pada cahaya.
d. Sudut dan Ketajaman Penglihatan
Sudut penglihatan (visual angle) didefinisikan
sebagai sudut yang berhadapan oleh objek pada mata.
Ketajaman penglihatan (visual acuity) adalah sudut
penglihatan minimum ketika mata masih dapat melihat
sebuah objek dengan jelas e. Medan Penglihatan
sudut yang dibentuk ketika mata bergerak ke kiri
terjauh dan ke kanan terjauh
f. Warna
Cahaya tampak merupakan sebagian kecil dari
spektrum elektromagnetik Kebanyakan manusia mendeteksi suara dalam
frekuensi 20 Hertz – 20 Khertz Manusia juga mendengar
suara antara 50 dB (decible) – 70 dB.
Telinga manusia akan rusak mendengar lebih dari
140 dB. Manusia tidak mendengar frekuensi kurang dari
20 dB
2. Pendengaran Sentuhan merupakan sarana manusia untuk
berinteraksi.
contoh dalam penggunaan papan ketik
(keyboard) atau tombol, maka manusia akan lebih
nyaman apabila tombol atau keyboard tidak berat proses
penekanannya.
3. Sentuhan Model sistem pengolahan manusia terdiri dari
pengolahan perseptual, pengolahan intelektual dan
pengendalian motorik yang beinteraksi dengan memori
manusia.
Model sistem komputer terdiri dari pengolah
(processor) dan memori. Interaksi keduanya melalui bus
4. Pemodelan Sistem Pengolahan Pengendalian motorik pada manusia dapat dilatih untuk
mencapai taraf tertentu seperti mengetik 10 jari untuk
kecepatan 1000 huruf permenit
5. Pengendalian Motorik
Pengendalian motorik pada manusia dapat dilatih untuk
mencapai taraf tertentu seperti mengetik 10 jari untuk
kecepatan 1000 huruf permenit
Pertemuan 3
RAGAM DIALOG “Cara yang digunakan untuk mengorganisasikan
berbagai tehnik dialog”
Beberapa Sifat setiap Ragam Dialog :
a.Inisiatif
b.Keluwesan
c.Kompleksitas
d.Kekuatan
e.Beban Informasi
Ragam dialog (Dialoque Style) : 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 komputer Pengguna memberikan
tanggapan atas arahan dari Komputer Definisi himpunan
yang ditetapkan sebelumnya Contoh: yes/no, menu
Inisiatif oleh pengguna Keterbukaan lebih luas
Contoh: command line
a. Inisiatif Kemampuan untuk mencapai suatu tujuan lewat
cara yang berbeda, Menyediakan sejumlah perintah
alternatif dengan hasil yang sama/setara
Shortcut Menyesuaikan diri dengan kemampuan
pengguna (customized) Menu pemula dan mahir
Shortcut, command line
b. Keluwesan Tidak perlu membuat antarmuka lebih dari yang
diperlukan Pengelompokan Hirarki, Bayangkan bila
tanpa hirarki Terlalu bertingkat juga merepotkan
c. Kompleksitas Jumlah kerja yang dapat dilakukan oleh sistem
untuk setiap perintah yang diberikan oleh pengguna,
Pengguna mahir: merasa tersiksa bila harus menempuh
jalan panjang
d. Kekuatan Ragam dialog yang terjadi antara komputer
dengan manusia lebih menitik beratkan pada penyajian
informasi yang dihasilkan komputer kepada pengguna.
Agar penyampaian informasi itu dapat berdaya guna dan
berhasil guna, beban informasi yang terkandung di
dalam suatu ragam dialog seharusnya disesuaikan
dengan aras pengguna.
e. Beban informasi Karakteristik Ragam Dialog
a. Konsistensi
b. Umpan balik
c. Observabilitas
d. Kontrolabilitas
e. Efisiensi
f. Keseimbangan a. Konsistensi
Atribut yang sangat penting untuk membantu
pengguna dalam mengembangkan mentalitas yang
diperlukan dalam pengoperasian sebuah sistem
komputer. b. Umpan balik
Ketika sebuah program aplikasi sedang
dijalankan, pengguna seringkali harus menunggu sampai
komputer menampilkan hasil yang ia inginkan. Tetapi,
pada program komputer yang tidak ramah, pengguna
sering harus menunggu proses yang sedang berjalan,
sementara pengguna tidak mengetahui status proses
saat itu, apakah sedang melakukan komputasi, sedang
mencetak hasil, atau bahkan komputernya macet (hang)
karena suatu sebab. c. Observabilitas
Sistem dikatakan mempunyai sifat observabilitas
apabila sistem itu berfungsi secara benar dan nampak
sederhana bagi pengguna, meskipun sesungguhnya
pengolahan secara internalnya sangat rumit d. Kontrolabilitas
Kontrolabilitas merupakan kebalikan dari
observabilitas, dan hal ini berimplikasi bahwa sistem
selalu berada di bawah kontrol pengguna. Agar hal ini
tidak tercapai, antarmukanya harus mempunyai sarana
yang memungkinkan pengguna untuk dapat melakukan
kendali. e. Efesiensi
Efisiensi dalam sistem komputer yang melibatkan
unjuk kerja manusia dan komputer secara bersama-sama
adalah throughput yang diperoleh dari kerjasama antara
manusia dan komputer. Sehingga, meskipun efisiensi
dalam aspek rekayasa perangkat lunak sistem menjadi
sangat penting jika mereka berpengaruh pada waktu
tanggap atau laju penampilan sistem, seringkali perancang
lebih memilih untuk memanfaatkan hasil teknologi baru
untuk meminimalkan ongkos pengembangan sistem.
Sebaliknya, tidak dapat dipungkiri bahwa biaya personal
dari seorang ahli semakin meningkat dari waktu ke waktu. f. Keseimbangan
Strategi yang diambil dalam perancangan
sembarang sistem manusia-komputer haruslah dapat
membagi-bagi pekerjaan antara manusia dan komputer
seoptimal mungkin 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
(Form filling dialogue).
f. Antarmuka Berbasis Ikon
g. Sistem Penjendelaan (windowing
system)
h. Manipulasi Langsung
i. Antarmuka Berbasis Interaksi Grafis “Perintah-perintah tunggal yang dioperasikan tergantung
dengan sistem operasi komputer yang dipakai “.
Dialog berbasis perintah tunggal (command line
dialogue) dapat dikatakan merupakan ragam yang paling
konvensional. Bahasa perintah harus dirancang sedemikian
rupa sehingga mereka mempunyai sifat alamiah, yakni mudah
dipelajari dan diingat oleh kebanyakan pengguna. Meskipun
bersifat buatan, bahasa buatan ini tetap mempunyai struktur
leksikal, sintaksis, dan semantik tertentu.
contoh :
DOS (dir, delete, format, copy, dll)
Unix / Linux (ls, vi, who, passwd, dll)
2. Dialog berbasis perintah tunggal
(Command line dialogue). 3. Dialog berbasis bahasa pemrograman
(Programming language dialogue).
“Dialog yang dikemas sejumlah perintah ke dalam suatu
bentuk berkas (file) berupa batch file”.
Dalam keadaan tertentu, penggunaan dialog berbasis
perintah tunggal sering tidak memadai, khususnya
ketika pengguna harus memberikan sederetan perintah-
perintah yang sama setiap kali ia menjalankan program
aplikasi tersebut. Dialog berbasis bahasa pemrograman
merupakan ragam dialog yang memungkinkan
pengguna untuk mengemas sejumlah perintah ke
dalam suatu berkas yang sering disebut dengan batch
file.
Contoh :
Assembler, Pascal, C, FORTRAN, atau BASIC “Dialog yang berisikan instruksi-instruksi dalam bahasa
alami (manusia) yang diterjemahkan oleh sistem penterjemah“.
Jika dialog berbasis perintah tunggal instruksinya sangat
dibatasi oleh sintaksis yang digunakan Dengan bahasa alami,
pengguna dapat memberikan instruksinya dengan kalimat –
kalimat yang lebih manusiawi. Kata-kata/ bahasa sehari-hari
bisa digunakan, seperti DISPLAY ALL dalam dBase
Contoh : dalam bahasa Pascal
While not eof(T) do
Begin
Readln(T,S);
If IpSem > 3.0 then
Writeln(namamahasiswa);
End;
4. Antarmuka berbasis bahasa alami(Natural
language interface).
“ 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 adalah sistem menu yang
menampilkan semua pilihan secara lengkap.
5. Sistem Menu a. Sistem Menu Datar (Selektor pilihan)
Dalam menentukan jenis selektor yang akan digunakan
(angka, huruf, atau kombinasinya) salah satu bahan
pertimbangannya adalah banyaknya pilihan yang akan
disediakan.Penggunaan selektor yang berupa angka (tidak
termasuk angka 10)
Tetapi jika jumlah pilihan lebih dari 10 buah, penggunaan
selektor yang berupa angka kurang cocok, karena pengguna
harus menekan dua buah tombol untuk memilih pilihan
dengan nomor elektor 10 atau lebih, Keadaan seperti ini
tidak selalu diinginkan, bagi pengguna.Jika menggunakan
selektor berupa huruf, karena kita mempunyai 26 huruf
alphabet. Jika cacah pilihan lebih besar dari 26 buah,
selektornya dapat berupa campuran angka dan huruf. b. Penggunaan Tanda terang (highlight marker)
Cara lain untuk menentukan pilihan pada daftar menu
datar adalah menggunakan suatu mekanisme yang
disebut tanda terang (highlight marker) yang dapat
digerakkan pada semua pilihan yang ada dilayar (lihat
contoh pada Gambar 3.7) Dengan cara ini, pengguna –
dengan bantuan tombol khusus seperti , , , atau ,
atau dengan menggunakan mouse – memenpatkan
tanda terang ke suatu pilihan yang ia inginkan.
Kemudian, pengguan harus menekan tombol Enter atau
mengklik mouse untuk mengkonfirmasikan pilihannya. Contoh Sistem menu Datar
Menu (1)
Makanan Minuman
• Nasi goreng Es the
• Mie ayam Es jeruk
• Mie bakwan Jus apokat
• Soto ayam Contoh Sistem menu Datar
Menu (2) 2. Sistem menu tarik (pulldown) yang berbasis pada
struktur hirarki pilihan (struktur pohon pilihan). Sistem
menu tarik adalah sistem menu yang akan menampilkan
pilihan dalam kelompok-kelompok tertentu. Pada
Sebuah subpilihan/submenu dari suatu pilihan/menu utama
dapat mempunyai satu atau labih sub-subpilihan, dan
seterusnya. Contoh Sistem Menu Tarik (Pulldown) “ Dialog dimana pengguna (user) dihadapkan ke suatu
bentuk formulir dilayar komputer yang berisi sejumlah
pengisian data dan opsi (option) yang telah ditentukan ”.
Sebagai dasar untuk pendataan Layar berbentuk formulir
Data diinputkan pada kolom-kolom yang telah tersedia
Perlu rancangan yang baik dan ada fasilitas perbaikan
(koreksi)
6. Dialog berbasis pengisian formulir
(Form filling dialogue). Contoh Dialog berbasis pengisian formulir
(Form filling dialogue). Sejalan dengan penggunaan simbol-simbol dan
tanda-tanda kehidupan kita sehari-hari, antarmuka sering
memanfaatkan simbol-simbol dan tanda-tanda ini untuk
memberitahukan pengguna akan kemampuan dan fasilitas
yang dimiliki oleh suatu program aplikasi. Ragam dialog
yang banyak menggunakan simbol-simbol dan tanda-tanda
untuk menunjukkan suatu aktifitas tertentu disebut dengan
antarmuka berbasis ikon (icon-based user interface) .
“Dialog yang menggunakan simbol atau tanda untuk
menunjukan suatu pilihan aktifitas tertentu”.
7. Antarmuka berbasis ikon (icon) contoh Antarmuka berbasis ikon (icon) “Sistem antarmuka yang memungkinkan pengguna untuk
menampilkan berbagai informasi pada satu atau lebih
jendela (window) “.
Penampilan lebih banyak informasi
Akses lebih banyak sumber informasi
Kombinasi berbagai sumber informasi
Kendali bebas atas sejumlah program
Command context
Penyajian jamak (multiple view)
Reminder/pengingat
8. Sistem Penjendelaan Jenis-jenis jendela (window) :
a. Jendela TTY
b. Time-Multiplexed Windows
c. Space multiplex window
d. Non Homogen a. Jendela TTY
Jendela TTY merupakan jenis jendela yang paling
sederhana. Secara sekilas jenis jendela ini mirip dengan
tampilan apa adanya karena jendela TTY hanya terdiri atas
sebuah jendela yang mempunyai fasilitas pemindahan
halaman (scrolling) secara otomatis pada satu arah.
Contoh jendela TTY adalah : dot prompt. b. Time-Multiplexed Windows
Pemikiran yang mendasari digunakannya istilah
time-multiplexed windowsadalah bahwa layar tampilan
merupakan sumber daya yang bisa digunakan secara
bergantian oleh sejumlah jendela pada waktu yang
berlainan. Jenis jendela ini banyak diterapkan pada editor
teks c. Space multiplex window
Dalam space-multiplexed windows, lebar layar
dibagi bagi menjadi beberapa jendela dengan ukuran
yang bervariasi, dan jenis jendelanya dapat ditentukan
berdasarkan ketergantungan antara satu bisa diletakkan
“diatas” jendela yang lain, dan apakah masing-masing
jendela bisa diubah ukurannya.
Contoh :
- pada perangkat lunak Bravo
- pada pengolah kata Word Perfect versi DOS misalnya
Word Perfect versi 5.0 atau5.1, pada Lotus 123 versi DOS d. Non Homogen
Jendela non homogen adalah jenis jendela yang
tidak dapat dikelompokkan pada jenis jendela diatas.
Dua dari beberpa jenis jendela homogen adalah ikon,
dan zooming window.
Pada zooming window, pengguna dapat melihat
bagian tertentu dari obyek yang diamati secara lebih
terinci, karena jendela ini dapat di perbesar maupun
diperkecil sesuai dengan kebutuhan a. Pengertian
“ Penyajian langsung aktifitas kepada
pengguna (user) sehingga aktifitas
akan dikerjakan oleh komputer ketika
pengguna memberikan instruksi
langsung yang ada pada layar
komputer “.
9. Manipulasi Langsung. b. Penerapan :
Kontrol Proses
Editor Teks
Simulator
Kontrol Lalu lintas penerbangan
Perancangan Bentuk/model
(computer aided design ) “Dialog berbentuk pesan atau informasi pada suatu
gambar atau link yang tampil ketika pengguna melakukan
suatu aktifitas“.
Contoh Interaksi Grafis
10. Antarmuka Berbasis Interaksi Grafis.
Dialog berbentuk pesan atau informasi pada suatu
gambar atau link yang tampil ketika pengguna melakukan
suatu aktifitas“.
Pertemuan 4
Prinsip Desain
Antarmuka (Interface) Prinsip – prinsip desain antarmuka
• 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.
Prinsip desain antarmuka (lanjutan) Prinsip desain antarmuka (lanjutan)
• 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 di layar
dengan hasil outputnya.
• Aesthetic Integrity
informasi diorganisasikan dengan baik dan
konsisten dengan prinsip desain visual yang baik. Dokumentasi Desain
I. Lingkup Sistem
II. Desain Data
III. Desain Architectural
IV. Desain Antarmuka
V. Desain Prosedural
VI. Catatan Khusus Data Design
• Mengubah objek data yang didefinisikan pada model
analisis menjadi struktur data yang ada dalam
perangkat lunak
• Atribut yang dimiliki objek data, hubungan di antara
objek data, dan penggunaannya dalam program,
semuanya mempengaruhi pemilihan struktur data Architectural Design
• Menggunakan karakteristik aliran informasi dalam model
analisis untuk menghasilkan struktur program
• Sebuah data flow diagram dipetakan menjadi struktur
program menggunakan dua pendekatan :
– Transform mapping
– Transaction mapping
• Transform mapping : diterapkan untuk sebuah aliran
data yang menunjukkan batas yang jelas antara data
yang masuk dan yang keluar Architectural Design (cont.)
• DFD dipetakan menjadi sebuah struktur yang
mengalokasikan kontrol menjadi input, pemorsesan, dan
output bersama dengan hirarki modul
• Transaction mapping : diterapkan jika sebuah item
informasi menyebabkan percabangan
• DFD dipetakan menjadi sebuah struktur yang
mengalokasikan kontrol menjadi sebuah substruktur
yang mendapatkan dan mengevaluasi sebuah transaksi Interface Design
• Meliputi antarmuka program internal dan eksternal
serta desain untuk antarmuka pengguna
• Desain antarmuka internal dan eksternal diarahkan
oleh informasi yang diperoleh dari model analisis
Mengembangkan software yang baik.
• High Performance
software yang dibuat mempunyai performance yang tinggi,
walaupun digunakan oleh beberapa user.
• Mudah digunakan
software yang dibuat mempunyai sifat easy to use (mudah
digunakan) sehingga tidak membutuhkan proses yang lama
untuk mempelajarinya
• Penampilan yang baik
software mempunyai antarmuka (interface) yang baik,
sehingga user tidak merasa jenuh.
• Reliability
kehandalan, sejauh mana suatu software dapat diharapkan
untuk melakukan fungsinya sesuai dengan ketelitian yang
diperlukan. Mengembangkan software yang baik
(Lanjutan)
• Mampu beradaptasi
sejauh mana software yang dibuat mampu beradaptasi
dengan perubahan-perubahan teknologi yang ada.
• Interoperability
software yang dibuat haruslah mampu berinteraksi
dengan aplikasi lain. Biasanya dapat dilihat dari adanya
fasilitas untuk eksport dan import data dari aplikasi lain.
• Mobility
software yang dibuat dapat berjalan pada bermacam-
macam sistem operasi. 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
Aplikasi ini menghasilkan sebuah dokumen berupa file-
file yang nantinya bisa dibuka dan dirubah kembali jika
perlu. Aplikasi yang berbasis dokumen misalnya: Microsoft
Word, Microsoft Excel, Open Office, Corel Draw,
Photoshop, dll. Model Aplikasi (lanjutan)
2. Berbasis Non Dokumen
Aplikasi ini sifatnya tidak menghasilkan dokumen yang
bisa dibuka dan dirubah kembali. Contoh dari aplikasi
berbasis non dokumen ini adalah: Microsoft Outlook,
MySQL, MYOB, dll Model Aplikasi (lanjutan)
3. Utilitas
Aplikasi ini sifatnya adalah untuk penunjang saja
(sifatnya hanya tambahan). Ada kecenderungan aplikasi
seperti ini menekankan pula pada style disamping fitur
aplikasi. Contoh dari aplikasi ini adalah seperti aplikasi
untuk mendengarkan musik atau menonton video
(Winamp, Media Player, PowerDVD), aplikasi untuk anti
virus (Kaspersky, Norton, F-Secure) 1. Layout Berbasis Dokumen
Header
Menubar
Toolbar
pane
Lembar kerja Macromedia Flash MX 2004 2. Layout Berbasis Non Dokumen
Microsoft Outlook 2003 My SQL & M.Y.O.B 3. Layout Utilitas
Ada kecenderungan aplikasi seperti ini menekankan pula
pada style disamping fitur aplikasi
Contoh : Power DVD X
PERANTI INTERAKTIF
Pertemuan 5
ENDAHULUAN
• Kondisi lingkungan, faktor keselamatan kerja, dan
variasi dalam tugas dan hubungannya dengan
pekerjaan yang lain 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 ke dalam 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.
Piranti Input (lanjutan)
• 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. Piranti Input (lanjutan)
• Misalnya tugas menggambar membutuhkan piranti
input yang dapat melakukan gerakan secara
kontinyu,
• Untuk memilih dari suatu daftar pilihan membutuhkan
piranti input yang dapat melakukan gerakan secara
diskret.
• Sebagai contoh, masukan suara berguna pada situasi
dimana tidak ada permukaan untuk meletakkan
keyboard, tetapi tidak cocok dengan kondisi berderau.
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)
1. Piranti Masukan Keyboard QWERTY Keyboard QWERTY
• Umumnya orang sudah familiar dengan layout keyboard
yang disebut dengan “QWERTY”, yaitu susunan huruf
tombol kiri atas.
• Rancangan keyboard ini pertama kali digunakan pada
mesin ketik di USA tahun 1874.
• Susunan tombol dipilih untuk mengurangi loncatan
penekanan tombol yang tidak sengaja pada mesin ketik
manual.
• Misal huruf ‘s’, ‘t’, dan ‘h’ diletakkan berjauhan
meskipun sering digunakan bersama dalam kalimat
bahasa Inggris.
• Diciptakan oleh Christopher Latham Sholes, 1870-an. Dvorak Layout
• Diciptakan oleh August Dvorak dan Willian L. Dealey,
1936.
• Dirancang untuk mengurangi jarak pergerakan jari.
• Mempercepat ketikan hingga 200 ketikan per menit.
• Penerimaannya lambat karena pemakai tidak bersedia
berusaha berpindah dari QWERTY. c. Tata Letak Alphabetik
Tombol-tombol yang ada pada papan ketik dengan tata
letak alphabetik disusun persis seperti pada tata letak
QWERTY maupun Dvorak, tetapi susunan hurufnya
berurutan seperti pada urutan alphabet. Bagi pengguna
yang bukan tukang ketik, barangkali tata letak ini cukup
membantu. Tetapi, dari hasil pengujian, penggunaan tata
letak seperti ini justru memperlambat kecepatan
pengetikan.
Alphabetik Operator yang sering melakukan pengetikan sering
mengeluh karena adanya beban otot yang berlebihan,
terutama pada jari-jemari dan pergelangan tangan.
Sehingga, diperlukan suatu tata letak yang dapat
mengurangi beban otot yang berlebihan tersebut yang
salah satunya adalah tata letak Klockenberg.
Klockenberg Sistem Palantype
Sistem Palantype dapat merekam suara lebih dari
180 kata permenit. Sistem ini paling sering digunakan
untuk mencatat jalannya persidangan di suatu gedung
pengadilan dan sangat jarang digunakan di dalam
lingkungan perkantoran.
Papan Ketik untuk penyingkatan kata Sistem Stenotype
Sistem Stenotype. Seperti Anda ketahui, steno
dalah jenis tulisan singkat yang sering digunakan untuk
mencatat ucapan seseorang. Jenis tulisan ini paling
banyak digunakan oleh para wartawan yang mencatat hasil
wawancara dengan seseorang.
(Pointing and picking device)
“ Peranti interaktif yang digunakan untuk
menunjuk/menuding atau menempatkan kursor pada suatu
posisi dilayar tampilan dan untuk mengambil suatu item
informasi untuk dipindahkan ketempat lain “.
Perbandingan (ratio) kontrol/tampilan :
Gerakan tangan atau respon
K/T =
Gerakan kursor
2. Peranti Penuding dan Pengambil a. Mouse
- Mekanis
Bola yang terdapat di mouse akan menggerakan
beberapa sensor ketika mouse digerakan.
- Mouse Optic
Terdiri dari 2 LED (Light Emitting Diode) dan 2
lensa (photo-transistor) untuk medeteksi gerakan.
Salah satu LED akan mengeluarkan cahaya
berwarna merah dan LED yang lain
mengeluarkan cahaya inframerah
3. Peranti penuding dan pengambil b. Joystick
Gerakan kursor dikendalikan oleh gerakan tuas atau
dengan tekanan pada tuas.
Joystick elements:
1. Stick
2. Base
3. Trigger
4. Extra buttons
5. Autofire switch
6. Throttle
7. Hat Switch (POV Hat)
8. Suction Cup c. Trackball
Prinsip kerjanya sama dengan mouse, tapi berbeda
dalam cara penggunaanya. d. Pointing Stick
Prinsip kerjanya sama dengan mouse dan cara
penggunaannya sama dengan trackball e. Touch Pad f. Touch Screen g. Digitizing tablet / Graphics tablet
Peranti pengambil data dalam bentuk sederatan
koordinat (x,y) yang menentukan gerakan pena pada
media digitasi. h. Light Pen
Prinsip kerjanya adalah memantau selisih antara
waktu saat elektron mulai melakukan gerakan dan
pada saat lokasi tempat pena menyala. Dipergunakan untuk mengambil citra terformat, bentuk
dan format hurufnya sudah ditentukan.
Kategori peranti ini adalah :
a. Bar code Reader
Pola garis-garis hitam putih yang sering djumpai
pada barang-barang yang dijual di toko swalayan.
4. Pengambilan Gambar Terformat b. Magnetic Ink Character Recognation (MICR)
Digunakan untuk membaca karakter-karakter
khusus yang dicetak dengan tinta khusus pula. Karakter
yang telah diceak dengan tinta dimagnetisasi oleh Peranti
MICR, sehingga dapat dibaca dan diterjemahkan
menjadi sinyal digital. c. Optical Mark Recognation (OMR)
Peranti yang membaca tulisan pensil dan mengubahnya
menjadi bentuk yang dapat dibaca oleh komputer dengan
bantuan refleksi optik dengan mengenali ketebalan tulisan.
d. Optical Character Recognation (OCR)
Peranti yang dapat membaca teks dengan
mengonversikannya ke dalam kode digital. Dapat
mengubah teks menjadi suara, merekam naskah.
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.
5. Pengambil Gambar tak Terformat b. Kamera digital
Mengubah citra optik ke sebuah 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. Peranti yang digunakan untuk memantau gerakan
manusia yang banyak dimanfaatkan pada virtual reality
adalah :
a. Headset
Peranti yang dipasang di kepala, menutup
mata, yang digunakan untuk menangkap dan merekam
gerakan kepala, serta menayangkan berbagai macam
gambar ke mata pemakai.
6. Gerakan b. Glove
Peranti berbentuk sarung tangan yang digunakan
untuk merekam jenis serta kekuatan gerakan jari dan
tangan pemakai.
a. Pengingat digital (frame buffer)
Citra yang akan ditampilkan ke layar disimpan
sebagai matrix nilai elemennya menunjukkan intensitas
dari citra grafis yang akan ditampilkan.
b. Pengendali tampilan (display controller)
Berfungsi untuk melewatkan isi pengingat digital
dan mengolahnya untuk di tampilkan kelayar.
7. Layar Tampilan terdiri dari : • Pada pengingat digital
(frame buffer), citra grafis
ditampilkan sebagai pola
bit.
• Dengan mengolah pola
bit menjadi pixel. Untuk
gambar hitam-putih,
warna hitam
menggunakan bit 1 dan
warna putih
menggunakan bit 0.
Gambar monitor c. Pengolah Tampilan (display processor)
Bagian yang mengubah pola bit dari pengingat
digital menjadi tegangan analog, yang selanjutnya akan
membangkitkan elektron yang digunakan untuk
menembak fosfor pada layar tampilan.
Adapter tampilan yang banyak digunakan untuk
komputer-kompter pribadi adalah
MDA(Monochrome Display Adapter),
CGA (Color Graphics Adapter),
MCGA (Multi-Color Graphics Array),
EGA (Enhanced Graphics Adapter),
VGA (Video Graphics Array), dan
SVGA (Super Video Graphics Array).
Pada saat ini, VGA dan SVGAlah yang paling banyak
digunakan.
Berdasar jenis-jenis adapter yang disajikan di atas,
dikenal pula beberapa jenis layar tampilan untuk bisa
dipakai bersama-sama dengan salah satu dari adapter
tampilan di atas. Layar tampilan bisa dikelompokkan ke
dalam lima tipe yang dijelaskan sebagai berikut.
Beberapa jenis tipe layar tampilan :
a. Direct-drive Monochrome Monitor
Tipe layar tampilan ini biasanya digunakan untuk
adapter dari jenis MDA atau EGA. Layar tampilan jenis ini
hanya menyajikan warna latar depan (foreground) dan
warna latar belakang (background).
8. Tipe Layar Tampilan b. Composite Monochrome Monitor
Tipe layar ini digunakan bersama-sama dengan
adapter dari jenis CGA. Tipe layar ini hanya bisa
menyajikan sebuah warna latar depan, dan hanya dapat
digunakan bersama-sama dengan adapter dari jenis CGA.
Saat ini, layar dengan tipe ini sudah jarang ditemui, karena
resolusi dan jumlah yang dapat ditampilkannya memang
tidak banyak.
c. Composite Color Monitor
Tipe layar ini dapat menghasilkan teks dan grafik
berwarna (color). Meskipun demikian, tipe layar ini
mempunyai resolusi yang jelek, sehingga gambar yang
dihasilkan tidak bagus. Tipe layar tampilan ini harus
digunakan bersama-sama dengan adapter dari jenis CGA. d. Red-Green-Blue Monitor
Tipe layar ini lebih dikenal dengan sebutan RGB
Monitor (RGB=Red-Green-Blue). Tipe layar RGB lebih baik
dibanding dengan composite color monitor karena layar
tampilan ini memproses isyarat warna merah, hijau, dan
biru secara terpisah. Dengan demikian, teks dan grafik
yang dihasilkan juga lebih halus.
e. Variable Frequency
Adapter tampilan yang berbeda seringkali
membangkitkan isyarat yang berbeda pula, sehingga ada
beberapa layar tampilan yang tidak bisa dipasang dengan
adapter tertentu. Layar tampilan ini memungkinkan kita
untuk menggunakan adapter tampilan yang berbeda,
sehingga apabila ada teknologi adapter penampil yang
lebih baru, kita tidak perlu layar tampilan yang baru.
Design Interface
(Perancangan Tampilan)
Pertemuan 6
Program aplikasi, pada dasarnya dapat
dikelompokkan ke dalam dua kategori:
a. Program aplikasi untuk keperluan khusus dengan
pengguna yang khusus pula (special purpose software).
Cara Pendekatan ini dilakukan dengan User
centered design approach, dimana Perancangan Interface
melibatkan Pengguna.
b. Program aplikasi yang akan digunakan oleh banyak
pengguna (general purpose software), yang juga sering
dikenal dengan sebutan public software.
Cara Pendekatan ini dilakukan dengan User design
approach.
1. Cara Pendekatan a. Urutan Perancangan
- Pemilihan ragam dialog
- Perancangan struktur dialog
- Perancangan format pesan
- Perancangan penanganan kesalahan
- Perancangan struktur data
2. Prinsip dan Petunjuk Perancangan 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.
- Struktur Internal.
- Kosakata 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
Peranti bantu yang dijelaskan hanya berbentuk
lembaran kertas kosong diberi nama dengan Lembar
Kerja Tampilan(LKT) LKT yang disajikan atas empat
bagian yaitu:
a. Nomor lembar kerja
b.Bagian tampilan
c. Bagian Navigator
d.Bagian keterangan
3. Peranti Bantu Sederhana 4. Jaring Semantik Tampilan
Jaring semantik tampilan terdiri atas dua komponen:
nomor tampilan (lembar kerj) dan transisi yang
menyebabkan perpindahan ke tampilan yang lain (sesuai
dengan isi bagian navigasi pada rancangan tampilan).
Breaking News
Tidak ada komentar:
Posting Komentar