🎉 👩🏻‍🌾 👦🏿 Membentuk pola desain. Ulasan buku ⏮️ 🅰️ 🙏🏼

Pendahuluan oleh penulis ulasan

Buku ini mengungkapkan, kadang-kadang tidak jelas bagi desainer dan pengembang front-end, tema-tema desain lapangan, konsep bekerja dengan tipe data dan kegunaan. Buku ini akan berguna bagi para pemula dan desainer yang mengerti antarmuka, karena yang pertama akan memberikan pemahaman tentang dasar-dasar, dan yang kedua akan memberikan makanan untuk dipikirkan, kadang-kadang kontroversial, pola desain. Tinjauan akan disajikan dalam bentuk abstrak singkat dari buku dan komentar singkat oleh pengulas.

Bagian satu. Tentang ladang

1. Label di atas lebih baik daripada label di sebelah kiri.

Mengapa: Tesis ini telah menjadi genre klasik. Banyak artikel telah ditulis tentang topik ini, misalnya , yang ini dan ratusan yang serupa. Juga, menempatkan label di atas kita mendapatkan lebih banyak ruang jika label panjang. Kelihatannya jelas, tetapi banyak desainer dengan keras kepala menempelkan label di sebelah kiri.

2. Placeholder tidak menjelaskan aturan pengisian

Mengapa: Placeholder menghilang ketika diklik + krop di bidang.

3. Jangan meminta kata sandi lagi

Mengapa: Membuat masuk dua kali.

4. Kesalahan teks untuk menulis antara label dan bidang

Mengapa: Tidak akan ditutup oleh autocomplete atau keyboard pada ponsel.

Opini: Tampaknya tesis ini dapat dimengerti, tetapi terlihat sangat super tidak biasa. Untuk semua waktu mendesain antarmuka (9+ tahun), saya hanya bertemu sekali dan hanya di tata letak satu desainer. Tapi mungkin ada baiknya menggunakan pola ini untuk melayani.

5. Memilih lebih baik untuk tidak menggunakan

Mengapa: Sembunyikan opsi, jangan perbesar beberapa perangkat, klik ekstra, seseorang mencoba menulis kepada mereka.

Opini: Saya mencoba untuk tidak menggunakan pilihan jika poin kurang dari atau sama dengan 3. Jika demikian, tag atau grup radio lebih mudah dibuat. Mungkin itu adalah fakta bahwa beberapa orang percaya bahwa ini adalah bidang input, bukan pilih dan mencoba untuk menulis di sana, memunculkan hibrida input dan pilih dalam bentuk menu drop-down, tetapi item pertama adalah bidang input (paling sering pencarian). Ini adalah solusi sekaligus penopang sekaligus.

6. Ketika Anda tidak perlu kalender untuk menunjukkan tanggal

Kalender tidak diperlukan untuk:

Tanggal lahir, karena semua orang mengingat tanggal ini dengan hati dan lebih mudah untuk masuk dengan tangan;
Tanggal kedaluwarsa kartu;
Tanggal yang tertulis dalam dokumen dan Anda hanya perlu mengetik ulang tanpa ragu-ragu.

7. Buat "frasa sandi"

Mengapa: Ada pendapat bahwa frasa ini lebih mudah diingat.
Opini: ¯ \ _ (ツ) _ / ¯

8. Gunakan "- / +" daripada memilih

Aturan: Gunakan plus dan minus jika angkanya tidak besar. Contoh yang baik adalah pilihan jumlah penumpang per penerbangan. Buku itu mengatakan bahwa ada tes pada subjek ini dan plus / minus menunjukkan diri mereka lebih baik.

9. Ukuran bidang harus di bawah konten

Mengapa: Ya, karena ini logis! Dan tidak masalah bahwa bidang ini tidak merata. Namun dalam setengah detik jelas jenis konten apa yang harus ada.

10. Bicaralah tepat di tempat kesalahannya

Mengapa biasanya tidak demikian: Diyakini bahwa ini bukan keamanan, setelah semua, mengatakan bahwa kata sandi tidak benar, kami mengisyaratkan bahwa login sudah benar. Namun pada kenyataannya, peretas tidak akan memeriksa semua kata sandi yang ada di dunia jika mereka mengetahui bahwa Login, yang paling sering merupakan alamat email. surat dan informasi terbuka cocok.

Bagian kedua. Tentang tombol

1. Sejajarkan tombol ke kiri

Mengapa: Lihat beralih dari kiri ke kanan. Pengecualian bisa berupa jendela modal di mana tidak ada bidang input. Misalnya, dalam desain material Google tombol di modals di sebelah kanan.

2. Jangan menonaktifkan tombol

Mengapa: Tidak akan mungkin untuk pergi ke sana dengan menekan Tab, itu tidak akan dibaca oleh beberapa pembaca layar dan itu tidak terlihat karena kusam.

