2. Karakteristik Gas dasdasUI Dan Web UI

8/19/2019 2. Karakteristik Gas dasdasUI Dan Web UI

1/10

9/7/201

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 GUIWeb UI

Karakteristik GUI berbeda juga dengan Web UI


MENU KITA HARI INI :

Karakteristik GUI danWeb UI

Gaya Interaksi

GUI dan Web UI

Gabungansistem bisnis grafis

dengan web

Prinsip-prinsip desain UI


2/10

9/7/201


GAYA INTERAKSI

Gaya interaksi adalah metode [-metode] komunikasi

antara pengguna dengan sistem komputer

Beberapa jenis Gaya Interaksi:

Command l ine

Menu Selection

Form Fill in

Direct Manipulation

Anthropomorph ic


COMM ND 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

pengenalanmanusia

Membantu bagi infrequent user

Label Menu harus dimengerti dan

memiliki arti yang jelas

Tren UI saat ini di berbagai macam

aplikasi


FORM FILL IN

Sangatberguna untuk mengambil

Informasi

Membutuhkan typing skill yang tinggi

Familiar dengan paper form di dunia

nyata


3/10

9/7/201


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 adalahdialog bahasa alami,

gerakan tangan, ekspresi wajah dan gerakan mata.


INTERACTION STYLE SUMMARY

GAYA INTERAKSI KELEBIHAN KEKURANGAN

Command Line Powerful, fleksibel, sesuai bagi

pengguna ahli, mengh emat 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

FormFill 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

Anthropomorphic Alami Sulit diimplementasikan


GUI VS WEB UI


4/10

9/7/201


GRAPHICAL USER INTERFACE GUI)

KARAKTERISTIK SISTEM

DIRECT MANIPULATIONMerupakanpotretlangsungdari kehidupan

nyata

Object danaction selalu terlihat

Aksicepat dan incremental, hasiltampil di

layar

Aksi incremental mudah dibatalkan/

dikembalikan kekondisisebelumnya


CHARACTERISTICS OF GUI

Tampilanvisualmenarik

Interaksi pick andclick

Memilikiketerbatasan gaya

interaksi

Visualisasi Berorientasi o bjek

Memanfaatkanmemori

pengenalanmanusia

Dapatmenjalankan

beberapa fungsisekaligus


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/10

9/7/201

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


Dimension Web Application Web PageIn the middle of

continuum

The Nature of the

relationship with

the user

Users must usethe 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 datais 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 areexpected 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

something

It is usedperiodically or

episodically

The merging of graphical business systems and the web


Dimension Web Application Web PageIn 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 realtime, 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

Everyvisit 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 dropmanipulation 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 usingthe 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 webbrowser

The

Presentation

style

The Style is subdue and serious The styleis colorfull, graphic,

possibly animated, the control are

obvious and self explanatory

The style is cooler but

attractive

Follow

standards

Platform standard compliance

exists, the style resembles or

matches GUI standard

Few Cross site standard are

followed, only intra-site

consistently exists

Some common pattern

exists


6/10

9/7/201


PRINSIP

DESAIN

UI


Accessib i l i ty

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


Aesthet ical ly 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


Availabi l i ty

• Seluruh objek

harus tampak

setiap saat

•

Hindaripenggunaan

mode.

3


7/10

9/7/201


Clarity

Antarmuka harus jelas secara visual,

konseptual dan linguistik, termasuk

penggunaan:• elemen-elemen visual

• fungsi

• metafora

• kata

• teks

4


Compat ib i l i ty

• Tampilan harus

compatible dengan• pengguna

• task dan pekerjaan

• produk

• Mengadopsi

perspektif

pengguna.

5


Configurabi l i ty

Tampilan harus mudah di-personalisasi, konfigurasi

dan rekonfigurasi untuk:

• Meningkatkan sense of control

• Memfasilitasi pemahaman pengguna

6


Consistency

• Sistem harus serupa dalam:• tampilan

• aksi

• operasi

• Aksi yang sama harus memberikan hasil yang

sama

• Fungsi dan posisi elemen-elemen standarsebaiknya tidak berubah.

7


8/10

9/7/201


Contro l

• 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


Eff iciency

• Minimalkan gerakan mata dan tangan, serta

aksi kontrol lainnya.

• Antisipasi keinginan dan kebutuhan

pengguna semaksimal mungkin.


Famil iar i ty

• Gunakan konsep dan bahasa yang familiar bagi

pengguna.

• Antarmuka harus alami dan sesuai dengan pola

perilaku pengguna, melalui penggunaan real-

world metaphors.


9/10

9/7/201


Flexibi l i ty

• Fleksibilitas adalah kemampuan sistem

untuk merespon perbedaan individual.

• Peningkatan fleksibilitas biasanya diimbangi

dengan penurunan usabilitas, sehingga

penerapannya harus dipertimbangkan

dengan matang.

2


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

3


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

4


Predictabi l i ty

Pengguna harus dapat mengantisipasi

dampak dari setiap task yang dilakukannya

pada sistem.

5

Responsiveness

• Sistem harus dapat segera merespon

permintaan pengguna.

• Sediakan respon dalam bentuk visual,

tekstual, maupun auditory .

6


10/10

9/7/201


Transparency

Sistem harus memfasilitasi pengguna untuk

fokus pada task nya, tanpa mengetahui

mekanisme antarmuka.

7

Trade-Offs

• Desain akhir harus mempertimbangkan

trade-offs antar prinsip-prinsip tersebut.

• Kebutuhan pengguna harus diutamakan

daripada kebutuhan teknis.

8


Visibi l i ty

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!


Documents

2. Karakteristik Gas dasdasUI Dan Web UI