...

Perancangan Tampilan

by user

on
Category: Documents
3

views

Report

Comments

Transcript

Perancangan Tampilan
Interaksi Manusia dan
Komputer
Pertemuan 6
Perancangan Tampilan
http://ednamaria.ucoz.com
Pendahuluan




Salah satu kriteria penting dari sebuah antarmuka adalah
tampilan yang baik (sesuai dengan kebutuhan pengguna)
Desainer tampilan selain harus mempunyai jiwa seni yang
memadai, tapi juga harus mengerti selera pengguna secara
umum.
Hal lain yang perlu disadari oleh seorang perancang tampilan
adalah bahwa ia harus bisa meyakinkan programmer, bahwa
apa yang ia bayangkan dapat diwujudkan
(diimplementasikan) dengan piranti bantu (tools) yang
tersedia.
Bagi perancang antarmuka, hal yang sangat penting untuk ia
perhatikan adalah bahwa ia sebaiknya (atau harus)
mendokumentasikan semua pekerjaan yang ia lakukan.
Pendahuluan

Dokumentasi rancangan dapat dikerjakan atau dilakukan
dalam beberapa cara :
1.
2.
3.
4.

Dengan membuat sketsa pada kertas (LKT, Kertas Mock-ups).
Menggunakan piranti prototipe GUI cth: Visio.
Menuliskan tekstual, yang menjelaskan tentang kaitan antara
satu jendela dengan jendela yang lain.
Menggunakan piranti bantu yang disebut CASE (Computer
Aided Software Engineering).
(3) dan (4)  mahal, sehingga hanya diterapkan pada
pembuatan antarmuka grafik untuk sesuatu jenis
pekerjaan yang besar pula.
LEMBAR KERJA TAMPILAN (LKT)
No :
Tampilan :
Keterangan :
Navigasi :
Program Aplikasi

Pada dasarnya dapat dikelompokkan ke
dalam dua 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)
yang juga sering dikenal dengan sebutan public
software.
Cara Pendekatan


special purpose software, program aplikasi
untuk keperluan khusus, misalnya untuk
inventori gudang, pengelolaan data
akademis mahasiswa, pelayanan reservasi
hotel, dll.
Keuntungan : mudah diperkirakan (keahlian
pengguna, ragam antarmuka yang akan
digunakan). Pendekatan yang dapat
dilakukan, yakni user-centerd design
approach
Cara Pendekatan


general purpose software, program
aplikasi digunakan oleh berbagai
pengguna dengan berbagai tingkat
kepandaian dan karakteristik yang sangat
beragam. Kunci utama adalah dengan
melakukan customization.
Contoh : aplikasi office, games
Jenis Pendekatan

Pendekatan user-centerd design approach
adalah perancangan antarmuka yang
melibatkan pengguna dalam perancangan
interface. Pengguna diajak untuk aktif
berpendapat ketika desainer antarmuka
sedang menggambarkan “wajah”
antarmuka (bukan implementasi).
Jenis Pendekatan

Pada user design approach, pengguna
sendirilah yang merancang wajah antarmuka
yang diinginkan.


Proses implementasi modul antarmuka cepat
Memberatkan programmer (apa yang diinginkan
pengguna ada yang tidak bisa dikerjakan dengan
menggunakan piranti bantu yang ada).
Prinsip dan Petunjuk
Perancangan
Antarmuka pengguna secara alamiah terbagi
menjadi empat komponen :


Model pengguna.
Model konseptual yang diinginkan oleh pengguna
dalam memanipulasi informasi dan proses yang ia
aplikasikan pada informasi tersebut.
Bahasa perintah.
Piranti untuk memanipulasi model yang dinginkan
oleh pengguna (setelah ditentukan pada model
pengguna) yang biasa disebut command language.
Prinsip dan Petunjuk
Perancangan

Umpan balik.
Kemampuan sebuah program yang membantu
pengguna untuk mengoperasikan program itu sendiri.

Penampilan informasi.
Komponen yang digunakan
untuk menunjukkan status
informasi atau program ketika pengguna melakukan
suatu tindakan (desainer harus menampilkan pesanpesan tersebut seefektif mungkin, mudah dipahami oleh
pengguna).
5 Urutan Perancangan
1.
2.
Pemilihan ragam dialog.
Pilihlah yang cocok untuk tugas tersebut. Hal ini
dipengaruhi oleh karakteristik populasi pengguna
(pengguna mula, menengah, ahli), tipe dialog yang
diperlukan dan kendala teknologi yang ada untuk
mengimplementasikan ragam dialog tersebut.
Perancangan struktur dialog.
Melibatkan pengguna, sehingga pengguna
langsung mendapatkan umpanbalik (diskusi
informal, prototipe dari dialog yang nantinya akan
ia gunakan)
3.
4.
Perancangan format pesan.
Tata letak tampilan dan keterangan tekstual
secara terinci harus mendapatkan perhatian lebih.
Selain itu, kebutuhan data masukan yang
mengharuskan pengguna untuk memasukkan data
ke dalam komputer juga harus dipertimbangkan
dari segi efisiensinya. Contoh : mengurangi
pengetikan yang tidak perlu dengan cara
mengefektifkan penggunaan tombol.
Perancangan penanganan kesalahan.
Untuk menghindari kondisi abnormal termination,
yaitu eksekusi program berhenti karena terjadinya
suatu kesalahan, maka bentuk-bentuk penanganan
kesalahan perlu dilakukan.
Bentuk-bentuk penanganan kesalahan yang dapat
dilakukan antar lain :




