Interaksi Manusia dan Komputer

(IMK)

Pengantar IMK dan

Konsep GUI dan Web
UI

1 2/13/2018
Tujuan
Setelah mengikuti mata kuliah ini mahasiswa
dapat:

“Merancang antarmuka perangkat lunak yang

memenuhi prinsip User Interface (UI) yang
benar”

2 2/13/2018
Silabus
Pengantar IMK dan Konsep GUI dan Web UI
Metode Perancangan UI : User Center Design
(UCD)
Tahapan Perancangan Antarmuka (14 Step)
Antarmuka Web dan Mobile
Antarmuka Game

3 2/13/2018
Referensi
1. Galitz, Wilbert O. 2007. The Essential Guide to UI Design. Third Edition.
2. Welie, martijn van. 2001. Task-based UI Design. SIKS Disertation Series
No. 2001-6.
3. Ballard, Barbara. 2007. Designing the Mobile User Experience. Little
Springs Design, Inc., USA.
4. Fox, Brent. 2005. Game Interface Design. Thompson Course Technology.
5. Kalbach, James. 2007. Designing Web Navigation. O'Reilly.
6. Cohen, Michael H., et al. 2004. Voice UI Design. Addison Wesley.
7. Coninx, Karin., et al. 2006. Task Models and Diagrams for UI Design.
Springer.
8. Jenny Preece, Yvonne Rogers, Helen Sharp. 2002. Interaction
Design_beyond Human-Computer –Interaction, J. Wiley & Sons
9. Valverde R, 2011. Principles Of Human Computer Interaction, Lambert
Academic Publishing.
10.Heim, S. 2007, The Resonant Interface HCI Foundations for interaction
design, Addison Wesley.

4 2/13/2018
 Learning Method:
Student Centered Learning + Project Based Learning +
Role Playing

5 2/13/2018
 Intro IMK

6 2/13/2018
Definisi IMK/HCI
Human-computer interaction is the study,
planning, and design of how people and
computers work together so that a person’s
needs are satisfied in the most effective way
(Galitz, 2007)
Human-computer interaction is a discipline concerned with
the design, evaluation and
implementation of interactive
computing systems for human use and with the
study of major phenomena surrounding them (Hewett et al,
1996)
7 2/13/2018
HCI / IMK
Pada saat melakukan design antarmuka kita perlu
memperhatikan beberapa hal:
– apa keinginan dan harapan orang terhadap produk yang
dibangun,
– apa batasan dan kemampuan fisik para penggunanya,
– memperhatikan user experience dari pengguna produk,
Pertimbangkan apa yang menurut pengguna baik dan
buruk dari antarmuka yang dirancang, dan
– Lakukan selalu test dan retest agar mendapatkan design
antarmuka yang sesuai dengan kebutuhan pengguna.
Perancang juga harus memperhatikan karakteristik dan
batasan teknis dari perangkat keras dan perangkat
lunak komputer

8 2/13/2018
Manusia Vs Komputer Komputer:
• tidak fleksibel / tidak
mampu beradaptasi,
• input harus dalam
format yang jelas &
output harus
didefinisikan
sebelumnya,
• tidak dapat belajar,
• dapat didesain ulang

Manusia:
• fleksibel & mampu
beradaptasi,
• dapat belajar bagaimana
bekerja di lingkungan yang
baru

9 2/13/2018
Paradigma Interaksi
Paradigma interaksi adalah model atau pola interaksi
manusia komputer yang mencakup semua aspek interaksi,
termasuk fisik, virtual, persepsi, dan kognitif (Heim 2007).

Paradigma interaksi diidentifikasikan oleh Heim(20017) :

– Large Scale Computing
– Personal computing
– Networked computing
– Mobile Computing
– Collaborative Environment
– Virtual Reality
– Augmented Reality

10 2/13/2018
5W+H
Who, what, where, why, and how

5 W + H heuristic adalah prosedur yang dapat digunakan untuk

mendefinisikan dan menganalisa paradigma interaksi yang ada dan ruang
serta mengeksplorasi unsur-unsur dan objek dengan yang berinteraksi
pengguna.

Heuristik itu terdiri dari 3 komponen :

– What/How : digunakan untuk memahami komponen antarmuka fisik dan
virtual.
– Where/When : Hal ini terkait dengan lingkungan fisik. terlihat perbedaan
antara kantor, portabel, sistem dpt dipakai.
– Who/Why : ini terlihat pada jenis tugas dan keahlian yang dibutuhkan.

Petakan 5 W + H terhadap jenis paradigma interaksi menurut Heim

11 2/13/2018
Hubungan HCI/IMK - Interaction Design

