Darstellung blockieren

Das Aussehen von Blöcken gibt wichtige Hinweise darauf, wie sie verwendet werden sollen. Hier sind einige Dinge, die Sie beim Stylen Ihrer eigenen Blöcke beachten sollten.

Sichtbare Rahmen verwenden

In den 2000er-Jahren war der „Aqua“-Look in Mode und jedes Objekt auf dem Bildschirm wurde mit Highlights und Schatten verziert. In den 2010er-Jahren wurde der Stil „Material Design“ populär und jedes Objekt auf dem Bildschirm wurde zu einer klaren, flachen, randlosen Form vereinfacht. Die meisten Blockprogrammierumgebungen haben Hervorhebungen und Schatten um jeden Block herum. Wenn heutige Grafikdesigner das sehen, entfernen sie diese veralteten Verzierungen in der Regel.

Blöcke ohne sichtbare Ränder Es ist schwer zu erkennen, wo die Blockgrenzen sind.

Wie im obigen Beispiel mit fünf Blöcken (von scriptr.io) zu sehen ist, sind diese „veralteten Dekorationen“ unerlässlich, um verbundene Blöcke derselben Farbe zu unterscheiden.

Empfehlung: Wenn Sie Blockly neu gestalten, lassen Sie sich nicht von den aktuellen Trends dazu verleiten, Ihre App zu zerstören.

Richtungspfeile hinzufügen

Ein Block mit einem kreisförmigen Pfeil, der eine Rechtsabbiegung zeigt, ist im Uhrzeigersinn.

Das Feedback von Kindern in den USA (aber interessanterweise nicht von Kindern in anderen Ländern) zeigte, dass viele Kinder nicht zwischen links und rechts unterscheiden können. Das Problem wurde durch das Hinzufügen von Pfeilen behoben. Wenn die Richtung relativ ist (z. B. zu einem Avatar), ist der Stil des Pfeils wichtig. Ein gerader Pfeil → oder ein Abzweigpfeil ↱ ist verwirrend, wenn der Avatar in die entgegengesetzte Richtung zeigt. Am hilfreichsten ist ein kreisförmiger Pfeil ⟳, auch wenn der gedrehte Winkel kleiner ist als der Pfeil angibt.

Empfehlung: Ergänzen Sie den Text nach Möglichkeit mit Unicode-Symbolen.

Unterschiedliche horizontale und vertikale Anschlüsse verwenden

In Blockly gibt es zwei verschiedene Verbindungstypen: die horizontalen Puzzleformen und die vertikalen Aussparungen zum Stapeln. Bei einer guten Benutzeroberfläche sollte die Anzahl der Designelemente minimiert werden. Daher versuchen viele Designer, beide Verbindungstypen gleich aussehen zu lassen (siehe unten).

Ein Gegenbeispiel, in dem derselbe Stil sowohl für horizontale als auch vertikale Anschlüsse verwendet wird.

Das führt zu Verwirrung bei neuen Nutzern, die nach Möglichkeiten suchen, Blöcke zu drehen, damit sie in inkompatible Verbindungen passen. Blockly macht Programmierelemente visuell und greifbar. Daher muss man darauf achten, nicht versehentlich Nutzerinteraktionen vorzuschlagen, die nicht unterstützt werden.

Daher verwendet Blockly eine eng anliegende Puzzleform für Wertverbindungen und eine visuell gut sichtbare Ausrichtungsnut für den Anweisungsstapel.

Empfehlung: Achten Sie beim Neugestalten von Blockly darauf, dass horizontale und vertikale Verbindungen unterschiedlich aussehen.

Anzeigen, dass verschachtelte Anweisungen gestapelt werden können

C-förmige Blöcke haben immer einen Anschluss an der Oberseite, aber einige Umgebungen haben auch einen Anschluss an der Unterseite (z.B. Wonder Workshop), andere nicht (z.B. Blockly und Scratch). Da die meisten Anweisungsblöcken sowohl einen oberen als auch einen unteren Anschluss haben, erkennen einige Nutzer nicht sofort, dass Anweisungen in ein „C“ passen, das keinen unteren Anschluss hat.

Blöcke mit Anweisungseingaben, von denen einer einen Anschluss unten hat und zwei nicht. Ein grünes Häkchen zeigt an, dass ein Anweisungsblock problemlos in den Block mit dem unteren Anschluss passt.

Sobald die Nutzer herausgefunden haben, dass ein Anweisungsblock in ein „C“ passt, müssen sie herausfinden, dass auch mehrere Anweisungen passen. In einigen Umgebungen wird die untere Verbindung der ersten Anweisung in den unteren Teil des „C“ verschachtelt (z.B. Wonder Workshop und Scratch), während andere eine kleine Lücke lassen (z.B. Blockly). Bei einem engen Nesting ist nicht zu erkennen, dass weitere Blöcke gestapelt werden können.

Blöcke mit verschachtelten Anweisungen. Der Block ohne unteren Anschluss hat eine Lücke zwischen der verschachtelten Anweisung und dem unteren Ende der Anweisungseingabe. Das zeigt an, dass weitere Anweisungsböcke hinzugefügt werden können.

Diese beiden Probleme wirken sich gegenseitig negativ aus. Wenn ein unterer Anschluss vorhanden ist (Wonder Workshop), wird die Verbindung der ursprünglichen Aussage deutlicher, aber auf Kosten der Möglichkeit, das Stapeln zu erkennen. Wenn kein unterer Innenanschluss vorhanden ist (Blockly), ist die Verbindung der ersten Anweisung nicht offensichtlich, aber das Stapeln ist erkennbar. Die Version ohne inneren unteren Anschluss und verschachtelten unteren Anschluss der Anweisung (Scratch) schnitt beim Testen mit Blockly am schlechtesten ab.

Unsere Erfahrung hat gezeigt, dass die Verbindung der ursprünglichen Aussage für Nutzer weniger schwierig ist als das Entdecken des Stapelns. Und einmal entdeckt, wird Ersteres nie vergessen, während Letzteres erinnert werden muss. Blockly hat sowohl den Wonder Workshop als auch den Scratch-Ansatz ausprobiert, bis eines Tages ein Renderingfehler auftrat, der die kleine Lücke verursachte. Aufgrund dieses Fehlers konnten wir in Nutzerstudien mit Blockly deutliche Verbesserungen erzielen. Dieser Fehler ist jetzt eine Funktion, auf die wir stolz sind.

Empfehlung: Wenn Sie Blockly neu gestalten, lassen Sie die vorhandene Stapel-Benutzeroberfläche.