2. Karakteristik GUI dan Web UI

(1)

KARAKTERISTIK

ANTARMUKA GRAFIS DAN

WEB

EGP

-Tujuan Perkuliahan

Setelah mengikuti mata kuliah ini mahasiswa

dapat:

1.Memahami perbedaan mendasar antara GUI

dan Web UI

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

Karakteristik

GUI

berbeda dengan

Text Based Interface

Text Based

GUI

Web UI

Karakteristik

GUI

berbeda juga dengan

Web UI

MENU KITA HARI INI :

Karakteristik GUI dan Web UI

Gaya Interaksi

GUI dan Web UI

(2)

GAYA INTERAKSI

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

COMMAND LINE

Merupakan gaya interaksi paling awal dari teknologi komputer

Powerfull for Advanced user

Complex Syntax

“Low error tolerant” sehingga bisa menyebabkan user frustasi

MENU SELECTION

Memanfaatkan kemampuan

pengenalan manusia

Membantu bagi

infrequent user

Label Menu harus dimengerti dan

memiliki arti yang jelas

Tren UI saat ini di berbagai macam

aplikasi

FORM FILL IN

Sangat berguna untuk mengambil

Informasi

(3)

DIRECT MANIPULATION

Memungkinkan User berinteraksi secara

langsung bahkan memanipulasi objek

yang tampil di layar

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.

INTERACTION STYLE SUMMARY

GAYA INTERAKSI KELEBIHAN KEKURANGAN

Command Line Powerful, fleksibel, sesuai bagi pengguna ahli, menghemat layar

Harus mengingat perintah, perlu dipelajari, tidak mentolerir kesalahan ketik

Menu Selection Mengutamakan pengenalan, mengurangi kompleksitas interaksi, membantu proses pengambilan keputusan, meminimalkan pengetikan, membantu pengguna awam

Boros layar, hirarki menu bisa jadi kompleks, dapat memperlambat pengguna ahli

Form Fill in Format familiar, menyederhanakan input informasi, memerlukan pelatihan minimal

Boros layar, perlu desain yang hati-hati dan efektif, tidak mencegah salah ketik

Direct Manipulation Lebih cepat dipelajari, mudah diingat, menampilkan tanda-tanda visual/spatial, error recovery mudah, menyediakan konteks, feedback segera

Desain lebih kompleks, perlu manipulasi window, perlu pengenalan ikon, tidak efisien bagi pengetik ahli, meningkatkan kemungkinan kekacauan layar

(4)

GRAPHICAL USER INTERFACE (GUI)

KARAKTERISTIK SISTEM

DIRECT MANIPULATION

Merupakan potret langsung dari kehidupan nyata

Object dan action selalu terlihat

Aksi cepat danincremental,hasil tampil di layar

Aksiincrementalmudah dibatalkan/ dikembalikan ke kondisi sebelumnya

CHARACTERISTICS OF GUI

Tampilan visual

menarik

Interaksi

pick and

click

Memiliki

keterbatasan gaya

interaksi

Visualisasi

Berorientasi objek

Memanfaatkan

memori

pengenalan

manusia

Dapat

menjalankan

beberapa fungsi

sekaligus

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



(5)

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

Dimension

Web Application

Web Page

In the middle of

continuum

The Nature of the relationship with the user

Users must use the program, Users must identifiy, themselves or login to be able to do anything, The program must be reliable, and system failure will be immediately noticed

Work is remembered from earlier session

The system does not care who the user are, Login is required to simply give access to more information than would be received anonymously, System failure may not be noticed

Minimal information such as a credit card number or address is remembered

The Conversation style

The style is formal The style is casual , informal and generic

The style is polite but friendly The Nature of the

interaction

A Large amount of data is entered, complex task are being performed, data is being created, manipulated and permanently stored

No data is entered or changed

A small amount of data is entered and possibly stored, Milestones, checkpoints, endpoints are expected and included The Frequency of

use

It is used daily, it is used for long period (4-8 Hour), it is used to help resolve emergencies

It is used only occasionally, it is used for only few minutes at a time, it is used to find out about

It is used periodically or episodically

The merging of graphical business systems and the web

Dimension

Web Application

Web Page

In the middle of

continuum

The Perceived distance of the provider

It is viewed as being local in origin, it is viewed as being controlled locally by a data administrator, the response time is fast

The origin is unknown, the origin is viewed as originating somewhere else in the country or overseas, the response time is slow

The origin cannot

ascertained or doesn’t

matter Real Time

interaction

Data is fed in real time, the information is critical, a delay is life-threatening, long reponses exist but users remain

Time is irrelevant, long response delay exist and cause users to exit

Response is near real time How much

help will users need?

Intense training programs and experience are needed to use and become experts

Every visit is one time session, minimizing or eliminating the need for help

A minimum amount of experience, training or help material is needed The interaction

style

The navigation is controled, controls are complex, the syntax is obejct:Action, there is little or no reversibility, drag and drop manipulation is expected, exit requires users to log off