HCI/IMK
merupakan disiplin
ilmu yang
dibutuhkan dalam
merancang sebuah
antarmuka sebuah
produk dalam hal
ini produk software

Jenny Preece, Yvonne Rogers, Helen Sharp.

2002. Interaction Design_beyond Human-
Computer –Interaction, J. Wiley & Sons

12 2/13/2018
User Interface
Antarmuka/ user interface (UI) merupakan bagian dari komputer
dan perangkat lunaknya yang dapat dilihat, didengar, disentuh,
dan diajak bicara, baik secara langsung maupun dengan proses

pemahaman tertentu.
UI yang baik adalah UI yang tidak disadari, dan UI yang
memungkinkan pengguna fokus pada informasi dan task tanpa
perlu mengetahui mekanisme untuk menampilkan informasi dan
melakukan task tersebut.
Komponen utamanya:
– Input
– Output
13 2/13/2018
Pentingnya Desain UI yang Baik
Banyak sistem dengan fungsionalitas yang baik
tapi tidak efisien, membingungkan, dan tidak
berguna karena desain UI yang buruk
Antarmuka yang baik merupakan jendela untuk
melihat kemampuan sistem serta jembatan bagi
kemampuan perangkat lunak
Desain yang buruk akan membingungkan,
tidak efisien, bahkan menyebabkan frustasi

14 2/13/2018
Desain UI yang Baik perlu memenuhi
Usability goals
– effective to use (effectiveness)
– efficient to use (efficiency)
– safe to use (safety)
– have good utility (utility)
– easy to learn (learnability)
– easy to remember how to use (memorability)

User Experience goals

– Satisfying - Enjoyable
– Fun - Entertaining
– Helpful - Motivating
– Aesthetically pleasing - Supportive of creativity
– Rewarding - Emotionally fulfilling
15 2/13/2018
Usability dan User Experience goals
• Pertemuan selanjutnya
setiap kelompok
memberikan penjelasan
dan contoh tentang setiap
komponen usability dan
user experience.
• Sumbernya bias didapat
dari buku Jenny Preece,
Yvonne Rogers, Helen
Sharp. 2002. Interaction
Design_beyond Human-
Computer –Interaction, J.
Wiley & Sons dan sumber
lain

Jenny Preece, Yvonne Rogers, Helen Sharp. 2002.

Interaction Design_beyond Human-Computer –
Interaction, J. Wiley & Sons

16 2/13/2018
Sejarah IMK
Buat sebuah resume mengenai sejarah IMK dan
pendapat anda tentang keberadaan disiplin ilmu
IMK terhadap proses pembangunan perangkat
lunak
Resume dapat berupa gabungan teks dan gambar.
Dalam resume sebutkan referensi/acuan tulisan
anda.
Jika ditemukan unsur plagiat maka nilainya 0.

17 2/13/2018
 Konsep GUI dan Web UI

18 2/13/2018
 Text Based VS GUI VS Web UI

GUI

Text Based
Web UI

19 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Framework
• Manusia berinteraksi dengan komputer tentunya
sangat komplek dan tidak mudah.

O
output
S U
System User
I
Input

Interaction Framework

20 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Style
An interaction style is simply the method, or methods, by
which the user and a computer system communicate with
one another

Type of Interaction Style :

– Command line
– Menu-Based Interface
– Form Fill in
– Direct Manipulation
– Anthropomorphic/Metaphors
– Web Navigation
– 3D Environment
– Zoomable interface
– Natural Language

21 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Style
Command line :
Merupakan interaction style paling awal dari teknologi computer
Powerfull for Advanced user
Complex Syntax
“Low error tolerant” sehingga bisa menyebabkan user frustasi

22 2/13/2018
CSG2C3 – Interaksi Manusia Dan Komputer
Interaction Style

Menu Selection
Trend UI saat ini di
berbagai macam Aplikasi.
Utilize a person with
much stronger
Recognition.
Membantu bagi
infrequent user.
Label Menu harus
dimengerti dan memiliki
arti yang jelas.

23 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Style
Form Fill in
Sangat berguna untuk mengambil Informasi
Membutuhkan typing skill yang tinggi
Familiar dengan paper form di dunia nyata

24 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Style
Direct Manipulation
– Memungkinkan User berinteraksi secara langsung bahkan
memanipulasi objek yang tampil di layar

25 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Style
Anthropomorphic
– Sebuah antarmuka anthropomorphic mencoba untuk berinteraksi dengan
orang-orang dengan cara yang sama seperti orang-orang berinteraksi
satu sama lain. Ini mencakup dialog bahasa alami lisan, gerakan tangan,
ekspresi wajah dan gerakan mata

