it-swarm-id.com

UI terbaik untuk mengizinkan pengguna ahli untuk memasukkan alamat ip? (IPv4)

Saya bekerja pada aplikasi web yang mengharuskan pengguna untuk memasukkan alamat IPv4 (dalam notasi desimal quad-dotted) untuk sebagian besar tugas utama yang perlu mereka lakukan. "Pengguna" target utama kami adalah administrator TI bisnis kecil. Mereka sangat akrab dengan alamat IP.

Saya bertanya-tanya gaya menerima masukan formulir mana yang terbaik? Kami sedang menggunakan Opsi 1 .

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

67
jessegavin

Opsi 3 tanpa validasi intrusif.

1 menyebalkan karena itu di luar norma. Salin dan tempel mungkin atau mungkin tidak berfungsi. Menabrak bidang berikutnya mungkin atau mungkin tidak berhasil. Orang-orang pandai memperbaiki kesalahan dan bidang-bidang terbatas mengacaukan memori otot mereka. Misalnya saya bisa mengetik

1912

Ketika saya maksudkan

192

Jari-jariku akan hampir secara instan memperbaiki itu tetapi bidang yang memaksaku ke 3 digit berarti bahwa aku menekan backspace dua kali kemudian mengetik '2' untuk memperbaikinya berakhir dengan '12' atau berakhir dengan 191 di kotak pertama dan tidak ada di kedua. Dalam kedua kasus saya mengutuk desainer UX yang mencoba menjadi pintar membuatnya lebih buruk.

Opsi 2 benar-benar sama dengan opsi 1 yang hanya berbeda secara visual. Pemisah ruang atau pemisah periode. Masalah yang sama muncul. Mungkin lebih seperti sekarang apakah saya mengetik periode atau tidak? Jika saya melakukan apa yang terjadi? Jika tipe periode I kemudian lagi, dengan memori otot tekan DEL menghapus kesalahan saya hanya untuk menghapus angka karena tidak memasukkan periode. Ugh!

Opsi 3 adalah yang terbaik tetapi validasi harus menunggu sampai saya menekan kirim atau setidaknya validasi tidak mengganggu. Dengan kata lain itu akan muncul di tempat lain pada halaman, bukan popup atau sesuatu yang mempengaruhi pengetikan saya karena alasan yang sama yang disebutkan di atas.

Saya mungkin mengetik

19w

Ketika saya maksudkan

192

Karena jari saya tergelincir tetapi persepsi dan memori otot saya cukup cepat sehingga saya akan segera mencoba memperbaikinya. Jika validasi mengganggu input saya maka saya akan mengutuk desainer UX lagi. Sebagai contoh, saya telah menggunakan formulir dengan validasi bahwa ketika saya mengetik 'w', lansiran atau dialog modal muncul "Hanya angka!" yang akhirnya membuatku tersandung karena aku sudah dalam proses memperbaikinya.

Sementara itu, sementara aaa.bbb.ccc.ddd adalah norma untuk alamat IP mengapa tidak peduli apa pemisah itu? Jika saya mengetik

1-2-3-4

atau

1 2 3 4

Mengapa itu tidak bisa diterima? Ini muncul karena sangat menjengkelkan ketika ditanya nomor telepon dan diberi tahu bahwa itu pasti XXXYYYZZZZ bukan hanya menerima XXX-YYY-ZZZZ atau (XXX) YYY-ZZZZ dll dan memiliki komputer yang memahaminya. Begitu pula dengan nomor CC. Terima AAAABBBBCCCCDDDD dan AAAA BBBB CCCC DDDD dan AAAA-BBBB-CCCC-DDDD; sebenarnya bagaimana kalau hanya mengekstrak digit, lalu mencari tahu apakah digit membuat angka CC yang valid. Demikian pula untuk alamat IP. Mungkin menguraikannya dengan mencari

  • nol atau lebih non digit
  • satu atau lebih digit
  • satu atau lebih non digit
  • satu atau lebih digit
  • satu atau lebih non digit
  • satu atau lebih digit
  • satu atau lebih non digit
  • satu atau lebih digit
  • nol atau lebih non digit

Seperti itu

[spasi] 1.2.3.4 [spasi]

juga akan berfungsi dan tidak mengganggu pengguna dengan pesan bodoh tentang memperbaiki input mereka ketika komputer benar-benar mampu menghadapinya.

68
gman

Sebagai sedikit curah pendapat tentang cara menyajikan alamat IP yang lebih baik kepada pengguna ahli, saya akan memilih campuran opsi 1 dan 3.

Cara saya mengimplementasikannya akan sangat mirip dengan sistem penandaan StackExchange sendiri, kecuali alih-alih menggunakan kunci spasi sebagai pembatas, saya akan menggunakan . sehingga saat Anda mengetik, itu bisa memasukkan input Anda ke dalam kotak yang terpisah:

Jauh lebih mudah dijelaskan dengan sebuah contoh. Maafkan bastardisasi saya pada <kbd> elemen:

1
19
192
192.
192.1
192.16
192.168
192.168.
192.168.1
192.168.1.
192.168.1.2
192.168.1.20
[bidang kehilangan fokus]
192.168.1.20

Tentu saja ada banyak detail implementasi yang perlu dikerjakan dalam metode ini. Seperti kebanyakan hal, lebih mudah untuk melakukannya dengan salah daripada memperbaikinya.

14
zzzzBov

Tidak pilihan 1. 90% dari waktu saya menyalin dan menempel alamat IP dari sumber lain dan saya berani bertaruh pengguna ahli ini juga melakukan ini. Karena ini saya harus mengatakan Opsi 3 adalah taruhan terbaik.

