3D-GUIde Library

Ein einfach verständliches Portal um Entwickler und Product Owner beim Erstellen intuitiver 3D-Software zu unterstützen. Mit gezielter Ausrichtung auf den deutschen Mittelstand.

Viele kleine und mittelständische Unternehmen (KMUs) entwickeln eigene 3D-Software: Sei es, weil die gängigen Tools (wie CAD) nicht spezifisch genug für den Einsatz in der Industrie sind, oder aber als SaaS-Ansatz in den Bereichen Virtual & Augmented Reality (AR/VR), in denen sich derzeit viele neue Märkte auftun.

Im Rahmen der Initiative "Mittelstand digital" wurde das Ziel gesetzt, es diesen Unternehmen zu erleichtern ihre Software intuitiv nutzbar zu machen. Hierzu wurden, durch Zusammenarbeit mit einigen KMUs, Musterlösungen & Potentiale (Pattern) für 3D-Software entwickelt. Unser fünfköpfiges Studententeam wurde damit beauftragt einen Weg zu finden diese Pattern auch außerhab von Workshops und individuellen Beratungsprozessen für eine breite Masse an Unternehmen und Entwicklern zugänglich zu machen.

Ziel war es die Entwickler & Product Owner in ihrem Arbeitsprozess zu unterstützen und ihnen mögliche Musterlösungen, Potentiale und gängige Problemstellungen für intuitive 3D-Software an die Hand zu geben.

Entstanden ist ein interaktives, responsives Toolkit, das die Unternehmen und ihre Mitarbeiter gezielt abholt, für die Themen Usability und UX sensibilisiert und für jeden Schritt der Entwicklungsphase Hilfestellungen anbietet.

Intuitive 3D-Software – für alle

Da kleine und mittelständische Unternehmen oft keine Resourcen & Know-How im Bereich Interfacegestaltung sowie Konzeption, Usability & UX haben, mussten wir lernen, das hier häufig Entwickler eine Doppelrolle übernehmen. So sind sie häufig auch für konzeptionelle Entscheidungen und die Ausgestaltung von Features zuständig.

Aus diesem Grund haben wir fünf Interviews mit Softwareentwicklern aus verschiedenen Startups, Großkonzernen oder Studium geführt, um herauszufinden welche Erwartungen sie an ein solches Portal hätten.

Anhand konkreter Beispiele aus dem Alltag der Entwickler konnten wir so in Erfahrung bringen, wie hoch ihr konzeptioneller Anteil im Entwicklungsprozess ist, woher sie die Inspiration für bestimmte Funktionen nehmen und in welcher Projektphase sie nach Hilfestellung suchen. Hier spielten in erster Linie “Benchmarking”, sowie eigene Erfahrungen, eine große Rolle.

Da wird oft "Cherrypicking" betrieben: Man schaut wie es die anderen Anwendungen lösen und pickt sich so das Beste raus. [...] Generell ist es auch immer schön, wenn man einzelne Funktionen & Komponenten aus alten Projekten einfach wiederverwenden kann.

Interviewpartner 3, Entwickler bei einem AR-Startup

Sensibilisierung für Usability und UX

Insgesamt sahen viele der Interviewteilnehmer die Inhalte der Website eher im Kompetenzbereich von Konzeptern. Da diese in den kleinen und mittelständischen Unternehmen unserer Projektpartner aber tatsächlich nicht vorhanden waren, bekam das Thema “Sensibiliserung für Usability & UX” für uns ebenfalls einen hohen Stellenwert.

Frameworks und Copy&Paste

Ebenso mussten wir feststellen, dass der ursprünglich angedachte Begriff einer "Pattern Library" eine falsche Erwartungshaltung weckt: Viele der Entwickler kamen auf Codebeispiele oder gar Frameworks zu sprechen, da diese die Möglichkeit bieten, die präsentierten Lösungen schnell und einfach in die eigene Anwendung zu übernehmen – etwas das in der ersten Projektphase leider nicht vorgesehen war. Dies fangen wir unter anderem über die spätere Umbenennung in "IntuitiKit" ab und empfehlen eine baldige Integration für den lösungsorientiertesten der vier Inhaltstypen: das 3D-Pattern.

Euer Tool ist ja im Prinzip dazu da um mir Arbeit zu ersparen und auch so ein bisschen Best-Practices zu zeigen oder Lösungen für ein Problem das es öfters gibt [...]. Aber ich muss eben dann immer noch selber programmieren. Wenn es da etwas gäbe das mir das abnimmt, oder Beispiele zum herunterladen, wäre es natürlich schöner.

Interviewpartner 5, Informatikstudent

Wording

Weitere Probleme mit dem Wording tauchten bei den Bezeichnungen der vorgesehenen Inhalte auf: hatten wir schon Probleme mit den sehr forschungsorientieren Begrifflichkeiten, waren die verwendeten Begriffe den Entwicklern weitgehend unbekannt. Forschungsergebnisse attraktiver gestalten und vermarkten würde also eine weitere Kernaufgabe des Projekts werden.

