Projektziel
Das Ziel der Gruppe Redesign bestand darin, das Design vom Accelerator hinsichtlich des Farbschemas, der Icons, der Raum-Verlassen-Funktion und des Designs anzupassen und umzusetzen. Dabei wurden alle verwendeten Icons nach dem Material Design umgesetzt, um ein einheitliches Ergebnis zu erhalten. Als Inspirations-Grundlage stand das Design System von der Studentin, Hannah Kruck, aus dem vorherigen Semester zur Verfügung.
Projektergebnisse
Im aktuellen Stand wurden folgende Aspekte abgeschlossen:
- Das Farbschema wurden erfolgreich angepasst
- Alle Icons wurden erfolgreich durch Material Design Icons ersetzt
- Beim Verlassen des Raumes erscheint eine Meldung, die frägt, ob der Raum wirklich verlassen werden soll
- Die Buttons auf den Notifications wurden angepasst (eigentliche Aktion steht nun immer rechts im Dialog)
- In der Raumauswahl gibt es die Möglichkeit, die Räume alphabetisch zu sortieren
Umsetzung
Das Repository des Accelerator wurde lokal auf den Rechnern der Gruppenmitglieder:innen geklont und in Visual Studio Code geöffnet. Auf Basis des Masterbranches wurde ein eigener Branch "Redesign2021" erstellt, der als Entwicklunsgbranch für das neue Design gedient hat. Nach jeder Iteration wurde ein Release im GitLab erstellt, der einen lauffähigen Stand repräsentiert.
Material Design
Material Design ist eine sehr berühmte visuelle Designsprache von Google. Da Google zu den meistgenutzen Suchmaschinen gehört, entwickeln Nutzer:innen gegenüber Material-Design-Anwendungen ein Vertrauens- und Sicherheitsgefühl. Sie kennen das Design und schaffen laut William Woodhead eine Verbindung zu Google. Aus diesem Grund wurde Material Design verwendet.
Material Design Icons
Die neuen Icons sind Material Design Icons und stammen aus folgenden Webseiten:
Accelerator Logo
Die Icons von Material Design entsprechen einem geometrischen Design, daher wurde die Schattierung vom Accelerator Logo entfernt, damit das Logo auch zum neuen Redesign passt.
Accelerator vorher
Accelerator nachher
Material Design Dialoge
Im Accelerator gibt es zwei Dialoge, die angepasst wurden. Nach Material Design müssen die Aktionen auf einem Dialog klar sein und zum Kontext passen. Zudem wird nach Material Design die eigentliche Aktion im rechten Button und die nebenläufige Aktion im linken Button dargestellt. Daher wurde auf den Dialogen der Cancel-Button nach links verschoben und die eigentliche Aktion nach rechts wie auf folgenden Bildern zu sehen ist:
Dialog "Direct connect!"
Dialog "Leave Room?"
Typographie
Die verwendete Schriftart für dieses Projekt war hauptsächlich Roboto, da es das Default System Font vom Material Design ist. Für die Überschriften "Accelerator", "Choose Room" und "Welcome to the Accelerator!" wurde die Schriftart Staatliches verwendet, um die Hauptüberschriften der drei Seiten von den restlichen Schriften abgrenzen zu können.
Farbschema
Das Farbschema des Accelerator war veraltet und sollte durch eine neue Farbgestaltung optimiert werden. Farben lösen bestimmte Gefühle bei Menschen aus und haben unterschiedliche Wirkungen auf diese. Aufgrund dieser Hypothese wurden die Wirkungen von Farben untersucht. Aus der Untersuchung ergab sich, dass sich die blaue Farbe für Businessseiten gut eignet. Der Grund dafür liegt darin, dass die blaue Farbe durch ihren kühlen Effekt Transparenz und Kontinuität ausstrahlt. Sie wirkt sachlich und vertrauensvoll und wird von vielen größeren Unternehmen verwendet. Zudem wird diese Farbe öfters mit Professionalität und Intelligenz in Verbindung gesetzt, was in diesem Fall passend ist. Bei der Optimierung des Farbschemas wurden dunklere Farbtöne gewählt, da sie einen höheren Grad an Konzentration übermitteln. Die Farben Weiß und Grau wurden verwendet, um in die blaue Farbe etwas Neutralität einzubauen. Zudem ist weiß eine beliebte Hintergrundfarbe auf Webseiten. Das verwendete Farbschema ist aus der folgenden Abbildung zu entnehmen:
Die Farbpalette wurde auf der coolors Seite zusammengestellt.
Die einzelnen Farben aus der Farbpalette wurden für bestimmte Elemente verwendet. Aus der folgenden Tabelle ist ihr Verwendungszweck zu entnehmen:
Barrierefreiheit
Die Barrierefreiheit wurde anhand des Barrierefreiheitsinspektor des Browsers Firefox überprüft. Für die Verwendung wurde zuerst unter den DevTools der Barrierefreiheitsinspektor eingeschaltet. Anhand vom Barrierefreiheitsinspektor konnten die einzelnen Elemente auf der Webseite ausgewählt werden und auf Barrierefreiheit geprüft werden.
Im folgenden GIF wird dieser Prozess beispielhaft an einigen Elementen dargestellt:
In diesem Beispiel wird bei den Elementen die Konformitätsstufe AAA angezeigt, welches eine sehr gute Zugänglichkeit der Webseite belegt.
Ergebnisse der Umsetzung
Im Folgenden werden die Umsetzungsergebnisse des Projektes anhand von Gifs demonstriert.
Startseite
Die Startseite ist die erste Seite, die nach dem Öffnen des Accelerator erscheint. Nutzer:innen können hier den Namen eingeben und beim Anklicken des Schloss-Buttons öffnet sich die Seite für die Raumauswahl.
Raumauswahl
In der Raumauswahl können Räume ausgewählt werden, die betretet werden möchten. Unter der Überschrift haben Nutzer:innen die Möglichkeit, das Media Setup einzustellen. In der Raumübersicht können die Anzahl der Räume und die Anzahl der Teilnehmer:innen eingesehen werden oder ein Raum hinzugefügt werden. Die Erstellung eines Raumes ist mit oder ohne Passwort möglich. Alle klickbaren Icons und Buttons wurden hierbei blau und alle nicht klickbaren Icons grau dargestellt.
Raumauswahl - Sortierfunktion
In der Raumauswahl gibt es zusätzlich die Funktion, die bestehenden Räume alphabetisch von A-Z zu sortieren, in dem der Sortierbutton (AZ-Button) unter Room Overview angeklickt wird. Beim Hinzufügen eines neuen Raumes wird dieser Raum zufällig angeordnet. Um den neuen Raum ebenfalls in der Liste zu sortieren, muss der Button erneut angeklickt werden.
Raumansicht - Untere Buttons
Beim Betreten eines Raumes öffnet sich die Raumansicht. Im unteren Menü wurden die Buttons den Material Design Icons angepasst. Es gibt ein Icon für ein eingeschaltetes Mikrofon und für ein ausgeschaltetes Mikrofon. Das Horn wurde somit durch das Mikrofon ersetzt. Der Grund hierfür war, dass die anderen Tools wie Zoom oder Microsoft Teams die Ein- und Ausschalt-funktion anbieten und Nutzer:innen generell an diese Zeichen gewohnter sind als an das Horn. Die klatschenden Hände wurden ersetzt durch ein Feier-Icon.
Raumansicht - Moderationsansicht
In der Moderationsansicht sind ebenfalls alle Icons an die Material Design Icons angelehnt. Die Farben in den verschiedenen Folien, beim Drücken der Buttons sind ebenfalls nach dem Farbschema angepasst.
Raumansicht - Handheben
Wenn jemand die Hand hebt, wird die neue Matierial Design Icon Hand gezeigt.
Raumansicht - Whiteboard und Draggables
Im Whiteboard ist es möglich mit verschiedenen Elementen auf das Whiteboard etwas zu platzieren. Die im Whiteboard getätigten Änderungen werden unten rechts in der Cloud angezeigt. Die Anzeige ist in angepasster blauer Schrift.