Perancangan Perancangan TampilanTampilan

Disusun Oleh : Disusun Oleh : Kelompok IXKelompok IX

• SamsuriadiSamsuriadi• Arfi Mesrach HapaidukaArfi Mesrach Hapaiduka• Firdayanti BakriFirdayanti Bakri• Rahmat HidayatRahmat Hidayat• Nimma ErvianaNimma Erviana

Salah satu kriteria penting dari sebuah Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang menarikantarmuka adalah tampilan yang menarik

Seorang perancang tampilan selain harus Seorang perancang tampilan selain harus mempunyai jiwa seni yang memadai, ia mempunyai jiwa seni yang memadai, ia pun juga harus mengerti selera pengguna pun juga harus mengerti selera pengguna secara umumsecara umum

harus bisa meyakinkan pemrogramnya, harus bisa meyakinkan pemrogramnya, bahwa apa yang dibayangkan dapat bahwa apa yang dibayangkan dapat diwujudkan (diimplementasikan) dengan diwujudkan (diimplementasikan) dengan peranti bantu (peranti bantu (tooltool) yang tersedia) yang tersedia

Perancangan TampilanPerancangan Tampilan

Dokumentasi Rancangan Dokumentasi Rancangan

Membuat sketsa pada kertasMembuat sketsa pada kertas Menggunakan peranti prototype GUIMenggunakan peranti prototype GUI Menuliskan tekstual yang Menuliskan tekstual yang

menjelaskan tentang kaitan antara menjelaskan tentang kaitan antara satu jendela dengan jendela yang satu jendela dengan jendela yang lainlain

Menggunakan peranti baru yang Menggunakan peranti baru yang disebut CASE (disebut CASE (Computer-Aided Computer-Aided Software EngineeringSoftware Engineering))

Cara PendekatanCara Pendekatan

Pertama: Special Purpose Software, Pertama: Special Purpose Software, pendekatan yang biasa digunakan pendekatan yang biasa digunakan adalah user-centered design adalah user-centered design approachapproach

Kedua: General purpose software Kedua: General purpose software (public software)(public software)

4 Komponen Antarmuka4 Komponen Antarmuka

Model PenggunaModel Pengguna Bahasa PerintahBahasa Perintah UmpanbalikUmpanbalik Penampilan InformasiPenampilan Informasi

TahapanTahapan

Pemilihan ragam dialogPemilihan ragam dialog Perancangan struktur dialogPerancangan struktur dialog Perancangan format pesanPerancangan format pesan Perancangan penanganan Perancangan penanganan

kesalahankesalahan Perancangan Struktur DataPerancangan Struktur Data Perancangan Tampilan Berbasis Perancangan Tampilan Berbasis

GrafisGrafis

Pemilihan ragam dialogPemilihan ragam dialog

Pilihlah ragam dialog yang menurut Pilihlah ragam dialog yang menurut perkiraan cocok. Pemilihan ragam perkiraan cocok. Pemilihan ragam dialog dipengaruhi oleh karakteristik dialog dipengaruhi oleh karakteristik populasi pengguna, tipe dialog yang populasi pengguna, tipe dialog yang diperlukan, kendala teknologi yang ada diperlukan, kendala teknologi yang ada untuk mengimplementasikan ragam untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang dialog tersebut. Ragam dialog yang terpilih dapat berupa sebuah ragam terpilih dapat berupa sebuah ragam tunggal, atau sekumpulan ragan dialog tunggal, atau sekumpulan ragan dialog yang satusama lain saling mendukung yang satusama lain saling mendukung

Perancangan struktur Perancangan struktur dialogdialog

Analisis tugas dan menentukan Analisis tugas dan menentukan model untuk membentuk struktur model untuk membentuk struktur dialog yang sesuai. Sebaiknya harus dialog yang sesuai. Sebaiknya harus mendapatkan umpanbalik yang mendapatkan umpanbalik yang berupa diskusi informal maupun berupa diskusi informal maupun prototype dari dialog yang nantinya prototype dari dialog yang nantinya digunakan digunakan

Perancangan format Perancangan format pesanpesan

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

Perancangan penanganan Perancangan penanganan kesalahankesalahan

Untuk menghindari adanya kondisi Untuk menghindari adanya kondisi abnormal abnormal termination,termination, yaitu eksekusi program berhenti yaitu eksekusi program berhenti karena terjadi kesalahan, maka bentuk-bentuk karena terjadi kesalahan, maka bentuk-bentuk penanganan kesalahan perlu dilakukan penanganan kesalahan perlu dilakukan

Validasi pemasukan data Validasi pemasukan data Proteksi pengguna Proteksi pengguna Pemulihan dari kesalahan Pemulihan dari kesalahan Penampilan pesan salah yang tepat dan Penampilan pesan salah yang tepat dan

sesuai dengan kesalahan yang terjadi pada sesuai dengan kesalahan yang terjadi pada waktu itu waktu itu

Perancangan Struktur Perancangan Struktur DataData

Menentukan struktur data yang Menentukan struktur data yang dapat digunakan untuk menyajikan dapat digunakan untuk menyajikan dan mendukung fungsionalitas dan mendukung fungsionalitas komponen-koponen antarmuka yang komponen-koponen antarmuka yang diperlukan. Struktur ini harus diperlukan. Struktur ini harus dipetakan langsung ke dalam model dipetakan langsung ke dalam model pengguna yang telah dibuat pengguna yang telah dibuat

Perancangan Tampilan Perancangan Tampilan Berbasis GrafisBerbasis Grafis

pengguna tidak harus mengingat perintah-pengguna tidak harus mengingat perintah-perintah yang sering kali cukup panjang, perintah yang sering kali cukup panjang, tetapi cukup dikerjakan dengan melihat tetapi cukup dikerjakan dengan melihat dan kemudian menunjuk ke suatu gambar dan kemudian menunjuk ke suatu gambar yang mewakili suatu aktifitas (yang yang mewakili suatu aktifitas (yang seterusnya disebut seterusnya disebut ikonikon) )

penggunaan borang penggunaan borang propertyproperty atau atau optionoption untuk mengatur kenampakan (wajah) untuk mengatur kenampakan (wajah) desktopdesktop

kemampuan WYSIWYG kemampuan WYSIWYG (what you see is (what you see is what you get) what you get) yang kemudian menjadi yang kemudian menjadi sangat terkenalsangat terkenal

LanjutanLanjutan

Ilusi pada obyek-obyek yang Ilusi pada obyek-obyek yang dapat dimanipulasidapat dimanipulasi

Urutan Visual dan fokus Urutan Visual dan fokus pengggunapenggguna

Struktur internalStruktur internal Kosakata grafis yang konsisten Kosakata grafis yang konsisten

dan sesuaidan sesuai Kesesuaian dengan mediaKesesuaian dengan media

SEKIAN DAN TERIMA KASIHSEKIAN DAN TERIMA KASIH