Thursday, December 2, 2021
spot_imgspot_imgspot_imgspot_img
HomeVisual DesignMempelajari Anatomi Bidang Input

[Tipps UI]Mempelajari Anatomi Bidang Input

Pada artikel ini, saya ingin berbicara tentang salah satu elemen yang paling umum digunakan pada desain input UI. Bidang input memungkinkan pengguna untuk memasukkan teks ke UI. Mereka biasanya muncul dalam bentuk dan dialog.

Di bawah ini Anda akan menemukan elemen-elemen bidang input bersama dengan aturan praktis tentang cara mendesainnya.

Bagian input bidang

Image for post

Kotak input anatomi

Bidang input terdiri dari bagian-bagian berikut:

Wadah
Ikon terkemuka (elemen opsional)
Label
Placeholder / Input teks
Ikon tertinggal (elemen opsional)
Teks pembantu / Teks kesalahan (elemen opsional)
1. Wadah
Ukuran wadah harus proporsional dengan input pengguna yang diharapkan

Dalam bidang baris tunggal, saat kursor mencapai tepi bidang kanan, teks yang lebih panjang dari garis input akan bergeser ke kiri. Semakin banyak teks yang disembunyikan dari mata pengguna, semakin sulit bagi mereka untuk memvalidasi input. Idealnya, pengguna harus melihat semua inputnya tanpa perlu menggulir bidang input.

Image for post
Kiri: Wadah terlalu ketat. Kanan: Wadah berukuran benar

Lebar bidang juga menetapkan harapan pengguna – ini mengomunikasikan berapa banyak input yang diperlukan. Misalnya, jika Anda memiliki bidang input untuk ZIP di formulir Anda dan Anda tahu bahwa ZIP harus memiliki 5 digit, lebih baik untuk tidak membuat bidang terlalu lebar.

Image for post

Wadah harus mudah ditemukan

Bidang input harus menonjol dan menunjukkan bahwa pengguna dapat memasukkan informasi. Harus ada kontras yang cukup antara wadah dan area sekitarnya.

Pengguna harus memahami keadaan bidang dalam sekejap

Bidang teks input dapat memiliki salah satu dari status berikut: default, fokus, kesalahan, dan dinonaktifkan. Semua negara harus dibedakan secara jelas satu sama lain.

Image for post

Keadaan default vs. dinonaktifkan untuk bidang input
Jangan mendesain bidang teks agar terlihat mirip dengan tombol

Tampilan visual elemen UI memainkan peran kunci dalam proses mendekode maknanya. Cara objek terlihat memberi pengguna gagasan tentang bagaimana mereka seharusnya berinteraksi dengannya. Itulah mengapa sangat penting untuk membuat bidang input terlihat seperti bidang input, bukan tombol atau elemen UI lainnya.

Image for post

Jangan: cari bidang input yang terlihat seperti tombol
Pilih gaya visual untuk wadah Anda berdasarkan estetika aplikasi Anda

Haruskah saya menggunakan sudut bulat atau sudut persegi untuk wadah? Tidak ada jawaban yang cocok untuk semua pertanyaan ini. Selalu gunakan yang paling sesuai dengan gaya visual aplikasi Anda.

2. Ikon pemimpin

Sementara ikon terkemuka adalah elemen opsional dalam beberapa kasus, dimungkinkan untuk menciptakan pengalaman pengguna yang lebih baik dengan memperkenalkan ikon yang relevan di sebelah kotak input. Ikon yang dipilih dengan tepat membantu pengguna memahami arti bidang dalam sekilas (pengguna tidak perlu membaca label).

Image for post
Kolom input ini menanyakan ID pengguna
3. Teks label

Teks label digunakan untuk memberi tahu pengguna tentang informasi apa yang diminta untuk bidang teks. Setiap bidang teks harus memiliki label.

Hapus label

Tujuan utama label adalah untuk membantu pengguna memahami informasi apa yang diperlukan dalam satu pandangan. Karena itu, selalu mencoba untuk menulis label yang jelas dan jelas.

Jumlah kata

Label bukan teks bantuan. Hindari label yang panjang; gunakan label ringkas, pendek dan deskriptif (satu atau dua kata) sehingga pengguna dapat dengan cepat memindai formulir Anda.

Teks label harus selalu terlihat

Ada dua pendekatan yang biasa digunakan untuk teks label:

Label berjajar atas – label yang terletak di dekat bagian atas wadah.

Image for post
Label berjajar atas

Label mengambang. Label berjalan di atas wadah saat pengguna berinteraksi dengan bidang.

Image for post

Label mengambang.

Kedua pendekatan itu bagus dalam hal UX, dan Anda harus memilih salah satu yang paling sesuai dengan gaya Anda.

Teks label tidak boleh terpotong

Pengguna perlu meluangkan waktu ekstra untuk mendekode makna label yang terpotong.

Image for post

Teks label tidak boleh mengambil banyak baris

Jika Anda perlu memberikan informasi tambahan dalam konteks bidang, pertimbangkan untuk menggunakan teks Helper (lihat bagian 7).

4. Placeholder / Input teks

Placeholder adalah teks yang dilihat pengguna sebelum mereka berinteraksi dengan bidang. Teks input adalah teks yang dimasukkan pengguna ke dalam bidang teks.

