Um die Benutzeroberfläche für das Brainstorming-Tool zu entwickeln, die auf internationale Studierende zugeschnitten sind und sich intensiv mit wissenschaftlichen Texten auseinandersetzen möchten, haben wir drei detaillierte Personas erstellt. Jede internationale Persona repräsentiert unterschiedliche akademische Disziplinen und einzigartige Herausforderungen, was uns hilft, die verschiedenen Bedürfnisse und Ziele der Benutzer besser zu verstehen.
Persona: Masters Student
Persona: Master Mechanical Engineer
Persona: AI & Computer Science
Um den Ablauf der Nutzer besser verstehen zu können, wurde zu Beginn ein User Flow erstellt. Nach einem Ladebildschirm öffnen die Nutzer typischerweise eine Dashboard-Übersicht und erstellen entweder ein neues Projekt oder bearbeiten ein zuvor erstelltes Projekt. Danach beginnen sie mit der Eingabe, indem sie nach einem Thema, einem Paper oder einem Autor suchen und diese dem Workspace hinzufügen. Anschließend sollen durch maschinelles Lernen neue Vorschläge geladen werden, die den Nutzern verwandte Nodes anzeigen, um sie zu inspirieren.
Webclient User Flow
Der erste Schritt bestand darin, erste Skizzen und Wireframes zu erstellen, um die Anordnung der Benutzeroberfläche darzustellen. Die Hauptfrage war, wo die Symbolleiste platziert werden sollte und wie die Informationen darüber, wie neue Vorschlagsknoten zum Arbeitsbereich hinzugefügt werden könnten, dargestellt werden sollten. Später wurden immer mehr Funktionen eingeführt.
With toolbar suggestions
Sidebar with suggestions
Dynamic Suggestion
Das High-Fidelity-Prototyping bot zunächst eine realistische und detaillierte Darstellung der Benutzeroberfläche, bevor wir zügig zur Entwicklung des Tools in Code übergingen und verschiedene Varianten dort testeten:
Schritt 1: Das Tool ermöglicht es den Nutzern, mithilfe einer intuitiven Suchfunktion gezielt nach Themen zu suchen, die sie erkunden möchten. Dies bietet ihnen die Möglichkeit, relevante Vorschläge schnell zu finden und diese zum Workspace hinzuzufügen.
Step 1: Searching for a topic
Schritt 2: Sobald Nutzer ein Thema ausgewählt haben, können sie es als Knoten direkt in den Arbeitsbereich hinzufügen. Diese Funktion ermöglicht eine visuelle Darstellung der aktuellen Ideensammlung.
Step 2: Adding nodes to the workspace
Schritt 3: Um das Verständnis weiter zu vertiefen, können Nutzer sekundäre Knoten hinzufügen, die weitere Aspekte, wie Nutzernamen, Verantwortliche oder andere Workspaces oder detaillierte Informationen zu den Hauptthemen darstellen. Dies fördert eine umfassendere Analyse und Entwicklung von neuen Ideen.
Step 3: Adding secondary nodes
Die UI Guidelines wurden entwickelt, um auf der einen Seite ein ästhetisch ansprechendes Interface zu gestalten, aber auch um die Funktionalität und Benutzerfreundlichkeit des Brainstorming-Tools zu gewährleisten. In enger Zusammenarbeit mit unserem Entwicklungsteam konnte sichergestellt werden, dass die gewählten Design Guidelines auch Raum für zukünftige Funktionen bieten kann.
Typography and Icon Set
Typography:
Für Titel und Überschriften verwenden wir die Schriftart Roboto, die durch ihre klare Lesbarkeit und moderne Ästhetik auf Screens besticht. Für den Fließtext haben wir uns für Lato entschieden, das eine angenehme Lesbarkeit auf verschiedenen Bildschirmgrößen bietet.
Icon Set:
Das Icon-Set basiert auf Material Icons, das eine klare und konsistente visuelle Sprache unterstützt. Diese Icons wurden ausgewählt, um eine intuitive Navigation und eine einfache Erkennbarkeit der Funktionen zu gewährleisten.
Color and Tags Design
Color:
Das Farbschema wurde gewählt, um eine ausgewogene Balance zwischen Professionalität und Benutzerfreundlichkeit zu gewährleisten. Die klare Unterscheidbarkeit der UI-Elemente hilft dabei, eine übersichtliche Arbeitsumgebung zu schaffen.
Tag Design
Die Tags auf den Knoten sind durch abgerundete Ecken gekennzeichnet, die sowohl visuell ansprechend als auch funktional sind. Benutzer können Kategorien leicht zuweisen und identifizieren, indem sie Tags auf die Knoten anwenden. Dies ermöglicht eine effiziente Organisation und eine schnellere Navigation durch den Arbeitsbereich.
Node Design
Primary Nodes:
Diese Nodes werden direkt von Usern hinzugefügt, nachdem sie sie durch die Suchfunktion ausgewählt haben. Sie repräsentieren die Hauptthemen oder Ideen, mit denen die User aktiv arbeiten.
Secondary Nodes:
Suggestion Nodes aus der Knowledge Base werden automatisch vorgeschlagen und ergänzen die Hauptthemen der Benutzer. Diese Nodes bieten zusätzliche Informationen, Kontext oder verwandte Konzepte, die User bei der weiteren Ausarbeitung ihrer Ideen unterstützen.
Feature Nodes:
Die Feature Nodes enthalten spezifische Informationen über jeden Arbeitsbereich, einschließlich des Namens des Arbeitsbereichs und des verantwortlichen Teams oder Benutzers. Diese Nodes helfen bei der Strukturierung und Organisation der gesammelten Informationen innerhalb des Tools.
A video to document all the features of the tool:
Dokumentationsvideo: INTRHT
