PERANCANGAN

TAMPILAN
Kelompok 3 :
Ghema Indah Novemberin S. Kalina Nur Shofiyyati
Julian Ivan Sani Khairunisa S.
MATERI YANG AKAN DIBAHAS

Perancangan
Tampilan

3. Prinsip dan 4. Piranti Bantu 5. Jaring

2. Cara
1. Pengantar Petunjuk Perancangan Semantik
Pendekatan
Perancangan Tampilan Tampilan

3.2 3.3
3.5
3.1 Urutan Perancangan Perancangan 3.4 Waktu
Penanganan
Perancangan Tampilan Tampilan Tanggap
Kesalahan
Berbasis Text Berbasis Grafis
PENGANTAR

Dokumentasi Rancangan

Membuat sketsa pada kertas

Menggunakan GUI (Graphical
User Interface)
Menuliskan keterangan pada
jendela yang saling terkait
CINTA ANTARMUKA Menggunakan CASE (Computer
Aided Software Engineering)

BACK TO
CONTENTS
 CARA PENDEKATAN

Program
Pendekatan Contoh
Aplikasi
Program aplikasi
User Centered
Inventory
Special Purpose Design Aproach
gudang, data
Software dan User Design
akademis
Aproach
mahasiswa, dll

Operating
General Purpose
Customization System berbasis
Software
GUI

BACK TO
CONTENTS
PRINSIP DAN PETUNJUK
PERANCANGAN

Model Model dimiliki oleh pengguna ketika ia menggunakan

Pengguna sebuah sistem atau program aplikasi.

Bahasa Peranti pemanipulasian model disebut dengan bahasa

Perintah perintah (command language)

Berbentuk pesan penjelasan, pesan penerimaan

Umpan
perintah, indikasi adanya obyek terpilih, dan penampilan
Balik
karakter yang diketikkan lewat papan ketik

Menunjukkan status informasi atau program ketika

Penampilan pengguna melakukan suatu tindakan
Informasi
BACK TO
CONTENTS
URUTAN PERANCANGAN

Pemilihan Perancangan
Ragam Format Perancangan
Dialog Pesan Struktur Data

Perancangan Perancangan
Struktur Penanganan
Dialog Kesalahan
Validasi Data
Proteksi Pengguna
Pemulihan dari kesalahan
Penampilan pesan salah
BACK TO
CONTENTS
PERANCANGAN TAMPILAN BERBASIS
TEXT

6 faktor yang perlu

diperhatikan dalam
membuat perarancangan
tampilan berbasis text

1. Urutan Penyajian
2. Kelonggaran
3. Pengelompokan
4. Relevansi
5. Konsistensi
6. Kesederhanaan

BACK TO
CONTENTS
PERANCANGAN TAMPILAN BERBASIS
GRAFIS

Antarmuka harus menarik

Perancang harus memiliki jiwa seni

Menyesuaikan dengan selera

pengguna

Evaluasi dalam pembuatan tampilan

yang baru / memperbaiki tampilan
yang sebelumnya

BACK TO
CONTENTS
PERANCANGAN TAMPILAN BERBASIS
GRAFIS

Waktu Tanggap
Kecepatan
Penampilan
Kendalanya? Lebar Pita
Penampilan
Tipe Tampilan
 PERANCANGAN TAMPILAN BERBASIS
GRAFIS
SEJARAHNYA..

Tahun 1970-an
Penelitian di Xerox Palo Alto
Research Center
Tahun 1983
Macintosh mengembangkan
antarmuka berbasis grafis

XEROX STAR
LISA
 PERANCANGAN TAMPILAN BERBASIS
GRAFIS

Tidak perlu mengingat

perintah/command
KELEBIHAN

Penggunaan form property

atau option untuk mengatur
penampakan desktop

Kemampuan WYSIWYG

Perintah yang berlaku umum

(e.g : save, copy, delete,
move)
PERANCANGAN TAMPILAN BERBASIS
GRAFIS

FAKTOR YANG PERLU DIPERHATIKAN

