Design

Allgemeine Ziele

Klarheit

Das Design hat zum Ziel, das System klar und so wenig ablenkend wie möglich zu gestalten. Der Nutzer soll seine Aufmerksamkeit auf die Präsentation richten können. Dies gilt ebenso für den Moderator, der aber gleichzeitig die Nutzer und deren Bedürfnisse im Blick haben muss.

Einfache Bedienbarkeit/Offensichtlichkeit

Das System soll ermöglichen, in einer möglichst natürlichen Weise miteinander zu kommunizieren. Alle Elemente sollen deshalb klar und kompakt gehalten werden und in ihrer Funktionsweise simpel zu bedienen sein.

Konsistenz

Dieses Ziel betrifft nicht nur die einheitliche Verwendung von Farben, sondern auch das Aussehen und die Funktionsweise von Elementen.

Feedback

Egal, welche Aktion ein Nutzer im System betätigt, er muss stets ein Feedback für diese erhalten. Dies geschieht im Regelfall durch ein optisches Feedback, zur Unterstützung kann zudem auf ein auditives Feedback zurückgegriffen werden.

Beschränkung

Es soll vermieden werden, dass der Nutzer falsche Aktionen durchführen kann. Aus diesem Grund muss er ggf. in seinen Möglichkeiten, wie Eingabe, beschränkt werden.

Grundsätzliche Designentscheidungen

Anzuzeigende Information

Der Nutzer soll stets nur die Information sehen, die er für den Kontext benötigt, um die kognitive Last gering zu halten. Dies spiegelt sich an verschiedenen Punkten des Systems wider.

Nutzer- und Moderatorenansicht

So wird aus diesem Grund zwischen einer Nutzer- und Moderatorenansicht unterschieden. Bei der Moderatorenansicht wird die Nutzeransicht erweitert, die allgemeine Struktur bleibt jedoch erhalten. Die Moderator-Toolbar befindet sich oberhalb der Präsentationsfläche, die Nutzertoolbar unterhalb.

Moderatoransicht

Useransicht

Farben

Die gewählten Farben sollen einerseits Ruhe ausstrahlen und gleichzeitig modern wirken. Die Farbwahl orientiert sich deshalb an dunklen Grautönen, um den Fokus des Nutzer auf die Präsentation zu lenken und nicht zu viele Farbtöne in das System zu bringen. Als Kontrastfarbe dient ein helles Blau, sodass wichtige und aktive akzentuiert werden können. Das Hintergrund besteht aus einem Subtle, welches aus einer Mischung von dunklen Grautönen besteht. Hierzu kommen verschiedene Grauabstufungen, die Kontrastfarbe bildet ein helles Blau.

Farbpalette

Schriften

Schriftart für die Anwendung ist Roboto.

• Heading1: 36 px
• Heading 3: 24 px
• Body: 14px
• Schriftfarbe: #fff und #000
• Für das Logo wird zudem die Google Font Rock Salt eingesetzt.

Logo

Das Logo von Accelerator greift die Idee auf, dass im System viele Menschen an einem Projekt/Thema arbeiten und zusammen zu einem Ergebnis gelangen. Dies wird durch die Puzzle-Stücke repräsentiert, welche ineinander greifen. Die einzelnen Puzzle-Stücke können außerdem als Symbol für den einzelnen Menschen angesehen werden, was durch die Form abgebildet wird, die einem Kopf ähnelt. Die geschwungenen Linien weisen auf einen dynamischen und schnellen Prozess hin. Die verschiedenen Farben spiegeln hierbei die Vielfalt der Menschen wider, die zusammen arbeiten. Der Kreis symbolisiert abschließend den Zusammenhalt und die Iteration der Arbeit.

Design-Entstehung

Folgende Mockups zeigen in Teilen die Entstehung des Designs, wobei hierbei relevante Elemente im Vordergrund stehen. Die Mockups sind in höherer Auflösung und vollständiger Fassung abgelegt. An dieser Stelle wird des Weiteren die grundsätzliche Struktur abgebildet, wie sie in frühen Stadien des Projekts angedacht war. Das Kapitel Aufbau und Komponenten zeigt die Struktur auf, wie sie tatsächlich umgesetzt wurde.

Die Hauptseite besteht aus einer Präsentationsfläche, die sich im Zentrum des Bildschirms befindet, einer Leiste unten, in der sich Chat, Notizen und Dateien befinden und über der die Toolbar sitzt. Auf der linken Seite ist das Userpanel, in welchem die Nutzer und Moderator abgebildet sind.

Die untere Leiste zeigt standardmäßig nur die Chatleiste an. Sind die Notizen oder Dateien aktiviert, teilt sich die Leiste und beide aktiven Elemente werden angezeigt.

Die Moderatoransicht ist komplexer, da dieser über mehr Möglichkeiten verfügt. Die Moderatoren-Tools befinden sich oberhalb der Präsentationsfläche, sofern sie diese betreffen, und im linken Bereich am Moderatorenstuhl, wo die Verwaltung von Dokumenten und gruppenspezifischen Bereichen getätigt wird.

Um zwischen Interaktion umzuschalten, wird ein Flyout-Menü eingesetzt. Standardmäßig ist immer eine Interaktion ausgewählt, bei Klick auf den rechten unteren Rand kann dann zwischen den gleichberechtigten Interaktionsformen gewechselt werden.

Um innerhalb eines Raumes Arbeitsgruppen zu erstellen, erscheint nach Klick auf "+" ein Flyout-Menü, in welchem der Gruppenname, die Anzahl der Mitglieder und die Gruppenmitglieder hinzugefügt werden können.

Mit Erstellen von Gruppen ändert sich die Ansicht für alle Nutzer. Es erscheinen Tabs mit den einzelnen Gruppen, mindestens der eigene Gruppenraum und der Hauptraum. Der Moderator hingegen sieht alle erstellten Gruppen. Durch diese Reiter ist außerdem eine Navigation in die einzelnen Gruppen möglich.

Dokumente können sowohl einzelnen Gruppen als auch dem Hauptraum hinzugefügt werden. Alle Dialoge befinden sich an dem jeweils aktiven Button, um die Klickwege kurz zu halten.

Meldet sich ein Nutzer, erscheint dies nicht in seiner Leiste, stattdessen wird diese Info global oben an die Nutzerleiste angehängt. Der Moderator kann dort reagieren, indem der die Meldung annimmt (und damit das Mikrofon vergibt), oder ablehnt.

In der Gruppenarbeit verfügt jeder Nutzer über das vom Moderator zugeteilte Dokument, einem Gruppen-Whiteboard und einem persönlichen Whiteboard. Während einer Gruppenarbeit unterscheidet sich die angezeigte Information von der Position der Gruppenmitglieder innerhalb der Arbeit. Befinden sie sich alle auf dem gleichen Bereich des Dokuments sind detailliertere Informationen notwendig, als wenn sie auf unterschiedlichen Dokumenten arbeiten.

Der Nutzer kann seine Ansicht während der Gruppenarbeit personalisieren. Es ist also möglich, die Ansicht zu teilen und Texfelder oder Formen von einem Dokument/Bereich zum anderen schieben.