9/7/2010

Tujuan Perkuliahan
KARAKTERISTIK
Setelah mengikuti mata kuliah ini mahasiswa
ANTARMUKA GRAFIS DAN
dapat:
WEB
1.Memahami perbedaan mendasar antara GUI
dan Web UI
- EGP - 2.Mengerti dan menerapkan prinsip-prinsip
pokok di dalam mendesain aplikasi sesuai
dengan kebutuhan

9/7/2010 Fakultas Informatika IT Telkom 2

Text Based VS GUI VS Web UI MENU KITA HARI INI :

Karakteristik GUI dan Web UI

Gaya Interaksi

GUI dan Web UI

Text Based GUI
Web UI

Gabungan sistem bisnis grafis

dengan web
Karakteristik GUI berbeda dengan Text Based Interface

Karakteristik GUI berbeda juga dengan Web UI

Prinsip-prinsip desain UI

9/7/2010 Fakultas Informatika IT Telkom 3 9/7/2010 Fakultas Informatika IT Telkom 4

1
 9/7/2010

GAYA INTERAKSI COMMAND LINE

Gaya interaksi adalah metode [-metode] komunikasi

antara pengguna dengan sistem komputer

Beberapa jenis Gaya Interaksi:

 Command line
 Menu Selection
 Form Fill in
 Direct Manipulation
 Anthropomorphic

 Merupakan gaya interaksi paling awal dari teknologi komputer

 Powerfull for Advanced user
 Complex Syntax
 “Low error tolerant” sehingga bisa menyebabkan user frustasi

9/7/2010 Fakultas Informatika IT Telkom 5 9/7/2010 Fakultas Informatika IT Telkom 6

MENU SELECTION FORM FILL IN

Tren UI saat ini di berbagai macam

aplikasi Sangat berguna untuk mengambil
Memanfaatkan kemampuan Informasi
pengenalan manusia
Membantu bagi infrequent user Membutuhkan typing skill yang tinggi

Label Menu harus dimengerti dan Familiar dengan paper form di dunia
memiliki arti yang jelas nyata

9/7/2010 Fakultas Informatika IT Telkom 7 9/7/2010 Fakultas Informatika IT Telkom 8

2

DIRECT MANIPULATION
Memungkinkan User berinteraksi secara
langsung bahkan memanipulasi objek
yang tampil di layar
9/7/2010 Fakultas Informatika IT Telkom
INTERACTION STYLE SUMMARY
GAYA INTERAKSI KELEBIHAN
Command Line Powerful, fleksibel, sesuai bagi
pengguna ahli, menghemat layar
Menu Selection Mengutamakan pengenalan,
mengurangi kompleksitas interaksi,
membantu proses pengambilan
keputusan, meminimalkan
pengetikan, membantu pengguna
awam
Form Fill in Format familiar, menyederhanakan
input informasi, memerlukan
pelatihan minimal
Direct Manipulation Lebih cepat dipelajari, mudah
diingat, menampilkan tanda-tanda
visual/spatial, error recovery mudah,
menyediakan konteks, feedback
segera
Anthropomorphic Alami
9/7/2010 Fakultas Informatika IT Telkom
9/7/2010
ANTHROPOMORPHIC
Antarmuka Anthropomorphic berusaha untuk berinteraksi dengan
manusia dengan cara yang sama seperti manusia berinteraksi satu
sama lain. Termasuk dalam gaya ini adalah dialog bahasa alami,
gerakan tangan, ekspresi wajah dan gerakan mata.
9 9/7/2010 Fakultas Informatika IT Telkom 10
GUI VS WEB UI
KEKURANGAN
Harus mengingat perintah, perlu
dipelajari, tidak mentolerir
kesalahan ketik
Boros layar, hirarki menu bisa jadi
kompleks, dapat memperlambat
pengguna ahli
Boros layar, perlu desain yang
hati-hati dan efektif, tidak
mencegah salah ketik
Desain lebih kompleks, perlu
manipulasi window, perlu
pengenalan ikon, tidak efisien bagi
pengetik ahli, meningkatkan
kemungkinan kekacauan layar
Sulit diimplementasikan
11 9/7/2010 Fakultas Informatika IT Telkom 12
3
 9/7/2010

GRAPHICAL USER INTERFACE (GUI) CHARACTERISTICS OF GUI

Memiliki
KARAKTERISTIK SISTEM Tampilan visual Interaksi pick and
keterbatasan gaya
menarik click
interaksi
DIRECT MANIPULATION
Merupakan potret langsung dari kehidupan
nyata Memanfaatkan
memori
Object dan action selalu terlihat Visualisasi Berorientasi objek
pengenalan
manusia
Aksi cepat dan incremental, hasil tampil di
layar
Dapat
Aksi incremental mudah dibatalkan/ menjalankan
dikembalikan ke kondisi sebelumnya beberapa fungsi
sekaligus

