Interaksi Manusia dan Komputer

(IMK)
Tim Dosen IMK

KK SIDE

Overview User-Centered
Design

Overview Proses Desain

User Interface

1 11/30/2021
 Interaksi Manusia dan Komputer
(IMK)
Tim Dosen IMK

KK SIDE

Overview User-Centered
Design

2 11/30/2021
Tujuan

Setelah mengikuti materi ini mahasiswa dapat:

1. Mengetahui proses yang dilakukan pada desain
User Interface

3 11/30/2021
 Overview User Centered Design (UCD)

4 11/30/2021
What is User-Centered Design?
An approach to UI development and system
development.
Focuses on understanding:
– Users, and
– Their goals and tasks, and
– The environment (physical, organizational, social)

Pay attention to these throughout development

5 11/30/2021
ISO on User-centered Design
ISO 13407 describes human-centered design
processes for interactive systems
Principles of human-centered design:
– Active involvement of users
– Appropriate allocation of function between user and
system
– Iteration of design solutions
– Multidisciplinary design teams

6 11/30/2021
What is a user-centered approach?
User-centered approach is based on:
– Early focus on users and tasks: directly studying
cognitive, behavioral, anthropomorphic & attitudinal
characteristics
– Empirical measurement: users’ reactions and
performance to scenarios, manuals, simulations &
prototypes are observed, recorded and analysed
– Iterative design: when problems are found in user
testing, fix them and carry out more tests

7 11/30/2021
A simple interaction design model

Exemplifies a user-centered design approach

8 11/30/2021
1. Identifying needs and establishing
requirements
Some practical issues
Who are the users?
What are ‘needs’?

9 11/30/2021
Target users

10 11/30/2021
Users’ needs

11 11/30/2021
Brief overview of common methods to
gather user data
· Interviews
· Questionnaires
· Observation
· Choosing and combining
techniques

12 11/30/2021
2. Developing alternative designs
Competitive/Comparative Analysis,
– Try using similar services or products in order to find out:
 Current trends in the marketplace
 What expectations your users will have
 What to do, what not to do
 Interface conventions
 “Must have” standard features

Heuristic Evaluation,
– Evaluate an existing interface (or new interface concept) based on set of
usability criteria
– Mostly used to highlight usability problems and deficiencies
– May or may not propose usability solutions
– Identified problem areas are addressed by subsequent design work
– Normally done with expert evaluators, but it can be a valuable tool for
anyone
– One detailed checklist: http://www.stcsig.org/usability/topics/articles/he-
checklist.html
13 11/30/2021
2. Developing alternative designs
Persona,
– Models of “archetypical” users culled from user research
– Each persona is a description of one particular “typical” user of your system
– Personas may be combined if they have the same (or sometimes overlapping) goals
– Places the focus on specific users rather than on "everyone”

Goals, Tasks & Scenarios,

– Goals:
 Are what the user wants to do, but not how the user achieves them
– Tasks:
 Describe the steps necessary to achieve the goals
 Can vary with the available technology
 Are broken down into steps for task analysis, and are recombined into sequence of steps for
scenario development
 Designers can reorganize, combine, or remove tasks currently performed to help users achieve
their goals more efficiently
– Scenarios:
 Written description of a persona achieving a goal through a set of tasks in a specific context
 Should start technology-neutral and become more specific as the design progresses

14 11/30/2021
3. Building interactive versions of the designs
Start rough
Explore!
Use personas to keep the users in Design
view Prototype
Use scenarios to inform the
design
Get frequent feedback
Note user conventions
Make design artifacts public
Evaluate
May be expressed in a prototype
for usability testing

15 11/30/2021
4. Evaluating designs
Let users validate or invalidate the design
Ask the user to complete selected typical tasks (from scenarios)
and think aloud while they do it
Test early in the process
Can test with 3-5 users (or less!)
“Formal” testing
Measures “success”
– Set success criteria prior to testing (best done at the project
outset)
– Compare to baseline if you have one
– Have usability problems revealed in the heuristic evaluation been
addressed?

16
4. Evaluating designs
Define what is to be tested

Select users based on personas

Administer the tests

Analyze the data

Document the findings in a brief

Share the findings with the development team

Determine what design changes will be made based on test

results

17 11/30/2021
 Interaksi Manusia dan Komputer
(IMK)
Tim Dosen IMK

KK SIDE
THE USER INTERFACE (UI)
DESIGN PROCESS

Overview Proses Desain UI

18 11/30/2021
Proses Desain UI (14 Step)
Step 1 : Know Users • Step 8 : Clear text & message
Step 2 : Understand Business • Step 9 : Provide Effective
Function Feedback
Step 3 : Understand the Principles
• Step 10 : Internasionalization &
of Good Interface and Screen Accessibility
Design • Step 11 : Create Meaningful
Graphics,
Step 4 : Develop System Menu &
Icons, and Images
Navigation
• Step 12 : Choose Proper
Step 5 : Proper Windows Colours
Step 6 : Proper Interaction Device • Step 13 : Organize & Layout
Step 7 : Screen-based controls
Windows & Page
• Step 14 : Testing
Step 1 Know User
Tujuan :
1.Memahami pentingnya mengenal pengguna dari
aplikasi yang akan dibangun sebagai dasar untuk
merancang antarmuka perangkat lunak
2. Mendefinisikan Persona User antarmuka
perangkat lunak
Us
er
Pe
rs
on
a
Ex
am
ple
 Us
er
Pe
rs
on
a
Ex
am
ple

22
 Us
er
Pe
rs
on
a
Ex
am
ple

