DAY 2

UX FUNDAMENTAL
Berikut untuk link Materi video nya https://youtu.be/oKpNFuMsL_U

UX (User Experience) 
User Experience design bisa dibilang kompleks dan luas untuk bagi para pemula, karena harus
mempelajari dari aspek aspek yang berbeda (dari aksesibilitas hingga wireframing). beberapa
dari aspek tersebut bertumpang tindih, namun sebagian pun ada yang saling melengkapi satu
sama lain. Oleh karena itu, penting untuk kita mengetahui dasar dan pengertian apa itu ‘User
Experience’ dalam konteks design.

Complexity and Perception

Desain User Experience, adalah tentang mendesain experience (pengalaman) yang ideal
mengunakan layanan atau produk. Dengan demikian, User Experience bisa melibatkan berbagai
macam produk dan layanan. 

Namun, dalam konteks ini kita belajar User Experience yang berhubungan dengan websites, web
applications dan software applications lainya.

“You can add all the features and functionality that you like to a site or application, but the
success of the project rides on a single factor: how the users feel about it.”

Pertanyaan kita sebagai UI/UX Designers biasanya meliputi beberapa hal dibawah ini :

1. Apakah situs/aplikasi ini memberikan nilai terhadap user?

2. Apakah user mengunakan situs/aplikasi merasa mudah untuk digunakan?
3. Apakah user senang mengunakan situs/aplikasi kita? 

Jadi sebenarnya User Experience itu apa sih?

Secara umum, user experience itu ialah bagaimana yang dirasakan oleh user terhadap
produk atau layanan yang diberikan, dalam banyak kasus, produk tersebut berupa situs
website atau aplikasi. Setiap contoh dari interaksi manusia-komputer pasti berhubungan dengan
user experience
Seorang UI/UX Designer tertarik mempelajari hubungan antara manusia dan komputer, seperti
website, aplikasi, dan sejenisnya

Kalau UX Designer itu apa?

UX Designer ialah seseorang yang meneliti dan menganalisa bagaimana perasaan pengguna
mengenai produk atau layanan yang ia gunakan. Seorang UX Designer kemudian menerapkan
pengetahuan tersebut terhadap produk yang dikembangkan untuk memastikan pengguna
memiliki pengalaman (experience) yang terbaik terhadap produk yang digunakan

Kenapa UX itu penting?

Seiring perkembangan waktu, desain sebuah produk itu sebenarnya simple; desainers
mengembangkan sesuatu yang menurut ia keren dan mengharapkan client menyukainya. itu saja.

namun dari sini sebenarnya ada dua problem dengan pendekatan tersebut

pertama, jaman sebelumnya, masih minim kesadaran manusia dalam hal hal online. kedua, tidak
ada perhatian sama sekali antara user dengan produk — yang mengakibatkan success meter dari
suatu produk itu bergantung dengan keberuntungan atau keputusan yang telah dibuat oleh tim
desain

Dimana biasanya kita berjumpa dengan UX Design?

UX Design bisa ditemukan diberbagai macam lingkungan project, contoh :
  Complex projects – semakin rumit suatu projek, maka semakin penting peran
UX Design. jika kebanyakan fitur yang ditangani dengan cara salah maka akan
mengakibatkan kehilangan ketertarikan user dalam mengunakan produknya.
 Startups – High-tech startups  yang mengembangkan projek yang bersifat
inovatif perlu memahami kebiasaan user dalam mengembangkan projek nya agar
dapat digunakan dengan layak.
 Project dengan budget yang cukup – tahap UX biasanya dilewatkan dengan
projek dengan budget yang sedikit. namun project yang memiliki budget yang
cukup atau lebih sering mengunakan UX
Long Projects – Semakin lama suatu projek, semakin banyak sumber daya yang digunakan, oleh
karena itu, UX memiliki peranan penting dalam pengembangan projek agar bisnis mendapatkan
profit balik
Metodologi apa yang dipakai UX?
Metodologi yang dipakai UX untuk berbagai macam project biasanya mengunakan user-centered
design, dengan kata lain, User-centered design mencakup tentang kebutuhan pengguna dan
behavior yang berada didalam pikiranya. 

perlu diketahui sebagai ux designer bahwa user-centered design bertujuan untuk mendapatkan
UX yang layak digunakan — tidak bermaksud bahwa metode ini merupakan metode satu-
satunya yang optimal digunakan dalam berbagai macam projek 

Double-Diamond Design Process

