...
Oberfläche des Voxel Editors beim ersten Start
Die Bedienoberfläche des Voxel Editors besteht aus der Arbeitsfläche in der Mitte, der Projektleiste darüber sowie der Werkzeugleiste und der Farbpalette am rechten Rand.
...
Dieses Werkzeug dient dem automatischen Erstellen von großen Voxel-Verbünden: Durch den ersten Klick wird das Start-Voxel des Verbunds gesetzt - eine Referenz für die Position des finalen Verbunds. Anschließend wird die Größe definiert, indem der Anwender die Position des am weitesten vom Start-Voxel entfernten Voxels festlegt. Bereits beim Anvisieren geeigneter Positionen wird jeweils die Fläche, die der resultierende Voxel-Verbund einnehmen würde, visualisiert. Liegt das letzte Voxel auf einer Achse mit dem Start-Voxel ist das Resultat eine Voxel-Reihe. Liegen beide Voxel auf derselben Höhe, jedoch diagonal entfernt, so ergibt dies eine Fläche von Voxeln. Ist die Endposition höher und diagonal entfernt von der Startposition, so wird ein Voxel-Block erzeugt.
Ein Klick füllt schließlich die gezeigte Fläche mit einzelnen Voxeln auf und erspart damit mühevolle Handarbeit.
Erzeugen eines Voxel-Blocks
Stellt der Anwender während der Arbeit am Modell fest, dass er einen anderen Maßstab benötigt, um beispielsweise zusätzliche Details einzufügen, kann das Modell mit einem Klick auf das "Modell vergrößern"-Werkzeug auf die doppelte Größe skaliert werden. Ein Voxel entspricht also anschließend einem Würfel aus vier Voxeln.
...
Dazu gibt es das Bedienfeld "Speicherstände" in der Projektleiste, das die Resultate von bis zu 20 Arbeitsschritten zur Zeit aufnehmen kann. Jedes kleine Quadrat des Bedienfelds stellt einen Speicherplatz dar.
Projektleiste mit Speicherstände-Bedienfeld
Jeder vom Nutzer durchgeführte Arbeittschritt sorgt dafür, dass ein neuer Speicherstand angelegt und in Form eines farbig gefüllten Quadrates repräsentiert wird. Als Arbeitsschritte gelten: ein Voxel wurde gesetzt oder gelöscht, ein Voxel-Block wurde erzeugt oder das Modell wurde einmal vergrößert.
...
Dieser Stil wurde bei den meisten Bedienelementen aufgegriffen. Alle Icons folgen z.B. der Regel: Jede Fläche muss mit einer Kontur von mindestens 1 Pixel Dicke umgeben sein. Dies sorgt für ein Mockup-ähnliches Erscheinungsbild, welches im Einklang mit den Voxel Editor-Einsatzgebieten "Schnelles Visualisieren" und "Prototyping" steht.
Icon des Voxel-Block-Tools
Eine weitere Richtlinie der Gestaltung war es, möglichst wenig Text einzusetzen. Dadurch soll eine intuitive und eher spielerische Bedienung erreicht werden. Ziel war es, dass ein Nutzer eher durch Ausprobieren, als durch Nachlesen, die Funktion eines Werkzeugs herausfindet. Ein Beispiel dafür ist das Voxel-Block-Werkzeug. Das zugehörige Icon mit der "magischen Maurerkelle" lädt den Nutzer dazu ein, zu ergründen, was sich hinter diesem Werkzeug verbirgt und wie man es einsetzt. Weder die Tooltips noch ein Tutorial oder eine Anleitung geben ihm darüber Auskunft. Allein das Ausprobieren mit Unterstützung der Vorschau-Funktion sollen ihn die Funktionsweise begreifen lassen.
Die Entwicklung des Voxel Editors für das Projekt B nahm ca. 275 Stunden in Anspruch.
...
Der Voxel Editor nutzt HTML5 und CSS3 für die Bedienelemente und das Layout. Die Programmlogik ist in Javascript implementiert. Die 3D-Darstellung der Arbeitsebene und Voxel übernimmt die Grafikbibliothek WebGL, als Programmierschnittstelle wird Three.js verwendet. Die verwendeten Web-Techniken werden derzeit von allen aktuellen Browser unterstützt - jedoch wurde das beste Nutzererlebnis unter Google Chrome erzielt.
 |  |  |  |  |
Interface-Evolution
Die Icons sowie im Vorfeld entstandene Mockups sind mit Inkscape angefertigt worden.
...