|
|
|
# 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](https://www.google.com/fonts/specimen/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](https://www.google.com/fonts/specimen/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](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. |
|
|
\ No newline at end of file |