Langkah-langkah yang dilakukan untuk mencapai tingkat UX yang memuaskan bagi pengguna
disebut UX Process , UX proses ini menjelaskan alur kerja seorang designer untuk melakukan
pekerjaanya, meski sebenarnya alur kerja desainer tidak konkrit mengikuti satu pola, namun
biasanya mengikuti pola yang sama persis yaitu Double-Diamond 
Double Diamond ini memiliki 4 fase

 Discover – mempelajari lebih lanjut mengenai variabel-variabel yang

mempengaruhi suatu masalah
 Define – Memfilter semua informasi yang didapatkan kemudian menguraikanya 
 Develop – Pembuatan solusi dalam masalah yang didefinisikan dalam tahap satu
dan dua 
 Deliver – The final testing of product.
Double diamond ini selain menjelaskan proses pekerjaan desain, juga memberikan penjelasan
mengenai cara berpikir dalam setiap fase untuk merumuskan masalah dan mencari solusinya

Divergent Thinking & Convergent Thinking

Divergent dan convergent thinking adalah kemampuan berpikir designer saat melakukan proses
desain, Divergen berkaitan dengan melakukan eksplorasi dan mempelajari bearagam pilihan
yang bersifat luas, lalu designer juga harus dapat berpikir secara konvergen untuk membuat
pemahaman konkrit tentang user dari data yang dikumpulkan.
Divergent Thinking
Ketika kamu berpikir tentang ‘brainstorming’, maka kamu berpikir tentang pola pikir divergent.

Mindset divergen ini mengharuskan pemikiran designer untuk berpikir secara lebih luas dan
menemukan solusi yang inovatif, mengumpulkan berbagai macam kemungkinan, dan melihat
permasalahan dari point of view yang berbeda-beda

Convergent Thinking
Mindset Convergent mengharuskan kamu untuk berpikir logis dan mempersempit pilihan dan
kemudian membuat satu rumusan dan kesimpulan dari permasalahan.

————————————————————————————————–

Discover
Pada fase discover ini, segala kegiatan dilakukan untuk memahami masalah user, fokus
didalamnya dapat dipecah menjadi 3 bagian utama: market space, topik, dan user research
  Market space research : biasanya, riset pasar melibatkan kompetitor, tren pasar,
dll
 Topic Research : bertujuan untuk memahami dan mengapa sedang berada dalam
ruang lingkup masalah tersebut?
 User Research : komponen paling penting dalam desain digital, biasanya
melibatkan wawancara dengan user dan stakeholder bisnis atau klien untuk
mengumpulkan cerita dan informasi pengalaman mereka.
Beberapa metode untuk melakukan riset dan mengumpulkan data bisa dengan interview,
contextual inquiry, surveys, observations, card-sorting, heuristic review, competitor analysis dan
lain lain

Define
Pada fase ini, Kegiatanya ialah mencari pola dan wawasan/insight tentang pengguna dan mencari
berbagai masalah yang dapat dipecahkan untuk mereka, Penting bagi seorang designer untuk
melihat permasalahan tersebut dari berbagai macam sisi, dan menemukan masalah yang paling
krusial.

Metode yang digunakan biasanya seperti berikut :

1.Untuk menentukan user: persona, empathy map
2.Untuk menentukan user dalam konteks yang lebih luas : storyboard, journey map
3.Untuk memahami alur masalah : user flow, task flow, sitemap
Develop
Pada fase develop, desinger melakukan pengembangan solusi (bukan fase kita serahkan ke
developer). fase ini bersifat interaktif dan kolaboratif untuk mengeksplorasi semua solusi yang
‘mungkin’, baik dan buruk, sebelum mempersempit ide-ide untuk menentukan solusi dari
masalah, yang dilakukan ialah proses brainstorming dan sketching. Contoh metode yang
dilakukan ialah melakukan dengan crazy8

Utamanya proses ini bertujuan untuk menciptakan solusi yang relevan dengan melakukan
brainstorming secara bersama. kegiatan ini akan memberikan berbagai macam opsi yang nanti
dapat di voting oleh rekan anggota lainya
Deliver
Setelah menyelesaikan beragam brainstorming dan mendapatkan kesimpulan dari suatu
masalah,  masuklah ke fase convergent dimana kita menghasilkan wireframe, mockup, dan
prototype untuk bisa dilakukan testing kepada user.

salah satu yang bisa kamu buat ialah wireframe, wireframe adalah prototype low-fidelity yang
bisa menggambarkan bagaimana produk ini akan didesain, biasanya dibuat diatas kertas dengan
berisi boks layout tanpa teks dan gambar detail

