Pengenalan UI/UX

Nama Pengajar
Pamela Kareen
Modul
Pamela Kareen
Pembelajaran
Yang akan kita bahas pada sesi ini

Pengertian UI dan UX

Perbedaan UI dan UX

Contoh UI dan UX

Manfaat dari UI/UX

User

Usability
Pembelajaran (2)
Yang akan kita bahas pada sesi ini

Karir di UI/UX

Peningkatan UI/UX

Tools

UI/UX Trends

Design System

Design Process
Pengertian UI dan UX

User Interface (UI)

Tampilan Visual yang menjembatani produk dan pengguna

User Experience (UX)

Pengalaman yang didapatkan pengguna ketika berinteraksi dengan
produk
 Perbedaan

UI UX
Warna Desain Interaksi
Tipografi Wireframe dan prototipe
Layout User Journey
Desain Visual User Research
cleveroad.com
 Useful; bermanfaat bagi

7 Faktor UX
01 pengguna

02 Usable; dapat digunakan

semestinya

03 Findable; mudah ditemukan

Credible; mendapatkan
04
trust dari pengguna

05 Desirable; diinginkan oleh

pengguna

06 Accessible; cepat diakses

07 Valueable; berharga untuk

pengguna
Karakteristik UI
Clear; memiliki visual yang
01 jelas 05 Consistency; Visual yang
konsisten

02 Concise; ringkas 06 Attractive; menarik

03 Familiar; mudah untuk dipahami 07 Efficiency; efisien dan

tidak rumit
Responsive; memiliki
04
feedback 08 Forgiving; memaafkan
Contoh UI/UX
 UI UX
Mobil berwarna biru Aman
Terdiri dari 5 pintu Nyaman digunakan
Mobil merupakan tipe SUV Service mobil murah
Kapasitas muatan banyak
 UI
Can you geuss?
Apa Perbedaannya?

https://dribbble.com/shots/3879704-UI-vs-UX
KENAPA
UI/UX
PENTING?
UI/UX Benefit
Visual lebih jelas Brand awareness

Meningkatkan kualitas produk Akses dan usability yang lebih baik

Produk lebih efektif dan efisien meningkatkan produktivitas

User friendly many more

Engagment
https://careerfoundry.com/en/blog/ux-design/10-classic-ux-design-fails/
Good UI/UX

@iconicdiary
 USER 1
User

An education app design for a 5-10 y.o. End User

2
the kids have a great time because there
are many picture and games in it.
User experience
3
Poin Penting

User Needs
Memastikan kamu membuat produk yang dibutuhkan
oleh pengguna

Siapa penggunanya?
Apa yang ingin pengguna capai?
Kebutuhan dan kendala yang dihadapi pengguna
User Needs List
Functions Information

Features Social

Performance Discoverability

Accessibility Context

Productivity Reliability

Efficiency Risk

Convience Capacity

Comfort Risk

Learnability Reusability

Stability and more

https://simplicable.com/new/user-needs
https://blogs.kent.ac.uk/webdev/2015/08/24/unifying-the-
user-experience/
Poin Penting

Usability
Pengertian usability di ISO 9241

"The extent to which a product can be used by specified

users to achieve specified goals with effectiveness,
efficiency, and satisfaction in a specified context of use"
5s Karakteristik
Usability
Effectiveness
Relenvant: informasi yang dibutuhkan pengguna, menjawab pertanyaan,
dan membantu pengguna menyelesaikan tasks untuk mencapai goals
pengguna.
Complete
Clear and unambiguous: pesan yang ingin disampaikan jelas
accurate and up to date

https://www.wqusability.com/articles/more-than-ease-of-use.html
5s Usability
Efficient
Fast to find: navigation dan pencarian
easy to read: menggunakan kalimat yang mudah dimengerti
concise
structured well
design for scan reading

Engaging
Presented well
not to formal or informal
not afraid to use personal pronouns

https://www.wqusability.com/articles/more-than-ease-of-use.html
5s Usability
Error tolerant
Clear and unambiguous
accurate and up to date

Easy to learn
Written using familiar terms: menggunakan kalimat yang familiar
Structued and presented to aid comprehension
Supported by examples

https://www.wqusability.com/articles/more-than-ease-of-use.html
https://measuringu.com/evaluating-ux/
Karir Bidang Seputar UI/UX
1 2
UI/UX designer UI/UX researcher

focus on Qualitative and Qualitative research

design and flow to enchance UI/UX

3 4
UX writer Graphic design

writing so the user asset

understand how it works
Bagaimana
Meningkatkan
UI/UX?
 Terbaca dari device
01 User Research 05 manapun

02 Konsep Desain 06 Akses

03 Visual yang baik

04 Optimasi interaksi

https://medium.com/outcrowd/how-to-improve-ux-design-cd5957f98b71
Tools

www.adobe.com
Tools

www.figma.com
Tools yang dapat
membantu
mengembangkan
UI/UX

UI/UX menjadi mudah dengan bantuan

tools berikut
Community

Apps
UI/UX TRENDS
 Glassmorphism
Neumorphism
UI Trends 3D
Flat design
etc
 Personalization
UX Trends Personalization adalah suatu tindakan dalam
menghubungkan pengalaman atau komunikasi
berdasarkan informasi yang telah dipelajari dari
pengguna.
what does personalization see?

1 Traffic aquisition data

2 Anonymous visitor data

3 Profile data

4 Real time interaction

 marketeers.com
“share a coke” dengan 70 nama di Indonesia:
1.Research the popluer name in the country
2.Ukuran minuman yang digunakan

https://www.netflix.com/
Design
System
Guidlines untuk membuat desain dan produk
material.io/design
developer.apple.com/design
 Design Process
Guide dalam project manajemen untuk menjalankan projek besar
https://medium.com/swlh/how-to-use-design-thinking-in-the-ux-design-process-e33c4f11a6be
https://researchloop.net/2021/02/06/the-curse-of-the-ux-design-process/
https://dollysartwork.com/2016/08/05/ux-design-process/
https://uizard.io/blog/whats-the-difference-between-ui-and-ux/
Moodboard

https://www.justinmind.com/blog/mood-board-examples-design-website-app/
Kesalahan
Telalu fokus kepada kreativitas dibandingkan usability

Terpaku Trend

yang sering Desain tidak responsif

dilakukan
Desain sibuk, terlalu padat dan penuh informasi

Desain tidak dengan data sebenarnya

dalam UI/UX Font yang sulit dibaca

Warna contrast

CTA button tidak jelas

Form yang buruk

Microcopy tidak ada

Informasi tidak jelas

Icon tidak konsisten

Terima kasih!