Blokların görünümü, nasıl kullanılacaklarına dair önemli ipuçları sağlar. Kendi bloklarınıza stil uygularken dikkate almanız gereken bazı noktalar aşağıda açıklanmıştır.
Görünür kenarlık kullanın
2000'lerde "Aqua" görünümü modaydı ve ekrandaki her nesne vurgu ve gölgelerle süsleniyordu. 2010'larda "Materyal Tasarım" görünümü moda oldu ve ekrandaki her nesne temiz, düz, kenarsız bir şekle basitleştirildi. Çoğu blok programlama ortamında her bloğun etrafında vurgu ve gölge bulunur. Bu nedenle, günümüzün grafik tasarımcıları bunu gördüklerinde bu eski süslemeleri her zaman kaldırır.
Yukarıdaki beş blok örneğinde (scriptr.io'dan) görülebileceği gibi, bu "eski süslemeler" aynı renkteki bağlı blokları ayırt etmek için çok önemlidir.
Öneri: Blockly'yi yeniden tasarlıyorsanız günümüzün trendlerinin uygulamanızı bozmasına izin vermeyin.
Yön okları ekleme
ABD'deki çocuklardan (ilginç bir şekilde diğer ülkelerden değil) gelen geri bildirimler, solda ve sağda yaygın bir kafa karışıklığı olduğunu ortaya koydu. Bu sorun, okların eklenmesiyle çözüldü. Yön göreceliyse (ör. bir avatara göre) ok stili önemlidir. Avatarın zıt yöne baktığı durumlarda → düz ok veya ↱ dönüş oku kafa karıştırıcıdır. Döndürülen açının oku gösterdiğinden daha küçük olduğu durumlarda bile en faydalı olan ⟳ dairesel oktur.
Öneri: Mümkünse metni Unicode simgeleriyle destekleyin.
Farklı yatay ve dikey bağlayıcılar kullanın
Blockly'de iki farklı bağlantı türü vardır: yatay bulmaca şekilleri ve dikey istifleme çentikler. İyi bir kullanıcı arayüzünde tasarım öğelerinin sayısı en aza indirilmelidir. Bu nedenle, birçok tasarımcı her iki bağlantı türünü de aynı şekilde göstermeye çalışır (aşağıda gösterildiği gibi).
Sonuç olarak, uyumsuz bağlantılara sığmaları için blokları döndürme yollarını arayan yeni kullanıcılar arasında kafa karışıklığı oluşuyor. Blockly, programlama öğelerini görsel ve somut hale getirir. Bu nedenle, desteklenmeyen kullanıcı etkileşimlerini yanlışlıkla önermekten kaçınmak gerekir.
Buna göre Blockly, değer bağlantıları için sıkıca oturan bir bulmaca şekli ve ifade yığınları için görsel olarak farklı bir hizalama çentiği kullanır.
Öneri: Blockly'yi yeniden tasarlıyorsanız yatay ve dikey bağlantıların farklı göründüğünden emin olun.
İç içe yerleştirilmiş ifadelerin yığılabileceğini gösterme
"C" şeklindeki blokların üst iç kısmında her zaman bir konnektör bulunur. Ancak bazı ortamlarda alt iç kısımda da konnektör bulunur (ör. Wonder Workshop), bazılarında ise bulunmaz (ör. Blockly ve Scratch). Çoğu ifade bloğunun hem üst hem de alt konnektörü olduğundan bazı kullanıcılar, ifadelerin alt konnektörü olmayan bir "C" içine sığacağını hemen anlamaz.
Kullanıcılar bir ifade bloğunun "C" içine sığdığını anladıktan sonra birden fazla ifadenin de sığabileceğini anlamalıdır. Bazı ortamlar ilk ifadenin alt bağlantısını "C"nin alt kısmına yerleştirir (ör. Wonder Workshop ve Scratch), bazıları ise küçük bir boşluk bırakır (ör. Blockly). Sıkıca yerleştirilmiş bloklar, daha fazla blok eklenebileceğine dair ipucu vermez.
Bu iki sorun birbirini olumsuz yönde etkiler. İç alt konnektör varsa (Wonder Workshop) ilk ifadenin bağlantısı daha belirgin hale gelir ancak yığın oluşturma özelliğinin keşfedilebilmesi için bu bağlantının gösterilmesi gerekir. İç alt konnektör yoksa (Blockly) ilk ifadenin bağlantısı açık değildir ancak yığın oluşturma bulunabilir. İç alt bağlayıcısı olmayan ve ifadenin alt bağlayıcısını iç içe yerleştiren (Scratch) dil, Blockly ile test edildiğinde bulunabilirlik açısından en kötü performansı gösterdi.
İlk ifadenin bağlantısı, kullanıcılar için gruplandırmayı keşfetmekten daha az sorunlu olduğunu deneyimlerimizden biliyoruz. İlki keşfedildikten sonra asla unutulmaz, ikincisi ise hatırlatılması gerekir. Blockly, bir gün küçük bir boşluk ekleyen bir oluşturma hatası oluşana kadar hem Wonder Workshop hem de Scratch yaklaşımlarını denedi. Bu hata nedeniyle Blockly ile yapılan kullanıcı çalışmalarında belirgin bir iyileşme gördük (artık gurur duyduğumuz bir "özellik").
Öneri: Blockly'yi yeniden tasarlıyorsanız mevcut yığın oluşturma kullanıcı arayüzünü bırakın.