Urutan Struktur
Ilusi pada Kosa kata Kesesuaian
Visual dan Internal
objek dapat grafis yang dengan
Fokus (Reveal
dimanipulasi konsisten Media
Pengguna Structure)

BACK TO
CONTENTS
ILUSI PADA OBJEK-OBJEK DAPAT
DIMANIPULASI

3
Penggunaan kumpulan objek disesuaikan
dengan aplikasi yang akan dibuat
Komponen yang
harus dilibatkan
dalam
perancangan
Penampilan objek harus mudah dimengerti oleh
berbasis grafis pengguna

Menggunakan mekanisme yang konsisten untuk

memanipulasi objek yang muncul di layar
 URUTAN VISUAL DAN FOKUS
PENGGUNA

Penggunaan objek-objek, pewarnaan dan animasi untuk menunjukan maksud

tertentu serta menarik perhatian pengguna

!
CLICK
HERE
BUTTON WARNING SIGN
PERBEDAAN WARNA
PADA MENU
STRUKTUR INTERNAL

Untuk memberitahu pengguna sampai sejauh

mana pengguna dapat mengubah atau
memanipulasi obyek tsb
KOSA KATA GRAFIS YANG KONSISTEN

Penggunaan simbol-simbol objek/icon yang memiliki makna/tujuan tertentu namun

tidak memiliki standar

SEARCH DOWNLOAD CONFIGURATION

/ SETTING
 KESESUAIAN DENGAN MEDIA

Rancangan tampilan disesuaikan dengan kemampuan dari software dan hardware

yang ada.

Penggunaan Penggunaan
Graphic dan
Adapter dan kompabilitas
tipe monitor Software

BACK TO
CONTENTS
WAKTU TANGGAP

Keinginan pengguna program aplikasinya

memberikan waktu tanggap yang sependek-
pendeknya.

Waktu tanggap yang berbeda-beda dapat mempengaruhi konsentrasi pengguna sehingga

mempengaruhi kinerja pengguna.
e.g:
Waktu tanggap > 14 detik menyebabkan perhatian pengguna terpecah pada aktivitas lain.
Waktu tanggap < 2 detik merupakan waktu tanggap yang ideal
Waktu tanggap seketika digunakan untuk pemasukan karakter, dll

BACK TO
CONTENTS
 PENANGANAN KESALAHAN

Compile
Time
Error

Run-time
Kesalahan Error

Logical
Error
PENANGANAN KESALAHAN

Validasi pemasukan data

penanganannya?
Proteksi pengguna

Pemulihan dari kesalahan

Lalu
Menampilkan pesan apabila terjadi
kesalahan

BACK TO
CONTENTS
PIRANTI BANTU PERANCANGAN
TAMPILAN

Peranti bantu sederhana digunakan untuk

medokumentasikan wajah antar muka yang
diinginkan, berbentuk lembaran kertas
yang tidak perlu disiapkan secara khusus
namun dapat menggunakan sembarang
kertas kosong yang diberi nama LKT
(Lembar Kerja Tampilan)

BACK TO
CONTENTS
PIRANTI BANTU PERANCANGAN
TAMPILAN

Nomor lembar kerja

4 bagian dalam
Tampilan

Navigasi

LKT
Keterangan

BACK TO
CONTENTS
JARING SEMANTIK TAMPILAN

Komponen
Jaring Semantik

Nomor Tampilan
Transisi
(Lembar Kerja)

BACK TO
CONTENTS
SESI TANYA JAWAB
KESIMPULAN

Antarmuka yang menarik berperan penting dalam sukses atau tercapainya apa yang
diinginkan seorang perancang tampilan, karena dapat menambah keinginan para
pengguna untuk menggunakan/mengexplore aplikasi atau rancangan yang dibuat.
Untuk merancang tampilan menarik dan disukai pengguna, seorang perancang
tampilan harus memperhatikan berbagai aspek diantaranya : cara pendekatan
perancangan tampilan, prinsip dan petunjuk perancangan, urutan perancangan,
dan dokumentasi rancangan seperti yang sudah dijelaskan sebelumnya.

BACK TO
CONTENTS