Pertemuan 09
Perancangan Tampilan
• Kriteria yang terpenting dari sebuah antarmuka adalah tampilan yang menarik • Seorang pengguna, biasanya Peranca-- tertarik untuk mencoba Peranca ngan sebuah program aplikasi Tampilan dengan terlebih dahulu tertarik pada suatu tampilan yang ada dihadapan matanya
Syarat untuk membuat tampilan menarik adalah :
PerancaPerancangan 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 :
PerancaPerancangan Tampilan
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 (ComputerAided Software Enginneering) untuk cara ke 2 & 4 jarang digunakan karena mahal dan biasanya untuk pembuatan antarmuka grafik
Program aplikasi, pada dasarnya terdiri dari 2 kategori yaitu : Perancangan Tampilan – 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 Bidang Studi gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Ada 2 pendekatan yang dilakukan untuk SPS adalah
Special Purpose •User-Centered Design software Perancangan antarmuka yang melibatkan user. User diajak untuk aktif berpendapat dan bersamasama 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).
Program Aplikasi untuk SPS adalah : inventori Bidang Studi gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel Ada 2 pendekatan yang dilakukan untuk SPS adalah
Special Purpose •User-Centered Design software Perancangan antarmuka yang melibatkan user. User diajak untuk aktif berpendapat dan bersamasama 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).
Program Aplikasi untuk GPS disebut juga Bidang Studi sebagai Public Software. Dimana aplikasi dapat digunakan oleh berbagai user dengan karakteristik yang beragam General serta berbagai tingkat kepandaian
Purpose software Kunci utama GPS adalah dengan melakukan : - antarmuka customization GPS - pengaturan desktop - pemilihan warna desktop oleh user
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 Merupakan bahasa perintah dimana user dengan dan cepat dapat mengoperasikannnya Petunjuk •Umpan Balik Perancan Kemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiri. gan •Penampilan Informasi
Digunakan untuk menunjukkan status informasi atau program ketika user melakukan tindakan
Langkah-langkah perancang-an antar muka adalah :
PerancaPerancangan Tampilan
1. Urutan perancangan 2. Perancangan tampilan berbasis teks 3. Perancangan tampilan berbasis grafis 4. Waktu tanggap 5. Penanganan kesalahan
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
Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna (pengguna Pemilih- mula, menengah atau pengguna ahli), tipe dialog yang an Ragam diperlukan, dan kendala Dialog teknologi yang ada untuk mengimplementasikan ragam dialog tersebut
Bidang Studi
• adalah melakukan analisis tugas Bidang Studi 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
Tata letak tampilan dan keterangan Bidang Studi
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
Dalam pengoperasian sebuah program aplikasi,
Bidang Studi
tidak dapat dihindarkan adanya kesalahan yang dilakukan oleh pengguna.
Untuk menghindari adanya kondisi abnormal
Perancangan Penanga nan Kesalahan
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
Bidang Studi
Harus menentukan struktur data
yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponenkomponen antarmuka yang Perancadiperlukan. 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.
Pada perancangan tampilan untuk antarmuka Bidang Studi berbasis teks, ada 6 faktor yang harus dipertimbangkan agar diperoleh tata letak yang berkualitas tinggi, antara lain :
2. Perancan gan Tampilan Berbasis Teks
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
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 : 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
Contoh tata Letak Tekstual
Ada 5 faktor yang harus diperhatikan pada Bidang Studi saat merancang antarmuka berbasis grafis Ilusi pada obyek-obyek yang dapat dimanipulasi. Harus melibatkan 3 komponen :
3. Perancan gan Tampilan Berbasis Grafis
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
Ada 5 faktor yang harus diperhatikan pada Bidang Studi saat merancang antarmuka berbasis grafis Struktur internal
3. Perancan gan Tampilan Berbasis Grafis
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.
• Keinginan user agar program Bidang Studi aplikasinya memberikan waktu tanggap yang sependek-pendeknya • Waktu tanggap > 14 detik merupakan waktu tanggap yang lama • Waktu tanggap < 2 detik merupakan 4. Waktu waktu tanggap yang cukup memadai
Tanggap
Bidang Studi
5. Penangan an Kesalahan
Ada 2 macam kesalahan, antara lain Kesalahan sintaksis, yaitu kesalahan pada saat program dikompilasi (compiletime error). Sebelum kesalahan itu dibetulkan, program tidak akan dapat dioperasikan. Kesalahan logika, yaitu kesalahan pada saat program sedang dijalankan (runtime error). Kesalahanini akan mengakibatkan terhentinya eksekusi program secara abnormal. Penyebabnya adalah dari user atau pada saat proses program aplikasi di eksekusi
Perancang seharusnya membuat Bidang Studi dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan Peranti bantu sederhana yang dapat digunakan untuk mendokumentasikan Peranti wajah antarmuka yang diinginkan. Bantu Peranti bantu yang akan dijelaskan sederhana hanya berbentuk lembaran kertas Lembaran kertas yang dimaksud diberi nama dengan Lembar Kerja Tampilan/screen design work sheet (LKT)
Bidang Studi
Peranti Bantu sederhana
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)
Bidang StudiPeranti
Bantu sederhana
Lembar Kerja Tampilan
Bidang Studi
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
Bidang Studi
Jaring Semantik Tampilan
