Wir konzipieren, gestalten und programmieren nutzerorientierte und effiziente User Interfaces.

Menü

ERGOWERK Denkfabrik

In der Denkfabrik sammeln die Usability Engineers von ERGOWERK Ideen, die sie mithilfe von Kreativ- und Usability-Methoden zu ausgefeilten Konzepten formen.
Flakon

In der Denkfabrik von ERGOWERK dreht sich alles um die Themen Ideenfindung und Konzeption. In diesem Bereich geht es bei uns ganz konkret darum, welche Inhalte und Funktionen Ihre Website, Software oder App später besitzen soll und wie man diese Inhalte aufrufen bzw. die Funktionen bedienen kann. In der Denkfabrik arbeiten wir mit verschiedenen Methoden, um kreative Ideen zu schmieden und innovative Konzepte zu konstruieren, bis die Köpfe rauchen. Diese Konzepte sind wichtig für die genaue und effiziente Umsetzung des Projekts in der Werkstatt.

Damit Sie als Kunde und später auch die Mechanics in der Werkstatt eine genaue Vorstellung dieser Konzepte bekommen, werden diese nicht nur textuell erfasst, sondern je nach Projekt auch in Form von Wireframes oder einem ersten Prototypen visualisiert.

Darüber tüfteln wir für Sie

Requirements Engineering

Anforderungsdefinition

Der erste Produktionsschritt der Denkfabrik überschneidet sich mit dem letzten Schritt aus dem Labor. Hier werden alle Funktionalitäten fixiert, die zwingend für den Gebrauch der Website / Anwendung / App notwendig sind (Must-Funktionalitäten). Dazu kommen Funktionen, die nützlich oder komfortabel aber nicht unbedingt notwendig sind (Can-Funktionalitäten). Alle Funktionalitäten zusammen ergeben eine Anforderungsliste, die mit Ihnen zusammen nach Wichtigkeit priorisiert wird.

  • Anforderungen festhalten
  • Anforderungen priorisieren

Information Architecture

Inhaltsstruktur & Navigation

Entscheidend für eine gute Usability ist ein sinnvoller Aufbau der Informationsarchitektur. Zur dieser gehören u.a. die sinnvolle Unterteilung von Inhalten, die Definition von Navigationspfaden und Suchmöglichkeiten sowie die Gestaltung und Anordnung der Navigationselemente selbst.

Da in den meisten Fällen Sie als Auftraggeber wesentlich mehr Fachwissen über die Inhalte und deren Nutzen für die späteren User der Website / Anwendung / App besitzen, sollte die Informationsarchitektur in enger Zusammenarbeit mit Ihrem Unternehmen, am besten zusätzlich auch mit Vertretern der späteren Nutzergruppen, entwickelt werden.

  • Inhalte festlegen und einordnen
  • Optimale Navigationsstruktur erarbeiten

Verwendete Methoden

  • Card Sorting
  • Storyboarding

Idea Pooling

Ideensammlung

Bevor es an die eigentliche Konzeption neuer Features geht, werden für alle Punkte aus der Anforderungsliste Ideen für das spätere Konzept zusammengetragen. Diese Ideen basieren zum großen Teil auf den Ergebnissen der vorangegangenen Analysen aus dem Labor, welche dann mit eigenen Ideen angereichert und ergänzt werden. Wichtig für die Sammlung sind hierbei die Wettbewerberanalyse, falls es ein Vorgängerprodukt gibt ein Expert Review sowie eine Trendanalyse, um aktuelle Entwicklungen und Strömungen miteinzubeziehen.

Für die Suche nach neuen Ideen bedienen wir uns klassischer Kreativmethoden wie Brainstorming und Brainwriting. Alle gefundenen Ideen werden aufgeschrieben, in Form einer Mindmap festgehalten und nach Vorgabe der vorher festgelegten Interaktionsarchitektur geordnet. Diese Mindmap bietet einen guten Einstieg in die Ausarbeitung der einzelnen Features im Rahmen der Konzeption.

  • Ideen für einzelne Funktionen sammeln und auswählen
  • Ideen konzeptionell ausarbeiten

Verwendete Methoden

  • Brainstorming
  • Brainwriting

Wireframing

Erstellung einfacher Layouts

Der Hauptteil der Konzeption findet bei ERGOWERK in Form des Wireframings statt. Hierbei werden Funktionen bis ins Detail durchdacht und grafisch in Form von einfachen User Interface-Skizzen, sogenannten Wireframes, festgehalten. Beim Wireframing geht es nicht um Gestaltung sondern in erster Linie um die Vollständigkeit von User Interface-Elementen sowie deren Priorisierung und geplantes Verhalten.

Wireframes sind bewusst schlicht gehalten, ohne Farbe, Grafiken oder sonstigem Styling. Auf diese Weise kann man besser auf die o.g. Punkte fokussieren und es entsteht nicht der fälschliche Eindruck, bereits ein fertiges fixiertes Layout zur Hand zu haben.

  • UI-Elemente der Einzelseiten festlegen
  • Einfache Layout-Skizzen für jede Seite erstellen

Verwendete Methoden

  • Whiteboard
  • Pen & Paper
  • Grafik- & Wireframing-Software

Interaction Design

Interaktionsdesign

Das Interaktionsdesign befasst sich vornehmlich nicht mit der Gestaltung des Aussehens sondern mit der Gestaltung des Verhaltens einer Website / Software / App. Konkret werden hierbei z.B. Animationen, Übergänge von einer zur nächsten Seite oder um das Verhalten bestimmter UI-Elemente bei Nutzerinteraktion definiert und festgehalten. Ein gutes Interaktionsdesign trägt erheblich zu einer guten Usability und vor allem auch zu einer guten User Experience bei.

  • Nutzerinteraktionen ermitteln
  • Verhalten des User Interface auf Nutzerinteraktion definieren

Verwendete Methoden / Tools

  • Storyboarding
  • Rapid Prototyping

Rapid Prototyping

Schnelle Prototypenentwicklung

Rapid Prototyping ist eine spezielle Form des Prototypings, bei der möglichst früh ein Prototyp, also ein Modell der späteren Website / Anwendung / App, erstellt und mit Probanden getestet wird. Oft ist es sinnvoll, bereit auf Basis von Wireframes einen solchen Rapid Prototype zu erstellen. Der spätere Nutzer und der Auftraggeber werden so schon sehr früh in den Konzeptions- und Entwicklungsprozess miteinbezogen. Bereits hier können auf diese Weise fehlende UI-Elemente oder Funktionalitäten identifiziert und bestehende Usability-Probleme aufgedeckt werden.

Rapid Prototypes sind schnell, einfach und dadurch kostengünstig umzusetzen. Deshalb eignen sie sich dazu, die Benutzbarkeit einzelner Funktionalitäten auch mehrfach zu überprüfen und stetig zu verbessern.

Bei ERGOWERK definieren wir das Rapid Prototyping als Schnittstelle zwischen der Denkfabrik (Konzeption) und der Werkstatt (Produktion), wo dann mit der Erstellung von detaillierteren Prototypen angesetzt wird.

  • Einfachen Prototypen erstellen
  • Interaktionen simulieren

Verwendete Methoden / Tools

  • Paper Prototyping
  • Klickdummy auf Wireframe-Basis

Konzept fertig? Dann los in die Werkstatt zur Umsetzung.