User Interface & User

Experience Design
CHAPTER 1 INTRODUCTION OF UI/UX DESIGNER
RIDWAN SETIAWAN, M.KOM
Detail Mata
Kuliah
• Kode MK: IFPPL7387
• Mata Kuliah: UI dan UX Design
• SKS/ Semester: 3/ 7
• Deskripsi: Mata kuliah ini memfasilitasi
mahasiswa untuk menguasai konsep, teori dan
teknik dalam perancangan pengalaman
pengguna atau User Experience (UX) dan
mampu mengimplementasikan perancangan
UX dari pengembangan suatu aplikasi produk
digital khususnya aplikasi berbasis web dan
mobile
• Matakuliah ini dirancang dengan focus ke
project akhir dan dikerjakan secara kelompok
(Caption design)
• CPMK: Tabel dan lihat Silabus dan RPS
Kode Deskripsi
M1 Mahasiswa menguasai konsep teoritis UI/UX design
secara umum dan konsep teoritis bagian khusus
dalam bidang pengetahuan tersebut secara
mendalam, serta mampu memformulasikan
penyelesaian masalah prosedural;
M2 Mahasiswa mampu mengambil keputusan secara
tepat dalam UI/ UX design dengan konteks
pemanfaatan potensi serta penyelesaian masalah
pada bidang sesuai keahlian dan bisnis dilandasi
dengan semangat kewirausahaan;
M3 Mahasiswa mampu menerapkan pemikiran logis, kritis,
sistematis, dan inovatif dalam konteks
pengembangan atau implementasi UI/UX design
yang memperhatikan dan menerapkan nilai
humaniora;
M4 Mahasiswa mampu merancang dan
mengembangkan algoritma untuk berbagai
keperluan seperti Information Management,
Algorithms and Complexity, Human Computer
Interaction, Graphics and Visual Computing sesuai
dengan konsep UI/UX design.
 Materi Pokok
• Pendekatan dan Metodologi dalam
Perancangan UX
• User-centered approach: Human-
centered Design, Design Thinking, Design
Sprint
• Agile approach: Scrum, Agile UX, Lean
UX
• Teknik Analisis dalam Perancangan UX: Riset
User, Persona, Empathy mapping, User
Journey mapping
• Teknik Pembuatan Desain Solusi UX:
Storyboard, Sketching, Wireframing, Mockup,
Emotional Design
• Teknik Evaluasi Perancangan UX: Kualitatif,
Kuantitatif, Heuristic
 Referensi
1. L. Glomann, “Introducing ‘Human-Centered Agile Workflow’ (HCAW) – An Agile
Conception and Development Process Model,” 2018, pp. 646–655.
2. “ISO - ISO 9241-210:2010 - Ergonomics of human-system interaction — Part 210:
Human-centred design for interactive systems.” [Online]. Available:
https://www.iso.org/standard/52075.html.
3. J. Gothelf, Lean Vs. Agile Vs. Design Thinking: What You Really Need to Know to
Build High-Performing Digital Product Teams. Sense & Respond Press, 2017.
4. J. Knapp, J. Zeratsky, and B. Kowitz, Sprint: How to Solve Big Problems and Test
New Ideas in Just Five Days. Simon & Schuster, 2016
5. Harley, “Personas Make Users Memorable for Product Team Members,” 2015.
[Online]. Available: https://www.nngroup.com/articles/persona/.
6. S. Gibbons, “Empathy Mapping: The First Step in Design Thinking,” 14-Jan-2018.
[Online]. Available: https://www.nngroup.com/articles/empathy-mapping/.
7. S. Gibbons, “Journey Mapping 101,” 2018. [Online]. Available:
https://www.nngroup.com/articles/journeymapping-101/.
8. Harley, “Ideation for Everyday Design Challenges,” 15-Jan-2017. [Online]. Available:
https://www.nngroup.com/articles/ux-ideation/.
9. C. Rohrer, “When to Use Which User-Experience Research Methods,” Nielsen
Norman Group, 2014. [Online]. Available: https://www.nngroup.com/articles/which-
ux-research-methods/
10. Dan referensi pendukung lainnya
Penilaian dan Aturan Perkuliahan

• NA = Absen + Tugas + UTS + UAS

• NA = (A) 10% + (T) 25% + (UTS) 30% + (UAS) 35%
• Minimum jumlah kehadiran 75% dari total jumlah
pertemuan (jika pertemuan 14 maka maksimum bolos 3)
• Kehadiran kurang dari standar minimum Auto E
• 10 Menit sebelum pembelajaran membaca Al-Qur’an
masing-masing/ Bersama
• Keterlambatan 20 menit setelah jam perkuliahan di mulai
What is User
Experience Design?
Design is not just what it looks like
and feels like. Design is HOW IT WORKS.”
— Steve Jobs
Definisi User Experience (Jesse James Garrett)