Fase ini adalah fase iteratif, artinya tidak akan selesai dalam satu kali jalan, kamu akan
mendesain, desain ulang, revisi, dan desain kembali. dan yang menjadi paramater untuk desain
kembali tersebut ialah hasil dari usability testing yang dilakukan untuk mengetahui kegunaan
desain yang sudah kita buat

Iterate & Repeat

Terlepas dari pendekatan iteratif dan proses desain, tujuanya tetap sama: yaitu untuk
mendefinisakan kembali masalah dan mampu menemukan solusi yang lebih tepat dengan
mengulangi proses-proses yang sudah dilakukan

Meskipun tidak sederhana untuk menemukan solusi terbaik, penting untuk memiliki komunikasi
yang terbuka, kejelasan konteks tujuan desain, dan memberikan feedback keseluruh lini tim, 

ELEMENT OF UX
Berikut link Video Materi nya : https://youtu.be/PZuR0fXFcW4
Banyak yang berpikir bahwa menjadi seorang UX Designer hanya berkecimpungan dalam
membuat wireframe dan user flow. anggapan itu tidak salah, namun kurang tepat. Wireframe dan
user flow hanya sebagian kecil dari lingkup yang seharusnya seorang UX designer lakukan.
Pahami bahwa UX melingkupi hampir setiap aspek dari pengembangan sebuah produk baik dari
segi bisnis maupun produknya itu sendiri
Information Design
Desain Informasi ialah elemen yang mengandung konten 

Desain Informasi ialah langkah untuk memperhatikan bagaimana setiap potong informasi dapat
dikelompokkan dengan informasi lain yang terkait agar user dapat mencerna informasi yang
memiliki alur yang berkesinambungan. Tujuan utama dalam desain informasi adalah kejelasan
informasi

Kunci Informasi Design

1.Pengelompokan informasi secara logikal
2.Bagaimana user memahami informasi yang dikelompokkan
3.Aliran informasi/kesinambungan informasi
4.Bagaimana User mencerna informasi
5.Bagaimana User menggunakan informasi
Contoh Informasi Design

Interaction Design
Desain interaksi dapat dipahami dalam arti yang sederhana yaitu desain antar design dan produk

Tujuan dari interaksi design adalah untuk menciptakan desain produk yang memungkinkan user
untuk mencapai tujuan mereka sebaik mungkin
Dimensi dalam Interaksi Design
1. Kata
Kata-kata, terutama yang digunakan interaksi, seperti label tombol, harus bermakna dan mudah
untuk dipahami, dan tidak membanjiri user dengan banyak informasi yang mengakibatkan user
tidak tertarik untuk membaca
2.Representasi Visual
Hal ini menyangkut elemen grafis seperti gambar, tipografi, dan ikon yang berinteraksi dengan
pengguna. biasanya dilengkapi dengan kata-kata untuk mengkomunikasikan informasi kepada
pengguna.
3. Benda atau Ruang
Melalui benda fisik apa user berinteraksi dengan produk? Laptop, dengan mouse atau touchpad?,
atau smartphone dengan jari-jari pengguna? dan dalam keadaan seperti apa biasanya orang
mengunakan aplikasi? misalnya apakah aplikasi anda sering digunakan ketika berdiri di stasiun
kereta yang penuh sesak saat mengunakan aplikasi smartphone? atau sedang duduk diatas meja
dan menjelajahi situs web? ini semua mempengaruhi interaksi antara user dan produk
4. Behaviour
Dimensi ini termasuk mekanisme produk; bagaimana user melakukan tindakan di situs web?
bagaimana user mengoperasikan produk? reaksi dan respons mereka seperti apa? pengaruh
emosional dari pengguna berpengaruh dalam pemakaian produk
Contoh beberapa pertanyaan yang diperhatikan dalam melakukan interaction design
1.Apa yang dapat dilakukan dengan user dengan mouse, jari dalam berinteraksi langsung dengan
antarmuka?
2.Bagaimana dengan penampilan (warna, bentuk, ukuran, dll) memberi user petunjuk tentang
bagaimana fungsinya?
3.Apakah pesan kesalahan menyediakan cara bagi user untuk memperbaiki masalah atau
menjelaskan kesalahan terjadi?
4.Umpan balik apa dari user setelah melakukan tindakan tersebut?
Visual Design
Desain Visual bertujuan untuk meningkatkan daya tarik estetika dan kegunaan produk dengan
mengunakan gambar, tipografi, ruang, tata letak, dan warna yang sesuai.
“Problems with visual design can turn users off so quickly that they never discover the smart
choices you made with navigation or interaction design”.- Jesse James Garret, UX Designer &
co-founder of Adaptive path
Alasan-alasan visual design begitu penting untuk diperhatikan
 1.Menggabungkan information design dan interaction design bersama untuk
