 |
| UI/UX Form |
Form merupakan sebuah elemen penting pada UI/UX karena goal dari kebanyakan website atau app adalah menggiring user menuju sebuah Form.
 |
| Tips Mendesain UI/UX Form |
1. Sejajar
Sejajar disini maksudnya adalah mengatur text dan field agar form lebih mudah di scan. Buat label dekat dengan input fieldnya masing-masing.
 |
| Sejajar |
Mengelompokkan input field berdasarkan informasi. Beri space antara tiap kelompok.
 |
| Kelompokkan |
Gunakan label yang singkat dan jelas sehingga user tidak memerlukan banyak waktu untuk memahaminya.
 |
| Label Harus Singkat dan Jelas |
Beri space yang cukup lega, dan beri warna yang berbeda dari background agar lebih terlihat jelas. Jangan biarkan user menebak bagaimana isian yang benar, sediakan placeholder atau pilihan jawaban yang seharusnya diterima oleh sistem.
 |
| Format Input Field |
Menambahkan visual pada input field agar lebih mudah dipahami dan terlihat lebih menarik.
 |
| Tambahkan Visual |
Tunjukkan mana input yang wajib diisi dan mana yang hanya sekedar opsional.
 |
| Wajib atau Opsional? |
Tentukan button mana yang lebih dominan (primary). Tulis text yang "meaningful" dan jelas pada button. Dan gunakan warna sesuai branding.
 |
| Button Tips |
Tips yang terakhir adalah Validasi Form. Tunjukkan jika ada error pada Form. Gunakan warna merah agar mudah di deteksi oleh user. Tunjukkan juga dimana letak errornya, dan bagaimana cara mengatasinya.
 |
| Validasi Form |
1. Adobe XD
Software ini baru saja launch dan masih dalam tahap BETA. Pada aplikasi ini kita memiliki fitur Design dan Protoype yang dimana kita bisa membuat sebuah tampilan User Interface lalu menjadikan Prototype untuk memaksimalkan alur kerja pada aplikasi tersebut.
2. Adobe Photoshop
Siapa sih yang tidak kenal software ini? Adobe Photoshop adalah sebuah aplikasi yang digunakan untuk memanipulasi foto tapi banyak juga yang gunakan aplikasi ini untuk membuat sebuah tampilan User Interface dan Photoshop terbaru sudah menyediakan fitur Artboard untuk membantu para UI/UX Designer dalam hal pekerjaannya.
3. Mockplus
Mockplus adalah sebuah aplikasi yang dibangun oleh Chengdu, di China. Jadi, aplikasi ini cukup populer dan sangat sering digunakan oleh penduduk sana, karena aplikasi ini menyediakan beberapa template dan komponen yang tentunya sangat dibutuhkan ketika kita sedang membuat sebuah tampilan UI untuk Android maupun iOS. Maka dari itu, aplikasi yang satu ini cocok banget jika kalian suka desain aplikasi secara instant dan cepat. Oh ya, ada fitur prototype juga loh.
4. Balsamiq
Jauh sebelum ada Adobe XD dan Mockplus, aplikasi ini sudah ada loh😁 banyak orang-orang menggunakan aplikasi Balsamiq untuk membuat sebuah wireframe dan sering digunakan oleh UX designer dari kalangan luar negeri maupun Indonesia, Jadi kalian bisa coba deh Balsamiq ini ya dan aplikasi ini berbayar tapi kalian bisa free trial saja dulu.
5. Mockflow
Aplikasi berbasis web ini memang terbilang berat untuk kalangan pengguna RAM kecil, tapi jika kalian menggunakan RAM besar maka itu semua takkan menjadi masalah untuk mempelajari UI/UX design. Jadi, pada aplikasi ini tersedia banyak fitur layaknya yang membantu kita membaut wireframe, style-guide, sitemap, bahkan bisa kolaborasi juga dengan yang lain pada projek design kita loh.
6. Axure RP
Banyak pengguna Windows menggunakan aplikasi ini ketika mereka tidak bisa merasakan rasanya Sketch App. Axure dengan fitur lengkapnya dapat membawa kalian ke dunia UI yang memanjakan mata, dengan komponen yang lengkap dan easy-to-use yang dimana kalian hanya drag and drop saja dan langsung jadi.
7. MarvelApp
Aplikasi berbasis web yakni MarvelApp.com yang membantu kita membuat sebuah design dengan konsep canvas mereka dan juga membuat design kita menjadi layaknya live-app (prototype) pada fitur mereka. Kalian, juga bisa memberikan sebuah feedback pada design team atau kalian juga bisa share pekerjaan kalian dengan teman-teman kerja bahkan kuliahmu.
8. Proto.io
Proto ini juga aplikasi berbasis web yang dimana kita bisa akses dan tidak bergantung oleh sistem operasi, selama browser kita support HTML5 layaknya Chrome maupun Mozilla. Pada aplikasi ini kalian tidak kurang tidak lebih akan mendapatkan fitur-fitur menarik layaknya aplikasi lain, selama ini berbasis online maka kalian bisa share juga hasil design kalian untuk meminta sebuah feedback oleh rekan kerja kalian.
9. InvisionApp
Di InvisionApp juga kalian bisa menggunakan fitur-fitur yang membantu kita pada UI/UX design. Well, tidak banyak berbeda dengan aplikasi lainnya yang dimana kita juga bisa kolaborasi dengan team kita maupun memberikan sebuah komentar dan juga di sana ada fitur baru yakni Inspect dimana ini membantu beberapa developer dalam melihat kordinat, font-style, color-code, dan lain-lain bedasarkan design yang telah kita berikan.
10. Flinto
Pada Flinto ini ada 2 jenis, kalian bisa pilih Flinto Lite jika kamu pengguna Windows dan juga kalian bisa membuat sebuah design dari awal dan juga kamu bisa menambahkan animasi pada suatu design aplikasi kalian dengan mudah.
11. Justinmind
Kalian bisa gunakan Justinmind ini untuk UI/UX design dan bahkan sangat banyak sekali user yang menggunakan aplikasi ini untuk projek-projek besar dan bahkan Adobe sendiri pun pernah menggunakan aplikasi ini untuk mengerjakan beberapa projek mereka sebelum adanya Adobe XD.
Oke, demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat saya update artikel terbaru. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih. Follow Instagram saya @azhardvls_
Tags:
Others