5.
validasi pemasukan data
proteksi pengguna
pemulihan dari kesalahan
penampilan pesan kesalahan yang tepat dan sesuai
dengan kesalahan yang terjadi pada waktu itu.
Perancangan struktur data
Merupakan struktur internal yang digunakan untuk
menyajikan dan mendukung fungsionalitas
komponen-komponen antarmuka yang diperlukan.
Contoh: struktur data yang diperlukan untuk
mengimplementasikan dialog berbasis grafis jauh
lebih rumit dibandingkan dengan struktur data yang
diperlukan pada dialog berbasis tekstual.
Perancangan :
- Tampilan berbasis teks
- Tampilan berbasis grafis
Perancangan
Tampilan Berbasis Teks
Ada 6 faktor yang harus diperhatikan :
1.
Urutan penyajian
Dalam model pengguna telah dijelaskan urutan
operasi dari sebuah program aplikasi, sehingga
urutan penyajian pun harus disesuaikan dengan
model pengguna yang telah disusun.
2.
Kelonggaran (spaciousness)
Penggunaan tabulasi dan sejumlah spasi, meskipun
kadang-kadang menghabiskan tempat kosong pada
layar akan memudahkan pengguna mencari suatu
teks yang diinginkan.
Perancangan
Tampilan Berbasis Teks

Pengelompokan
Data yang saling berkaitan sebaiknya
dikelompokkan untuk mempermudah
penstrukturan layar tampilan secara
keseluruhan. Beberapa karakter khusus
dapat dipasang untuk menunjukkan
adanya pengelompokkan sejumlah
data.
2.
3.
4.
Relevansi
Tampilkan hanya pesan-pesan yang relevan
dengan topik yang sedang ditampilkan pada layar.
Konsisten
Dalam sistem berbasis frame (misalnya pada
dialog berbasis pengisian borang), pengguna
sering dihadapkan pada sejumlah tampilan yang
penuh dengan informasi, sehingga desainer harus
konsisten dalam menggunakan ruang tampilan
yang tersedia.
Kesederhanaan
Istilah ini menunjukkan kepada cara paling mudah
untuk menyajikan aras informasi yang dapat
dipahami dengan cepat oleh pengguna.
Perancangan Tampilan Berbasis Teks
Pengisian data pribadi
---------------------------------------------Nama : Okky Wishnu Santosa
Tempat/tgl.lahir : Yogyakarta, 10 Februari 1970
Alamat : Jalan Pelan-pelan No. 20, Yogyakarta
Kelamin : Laki-laki
Pekerjaan : Wiraswasta
Pendidikan :
SD : SDN Ungaran I, Yogyakarta
SMP : SMPN 20, Medan
SMU : SMUN 12, Jakarta
Sarjana : Universitas Merdeka, Jakarta
(A)
urutan penyajian
Pengisian data pribadi
-----------------------------------------------------------Nama
: Okky Wisnhu Santosa
relevansi
Tempat/tgl.lahir : Yogyakarta, 10 Februari 1970
Kelamin
: Laki-laki
Alamat
: Jalan Pelan-pelan No. 20, Yogyakarta
:
:
:
:
:
Pekerjaan
: Wiraswasta
SDN Ungaran I
SMPP 20
SMUN 12
Universitas Merdeka
Yogyakarta
Medan
Jakarta
Jakarta
konsistensi
kelonggaran
kesederhanaan
(B)
pengelompokan
Pendidikan
SD
SMP
SMU
Sarjana
Perancangan
Tampilan Berbasis Grafis
Contoh Antarmuka berbasis grafis LISA-Macintosh (1983).
Beberapa kemampuan yang dimiliki oleh Xerox Star dan LISA,
yang kemudian diikuti oleh sistem yang lain seperti Microsoft
Windows adalah :
 Pengguna tidak harus mengingat perintah-perintah yang
panjang, tetapi dengan melihat, menunjukkan ke suatu
gambar yang mewakili suatu aktifitas tertentu (icon).
 Penggunaan borang property atau option untuk mengatur