menampilkan tampilan produk.
 2.Memberikan petunjuk visual, dengan warna, produk akan terlihat lebih menarik
dan membuat user memperhatikan tombol dan fungsi yang ada.
 3.Mood & Experience, pada akhirnya, bisnis atau klien memiliki brand tertentu,
dengan look & feel yang spesifik, Melakukan visual design disini sangat krusial
dalam membawa brand dan branding/look & feel dalam produk.
 4.Usability, penting untuk diketahui desain tidak hanya membuat tampilan cantik
dan keren, namun juga harus dipikirkan dari kegunaan yang mudah dicapai oleh
user.
 5.Sign-off, proses dimana desain sudah siap untuk di deliver kepada klien untuk
dilihat secara keseluruhan. 
Teknik untuk melakukan Visual Design 
 1.Conceptualitation, membuat alternatif beberapa desain alternatif untuk
dipertimbangkan dalam tim.
 2.Moodboard, melakukan eksplorasi mood, vibe, look & feel dari sebuah desain
untuk memberimu inspirasi untuk membuat desain.
 3.Style Guide, adalah sebuah deliverable penting yang dibuat di akhir siklus
pengembangan desain sebelum desain dieksekusi oleh front-end developer,.
 4.Pattern Library, merupakan komponen-komponen elemen ui pada desain seperti
form, tab, dan lainya. tujuanya untuk membantu developer yang akan membuat
kode, ini salah satu effort desainer untuk mengkomunikasikan desainya
THE 5 LEVELS OF PROCESS
Menurut Jesse James Garrett dalam bukunya UX terbagi menjadi 5
Elemen. Strategy — Scope — Stucture — Skeleton — Surface.
1.Strategy

Berbicara strategi, kita berbicara dua hal. User needs dan business goals. User needs kita akan
melihat pihak yang akan menggunakan produk/sistem/app yang akan dibuat. Apa yang mereka
inginkan, apa yang mereka butuhkan, apa yang membuat mereka bahagia, dan lain sebagainya.

Sedangkan business goals adalah apa tujuan atau value dari produk ini bagi
organisasi/bisnis/client. Apa yang disebut dengan sukses bagi organisasi. Misalnya jika
produknya menghasilkan uang, jika produknya sukses meningkatkan awareness masyarakat,
produknya sukses meningkatkan efisiensi, dan lain-lain.
Untuk mengetahui kebutuhan user hal yang perlu dilakukan adalah Segmentasi, misal
segmentasi demografis seperti jenis kelamin, umur, tingkat pendidikan, status pernikahan,
pendapatan dan lain sebagainya. Hal ini dapat mempermudah dalam memahami kebutuhan user.
Pahami kebutuhan pengguna dengan melakukan Research/penelitian tujuannya mengumpulkan
informasi yang berhubungan dengan produk yang ingin dikembangkan. Metode yang dapat
dilakukan adalah survey, wawancara ataupun membuat focus group untuk memperoleh data
yang umum seperti sikap dan persepsi pengguna. Untuk memperoleh data yang lebih
spesifik ataupun yang berhubungan dengan kebiasaan user, kita dapat melakukan user test atau
field studies.
Langkah berikutnya adalah buat persona untuk menetukan target user yang lebih spesifik.
Persona merupakan karakter fiksi yang direpresntasikan dari segmentasi pengguna. Persona
dapat membantu dalam mengingat target pengguna selama proses perancangan produk.
Metode Research
2.Scope
Strategi akan menjadi scope ketika kita telah mendefinisikan dan menemukan antara user needs
dengan business goals yang diterjemahkan dalam bentuk requirement. Di fase Scope ini
dilakukan setelah menggali apa yang diinginkan oleh organisasi dan dibutuhkan oleh user, dan
menentukan fitur-fitur apa saja yang dapat kita berikan.

