it-swarm.asia

Validasi dan Pengungkapan Progresif

Saya mencoba menemukan contoh validasi progresif. Kami memiliki UI untuk editor visual di mana pengguna melakukan hal-hal seperti menunjukkan dimensi dalam piksel atau persen.

Properti editor berada di set tab sehingga tidak semua bidang terlihat pada saat yang sama. Kami telah mendiskusikan bagaimana dan jika kami melakukan validasi di UI ini.

Saya datang dari perspektif bahwa: a) Validasi berguna karena akan membuat saluran komunikasi di mana pengguna dapat mempelajari harapan perangkat lunak dan "menjadi lebih baik" pada apa yang diperlukan. b) Selalu lebih baik untuk menunjukkan kesalahan validasi pada bidang input secara langsung (apakah ringkasan digunakan atau tidak di tempat lain) sehingga pengguna memiliki isyarat visual untuk apa yang perlu diubah.

Kolega saya, untuk siapa saya tidak memiliki apa pun kecuali rasa hormat yang paling tidak setuju. Logikanya adalah sebagai berikut: a) Akan lebih bijaksana untuk mencegah jenis entri tertentu, atau, dalam kasus beberapa entri untuk mengubahnya ke nilai yang lebih tepat jika tidak valid. Misalnya, jika seseorang menggunakan nilai persentase lebih besar dari 100, UI akan mengatur ulang nilai menjadi 100 dalam acara fokus yang hilang. b) Karena kita berada dalam lingkungan tab, beberapa kesalahan tidak akan terlihat oleh pengguna. Menggunakan ringkasan itu sia-sia karena berpotensi ada "banyak" kesalahan validasi.

Saya pikir solusi untuk ini mungkin pengungkapan progresif dari nilai yang tidak valid. Sebagai pengguna memasukkan nilai yang mungkin salah mereka ditandai dalam semacam ringkasan. Ringkasan ini memungkinkan pengguna untuk menavigasi ke bidang yang dipermasalahkan juga tanpa terlihat.

Saya berharap saya adalah orang yang orisinal, tetapi saya yakin ada preseden di sini. Pertanyaan saya adalah sebagai berikut:

  1. Ada yang bisa ditambahkan ke perspektif saya atau rekan saya?

  2. Adakah contoh UI seperti ini dengan entri kompleks yang melakukan validasi progresif?

11
David in Dakota

Kami saat ini bergulat dengan masalah yang sama untuk aplikasi desktop, meskipun tidak berbasis tab. Anda dapat mencoba pendekatan seperti ini:

alt text

di mana ikon kecil muncul jika sesuatu membutuhkan perhatian pengguna. Mungkin bahkan menggunakan dua warna: kuning untuk peringatan, dan merah untuk hal-hal yang harus diperbaiki sebelum pengguna dapat melangkah lebih jauh.

7
Hisham

Hal terbaik yang dapat Anda lakukan dalam situasi yang rumit ini adalah membuat prototipe sebanyak mungkin dari UI dan mengujinya pada basis pengguna Anda untuk melihat apa yang terjadi. Anda dapat menggunakan HTML dalam kombinasi dengan sesuatu seperti jQuery UI untuk dengan cepat mendapatkan banyak kontrol interaktif yang tersedia dan siap untuk pengujian dengan cepat.

Sistem tab Anda terdengar rumit jadi saya harus menyarankan beberapa hal untuk disederhanakan:

  • Buat tombol "terapkan" di dalam setiap tab sehingga status hanya dapat disimpan untuk properti yang dapat dilihat pengguna saat ini. Jika itu akan menghasilkan keadaan aplikasi yang tidak valid, desain ulang tab Anda sehingga pengguna memiliki sifat yang dikelompokkan bersama yang bisa disimpan secara independen dari satu sama lain.
  • Jika Anda tidak dapat melakukannya, Anda dapat menyorot tab dengan ikon "tidak valid" dan warna untuk menunjukkan properti di tab itu yang perlu diperhatikan. Meskipun ada tab yang tidak valid, tombol "berlaku" dinonaktifkan. Anda dapat mempertimbangkan untuk menambahkan pemberitahuan ke tombol jika diklik untuk menampilkan pesan yang menunjukkan bahwa masih ada kesalahan. Ringkasan untuk apa yang salah akan ditampilkan dalam setiap tab sebagai lawan memiliki ringkasan yang menyeluruh.
  • Ringkasan global mungkin berfungsi, tetapi saya ragu untuk menyarankannya karena sepertinya tidak akan ada lokasi yang jelas untuk meletakkannya, dan kecuali itu masalahnya, apakah pengguna akan memperhatikan?
  • Bagaimana properti dikelompokkan? Mungkin secara fungsional? Cobalah melihat mereka dari sudut yang berbeda, misalnya dengan kemungkinan penggunaan. Ini adalah bagian dari bagaimana Microsoft mendekati desain Ribbon untuk produk Office 2007-nya. Mungkin Anda dapat mendesain tab Anda sedemikian rupa sehingga sebagian besar pengguna hanya perlu mengacaukan properti di tab pertama, atau langsung terlihat, dan tab lainnya dapat dianggap "canggih" atau kontekstual.

