Perancangan Tampilan. Tampilan

Transkripsi

1 Pertemuan 09 Perancangan Peranca- ngan Kriteria yang terpenting dari sebuah antarmuka adalah tampilan yang menarik Seorang pengguna, biasanya tertarik untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada dihadapan matanya 1

2 Syarat untuk membuat tampilan menarik adalah : 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 Peranca- ngan Peranca- ngan Cara-cara pendokumentasian : 1. membuat sketsa pada kertas 2. menggunakan peranti prototipe GUI 3. menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain 4. menggunakan peranti bantu yang biasa disebut CASE (Computer- Aided Software Enginneering) untuk cara ke 2 & 4 jarang digunakan karena mahal dan biasanya untuk pembuatan antarmuka grafik 2

3 Program aplikasi, pada dasarnya terdiri dari 2 kategori yaitu : Perancangan untuk cara pendekatan Program aplikasi untuk keperluan khusus dengan user yang khusus juga (special purpose software) Program aplikasi yang akan digunakan oleh banyak user (general purpose software) Program Aplikasi untuk SPS adalah : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Special Purpose software - SPS 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). 3

4 Program Aplikasi untuk SPS adalah : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Special Purpose software - SPS 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). General Purpose software - GPS 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 4

5 Prinsip dan Petunjuk Perancan gan Ada 4 komponen antarmuka user adalah Model User Merupakan model konseptual yang diinginkan user dalam memanipulasi informasi dan proses. Bahasa Perintah Command Language Merupakan bahasa perintah dimana user dengan cepat dapat mengoperasikannnya Umpan Balik Kemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiri. Penampilan Informasi Digunakan untuk menunjukkan status informasi atau program ketika user melakukan tindakan Peranca- ngan Langkah-langkah perancangan antar muka adalah : 1. Urutan perancangan 2. Perancangan tampilan berbasis teks 3. Perancangan tampilan berbasis grafis 4. Waktu tanggap 5. Penanganan kesalahan 5

6 Dikerjakan secara top-down. Proses perancangan dapat dikerjakan sebagai berikut : 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 1. Urutan Perancangan 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 6

7 Perancangan Struktur Dialog adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai Pada tahap ini pengguna sebaiknya banyak dilibatkan sehingga pengguna langsung mendapatkan umpanbalik yang berupa diskusi informal maupun prototipe dari dialog yang nantinya akan digunakannya Perancangan Format Pesan Tata letak tampilan dan keterangan tektual secara terinci harus mendapat perhatian lebih. Kebutuhan data masukan yang 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

8 Dalam pengoperasian sebuah program aplikasi, tidak dapat dihindarkan adanya kesalahan yang dilakukan oleh pengguna. Untuk menghindari adanya kondisi 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 Perancangan Penanga nan Kesalahan Perancangan Struktur Data Harus menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponen-komponen antarmuka yang diperlukan. Struktur ini harus dipetakan langsung ke dalam model pengguna yang telah dibuat, meskipun tingkat kompleksitas antara satu aplikasi dengan aplikasi lain dapat saja berbeda. 8

9 2. Perancan gan 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 2. Perancan gan Berbasis Teks 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

10 Contoh tata Letak Tekstual 3. Perancan gan 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

11 3. Perancan gan Berbasis Grafis 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 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. 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

12 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 Peranti Bantu sederhana 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 /screen design work sheet (LKT) 12

13 Peranti Bantu sederhana LKT (lembar kerja tampilan) terdiri dari : Nomor lembar kerja (berisi sketsa tampilan yang akan muncul di layar) Navigator (menjelaskan kapan tampilan akan muncul) Keterangan (penjelasan singkat tentang attribut tampilan) Peranti Bantu sederhana 13

14 Lembar Kerja Jaring Semantik 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

15 Jaring Semantik 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