UX/UI für ein Open World KI Webtool

Ein Projekt über ein KI-basiertes Webtool, UX/ UI Design von Jan Gemeinhardt
Abstract
Im Rahmen eines mehrmonatigen Forschungsprojekts wurde eine 'Open-World'-Benutzeroberfläche entworfen und programmiert, die mithilfe künstlicher Intelligenz Nutzern verwandte Themen zu bereits vorhandenen Knoten im Arbeitsbereich vorschlägt. Als User Interface Designer war es  meine Aufgabe, das Interface des Webclients mit einem modernen Look auszustatten und auch die Bedürfnisse von Benutzern einzubeziehen, sowie Ideen zu möglichen Features zu entwickeln.
Projektverlauf
In der engen Zusammenarbeit mit den Entwicklern des Teams konnte eine moderne Oberfläche geschaffen werden die relevante Features und die Bedürfnisse der Zielgruppe auf ansprechende Weise vertreten konnte.
Tools/ Methoden
Figma, Adobe XD, HTML/CSS, React.js
Nutzeranalysen, Wireframing, Prototyping
Zeitraum
09.2022 - 02.2023

Rolle im Projekt

Als UX/UI-Designer war ich verantwortlich für:

1. Analysephase

Die Analysephase war der erste Schritt im Projekt, um eine nutzerzentrierte Gestaltung zu gewährleisten, indem die Bedürfnisse, Herausforderungen und Ziele der Zielgruppe untersucht wurden.

Personas

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, habe ich 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.

Empathy Map/ Pain & Gain Points

Eine Empathy Map wurde erstellt, um die Gedanken, Gefühle, Aussagen und Handlungen der Zielgruppe zu erfassen, wodurch Pain Points und Potenziale für Verbesserungen identifiziert wurden.

2. Konzeption/ Wireframes

Für die Wireframes des Webtools wurden zunächst verschiedene Layouts und Interaktionskonzepte entwickelt: ein Node-Artboard mit Floating-Navigationsbar und auftauchenden Nodes, eine Variante mit unterer Toolbar zum Hinzufügen von Nodes, eine Kombination aus rechter Sidebar und Floating-Navigationsbar sowie eine Splitscreen-Ansicht mit zwei nebeneinanderliegenden Boards.

Die Ansätze veranschaulichten die Optionen für Navigation und Interaktion für das Webtool.

3. Design und Prototyping

Nach den Wireframes startete der Designprozess direkt mit der Erstellung von interaktiven High-Fidelity-Prototypen, bei denen das finale Design und die interaktiven Features unmittelbar umgesetzt wurden.

Die Umsetzung erfolgte iterativ und nutzerzentriert, wobei ein Versionierungsworkflow mit GitLab (Commit, Push, Pull) genutzt wurde, um Änderungen effizient zu tracken, Feedback zeitnah einzuarbeiten und frühere Versionen bei Bedarf wiederherzustellen.

High-Fidelity-Prototypen

Der iterative Workflow ermöglichte es, interaktive Prototypen kontinuierlich zu verfeinern und neue Features flexibel zu integrieren.

Vereinfachter Klick-Prototype, um de Beginn mit Loading Screen, Dashboard und Aufrufen des Artboards zu visualisieren (Desktop wird empfohlen)

Dashboard

Alle Workspaces, Bearbeiter des Workspaces, Schemenhaft wurde als Thumbnail der Arbeitsbereich dargestellt, Tags wurden angezegit, wann zuletzt bearbeitet. Übersicht, Nutzerbereich, Funktion neues Board erstellen, Suchfunktion Nach Boards, Nutzer oben Rechts JG Jan Gemeinhardt bsp. Abmelden Log Out per Dropdown, links war eine sidenav vorgesehen, um weitere Bereiche aufklappen zu können. und noch zue rweiteren. Vorerst war aber fokus auf die Übersicht der Artboards alle zu sehen.

Themensuche und Vorschläge

Das Tool bietet Nutzern eine intuitive Suchfunktion, um gezielt nach Themen zu suchen, die sie erkunden möchten. So können relevante Vorschläge schnell gefunden und direkt zum Workspace hinzugefügt werden.

Visuelle Darstellung von Themen

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.

Erweiterung und Verknüpfung