The navigation is flexible and simple, controls are simple, no object selection is required, action are easily reversed using the back button, no drag-drop manipulation exist, single clicking links are used to navigate

The navigation is flexible, simple data collection exist, user exits by closing web browser The

Presentation

The Style is subdue and serious The style is colorfull, graphic, possibly animated, the control are

(6)

PRINSIP

DESAIN

UI

Accessibility

Sistem harus dapat

digunakan, tanpa

modifikasi, oleh sebanyak

mungkin orang.

• Perceptibility

: untuk

keterbatasan pancaindera

• Operability

: untuk

keterbatasan fisik

• Simplicity

: untuk keterbatasan

pengalaman,

literacy

, dan

konsentrasi

• Forgiveness

: meminimalkan

kesalahan pengguna dan

akibat yang ditimbulkannya

1

Aesthetically Pleasing

Sistem harus menarik secara visual

• Menyediakan kontras yang bermakna antar

elemen-elemen layar yang berbeda

• Melakukan pengelompokan

• Menyelaraskan elemen-elemen dan

kelompok-kelompok dalam layar

• Menyediakan representasi 3 dimensi

• Menggunakan warna dan grafis secara efektif dan

sederhana

2

Availability

• Seluruh objek

harus tampak

setiap saat

• Hindari

penggunaan

mode

.

(7)

Clarity

Antarmuka

harus

jelas

secara

visual,

konseptual

dan

linguistik,

termasuk

penggunaan:

• elemen-elemen visual

• fungsi

• metafora

• kata

• teks

4

Compatibility

• Tampilan harus

compatible

dengan

• pengguna

• task

dan pekerjaan

• produk

• Mengadopsi

perspektif

pengguna.

5

Configurability

Tampilan harus mudah di-personalisasi, konfigurasi

dan rekonfigurasi untuk:

• Meningkatkan sense of control

6

Consistency

• Sistem harus serupa dalam:

• tampilan

• aksi

• operasi

• Aksi yang sama harus memberikan hasil yang

sama

• Fungsi dan posisi elemen-elemen standar

sebaiknya tidak berubah.

(8)

Control

• Kontrol harus diserahkan pada pengguna, agar

pengguna, menurut caranya, dapat menentukan:

• what to do

• how to do it

dan dapat menyelesaikannya dengan mudah.

• Antarmuka yang sederhana, dapat diprediksi,

konsisten, fleksibel, customizable, dan pasif

memberikan kontrol kepada pengguna.

8

Directness

Berikan alternatif agar

pengguna dapat

melakukan

task

secara

langsung.

9

Efficiency

• Minimalkan gerakan mata dan tangan, serta

aksi kontrol lainnya.

• Antisipasi keinginan dan kebutuhan

pengguna semaksimal mungkin.

10

Familiarity

• Gunakan konsep dan bahasa yang familiar bagi

pengguna.

• Antarmuka harus alami dan sesuai dengan pola

perilaku pengguna, melalui penggunaan

real-world metaphors

.

(9)

Flexibility

• Fleksibilitas

adalah

kemampuan

sistem

untuk merespon perbedaan individual.

• Peningkatan fleksibilitas biasanya diimbangi

dengan

penurunan

usabilitas,

sehingga

penerapannya

harus

dipertimbangkan

dengan matang.

12

Immersion

Munculkan immersion

agar

pengguna menikmati dan puas

terhadap sistem. Hal ini dapat

dilakukan melalui:

• Tantangan yang harus diselesaikan

• Konteks yang dapat mempertahankan

fokus pengguna

• Tujuan yang didefinisikan dengan jelas

• Feedback

langsung tentang aksi dan

performansi

• Perasaan kontrol terhadap aksi,

task

dan

lingkungan

13

Obviousness

• Sistem harus mudah dipelajari dan dipahami.

• Pengguna harus mengetahui

• what to look at

• what it is

• what, when, where, why,

dan

how to do it

14

Predictability

Pengguna

harus

dapat

mengantisipasi

dampak dari setiap

task

yang dilakukannya

pada sistem.

15

Responsiveness

• Sistem harus dapat segera merespon

permintaan pengguna.

• Sediakan respon dalam bentuk visual,

(10)

Transparency

Sistem harus memfasilitasi pengguna untuk

fokus

pada

task

nya,

tanpa

mengetahui

mekanisme antarmuka.

17

Trade-Offs

• Desain akhir harus mempertimbangkan

trade-offs

antar prinsip-prinsip tersebut.

• Kebutuhan pengguna harus diutamakan

daripada kebutuhan teknis.

18 Visibility

Status dan metode penggunaan sistem

harus ditampilkan dengan jelas.

• Organisasi hirarkis: letakkan informasi atau kontrol

dalam kategori logis.

• Sensitivitas konteks: tampilkan dan sembunyikan

informasi dan kontrol berdasarkan konteks sistem.

25

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!