kenampakan (wajah) desktop.
 Kemampuan WYSIWYG.
 Menggunakan perintah-perintah yang berlaku umum
sehingga lebih memudahkan pengguna, seperti MOVE,
DELETE, COPY, dll.
Perancangan
Tampilan Berbasis Grafis
Berdasarkan kelebihan-kelebihan yang disebutkan pada contoh di
atas, ada lima faktor yang perlu diperhatikan pada saat kita
merancang antarmuka berbasis grafis, yaitu ;
 Ilusi pada obyek-obyek yang dapat dimanipulasi
Perancangan antarmuka berbasis grafis yang efektif harus melibatkan tiga
komponen :



Gunakan kumpulan obyek yang disesuaikan dengan aplikasi yang
akan dibuat. Jika obyek-obyek itu belum ada, kita dapat
mengembangkannya sendiri.
Penampilan obyek-obyek grafis mudah dimengerti oleh pengguna.
Gunakan mekanisme yang konsisten untuk memanipulasi obyek
yang akan muncul di layar.
Perancangan
Tampilan Berbasis Grafis

Urutan visual dan fokus pengguna
Antarmuka grafis untuk menarik perhatian pengguna
dengan : membuat suatu obyek berkedip,
menggunakan warna tertentu atau menyajikan suatu
animasi. Gunakan rangsangan visual tertentu untuk
maksud tertentu, jangan berlebihan.
Perancangan
Tampilan Berbasis Grafis

Struktur internal
Mengolah kata, misalnya ada sekelompok kata yang
ditebalkan, dimiringkan atau diberi garis bawah.
Reveal code, yakni suatu tanda khusus yang digunakan
untuk menunjukkan adanya perbedaan font-style.
Reveal code - karakter khusus,ini tidak akan ikut
dicetak, tetapi digunakan untuk menunjukkan kepada
pengguna antara lain tentang font-style yang
digunakan, batas kiri dan batas kanan dari halaman
teks serta informasi yang lain.
Perancangan
Tampilan Berbasis Grafis
Kosakata grafis yang konsisten dan sesuai.



Penggunaan simbol-simbol obyek atau icon memang
tidak ada standarnya, dan biasanya disesuaikan dengan
kreatifitas perancangnya.
Sebagai contoh simbol
banyak digunakan untuk
menyatakan aktifitas penyimpanan data. Pada program
lain, aktifitas yang sama bisa juga diberi simbol
Perancangan
Tampilan Berbasis Grafis
Kesesuaian dengan media




Karakteristik khusus dan layar tampilan pengaruh
terhadap keindahan “wajah” antarmuka yang akan
ditampilkan.
Pada layar tampilan yang masih berbasis karakter,
misalnya CGA, pemunculan gambar tidak akan secantik
apabila kita menggunakan layar tampilan yang sering
disebut dengan bitmap atau raster display.
Semakin canggih, Kreatifitas desainer tampilan dituntut
untuk memenuhi permintaan pengguna - aspek
kenyamanan dan keramahan antarmuka.
Perancangan
Tampilan Berbasis Grafis
WAKTU TANGGAP
 Yang diinginkan user adalah waktu tanggap yang sesingkatsingkatnya. (Berbeda-beda dapat mempengaruhi konsentrasi
pengguna, kinerja pengguna). Waktu tanggap yang lama (> 14’)
akan menyebabkan perhatian pengguna terpecah ke aktifitas
lain.
 Pada beberapa aplikasi yang memerlukan aktifitas interaktif,
misalnya pemilihan menu, pengisian borang dan pemberian
perintah, waktu tanggap yang kurang dari 2 detik dianggap
cukup memadai. Tetapi, ada sistem yang memerlukan waktu
tanggap seketika, misalnya pemasukan karakter demi karakter
lewat keyboard atau pergerakan kursor mouse.
PENANGANAN KESALAHAN
Kesalahan dibagi menjadi dua, yakni :
 Kesalahan pada saat implementasi program, yakni :
kesalahan sintaks yang secara langsung akan dideteksi oleh
compiler sehingga sering disebut dengan compiler-time error.
Kesalahan sintaksis terjadi pada saat program sedang
dikompilasi. Sebelum kesalahan itu dibetulkan, program tidak
akan dapat dioperasikan.
 Kesalahan logika ketika program sedang dijalankan atau runtime error atau fatal error. Kesalahan logika adalah :
kesalahan yang terjadi pada saat program sedang dijalankan.
Kesalahan ini akan mengakibatkan terhentinya eksekusi
program secara abnormal (abnormal termination).
Any question….?





Pengumuman TTS
Minggu depan, hari Jumat, 22 Juni 2012
Pukul 13.00 – 14.00
Bahan semua sampai dengan hari ini
Sifat : Buku Tertutup
Fly UP