‍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.

4. Ergebnisse

Die Ergebnisse des Projekts zeigen die nutzerzentrierte Umsetzung der entwickelten Funktionen, und liefern wertvolle Erkenntnisse aus den durchgeführten Tests und Analysen.

UI Design

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.

Konsistentes Farbschema für Professionalität und Benutzerfreundlichkeit.Einsatz der Schriftarten Roboto (Überschriften) und Lato (Fließtext).Material Icons für intuitive Navigation.

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.

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.

 Verwendete Schriftart Roboto als Vorschau, Aa

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.

Node Features

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.

Arten von Nodes

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.

Vorgesehene Features

Die Toolbar erscheint beim Klick auf einen Node und ermöglicht die schnelle Anpassung der Node-Einstellungen: Form, Farbe und das Löschen des Nodes. Die Funktion bietet eine unkomplizierte Verwaltung der Nodes.

Mit der Farbänderungsfunktion können Knoten individuell gestaltet werden. Diese visuelle Anpassung hilft, unterschiedliche Inhalte oder Kategorien klar zu unterscheiden, was die Übersichtlichkeit innerhalb komplexer Arbeitsbereiche erhöht.

Nodes können durch Verbindungslinien miteinander verknüpft werden, um Beziehungen und Zusammenhänge zwischen den Themen aufzuzeigen. Diese Funktion unterstützt die Erstellung von Mindmaps und die strukturierte Darstellung von Informationen.

Die Funktion den Titel der Node per Dropdown auszutauschen, ermöglicht es, den Titel von Nodes schnell anzupassen, um den Kontext des Arbeitsbereichs oder der vorgeschlagenen Nodes zu verändern. So können Nutzer den Inhalt im Arbeitsbereich jederzeit präzisieren und anpassen.

User-Test und Erkenntnisse

Der User-Test wurde mit 10 internationalen Studierenden aus dem Bereich Hypertext in den USA (virtuell) durchgeführt, um die Benutzerfreundlichkeit und Funktionalität des INTR/HT Tools zu evaluieren.

Der Test bestand aus einem Haupttask mit einer Zeitbegrenzung von 10 Minuten, gefolgt von einer Umfrage (max. 10 Minuten).

Ziel war es, die Nutzererfahrung beim Anlegen eines anonymen Accounts, der Erstellung eines Arbeitsbereichs und der Organisation von Informationen in einer kollaborativen Umgebung zu analysieren.

Rahmenbedingungen

Positive Aspekte

Herausforderungen

Verbesserungsvorschläge

Fazit

Das Tool zeigt Potenzial, benötigt aber Optimierungen in Usability, Einführungsmaterialien und KI-Funktionalität. Eine Guided Tour wurde im Anschluss integriert, die mobile Optimierung ist geplant, bleibt jedoch sekundär, da der Fokus auf der Desktop-Nutzung liegt.

KI und Datenbanken werden weiter verbessert, um die Nutzererfahrung zu steigern.

Demovideo

Dokumentationsvideo des Projekts, um die Features in Aktion zu erleben

5. Fazit und Erkenntnisse

Das Projekt zeigte mir die Bedeutung eines nutzerzentrierten Ansatzes und die enge Zusammenarbeit mit Entwicklern. Die intuitive Oberfläche erleichtert die Organisation durch Knoten und Verknüpfungen, während die KI-Integration individuelle Vorschläge liefert.

Durch den Einsatz von GitLab und iterativer Versionierung konnte ich wertvolle Erfahrungen in agiler Teamarbeit und technischer Umsetzung sammeln.

Ergebnisse aus dem Test

Erkenntnisse

Lass uns starten!

Hast du eine Idee oder ein Projekt, das umgesetzt werden soll? Ich freue mich darauf, von dir zu hören.

Für Anliegen und Fragen stehe ich gerne unter design@jangemeinhardt.de zur Verfügung.

Head Shot Jan Gemeinhardt, Webdesigner und Founder of DESIGNTD

Dein Ansprechpartner:
Jan Gemeinhardt

Dankeschön! Deine Nachricht wurde gesendet.
Du bekommst innerhalb 24h eine Antwort!
Das eingegebene Feld ist ungültig. Bitte überprüfe deine Eingabe und versuche es erneut.