Perancangan Tampilan.

Presentasi berjudul: "Perancangan Tampilan."— Transcript presentasi:

1 Perancangan Tampilan

2 Cara Pendekatan Program aplikasi, pada dasarnya dapat dikelompokkan ke dalam 2 kategori besar, yaitu Program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula (special purpose software) Program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software) Dari 2 kategori ini perancang program dapat menentukan cara pendekatan dalam merancang tampilan

3 Cara Pendekatan (Lanjutan…)
Pada kategori pertama, kelompok calon pengguna yang akan memanfaatkan program aplikasi tersebut dapat dengan mudah diperkirakan Untuk kelompok ini ada 1 pendekatan yang dapat dilakukan, yaitu dengan user-centered design

4 Cara Pendekatan (Lanjutan…)
Pendekatan secara user-centered design adalah perancangan antarmuka yang melibatkan pengguna Melibatkan pengguna: perancang dan pengguna duduk bersama-sama untuk merancang wajah antar muka yang diinginkan pengguna Dengan cara ini, pengguna seolah-oleh sudah mempunyai gambaran nyata tentang antarmuka yang akan mereka gunakan nanti

5 Cara Pendekatan (Lanjutan…)
Pada kategori kedua, perancang perlu menganggap bahwa program aplikasi tersebut akan digunakan oleh bebagai pengguna dengan berbagai tingkatan kepandaian & karakteristik yang sangat beragam Satu kata kunci penting dalam pembuatan modul antarmuka untuk program-program applikasi pada kelompok ini adalah dengan melakukan customization

6 Cara Pendekatan (Lanjutan…)
Customization memungkinkan pengguna dapat menggunakan program aplikasi dengan wajah antarmukanya yang sesuai dengan selera masing-masing pengguna Contoh: pengaturan dekstop pada Microsoft Windows, dengan adanya kemampuan ini penggunadapat memilih sendiri warna dekstop yang diinginkan, dll.

7 Prinsip dan Petunjuk Perancangan
Antarmuka pengguna secara alamiah terbagi menjadi 4 komponen: Model pengguna Bahasa Perintah Umpan Balik Penampilan Informasi

8 Prinsip dan Petunjuk Perancangan (Lanjutan…)
Model Pengguna Model memungkinkan pengguna untuk mengembangkan pemahaman yang mendasar tentang apa yang dikerjakan oleh program Pengguna dapat mengantisipasi pengaruh suatu tindakan yang ia lakukan & dapat memilih cara yang cocok untuk mengoperasikan program tersebut Model pengguna dapat berupa suatu simulasi tentang keadaan yang sebenarnya dalam dunia nyata

9 Prinsip dan Petunjuk Perancangan (Lanjutan…)
Bahasa Perintah Setelah pengguna mengetahui dan memahami model yang diinginkan, pengguna perlu peranti untuk memanipulasi model (bahasa perintah) Idealnya, program komputer mempunyai bahasa perintah yang alami, sehingga model pengguna dengan cepat dapat mengoperasikannya

10 Prinsip dan Petunjuk Perancangan (Lanjutan…)
Umpan Balik Umpan balik  kemampuan suatu program yang membantu pengguna untuk mengoperasikan program itu sendiri Umpan balik dapat berbentuk: pesan-pesan penjelasan, pesan penerimaan perintah, indikasi adanya objek terpilih, pesan kesalan bila terjadi, dll Umpan balik digunakan untuk memberi keyakinan bahwa program telah menerima perintah pengguna

11 Prinsip dan Petunjuk Perancangan (Lanjutan…)
Tampilan Informasi Komponen ini digunakan untuk menunjukkan status informasi atau program ketika pengguna melakukan suatu tindakan Pada bagian ini perancang harus menampilkan pesan-pesan tersebut seefektif mungkin, sehingga mudah dipahami oleh pengguna

12 Urutan Perancangan Pemilihan Ragam Dialog
Perancangan Struktur Dialog  model pengguna Perancangan format pesan Perancangan penanganan kesalahan Perancangan Struktur Data

13 Perancangan Tampilan Berbasis Teks
Pada perancangan tampilan untuk antarmuka berbasis teks, ada 6 faktor yang harus dipertimbangkan agar diperoleh tata letak tampilan yang berkualitas tinggi 6 faktor tersebut: Urutan Penyajian Kelonggaran (Spaciousness) Pengelompokan Relevansi Konsistensi Kesederhanaan

14 Contoh Tata Letak Tekstual

15 Perancangan Tampilan Berbasis Grafis
Ada 5 faktor yang perlu diperhatikan pada saat merancang antar muka bebasis grafis, yaitu: Ilusi pada objek-objek yang akan dimanipulasi Urutan visual dan fokus pengguna Struktur internal Kosakata grafis yang konsisten dan sesuai Kesesuaian dengan media

16 Peranti Bantu Sederhana
Perancang seharusnya membuat dokumentasi akan bentuk-bentuk yang akan diimplentasikan Peranti bantu menggunakan sembarang kertas kosong Untuk mempermudah penamaan, maka lembar kertas yang dimaksud diberi nama dengan lembar kerja tampilan (screen design work sheet) untuk seterusnya disingkat LKT

17 Peranti Bantu Sederhana (Lanjutan…)
Contoh lembar kerja tampilan (LKT)

18 Peranti Bantu Sederhana (Lanjutan…)
LKT di atas pada dasarnya terdiri atas 4 bagian, yaitu: Nomor Lembar Kerja Bagian Tampilan: berisi sketsa tampilan yang akan muncul dilayar Bagian Navigator: bagian ini antara lain menjelaskan kapan tampilan itu akan muncul, dan kapan tampilan itu berupah menjadi tampilan lain. Bagian Keterangan: bagian ini berisi penjelasan singkat tentang atribut tampilan yang akan dipakai

19 Peranti Bantu Sederhana (Lanjutan…)
Contoh Perancangan Tampilan

20 Jaringan Semantik Tampilan
Agar pemrogram tidak perlu membolak-balik lembar kerja pada saat menuliskan program untuk disesuaikan dengan navigasi pada setiap lembar kerja Akan lebih mudah bagi pemrogram untuk memeriksa navigasi yang ada dengan menggambarkannya lewat suatu bagan yag disebut jaringan semantik tampilan (screen semantic net)

21 Jaringan Semantik Tampilan (Tampilan)
T1, T2,…,T7 adalahh nomor tampilan (Lembar Kerja) Tulisan Alt-S, Exit, Esc, dll adalah event Anak panah menunjukkan transisi

22 Jaringan Semantik Tampilan (Tampilan)
Contoh : Jika pengguna sedang berada di tampilan T5, dan kemudian ia menekan tombol Alt-Q (ada event penekanan papan ketik), maka tampilan akan berubah menjadi T7 Jika ia menekan tombol tekan Selesai, maka akan kembali ke tampilan T1