Neue Verstärkung

10.02.2020

...durch Praktikaten und Werkstudenten bei Mediendesign

25 Jahre Mediendesign

20.12.2019

Unser Rückblick auf das Jubiläumsjahr

Nürnberg Digital Festival 2019

24.07.2019

Ein Rückblick (nicht nur) in Zahlen und Emotionen

Usability-Tests

26.03.2019

sicherer als der Blick in die Kristallkugel

Frischer Wind...

14.11.2018

... und neue Gesichter bei mediendesign

Telefon

+49 911 39 36 00

Anfahrt

mediendesign AG 
Äußere Sulzbacher Straße 116 
90491 Nürnberg

Route

Rückruf beantragen

Aside-Rückruf

Aside-Rückruffunktion

Anfrage senden

Aside-Kontakt

Aside-Kontakt

Prototyping spart Zeit und Geld

Prototyping unterstützt in der Software-Entwicklung einen multidisziplinären Prozess. Verschiedene Fachlichkeiten werden benötigt, um ein gebrauchstaugliches Produkt herzustellen. Auf diesem Hintergrund sollten Sie Prototyping als visuelle Repräsentation ihres bisherigen Kenntnissstandes betrachten. Da das Interface die direkte Schnittstelle zum Benutzer dastellt, eignet sich Prototyping insbesondere dafür, Usabilitykriterien abzuprüfen, ohne dabei den Produktionsaufwand einer fertig implementierten Software zu haben. In Iterationen kann sich an das Aussehen der Oberfläche, die Darstellung von Information und Präsentation der Funktionalität angenähert werden, ohne tatsächliche Daten und Funktionalitäten hinterlegen zu müssen.

Prototypen sind generell Repräsentationen eines interaktiven Systems oder von Teilen davon, welche je nach Reife für die Analyse, das Design und die Evaluierung des Systems verwendet werden können. Durch eine prototypische Umsetzung kann man bereits viele Faktoren überprüfen, Fehler aufspüren und das System auf Erfüllung der Anforderungen, der sogenannten Requirements prüfen, ohne zu viel Zeit in die tatsächliche Implementierung des Systems gesteckt zu haben.

Prototyping führt, je nach Projektstand, zu unterschiedlichen Erkenntnissen: vom ersten Festlegen einer Struktur bis zum Verfeinern des Designansatzes.

Prototypen im Entwicklungsprozess

Durch Prototypen werden Fehler oder Probleme frühzeitig erkennbar. Durch frühes Feedback im Entwicklungsprozess gelingt es schneller, diese Fehler auszumerzen. Somit wird vermieden, darauf zu warten, bis diese Probleme als Support-Anfrage oder Change Requests der fertigen Software weitere Kosten verursachen und ihre Behebung umfangreiche Änderungen nach sich ziehen oder Kundenvertrauen verspielen.

Zu Anfang einer Entwicklung werden in der Regel eher Low-Fidelity-Prototypen hergestellt, welche mit Wireframe- Strukturen das grundsätzliche Layout und den Platzbedarf abstecken, aber zum Teil auch schon eine gute Vorstellung der Benutzung schaffen können.

Im Laufe der Entwicklung werden iterativ verfeinerte Prototypen, sogenannte High-Fidelity Prototypen erstellt, welche dem finalen Produkt im Hinblick auf Aussehen und Funktionalität immer ähnlicher werden. Erst wenn die Informationsarchitektur und Konzeption durch Prototypen in Tests und Reviews verifiziert werden konnte, macht es Sinn, das Produkt tatsächlich zu implementieren. Oft wird während dieser prototypischen Konzeptionsphase seitens der Software-Ingenieure die grundsätzliche technische Basis aufgesetzt.

UX-icon

Sprechen Sie mich an für ein individuelles Angebot

Holger Schlemper

Diplom Designer
UXQB Certified Professional for User Experience
(CPUX-F, UT)

Usability Testing, UX-Beratung
Usability Methoden, User Requirements

Kontaktieren Sie mich

Wireframes

Mithilfe von Skizzen und Scribbles können aus abstrakten Vorstellungen oder Requirements erste, diskutierbare Formen der Repräsentation des eigenen Modells generiert werden. Und das nebenbei schnell und kostengünstig. Bei einer Entwurfsentwicklung in der Gruppe wird trotz genauer abstrakter Beschreibungen schon früh klar, dass unterschiedliche Vorstellungen über das mögliche Aussehen existieren.

