Methoden & Werkzeuge –
Prototyping

Gegenstand des Prototypings ist die Entwicklung einer lauffähigen Software bzw. einer Software-Komponente, die bestimmte Kernfunktionen abdeckt. Prototypen können Low-Fidelity-Prototypen oder High-Fidelity-Prototypen sein, mit unterschiedlichen Umfängen hinsichtlich Detailgrad und Interaktionsmöglichkeiten. Mit Prototypen lassen sich Websites oder komplexeren Software-Anwendungen in der frühen Entwicklungsphase kostengünstig evaluieren und an die Nutzer-Anforderungen ausrichten. Durch das Testen des Prototyp können frühzeitig Fehler erkannt und Änderungswünsche berücksichtigt werden und das bevor die Software fertiggestellt wird.

  • Skizze/Sketch

    In einer ersten groben Skizze werden Schritt für Schritt mögliche Lösungen erarbeitet und im Team diskutiert.

    1

  • Paper Prototyping

    Paper Prototyping ist eine schnelle und effiziente Methode, um User Interfaces im ersten Schritt ohne Programmieraufwand zu modellieren und mit echten Nutzern zu testen. Dabei werden die Kernelemente einer Benutzungsschnittstelle in einfachen Entwürfen und Skizzen handschriftlich visualisiert bzw. modelliert. Genutzt werden dafür z. B. Papier, Pappe, Transparentpapier und/oder Post-Its.

    Mehr erfahren: https://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-a…

    2

  • Wireframes

    Ein Wireframe ist ein schematischer Entwurf, der definiert, welche Elemente an welchen Stellen verwendet werden und wie die Navigation zwischen den Elementen auf einzelnen oder verschiedenen Websites bzw. Screens einer Software oder Web-Anwendung funktioniert. In einem Wireframe werden nur die nötigsten Elemente einer Website dargestellt. Gestaltungselemente und einzelne Funktionalitäten spielen noch keine Rolle.

    Mehr erfahren: https://www.usability.gov/how-to-and-tools/methods/wireframing.html

    2

  • Mockups

    Ein Mockup ist in den meisten Fällen ein digitaler Entwurf einer Website oder App. Mockups können auf der Struktur eines eventuell vorhandenen Wireframes aufbauen und diesen weiterentwickeln. Durch die Integration von Farben, Typographien, Bildern und Grafiken kommen sie dem endgültigen Design sehr nahe bzw. bilden dieses bereits ab.

    Mehr erfahren: https://www.youtube.com/watch?v=qHzZbmhJ_ho

    0

  • Klick-Prototypen

    Der Klick-Prototyp ist ein Hilfsmittel zur Darstellung von Software- oder Weboberflächen oder zur Demonstration von Workflows und Use Cases. Es ist eine Dummy-Lösung, die das Klicken von Elementen wie Buttons, Schaltflächen oder Links ermöglicht. Dabei kann er den Eindruck eines weitgehend „fertigen“ Produkts vermitteln, obwohl er keine oder weitestgehend keine Funktion bereitstellt. Meist kommt der Klick-Prototyp in der Konzeptionsphase zum Einsatz.

    Mehr erfahren: https://www.designmethodsfinder.com/methods/click-dummy

    2

  • Simulation

    In einer Simulation (auch „Wizard of Oz“-Methode genannt) können Funktionen und deren Usability getestet werden, ohne dass die Funktionen tatsächlich schon implementiert wurden. Denn die Benutzer interagieren mit einer Schnittstelle, die von einem Menschen bedient wird, der die Reaktionen des Systems kontrolliert bzw. simuliert. Somit können spätere Funktionen bereits in einem frühen Entwicklungsstadium auf ihre Bedienbarkeit hin untersucht und, falls nötig, noch optimiert werden.

    Der Name basiert auf dem Kinderbuch „Der Zauberer von Oz“ des US-amerikanischen Schriftstellers Lyman Frank Baum, in dem ein Jahrmarktschreier mit Hilfe einer Maschine die mächtige Illusion des Zauberers von Oz erschafft.

    Mehr erfahren: https://www.nngroup.com/articles/wizard-of-oz/

    1
Orientierungshilfen