Hati-hati dengan teks placeholder dan kontrasnya

Penting untuk memilih teks yang tepat untuk placeholder. Misalnya, jika Anda meminta pengguna untuk memberikan kota, jangan gunakan nama kota sebagai pengganti. Ini akan menyesatkan pengguna untuk berpikir teks pengganti adalah entri.

Image for post

Berikan format input bila perlu

Jangan membuat pengguna menebak format apa yang harus mereka gunakan untuk bidang. Beri tahu informasi ini di muka.

Image for post

Kiri: Tidak jelas format apa yang valid untuk bidang ini. Kanan: Format yang benar disediakan di placeholder

Dalam beberapa kasus, lebih baik menggunakan pemformatan otomatis – bidang menyesuaikan informasi yang diberikan pengguna secara otomatis (sesuai dengan format). Itu membuatnya lebih mudah untuk memvalidasi informasi dalam suatu formulir.

Image for post

Telepon diformat secara otomatis. (Gambar: Josh Morony)
Keadaan fokus

Anda perlu menyorot bidang aktif menggunakan visual.

Selalu perlihatkan kursor saat bidang aktif. Kursor harus menunjukkan posisi pengguna saat ini di bidang. Ini mencegah pengguna dari operasi yang tidak perlu.

Image for post

Berikan awalan / akhiran

Awalan dan akhiran berfungsi dengan baik saat bidang memiliki ukuran tertentu. Misalnya, bidang input untuk jumlah uang (awalan atau akhiran dapat menunjukkan mata uang) atau berat (akhiran dapat menunjukkan satuan massa).

Image for post

Bidang teks dengan awalan teks simbol mata uang.
Menetapkan nilai default

Lebih baik untuk menghindari default statis kecuali Anda benar-benar yakin bahwa sebagian besar pengguna Anda (katakanlah, 95%) akan memilih nilai tertentu. Apalagi jika informasi dari bidang ini penting bagi Anda. Mengapa? Karena orang memindai formulir dengan cepat dan banyak yang akan mengabaikan bidang yang sudah memiliki nilai.

Satu-satunya pengecualian untuk aturan ini adalah default pintar. Default pintar dapat membuat penyelesaian formulir pengguna lebih cepat dan lebih akurat. Misalnya, pra-pilih negara pengguna berdasarkan data geolokasi mereka. Tapi tetap saja, Anda harus menggunakan ini dengan hati-hati, karena pengguna cenderung meninggalkan bidang yang sudah dipilih sebelumnya.

5. Ikon trailing

Ikon Trailing adalah ikon kecil yang memiliki kekuatan besar – dapat membantu mengurangi biaya interaksi.

Ikon trailing ‘Clear’

Tampilkan ikon ini untuk membantu pengguna menghapus teks di bidang dalam satu ketukan.

Image for post

Perhatikan ikon ‘silang’ di sisi kanan wadah. Ketika pengguna mengetuk ikon ini, input akan dihapus.
Ikon ‘Salib’ atau ‘Periksa’

Jika formulir Anda menggunakan validasi sebaris, Anda dapat menggunakan ikon tambahan untuk memberi tahu pengguna tentang input yang valid / tidak valid.

Ketika pengguna memberikan informasi yang salah, Anda juga dapat menampilkan pesan kesalahan. Pesan kesalahan harus ditampilkan di bawah wadah. Pesan kesalahan harus terlihat sampai kesalahan diperbaiki.

Catatan sisi: Pesan kesalahan yang baik seharusnya tidak hanya menyatakan fakta bahwa input pengguna tidak valid; itu harus memberikan instruksi kontekstual tentang cara memperbaiki masalah.

Image for post

Ikon mata

Untuk bidang input yang mengumpulkan kata sandi, Anda dapat menunjukkan ikon ‘mata’ untuk memungkinkan pengguna melihat apa yang mereka ketikkan.

Image for post

Ikon input suara

Ikon mikrofon menandakan bahwa pengguna dapat input suara tersedia untuk pengguna.

Image for post

6. Teks pembantu / Teks kesalahan

Teks pembantu bertindak sebagai elemen bantu – menyediakan informasi tambahan tentang bidang input seperti:

Bagaimana informasi yang diberikan pengguna akan digunakan.
Persyaratan untuk informasi (yaitu pedoman pengaturan kata sandi)

Dalam beberapa kasus, teks pembantu dapat ditukar dengan teks kesalahan yang akan memandu pengguna (mis. Pesan kesalahan yang dilihat pengguna saat mereka memberikan input yang salah).

Teks pembantu bisa multiline

Pesan panjang dapat terbungkus menjadi beberapa baris jika tidak ada cukup ruang untuk menjelaskan konteksnya dengan jelas.

Pelajari cara mendesain antarmuka pengguna

Interaksi antara komputer dan manusia harus sama intuitifnya dengan percakapan antara dua manusia. Yayasan Desain Interaksi akan membantu Anda mempelajari cara mendesain untuk efisiensi dan persuasi.

 

 

 

 

 

 

 

 

sumber:uxplanet.org


Originally published at uxpro.cc

RELATED ARTICLES
- Advertisment -

Most Popular

Recent Comments