9/7/2010 Fakultas Informatika IT Telkom 13 9/7/2010 Fakultas Informatika IT Telkom 14

THE WEB USER INTERFACE

 Awalnya, desain
antarmuka Web ditujukan
untuk merancang navigasi
dan tampilan informasi.
Dengan kata lain, desain
CONTENT, bukan DATA..

 Web Page VS Web

Application

 More user Control

9/7/2010 Fakultas Informatika IT Telkom 15 9/7/2010 Fakultas Informatika IT Telkom 16

4
 9/7/2010

9/7/2010 Fakultas Informatika IT Telkom 17 9/7/2010 Fakultas Informatika IT Telkom 18

The merging of graphical business systems and the web In the middle of
Dimension Web Application Web Page
continuum
In the middle of The Perceived It is viewed as being local in origin, The origin is unknown, the origin The origin cannot
Dimension Web Application Web Page
continuum distance of the it is viewed as being controlled is viewed as originating ascertained or doesn’t
provider locally by a data administrator, the somewhere else in the country or matter
The Nature of the Users must use the program, The system does not care Minimal information such
response time is fast overseas, the response time is
relationship with Users must identifiy, themselves or who the user are, as a credit card number or
slow
the user login to be able to do anything, Login is required to simply address is remembered
The program must be reliable, and give access to more Real Time Data is fed in real time, the Time is irrelevant, long response Response is near real
system failure will be immediately information than would be interaction information is critical, a delay is delay exist and cause users to exit time
noticed received anonymously, life-threatening, long reponses
Work is remembered from earlier System failure may not be exist but users remain
session noticed How much Intense training programs and Every visit is one time session, A minimum amount of
The Conversation The style is formal The style is casual , The style is polite but help will users experience are needed to use and minimizing or eliminating the experience, training or
style informal and generic friendly need? become experts need for help help material is needed
The Nature of the A Large amount of data is entered, No data is entered or A small amount of data is The interaction The navigation is controled, The navigation is flexible and The navigation is
interaction complex task are being performed, changed entered and possibly style controls are complex, the syntax simple, controls are simple, no flexible, simple data
data is being created, manipulated stored, Milestones, is obejct:Action, there is little or no object selection is required, collection exist, user
and permanently stored checkpoints, endpoints are reversibility, drag and drop action are easily reversed using exits by closing web
expected and included manipulation is expected, exit the back button, no drag-drop browser
requires users to log off manipulation exist, single clicking
The Frequency of It is used daily, it is used for long It is used only occasionally, It is used periodically or
links are used to navigate
use period (4-8 Hour), it is used to help it is used for only few episodically
resolve emergencies minutes at a time, it is The The Style is subdue and serious The style is colorfull, graphic, The style is cooler but
used to find out about Presentation possibly animated, the control are attractive
something style obvious and self explanatory
Follow Platform standard compliance Few Cross site standard are Some common pattern
standards exists, the style resembles or followed, only intra-site exists
9/7/2010 Fakultas Informatika IT Telkom 19 matches GUI standard consistently exists
9/7/2010 Fakultas Informatika IT Telkom 20

5
 9/7/2010

Accessibility 1
Sistem harus dapat
PRINSIP digunakan, tanpa
modifikasi, oleh sebanyak
DESAIN mungkin orang.
• Perceptibility: untuk
UI keterbatasan pancaindera
• Operability: untuk
keterbatasan fisik
• Simplicity: untuk keterbatasan
pengalaman, literacy, dan
konsentrasi
• Forgiveness: meminimalkan
kesalahan pengguna dan
akibat yang ditimbulkannya

9/7/2010 Fakultas Informatika IT Telkom 22

9/7/2010 Fakultas Informatika IT Telkom 21

Aesthetically Pleasing 2 Availability 3

Sistem harus menarik secara visual
• Menyediakan kontras yang bermakna antar • Seluruh objek
elemen-elemen layar yang berbeda harus tampak
• Melakukan pengelompokan
• Menyelaraskan elemen-elemen dan kelompok-
setiap saat
kelompok dalam layar
• Menyediakan representasi 3 dimensi • Hindari
• Menggunakan warna dan grafis secara efektif dan penggunaan
sederhana mode.

9/7/2010 Fakultas Informatika IT Telkom 23 9/7/2010 Fakultas Informatika IT Telkom 24

6
 9/7/2010

