Wygląd bloków wskazuje, jak należy ich używać. Oto kilka kwestii, które warto wziąć pod uwagę podczas nadawania stylów własnym blokom.
Używanie widocznych obramowań
W pierwszej dekadzie XXI w. było modne „aqua”, a każdy obiekt na ekranie był ozdobiony podświetleniem i cieniem. W pierwszej dekadzie XXI w. w modzie pojawił się styl „Material Design”, a każdy obiekt na ekranie został uproszczony do czystej, płaskiej formy bez obramowania. Większość środowisk programowania blokowego ma podświetlenie i cienie wokół każdego bloku, więc gdy współcześni projektanci graficzni widzą to, zawsze usuwają te przestarzałe ozdoby.
Jak widać w powyższym przykładzie 5 bloków (z scriptr.io), te „przestarzałe dekoracje” są niezbędne do odróżniania połączonych bloków o tym samym kolorze.
Zalecenie: jeśli zmieniasz skórkę Blockly, nie pozwól, aby najnowsze trendy zepsuły Twoją aplikację.
Dodawanie strzałek kierunkowych
Opinie dzieci w USA (co ciekawe, nie z innych krajów) wykazały, że dzieci często mylą lewą i prawą stronę. Problem został rozwiązany przez dodanie strzałek. Jeśli kierunek jest względny (np. względem awatara), ważny jest styl strzałki. Strzałka w prost → lub strzałka skręcania ↱ może wprowadzać w błąd, gdy awatar jest skierowany w przeciwnym kierunku. Najbardziej przydatna jest ⟳ strzałka okrągła, nawet w przypadkach, gdy kąt skręcenia jest mniejszy niż wskazuje strzałka.
Rekomendacja: w miarę możliwości uzupełniaj tekst ikonami Unicode.
Używaj różnych łączników poziomych i pionowych
Blockly ma 2 rodzaje połączeń: poziome kształty puzzli i zagłębienia do układania pionowo. Dobry interfejs użytkownika powinien minimalizować liczbę elementów projektu. Dlatego wielu projektantów stara się, aby oba typy połączeń wyglądały tak samo (jak pokazano poniżej).
W rezultacie nowi użytkownicy mogą się pogubić, gdy będą szukać sposobów na obrócenie klocków, aby pasowały do niezgodnych połączeń. Blockly sprawia, że elementy programowania są wizualne i namacalne, więc trzeba uważać, aby nie sugerować nieobsługiwanych interakcji użytkownika.
W związku z tym Blockly używa do połączeń wartości ściśle dopasowanego kształtu puzzla, a do ułożenia instrukcji – wizualnie wyróżnionego wycięcia.
Zalecenie: jeśli zmieniasz wygląd Blockly, upewnij się, że połączenia poziome i pionowy wyglądają inaczej.
Pokazywanie, że instrukcje zagnieżdżone można układać w wielopoziomowych strukturach
Bloki w kształcie litery „C” zawsze mają złącze na górze od wewnątrz, ale niektóre środowiska mają też złącze na dole od wewnątrz (np. Wonder Workshop), a inne nie (np. Blockly i Scratch). Ponieważ większość bloków z oświadczeniami ma zarówno górne, jak i dolne złącza, niektórzy użytkownicy nie od razu zauważają, że oświadczenia pasują do bloku „C”, który nie ma dolnego złącza.
Gdy użytkownicy zrozumieją, że jeden blok instrukcji pasuje do „C”, muszą też zrozumieć, że pasuje do niego więcej niż 1 instrukcja. Niektóre środowiska umieszczają połączenie z pierwszego instrukcji poniżej na dole symbolu „C” (np. Wonder Workshop i Scratch), podczas gdy inne pozostawiają niewielką przerwę (np. Blockly). Dopasowanie do siebie nie daje żadnej wskazówki, że można ułożyć więcej klocków.
Te 2 problemy nie współdziałają ze sobą. Jeśli istnieje złącze wewnętrzne na dole (Wonder Workshop), połączenie w pierwotnym oświadczeniu jest bardziej oczywiste, ale kosztem możliwości wykrycia nakładania. Jeśli nie ma żadnego wewnętrznego złącza dolnego (Blockly), połączenie w pierwszym stwierdzeniu nie jest oczywiste, ale można je odkryć. Brak wewnętrznego dolnego złącza i zagnieżdżenie dolnego złącza instrukcji (Scratch) okazały się najgorszym rozwiązaniem pod względem możliwości znalezienia w przypadku testów przeprowadzonych za pomocą Blockly.
Z naszych doświadczeń wynika, że połączenie z pierwotnym oświadczeniem jest dla użytkowników mniej problematyczne niż odkrywanie nakładania. Po odkryciu pierwszy nigdy nie jest zapomniany, a drugi wymaga przypomnienia. Blockly próbował zarówno podejścia WonderWorkshop, jak i Scratch, aż pewnego dnia wystąpił błąd związany z renderowaniem, który dodał małą przerwę. Zauważyliśmy znaczną poprawę w badaniu użytkowników Blockly dzięki temu błędowi (który jest teraz „funkcją”, z której jesteśmy dumni).
Rekomendacja: jeśli chcesz zmienić wygląd Blockly, pozostaw dotychczasowy interfejs układania.