• User Experience sebagai pengalaman yang diciptakan produk untuk orang-

orang yang menggunakannya dalam dunia nyata.
• User Experience bukan tentang cara kerja suatu produk atau jasa, User
Experience adalah tentang cara kerjanya di luar, di mana seseorang
bersentuhan dengannya.
• Setiap hal (produk atau jasa) memiliki User Experience. Namun, tugas kita
bukanlah menciptakan user experience, tetapi membuat sebuah User
Experience yang baik. User Experience tidak bertujuan untuk
membuat user menjadi happy, tetapi menjadikan kerjanya efektif.
The 5 Levels of the
Process of User
Experience Design
• Kebanyakan orang memandang
bahwa User Experience hanyalah
apa yang dapat dilihat, misalnya
pada sebuah website, yang dapat
dilihat adalah tampilan visual dan
fungsi yang berjalan.
• UX tidak hanya berbicara
tentang pengalaman yang
dirasakan user, tetapi
MELAKUKAN proses User
Experience Design.
Definisi User Experience (usability.gov)

• User experience (UX) berfokus pada pemahaman secara

mendalam terhadap user, apa yang mereka butuhkan, apa
yang bernilai bagi mereka, kemampuan dan keterbatasan
mereka.
• UX juga memperhitungkan tujuan dan sasaran bisnis dari
kelompok yang mengelola proyek.
• Best practice dari UX dapat mempromosikan peningkatan
kualitas interaksi dan persepsi user dengan produk Anda dan
persepsi terhadap produk dan layanan terkait lainnya.
Definisi User Experience (Rex Hartson & Pardha Pyla
on The UX Book)

• “User Experience adalah keseluruhan efek/dampak/akibat yang

dirasakan oleh user sebagai hasil dari interaksi dengan dan konteks
penggunaan sebuah sistem, perangkat atau produk, termasuk
pengaruh usability, usefulness dan dampak emosional sepanjang
interaksi dan rasa yang diingat memori setelah interaksi.
• “Interaksi dengan” bersifat luas dan mencakup melihat,
menyentuh, dan berpikir tentang sistem atau produk,
termasuk mengaguminya dan penyajiannya sebelum
interaksi fisik apa pun.”
 www.designlab.com, “UX Design
bukan tentang membuat sesuatu
Donald Norman, pioneer dalam
yang cantik, tetapi tentang
bidang User Experience mendefinisikan
menciptakan produk luar biasa yang
UX: “User Experience” mencakup
diinginkan dan dibutuhkan orang.
semua aspek interaksi end-user
Cara terbaik untuk melakukannya
dengan perusahaan, layanan, dan
adalah dengan memahami pengguna
produknya.
secara mendalam dan mengingatnya
disetiap langkah proses desain.“

More Definition
 USER EXPERIENCE
DESIGN?
UX adalah:
“Pengalaman yang
dirasakan oleh user saat
berinteraksi dengan
sebuah produk dan rasa
yang tinggal dalam
memori setelah
menggunakannya”
 • User Experience Design (UXD)
User adalah pembuatan dan
Experience sinkronisasi elemen-elemen yang
mempengaruhi pengalaman
Design seorang user dengan perusahaan
(Russ Unger tertentu, dengan harapan untuk
on A Project mempengaruhi persepsi dan
Guide to UX perilaku user tersebut
Design) • Elemen yang dimaksud bukanlah
semata apa yg ada dirancangan
 Kesimpulan definisi
• User Experience berada pada user,
terkait yang dirasakan dan
diingatnya
• User Experience Design berkaitan
dengan kerja, proses dalam
membuat User Experience yang
baik.
• UX tidak hanya soal tampilan visual
yang memang pertama sekali
dilihat oleh user. UX memiliki
perjalanan proses yang panjang.
USER EXPERIENCE VS USER INTERFACE
 • UX adalah tentang mendesain pengalaman
produk yang lengkap.
• UX membutuhkan pengalaman tentang
psikologi, sosiologi dan desain untuk dapat
mengidentifikasi masalah user yang tepat.
• Situasi di lapangan juga membutuhkan
User keterampilan taktis seperti user
Experience research, concept
(UX) iteration, prototyping dan usability testing.
• Subdisiplin UX mencakup interaction design,
visual design, UI design, information
architecture dan content strategy.
User Interface (UI)

• UI designer membuat interface yang dapat dilihat dan dirasakan oleh user.
• Bidang ini bersinggungan dengan UX Design karena Anda harus memahami
konteks pengalaman yang lebih besar untuk setiap detail interface.
• Pada perusahaan yang kecil, UI ddesigner dapat menjalankan seluruh
proses mulai dari menentukan user flow hingga menyempurnakan high-
fidelity mockup.
• Pada perusahaan yang lebih besar, UI designer kemungkinan akan lebih
mengkhususkan diri dalam menyusun strateig layout sebuah situs atau
aplikasi (sketching, wireframing, dll).
UX adalah “apa yang
seharusnya”,
sedangkan “UI”
adalah “seperti apa
seharusnya?”.
UX berurusan
dengan “rasa” dari
cara kerja produk,
sedangkan UI
terkait
dengan “tampilan
”-nya
UX Design bertanggung jawab untuk research, arsitektur dari konten, site
map dan elemen-elemennya.