Wir laden Sie ein, gemeinsam mit uns zu skizzieren und bereits den ersten Schritt in die visuelle Umsetzung Ihrer Software als multidisziplinären Workshop zu betreiben. So kommt man von Anfang an zu einer gemeinsamen Sichtweise auf das Produkt.

Paperprototypes oder Scribbles klären im ersten Schritt grundsätzliche Strukturen und zeigen auf, welche Komponenten des Interface wann zu sehen sind und wie sich die Aufgabe in der Übersetzung zu einem Interface strukturiert. So werden unterschiedliche mentale Modelle durch Scribbles und Paper-Prototypen diskutierbar und spiegeln das Verständnis für das Gesamtsystem wider.

In einem weiteren Schritt werden aus Scribbles und Skizzen Wireframes erstellt, diese klären in erster Linie die Positionierung von Elementen, nicht aber deren Gestaltung.

Wireframes können sehr unterschiedliche Grade an Verfeinerung erreichen, von den reinen „Bounding Boxes“, welche nur den Platzbedarf der verschiedenen Elemente transportieren bis hin zu vereinfachten Seitenentwürfen mit korrektem Wording und exemplarischem Bildmaterial. Hier wird der strategische und strukturelle Part der vorherigen Erkenntnisse mit echtem Content verprobt und mit Details versehen.

Durch Interaktionsstoryboards können schon mit Wireframes erste Bedienkonzepte entwickelt und überprüft werden. Die Visualisierung als Wireframe-Scenario macht Abläufe anschaulich und deckt schon zu einem frühen Entwicklungsstadium Fehler im User-Flow auf.

Low-Fidelity-Prototyp

Eine einfache und preiswerte Veranschaulichung der Struktur einer Oberfläche. Low-Fidelity Prototypen werden benutzt, um Benutzer-Feedback in frühen Phasen der Entwicklung einzuholen.

Dies kann mit Hilfe von Papier, Stiften, Haftzetteln oder mit Prototyping-Software betrieben werden, manlegt eine erste Navigationsstruktur fest, die logische Organisation der angezeigten Informationseinheiten der Benutzungsschnittstelle.

Die Navigationsstruktur umfasst:

  • Die logische Struktur, zum Beispiel Hierarchie, Anordnung sowie Gruppierung von Bestandteilen des User Interfaces bzw. Navigationsitems.
  • Die Navigationsmittel zum Navigieren in der Struktur, zum Beispiel Menü, Navigation und Brotkrumen.

High-Fidelity-Prototyp

Ein Software-Prototyp der Benutzungsschnittstelle des zu designenden interaktiven Systems. Der High-Fidelity-Prototyp ähnelt dem fertigen interaktiven System und kann interaktiv oder nicht interaktiv sein. Wichtig ist hier, klarzustellen, welche Bereiche des Prototypen schon fertig designt sind und welche nicht. Ansonsten kann es bei Reviews zu Verwirrung kommen.

Interaktive Prototypen unterscheiden sich hinsichtlich Interaktions-Simulation und echter Interaktivität, zum Beispiel:

  • Lineare Animation von Scribbles oder Wireframes als Film (Animatic) zur Darstellung von komplexen Abläufen
  • Abfilmen verschiedener Zustände eines Paperprototypes zur Visualisierung des Ablaufs
  • Hyperlinked Screens mit Hotspot-Links zum nächsten Screen
  • Generierung eines Interaktiven Prototypen mittels einer geeigneten Prototyping-Software (Adobe XD, Sketch, Axure, Balsamiq Mockups oder Ähnliche)

WIREFRAME

LOW FIDELITY PROTOTYPE

HIGH FIDELITY PROTOTYPE

ITERATION

PROTOTYPING TOOLS

INTERAKTIONSDESIGN

Iteration

Das von der Norm ISO EN 9241 geforderte iterative Vorgehen im User Centered Design (UCD) bzw. der menschzentrierten Gestaltung befähigt dazu, zu jedem Zeitpunkt in der Produkt-Entwicklung überprüfen zu können, ob die anvisierte Lösung tatsächlich den Benutzererwartungen entspricht.

Dies geschieht unter Zuhilfenahme von Prototypen, welche anfangs die optische und informationstechnische Struktur diskutierbar und Navigationsstrukturen festlegbar machen und erst ab einer bestimmten Reife des Produktes in die Verfeinerung des Interfacedesigns münden.

Durch dieses Vorgehen wird, in Kombination mit kontinuierlichen User Tests, Expertenreviews und anderen Evaluationsmethoden, bei mediendesign ein stetiger Verbesserungsansatz schon bei der Konzeption der Softwarebetrieben.

