Desain yang baik :D
User Interface Design merupakan proses yang dilakukan untuk mendesain antarmuka aplikasi. Tujuan UI Design sendiri adalah menghadirkan tampilan yang menarik dan nyaman digunakan oleh pengguna.
Tools yang biasa digunakan untuk melakukan proses UI Design adalah Sketch, Adobe XD, inVIsion, dan Figma. Untuk kami mahasiswa, aplikasi yang paling familiar adalah Figma karena sangat user-friendly dan tersedia dalam versi website sehingga tidak makan storage laptop.
UI/UX adalah hal yang saya pelajari sekitar satu tahun belakangan ini. Di Fasilkom sendiri terdapat mata kuliah dimana mahasiswa mempelajari tentang UI/UX yaitu lewat mata kuliah Sistem Interaksi. Namun surprisingly, ternyata pertama kali saya belajar tentang UI/UX adalah dari mata kuliah Proyek Pengembangan Web (PPW). Namun kala itu hanya sebatas membuat wireframe dan mockup. Lalu apa yang dimaksud dengan kedua istilah tersebut?
Wireframe dan Mockup
Wireframing adalah kegiatan membuat rancangan aplikasi secara sederhana seperti membuat kerangka desain. Kegiatan ini dilakukan sebelum pembuatan perangkat lunak. Wireframe biasanya hanya terdiri dari teks (umumnya digunakan teks “Lorem ipsum”), gambar (berupa persegi panjang yang diberikan garis menyilang di tengah), dan layouting. Untuk segi warnanya sendiri, wireframe biasanya terdiri dari kombinasi warna putih, hitam, dan abu-abu.
Dengan dibuatnya wireframe, pengguna dapat dengan mudah memberikan saran dan masukan terhadap desain yang sudah dibuat. Proses desain akan jadi jauh lebih efektif karena tidak akan memakan waktu lama dalam proses revisinya.
Berikut adalah contoh dari wireframe,
Dapat dilihat pada wireframe diatas, memang tulisannya bukanlah “Lorem Ipsum” namun diganti dengan tulisan yang merepresentasikan fungsionalitas komponen seperti tombol. Selain itu warna yang digunakan merupakan kombinasi putih dan abu-abu.
Sekarang kita beralih ke Mockup.
Mockup adalah rancangan aplikasi yang lebih lebih nyata secara visual dengan paduan gambar, warna, dan tipografi yang sesuai. Kegiatan ini dilakukan setelah membuat wireframe.
Pada contoh Mockup di atas, dapat dilihat bahwa kombinasi tulisan, warna, dan gambar lebih beragam. Dengan adanya Mockup, tim pengembang bisa mendapatkan gambaran yang lebih nyata akan pembuatan aplikasi ini dalam segi frontend.
Pembuatan wireframe dan mockup termasuk dalam tahap pembuatan User Interface Design. Dalam melakukan desain, tentunya harus ada aspek usability yang diperhatikan. Salah satu Usability Guide yang populer adalah “Nielsen’s 10 Usability Heuristics for User Interface Design”.
Sebelum mengenal lebih jauh tentang 10 Usability Heuristics tersebut, ada baiknya jika kita juga mengetahui lima kriteria usability menurut Jakob Nielsen:
- Learnability
Desain harus bisa mudah “dipelajari”. Contohnya adalah warna teks “Gagal” sebaiknya diberikan warna merah agar pengguna bisa langsung mengetahui maksudnya.
2. Efficiency
Pengguna harus berusaha seminimal mungkin dalam menggunakan aplikasi. Contohnya adalah menggunakan fitur search untuk mempermudah pengguna mencari sesuatu ketimbang melakukan eksplorasi keseluruhan aplikasi terlebih dahulu.
3. Memorability
Pengguna harus diberikan kemudahan dalam mengingat cara penggunaan suatu aplikasi. Contohnya peletakkan icon yang merepresentasikan fungsionalitas fitur.
4. Error
Aplikasi harus dibuat dengan error seminimal mungkin. Apabila terdapat error, maka harus disertakan pesan error yang jelas agar pengguna bisa mengetahui penyebabnya. Contohnya adalah pesan error “Terjadi gangguan koneksi, untuk itu data gagal disimpan” akan lebih mudah dimengerti pengguna daripada pesan error “Gagal”.
5. Satisfaction
Aplikasi harus dibuat sesuai keinginan pengguna agar mereka mau menggunakannya lagi dan lagi dan lagi.
Nielsen’s 10 Usability Heuristics for User Interface Design
- Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time
Aplikasi harus selalu memberikan kabar pada pengguna terkait hal-hal yang sedang terjadi sekarang dan juga feedback yang sesuai. Ketika pengguna berhasil melakukan sesuatu, sistem harus memberikan kabar bahwa proses sukses. Sebaliknya jika pengguna gagal melakukan sesuatu, sistem harus memberikan kabar bahwa proses gagal dilakukan. Error message yang diberikan juga seharusnya tidak hanya berisikan kata “Gagal”. Sebaiknya harus ada penyebab atau cara memperbaiki error yang terjadi.
Dalam aplikasi Paytungan, ketika pengguna berhasil melakukan verifikasi akun setelah memasukkan kode OTP muncul halaman yang menunjukkan bahwa prosesnya sukses.
Sebaliknya, jika pengguna gagal melakukan kode verifikasi OTP maka akan muncul toast berwarna merah yang menandakan kegagalan tersebut. Seperti yang sudah dijelaskan, error message nya tidak hanya berupa kata “Gagal” namun ada penjelasannya. Dalam hal ini bunyi error messagenya adalah “Kode yang kamu masukkan salah.”. Kami yakin dengan pengguna bisa dapat dengan mudah menangkap maksudnya, sehingga pengguna akan melakukan input nomor OTP yang benar.
2. Match between System and The Real World
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
Aplikasi harus mudah dimengerti oleh pengguna, mulai dari segi bahasa, frase, dan konsep yang familiar.
Dalam aplikasi Paytungan, ketika pengguna berhasil membuat split bill maka akan muncul halaman “Split Bill telah berhasil dibuat”. Kami menggunakan bahasa yang komunikatif serta dapat dimengerti. Selain dari segi bahasa, gambar yang digunakan juga merepresentasikan maksud dari halaman tersebut. Dari segi konsep, kolaborasi antara gambar dan tulisan sama-sama menandakan bahwa proses yang dilakukan oleh pengguna berhasil. Selain itu pengguna juga diarahkan untuk menekan tombol “Buka grup split bill” untuk semakin memudahkan flow penggunaan aplikasi.
3. User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
Menawarkan kemudahan bagi pengguna untuk memperbaiki kesalahan yang terjadi baik secara sengaja maupun tidak disengaja. Akan sangat baik apabila pengguna tidak harus mengulang proses yang sama dan menghindari kesalahan yang dibuatnya tadi karena hal itu sangatlah tidak efisien dan tidak user-friendly.
Pada aplikasi Paytungan, ketika pengguna terlambat melakukan input nomor OTP, maka pengguna dapat melakukan klik link “Kirim ulang” agar nanti bisa dikirimkan ulang nomor OTP nya. Hal ini dilakukan agar pengguna tidak harus mengulang langkah login atau signin dari awal untuk memperoleh ulang nomor OTP nya. Ketika pengguna telah meng-klik link “Kirim ulang”, maka pengguna akan menerima kodenya dan tinggal melakukan input ulang di halaman yang sama. Tentunya komponen ini sangat mempermudah pengguna dalam menggunakan aplikasi!
4. Consistency dan standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Desain harus dibuat secara konsisten agar pengguan tidak bingung ketika menggunakan suatu fitur karena ada pengertian yang berbeda akan suatu komponen.
Dalam aplikasi Paytungan, button diberikan warna kuning agar terlihat lebih mencolok. Apabila pengguna melihat halaman Edit Profile, ada dua button yaitu “Simpan” dan “Batal”. Keduanya memiliki ukuran dan bentuk yang sama agar pengguna tidak kebingungan meliahtnya. Yang menjadi pembeda adalah dari segi warna. Aplikasi lebih menganjurkan pengguna untuk menyimpan profile yang sudah dibuat, maka itu tombol “Simpan” diwarnai kuning. Untuk tombol “Batal” diwarnai putih yangmana warna tersebut kurang mencolok. Secara psikologi, seseorang akan cenderung fokus pada warna yang lebih mencolok sehingga pengguna nantinya bisa lebih berfokus menyimpan data profil.
5. Error prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.
Aplikasi yang sudah berjalan tentunya tidak luput dari error atau bug. Namun sebaiknya hal tersebut dikemas dengan bentuk pesan error yang komunikatif atau desain tertentu. Hal ini lebih efisien tentunya daripada berfokus untuk melakukan error fixing yang jumlahnya ratusan, lebih baik untuk memberikan error message pada pengguna agar error yang terjadi bisa dicegah atau diperbaiki pengguna.
Pada aplikasi Paytungan, ketika pengguna tidak melakukan input nama restoran, maka sistem akan memberikan toast error berwarna merah “Nama Restaurant/Toko wajib diisi!” Hal ini akan membuat pengguna tau bahwa mereka belum melakukan input nama restoran sehingga kesalahan tersebut bisa diperbaiki.
6. Recognition Rather than Recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
Mengenali objek lebih baik daripada membuat pengguna mengingatnya. Akan sangat disarankan apabila digunakan warna, bentuk, gambar, dan icon yang familiar di mata pengguna.
Contohnya adalah pada pop-up di aplikasi Paytungan. Bentuk pop-up disajikan dengan rectangle shape kecil dengan overlay di belakangnya yang mana memang biasanya bentuk pop-up seperti itu. Selain itu ada dua button yaitu “Batal” dan “Yakin”. Bentuk button adalah persegi panjang, kami memilih bentuk itu karena memang lebih familiar ketimbang bentuk lain seperti bintang, segitiga, dan trapesium. Bisa dibayangkan apabila button berbentuk segitiga 🤣, pasti pengguna akan merasa bingung terlebih dahulu karena hal tersebut merupakan sesuatu yang baru. Selain itu dari segi warna, button “Yakin” diwarnai hijau sehingga pengguna bisa dengan cepat mengetahui bahwa tombol tersebut merupakan tombol tipe positive, dan tombol “Batal” merupakan tombol tipe negative karena dibuat lebih tidak mencolok yaitu dengan warna putih. Dari segi penempatan, tombol tipe positive biasanya ditempatkan di sebelah kanan sehingga pengguna bisa lebih dengan mudah mengenalinya.
7. Flexibility and Efficiency of Use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Aplikasi tentunya memiliki demografi pengguna yang beragam. Oleh sebab itu desain harus bisa dibuat dengan mempertimbangkan keberadaan pengguna yang sudah mahir dan belum mahir dalam menggunakan aplikasi semacam itu.
Pada halaman login, tombol untuk masuk ke aplikasi hanya ada satu. Hal ini tentunya memudahkan pengguna, karena biasnaya tombol untuk masuk ke aplikasi ada beberapa, misalkan lewat input nomor hp atau lewat email. Bisa saja ada pengguna yang merasa kebingungan dengan hal tersebut, maka itu kami hanya membuat satu tombol “Masuk” saja. Selain itu apabila pengguna belum memiliki akun, maka bisa melakukan klik link “Sign Up”. Kami juga melengkapi deskripsi link tersebut dengan penjelasan “Belum punya akun? Sign Up”. Dengan deskripsi tersebut pengguna bisa lebih mudah mengetahui langkah yang harus dilakukan apabila belum memiliki akun. Apabila hanya ada link bertulisan “Sign Up” saja, ada kemungkinan pengguna kebingungan karena mungkin belum familiar dengan istilah tersebut.
8. Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
Desain yang baik haruslah menggabungkan kontras warna, typografi, bentuk, dan posisi yang sesuai. Segalanya harus dibuat seminimalistik mungkin agar pengguna merasa nyaman melihatnya ketimbang desain yang ramai.
Kami menawarkan desain yang cukup minimalis, contohnya pada halaman ini. Apabila pengguna sukses membuat split bill, maka ada tulisan dan gambar yang menandakan kesuksesan proses tersebut. Sebenarnya bisa saja kami tidak menambahkan gambar agar desain bisa terkesan lebih minimalis lagi, namun tentunya akan jadi kurang menarik. Selain itu ada satu tombol untuk melihat grup split bill. Ketika pengguna ada di halaman ini, aksesnya dibatasi yaitu mau tidak mau pengguna harus menekan tombol tersebut karena itu memang bagian dari flow penggunaan aplikasi ini.
9. Help user Recognize, Diagnose and Recover from Errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
Ketika ada pesan error, sebaiknya pengguna juga diberikan informasi berupa solusi dari kesalahan tersebut.
Ketika pengguna tidak menerima kode OTP, pastinya pengguna akan menekan tombol “Kirim ulang” agar dikirimkan ulang kodenya. Namun bagaimana apabila setelah ditunggu beberapa lama, ternyata pengguna tidak kunjung menerima kode OTP di device yang digunakan. Kemudian pengguna menyadari bahwa ia salah melakukan input nomor telepon. “Pantas saja daritadi aku tidak menerima kode OTP nya di hp ku, ternyata nomornya salah -___-”, begitu ucap pengguna.
Tentunya tidak perlu khawatir, karena ada tombol “Perbaiki Nomor” agar pengguna dapat dengan mudah memperbaiki nomor dan segera bisa menerima kode OTP nya.
10. Help and Documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Fitur bantuan dan dokumentasi tentunya akan memberikan poin lebih karena mempermudah pengguna ketika menemui kebingungan.
Tidak hanya berbagai kemudahan yang ditawarkan, kami juga menyediakna fitur Bantuan. Dalam penggunaan aplikasi, tidak bisa dipungkiri bahwa jenis pengguna akan ada banyak. Tentunya akan muncul banyak pertanyaan. Disini kami memberikan jawaban akan pertanyaan yang paling sering ditanyakan oleh pengguna, sehingga ketika pengguna kebingungan bisa langsung pergi ke halaman “Bantuan”.
Namun bagaimana kalau pertanyaan yang ada di halaman tersebut tidak mencakup semua pertanyaan yang ingin ditanyakan seorang pengguna? Tidak perlu risau karena pengguna bisa menghubungi customer service yang akan dengan senang hati membantu pengguna.
Untuk kedepannya, akan sangat baik apabila fitur input bill bisa dipermudah dengan melakukan scan bill seperti fitur split bill yang sangat terkenal yaitu LINE Split Bill. Hal tersebut akan mempermudah pengguna, karena daripada mereka harus melakukan input nominal item yang jumlahnya banyak, pengguna bisa dengan mudah tinggal scan bill lalu prosesnya selesai. Semoga kedepannya fitur tersebut bisa terwujud^.^
UI Design merupakan aspek yang sangat penting karena hal tersebutlah yang pertama kali dilihat oleh pengguna ketika menggunakna suatu aplikasi. Desain yang baik dan memenuhi prinsip-prinsip yang sesuai akan meningkatkan kenyamanan pengguna ketika menggunakan aplikasi juga.
Referensi :