Pada akhirnya, dan saya sudah mengatakan ini, uji desain Anda! :-)

Sejauh menangani kesalahan, pengalaman saya adalah bahwa jika Anda mencegah input tertentu, pengguna akan bingung. Misalnya, jika tidak jelas dari bidang input bahwa hanya angka yang diizinkan, tetapi Anda tetap tidak mengizinkan karakter lain, itu akan membuat frustasi pengguna - mereka tidak akan mengalaminya sebagai bentuk cerdas yang mencoba membantu mereka keluar . Jadi saya sarankan Anda menggunakan microcopy yang jelas sepanjang jika Anda memutuskan untuk menggunakan jalur kejadian dan deteksi input untuk secara otomatis memperbaiki hal-hal.

Tapi semua ini anekdotal - saya belum melakukan penelitian di bidang ini. Alih-alih mengambil kata-kata saya untuk itu, lihat buku Luke Wroblewski, Desain Formulir Web: Mengisi Kosong , dan penelitiannya tentang penanganan kesalahan untuk beberapa wawasan yang berguna tentang bagaimana menangani situasi seperti ini (untuk contoh, ini posting pada desain ulang formulir checkout Apple membahas bagaimana mereka menangani kesalahan secara detail).

4
Rahul

Baru-baru ini saya mengerjakan proyek yang mengalami masalah serupa. Anda dapat melihat tangkapan layar tentang bagaimana kami menyelesaikannya di artikel " Minimizing Complexity " dari tahun lalu.

1
Tyler Tate

Saya memikirkan sebuah kasus di mana ringkasan untuk banyak kesalahan digunakan dan jenis pekerjaan, mungkin.

Dalam setiap IDE seperti katakan Visual Studio ada potensi untuk jumlah kesalahan yang tak ada habisnya baik ketika membangun atau menggunakan alat analisis statis saat menulis kode. Umumnya ada puluhan atau ratusan file dan banyak dari mereka terbuka di tab, dengan satu atau dua terlihat pada satu waktu,

Kesalahan tersebut kemudian terdaftar dalam daftar yang dapat diubah ukurannya yang dapat digeser keluar (secara default) di bawah UI utama. Ini bisa dilakukan segera setelah kesalahan terperangkap. Ketika kesalahan diklik atau diklik ganda itu membawa Anda ke tempat yang tepat dan fokus untuk memperbaikinya - dan kesalahan menghilang dari daftar ketika itu tidak berlaku lagi.

(Pada kenyataannya, banyak dari kesalahan ini memerlukan tindakan yang diprakarsai pengguna untuk dinilai ulang tetapi ada banyak tambahan analisis statis yang melakukan ini di latar belakang dan benar-benar memperbarui daftar kesalahan secara dinamis saat mengedit kode) .

0
Oskar Duveborn

a) Sebagai contoh, jika seseorang menggunakan nilai persentase lebih besar dari 100, UI akan mereset nilai menjadi 100 dalam peristiwa fokus yang hilang.

Poin bagus, tapi kemudian Anda harus memastikan:

  1. Pengguna menyadari bahwa inputnya telah diperbaiki.
    Mungkin, misalnya, buat flash bidang sesaat jika Anda memperbaiki nilainya.

  2. Anda bisa menebak dengan tepat apa yang sebenarnya dimaksud pengguna.
    Misalnya, ambil color picker yang saya geluti kemarin. Saya ingin beberapa elemen untuk mencocokkan mereka dari situs lain, jadi saya mendapatkan sendiri nilai hex dan menyalinnya ke kotak teks kecil ad-hoc. Nilai pertama adalah #202040, tetapi untuk beberapa alasan saya hanya menempelkan #20204, yang segera "diperbaiki" menjadi #020204. Nilai kedua yang saya tempelkan adalah #BCD (singkatan untuk #BBCCDD), yang juga "diperbaiki" ke ... #000BCD. Mendesah.
0
badp