Prototyping Tools

Das User Interface wird prototypisch in einem Prototxping Tool wie zum Beispiel Adobe XD, Sketch, Balsamiq-Mockups oder Axure RP als Klickdummy erstellt, um Usability-Tests und Experten Reviews durchführen zu können.

Statt sofort in das finale Design oder die Implementierung einzusteigen ist die Planung und Konzeption von Software durch prototypische Annäherung an ein zukünftiges Produkt ein Vorgehen, welches sich in der Softwareentwicklung durchgesetzt hat und als Best Practice beschrieben ist.

Verschiedene Tools mit unterschiedlichen Leistungsumfängen stehen für das Interface und Interaktions-Design zur Verfügung. Allen gemeinsam ist die Möglichkeit, Screens und Interaktionen vom Wireframe-Prototyp bis hin zu einer Softwaresimulation im High Fidelity Design herzustellen. Wichtig für die Erstellung eines Prototyps sollte sein, möglichst viel Erkenntnis-Gewinn und möglichst wenig Aufwand zu kombinieren, um schnell zu einer optimierten Lösung zu gelangen. Eines der wichtigsten Tools im Prototyping bleiben aber immer noch Papier und Bleistift.

Interaktionsdesign

Im Interaktionsdesign erfolgt eine Strukturierung der Interface-Zusammenhänge anhand von logischen und funktionellen Anforderungen.

Dabei werden alle Screens spezifiziert und der Workflow des Gesamtablaufs der Interaktion und der erforderlichen Elemente aufgrund von Designprinzipien festgelegt. Sowohl Gesten, Inanspruchnahme des Bewegungssensors oder Workflows zur Bewältigung einer bestimmten Aufgabensequenz im System können über prototypische Szenarios abgebildet und diskutiert werden. Im Interaktionsdesign entsteht die spätere Navigationsstruktur.

Ergänzungen zu UI Prototyping

SCRIBBLES

CARD SORTING

INTERACTION FLOWS

Scribbles

Skizzen helfen aus einer abstrakten Vorstellung oder Requirements eine ersten diskutierbare Form und Repräsentation des eigenen mentalen Modells zu generieren. Und das nebenbei schnell und kostengünstig. Hierbei wird, wenn man die Entwürfe in einer Gruppe entwickelt, schon früh klar, dass trotz noch so genauer abstrakter Beschreibungen, unterschiedliche Vorstellungen über das mögliche Aussehen existieren.

Wir laden Sie ein, gemeinsam mit uns zu skizzieren und bereits den ersten Schritt in die visuelle Umsetzung Ihrer Software als multidisziplinären Workshop zu betreiben. So kommt man von Anfang an zu einer gemeinsamen Sichtweise auf das Produkt.

Card Sorting

In der anfänglichen Entwurfsphase ist es durchaus hilfreich, die angedachte Struktur auf den Prüfstein zu stellen und mit relevanten Benutzern die Begrifflichkeiten der Navigation zu überprüfen. In einem Card Sorting lässt man die Probanden ihre Version einer Strukturierung der zur Verfügung gestellten Begriffe durchführen. So kann man schon in einem frühen Stadium der Entwicklung auf Strukturelle brücke und unverständliche Wordings aufmerksam werden. Dies führt von anfang an zu einer besseren Qualität der Prototypen.

Interaction Flows

Durch die Erstellung von Interaction Flows können mit Wireframes die Benutzerführung und Interaktion des Benutzers innerhalb des Produktes geplant und festgelegt werden. Somit lassen sich durch Wireframes Benutzungs-Szenarios in einem Low Fidelity Protopyp darstellen, man erkennt, wie das komplette System zusammenhängt und die zugrundeliegende Informationsstruktur des Produktes wird anschaulich und diskutierbar. Der Low Fidelity Prototyp ist ein Struktur-Entwurf und wird iterativ weiterentwickelt, bis die Aufgaben der Benutzer optimal unterstützt werden. Mit entwicklungsbegleitenden Tests kann sichergestellt werden, dass die Entwicklung in die richtige Richtung geht.

Weiterführende Themen

Mit Prototypen sollte man auf jeden Fall Tests durchführen. Der Erkenntnisgewinn hilft, schnell Probleme aufzulösen und ist der eigentliche Grund für das Erstellen von Prototypen.

Mehr zu Usability Tests

Get in Touch

Ihr Ansprechpartner