Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar

    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    UI/UX Form
    Halo sobat 48😁 kali ini saya akan membagikan sebuah artikel yang membahas Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar. Disini ada 8 tips yang saya bagikan buat kalian yang memiliki profesi sebagai UI/UX Designer. Sebelum ke pembahasan, apasih Form itu?

    Form merupakan sebuah elemen penting pada UI/UX karena goal dari kebanyakan website atau app adalah menggiring user menuju sebuah Form.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Tips Mendesain UI/UX Form
    Oke tanpa basa-basi lagi kita langsung ke tips yang pertama :

    1. Sejajar

    Sejajar disini maksudnya adalah mengatur text dan field agar form lebih mudah di scan. Buat label dekat dengan input fieldnya masing-masing.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Sejajar
    2. Kelompokkan

    Mengelompokkan input field berdasarkan informasi. Beri space antara tiap kelompok.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Kelompokkan
    3. Label Harus Singkat dan Jelas

    Gunakan label yang singkat dan jelas sehingga user tidak memerlukan banyak waktu untuk memahaminya.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Label Harus Singkat dan Jelas
    4. Format Input Field

    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.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Format Input Field
    5. Tambahkan Visual

    Menambahkan visual pada input field agar lebih mudah dipahami dan terlihat lebih menarik.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Tambahkan Visual
    6. Wajib atau Opsional?

    Tunjukkan mana input yang wajib diisi dan mana yang hanya sekedar opsional.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Wajib atau Opsional?
    7. Button Tips

    Tentukan button mana yang lebih dominan (primary). Tulis text yang "meaningful" dan jelas pada button. Dan gunakan warna sesuai branding.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Button Tips
    8. Validasi Form

    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.
    Tips Bagaimana Mendesain UI/UX Form yang Baik dan Benar
    Validasi Form
    Bagaimana? Sampai disini apa kalian sudah paham? Jika masih ada yang kurang paham, silahkan berikan komentarnya ya. Hmm, lalu software apa saja sih yang bisa digunakan untuk membuat UI/UX? Berikut 11 software yang bisa kalian gunakan untuk membuat UI/UX :

    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_