Be a good UI & UX Designer | Frontend Week 6 DOT Academy
Menjelang libur lebaran, materi minggu ini adalah UI & UX. Sebagai frontend engineer kita harus memiliki pengetahuan tentang UI & UX agar tidak terjadi kesalahpahaman ketika kolaborasi secara tim nantinya.
Sebelum ke studi kasus, saya mau memberikan sedikit materi pengantar tentang UI & UX
Dari gambar diatas bisa diliat bahwa, hubungan antara engineer satu dengan lainnya sangat berkaitan dan diperlukan.
Study Case
Aplikasi mobile my baby, pencegahan stunting (kekurangan gizi) pada bayi mulai akhir kehamilan dan 1000 hari pertama bayi. Aplikasi ini merupakan kerjasama dari tim. Jadi untuk contoh kasus materi dibawah akan disesuaikan dengan aplikasi studi kasus.
UX
U is for User and X is for eXperience
UX Design itu proses membuat sebuah website atau aplikasi yang kamu buat menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh pengguna.
Jadi ketika pengguna menggunakan produk kita, pengguna merasa nyaman ketika menggunakan produk dan ada rasa ingin menggunakan produk kita kembali karena kepuasan.
Ada beberapa unsur yang perlu diperhatikan dalam UX Design yaitu :
- Digestibility (Mudah Dicerna)
Desain mudah dicerna, tidak membutuhkan effort lebih untuk mencari tahu apa yang dilihatnya. - Clarity (Kejelasan)
Kejelasan sebuah design diperlukan agar pengguna tidak bingung. - Trust (Percaya)
Membangun rasa percaya terhadap sebuah tindakan yang dilakukan di suatu produk. Untuk membantu mereka memahami mengapa tindakan di produk kita itu diperlukan. - Famility (Keakraban)
Konsistensi dalam design membuat pengguna merasa nyaman dan tidak merasa bingung. - Delight (Menyenangkan)
Memberikan kesan menyenangkan akan membuat pengguna kembali menggunakan produk kita.
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs.
Dulu kalau kitaa makan bakso dengan kecap biasanya botolnya tuh pake kaca. Kan susah tuh ngeluarinnya harus di pukul2 dulu bawahnya 😅.
Heinz menjawab masalah itu dengan membuat “UI” baru pada botol sausnya. Apakah heinz tiba2 mendapat ide dari tuhan dan langsung dibikin ? tentu tidak. Heinz mendapat masukan dari pengguna yang mengutarakan keresahannya ketika menggunakan botol kaca. Baru lah di execute menjadi sebuah “UI” yang baru dan membudahkan pengguna.
Sebagai UX Designer kita harus memadukan tiga komponen disamping.
Memenuhi kebutuhan user, memadukannya dengan teknologi ynag cocok dengan itu dan tak lupa dengan tujuan bisnis atau mencari keuntungan dari produk yang dibuat.
Tahapan proses design yang kami lakukan saat mendevelop My Baby seperti digambar
Membangun Landasan
Sebelumnya kita membuat elevator twitter pitch, apa itu ? Membuat kalimat yang merupakan inti dari tujuan dibuatnya app. Tidak lebih dari kata seperti tweet pada twitter.
Elevator twitter pitch My Baby : “Membantu Orang Tua Memantau Pertumbuhan Bayi”
Setelah itu kita membuat user map, pada bagian kiri kita mendefinisikan aktor yang akan menggunakan app kita, yaitu orang tua bayi. Dan pada bagian kanan mendefinisikan goals dari aplikasi, yaitu meminimalisir bayi stunting.
Diantara kedua tadi, kita mendefinisikan perjalanan atau apa saja langkah2 yang diperlukan untuk mencapai goalsnya.
- Buka App
- Memilih sebelum/sesudah melahirkan
- Masukkan data ibu hamil
- Masukkan data bayi
- Melihat grafik perkembangan
- Konsultasi dengan dokter
- Mendapat notif imunisasi
- Petunjuk tempat imunisasi
Trouble Finder
Setelah itu kita membuat daftar yang pertanyaan yang diawali oleh kata “Kenapa”, seputar produk kita. Seperti ini :
- Kenapa masih banyak bayi kurang gizi di Indonesia ?
- Kenapa imunisasi bayi terlewatkan?
- Kenapa orang tua tidak tahu tempat imunisasi?
- Kenapa stunting masih terjadi di Indonesia ?
- Kenapa stunting berbahaya bagi anak ?
Pertanyaan2 ini nanti akan ditanyakan langsung kepada aktor pada saat wawancara. Setelah menemukan jawaban kita mencatat jawaban dengan teknik HMW ( How might we…?) utk lebih jelas bisa diliat dibawah :
Jawaban :
- Karena masih banyak orang tua yang kurang pengetahuan tentang gizi buruk
- Karena lupa ataupun sibuk dengan kegiatannya
- Kurangnya informasi tempat imunisasi di daerah ibu
- Kurangnya informasi tentang bahaya, faktor, dan gejala stunting.
- Karena bisa menurunkan produktivitas anak.
HMW :
- Bagaimana cara kita untuk mendapatkan pengetahuan tentang gizi buruk ? (Melihat Grafik Perkembangan)
- Bagaimana cara kita mengingat jadwal imunisasi anak ?
- Bagaimana cara kita mengetahui tempat imunisasi terdekat ?(Melihat peta tempat imunisasi terdekat)
- Bagaimana cara kita mengetahui bahaya, faktor, dan gejala stunting kepada ortu ?
- Bagaimana cara kita mencegah stunting ?
Dengan teknik mencatat HMW diatas kita bisa menemukan 1001 solusi dari pertanyaan itu. Setelah itu kita cocokkan solusi tadi dengan user map yang sudah dibuat tadi, jika ada fitur tambahan usermap bisa diubah tanpa mengganggu fungsi yang lain.
Mencari Ide dan Membuat Prototype
Membangun Ide dengan teknik crazy 8. Apa tuh ? crazy 8 merupakan teknik untuk mengeluarkan ide dengan cara melipat kertas menjadi 8 bagian sebagai visualisasi user interface. Lalu seorang UX desainer mempunyai waktu hanya 8 Menit untuk membuat wireframe dari aplikasi.
“The power of kepepet”
ya itu lah pepatah yang cocok untuk memvisualisasikan crazy 8
Wireframe adalah kerangka atau coretan kasar untuk penataan item-item pada halaman website sebelum proses desain sesungguhnya
Wireframe yang dibikin tidak harus mendetail, hanya saja mewakili dari fungsi fungsi yang sudah didefinisikan di user map sebelumnya.
Dari wireframe yang dibikin oleh team, masing2 anggota team akan mempresentasikan wireframe masing2, tujuannya agar antar anggota paham maksud dari wireframe yang dibikin. Setelah itu dilakukan voting untuk memilih frame wireframe yang dirasa bagus, masing2 anggota mempunyai jatah 3 vote untuk memilih frame wireframe.
Setelah terpilih beberapa frame wireframe, frame tersebut dikumpulkan jadi satu lalu diurutkan sesuai dengan user map, apakah frame2 tersebut sudah mewakili alur yang sudah ditetapkan di user map ? jika blum maka diadakan crazy 8 lagi untuk fitur yang blum, jika sudah lanjut ke step selanjutnya ->
Prototyping
Mulai lah masuk ke ranah UI Designer, sebelumnya saya akan jelaskan sedikit tentang UI.
UI
U is for User and I is for Interface
UI adalah antar muka, antarmuka produk yang bertemu langsung dengan pengguna. Bahasa gampangnya ya tampilan yang diliat user ketika menggunakan produk kita.
Tanggung jawab seoran UI Designer tidak hanya antar muka, tetapi banyak seperti gambar disamping.
Kenapa sih UI itu penting, kan sudah UX yang merancang aplikasi biar enak digunakan, UI Designer cuma bikin desain gitu aja. Tidak semudah itu sob, ada beberapa faktor kenapa UI itu tetep harus diperhatikan :
- UI Design Fokus Kepada Bagaimana Elemen Visual Ditata dan Bagaimana Produk akan Terlihat.
- UI Design akan mempengaruhi Hubungan Emosional antara Pengguna, baik negative maupun positif.
- UI Design yang baik akan meningkatkan kepuasan User dalam menggunakan produk yang diciptakan
Interface Guideline
Setiap perangkat mempunyai aturan sendiri2. Apple mempunyai Human Interface Guidline dan Android mempunyai Material.io.
Guideline atau aturan tersebut dibuat bukan untuk hanya sebagai contoh saja. Tetapi kita sebagai UI Designer harus mengikuti aturan2 yang sudah ditetapkan oleh developer perangkat tersebut, agar bisa terjadi kekonsistensian terhadap desain yang dibuat.
Contoh kecil konsistensi dalam desain adalah seperti dibawah ini
Model pintu yang tidak konsisten, membuat orang bingung ketika bertemu dengan pintu di lain waktu.
Component Base UI
Design gajauh beda sama fisika, komponen terkecil itu atom, kumpulan atom disebut molekul, kumpulan molekul disebut organisme.
Atom dalam design biasanya berupa label, tulisan, button, icon, checkbox, dll.
Molecules contohnya itu, card, carousel, navbar, footer, recycle view, list view, dll.
Organism itu seperti satu frame / layar, di android ada fragment, di web ada pages.
Style Guideline
Sama halnya dengan backend engineer yang membuat dokumentasi dari codingnya agar mudah dipahami oleh engineer lainnya.
Seorang UI Designer juga harus membuat dokumentasi agar nanti nya mudah dalam pengaplikasiannya oleh frontend engineer.
PROTOTYPING MY BABY
Cukup sekian medium kali ini, jika ada yang perlu dikomen monggo dikomen dibawah. Terimakasih telah membaca.
