Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia

Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia fathiah@uui.ac.id
DESAIN Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia 2016

Erwien Christiant S.Kom - Interaksi Manusia dan Komputer
Pendahuluan Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarik. Yang harus dimiliki oleh perancang tampilan: Jiwa seni yang memadai Mengetahui selera user secara umum Seorang perancang tampilan HARUS mendokumentasikan semua pekerjaan yang telah dia kerjakan selama ini, sebagai bahan evaluasi pembuatan tampilan yang baru atau memperbaiki tampilan sebelumnya PROGRAM YANG DIBUAT BUKAN UNTUK ANDA, NAMUN UNTUK ORANG LAIN Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Syarat Membuat Tampilan Syarat untuk membuat tampilan menarik adalah : harus mempunyai jiwa seni yang memadai. harus mengerti selera user secara umum harus bisa meyakinkan pemrogramannya, agar yang dibayangkan dapat diwujudkan (diimplementasikan) dengan piranti bantu (tool) yang tersedia harus mendokumentasikan semua pekerjaan yang dilakukan Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Dokumentasi Perancangan
Dokumentasi rancangan dapat dikerjakan dalam beberapa cara : Membuat Sketsa pada kertas Menggunakan piranti prototipe GUI Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela lainnya. Menggunakan piranti bantu yang disebut CASE (Computer Aided Software Engineering) Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Cara Pendekatan Program aplikasi, pada dasarnya terdiri dari 2 kategori yaitu : Program aplikasi untuk keperluan khusus dengan user yang khusus juga (special purpose software) Program aplikasi yang akan digunakan oleh banyak user (general purpose software) Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Special Purpose Software
Yaitu program aplikasi untuk keperluan khusus dengan user yang khusus pula (special purpose software) User-centered design approach adalah perancangan antarmuka yang melibatkan pengguna. Perancang dan pengguna duduk bersama-sama untuk merancang antarmuka yang diinginkan pengguna, sehingga dengan cara ini pengguna seolah-olah seudah mempunyai gambaran nyata tentang antarmuka yang nanti akan mereka gunakan. Kelompok user dapat dengan mudah diperkirakan, baik dari segi keahlian maupun ragam antarmuka yang akan digunakan Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Special Purpose Software
Ada 2 pendekatan yang dilakukan untuk SPS adalah : 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 sesuai keinginan. Tetapi hal ini memberatkan bagi pemrograman (mis. Peranti yang tidak mendukung, dll). Contohnya : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

General Purpose Software
Program Aplikasi untuk GPS disebut juga sebagai Public Software. Dimana aplikasi dapat digunakan oleh berbagai user dengan karakteristik yang beragam 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

