Update Venue authored by Banu Sarikaya's avatar Banu Sarikaya
...@@ -13,12 +13,12 @@ Im Rahmen des Projekts Venue (ehemals "Accelerator") haben wir uns zum Ziel gese ...@@ -13,12 +13,12 @@ Im Rahmen des Projekts Venue (ehemals "Accelerator") haben wir uns zum Ziel gese
| Testing aufsetzen | | | Testing aufsetzen | |
Während dieses Semesters haben wir uns auf die Hauptziele konzentriert, da diese essenziell für die Weiterentwicklung sind. Des Weiteren haben wir im Rahmen der Verbesserungsmaßnahmen verschiedene Bereiche identifiziert, in denen weiteres Optimierungspotential besteht: Während dieses Semesters haben wir uns auf die Hauptziele konzentriert, da diese essenziell für die Weiterentwicklung sind. Des Weiteren haben wir im Rahmen der Verbesserungsmaßnahmen verschiedene Bereiche identifiziert, in denen weiteres Optimierungspotential besteht:
1. **Icons und ihre Interpretation**: Einige Icons, wie beispielsweise das Icon für das Mikrofon, können missverstanden werden. - **Icons und ihre Interpretation**: Einige Icons, wie beispielsweise das Icon für das Mikrofon, können missverstanden werden.
2. **Fehlende Anleitung**: Eine ausführliche Anleitung fehlt, insbesondere für spezifische Funktionen wie die 3D-Objekt-Funktion. - **Fehlende Anleitung**: Eine ausführliche Anleitung fehlt, insbesondere für spezifische Funktionen wie die 3D-Objekt-Funktion.
3. **Moderatorenrechte**: Derzeit kann der Moderator ohne Vorwarnung das Mikrofon eines Teilnehmers einschalten. Dies sollte überdacht werden, da ähnliche Funktionen bei anderen Plattformen wie Teams oder Zoom auch nicht existieren. - **Moderatorenrechte**: Derzeit kann der Moderator ohne Vorwarnung das Mikrofon eines Teilnehmers einschalten. Dies sollte überdacht werden, da ähnliche Funktionen bei anderen Plattformen wie Teams oder Zoom auch nicht existieren.
4. **Mikrofon-Berechtigung**: Nutzer haben oft Probleme mit Mikrofon-Berechtigungen. - **Mikrofon-Berechtigung**: Nutzer haben oft Probleme mit Mikrofon-Berechtigungen.
5. **PowerPoint-Upload**: In einigen Fällen konnte eine PowerPoint-Datei nicht hochgeladen werden, obwohl dies in eigen erstellten Räumen funktioniert. - **PowerPoint-Upload**: In einigen Fällen konnte eine PowerPoint-Datei nicht hochgeladen werden, obwohl dies in eigen erstellten Räumen funktioniert.
7. **Sichtbarkeit von Räumen**: Eigene Räume sollten für andere Nutzer unsichtbar sein, um die Privatsphäre zu gewährleisten. - **Sichtbarkeit von Räumen**: Eigene Räume sollten für andere Nutzer unsichtbar sein, um die Privatsphäre zu gewährleisten.
In dieser Dokumentation geben wir eine Übersicht über unser Vorgehen, dem Aufbau und Design von Venue sowie unsere Vision für die zukünftige Weiterentwicklung. Zudem haben wir uns mit den genannten Herausforderungen und Verbesserungsmöglichkeiten beschäftigt, um die Benutzererfahrung zu optimieren. In dieser Dokumentation geben wir eine Übersicht über unser Vorgehen, dem Aufbau und Design von Venue sowie unsere Vision für die zukünftige Weiterentwicklung. Zudem haben wir uns mit den genannten Herausforderungen und Verbesserungsmöglichkeiten beschäftigt, um die Benutzererfahrung zu optimieren.
...@@ -78,7 +78,7 @@ Wir haben uns bei Venue für ein ansprechendes Dark Mode Farbschema entschieden, ...@@ -78,7 +78,7 @@ Wir haben uns bei Venue für ein ansprechendes Dark Mode Farbschema entschieden,
Unsere Farbpalette umfasst die folgenden Hauptfarben: Unsere Farbpalette umfasst die folgenden Hauptfarben:
### Farbpalette ### Farbpalette
| Element | Farbcode | Beschreibung | Farbbild | | Element | Farbcode | Beschreibung | Bild |
|---------------------|------------|--------------------------------------------------------------------------------------------------|----------| |---------------------|------------|--------------------------------------------------------------------------------------------------|----------|
| Hintergrund | #1E2B31 | Dunkler Hintergrund für hohen Kontrast zu anderen UI-Elementen, verbessert die Lesbarkeit. | ![Hintergrund](link-hintergrund-bild.png) | | Hintergrund | #1E2B31 | Dunkler Hintergrund für hohen Kontrast zu anderen UI-Elementen, verbessert die Lesbarkeit. | ![Hintergrund](link-hintergrund-bild.png) |
| Boxen | #344045 | Farbe für Boxen und Container, klare Abgrenzung der verschiedenen Bereiche. | ![Boxen](link-boxen-bild.png) | | Boxen | #344045 | Farbe für Boxen und Container, klare Abgrenzung der verschiedenen Bereiche. | ![Boxen](link-boxen-bild.png) |
...@@ -111,7 +111,7 @@ Mit diesem Farbschema wird eine benutzerfreundliche und visuell ansprechende Obe ...@@ -111,7 +111,7 @@ Mit diesem Farbschema wird eine benutzerfreundliche und visuell ansprechende Obe
### UI-Komponenten ### UI-Komponenten
Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen und Designs, die zur Optimierung der Benutzererfahrung beitragen. Nachfolgend werden die genutzten UI-Komponenten vorgestellt: Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen und Designs, die zur Optimierung der Benutzererfahrung beitragen. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
| Komponente | Beschreibung | Bild (Placeholder) | | Komponente | Beschreibung | Bild |
|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------| |-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------|
| **Alert** | Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. | ![Alert](link-alert-bild.png) | | **Alert** | Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. | ![Alert](link-alert-bild.png) |
| **Avatar** | Avatare werden genutzt, um Benutzerbilder darzustellen. | ![Avatar](link-avatar-bild.png) | | **Avatar** | Avatare werden genutzt, um Benutzerbilder darzustellen. | ![Avatar](link-avatar-bild.png) |
...@@ -197,6 +197,76 @@ Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprech ...@@ -197,6 +197,76 @@ Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprech
Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und trugen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten. Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und trugen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten.
### Icons ### Icons
Icons spielen eine wichtige Rolle in unserem Design, da sie zur visuellen Darstellung und Benutzerführung beitragen. Wir haben eine Vielzahl von Icons aus der MUI-Icon-Bibliothek verwendet, um verschiedene Funktionen/ Aktionen in Venue zu repräsentieren. Hier ist eine Auflistung der Icons, die wir eingesetzt haben:
| Icon | Beschreibung | Bild (Placeholder) |
|-------------------------|----------------------------------------------------|---------------------|
| AddAPhotoIcon | Symbol für das Hinzufügen von Fotos oder Bildern. | ![AddAPhotoIcon](Bildpfad) |
| AddCircleIcon | Symbol für das Hinzufügen von Inhalten oder Elementen. | ![AddCircleIcon](Bildpfad) |
| BackHandIcon | Symbole für Rückwärtsnavigation oder Gebärdensprache. | ![BackHandIcon](Bildpfad) |
| CheckCircleIcon | Symbol für Bestätigung oder Erfolg. | ![CheckCircleIcon](Bildpfad) |
| ChevronLeftIcon | Symbol für die Navigation nach links. | ![ChevronLeftIcon](Bildpfad) |
| ChevronRightIcon | Symbol für die Navigation nach rechts. | ![ChevronRightIcon](Bildpfad) |
| DeleteIcon | Symbolisiert die Löschfunktion. | ![DeleteIcon](Bildpfad) |
| DescriptionIcon | Wird für Dokumente oder Beschreibungen verwendet. | ![DescriptionIcon](Bildpfad) |
| ErrorOutlineIcon | Symbol für Fehler oder Probleme. | ![ErrorOutlineIcon](Bildpfad) |
| FirstPageIcon | Symbol für die Navigation zur ersten Seite. | ![FirstPageIcon](Bildpfad) |
| GroupsIcon | Symbol für Gruppen oder Teamfunktionen. | ![GroupsIcon](Bildpfad) |
| HomeIcon | Symbolisiert die Startseite oder den Home-Bereich.| ![HomeIcon](Bildpfad) |
| LoginIcon | Symbolisiert den Anmeldevorgang. | ![LoginIcon](Bildpfad) |
| LocalCafeIcon | Symbol für Café oder entspannte Umgebung. | ![LocalCafeIcon](Bildpfad) |
| ManageAccountsIcon | Symbolisiert die Verwaltung von Benutzerkonten. | ![ManageAccountsIcon](Bildpfad) |
| MicNoneIcon | Symbol für Mikrofon aus. | ![MicNoneIcon](Bildpfad) |
| MicOffIcon | Symbol für Mikrofon stumm. | ![MicOffIcon](Bildpfad) |
| NearMeIcon | Zeigt eine Funktion in der Nähe an. | ![NearMeIcon](Bildpfad) |
| NoteAltIcon | Steht für Notizen oder Kommentare. | ![NoteAltIcon](Bildpfad) |
| NotificationsActiveIcon | Symbolisiert aktive Benachrichtigungen. | ![NotificationsActiveIcon](Bildpfad) |
| PersonIcon | Symbolisiert einen Benutzer oder ein Benutzerkonto. | ![PersonIcon](Bildpfad) |
| PresentToAllIcon | Zeigt die Funktion für die Bildschirmpräsentation an. | ![PresentToAllIcon](Bildpfad) |
| SaveIcon | Symbolisiert die Speicherfunktion. | ![SaveIcon](Bildpfad) |
| ScreenshotMonitorIcon | Symbolisiert die Funktion für Bildschirmfotos oder Überwachung. | ![ScreenshotMonitorIcon](Bildpfad) |
| SendIcon | Symbolisiert den Sendevorgang. | ![SendIcon](Bildpfad) |
| SentimentSatisfiedAltIcon | Symbol für positive Stimmung oder Zufriedenheit.| ![SentimentSatisfiedAltIcon](Bildpfad) |
| SignLanguageIcon | Symbole für Gebärdensprache. | ![SignLanguageIcon](Bildpfad) |
| ThumbDownAltIcon | Symbol für negative Bewertungen. | ![ThumbDownAltIcon](Bildpfad) |
| ThumbUpIcon | Symbol für positive Bewertungen. | ![ThumbUpIcon](Bildpfad) |
| UnfoldMoreIcon | Symbol für "Mehr anzeigen" oder "Aufklappen". | ![UnfoldMoreIcon](Bildpfad) |
| ViewInArIcon | Ermöglicht die Ansicht in Augmented Reality. | ![ViewInArIcon](Bildpfad) |
| VideoCamIcon | Symbol für Video an. | ![VideoCamIcon](Bildpfad) |
| VideocamOffIcon | Symbol für Video aus. | ![VideocamOffIcon](Bildpfad) |
| VolumeUpIcon | Symbol für Lautstärke erhöhen. | ![VolumeUpIcon](Bildpfad) |
| VolumeOffIcon | Symbol für stummschalten. | ![VolumeOffIcon](Bildpfad) |
- **AddAPhotoIcon**: Symbol für das Hinzufügen von Fotos oder Bildern.
- **AddCircleIcon**: Symbol für das Hinzufügen von Inhalten oder Elementen.
- **BackHandIcon**: Symbole für Rückwärtsnavigation oder Gebärdensprache.
- **CheckCircleIcon**: Symbol für Bestätigung oder Erfolg.
- **ChevronLeftIcon / ChevronRightIcon**: Symbole für die Navigation nach links bzw. rechts.
- **DeleteIcon**: Symbolisiert die Löschfunktion.
- **DescriptionIcon**: Wird für Dokumente oder Beschreibungen verwendet.
- **ErrorOutlineIcon**: Symbol für Fehler oder Probleme.
- **FirstPageIcon / LastPageIcon**: Symbole für die Navigation zur ersten bzw. letzten Seite.
- **GroupsIcon**: Symbol für Gruppen oder Teamfunktionen.
- **HomeIcon**: Symbolisiert die Startseite oder den Home-Bereich.
- **LoginIcon**: Symbolisiert den Anmeldevorgang.
- **LocalCafeIcon**: Symbol für Café oder entspannte Umgebung.
- **ManageAccountsIcon**: Symbolisiert die Verwaltung von Benutzerkonten.
- **MicNoneIcon / MicOffIcon**: Symbole für Mikrofon aus bzw. stumm.
- **NearMeIcon**: Zeigt eine Funktion in der Nähe an.
- **NoteAltIcon**: Steht für Notizen oder Kommentare.
- **NotificationsActiveIcon**: Symbolisiert aktive Benachrichtigungen.
- **PersonIcon**: Symbolisiert einen Benutzer oder ein Benutzerkonto.
- **PresentToAllIcon**: Zeigt die Funktion für die Bildschirmpräsentation an.
- **SaveIcon**: Symbolisiert die Speicherfunktion oder das Speichern von Daten.
- **ScreenshotMonitorIcon**: Symbolisiert die Funktion für Bildschirmfotos oder Überwachung.
- **SendIcon**: Symbolisiert den Sendevorgang.
- **SentimentSatisfiedAltIcon**: Symbol für positive Stimmung oder Zufriedenheit.
- **SignLanguageIcon**: Symbole für Gebärdensprache.
- **ThumbDownAltIcon / ThumbUpIcon**: Symbole für negative bzw. positive Bewertungen.
- **UnfoldMoreIcon**: Symbol für "Mehr anzeigen" oder "Aufklappen".
- **ViewInArIcon**: Ermöglicht die Ansicht in Augmented Reality.
- **VideoCamIcon / VideocamOffIcon**: Symbole für Video an bzw. aus.
- **VolumeUpIcon / VolumeOffIcon**: Symbole für Lautstärke erhöhen bzw. stumm.
... ...
......