7
drawtheweb

Opsi 2 atau 3 akan kemungkinan paling dapat digunakan - tidak ada yang bisa memastikan tanpa mengujinya. Mungkin opsi 3, karena para ahli akan tahu ada periode di alamat IP (tidak perlu masker).

Opsi 1, sering terlihat dalam formulir entri nomor telepon di seluruh web, bisa menjadi rumit karena kurangnya konvensi dalam desain interaksi. Terkadang bidang dimajukan secara otomatis, terkadang tidak, sehingga Anda akan sering berakhir dengan pengguna yang mahir menabrak waktu ekstra setelah kursor sudah maju.

Karena semua yang Anda kumpulkan di bidang ini adalah angka dan periode, validasi seharusnya cukup sederhana, dan karena pengguna Anda ahli, mereka akan tetap tahu bagaimana memformat entri dengan benar.

4
Tim

Saya telah melihat Opsi 1 sebelumnya ketika memasuki bidang jaminan sosial. Mungkin hanya saya tapi saya selalu keliru Tekan "tab" untuk pergi ke kolom input berikutnya saat menggunakan ini. Untuk beberapa alasan saya selalu menganggap itu tidak maju otomatis. Ini mungkin karena secara visual ini muncul sebagai dua bidang input yang terpisah dan bukan satu.

3
Chris N.

Untuk pengguna listrik, hanya opsi 3. Untuk orang awam, salah satu dari ketiganya, meskipun mungkin peringkat dalam urutan.

Alamat IPv4 adalah empat oktet biner yang dipisahkan oleh periode ketika ditulis dalam notasi desimal. Pengguna listrik mengetahui hal ini dan terbiasa mengetik alamat IP dengan benar.

Seringkali, UI terbaik adalah UI yang tidak digunakan.

Seperti yang ditunjukkan Tim, Opsi 1 akan sedikit membuat frustasi bagi pengguna listrik karena mereka tidak perlu berpegangan tangan. Intuition memberi tahu saya bahwa opsi 1 akan paling intuitif bagi orang awam, karena ambiguitas antara tabbing atau keyboard-arrow-mencolok antara oktet dalam Opsi 2 akan membingungkan.

Keuntungan lain menggunakan bidang kotak 3 Opsi, omong-omong, adalah memungkinkan Anda juga mendukung alamat IPv6 tanpa mengubah antarmuka (dan mudah di backend untuk membedakannya, karena IPv4 32 bit dan IPv6 128 bit).

3
Matt

Opsi 3! Gunakan umpan balik instan yang bagus di sebelah kanan bidang blur.

Saya setuju, Anda akan sering menyalin informasi ini karena Anda tidak memiliki IP yang dihafal dan orang-orang tidak sebodoh itu. Terutama administrator TI Bisnis Kecil.

Formulir lain menghalangi pengguna (seperti Pemerintah Federal)!

3
Jeremy Gavin

Opsi 3, ditambah kemampuan untuk menggunakan notasi garis miring jika topeng juga diperlukan. Selain itu, saya harus bisa mengetik representasi desimal atau heksadesimal juga, dan harus menerimanya.

2
Keith

Opsi 3 jelas.

Anda berurusan dengan pengguna yang kuat, dengan brief Anda sendiri, jadi opsi 1 keluar.

Opsi 2 tidak diperlukan. Pengguna yang kuat tahu apa alamat IP itu. Mereka hanya ingin memasukkannya secepat mungkin. Mereka juga bisa mengetik, jadi pada dasarnya Anda hanya perlu membiarkan mereka melanjutkannya.

2

Opsi # 3 dengan penangan onchange memberikan umpan balik dengan mengubah warna perbatasan. Satu bidang adalah janji bahwa pengguna dapat memasukkan hal-hal sesuai keinginannya, memperbaiki kesalahan ketik, dan tidak disadap oleh proses validasi yang terlalu bersemangat.

Semua 3 opsi dapat bekerja dengan baik tergantung pada detail implementasi - misalnya, Anda dapat menerapkan salinan salin lengkap pada opsi # 1 dengan memisahkan string pada titik-titik dan mengisi sisa kotak secara otomatis, memungkinkan pengguna untuk mengetik/menghapus dari satu bidang ke yang berikutnya, pindah ke bidang berikutnya dengan tab atau titik ... tetapi karena ada banyak bidang IP yang diimplementasikan dengan buruk, pengguna yang berpengalaman tidak akan mengharapkan bidang Anda diimplementasikan dengan baik.

1
Sylverdrag

Opsi 3. Jika itu adalah alamat email, Anda tidak akan menampilkan bidang input untuk bagian lokal dan yang lain untuk domain, terutama mengingat pengguna tahu apa yang mereka lakukan.

1
seriousdev

Tentunya opsi 3. Tetapi akan cocok untuk menerapkan beberapa umpan balik untuk hal ini sehingga pengguna akan melihat format alamat ip yang tepat jika ada input yang salah.

1
flavicius

Opsi 3 akan menjadi yang terbaik. Windows menggunakan opsi 1 yang sangat mengganggu ketika Anda membuat kesalahan seperti yang ditunjukkan oleh umpan balik lainnya.

Ekstensi: Bisa menggunakan opsi 3 dan secara otomatis memasukkan titik (.) Setelah tiga digit diketik. Dengan demikian pengguna cukup mengetik 1921681001 akan menghasilkan 192.168.100.1. Hanya perlu catatan kaki di input untuk menyarankan fungsi ini yang lain akan menghasilkan banyak backspacing untuk menghapus exstra 192..168 jika tipe pengguna periode cepat.

1
hoektoe