“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

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

3.2 Perancangan 3.3 Perancangan

3.1 Urutan 3.4 Waktu 3.5 Penanganan
Tampilan Berbasis Tampilan Berbasis
Perancangan Tanggap Kesalahan
Text 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
User Centered Program aplikasi
Special Purpose Design Aproach dan Inventory gudang,
Software User Design data akademis
Aproach mahasiswa, dll

General Purpose Operating System

Customization
Software berbasis GUI

BACK TO
CONTENTS
“PRINSIP DAN PETUNJUK
PERANCANGAN”

Model • Model dimiliki oleh pengguna ketika ia menggunakan sebuah sistem

Pengguna atau program aplikasi.

Bahasa • Peranti pemanipulasian model disebut dengan bahasa perintah

Perintah (command language)

• Berbentuk pesan penjelasan, pesan penerimaan perintah, indikasi

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

• Menunjukkan status informasi atau program ketika pengguna

Penampilan melakukan suatu tindakan
Informasi
BACK TO
CONTENTS
 “URUTAN PERANCANGAN”

Pemilihan Perancangan Perancangan

Ragam Dialog Format Pesan Struktur Data

Perancangan Perancangan
Struktur Dialog Penanganan
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

Penggunaan form property atau

KELEBIHAN

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

Struktur
Ilusi pada Urutan Visual Kosa kata
Internal Kesesuaian
objek dapat dan Fokus grafis yang
(Reveal dengan Media
dimanipulasi Pengguna konsisten
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
berbasis grafis Penampilan objek harus mudah dimengerti oleh 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 dan

Graphic Adapter kompabilitas
dan 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 LKT

Tampilan

Navigasi

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