IMK-09 - Perancangan Tampilan - reezeki2011 · PDF fileSyarat untuk membuat tampilan menarik adalah : 1. harus mempunyai jiwa seni yang memadai. 2. harus mengerti selera user secara

Perancangan Tampilan

Pertemuan 09

• 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

PerancaPeranca--ngan ngan

TampilanTampilan

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

PerancaPeranca--ngan ngan

TampilanTampilan

PerancaPeranca--ngan ngan

TampilanTampilan

Cara-cara pendokumentasian :1. membuat sketsa pada kertas

2. menggunakan peranti prototipe GUI3. menuliskan tekstual yang menjelas-

kan tentang kaitan antara satujendela 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

Perancangan Perancangan Tampilan Tampilan

––untuk cara untuk cara pendekatanpendekatan

Program aplikasi, pada dasarnya terdiri dari 2 kategori yaitu :

Program aplikasi untuk keperluan khusus dengan user yang khususjuga (special purpose software)

Program aplikasi yang akandigunakan oleh banyak user (general purpose software)

Bidang StudiBidang StudiProgram Aplikasi untuk SPS adalah : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel

Ada 2 pendekatan yang dilakukan untuk SPS adalah

•User-Centered DesignPerancangan antarmuka yang melibatkan user. User diajak untuk aktif berpendapat dan bersama-sama merancang antarmuka yang diinginkan user.

•User Design ApproachUser sendiri yang merancang antarmuka sesuai keinginan. Tetapi hal ini memberatkan bagi pemrograman (mis. Peranti yang tidak mendukung, dll).

Special Purpose software

-SPS

Bidang StudiBidang StudiProgram Aplikasi untuk SPS adalah : inventori gudang, pengelolaan data mahasiswa, pelayanan reservasi hotel

Ada 2 pendekatan yang dilakukan untuk SPS adalah

•User-Centered DesignPerancangan antarmuka yang melibatkan user. User diajak untuk aktif berpendapat dan bersama-sama merancang antarmuka yang diinginkan user.

•User Design ApproachUser sendiri yang merancang antarmuka sesuai keinginan. Tetapi hal ini memberatkan bagi pemrograman (mis. Peranti yang tidak mendukung, dll).

Special Purpose software

-SPS

Bidang StudiBidang StudiProgram 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

General Purpose software

-GPS

Bidang StudiBidang StudiAda 4 komponen antarmuka user adalah•Model User

Merupakan model konseptual yang diinginkan user dalam memanipulasi informasi dan proses.

•Bahasa Perintah–Command LanguageMerupakan bahasa perintah dimana user dengan cepat dapat mengoperasikannnya

•Umpan BalikKemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiri.

•Penampilan InformasiDigunakan untuk menunjukkan status informasi atau program ketika user melakukan tindakan

Prinsip dan

Petunjuk Perancan

gan

Langkah-langkah perancang-an antar muka adalah :

1. Urutan perancangan 2. Perancangan tampilan berbasis

teks 3. Perancangan tampilan berbasis

grafis 4. Waktu tanggap5. Penanganan kesalahan

PerancaPeranca--ngan ngan

TampilanTampilan

Bidang StudiBidang StudiDikerjakan secara top-down. Proses perancangan dapat dikerjakan sebagai berikut :Pemilihan ragam dialogPerancangan struktur dialogPerancangan format pesanPerancangan penangan kesalahan

(dengan validasi, proteksi user, pemulihan dari kesalahan dan penampilan pesan kesalahan)Perancangan struktur data

1. Urutan Peranca-

ngan

Bidang StudiBidang Studi 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

Pemilih-an

Ragam Dialog

Bidang StudiBidang Studi• 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

Peranca-ngan

Struktur Dialog

Bidang StudiBidang StudiTata 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

Peranca-ngan

Format Pesan

Bidang StudiBidang Studi 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

Peranca-ngan

Penanganan

Kesalah-an

Bidang StudiBidang Studi 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.

Peranca-ngan

Struktur Data

Bidang StudiBidang StudiPada 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 – SpaciousnessPenyusunan 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 Tampilan Berbasis

Teks

Bidang StudiBidang StudiPada perancangan tampilan untuk antarmuka berbasis teks, ada 6 faktor yang harus dipertimbangkan agar diperoleh tata letak yang berkualitas tinggi, antara lain :

PengelompokanData yang saling berkaitan sebaiknya dikelompokkan untuk mempermudah penstrukturan layar tampilan secara keseluruhan

RelevansiTampilkan hanya pesan-pesan yang relevan dengan topik yang sedang ditampilkan pada layar

KonsistensiDalam sistem berbasis frame, pengguna dihadapkan pada sejumlah tampilan yang penuh dengan informasi. Perancang harus konsisten dalam menggunakan ruang tampilan

KesederhanaanCara paling mudah untuk menyajikan aras informasi yang dapat dipahami dengan cepat oleh pengguna

2. Perancan

gan Tampilan Berbasis

Teks

Contoh tata Letak Tekstual

Bidang StudiBidang StudiAda 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

3. Perancan

gan Tampilan Berbasis

Grafis

Bidang StudiBidang StudiAda 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.

3. Perancan

gan Tampilan Berbasis

Grafis

Bidang StudiBidang Studi• Keinginan user agar program

aplikasinya memberikan waktu tanggap yang sependek-pendeknya

• Waktu tanggap > 14 detik merupakan waktu tanggap yang lama

• Waktu tanggap < 2 detik merupakan waktu tanggap yang cukup memadai4. Waktu

Tanggap

Bidang StudiBidang StudiAda 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

5. Penangan

an Kesalahan

Bidang StudiBidang Studi 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)

Peranti Bantu

sederhana

Bidang StudiBidang StudiLKT (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)

Peranti Bantu

sederhana

Bidang StudiBidang StudiPeranti Bantu sederhana

Bidang StudiBidang StudiLembar Kerja Tampilan

Bidang StudiBidang StudiMerupakan 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

Jaring Semantik Tampilan

Bidang StudiBidang Studi

Jaring Semantik Tampilan