94923415 Semester 1 Mid Term Exam Part 2

Interaksi Manusia dan Komputer (IMK)

Pengantar IMK dan Konsep GUI dan Web UI

Tujuan Setelah mengikuti mata kuliah ini mahasiswa dapat:  “Merancang antarmuka Merancang antarmuka

perangkat lunak yang memenuhi prinsip User Interface (UI) yang benar” 

Tujuan Setelah mengikuti mata kuliah ini mahasiswa dapat:  “Merancang antarmuka Merancang antarmuka

perangkat lunak yang memenuhi prinsip User Interface (UI) yang benar” 

Silabus Pengantar IMK dan Konsep GUI dan Web UI Metode Perancangan UI : User Center Design (UCD) Tahapan Perancangan Antarmuka A ntarmuka (14 Step) Step ) Antarmuka Web dan Mobile Antarmuka Game

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.

Learning Method: Student Centered Learning + Project Based Learning + Role Playing

Intro IMK

Definisi IMK/HCI  study,  planning , and  design of how  people and computers work together  so that a  person’s needs are  satisfied  in the most effective way Human-computer

interaction

is

the

(Galitz, 2007) Human-computer interaction is a discipline concerned with

design, evaluation and implementation interactive of computing systems  for human use and with the the

study of major phenomena surrounding them (Hewett et al, 1996)

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  –

 –  –

 –

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 •

•

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

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

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 HumanComputer –Interaction, J. Wiley & Sons

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

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

membingungkan, tidak efisien, bahkan menyebabkan frustasi Desain yang buruk akan

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 Fun Helpful Aesthetically pleasing Rewarding

-

Enjoyable Entertaining Motivating Supportive of creativity Emotionally fulfilling

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 HumanComputer –Interaction, J. Wiley & Sons dan sumber lain

Jenny Preece, Yvonne Rogers, Helen Sharp. 2002. Interaction Design_beyond Human-Computer – Interaction, J. Wiley & Sons

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.

Konsep GUI dan Web UI

Text Based VS GUI VS Web UI

GUI

Text Based

Web UI

Interaction Framework •

Manusia berinteraksi dengan komputer tentunya sangat komplek dan tidak mudah. O output S System

U User I Input

Interaction Framework

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

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

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.

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

Interaction Style Direct Manipulation  –

Memungkinkan User berinteraksi secara langsung bahkan memanipulasi objek yang tampil di layar

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

Interaction Style STYLE

ADVANTAGES

DISADVANTAGES

Command Line

Powerfull, Flexible, Appeals to expert user, Conserves screen space

Commands must be memorized, requires big learning effort, intolerant of typing errors

Menu Selection

Utilizes recognition memory, reduces interaction complexity, aids decision making process, minimize typing, aids casual users

Consumes screen space, may create complex menu hierarchies, may slow knowledgeable users

Form Fill in

Familiar format, simplifies information entry, requires minimal training

Consumes screen space, requires carefull and efficient design, does not prevent typing errors

Direct Manipulation

Faster Learning, easier remembering, exploits visual/spatial cues, easy error recovery, provides context, immediate feedback

Greater design complexity, window manipulation requirements, requires icon recognition, inefficient for touch typist, increased chance for screen clutter

Anthropomorphic

Natural

Difficult to implement

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

langsung

dari

Object dan action selalu terlihat Rapid and incremental Action with visible display of results Incremental reversible

action

are

easily

Graphics User Interface (GUI) STYLE

ADVANTAGES

DISADVANTAGES

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.

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

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

GUI VS WEB UI

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

The merging of graphical business systems and the web 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 something

It is used periodically or episodically