Clarity
4 Compatibility
5
Antarmuka harus jelas secara visual,
• Tampilan harus
konseptual dan linguistik, termasuk
compatible dengan
penggunaan:
• pengguna
• elemen-elemen visual
• task dan pekerjaan
• fungsi
• produk
• metafora
• kata • Mengadopsi
• teks perspektif
pengguna.

9/7/2010 Fakultas Informatika IT Telkom 25 9/7/2010 Fakultas Informatika IT Telkom 26

Configurability
6 Consistency
7
• Sistem harus serupa dalam:
• tampilan
• aksi
• operasi
• Aksi yang sama harus memberikan hasil yang
sama
• Fungsi dan posisi elemen-elemen standar
Tampilan harus mudah di-personalisasi, konfigurasi sebaiknya tidak berubah.
dan rekonfigurasi untuk:
• Meningkatkan sense of control
• Memfasilitasi pemahaman pengguna
9/7/2010 Fakultas Informatika IT Telkom 27 9/7/2010 Fakultas Informatika IT Telkom 28

7
 9/7/2010

Control 8 Directness
9
• Kontrol harus diserahkan pada pengguna, agar
pengguna, menurut caranya, dapat menentukan: Berikan alternatif agar
• what to do
• how to do it pengguna dapat
dan dapat menyelesaikannya dengan mudah. melakukan task secara
• Antarmuka yang sederhana, dapat diprediksi, langsung.
konsisten, fleksibel, customizable, dan pasif
memberikan kontrol kepada pengguna.

9/7/2010 Fakultas Informatika IT Telkom 29 9/7/2010 Fakultas Informatika IT Telkom 30

Efficiency
10 Familiarity
11
• Minimalkan gerakan mata dan tangan, serta
• Gunakan konsep dan bahasa yang familiar bagi
aksi kontrol lainnya.
pengguna.
• Antisipasi keinginan dan kebutuhan
• Antarmuka harus alami dan sesuai dengan pola
pengguna semaksimal mungkin.
perilaku pengguna, melalui penggunaan real-
world metaphors.

9/7/2010 Fakultas Informatika IT Telkom 31 9/7/2010 Fakultas Informatika IT Telkom 32

8
 9/7/2010

Flexibility
12 Immersion 13

• Fleksibilitas adalah kemampuan sistem Munculkan immersion agar

untuk merespon perbedaan individual. pengguna menikmati dan puas
• Peningkatan fleksibilitas biasanya diimbangi terhadap sistem. Hal ini dapat
dilakukan melalui:
dengan penurunan usabilitas, sehingga • Tantangan yang harus diselesaikan
penerapannya harus dipertimbangkan • Konteks yang dapat mempertahankan
dengan matang. fokus pengguna
• Tujuan yang didefinisikan dengan jelas
• Feedback langsung tentang aksi dan
performansi
• Perasaan kontrol terhadap aksi, task dan
lingkungan

9/7/2010 Fakultas Informatika IT Telkom 33 9/7/2010 Fakultas Informatika IT Telkom 34

Obviousness
14 Predictability
15
• Sistem harus mudah dipelajari dan dipahami. Pengguna harus dapat mengantisipasi
• Pengguna harus mengetahui
dampak dari setiap task yang dilakukannya
• what to look at
• what it is pada sistem.
• what, when, where, why, dan how to do it
Responsiveness 16
• Sistem harus dapat segera merespon
permintaan pengguna.
• Sediakan respon dalam bentuk visual,
tekstual, maupun auditory.
9/7/2010 Fakultas Informatika IT Telkom 35 9/7/2010 Fakultas Informatika IT Telkom 36

9
 9/7/2010

Transparency
Sistem harus memfasilitasi pengguna untuk
fokus pada tasknya, tanpa mengetahui
mekanisme antarmuka.
Trade-Offs
• Desain akhir harus mempertimbangkan
trade-offs antar prinsip-prinsip tersebut.
• Kebutuhan pengguna harus diutamakan
daripada kebutuhan teknis.
17 Visibility
25
Status dan metode penggunaan sistem
harus ditampilkan dengan jelas.
• Organisasi hirarkis: letakkan informasi atau kontrol
18 dalam kategori logis.
• Sensitivitas konteks: tampilkan dan sembunyikan
informasi dan kontrol berdasarkan konteks sistem.

9/7/2010 Fakultas Informatika IT Telkom 37 9/7/2010 Fakultas Informatika IT Telkom 38

Tugas 1
Dalam kelompok (@3-5 orang):

1. Pilih sebuah website (no porno, no SARA).

2. Analisis website tersebut berdasarkan
prinsip-prinsip desain yang telah dipelajari.
3. Sebutkan kelebihan, kekurangan, dan berikan
masukan untuk perbaikan website tersebut!

9/7/2010 Fakultas Informatika IT Telkom 39

10