Prinsip dan Petunjuk Perancangan
Ada 4 komponen antarmuka user adalah : Model merupakan model konseptual. Bahasa Perintah–Command Language, merupakan komponen kedua dari antarmuka pengguna. Umpan Balik, kemampuan sebuah program yang membantu pengguna untuk mengoperasian program itu sendiri. Penampilan Informasi Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Langkah-Langkah Perancangan
Urutan perancangan Perancangan tampilan berbasis teks Perancangan tampilan berbasis grafis Waktu tanggap Penanganan kesalahan Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Urutan Perancangan Pemilihan ragam dialog Perancangan struktur dialog Perancangan format pesan Perancangan penangan kesalahan (dengan validasi, proteksi user, pemulihan dari kesalahan dan penampilan pesan kesalahan) Perancangan struktur data Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Pemilihan Ragam Dialog Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna (pengguna mula, menengah, atau pengguna ahli), tipe dialog yang diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang terpilih dapat berupa sebuah program tunggal, atau sekumpulan ragam dialog yang satu sama lain saling mendukung. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Perancangan Struktur Dialog
Tahap kedua adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai. Dalam tahap ini pengguna banyak dilibatkan, sehingga pengguna langsung mendapatkan umpan balik yang berupa diskusi informal maupun prototipe dari dialog yang nantinya akan ia digunakan. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Perancangan Format Pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci harus mendapat perhatian lebih. Selain itu, kebutuhan data masukan yang mengharuskan pengguna untuk memasukkan data ke dalam komputer juga harus dipertimbangkan dari segi efisiensinya. Salah satu contohnya adalah dengan mengurangi pengetikan yang tidak perlu dengan cara mengefektifkan penggunaan tombol. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Perancangan Penanganan Kesalahan
Bentuk-bentuk penanganan kesalahan yang dapat dilakaukan antara lain adalah: Validasi pemasukan atau: misalnya jika pengguna harus memasukkan bilangan positif, sementara ia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang pemasukan data tersebut. Proteksi pengguna: program memberi peringatan ketika pengguna melakukan suatu tindakan secara tidak sengaja, misalnya penghapusan berkas. Pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan tindakan yang baru saja dilakukan. Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Perancangan Struktur Data
Struktur data yang diperlukan untuk mengimplementasikan dialog berbasis grafis jauh lebih rumit dibandingkan dengan struktur data yang diperlukan pada dialog berbasis tekstual. Meskipun demikian, sesulit atau semudah apapun struktur data yang akan digunakan, struktur data tersebut harus diturunkan dari spesifikasi antarmuka yang telah dibuat. Hal ini perlu ditekankan agar keinginan pengguna dan model sistem yang telah dirancang saling mempunyai kecocokan satu sama lain. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Perancangan Tampilan Berbasis Teks
Pada perancangan tampilan untuk antar muka berbasis teks, ada enam faktor yang harus dipertimbangkan agar diperoleh tata letak tampilan 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 telah disusun. Biasanya berdasarkan kesepakatan dengan calon pengguna tentang urutan tampilan yang akan digunakan. Kelonggaran (Spaciousness) Penyusunan tata letak yang tidak mengindahkan estetika akan mempersulit 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 yang tersedia Kesederhanaan Cari cara yang paling mudah untuk menyajikan informasi yang dapat dipahami dengan cepat oleh pengguna Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Perancangan Tampilan Berbasis Grafis
Pada tahun 1970an, di Xerox Palo Alto Research Centre (PARC) dilakukan sejumlah penelitian yang mengarah kepada perancangan antarmuka yang disebut Xerox Star, yang menggunakan teknik manipulasi langsung. Dengan antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format tampilan dapat dikerjakan dengan lebih mudah dan fleksibilitas tampilan dapat semakin dirasakan oleh perancang tampilan maupun penggunanya. Disisi lain, kita harus memperhatikan beberapa kendala dalam penerapan antarmuka berbasis grafis, antara lain : waktu tanggap, kecepatan tampilan, lebar tampilan, dan tipe tampilan

Xeros Star dan Lisa Beberapa kemampuan yang dimiliki oleh Xerox Star dan Lisa, yang kemudian diikuti oleh sistem seperti Microsoft Windows, antara lain adalah: Pengguna tidak harus mengingat perintah-perintah yang sering kali cukup panjang, tetapi cukup dikerjakan dengan melihat dan kemudian menunjuk kesuatu gambar yang mewakili suatu aktifitas (yang seterusnya disebut dengan ikon), Penggunaan form property atau option untuk mengatur 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.

5 Faktor Yang Perlu Diperhatikan Pada Perancangan Antarmuka Berbasis Grafis
Berdasarkan kelebihan-kelebihan yang disebutkan pada contoh diatas, ada lima faktor yang perlu diperhatikan pada saat kita merancang antarmuka berbasis grafis yang masing-masing dijelaskan sebagai berikut. 1. Ilusi pada obyek-obyek yang dapat dimanipulasi Perancangan antarmuka berbasis grafis yang efektif harus melibatkan tiga komponen. Pertama, gunakan kumpulan obyek yang disesuaikan dengan aplikasi yang akan dibuat. Jika obyek-obyek itu belum ada, kita dapat mengembangkannya sendiri. Kedua, penampilan obyek-obyek grafis harus dilakukan dengan keyakinan bahwa ia akan dengan mudah dimengerti oleh pengguna. Ketiga, gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan muncul dilayar.