Community-Aspekt

Ein großes Thema im Bereich „Anforderungen“ waren Community-Elemente, die den Erfahrungsaustausch zu den Patterns ermöglichen. Die Möglichkeit, die Patterns oder Themen zu bewerten wurde ebenfalls erwähnt, um so schnell abschätzen zu können ob eine Lösung hilfreich und sinnvoll ist.

Ideate

Um unsere Findings aus dem User Research in ein schlüssiges Konzept zu gießen, haben wir für einzelne Schlüsselfunktionen der Seite (definiert aus den Anforderungen des Briefings und der Entwickler) anhand der vier Erlebniskategorien (Resonanz & Unterstützung, Herausforderung & Kompetenz, Organisation, Kommunikation & Erfahrungsaustausch) Ideen generiert und diese nach persönlichem Empfinden und Machbarkeit bewertet.

Die Schlüsselfunktionen zu diesem Zeitpunkt waren:

  • Hintergrundinformationen bekommen
  • Vernetzung mit bereits bestehenden Anwendungen
  • Nutzungsszenario als Einstieg
  • Forum/Kommentare
  • Navigation
  • Detailseite Pattern
  • Filter-/Suchfunktion
  • Feedback zu 3D-Interfaces geben und bekommen

Prototype fast, fail fast

Die in der Ideate-Phase erdachten Funktionen haben wir dann in eine Grobstruktur der Seite aufgeteilt, in einem ersten interaktiven Prototypen mit Balsamiq umgesetzt und wieder mit mehreren Entwicklern getestet. Der Fokus des Prototypen lag dabei noch nicht auf den Inhalten sondern rein auf der Struktur. Findet der Nutzer bestimmte Funktionen (wie Sharing & Kommentare) in diesem Kontext sinnvoll? Und wenn ja, an welcher Stelle? Ist der grundsätzliche Aufbau der Seite verständlich und ist klar was an welcher Stelle angeboten wird?

Anhand des Feedbacks aus den ersten Tests haben wir dann sehr schnell weitere Anpassungen am Prototypen vorgenommen. Außerdem haben wir den Bereich “Getting started”, der die Entwickler abholen und für die Inhalte der Website begeistern sollte, etwas detaillierter ausgearbeitet, um so in weiteren Tests hier bereits die Zielgruppenansprache & Verständlichkeit überprüfen zu können. Erneute Tests des überarbeiteten Prototypen gaben uns so die Möglichkeit unsere Hypothesen zu bestätigen und zwischen den verschiedenen Iterationen abzuwägen.

Die finale Umsetzung immer im Blick

Bereits in der Ideenphase und dem Research zeigte sich für uns, wie viele Möglichkeiten und Potentiale es in diesem Projekt auszuschöpfen gäbe: Individuelle Inhalte für unterschiedliche Zielgruppen, individuelle Hilfe-Bots, tiefgreifende Community-Funktionen zur Vernetzung von Entwicklern mit ähnlichen Problemstellungen... Alles verlockend, in Hinblick auf den zeitlichen Rahmen des Projekts aber kaum umsetzbar.

Iterative Entwicklung einer Pattern-Detailseite. Die letzte Iteration wurde am Ende des Projekts im Browser durchgeführt um Probleme mit der Zugehörigkeit des Patterntitels sowie den Sharing-Optionen aufzulösen.

Um hier in einem realistischen Rahmen zu bleiben und dennoch die Limits des machbaren konstant ausloten zu können, haben wir uns dazu entschlossen, immer wochenweise einzelne Teilbereiche der Website bis in den Browser fertigzustellen. Alle weiteren Iterationen führten wir dann direkt im Browser durch und konnten so Features schnell abändern, hinzufügen oder von anderen, zuvor umgesetzten, Seiten übernehmen. So hatten alle Teammitglieder konstant einen guten Überblick über den aktuellen Status der Seite und offene Baustellen sowie Potentiale. In enger Abstimmung zwischen Konzept, Design und Entwicklung haben wir so einen schnellen, einfachen und iterativen Prozess ermöglicht.

Ab diesem Teil des Projekts war ich in erster Linie mit der technischen Umsetzung betraut, stand dem Konzeptteam aber dennoch weiterhin als starker konzeptioneller Ansprechpartner zur Seite.

Unsere Lösung – das IntuitiKit

So sind wir Woche für Woche der Gesamtlösung ein Stück näher gekommen und hatten am Ende eine weitere Woche Zeit um das daraus entstandene Gesamtkonstrukt auf Konsistenz zu prüfen und weitere Iterationsschleifen für einzelne Teilbereiche zu durchlaufen.

Entstanden ist so ein Portal, das den Entwickler, Konzepter und auch Product Owner direkt auf der Startseite abholt und Ihnen klarmacht, wie unser IntuitiKit sie unterstützen kann. Weiterführende Informationen zum Projekt schaffen Vertrauen, sodass die Entwickler über unsere Such- und Filterfunktion direkt nach Anregungen, Lösungen, Guidelines und weiteren vernetzten Inhalten suchen können.

Animierter Header

Durch den animierten Header wird das Thema “3D” direkt klar. Wir haben bewusst auf Personenbilder mit VR oder AR-Brillen verzichtet, um so weiter zu verdeutlichen, dass die Seite für die Entwickler jeglicher 3D-Software nützlich ist.

Ebenso schaffen wir hier mit der zunächst eher technischen, dem Entwickler bekannteren, Bildsprache einen Kontrast zur sehr viel emotionaleren Bildsprache im “Getting started”.

Getting started

Das “Getting started” holt den Nutzer direkt auf der Startseite in seinem Arbeitskontext ab, nimmt ihn an die Hand und führt ihn durch das Angebot und die Themen unseres IntuitiKit. Jede Sektion steht für eine Aufgabe oder ein Potential während der Entwicklung intuitiver 3D-Software.

Der Entwickler erkennt so im Idealfall sich und seine konzeptionellen Aufgabenstellungen wieder und kann gegebenenfalls direkt zum vorgefilterten IntuitiKit abspringen.

Patternfilter & Übersicht

Ein Punkt der bei den Nutzerinterviews und -tests häufig zur Sprache kam, war eine einfache, schnelle und gut funktionierende Suchfunktion. Wir haben uns diese Anforderungen zur Prämisse gemacht und haben eine Suchfunktion bzw. Inhaltsübersicht geschaffen, die sich mit Autocomplete und Live-Filtern nicht nur super einfach, sondern auch rasant schnell nutzen lässt.

So landet der Entwickler im Handumdrehen bei seiner gesuchten Lösung oder kann dank der Filter und dem direkten Feedback einfach und schnell die Inhalte explorieren.

Vernetzung

Kein Problem ohne Lösung, keine Lösung ohne Problem! Da die Inhaltstypen häufig sehr eng miteinander verbunden sind mussten wir einen Weg finden, wie sich diese sinnvoll vernetzen lassen.

Vernetzungslinien rechts des Contents bieten die Möglichkeit die verwandten Pattern exakt an der Stelle anzubringen, an der sie für den aktuellen Inhalt relevant sind und greifen das auf der Startseite bereits verwendete Linienelement erneut auf.

Community

Um den in den Interviews geäußerten Bedürfnis nach Austausch über Probleme und Lösungen gerecht zu werden, haben wir bereits die Beispiele auf den Detailseiten interaktiv gestaltet. Neben Beispielen des Forschungsteams, gibt es auch die Möglichkeit eigene Beispiele hochzuladen und zu diskutieren.

So hoffen wir, dass das IntuitKit über die Forschungsergebnisse hinaus zu einer wichtigen Anlaufstelle für das Benchmarking einzelner Funktionen wird.

Integrierter Glossar

Da auf den Detailseiten teils sehr spezifische Begriffe verwendet werden, wurde im Briefing außerdem der Wunsch nach einem Glossar geäussert.

Diesen haben wir zeitgemäß über Tooltips in die Seite integriert, sodass der Nutzer die Definitionen einzelner Begriffe genau dann zur Hand hat, wenn er sie auch braucht. So verliert der Glossar sein angestaubtes Image und wird nicht übersehen.

Projekt & Learn

Mit den beiden Seiten "Projekt" und "Learn" betten wir die Inhalte unseres IntuitiKit kontextuell ein und bieten so die Möglichkeit sowohl mehr über über das Projekt, als auch über die Themen Usability & UX allgemein zu erfahren.

Damit verleihen wir dem Projekt ein Gesicht, wecken weiter Neugier für das Thema und fördern die Verständlichkeit der Inhalte.

Über das Content Management System “Wordpress” ermöglichen wir eine einfache Pflegbarkeit der Website. Durch den Verzicht auf Frontend-Frameworks wie “Bootstrap” oder “Foundation” ermöglichen wir schnellere Ladezeiten. Auch die Filter & Modals funktionieren ohne weiteres Nachladen von Daten (ausgenommen Bilder) und sind daher schnell und einfach nutzbar – ein wichtiger Faktor für eine gute User Experience. Da der ermittelte Nutzungskontext der Seite hauptsächlich “Büro” lautet, wurde die Seite “Desktop-first” konzipiert und entwickelt, ist aber selbstverständlich auch für mobile Endgeräte optimiert.

Fazit

Ein anspruchsvolles Unterfangen, ein spannendes Thema aber dennoch trockene Inhalte, die wir in einem einfach zu bedienenden, leicht verständlichen und attraktiven Gesamtpaket, dem IntuitiKit, verpackt haben. Eine solide Lösung um KMUs bei der Entwicklung intuitiver 3D-Software zu unterstützen!

Team: Caroline Pragua, Christian Kunz, Elisabeth Stein, Marie Mader