Pertemuan #1 — Pengenalan UI/UX Design

Disclaimer: Ini adalah materi penunjang untuk kelas UI/UX Design selain praktek di Laboratorium Fakultas Teknik Universitas Hamzanwadi

Apa itu UI/UX Design?

Sekilas banyak orang yang menganggap bahwa UI atau User Interface dengan UX (User Experiences itu sama), padahal sebenarnya perbedaannya itu sangat banyak. Bahkan profesi pada disiplin ilmu UI/UX saja sangat banyak, seperti :

• UI/UX designer
• UX Designer
• UI atau Interaction Designer
• Design System Designer
• UX Researcher
• UX Writer
• Product Designer
• UX Engineer
• Web Designer
• dan masih banyak lagi profesi yang dihasilkan dari disiplin ilmu UI/UX ini, jadi temen-temen jangan minder ya, nanti gmn prospek kerjanya. Dan menariknya bisa dapat kerja remote atau kerja dari mana aja, kalo kata temen aku WFC, apa tu bang WFC, “Work From Cofee”🤭

User Experiences (Behind the scenes)

UX itu singkatan dari User Experience, yang kalau kita terjemahkan ke dalam bahasa kita, artinya pengalaman pengguna. Gampangnya, UX itu fokusnya tentang bagaimana pengguna atau temen-temen merasa dan berinteraksi dengan suatu produk digital atau layanan.

Photo by Alvaro Reyes on Unsplash

Produk digital yang kita maksud disini itu seperti aplikasi mobile, aplikasi web, website, tampilan monitor pada suatu perangkat seperti modern spedometer motor, mobil, layar ATM dan lain-lain.

Jadi, bayangin kamu lagi pake suatu aplikasi atau website, UX itu yang bikin kamu ngerasa enak atau kesel waktu menggunakannya.

Misalnya, kalau UX-nya bagus, kamu bisa nemuin apa yang kamu butuhin dengan mudah, tata letaknya nyaman, tombol-tombolnya gampang dicari, dan nggak bikin bingung. Nah, kalau UX-nya buruk, bisa jadi susah cari informasi, tampilannya ribet, atau malah bikin bingung.

Jadi, intinya UX itu penting banget buat bikin pengalaman kita waktu pake aplikasi atau website jadi lebih asik dan gampang. Makanya, para developer dan desainer biasanya fokus banget buat bikin UX suatu produk jadi top markotop!

Perlu diketahui oleh temen-temen, bahwa UX atau Pengalaman pengguna itu didesign atau dibuat oleh seorang UX Designer melalui proses UX Design.

Photo by Jason Goodman on Unsplash

Beberapa contoh design proses yang umum banget sering dibicarakan oleh orang-orang adalah seperti proses Design Thinking, Double Diamond dan lain lain. tapi sebenernya proses design ini fleksibel temen-temen, gak harus linear atau berurutan, namun dapat melakukan aktifitas yang benar-benar sesuai dengan kebutuhan proyek atau produk. karena Proses Design yang baik itu adalah proses yang efisien dan efektif. Dan pada kelas kita kali ini saya ingin mengajak temen-temen untuk mempelajari proses design dengan Design Thinking, karena menurutku ini paling mudah bagi temen-temen untuk paham secara general tentang langkah-langkah mendesign suatu produk dengan baik, dan nantinya ini akan menjadi fondasi temen-temen untuk mempelajari lebih banyak lagi tentang UI/UX.

Skill Wajib Seorang UX Designer

Bang Anam, kalo misalkan kita mau jadi seorang UX designer yang jago dan handal itu, kita harus bisa apa saja bang????

Image by designcode

Sebenernya skill atau kemampuan untuk menjadi seorang UX Designer itu banyak sekali, gak ada habisnya, bahkan aku aja baru bener-bener menguasai beberapa aja, namun secara umum, skill wajib untuk menjadi seorang UI/UX designer itu seperti:

• Pengujian (Testing)
• Penelitian (Research)
• Analisis
• Prototipe
• Interaksi
• Visual design
• Suara atau gaya komunikasi(Voice and Tones)
• Aksesibilitas
• Animasi
• Gambar rangka (Wireframe)
• Pengembangan perjalanan pengguna (User Journey)
• Alur pengguna (Userflow)
• Arsitektur informasi (IA: Information Architecture)
• Peta situs (Site map)
• dan masih banyak lagi yang lain, tapi secara umum itu.

User Interface (Semua Tentang Visual)

