|
|
Projektziel |
|
# Projektziel
|
|
\ No newline at end of file |
|
|
|
|
|
Das Ziel des Projekts war es, Usability Probleme zu identifizieren und diese zu verbessern. Ein weiteres Ziel war die modernere Neugestaltung und damit einhergehend ein Design System.
|
|
|
|
|
|
|
|
Hypothesen zu der aktuellen Gestaltung beziehen sich vor Allem auf wenig intuitive Icongestaltung bzw. Iconauswahl und die überwältigende Funktionalität bei der ersten Nutzung.
|
|
|
|
|
|
|
|
Die zentrale Leitfrage für eine Lösungsorientierte Umsetzung des Projektes: Wie können wir den Accelerator moderner und intuitiver gestalten?
|
|
|
|
|
|
|
|
### Prototyp
|
|
|
|
|
|
|
|
Die Erstellung des Prototyps erfolgte mithilfe von Adobe XD. Der Prototyp ist zwischen Medium- und Highfidelity einzuordnen. Er enthält ausgearbeitete Inhalte und eine ausgearbeitete Gestaltung, interagiert jedoch nicht genau wie ein laufendes System und die Animationen sind nicht vorhanden. Für das Ziel die Usability Probleme aufzudecken war der Prototyp jedoch ausreichend und konnte aufgrund der Erkenntnisse des Remote A/B Usability Tests und des AttrakDiff Fragebogens iterativ verbessert werden.
|
|
|
|
|
|
|
|
Der Prototyp und die Quelldatei der Komponenten der Material Guidelines ist im [BSCW Ordner des Projektes](https://bscwserv.reutlingen-university.de/bscw/bscw.cgi/d18308290/Kollaborative%20Systeme.zip) zu erreichen.
|
|
|
|
|
|
|
|
### Zeroheight Design System
|
|
|
|
|
|
|
|
Eine Beschreibung der Komponenten mit der Möglichkeit Elemente zu inspizieren ist unter dem [Zeroheight Projekt](https://zeroheight.com/564619c89/p/59755c-accelerator-redesign) des Accelerator Redesigns zu finden.
|
|
|
|
Zeroheight ist ein Online Tool um Design Systeme zu erstellen und bietet die Möglichkeit Komponenten aus Adobe XD heraus mit einem Plugin einzubinden um die Entwicklung zu vereinfachen. Das Tool bietet eine Vielzahl an Möglichkeiten ein Design System für die Entwicklung zu erstellen.
|
|
|
|
|
|
|
|
# Redesign Tour
|
|
|
|
|
|
|
|
### Start und Onboarding
|
|
|
|
|
|
|
|
Bei der ersten Anmeldung im Accelerator muss der Nutzer seinen Namen angeben und kann optional ein Profilbild hochladen. Außerdem kann er hier die Zeichensprache für Gehörlose durch einen 3D Avatar aktivieren.
|
|
|
|
Raumauswahl
|
|
|
|
|
|
|
|
Die Raumwahl kann entweder über die Liste oder die Kachelansicht erfolgen. Während des Hoverns über einen Raum wird, wenn vorhanden, ein Passwort Textfeld angezeigt und es besteht die Möglichkeit einen Raum "anzupinnen". Dadurch werden für die Nutzenden wichtige Räume immer an erster Stelle in der Liste angezeigt. Ist kein Passwortschutz vorhanden kann der Raum durch den grünen Button betreten werden.
|
|
|
|
|
|
|
|
Über die Suche kann ein Raumname eingegeben werden, um in einer großen Liste schneller zum gewünschten Raum zu gelangen.
|
|
|
|
|
|
|
|
Ein neuer Raum kann über den "Create" Button erstellt werden, hier kann der Ersteller des Raums ein passendes Titelbild wählen, das in der Kachelansicht angezeigt wird.
|
|
|
|
Audio & Videotest
|
|
|
|
|
|
|
|
Bei der ersten Anmeldung im Accelerator wird ein Audio und Videotest angeboten. Hierbei können die Ein- und Ausgabegeräte gewählt und getestet werden. Über die Einstellungen (rechts oben) in der Raumwahl kann dieser Test wiederholt werden.
|
|
|
|
Onboarding
|
|
|
|
|
|
|
|
Bei der ersten Verwendung des Accelerators werden Hilfestellungen zu den Funktionalitäten gegeben. Dieses Onboarding kann auch in den persönlichen Einstellungen wieder aufgerufen werden.
|
|
|
|
|
|
|
|
### Nachrichten, Dateien & Notizen
|
|
|
|
#### Nachrichten (Chat)
|
|
|
|
|
|
|
|
Im Chat können Nachrichten mit den anderen Teilnehmern ausgetauscht werden. Er ist über das Menü rechts im Layout über die Tabs zu erreichen und standardmäßig ausgewählt.
|
|
|
|
|
|
|
|
#### Dateien (Files)
|
|
|
|
|
|
|
|
Über die Tabs lassen sich die Dateien erreichen die für alle Teilnehmer im Raum zu sehen sind. Diese können per klick auf den Dateinamen im Browser angesehen und dort heruntergeladen werden. Eine neue Datei kann über den Floating Action Button ausgewählt werden. Bevorzugte Dateiformate werden im Onboarding genannt.
|
|
|
|
|
|
|
|
#### Notizen (Notes)
|
|
|
|
|
|
|
|
Die Notizen können in das große Textfeld (welches sich über den ganzen Bereich rechts erstreckt) eingegeben werden und anschließend in den Chat als Nachricht gesendet werden, in die Dateien des Raums hochgeladen werden oder als Textdatei lokal gespeichert werden.
|
|
|
|
|
|
|
|
### Moderation & Teilnehmer
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Eine teilnehmende Person kann die Moderationsbühne betreten indem sie ihren "Avatar" per Drag & Drop auf die Bühne setzt. Alternativ lässt sich die Moderation auch über den Button neben dem Moderationspult erreichen.
|
|
|
|
|
|
|
|
Als Moderator*in hat man die Möglichkeit, Inhalte wie Präsentationen, Etherpad, 3D Umgebung, Bildschirmfreigabe usw. mit den anderen Teilnehmenden zu teilen.
|
|
|
|
|
|
|
|
### Teilnehmer, Status und Reaktionen
|
|
|
|
|
|
|
|
In der Teilnehmerliste werden die Teilnehmenden samt Profilbild und Namen angezeigt. Die Farbe des Rings um das Profilbild herum wird in den verschiedenen Dragabbles ebenfalls angezeigt. Zudem sind hier die Status zu gehobener Hand, Daumen hoch/runter, aktivierter Kamera, "Pause brauchen" (oder Kaffeepause) oder aktiviertem Mikrofon zu sehen. Im Mikrofon wird durch die Animation mit der Farbe verdeutlicht wenn diese Person spricht. Spricht der Moderator erscheint der blaue Schein um das Bild herum angezeigt.
|
|
|
|
|
|
|
|
Die Reaktionen Lachen und Beifall klatschen werden als Animationen direkt über dem angezeigten Inhalt angezeigt.
|
|
|
|
|
|
|
|
Beim Daumen hoch und runter geben wird eine Übersicht gegeben, wieviele Daumen hoch oder runter von den Teilnehmenden gegeben wurden.
|
|
|
|
|
|
|
|
Die gesamten Reaktionen werden über das Panel unten in der Mitte erreicht. Es kann flexibel verschoben werden und werden automatisch ausgeblendet wenn längere Zeit keine Aktionen (Mausbewegungen) getätigt werden.
|
|
|
|
|
|
|
|
### Einstellungen
|
|
|
|
|
|
|
|
Die Einstellungen zu Profilbild, Farbe, Zeichensprache und Hilfe (kleines Fragezeichen das zum Onboarding führt) lassen sich über die Teilnehmer erreichen indem über das eigene Listenelement gehovert wird.
|
|
|
|
|
|
|
|
### Draggables & Benachrichtigungen
|
|
|
|
|
|
|
|
Die Draggables können von einem/einer Moderator*in für alle Teilnehmer eines Raumes aktiviert werden. Alle Draggables die ein Nutzer verwendet enthalten seine Farbe.
|
|
|
|
|
|
|
|
#### Benachrichtigung
|
|
|
|
|
|
|
|
Über die Pfeil-Togglebuttons können die Bereiche der Dateien, Nachrichten und Notizen rechts und Teilnehmerliste links ausgeblendet werden. Um die Nachrichten aus dem Chat mitzubekommen, wird der/die Nutzer*in über Benachrichtigungen (Notifications) informiert.
|
|
|
|
|
|
|
|
### Gruppen
|
|
|
|
|
|
|
|
Als neue Funktion im Rahmen des Redesigns wurden einige Überlegungen zu Gruppenräumen gemacht.
|
|
|
|
|
|
|
|
Erstellt ein/e Moderator*in Gruppenräume so kann er dies tun ohne dass die Gruppeneinteilungen für die restlichen Teilnehmer sichtbar sind. Er kann die Gruppeneinteilung sichtbar machen, sobald er bereit ist (Auge in der Moderatorenleiste). Die anderen Teilnehmenden sehen den Empty State in der Animation unten.
|
|
|
|
|
|
|
|
Über den Floating Action Button kann der/die Moderator*in eine neue Gruppe erstellen. Ein/e Moderator*in kann die Teilnehmenden zufällig in die Gruppenräume aufteilen lassen (Würfel in der Moderatorenleiste) oder selbst die Nutzer über den Button "Add User" den Gruppen zuordnen oder die Avatare per Drag & Drop in die Gruppen ziehen. Außerdem kann er die Gruppen den Teilnehmenden sichtbar machen wodurch sie sich selbstständig in Gruppen aufteilen können.
|
|
|
|
|
|
|
|
Ist die Gruppenaufteilung abgeschlossen so können alle Teilnehmenden ihre eigene und die Zuteilung der anderen in der Teilnehmerliste sehen. Denkbar wäre hier auch eine Sortierung in der Teilnehmerliste nach Gruppenangehörigkeit.
|
|
|
|
|
|
|
|
Für die Gruppen können Titel und eine kurze Beschreibung (z.B. über die zu erledigenden Aufgaben) über das Edit Symbol einer Gruppe eingestellt werden.
|
|
|
|
|
|
|
|
Eine Gruppe kann auch als Liste angezeigt werden, falls die Teilnehmeranzahl zu groß ist und die standardmäßige Anzeige mit Avataren zu Unübersichtlichkeit führt.
|
|
|
|
|
|
|
|
Als Zugeordnete*r wird die eigene Gruppe im Vergleich zu den anderen Gruppen hervorgehoben und sie kann in einer großen Ansicht angesehen werden. Dort hat jede/r Teilnehmende die Möglichkeit (Moderator-)Inhalte zu aktivieren um als Gruppe zusammenzuarbeiten.
|
|
|
|
|
|
|
|
### Raum verlassen
|
|
|
|
|
|
|
|
Ein Raum kann über den roten Floating Action Button links unten verlassen werden. Bevor ein/e Teilnehmer*in einen Raum verlassen kann muss er dies erst in einem Dialog bestätigen um den Raum nicht ausversehen zu verlassen.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# Design System
|
|
|
|
Das Design System soll dem Accelerator ein neues Look & Feel geben und Usability Probleme beheben. Die Evaluierung dieses Redesigns wurde durch Nutzertests durchgeführt um die Probleme zu identifizieren und in mehreren Iterationen zu verbessern.
|
|
|
|
|
|
|
|
Das Design System basiert auf den Grundlagen und Richtlinien der [Material Design](https://material.io/) Guidelines auf dem Stand vom Januar 2021. |
|
|
|
\ No newline at end of file |