Reasoning 2. Urutan visual dan fokus pengguna
Antarmuka dapat digunakan untuk menarik perhatian pengguna antara lain dengan menbuat suatu obyek berkedip, menggunakan warna tertentu untuk obyek-obyek tertentu, serta menyajikan suatu animasi yang akan lebih menarik perhatian pengguna. Tetapi, penggunaan rangsangan visual yang berlebihan justru akan membuat pengguna bingung dan merasa tidak nyaman.

5 Faktor Yang Perlu Diperhatikan Pada Perancangan Antarmuka Berbasis Grafis
3. Struktur Internal Pada pengolah kata kita seringkali menulis beberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok kata yang ditebalkan, dimiringkan, atau diberi garis bawah. Pada salah satu pengola kata, kita dapat melihat apa yang disebut dengan reveal code, yakni suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan font style. Reveal code ini tdak akan ikut dicetak, tetapi digunakan untuk menunjukkan kepada pengguna antara lain tentang font style yang digunakan, batas kiri dan batas kanan dari halaman teks setrta informasi yang lain. Reveal code biasanya berupa suatu karakter khusus.

5 Faktor Yang Perlu Diperhatikan Pada Perancangan Antarmuka Berbasis Grafis 4. Kosakata grafis yang konsisten dan sesuai Penggunaan simbol-simbol obyek, atau ikon, memang tidak ada standarnya, dan biasanya disesuaikan dengan kreatifitas perancangnya. 5. Kesesuaian dengan media Karakteristik khusus dari layar tampilan yang digunakan akan mempunyai pengaruh yang besar terhadap keindahan “wajah” antarmuka yang akan ditampilkan. Pada layar tampilan yang masih berbasis pada karakter, misalnya CGA, pemunculan gambar tidak akan secantik apabila kita menggunakan layar tampilan yang sering disebut dengan bitmap atau raster display. Dengan semakin canggihnya teknologi layar tampilan pada saat ini, kreatifitas perancang tampilanlah yang saat ini lebih dituntut untuk memenuhi permintaan pengguna akan aspek kenyamanan dan keramahan antarmuka. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Waktu Tanggap Keinginan user agar program aplikasinya memberikan waktu tanggap yang sependekpendeknya Waktu tanggap > 14 detik merupakan waktu tanggap yang lama Waktu tanggap < 2 detik merupakan waktu tanggap yang cukup memadai Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Piranti Bantu Perancangan Tampilan
Perancang seharusnya membuat dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan Peranti bantu sederhana yang dapat digunakan untuk mendokumentasikan wajah antarmuka yang diinginkan. Peranti bantu yang akan dijelaskan hanya berbentuk lembaran kertas Lembaran kertas yang dimaksud diberi nama dengan Lembar Kerja Tampilan/screen design work sheet (LKT) Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

LKT (Lembar Kerja Tampilan)
LKT (lembar kerja tampilan) terdiri dari : Nomor lembar kerja Tampilan (berisi sketsa tampilan yang akan muncul di layar) Navigator (menjelaskan kapan tampilan akan muncul) Keterangan (penjelasan singkat tentang attribut tampilan) Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

LKT (Lembar Kerja Tampilan)

Jaringan Semantik Tampilan
Merupakan program aplikasi yang memungkinkan user dapat berdialog dengan komputer. Digunakan untuk mempermudah bagi pemrogram pada saat ia menuliskan program untuk disesuaikan dengan navigasi pada setiap lembar kerja. Pada jaring semantik tampilan terdiri atas dua komponen: nomor tampilan (biasa diberi notasi dengan lingkaran) dan transisi yang menyebabkan perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan anak panah). Ada 2 komponen jaringan sematik tampilan, yaitu : 1. Nomor tampilan (lembar kerja) 2. Transisi yang menyebabkan perpindahan ke tampilan yang lain. Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Jaringan Semantik Tampilan

case studies Erwien Christiant S.Kom - Interaksi Manusia dan Komputer

Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia

Presentasi serupa

Presentasi berjudul: "Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia

Presentasi serupa

Presentasi berjudul: "Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia"— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan