Tampilan blok memberikan petunjuk penting tentang cara menggunakannya. Berikut beberapa hal yang perlu dipertimbangkan saat menata gaya blok Anda sendiri.
Menggunakan batas yang terlihat
Pada tahun 2000-an, tampilan 'Aqua' sedang populer dan setiap objek di layar dihiasi dengan sorotan dan bayangan. Pada tahun 2010-an, tampilan 'Desain Material' menjadi gaya dan setiap objek di layar disederhanakan menjadi bentuk yang bersih, datar, tanpa batas. Sebagian besar lingkungan pemrograman blok memiliki sorotan dan bayangan di sekitar setiap blok, sehingga saat desainer grafis saat ini melihatnya, mereka selalu menghapus dekorasi yang sudah usang ini.
Seperti yang dapat dilihat pada contoh lima blok di atas (dari scriptr.io), 'dekorasi usang' ini sangat penting untuk membedakan blok yang terhubung dan memiliki warna yang sama.
Rekomendasi: Jika mengganti skin Blockly, jangan biarkan mode saat ini merusak aplikasi Anda.
Menambahkan panah arah
Masukan dari anak-anak di Amerika Serikat (meskipun menariknya tidak dari negara lain) menunjukkan kebingungan yang merajalela antara kiri dan kanan. Masalah ini telah diatasi dengan penambahan panah. Jika arah bersifat relatif (misalnya, terhadap avatar), gaya panah sangat penting. Panah lurus → atau panah belok ↱ membingungkan saat avatar menghadap ke arah yang berlawanan. Yang paling membantu adalah panah melingkar ⟳, bahkan jika sudut yang diputar lebih kecil dari yang ditunjukkan panah.
Rekomendasi: Lengkapi teks dengan ikon Unicode jika memungkinkan.
Menggunakan konektor horizontal dan vertikal yang berbeda
Blockly memiliki dua jenis koneksi yang berbeda: bentuk teka-teki horizontal dan notch penumpukan vertikal. Antarmuka pengguna yang baik harus berusaha meminimalkan jumlah elemen desain. Oleh karena itu, banyak desainer mencoba membuat kedua jenis koneksi terlihat sama (seperti yang ditunjukkan di bawah).
Akibatnya, pengguna baru akan kebingungan saat mereka mencari cara untuk memutar blok agar dapat sesuai dengan koneksi yang tidak kompatibel. Blockly membuat elemen pemrograman menjadi visual dan nyata, sehingga Anda harus berhati-hati agar tidak tidak sengaja menyarankan interaksi pengguna yang tidak didukung.
Oleh karena itu, Blockly menggunakan bentuk teka-teki yang pas untuk koneksi nilai, dan notch perataan yang berbeda secara visual untuk penumpukan pernyataan.
Rekomendasi: Jika mengganti skin Blockly, pastikan koneksi horizontal dan vertikal terlihat berbeda.
Menunjukkan bahwa pernyataan bertingkat dapat ditumpuk
Blok berbentuk 'C' selalu memiliki konektor di bagian atas dalam, tetapi beberapa lingkungan juga memiliki konektor di bagian bawah dalam (misalnya Wonder Workshop) sedangkan yang lainnya tidak (misalnya Blockly dan Scratch). Karena sebagian besar blok pernyataan memiliki konektor atas dan bawah, beberapa pengguna tidak langsung melihat bahwa pernyataan akan muat di dalam 'C' yang tidak memiliki konektor bawah.
Setelah pengguna mengetahui bahwa satu blok pernyataan cocok di dalam 'C', mereka harus mengetahui bahwa lebih dari satu pernyataan juga akan cocok. Beberapa lingkungan menyusun koneksi yang lebih rendah dari pernyataan pertama ke bagian bawah 'C' (misalnya, Wonder Workshop dan Scratch), sedangkan yang lain meninggalkan celah kecil (misalnya, Blockly). Penyusunan yang rapat tidak memberikan petunjuk bahwa lebih banyak blok dapat ditumpuk.
Kedua masalah ini berinteraksi dengan buruk satu sama lain. Jika konektor bagian bawah dalam ada (Wonder Workshop), koneksi pernyataan awal akan menjadi lebih jelas, tetapi mengorbankan kemampuan untuk menemukan penumpukan. Jika tidak ada konektor bagian bawah dalam (Blockly), koneksi pernyataan awal tidak jelas, tetapi penumpukan dapat ditemukan. Tidak memiliki konektor bawah bagian dalam dan menyusun bertingkat konektor bawah pernyataan (Scratch) memiliki performa terburuk untuk kemampuan ditemukan saat diuji dengan Blockly.
Pengalaman kami adalah bahwa koneksi pernyataan awal merupakan tantangan yang lebih kecil bagi pengguna daripada menemukan penumpukan. Dan setelah ditemukan, yang pertama tidak pernah dilupakan, sedangkan yang kedua perlu diingatkan. Blockly mencoba pendekatan Wonder Workshop dan Scratch hingga suatu hari terjadi bug rendering yang menambahkan celah kecil. Kami melihat peningkatan yang signifikan dalam studi pengguna dengan Blockly karena bug ini (sekarang menjadi 'fitur' yang kami banggakan).
Rekomendasi: Jika mengganti skin Blockly, biarkan UI penumpukan yang ada.