UI Design bertanggung jawab untuk bagian visual, kreatif dan menginspirasi.

• Usability adalah sebuah bagian dari
keseluruhan User Experience.
Usability menjawab pertanyaan,
“Dapatkan user mencapai tujuan
mereka?” dengan efektivitas,
efisiensi dan kepuasan dari hasil yang
didapatkan (sesuai dengan definisi
Usability ISO 9241-11)
• User Experience juga menjawab
pertanyaan, “Apakah user memiliki
pengalaman yang menyenangkan
dalam melakukannya?”. UX
membutuhkan lebih banyak upaya
untuk melakukannya dengan baik,
tetapi hasilnya memiliki dampak yang
jauh lebih baik.
UX Honeycomb (Peter Morville)
1. Usable: Produk atau jasa yang diberikan
kepada user harus sederhana dan mudah
digunakan.
2. Useful: Produk atau jasa perlu berdayaguna
dan memenuhi kebutuhan
3. Desirable: Estetika visual sebuah produk, jasa
atau sistem harus menarik dan mudah
diterjemahkan.
4. Findable: Informasi harus dapat ditemukan
dan mudah dinavigasi..
5. Accessible: Produk atau jasa harus dirancang
sehingga pengguna dengan kebutuhan khusus
sekalipun dapat memiliki pengalaman yang
sama seperti user lain.
6. Credible: Perusahaan dan produk atau jasanya
harus dapat dipercaya.
UX Honeycomb is Tools

• Setiap aplikasi akan berbeda berdasarkan keseimbangan antara

konteks, konten dan user.
• Sebagai contoh, dalam mendesain ulang sebuah web, perlu energi
besar dan biaya yang mahal.
• Dengan melihat UX Honeycomb, para stakeholder dapat
mengidentifikasi area yang paling penting dan memulai proyek
dengan prioritas tingkat tinggi.
• UX Honeycomb juga membantu mengidentifikasi semua area yang
penting bagi UX yang baik dan dapat dipecah secara mendalam.
UX is Process

• Doing UX” mirip dengan sains, yaitu:

• Melakukan penelitian untuk memahami user;
• Mengembangkan ide untuk menyelesaikan kebutuhan
user dan kebutuhan bisnis;
• Membangun dan mengukur solusi-solusi di dunia nyata
untuk melihat apakah solusi tersebut berhasil.
• UX Design adalah proses melakukan UX.
 Mengumpulkan informasi
yang dibutuhkan

Meneliti user

UX Process Mendesain solusi

Memastikan solusi
diterapkan dengan benar,
dan

Mengukur hasilnya.
The UX Book: BASIC ACTIVITY

Design

Implemen
Analyze
tation

Evaluate
The UX Book:
UX Process Lifecycle
Discipline of
UX
 USER EXPERIENCE Example

Voting paper from 10 April

1938. The text reads “Do
you agree with the
reunification of Austria with
the German Empire that
was enacted on 13 March
1938, and do you vote for
the party of our leader
Adolf Hitler?” The large
circle is labeled “Yes” and
the small circle is labeled
“No”. From Wikipedia.
 Conclusion
1.User Experience berkaitan dengan
pengalaman yang dirasakan oleh user saat
berinteraksi dengan produk dan rasa yang
tertinggal dalam ingatan setelahnya.
2.User Experience Design adalah proses
membangun User Experience.
3.User Experience Design bukan
menciptakan experience karena
experience ada dalam setiap produk. UXD
membuat experience yang baik.
4.UI berbeda dengan UX. UI adalah bagian
dari UX dalam membangun pengalaman
yang baik bagi user.
 Conclusion Cont…
5. Usability adalah bagian dari keseluruhan User
Experience.
6. Bidang pada UX digambarkan dalam User Experience
Honeycomb, tool yang dapat menggambarkan semua
sisi UXD. UX Honeycomb dapat digunakan untuk
menentukan prioritas pada sebuah proyek UX dan
juga membantu mengidentifikasi semua area yang
penting bagi UX yang baik.
7. UX adalah proses dengan serangkaian activity dan
technique. Dalam setiap activity, bisa terdapat
beberapa sub-activity. Method digunakan untuk
melakukan activity dan sub-activity. Technique adalah
cara yang diterapkan dalam sebuah method.
8. Activity pada UX adalah Analyze, Design, Implement
dan Evaluate.