Sekarang kita bahas soal UI alias User Interface. Ini adalah bagian dari sebuah produk digital yang kita lihat dan kita sentuh pas kita pake. Jadi, bayangin aja kayak tampilan depan dari suatu aplikasi atau website, itu dia UI-nya. Ini yang kita interaksiin langsung, mulai dari tombol-tombol, gambar, tulisan, sampe warna-warni yang kita lihat pas kita buka aplikasi atau website. Jadi, UI ini kayak kemasannya, yang bikin kita tertarik buat coba pakai produk itu. Makanya, penting banget buat UI ini kelihatan keren dan enak diliat, biar pengalaman kita pake produknya jadi tambah asik!

sumber Mobbin

Percaya gak percaya, sebagus apapun rancangan UX yang dibuat, jika UI nya gak maksimal, maka sebagus apapun rancangan UX nya itu tidak akan memberikan dampak, baik untuk pengguna atau bahkan untuk bisnis karena UI itu bagian kecil dari UX, artinya hubungan antara UI dan UX itu gak bisa dipisahin. UI itu ada didalam UX namun UX adalah bagian besar dari Desain Pengalaman.

Contoh website yang buruk

Sumber Plerdy.com

Biar temen-temen tau bedanya spesifik ui dan ux, aku kasi pengibaratan pada bangunan, temen-temen tau denah? ya pembuatan denah hingga penghitungan RAB atau biaya suatu bangunan dan semua pertimbangan seperti alur fentilasi, letak ruangan-ruangan, ukuran dan semuanya hingga sesuai dengan kebutuhan pemakai bangunan itu, itu salah satu contoh UX, sedangkan desain final gimana desain interior dan exterior ruangan atau bangunan itu, itulah UI. Jika pada ux kita merancang dari semua hal dari membuat denah dimana pintunya, dimana jendelanya, namun pada UI kita membahas, bagaimana bentuk pintunya agar tamu bisa masuk dengan mudah, atau gimana bentuk jendelanya agar selain lega dilihat, juga memberikan fungsi untuk menyalurkan udara.

Jadi overal UI adalah singkatan dari User Interface atau dalam bahasa indonesianya itu Antarmuka Pengguna. Orang yang mendesain UI itu disebut sebagai seorang UI designer atau Interaction Designer. Proses Design nya di sebut Design Proses.

image by Bart Jawien

Skill Wajib Seorang UI Designer

Untuk skill wajib seorang UI Designer itu sama banyaknya dengan UX, tapi banyak yang bilang UI lebih mudah karena terkait kreatifitas berbasis science.

Photo by Nubelson Fernandes on Unsplash

Namun sebenernya UI juga skil yang harus diasah oleh pengalaman, sense design, pattern (pola UI) dan lain. Jadi antara skill UI dan skill ux itu sama-sama punya skill tersendiri. Adapun skill yang wajib dimiliki oleh seorang ui designer yang paling umum dibutuhin di industri adalah seperti:

• Visual design
• Layouting
• Color
• Iconography
• Typography
• Visual Elemen
• Illustration
• Branding
• Pattern (Pola-pola UI)
• Trend Design
• Animation
• Prototyping
• Dan lain-lain

Seberapa Penting sih UX ini, kok masih banyak yang gak peduli?

Image by designcode

Teman-teman coba bayangin deh kehidupan kita sekarang ini. Semua serba digital, kan? Misalnya, kita pake WhatsApp buat ngobrol sama temen-temen atau keluarga, Grab buat pesen taksi, atau GoFood buat pesen makanan pas udah ngantuk di jam dua pagi. Nah, sekarang, ketergantungan kita sama produk-produk digital ini udah makin tinggi. Kita pake mereka bukan cuma buat urusan kecil, tapi buat segala hal mulai dari yang kecil sampe yang gede banget.

Jadi, bayangin aja, kita buka aplikasi buat cari makanan, tapi tiba-tiba susah banget dipake, lama banget prosesnya, atau malah nggak jelas gimana cara bayarnya. Pasti bikin kesel kan? Nah, itu salah satu contoh kenapa desain UX itu penting banget. Makin banyak produk digital yang ada, makin sengit juga persaingannya. Dan yang bikin produk bisa menang dalam persaingan itu, salah satunya adalah pengalaman pengguna yang enak dan bikin kita betah. Jadi, desain UX itu kayak jadi kunci buat produk digital supaya bisa bersaing dan bikin pengguna seneng. Makanya, sekarang ini, desain UX jadi makin penting banget!

Bisnis, Pengguna, dan Teknologi Wajib Seimbang!

Temen-temen udah tau istilah UX Strategy atauArea “Sweet Spot” gak???.