26 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Interaction Style
STYLE ADVANTAGES DISADVANTAGES
Command Line Powerfull, Flexible, Appeals to expert user, Commands must be memorized,
Conserves screen space requires big learning effort,
intolerant of typing errors

Menu Selection Utilizes recognition memory, reduces interaction Consumes screen space, may create
complexity, aids decision making process, complex menu hierarchies, may slow
minimize typing, aids casual users knowledgeable users

Form Fill in Familiar format, simplifies information entry, Consumes screen space, requires
requires minimal training carefull and efficient design, does
not prevent typing errors

Direct Faster Learning, easier remembering, exploits Greater design complexity, window
Manipulation visual/spatial cues, easy error recovery, provides manipulation requirements, requires
context, immediate feedback icon recognition, inefficient for touch
typist, increased chance for screen
clutter

Anthropomorphic Natural Difficult to implement

27 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

GUI VS WEB UI
KARAKTERISTIK
SISTEM DIRECT
MANIPULATION
Merupakan potret langsung dari
kehidupan nyata

Object dan action selalu terlihat

Rapid and incremental Action with

visible display of results

Incremental action are easily

reversible

28 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

Graphics User Interface (GUI)
STYLE ADVANTAGES
Direct Manipulation Faster Learning, easier
remembering, exploits
visual/spatial cues, easy
error recovery, provides
context, immediate
feedback, more attractive,
easily augmented with text
display, low typing req.
29 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer
DISADVANTAGES
Greater design complexity,
window manipulation
requirements, requires
icon recognition,
inefficient for touch typist,
increased chance for
screen clutter, note always
familiat, human
comprehension limitation,
may consume more
screen space, hardware
limitation.
Characteristics Of GUI
Presentasi Visual yang canggih
interaksi pilih dan klik
Satu set solusi dalam antarmuka yg terbatas
Visualisasi
Orientasi objek
Penggunaan memori pengenal seseorang secara
ekstensif
Fungsi kinerja serentak
30 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer
Web User Interface
Hal yang paling mendasar dalam
Desain antarmuka Web itu
adalah pada desain navigasi dan
penyajian informasi. Dalam Web
yang paling penting adalah
Konten bukan Data
Web Page VS Web Application
More user Control

31 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

 GUI VS WEB UI

Cari tahu lebih

banyak
perbedaan GUI
dan Web dari
aspek lainnya, ,
misal dari aspek
Content,
Interaction, etc

32 2/13/2018 CSG2C3 – Interaksi Manusia Dan Komputer

The merging of graphical business systems and the web
Dimension
The Nature of the
relationship with the user
The Conversation style
The Nature of the interaction
The Frequency of use
33 2/13/2018
Web Application
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 style is formal
A Large amount of data is
entered, complex task are
being performed, data is
being created, manipulated
and permanently stored
It is used daily, it is used for
long period (4-8 Hour), it is
used to help resolve
emergencies
Web Page
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
The style is casual , informal
and generic
No data is entered or
changed
It is used only occasionally,
it is used for only few
minutes at a time, it is used
to find out about something
CSG2C3 – Interaksi Manusia Dan Komputer
In the middle of
continuum
Minimal information such as
a credit card number or
address is remembered
The style is polite but
friendly
A small amount of data is
entered and possibly stored,
Milestones, checkpoints,
endpoints are expected and
included
It is used periodically or
episodically
The merging of graphical business systems and the web (Cont.)
Dimension
The Perceived distance of the
provider
Real Time interaction
How much help will users need?
The interaction style
The Presentation style
Follow standards
34 2/13/2018
Web Application
It is viewed as being local in
origin, it is viewed as being
controlled locally by a data
administrator, the response time
is fast
Data is fed in real time, the
information is critical, a delay is
life-threatening, long reponses
exist but users remain
Intense training programs and
experience are needed to use
and become experts
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 Style is subdue and serious
Platform standard compliance
exists, the style resembles or
matches GUI standard
Web Page In the middle of continuum
The origin is unknown, the The origin cannot ascertained
origin is viewed as originating or doesn’t matter
somewhere else in the country
or overseas, the response time
is slow
Time is irrelevant, long response Response is near real time
delay exist and cause users to
exit
Every visit is one time session, A minimum amount of
minimizing or eliminating the experience, training or help
need for help material is needed
The navigation is flexible and The navigation is flexible, simple
simple, controls are simple, no data collection exist, user exits
object selection is required, by closing web browser
action are easily reversed using
the back button, no drag-drop
manipulation exist, single
clicking links are used to
navigate
The style is colorfull, graphic, The style is cooler but attractive
possibly animated, the control
are obvious and self explanatory
Few Cross site standard are Some common pattern exists
followed, only intra-site
consistently exists
CSG2C3 – Interaksi Manusia Dan Komputer