23
Step 2 Understand Business Function
Tujuan :
1.Memahami pentingnya mengetahui fungsi bisnis
berdasarkan Persona user sebagai acuan dalam
merancang antarmuka perangkat lunak.
2. Mengerti dan menerapkan setiap tahapan dalam
mengidentifikasi
alur kerja setiap task berdasarkan Persona User.
Step 3 Understand the Principles of Good Interface and Screen Design

Tujuan :
Menerapkan prinsip design interaksi dalam
merancang antarmuka perangkat lunak untuk
menghasilkan antarmuka perangkat lunak yang
baik.
Basic Design Principles :
Consistency, Simplicity, Context
Step 4 Develop System Menu &
Navigation
Tujuan :
Mahasiswa mampu merancang Struktur menu &
navigasi yang sesuai dengan prinsip UI
 Struktur Menu

28 11/30/ CSG2C3 - INTERAKSI MANUSIA DAN KOMPUTER

2021
Step 5 Proper Windows
Tujuan :
Mahasiswa/i dapat mampu memilih dan
merancang windows yang sesuai dengan
kebutuhan.
 Tipe-tipe Windows

Primary windows
– Window utama yang muncul di layar saat sebuah aktivitas atau aksi dimulai
– Disebut juga application window / main window / parent window
– Merupakan titik utama aktivitas pengguna

Secondary windows
– Windows tambahan yang dapat berupa independent maupun dependent window
terhadap primary window-nya
– Dapat berupa modal maupun modeless

Dialog box
– Untuk memperluas dan melengkapi interaksi dengan aksi tertentu yang sangat terbatas
– Untuk menampilkan pesan, aksi singkat, atau tombol command (OK, cancel, dll)

30 11/30/2021
Gaya tampilan windows
Step 6 Proper Interaction Device
Tujuan :
Mahasiswa/i dapat mampu memahami karakteristik
setiap perangkat interaksi sehingga dapat memilih
perangkat interaksi yang tepat diterapkan dalam
desain UI.
SELECTING THE PROPER INPUT
DEVICE
Step 7 Screen Based Controls
Tujuan :
Mahasiswa/i mampu memilih dan menerapkan
screen-based controls yang tepat dengan kebutuhan
Controls examples

Single occurrence Multiple occurrence

Or

Read-only / display Segmentation

If alphanumeric then
left justify

Or
If numeric then right
justify
Step 8 Clear Text & Message
Tujuan :
Mahasiswa/i mampu merancang teks dan pesan
yang tepat dan sesuai dengan prinsip UI
Which you prefer? Why?
Step 9 : Provide Effective Feedback
– Tujuan :
Mampu merancang feedback, guidance, dan
assistance dengan efektif .

38
Step 10 Internasionalization &
Accessibility

• Localization
International • Cultural considerations
considerations • Writing text
• Using images and symbols

Accessibility • Types of disabilities

considerations • Designing for accessibility
Step 11 Create Meaningful Graphics,
Icons, and Images

– Tujuan :
Mahasiswa/I mampu menerapkan Graphics, Icons,
Images yang sesuai dengan kebutuhan

– Icons are pictorial images most often used to

represent objects and actions with which users can
interact with or that they can manipulate.
Graphics
Images: should convey their intended messages

Image maps: to provide navigation links to other content

Photographs/ Pictures: used when every aspect of the

image is relevant

Video: to show things moving/ changing over time

Diagrams: to show the structure/ relationship of objects

Drawings: when selected parts need to be emphasized/

represented

Animation: to explain ideas involving a change in time/

position

Audition: as a supplement to text and graphics

Learning Improvements for Various Media

11/30/2
021
Step 12 Choose Proper Colors
– Tujuan :
Mahasiswa/I mampu menerapkan warna yang sesuai dengan
kebutuhan
Color

Color adds dimension, or realism, to screen usability.

Color draws attention because it attracts a person’s

eye.

If used properly, it can emphasize the logical

organization of information, facilitate the discrimination
of screen components, accentuate differences among
elements, and make displays more interesting and
attractive.

If used improperly, color can be distracting and

possibly visually fatiguing, impairing the system’s
usability.
Step 13 Organize & Layout Windows &
Page
Tujuan :
Mahasiswa/i dapat mampu menerapkan pengaturan
dan tataletak Windows dan halaman web yang
sesuai dan bermakna. Mempercepat
Pemahaman Informasi

Pengaturan/
Pengorganisas Mempercepat Proses
Eksekusi Task dan
ian Layout fungsi
windows dan
halaman web
Meningkatkan User
yang baik Acceptance
Bagaimana menurut anda ketika
tampilan awal photoshop adalah
seperti ini??
Bagaimana menurut anda
ketika tampilan awal
photoshop adalah seperti
ini?? BANDINGKAN!!
 Step 14 Testing
Tujuan :
Mahasiswa/i dapat memahami
konsep pengujian dalam desain UI
dan cara mengukur UI
Bahan bacaan
Wilbert O. Galitz,2007,The Essential Guide to User Interface Design:
An Introduction to GUI Design Principles and Techniques, Third
Edition, Wiley Publishing, p.71-102 (dan untuk pertemuan minggu depan
p.103-126)
https://uxmastery.com/what-does-a-user-centred-design-process-look-like/
http://
knowledge.hubspot.com/contacts-user-guide/how-to-create-personas
http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-pa
rt-1
/
http://webdesign.tutsplus.com/articles/defining-and-applying-personas-to-
ux-design--
webdesign-7561
http://
www.storyboardthat.com/articles/software-development/using-personas-to
-identify-your-target-customers

50 11/30/2021
 THANK YOU
11/30/2021
51