La apariencia de los bloques proporciona pistas importantes sobre cómo se deben usar. Estos son algunos aspectos que debes tener en cuenta cuando diseñes tus propios bloques.
Usa bordes visibles
En la década de 2000, el estilo “Aqua” estaba de moda y cada objeto en pantalla se decoraba con luces y sombras. En la década de 2010, el aspecto de "Material Design" se puso de moda y cada objeto en pantalla se simplificó a una forma limpia, plana y sin bordes. La mayoría de los entornos de programación de bloques tienen resaltados y sombras alrededor de cada bloque, por lo que, cuando los diseñadores gráficos actuales ven esto, quitan invariablemente estas decoraciones desactualizadas.
Como se puede ver en el ejemplo anterior de cinco bloques (de scriptr.io), estas "decoraciones desactualizadas" son vitales para distinguir los bloques conectados que son del mismo color.
Recomendación: Si cambias el diseño de Blockly, no dejes que las modas de hoy rompan tu app.
Cómo agregar flechas de dirección
Los comentarios de los niños de EE.UU. (aunque, curiosamente, no de otras naciones) revelaron una confusión generalizada entre la izquierda y la derecha. Esto se resolvió con la adición de flechas. Si la dirección es relativa (a un avatar, por ejemplo), el estilo de la flecha es importante. Una flecha recta → o una flecha de giro ↱ es confusa cuando el avatar está mirando en la dirección opuesta. Lo más útil es una flecha circular ⟳, incluso en los casos en que el ángulo girado es menor que el que indica la flecha.
Recomendación: Cuando sea posible, complementa el texto con íconos Unicode.
Usa diferentes conectores horizontales y verticales
Blockly tiene dos tipos de conexión diferentes: las formas de rompecabezas horizontales y las muescas de apilamiento verticales. Una buena interfaz de usuario debe esforzarse por minimizar la cantidad de elementos de diseño. En consecuencia, muchos diseñadores intentan que ambos tipos de conexión se vean iguales (como se muestra a continuación).
El resultado genera confusión entre los usuarios nuevos, ya que buscan formas de rotar bloques para que se ajusten a conexiones incompatibles. Blockly hace que los elementos de programación sean visuales y tangibles, por lo que hay que tener cuidado de no sugerir interacciones del usuario que no se admiten.
En consecuencia, Blockly usa una forma de rompecabezas ajustada para las conexiones de valores y una muesca de alineación visualmente distinta para el apilamiento de instrucciones.
Recomendación: Si cambias el diseño de Blockly, asegúrate de que las conexiones horizontales y verticales se vean diferentes.
Muestra que las sentencias anidadas se pueden apilar.
Los bloques en forma de “C” siempre tienen un conector en la parte superior interior, pero algunos entornos también tienen un conector en la parte inferior interior (p.ej., Wonder Workshop), mientras que otros no (p.ej., Blockly y Scratch). Dado que la mayoría de los bloques de instrucciones tienen un conector superior e inferior, algunos usuarios no ven de inmediato que las instrucciones encajarán dentro de una “C” que no tiene un conector inferior.
Una vez que los usuarios descubren que un bloque de sentencia se ajusta dentro de una “C”, deben descubrir que más de una sentencia también se ajusta. Algunos entornos anidan la conexión inferior de la primera sentencia en la parte inferior de la “C” (p.ej., Wonder Workshop y Scratch), mientras que otros dejan un pequeño espacio (p.ej., Blockly). El anidamiento ajustado no deja indicios de que se pueden apilar más bloques.
Estos dos problemas interactúan mal entre sí. Si existe un conector inferior interno (Wonder Workshop), la conexión de la sentencia inicial se hace más obvia, pero a costa de la capacidad de descubrir el apilamiento. Si no existe un conector inferior interno (Blockly), la conexión de la sentencia inicial no es obvia, pero se puede detectar el apilamiento. No tener un conector inferior interno y anidar el conector inferior de la sentencia (Scratch) tuvo el peor rendimiento en cuanto a la visibilidad cuando se probó con Blockly.
Nuestra experiencia fue que la conexión de la declaración inicial es un desafío menor para los usuarios que descubrir el apilamiento. Y, una vez descubierto, el primero nunca se olvida, mientras que el segundo necesita una indicación. Blockly probó los enfoques de Wonder Workshop y Scratch hasta que un día se produjo un error de renderización que agregó la pequeña brecha. Notamos una mejora significativa en los estudios de usuarios con Blockly debido a este error (ahora es una “función” de la que nos sentimos orgullosos).
Recomendación: Si cambias el diseño de Blockly, deja la IU de apilamiento existente.