Pertemuan 09
Perancangan Tampilan
Kriteria
yang terpenting dari sebuah antarmuka adalah tampilan yang menarik Seorang pengguna, Peranca- biasanya tertarik untuk ngan mencoba sebuah program Tampilan aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada dihadapan matanya
1
Syarat untuk membuat tampilan menarik adalah :
Perancangan Tampilan
1. harus mempunyai jiwa seni yang memadai. 2. harus mengerti selera user secara umum 3. harus bisa meyakinkan pemrogramannya, agar yang dibayangkan dapat diwujudkan (diimplementasikan) dengan piranti bantu (tool) yang tersedia 4. harus mendokumentasikan semua pekerjaan yang dilakukan
Cara-cara pendokumentasian : 1. membuat sketsa pada kertas 2. menggunakan peranti prototipe GUI 3. menuliskan tekstual yang menjelaskan tentang kaitan antara satu Perancajendela dengan jendela yang lain ngan 4. menggunakan peranti bantu yang Tampilan biasa disebut CASE (ComputerAided Software Enginneering) untuk cara ke 2 & 4 jarang digunakan karena mahal dan biasanya untuk pembuatan antarmuka grafik
2
Program aplikasi, pada dasarnya terdiri dari 2 kategori yaitu : Perancangan Program aplikasi untuk keperluan Tampilan khusus dengan user yang khusus – juga (special purpose software) untuk cara pendekatan
Program aplikasi yang akan digunakan oleh banyak user (general purpose software)
Bidang Studi
Program Aplikasi untuk SPS adalah : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Ada 2 pendekatan yang dilakukan untuk
Special SPS adalah Purpose Design software User-Centered Perancangan antarmuka yang melibatkan user. User diajak untuk aktif berpendapat dan bersama-sama merancang antarmuka yang diinginkan user. SPS User
Design Approach
User sendiri yang merancang antarmuka sesuai keinginan. Tetapi hal ini memberatkan bagi pemrograman (mis. Peranti yang tidak mendukung, dll).
3
Bidang Studi
Program Aplikasi untuk SPS adalah : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Ada 2 pendekatan yang dilakukan untuk
Special SPS adalah Purpose Design software User-Centered Perancangan antarmuka yang melibatkan user. User diajak untuk aktif berpendapat dan bersama-sama merancang antarmuka yang diinginkan user. SPS User
Design Approach
User sendiri yang merancang antarmuka sesuai keinginan. Tetapi hal ini memberatkan bagi pemrograman (mis. Peranti yang tidak mendukung, dll).
Bidang Studi
Program Aplikasi untuk GPS disebut juga sebagai Public Software. Dimana aplikasi dapat digunakan oleh berbagai user dengan karakteristik yang beragam serta berbagai tingkat kepandaian
General Purpose software Kunci utama GPS adalah dengan melakukan : GPS - antarmuka customization -
pengaturan desktop pemilihan warna desktop oleh user
4
Bidang Studi
Ada 4 komponen antarmuka user adalah Model
User
Merupakan model konseptual yang diinginkan user dalam memanipulasi informasi dan proses.
Prinsip Bahasa Perintah–Command Language dan Merupakan bahasa perintah dimana user Petunjuk dengan cepat dapat mengoperasikannnya Perancan Umpan Balik Kemampuan sebuah program yang gan membantu user untuk mengoperasikan program itu sendiri. Penampilan
Informasi
Digunakan untuk menunjukkan status informasi atau program ketika user melakukan tindakan
Langkah-langkah perancangan antar muka adalah : 1. Urutan perancangan 2. Perancangan tampilan
Perancangan Tampilan
berbasis teks 3. Perancangan tampilan berbasis grafis 4. Waktu tanggap 5. Penanganan kesalahan
5
Bidang Studi
Dikerjakan secara top-down. Proses perancangan dapat dikerjakan sebagai berikut : Pemilihan ragam dialog
1. Urutan Perancangan
Perancangan struktur dialog Perancangan format pesan Perancangan penangan
kesalahan (dengan validasi, proteksi user, pemulihan dari kesalahan dan penampilan pesan kesalahan) Perancangan struktur data
Bidang Studi
Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna Pemilih- (pengguna mula, menengah atau pengguna ahli), tipe an Ragam dialog yang diperlukan, dan Dialog kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut
6
adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai Peranca Pada tahap ini pengguna ngan sebaiknya banyak dilibatkan Struktur sehingga pengguna langsung Dialog mendapatkan umpanbalik yang berupa diskusi informal maupun prototipe dari dialog yang nantinya akan digunakannya Bidang Studi
Bidang Studi
Tata letak tampilan dan
keterangan tektual secara terinci harus mendapat perhatian lebih. Kebutuhan data masukan yang
Perancangan Format Pesan
mengharuskan pengguna untuk memasukkan data ke dalam komputer juga harus dipertimbangkan dari segi efisiensinya Contoh : dengan mengurangi
pengetikan yang tidak perlu dengan cara mengefektifkan penggunaan tombol
7
Bidang Studi
Dalam pengoperasian sebuah program
aplikasi, tidak dapat dihindarkan adanya kesalahan yang dilakukan oleh pengguna. Untuk menghindari adanya kondisi
Perancangan Penanga nan Kesalahan
Bidang Studi
abnormal termination, yaitu eksekusi program berhenti karena terjadi kesalahan. Bentuk-bentuk penanganan kesalahan
yang dapat dilakukan antara lain adalah : Validasi pemasukan data (mis: hrs input >0
tetapi yang diinput <0) Proteksi pengguna (mis: program memberi peringatan ketika pengguna melakukan suatu tindakan secara tidak sengaja) Pemulihan dari kesalahan (tersedianya mekanisme untuk membatalkan tindakan yang baru saja dilakukan) Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi
Harus menentukan struktur
data yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponen-komponen Perancaantarmuka yang diperlukan. ngan Struktur ini harus dipetakan Struktur langsung ke dalam model Data pengguna yang telah dibuat, meskipun tingkat kompleksitas antara satu aplikasi dengan aplikasi lain dapat saja berbeda.
8
Bidang Studi
2. Perancan gan Tampilan Berbasis Teks
Bidang Studi
2. Perancan gan Tampilan Berbasis Teks
Pada perancangan tampilan untuk antarmuka berbasis teks, ada 6 faktor yang harus dipertimbangkan agar diperoleh tata letak yang berkualitas tinggi, antara lain : Urutan penyajian Harus disesuaikan dengan model pengguna, apabila tidak dapat dicapai, maka perancang harus membuat semacam kesepakatan dengan calon pengguna tentang urutan tampilan yang akan digunakan
Kelonggaran – Spaciousness Penyusunan tata letak yang tidak mengindahkan estetika akan mempersulit pengguna dalam melakukan pencarian suatu teks. Teks-teks tertentu harus ditempatkan dalam posisi tertentu dengan harapan ia dapat langsung memusatkan perhatian pengguna
Pada perancangan tampilan untuk antarmuka berbasis teks, ada 6 faktor yang harus dipertimbangkan agar diperoleh tata letak yang berkualitas tinggi, antara lain : Pengelompokan Data yang saling berkaitan sebaiknya dikelompokkan untuk mempermudah penstrukturan layar tampilan secara keseluruhan Relevansi Tampilkan hanya pesan-pesan yang relevan dengan topik yang sedang ditampilkan pada layar Konsistensi Dalam sistem berbasis frame, pengguna dihadapkan pada sejumlah tampilan yang penuh dengan informasi. Perancang harus konsisten dalam menggunakan ruang tampilan Kesederhanaan Cara paling mudah untuk menyajikan aras informasi yang dapat dipahami dengan cepat oleh pengguna
9
Contoh tata Letak Tekstual
Bidang Studi
3. Perancan gan Tampilan Berbasis Grafis
Ada 5 faktor yang harus diperhatikan pada saat merancang antarmuka berbasis grafis Ilusi pada obyek-obyek yang dapat dimanipulasi. Harus melibatkan 3 komponen : Gunakan kumpulan obyek yang sesuai dengan aplikasi, jika belum ada dikembangkan sendiri Penampilan obyek-obyek harus dilakukan dengan keyakinan agar mudah dimengerti oleh pengguna Gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan muncul dilayar
Urutan visual dan fokus pengguna Antarmuka grafis dapat digunakan untuk menarik perhatian pengguna dengan membat suatu obyek berkedip/menggunakan warna tertentu/animasi Gunakanlah rangsangan visual tertentu untuk maksud tertentu
10
Bidang Studi
Ada 5 faktor yang harus diperhatikan pada saat merancang antarmuka berbasis grafis Struktur internal Merupakan suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan Khusus pada obyek-obyek yang dapat dimanipulasi perancang harus memberikan struktur internal dalam bentuk yang berbeda dengan yang digunakan pada dokumen tekstual
3. Perancan gan Tampilan Berbasis Grafis
Kosakata grafis yang konsisten dan sesuai Penggunaan simbol-simbol obyek/icon, tidak ada standar dan biasanya disesuaikan dengan kreatifitas perancang.
Kesesuaian dengan media Karakteristik khusus dari layar tampilan yang digunakan akan mempunyai pengaruh yang besat terhadap keindahan antarmuka yang akan ditampilkan.
Bidang Studi
4. 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
11
Bidang Studi
5. Penangan an Kesalahan
Ada 2 macam kesalahan, antara lain Kesalahan sintaksis, yaitu kesalahan pada saat program dikompilasi (compile-time error). Sebelum kesalahan itu dibetulkan, program tidak akan dapat dioperasikan. Kesalahan logika, yaitu kesalahan pada saat program sedang dijalankan (run-time error). Kesalahanini akan mengakibatkan terhentinya eksekusi program secara abnormal. Penyebabnya adalah dari user atau pada saat proses program aplikasi di eksekusi
Perancang seharusnya membuat dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan Peranti bantu sederhana yang dapat digunakan untuk Peranti mendokumentasikan wajah antarmuka yang diinginkan. Bantu sederhana Peranti bantu yang akan dijelaskan hanya berbentuk lembaran kertas Lembaran kertas yang dimaksud diberi nama dengan Lembar Kerja Tampilan/screen design work sheet (LKT) Bidang Studi
12
LKT (lembar kerja tampilan) terdiri dari :
Bidang Studi
Peranti Bantu sederhana
Bidang Studi
Nomor lembar kerja Tampilan (berisi sketsa tampilan yang akan muncul di layar) Navigator (menjelaskan kapan tampilan akan muncul) Keterangan (penjelasan singkat tentang attribut tampilan)
Peranti Bantu sederhana
13
Bidang Studi
Lembar Kerja Tampilan
Bidang Studi
Jaring Semantik Tampilan
Merupakan program aplikasi yang memungkinkan user dapat berdialog dengan komputer. Ada 2 komponen jaringan sematik tampilan, yaitu : 1. Nomor tampilan (lembar kerja) 2. Transisi yang menyebabkan perpindahan ke tampilan yang lain
14
Bidang Studi
Jaring Semantik Tampilan
Bidang Studi
Peranti Bantu sederhana
Tugas dan Presentasikan: Analisa aplikasi sesuai tugas Anda masing-masing dengan menggunakan : 1. LKT 2. Jaringan sematik tampilan 3. Struktur Program Dipresentasikan 3 minggu sebelum UAS
24 Juni 2011 Presentasi Pengamatan
15