Jadi UX strategy itu adalah rencana yang dirancang untuk menciptakan pengalaman pengguna yang baik dan memuaskan, sambil memperhitungkan kebutuhan bisnis dan kemampuan teknologi. Di area “Sweet Spot”, UX strategy bekerja dengan efektif karena mampu menyeimbangkan ketiga elemen ini. Dengan UX strategy yang solid, kita dapat mengidentifikasi apa yang diinginkan pengguna, apa yang dapat diwujudkan oleh teknologi yang tersedia, dan bagaimana hal itu dapat menguntungkan bisnis. Dalam titik temu ini, produk atau layanan yang dihasilkan akan memiliki nilai yang tinggi bagi pengguna, dapat diimplementasikan secara teknis, dan menghasilkan keuntungan yang menguntungkan bagi bisnis.

Jika ketiga elemen tersebut tidak seimbang, maka dapat berdampak buruk, Dampak Buruk dari ketidakseimbangan ini seperti:

1. “Not Desirable, Usable, Useful”: Jika fokusnya terlalu banyak pada bisnis dan teknologi tanpa memperhatikan sisi kebutuhan pengguna, maka produk digital yang dihasilkan kemungkinan kurang diminati, tidak bisa digunakan dengan baik, atau tidak dianggap berguna oleh pengguna. Ini dapat menyebabkan kegagalan dalam mencapai tujuan bisnis dan merugikan reputasi merek karena tidak paham dengan pengguna yang ditargetkan.
2. “Not Profitable”: Ketika bisnis terlalu fokus pada teknologi dan sisi pengguna tanpa memikirkan sisi bisnis juga dapat menyebabkan dampak buruk, dimana produk yang dihasilkan mungkin tidak menghasilkan keuntungan yang diharapkan. Ini bisa terjadi karena biaya pengembangan yang tinggi, atau produk yang tidak memenuhi kebutuhan pasar dengan baik. Akibatnya, bisnis bisa mengalami kerugian finansial yang serius.
3. “Not Feasible”: Dan terakhir, jika bisnis terlalu fokus pada ide bisnis dan keinginan pengguna tapi bisnis tidak dapat memanfaatkan teknologi, Ide atau keinginan pengguna mungkin bagus, namun tidak dapat direalisasikan oleh bisnis karena keterbatasan teknologi atau sumber daya lainnya. Dampak buruknya adalah kekecewaan pengguna karena tidak ada produk atau layanan yang memenuhi kebutuhan mereka, dan juga kesempatan bisnis yang terlewatkan.

Jadi, kesimpulannya, UX strategy yang baik membantu seorang UX Designer mencapai area “Sweet Spot” di mana kebutuhan bisnis, teknologi, dan pengguna dapat dipenuhi secara optimal. Sedangkan ketidakseimbangan antara ketiga elemen ini dapat mengakibatkan produk atau layanan yang kurang sukses atau bahkan gagal.

Apa yang dianggap sebagai desain UX yang buruk?

Kita sebagai pengguna produk digital itu pengen yang namanya kemudahan dan kecepatan, kan? Kita nggak mau mikirin terus gimana cara pakenya. Kita udah punya bayangan sendiri tentang gimana seharusnya suatu produk itu tampil dan kerjanya kayak gimana. Jadi, setiap kali kita buka aplikasi atau pakai produk, kita udah punya harapan tentang gimana produk itu seharusnya bekerja. Misalnya, kalo kita buka aplikasi pesen makanan, kita udah berharap bisa langsung pilih menu tanpa ribet, cepet bayarnya, dan pesenannya dateng sesuai yang kita mau. Nah, kalo produknya nggak sesuai dengan model pikiran kita atau ribet banget, pasti bikin jengkel kan? Jadi, makanya penting banget buat produk digital buat ngikutin ekspektasi pengguna supaya kita bisa pake produk itu dengan senang hati! jadi intinya Desain Ux yang buruk itu adalah desain yang ribet, susah, bikin pusing, bikin kesel, jengkel, trauma makenya dan lain lain…, contoh kecilnya itu adalah LMS salah satu kampus yang seharusnya langsung belajar, eh malah harus belajar cara buat belajar pake LMS nya wkwkwkwk 😭😭😭.

Untuk pembahasan ini, nanti aku bikin di bagian Mental Model ya, biar temen-temen tau perilaku kebanyakan manusia pada geososial tertentu itu seperti apa.

5 Level UX

Secara Umum, Ada 5 Level Untuk Menilai Seberapa Bagus UX Suatu Produk Digital, ini juga akan membuat kaca mata temen-temen lebih terbuka dan pasti akan sadar tentang seberapa baik UX suatu produk digital, biar gak pusing nyari contoh, temen-temen bisa bayangin penjelasan ini dengan produk platform LMS yang kita gunakan, karena ini adalah pengalaman yang pastinya temen-temen rasakan.

Adapun 5 Level UX tersebut adalah:

