Die genannten Techniken/Tools haben alle eine unterschiedliche Realitätsnähe (die sogenannte „fidelity“) bezüglich der Funktionen, des Aussehens (“Look”) und des Arbeitens mit dem Endprodukt ( “Feel”). Deshalb sollten sie an unterschiedlichen Stellen des Entwicklungsprozesses zum Einsatz kommen.
Ganz am Anfang steht der „Sketch“ als einfache Frei-Hand-Zeichnung, um Ideen zu Papier zu bringen und kommunizierbar zu machen. Die Fidelity ist in jeder Hinsicht gering, dafür geht es aber sehr schnell und günstig.
Im nächsten Schritt kann man sich an die Entwicklung eines „Wireframes“ machen. Dort geht es schon um die Funktionalität – wie wirken die Elemente des Interfaces zusammen? Dafür gibt es jede Menge Internet-Tools, die eine große Auswahl an UserInterface-Elementen (Buttons, Links, Scroll-Menüs u.s.w.) zur Verfügung stellen, so dass man recht einfach sein eigenes Interface “zusammenbasteln” kann. Bezüglich “Look” und “Feel” ist die Fidelity noch immer gering, meist ist das Ganze noch in schwarz-weiß gehalten und sieht ein bisschen comic-ähnlich aus.
Dies ändert sich mit dem Erstellen eines „Mockups“, welches auf den Wireframes aufbaut. Hier geht es darum, ein Verständnis dafür zu bekommen, wie das Endprodukt konkret aussieht. Hier wird ersichtlich, welche Farben, Fonts u.s.w. benutzt werden.
Als letzten Schritt kann durch das Bauen eines Prototyps auch die Funktionalität des Endproduktes demonstrierbar werden. Dabei unterscheidet man zwischen flachen und tiefen Prototypen. Flache Prototypen haben alle späteren Funktionen implementiert, allerdings sind diese nicht voll funktionsfähig. Das schafft einen Gesamteindruck sowie einen Überblick über die Navigation. Bei einem tiefen Prototypen sind hingegen einige wenige Funktionen komplett (aus)implementiert, so dass man einzelne Nutzungsszenarien (“Use-cases”) abbilden kann.
Nützliche Tools für Wireferames/ Mockups/ Prototypen gibt es u. a. hier:
www.balsamiq.com
(Windows, Mac, Linux; $79)
www.axure.com
(Windows, Mac; $289 – $589)
www.pidoco.com
(Web-based; $7-$49 pro Monat)
www.office.microsoft.com
(Windows; 739,00 €)
www.blog.mockupbuilder.com
(Windows, $14-$99 pro Monat)
www.omnigroup.com
(Mac, IPad ; $99.99 – $199.99)
Bildquelle: unsplash.com