A aparência dos blocos fornece pistas importantes sobre como eles devem ser usados. Confira alguns aspectos a serem considerados ao definir o estilo dos seus blocos.
Usar bordas visíveis
Na década de 2000, o estilo "Aqua" estava na moda, e todos os objetos na tela eram decorados com destaques e sombras. Na década de 2010, o estilo do Material Design se tornou popular, e todos os objetos na tela foram simplificados para uma forma limpa, plana e sem bordas. A maioria dos ambientes de programação de blocos tem realces e sombras ao redor de cada bloco. Por isso, quando os designers gráficos atuais veem isso, eles inevitavelmente removem essas decorações desatualizadas.
Como pode ser visto no exemplo acima de cinco blocos (do scriptr.io), essas 'decorações desatualizadas' são essenciais para distinguir blocos conectados que têm a mesma cor.
Recomendação: ao refazer a skin do Blockly, não deixe que as tendências atuais quebrem seu app.
Adicionar setas direcionais
O feedback de crianças nos EUA (mas não de outras nações) revelou uma confusão entre esquerda e direita. Isso foi resolvido com a adição de setas. Se a direção for relativa (para um avatar, por exemplo), o estilo da seta é importante. Uma seta reta → ou uma seta de virada ↱ é confusa quando o avatar está de frente para a direção oposta. O mais útil é uma seta circular ⟳, mesmo nos casos em que o ângulo girado é menor do que a seta indica.
Recomendação: complemente o texto com ícones Unicode sempre que possível.
Usar conectores horizontais e verticais diferentes
O Blockly tem dois tipos de conexão diferentes: as formas de quebra-cabeça horizontais e os entalhes de empilhamento vertical. Uma boa interface do usuário precisa minimizar o número de elementos de design. Por isso, muitos designers tentam fazer com que os dois tipos de conexão pareçam iguais (como mostrado abaixo).
O resultado cria confusão entre os novos usuários, que procuram maneiras de girar os blocos para que eles se encaixem em conexões incompatíveis. O Blockly torna os elementos de programação visuais e tangíveis, então é preciso ter cuidado para não sugerir interações do usuário que não são compatíveis.
Assim, o Blockly usa uma forma de quebra-cabeça bem ajustada para conexões de valor e um entalhe de alinhamento visualmente distinto para a pilha de instruções.
Recomendação: ao refazer o skin do Blockly, verifique se as conexões horizontais e verticais são diferentes.
Mostrar que as instruções aninhadas podem ser empilhadas
Os blocos em forma de "C" invariavelmente têm um conector na parte interna de cima, mas alguns ambientes também têm um conector na parte interna de baixo (por exemplo, Wonder Workshop), enquanto outros não têm (por exemplo, Blockly e Scratch). Como a maioria dos blocos de instrução tem um conector superior e inferior, alguns usuários não percebem imediatamente que as instruções se encaixam em um "C" que não tem um conector inferior.
Depois que os usuários descobrem que um bloco de instrução se encaixa em um "C", eles precisam descobrir que mais de uma instrução também se encaixa. Alguns ambientes aninham a conexão inferior da primeira instrução na parte inferior do "C" (por exemplo, Wonder Workshop e Scratch), enquanto outros deixam uma pequena lacuna (por exemplo, Blockly). O aninhamento adequado não dá nenhuma dica de que mais blocos podem ser empilhados.
Esses dois problemas interagem mal um com o outro. Se um conector interno inferior existir (Wonder Workshop), a conexão da instrução inicial será mais óbvia, mas à custa da capacidade de detectar a pilha. Se não houver um conector interno (Blockly), a conexão da instrução inicial não será óbvia, mas a pilha será detectável. Não ter um conector inferior interno e aninhado o conector inferior da instrução (Scratch) teve o pior desempenho para detectabilidade quando testado com o Blockly.
Nossa experiência foi que a conexão da declaração inicial é um desafio menor para os usuários do que descobrir a pilha. E, uma vez descoberto, o primeiro nunca é esquecido, enquanto o segundo precisa de estímulo. O Blockly testou as abordagens do Wonder Workshop e do Scratch até que um dia um bug de renderização ocorreu, o que adicionou uma pequena lacuna. Notamos uma melhoria significativa nos estudos de usuários com o Blockly devido a esse bug (agora um "recurso" do qual temos orgulho).
Recomendação: se você estiver recriando o Blockly, deixe a interface de empilhamento atual.