Pada gambar tersebut yang perlu dipahami adalah apa yang akan kita buat dan apa yang tidak
akan dibuat. Dengan begini kita dapat mengetahui sejauh mana lingkup dari produk yang akan
dibuat.
Sifat produk pada dasarnya terbagi menjadi dua, antara produk sebagai fungsionalitas dengan
produk sebagai informasi. Produk sebagai fungsionalitas fokus dalam mempertimbangkan set
fitur yang akan dibuat, sedangkan produk sebagai informasi kita fokus dalam menentukan konten
apa saja yang akan dimuat.

Functional Specifications
Dalam setiap pengembangan produk tentunya perlu ada dokumen yang berisikan spesifikasi
fungsi, fitur apa yang akan ada pada produk kita. Hal yang perlu diperhatikan pada pembuatan
dokumen ini adalah:
Be positive. Menggunakan kalimat yang positif, misalnya:

Be Specific. Menjelaskan setiap spesifikasi fungsi secara jelas dan spesifik, misalnya:

Content Requirement
Informasi apa yang akan ditampilkan perlu dideskripsikan dan dipersiapkan secara matang pada
bagian ini. Informasi seperti teks/kalimat, gambar, video, dll. Konten yang tampilkan dapat
disesuaikan dengan produk yang akan kita buat
3.Structure
Element struktur adalah bagaimana user berinteraksi dengan kumpulan fitur yang telah kita
definisikan pada elemen scope. Pada elemen ini, kita akan coba menerjemahkan kumpulan fitur
yang sudah kita buat di functional requirement menjadi interaction design. Lalu kumpulan
bentuk konten dalam content requirement diterjemahkan menjadi information architecture.
Interaction Design
merupakan interaksi dua arah antara pengguna dengan produk. Bagaimana respon
produk/layanan ketika user melakukan suatu tindakan tertentu. Contoh sederhana ketika user klik
icon love maka icon tersebut berubah menjadi merah, contoh lain ketika user klik gambar produk
maka sistem akan merespon dengan mengarahkan user pada halaman detail produk.

Information Architecture
berkaitan dengan bagaimana user memproses informasi yang terdapat dalam produk/layanan
kita. Pengelompokan informasi berdasarkan kategori membantu kita dalam leveling of
information.
4.Skeleton
Di tahap skeleton inilah bentuk dari produk yang akan kita kembangkan mulai terlihat. Skeleton
merupakan representasi dari produk kita. Skeleton akan memperlihatkan tombol apa akan berada
dimana, di layar mana konten akan ditampilkan, seberapa besar ukuran konten yang ditampilkan,
dan lain sebagainya.

Interface Design
Desain Interface sebaiknya disesuaikan dengan target dan kebiasaan user dalam menggunakan
aplikasi (mental model pengguna). Misal cara baca orang asia dan timur tengah, contoh lain
penggunaan warna merah, kuning, hijau, dll. Consistency menjadi poin yang perlu diperhatikan
ketika kita merancang suatu interface agar user familiar (intuitif/mudah dipahami) dengan desain
yang diciptakan. 

Salah satu poin keberhasilan suatu desain interface adalah seberapa intuitif interface yang kita
buat.
Navigation Design
Navigation Design adalah tentang bagaimana pengguna dapat berpindah dari satu halaman ke
halaman lainnya dengan mudah.

Information Design
Information Design adalah bagaimana mengelola informasi yang kita miliki untuk ditampilkan
secara baik agar user dapat memahami informasi dengan lebih mudah. Informasi dapat diubah
menjadi bentuk visual seperti pie chart, grafik, dll. Pengelompokan informasi (misal: kategori
produk yang ada di Tokopedia) dapat mempermudah user menemukan informasi yang sedang
dicari

Setelah interaction design, information architercture dan navigation design sudah jelas, langkah
selanjutnya adalah membuat wireframe sesuai dengan ketiga aspek Skeleton tersebut.
Contoh Wireframe
5.Surface

Layer ini berkaitan dengan perancangan sensory design. Sensory design meliputi panca indra
manusia. Bagaimana user melihat, mendengar, menyentuh, mencium, merasakan. Biasanya pada
layer ini UX Designer berkoordinasi dengan UI Designer dan menjadi tanggung jawab bersama
untuk memastikan hasil visualisasi desain sesuai dengan yang dinginkan. 
Untuk sebagian perusahaan seperti Tokopedia misalnya sudah memiliki ahli dibidang UI
Designer sehingga sudah ada orang yang bertanggung jawab dalam hal user interface. Lain
halnya jika kita berperan sebagai UX/UI Designer, itu berarti kita harus berperan penting pada
layer ini.