Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
www.erwinchristiant.my1.ru.
Pertemuan 7 – Perancangan Tampilan
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Salah satu kriteria penting dari sebuah antarmukaadalah tampilan yang menarik.
Yang harus dimiliki oleh perancang tampilan:
›Jiwa seni yang memadai
›Mengetahui selera user secara umum
Seorang perancang tampilan HARUSmendokumentasikan semua pekerjaan yang telahdia kerjakan selama ini, sebagai bahan evaluasipembuatan tampilan yang baru ataumemperbaiki tampilan sebelumnya
PROGRAM YANG DIBUAT BUKAN UNTUK ANDA,NAMUN UNTUK ORANG LAIN
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Syarat untuk membuat tampilan menarik adalah :
harus mempunyai jiwa seni yang memadai.
harus mengerti selera user secara umum
harus bisa meyakinkan pemrogramannya, agaryang dibayangkan dapat diwujudkan(diimplementasikan) dengan
piranti bantu (tool) yang tersedia
harus mendokumentasikan semua pekerjaan yangdilakukan
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Dokumentasi rancangan dapat dikerjakan dalambeberapa cara :
1.Membuat Sketsa pada kertas
2.Menggunakan piranti prototipe GUI
3.Menuliskan tekstual yang menjelaskan tentangkaitan antara satu jendela dengan jendelalainnya.
4.Menggunakan piranti bantu yang disebut CASE(Computer Aided Software Engineering)
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Program aplikasi, pada dasarnya terdiridari 2 kategori yaitu :
Program aplikasi untuk keperluan khususdengan user yang khusus juga (specialpurpose software)
Program aplikasi yang akan digunakanoleh banyak user (general purposesoftware)
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Yaitu program aplikasi untuk keperluan khususdengan user yang khusus pula (special purposesoftware)
User-centered design approach adalahperancangan antarmuka yang melibatkanpengguna. Perancang dan pengguna dudukbersama-sama untuk merancang antarmuka yangdiinginkan pengguna, sehingga dengan cara inipengguna seolah-olah seudah mempunyaigambaran nyata tentang antarmuka yang nantiakan mereka gunakan.
Kelompok user dapat dengan mudahdiperkirakan, baik dari segi keahlian maupunragam antarmuka yang akan digunakan
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Ada 2 pendekatan yang dilakukan untuk SPSadalah :
User-Centered Design
Perancangan antarmuka yang melibatkan user.User diajak untuk aktif berpendapat dan bersama-sama merancang antarmuka yang diinginkan user.
User Design Approach
User sendiri yang merancang antarmuka sesuaikeinginan. Tetapi hal ini memberatkan bagipemrograman (mis. Peranti yang tidakmendukung, dll).
Contohnya : inventori gudang, pengelolaan datamahasiswa, pelayanan reservasi hotel
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Program Aplikasi untuk GPS disebut juga sebagaiPublic Software. Dimana aplikasi dapat digunakanoleh berbagai user dengan karakteristik yangberagam serta berbagai tingkat kepandaian.
Kunci utama GPS adalah dengan melakukan :
›antarmuka customization
›pengaturan desktop
›pemilihan warna desktop oleh user
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Ada 4 komponen antarmuka user adalah :
Model merupakan model konseptual.
Bahasa Perintah–Command Language,merupakan komponen kedua dari antarmukapengguna.
Umpan Balik, kemampuan sebuah program yangmembantu pengguna untuk mengoperasianprogram itu sendiri.
Penampilan Informasi
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Urutan perancangan
Perancangan tampilan berbasisteks
Perancangan tampilan berbasisgrafis
Waktu tanggap
Penanganan kesalahan
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Pemilihan ragam dialog
Perancangan struktur dialog
Perancangan format pesan
Perancangan penangan kesalahan(dengan validasi, proteksi user, pemulihandari kesalahan dan penampilan pesankesalahan)
Perancangan struktur data
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Pemilihan ragam dialog dipengaruhi olehkarakteristik populasi pengguna (penggunamula, menengah, atau pengguna ahli),tipe dialog yang diperlukan, dan kendalateknologi yang ada untukmengimplementasikan ragam dialogtersebut. Ragam dialog yang terpilih dapatberupa sebuah program tunggal, atausekumpulan ragam dialog yang satu samalain saling mendukung.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Tahap kedua adalah melakukan analisistugas dan menentukan model penggunadari tugas tersebut untuk membentukstruktur dialog yang sesuai. Dalam tahap inipengguna banyak dilibatkan, sehinggapengguna langsung mendapatkan umpanbalik yang berupa diskusi informal maupunprototipe dari dialog yang nantinya akan iadigunakan.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Pada tahap ini tata letak tampilan danketerangan tekstual secara terinci harusmendapat perhatian lebih. Selain itu,kebutuhan data masukan yangmengharuskan pengguna untukmemasukkan data ke dalam komputerjuga harus dipertimbangkan dari segiefisiensinya. Salah satu contohnya adalahdengan mengurangi pengetikan yangtidak perlu dengan cara mengefektifkanpenggunaan tombol.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Bentuk-bentuk penanganan kesalahan yang dapat dilakaukanantara lain adalah:
Validasi pemasukan atau: misalnya jika pengguna harusmemasukkan bilangan positif, sementara ia memasukkan datanegatif atau nol, maka harus ada mekanisme untuk mengulangpemasukan data tersebut.
Proteksi pengguna: program memberi peringatan ketika penggunamelakukan suatu tindakan secara tidak sengaja, misalnyapenghapusan berkas.
Pemulihan dari kesalahan: tersedianya mekanisme untukmembatalkan tindakan yang baru saja dilakukan.
Penampilan pesan salah yang tepat dan sesuai dengan kesalahanyang terjadi pada waktu itu.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Struktur data yang diperlukan untukmengimplementasikan dialog berbasis grafisjauh lebih rumit dibandingkan dengan strukturdata yang diperlukan pada dialog berbasistekstual. Meskipun demikian, sesulit atausemudah apapun struktur data yang akandigunakan, struktur data tersebut harusditurunkan dari spesifikasi antarmuka yangtelah dibuat. Hal ini perlu ditekankan agarkeinginan pengguna dan model sistem yangtelah dirancang saling mempunyai kecocokansatu sama lain.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Pada perancangan tampilan untuk antar mukaberbasis teks, ada enam faktor yang harusdipertimbangkan agar diperoleh tata letaktampilan yang berkualitas tinggi, yaitu :
1. Urutan Penyajian
2. Kelonggaran (Spaciusness)
3. Pengelompokkan
4. Relevansi
5. Konsistensi
6. Kesederhanaan
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Urutan Penyajian
Penyajian harus disesuaikan dengan model pengguna yang telahdisusun. Biasanya berdasarkan kesepakatan dengan calon penggunatentang urutan tampilan yang akan digunakan.
Kelonggaran (Spaciousness)
Penyusunan tata letak yang tidak mengindahkan estetika akanmempersulit pengguna dalam pencarian suatu teks
Pengelompokkan
Data yang berkaitan sebaiknya dikelompokkan
Relevansi
Tampilkan hanya pesan-pesan yang relevan sesuai topik
Konsistensi
Perancang harus konsisten dalam menggunakan ruang tampilan yangtersedia
Kesederhanaan
Cari cara yang paling mudah untuk menyajikan informasi yang dapatdipahami dengan cepat oleh pengguna
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Any Questions?
Pada tahun 1970an, di Xerox Palo Alto Research Centre(PARC) dilakukan sejumlah penelitian yang mengarahkepada perancangan antarmuka yang disebut XeroxStar, yang menggunakan teknik manipulasi langsung.
Dengan antarmuka berbasis grafis berbagaikemudahan dalam hal pengontrolan format tampilandapat dikerjakan dengan lebih mudah dan fleksibilitastampilan dapat semakin dirasakan oleh perancangtampilan maupun penggunanya.
Disisi lain, kita harus memperhatikan beberapa kendaladalam penerapan antarmuka berbasis grafis, antaralain : waktu tanggap, kecepatan tampilan, lebartampilan, dan tipe tampilan
Beberapa kemampuan yang dimiliki oleh Xerox Stardan Lisa, yang kemudian diikuti oleh sistem sepertiMicrosoft Windows, antara lain adalah:
Pengguna tidak harus mengingat perintah-perintahyang sering kali cukup panjang, tetapi cukupdikerjakan dengan melihat dan kemudian menunjukkesuatu gambar yang mewakili suatu aktifitas (yangseterusnya disebut dengan ikon),
Penggunaan form property atau option untukmengatur penampakan (wajah) desktop,
Kemampuan WYSIWYG (what you see is what you get)yang kemudian menjadi sangat terkenal,
Perintah-perintah yang berlaku umum, seperti MOVE,DELETE, atau COPY, dan lain-lain.
Berdasarkan kelebihan-kelebihan yang disebutkanpada contoh diatas, ada lima faktor yang perludiperhatikan pada saat kita merancang antarmukaberbasis grafis yang masing-masing dijelaskan sebagaiberikut.
1.Ilusi pada obyek-obyek yang dapat dimanipulasi
Perancangan antarmuka berbasis grafis yang efektifharus melibatkan tiga komponen. Pertama, gunakankumpulan obyek yang disesuaikan dengan aplikasiyang akan dibuat. Jika obyek-obyek itu belum ada, kitadapat mengembangkannya sendiri. Kedua,penampilan obyek-obyek grafis harus dilakukandengan keyakinan bahwa ia akan dengan mudahdimengerti oleh pengguna. Ketiga, gunakanmekanisme yang konsisten untuk memanipulasi obyekyang akan muncul dilayar.
2.Urutan visual dan fokus pengguna
Antarmuka dapat digunakan untuk menarikperhatian pengguna antara lain dengan menbuatsuatu obyek berkedip, menggunakan warnatertentu untuk obyek-obyek tertentu, sertamenyajikan suatu animasi yang akan lebih menarikperhatian pengguna. Tetapi, penggunaanrangsangan visual yang berlebihan justru akanmembuat pengguna bingung dan merasa tidaknyaman.
3.Struktur Internal
Pada pengolah kata kita seringkali menulis beberapakata yang berbeda dengan kata-kata yang lain,misalnya ada sekelompok kata yang ditebalkan,dimiringkan, atau diberi garis bawah. Pada salah satupengola kata, kita dapat melihat apa yang disebutdengan reveal code, yakni suatu tanda khusus yangdigunakan untuk menunjukkan adanya perbedaanfont style. Reveal code ini tdak akan ikut dicetak, tetapidigunakan untuk menunjukkan kepada penggunaantara lain tentang font style yang digunakan, batas kiridan batas kanan dari halaman teks setrta informasiyang lain. Reveal code biasanya berupa suatu karakterkhusus.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
4.Kosakata grafis yang konsisten dan sesuai
Penggunaan simbol-simbol obyek, atau ikon, memang tidakada standarnya, dan biasanya disesuaikan dengankreatifitas perancangnya.
5.Kesesuaian dengan media
Karakteristik khusus dari layar tampilan yang digunakan akanmempunyai pengaruh yang besar terhadap keindahan“wajah” antarmuka yang akan ditampilkan. Pada layartampilan yang masih berbasis pada karakter, misalnya CGA,pemunculan gambar tidak akan secantik apabila kitamenggunakan layar tampilan yang sering disebut denganbitmap atau raster display. Dengan semakin canggihnyateknologi layar tampilan pada saat ini, kreatifitas perancangtampilanlah yang saat ini lebih dituntut untuk memenuhipermintaan pengguna akan aspek kenyamanan dankeramahan antarmuka.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Keinginan user agar program aplikasinyamemberikan waktu tanggap yangsependekpendeknya
Waktu tanggap > 14 detik merupakanwaktu tanggap yang lama
Waktu tanggap < 2 detik merupakan waktutanggap yang cukup memadai
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Perancang seharusnya membuat dokumentasiakan bentuk-bentuk tampilan yang akandiimplementasikan
Peranti bantu sederhana yang dapat digunakanuntuk mendokumentasikan wajah antarmuka yangdiinginkan.
Peranti bantu yang akan dijelaskan hanyaberbentuk lembaran kertas
Lembaran kertas yang dimaksud diberi namadengan Lembar Kerja Tampilan/screen designwork sheet (LKT)
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
LKT (lembar kerja tampilan) terdiri dari :
Nomor lembar kerja
Tampilan (berisi sketsa tampilan yang akanmuncul di layar)
Navigator (menjelaskan kapan tampilanakan muncul)
Keterangan (penjelasan singkat tentangattribut tampilan)
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Merupakan program aplikasi yang memungkinkanuser dapat berdialog dengan komputer.
Digunakan untuk mempermudah bagi pemrogrampada saat ia menuliskan program untukdisesuaikan dengan navigasi pada setiap lembarkerja. Pada jaring semantik tampilan terdiri atasdua komponen: nomor tampilan (biasa diberinotasi dengan lingkaran) dan transisi yangmenyebabkan perpindahan perpindahan ketampilan yang lain (biasa diberi notasi dengananak panah).
Ada 2 komponen jaringan sematik tampilan, yaitu :
1. Nomor tampilan (lembar kerja)
2. Transisi yang menyebabkan perpindahan ketampilan yang lain.
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Erwien Christiant S.Kom - Interaksi Manusia dan Komputer