Opini: Sampai saat ini, saya lebih suka mendesain tombol untuk menjelaskan kepada pengguna bahwa mereka kurang mengisi sesuatu dalam formulir. Dan entah bagaimana dia bahkan tidak ragu bahwa ini mungkin tidak jelas. Pengujian pada pengguna menunjukkan bahwa pengguna melihat warna abu-abu, tetapi tidak semua orang mengerti bahwa itu berarti ada sesuatu yang salah. Seolah-olah Anda pertama kali melihat lampu lalu lintas dan mampu membedakan warnanya, tetapi tidak tahu apa arti setiap warna. Anda tidak akan peduli apa yang terbakar sekarang.

3. Tulis pada tombol kata kerja

Mengapa: Lebih jelas apa yang akan terjadi.

4. Jangan meletakkan tautan "Saya tidak ingat kata sandi" di depan tombol

Mengapa: Bagi mereka yang pergi melalui bidang melalui Tab, ini mungkin berfungsi sebagai pergi ke tautan alih-alih tombol dan karena kebiasaan, ia akan menekan Enter, menjalankan skrip pemulihan kata sandi yang tidak perlu.

5. Dengan bentuk yang panjang, jangan malu untuk meletakkan tombol di atas

Opini: Semacam omong kosong. Lebih baik untuk memperbaiki tombol dari bawah sehingga selalu terlihat saat menggulir. Tetapi, misalnya, Yandex.Mail menempatkan tombol di atas.

gambar

Bagian ketiga. Browser dan Otomasi

Jangan membuat transisi otomatis dari satu bidang ke bidang lain saat memasukkan jumlah karakter yang diperlukan. Itu dapat membingungkan pengguna
Peramban yang mendukung HTML5 memiliki validator formulir bawaan dan setiap peramban memiliki logikanya sendiri. Masuk akal untuk menonaktifkan validasi default
Diperlukan untuk menonaktifkan koreksi kesalahan otomatis dan meningkatkan otomatis huruf pertama. Jika tidak, tampaknya bagi pengguna bahwa ini adalah kesalahan dan data tidak akan diterima
Menurut statistik, penyelesaian otomatis di Chrome digunakan 9 miliar kali sebulan. Ini, rata-rata, menghemat pengguna 12 detik, yang memberikan 1.250.000 hari per bulan. Fakta yang menyenangkan
Jangan memfilter tanpa mengklik tombol "Filter". Tombol diperlukan, misalnya, jika tidak hanya radio dan kotak centang, tetapi juga kolom input (biaya, beberapa interval, dll.). Tetapi mereka sendiri terus menulis tentang pengujian, di mana pengguna percaya bahwa filter tidak berfungsi tanpa menyadari bahwa Anda perlu mengklik tombol "Filter". ¯ \ _ (ツ) _ / ¯

Bagian Empat. Tentang semuanya

Pada titik tertentu, buku ini beralih dari bentuk ke menggambarkan kegunaan ikon dan hal-hal lain yang tidak relevan dengan topik. Mereka menulis di buku yang agak aneh melihat teks tentang ikon di sini, tetapi ikon juga merupakan bagian dari antarmuka, seperti formulir, dan karenanya dapat dijelaskan. Tetapi saya tetap menemukan hal-hal yang cukup menarik di antara sedikit informasi yang bermanfaat. Tentang mereka di bawah ini.

1. Menyebarkan bidang Login dan Kata Sandi pada halaman yang berbeda bukanlah hal yang memalukan

Di situs web GOV.UK, dalam bentuk otorisasi, mereka membuat Login di satu halaman, dan Kata Sandi di halaman lain (sekarang tidak demikian) dan pengguna tidak melihat sesuatu yang aneh.

Opini: Sekarang saya semakin memperhatikan pendekatan ini. Dari Google ke berbagai layanan seperti Abstrak.

gambar

2. Menampilkan langkah-langkah adalah opsional

Tidak ada gunanya menampilkan bilah kemajuan dengan langkah-langkah. Mereka mengambil banyak ruang. Pemerintah Inggris menghapus bilah dan konversi tidak berubah.

gambar

3. Topik dengan menghafal 7 ± 2 elemen tidak lagi relevan

Mengapa: Karena tidak ada yang ingat apa pun di situs. Anda cukup menggulir ke atas jika Anda lupa sesuatu.

4. Masukkan bidang alamat dalam urutan yang diterima di wilayah tertentu

Ini bukan dari buku, tetapi dari esai saya. The Postal Asosiasi Internasional telah ditulis aturan. Misalnya, di Rusia, prosedur berikut telah diadopsi:

Ivanov Ivan
st. Lesnaya, rumah 5, apt. sebelas
Moskow
Rusia
Kode Pos

Membentuk pola desain. Ulasan buku