1. Level Fungsional: Ini kayak dasarnya dari UI/UX dari suatu produk digital, ini adalah level paling rendah. Jadi, sistemnya udah bisa dipake sama pengguna untuk ngelakuin tugas-tugas yang penting atau melakukan suatu alur penting terhadap fungsionalitas dari produk itu. Contohnya, di platform online learning, level ini kayak sistemnya udah bisa dipake buat ngeliat materi, ngirim tugas, atau ngikutin ujian. Namun untuk menggunakan platform online learning ini, pengguna harus belajar terlebih dahulu cara menggunakannya seperti harus diajarkan dulu bagaimana cara guru membuat tugas, mengupload resource untuk siswa, hingga harus diajarkan dulu cara memberikan nilai terhadap tugas siswa, begitupun dari sisi pengguna siswa, siswa harus diajarkan dulu cara absen, cara mengakses tugas, mengirim tugas, hingga melihat nilai yang didapatkan. Ini artinya, jika pengguna baru menggunakan suatu produk harus diajarkan atau diberikan panduan terlebih dahulu untuk dapat menggunakan produk tersebut, walaupun sudah berfungsi namun masih susah digunakan.
2. Level Bisa Digunakan: Nah, level ini udah lebih baik dari sebelumnya dimana produknya sudah berfungsi seperti yang diharapkan dan juga mudah digunakan walaupun itu pengguna baru. Pengguna udah ngerti banget gimana cara pake sistemnya tanpa perlu diajarin terlebih dahulu, karena platformnya sesuai dengan mental model atau cara berfikir pengguna ketika berinteraksi dengan UI-nya. Misalnya, di platform online learning, level ini berarti pengguna udah bisa nyari materi, ngerjain tugas, atau berinteraksi sama sistem tanpa diajarkan terlebih dahulu atau tidak ada kebingungan walaupun untuk pengguna baru.
3. Level Kenyamanan: Di level ini, sistemnya udah gak cuma bisa dipake dengan mudah, tapi juga bikin pengguna nyaman banget pas pakenya. Jadi, gak bikin bosan dan tujuan pengguna itu benar-benar dioptimalkan. Misalnya, di platform online learning, level ini berarti tampilan dan fitur-fiturnya udah diatur sedemikian rupa biar pengguna gampang banget fokus sama belajar tanpa diganggu atau kedistrek sama hal-hal yang mempengaruhi tujuan utama dari pembuatan fitur itu, siswa bisa mendapatkan pemahaman tentang materi dengan cepat dan sangat baik. Jadi setiap alur fitur tertentu itu sudah dirancang dengan pengalaman yang sangat bagus agar benar-benar ngasi impact yang bagus banget untuk pengalaman dan tujuan produk itu.
4. Level Kesukaan: Nah, ini level yang bikin pengguna betah banget pake sistemnya dan bahkan jika produk udah berhasil dibuat ke level UX ini, maka ketika pengguna mendengar nama produk itu maka yang terlintas dikepalanya adalah hal hal yang sangat positif dan bahkan pengguna akan menceritakan keorang lain tentang produk tersebut. Itulah sebabnya banyak aplikasi yang baru bermunculan namun ux nya bagus cepet banget familiar dan mendapat hati jutaan pengguna, contohnya seperti Capcut, Tiktok, Treads, dan produk-produk yang lain, karena ketika ada pengguna yang puas, maka dia akan merekomendasikannya keorang lain. Ini penyebabnya bukan cuma karena fungsinya bagus, tapi juga ada elemen-elemen kecil yang bikin pengguna seneng pas pakenya. Misalnya pada platform e-learning, ada interaksi yang sangat engangement pas selesai ngerjain tugas di platform online learning yang bikin pengguna puas dengan aksi yang mereka lakukan sendiri. dicontoh kasus yang lain, kita ambil contoh aplikasi
5. Level Bermakna: Ini level puncak, guys! Di sini, sistemnya gak cuma bikin pengguna senang, tapi juga memberi dampak positif yang lebih besar. contoh kasusnya seperti pengguna yang sebelumnya sudah menggunakan berbagai macam platform online learning, namun ketika dia menemukan produk dengan level ux yang paling tinggi ini, dia tidak ingin lagi menggunakan produk sebelumnya, contoh lain, dulu banyak orang menggunakan massanger, namun ketika whatsapp sudah dicoba, secara perlahan, orang malas untuk menggunakan massenger dan beralih ke whatsapp dan bahkan kita sangat butuh terhadap produk itu tanpa. Jadi, bener-bener memberi arti yang mendalam buat pengguna.

TUGAS BUAT KALIAN

Agar Temen-temen lebih paham tentang mana design UX yang baik dan mana design UX yang buruk, mohon perhatikan dengan seksama pilihan design pada website ini https://cantunsee.space/. dan setiap kali kalian benar atau salah, mohon discreenshoot, lalu masukkan menjadi satu dokumen pfd dan kumpulkan di Goggle clashroom.