Tugas Kuliah
Pengertian User Interface (UI)
Seperti yang disebutkan sebelumnya, UI adalah bagian dari UX yang berupa tampilan visual design sebuah sistem. Tampilan tersebut memungkinkan pengguna terhubung dan berinteraksi dengan suatu produk.
Selain berfungsi sebagai penghubung, UI juga berfungsi untuk memperindah tampilan sehingga dapat meningkatkan kepuasan pengguna. Namun, tak hanya harus indah, UI juga harus mudah digunakan.
Beberapa komponen UI diantaranya adalah komponen tombol, ikon tipografi, tema, layout, animasi yang tampil pada produk, dan visual interaktif lainnya. Semua komponen UI tersebut didesain dengan berfokus pada keindahan dan kemudahan pengguna. Jadi, pengguna dapat menikmati produk Anda.
Perbedaan User Interface (UI) dan User Experience (UX)
Setelah mengetahui pengertian dari UI dan UX, apakah sekarang Anda sudah mengetahui perbedaan di antara keduanya? Jika belum, tenang saja. Berikut ini kami akan paparkan apa saja sebenarnya perbedaan UI dan UX.
1. Tujuan Desain
Hal yang mendasar tentang perbedaan UI dan UX adalah tujuan desainnya. Fokus pembuatan desain UI dan UX sangatlah berbeda. Desain UI pada sebuah produk bertujuan untuk mempercantik tampilan produk. Sementara desain UX dirancang untuk memberikan pengalaman yang menyenangkan saat menggunakan produk.
Fokus desain UI adalah keindahan tampilan, sementara fokus desain UX adalah kepuasan menggunakan produk.
Sederhananya, desain UI akan mempengaruhi kesan pertama pengguna melihat produk Anda. Sementara itu, UX mempengaruhi bagaimana pengalaman pengguna saat menggunakan produk.
2. Proses Desain
Tujuan desain yang berbeda juga mempengaruhi prosesnya. Oleh sebab itu, proses merancang UI dan UX pun berbeda.
Karena berfokus pada user experience, proses desain UX berlandaskan riset pengguna sehingga menghasilkan produk yang disukai dan dibutuhkan oleh target pengguna. Prosesnya pun melalui banyak tahap dan membutuhkan peran banyak pihak, salah satunya yaitu UX researcher. Setelah melakukan riset, desainer merancang sketsa desain dengan prototype.
Sementara itu, desain UI juga memerlukan riset. Namun, riset yang dilakukan merupakan riset desain untuk membuat desain yang menarik dan sesuai dengan konsep. Di sini, desainer UI juga perlu merancang model desain yaitu dengan membuat mockup terlebih dahulu.
3. Komponen Desain
Komponen yang membangun Desain UI berfokus pada keindahan tampilan produksi. komponen UI tersebut di antaranya meliputi warna, gambar dan video animasi, typography, buttons, dan visual interaksi lainnya.
Sementara itu, komponen desain UX meliputi hampir seluruh komponen pada suatu produk seperti fitur-fitur, struktur desain, dan navigasi. Termasuk juga tampilan interface, copywriting, hingga branding, sehingga diperlukan kolaborasi tim untuk menghasilkan desain produk yang baik.
4. Tools yang Digunakan
Proses pembuatan yang berbeda tentu membutuhkan tools yang berbeda. Untuk desainer UI, keindahan gambar sangatlah penting. Jadi mereka membutuhkan aplikasi yang mendukung pembuatan desain interface yang detail.
Ada banyak aplikasi desain UI yang tersedia seperti Flinto, Principle, Frames X, Adobe illustrator, dll. Aplikasi tersebut dilengkapi beberapa tools pendukung desainer UI seperti tools menambahkan unique interaction icon, easy transitions, UI assets and kits, dll.
Sementara itu, desainer UX lebih membutuhkan aplikasi prototyping desain agar mudah mendapatkan feedback dari pengguna. Beberapa aplikasi prototyping desain yang mendukung desainer UX adalah: Sketch, InVision, Figma, Adobe XD, Axure, dll.
Beberapa fitur yang tersedia seperti tersedia fitur collaboration, real-time editing, easy to test design, dll. Fitur tersebut akan memudahkan desainer UX mendapatkan feedback untuk menghasilkan produk yang user-friendly
5. Skill yang Dibutuhkan
Menjadi desainer UI dan desainer UX membutuhkan skill tersendiri. Beberapa skill yang dibutuhkan seorang desainer UI adalah desain grafis, design branding, creative thinking, dan convergent thinking. Skill tersebut harus dimiliki oleh desainer UI dalam mendesain tampilan produk agar terlihat menarik dan mudah untuk interaksi.
Sementara seorang desainer UX bertanggung jawab membuat desain produk dengan pendekatan pengguna agar mudah digunakan. Oleh sebab itu, mereka harus memiliki skill melakukan riset, analytical thinking, problem solving, critical thinking, dan creative thinking.
Setelah membaca uraian perbedaan UI dan UX di atas, kami juga telah merangkumnya dalam bentuk tabel supaya lebih mudah memahami perbedaan UI dan UX.
| Perbedaan | User Interface (UI) | User Experience (UX) |
| Tujuan | Membuat tampilan produk lebih menarik | Memberikan kenyamanan saat memakai produk |
| Fokus | Berfokus pada tampilan yang bagus | Berfokus pada kenyamanan pengguna |
| Elemen | Animasi, typography, warna, video, buttons, dll | Usability, navigasi, struktur desain, fitur-fitur, interaction design, dll |
| Based on | Desain berdasarkan riset desain dan konsep produk | Desain berdasarkan riset pengguna |
| Tools | Spesifikasi utama desain grafis, seperti Flinto, Principle, Frames X, Adobe illustrator | Spesifikasi utama prototyping seperti Sketch, InVision, Figma, Adobe XD, Axure |
| Pre-building | Berupa mockup | Berupa wireframe dan prototype |
| Skill yang dibutuhkan | Desain grafis, creative thinking, convergent thinking, desain branding. | Riset, critical thinking, creative thinking, analysis, problem solving, wireframing. |
Workflow Desain UI dan UX
Meskipun UI dan UX berbeda, keduanya tetap harus bekerja secara berkesinambungan agar tercipta produk yang berkualitas. Nah di bagian ini, Anda akan mengetahui bagaimana cara kerja UI dan UX dalam pembuatan produk.
1. Riset UX
Riset UX merupakan langkah awal dalam membuat desain yang baik. Riset dilakukan untuk memahami apa yang dibutuhkan pengguna. Misalnya, untuk membuat website toko online, Anda harus mencari tahu bagaimana kebiasaan orang berbelanja, proses pembayaran yang paling disenangi pengguna dan lain-lain.
Seorang UX Researcher bisa melakukan riset UX melalui beberapa cara, baik melalui user interview atau online survey. Data yang dikumpulkan juga bisa melalui data kualitatif dan kuantitatif.
2. Membuat Information Architecture
Setelah melakukan riset UX, langkah selanjutnya adalah membuat Information Architecture (IA) produk. Information Architecture ini merupakan proses menyusun struktur bagian-bagian pada website dan aplikasi. IA ini akan memudahkan tim untuk memahami konsep sebuah produk.
Untuk membuat IA ini, Anda membutuhkan hasil riset UX yang telah dilakukan. Hasil riset UX didapatkan melalui metode card sorting, yaitu metode memilah dan menentukan buyers persona. Hasil riset tersebut membantu Anda untuk membuat struktur produk berdasarkan perspektif pengguna.
3. Membuat Wireframe
Selanjutnya yaitu proses wireframing. Wireframe merupakan sketsa visual dari sebuah produk. Sketsa desain ini juga menunjukan alur informasi bagi user untuk dapat mengoperasikan produk. Di sinilah peran UX Designer merancang desain.
Proses wireframing meliputi pembuatan sketsa produk yang akan dikembangkan menjadi sebuah produk. Wireframe ini juga akan membantu tim desainer, content dan developer untuk memvisualisasikan bagaimana tampilan produk.
Sketsa desain dibuat dengan Low Fidelity Wireframe (LFW) baru kemudian dibuat versi High Fidelity Wireframe (HFW). Ada banyak tools yang bisa dipakai dalam proses wireframing, seperti Figma, Adobe XD, dan lain sebagainya.
4. Mengatur UX flows
Setelah membuat wireframe, Anda perlu mengatur flow bagaimana sebuah produk digunakan oleh pengguna. Flow dibuat dengan pendekatan UX agar nantinya pengguna nyaman menggunakan produk Anda.
Flow ini kemudian didokumentasikan agar para developer mudah dalam mengembangkan produk.
5. Membuat Prototype Desain UX
Tahap berikutnya yaitu, membuat prototipe Desain sesuai dengan desain wireframe dan flow yang telah dibuat. Untuk membuat prototipe desain, Anda bisa membuatnya dengan aplikasi seperti Invision, MockPlus, Adobe XD, dan lain-lain.
Prototipe desain tersebut dapat diuji coba oleh internal tim dan langsung diperbaiki jika diperlukan. Jika prototipe desain tersebut telah lolos di internal tim, Anda bisa mengujinya ke user Anda.
6. Membuat Design System
Berikutnya adalah tahap pembuatan design system. Design system dibuat untuk menyimpan segala komponen-komponen desain, terutama komponen desain UI, seperti icon, font, colour palette, dan lain-lain dalam sebuah library.
Di tahap ini, dibutuhkan kolaborasi antara desainer UI dan developer. Desainer UI mulai membuat elemen desain, sementara developer membuat komponen library menggunakan HTML, CSS, Javascript, dan lain-lain.
Dengan adanya design system ini, proses pembuatan desain akan lebih cepat karena elemen desain telah tersedia. Manfaat lainnya adalah desain Anda jadi lebih konsisten dan efisien dalam pengerjaan desain produk lainnya. .
7. Mendesain User Interface
Di tahap ini, seorang UI Designer mulai bertugas mendesain tampilan produk yang menarik. Tahapan ini juga merupakan implementasi dari wireframe yang telah dibuat sebelumnya.
UI Designer akan mempercantik sketsa dengan paduan warna, tipografi, dan transisi antar halaman dengan elemen-elemen yang telah dibuat di tahap sebelumnya. Di tahap ini desainer UI juga perlu memperhatikan prinsip-prinsip desain UI yang baik.
Desainer bisa menggunakan Adobe Illustrator, Adobe Photoshop, Sketch App dan aplikasi desain lainnya.
8. Proses Pengembangan produk oleh Developer
Selanjutnya, tahap pengembangan produk oleh Developer. Di tahap ini, desain yang telah lolos uji coba dan didesain oleh desainer UI mulai didevelop oleh para developer.
Meskipun telah masuk ke tahap developing, tugas desainer UI dan UX tidak langsung berakhir. Developer bisa tetap berkolaborasi dan berkomunikasi dengan tim desainer untuk dapat mengatasi permasalahan bersama, jika ditemukan suatu kendala.
9. Design Usability Test
Setelah sebuah produk tercipta dengan tampilan yang baik, produk bisa mulai diluncurkan. Namun, sebelum benar-benar diluncurkan ke banyak orang, produk tersebut perlu melakukan proses uji coba dilakukan dengan memberikan skor pada setiap fitur desain.
Setelah diuji coba, desain tersebut akan mendapatkan saran dan masukan dari pengguna. Desain kemudian direvisi dan dites kembali sampai menjadi sebuah desain yang nyaman dan diinginkan pengguna.
Mengapa UI dan UX Penting dalam Pengembangan Website dan Aplikasi?
Tahukah Anda bahwa UI dan UX dikatakan sebagai salah satu kunci sukses sebuah produk. Kira-kira kenapa ya bisa dikatakan demikian? Menurut beberapa survei dan riset, inilah pentingnya UI dan UX pada sebuah produk.
1. Menghasilkan Produk yang Dibutuhkan Pengguna
Dengan memfokuskan desain pada user experience, Anda dapat membuat sebuah produk dengan fitur-fitur yang memang dibutuhkan oleh pengguna. Produk yang dibuat berdasarkan kebutuhan pengguna akan lebih diminati.
Salah satu perusahaan yang telah membuktikan keberhasilan dari mendengarkan kebutuhan pengguna adalah ESPN. ESPN berhasil meningkatkan 35% pendapatan website mereka setelah mendesain ulang homepage dengan pendekatan user experience.
2. Meningkatkan Kepuasan Pengguna Terhadap Produk
Produk dengan tampilan yang buruk dan sulit digunakan akan cepat ditinggalkan oleh pengguna. Riset (DCI) mengatakan 62% pengguna meng-uninstall aplikasi di ponsel mereka karena tampilan berantakan dan sering terjadi eror.
Namun, bila produk Anda memiliki tampilan menarik dan mudah digunakan, pengguna akan puas menggunakan produk Anda. Kepuasan pengguna akan membuat produk Anda tetap digunakan.
3. Meningkatkan Penjualan dan Bisnis
Bila website atau aplikasi bisnis Anda didesain dengan UI UX yang baik, Anda tidak hanya memberikan pelayanan optimal kepada pelanggan. Secara tidak langsung, Anda berarti telah menjalankan strategi peningkatan bisnis.
Website Fakultas dan Kemahasiswaan
https://kemahasiswaan.teknokrat.ac.id
Online Learning :
Website Program Studi FTIK :
Komentar
Posting Komentar