Low fidelity Prototyping

Neugebauer Christiana0000920@unet.univie.ac.at

Übersicht• Was ist Prototyping

• Vorteile / Nachteile

• Einige Tools• Seite anlegen und editieren

• Element Einfügen

– Dummy Grafik und reale Grafik laden

• Menü erstellen und editieren

• Weitere Elemente erstellen

• Mockup klonen

• Neues Mockup verändern

• Mockups verlinken

• Ein paar Mockup – Beispiele

• Freies Arbeiten mit Unterstützung

Prototyping

• Prototyp

– Lauffähiges Stück Software oder

– konkrete Modellierung einer Teilkomponente

• Prototyping

– Vorgehensweise zum Erstellen/Abändern eines Prototypen

Vorteile Low-fi Prototyping

• Schnelle Entwicklung

• Gute vorab Übersicht

• Einfach abzuändern

• Benutzer wissen was auf Sie zu kommt

• Systemanforderungen können besser verstanden werden

• Benutzer können sich selbst einbringen

– Haben nicht das Gefühl nur etwas vorgesetzt zu bekommen

• Wer mit entwickelt mag sein „Baby“ und ist oft motivierter

Nachteile Low-fi Prototyping

• Zusätzlicher Zeit-/Ressourcenverbrauch

• Anforderungen könnten zu rasch und schlampig durchgeführt werden

• Meist kein strukturierter Code, oder nur schwer wartbar

• Oft keine Dokumentation

Einige Tools Balsamiq (http://balsamiq.com) Mockflow (http://www.mockflow.com) appery.io (http://appery.io) Pencil (http://pencil.evolus.vn) Dub-Denim (http://dub.washington.edu:2007/denim) Mockingbird (https://gomockingbird.com) Axure (http://www.axure.com) WireframeSkatcher (wireframesketcher.com) Weiter Tools siehe Links darunter:http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/

http://blog.profitbricks.com/top-29-mockup-and-wireframing-tools-for-developers/

Low Fidelity Prototypingmit balsamiq

Zu Begin

• Mybalsamiq (Webtool)

– login

– Mybalsamiq startet mit dem Anlegen eines neuen Projekts

– Dann ein neues Mockup hinzufügen• Es kann auch Team/Änderungsverfolgung

definiert werden

• Balsamiq (Desktopversion)

– Startet gleich mit der Benutzeroberfläche, oder bereits erstellten Mockups

Browser Fenster erstellen

Adresse editieren (optional)

Adresse editiert

Mein erstes Element

Farbänderung

Grafik dummy

Grafik aus dem Internet laden

Eine Grafik einfügen(1)

Eine Grafik einfügen(2)

Eine Grafik einfügen(3)

Grafik Info einsehen (1)

Grafik Info einsehen (2)

Grafik einfügen(evtl. Größe anpassen)

Menü erstellen

Menü editieren (1)

Menü editieren (2)

Menü editieren (3)(aktive Seite einstellen, hier none )

Noch eine Dummy Grafik

Vertikale Teiler

ein paar Text-dummys

Mehrere Element mit STRG markieren

Und gemeinsam neu positionieren

Mockup klonen

Aktuelle Seite im Menü markieren

Seite entsprechend anpassen

Mockups verlinken(Mockups müssen gespeichert sein!)

Mockups verlinken(1)(Mockups müssen gespeichert sein!)

Mockups verlinken(2)

Mockups verlinken(3)(Link folgen) Online Tool :

Bildschirm-Präsentation muss aktiviert werden

Online Tool :Bildschirm-Präsentation muss aktiviert werden

Erfolgreiche Linkverfolgung

Einige Tipps

• Quicktipps beachten wenn ein Element aktiv ist (z.B. F2 zum „Text“ editieren)

– Ist bei Onlineversion evtl. nicht immer sichtbar

• Zur Linkverfolgung im Onlinetool muss man in den Präsentationsmodus wechseln(Viereck rechts oben, „Full Screen Presentation“)

• Für die Arbeit in Team steht bei mybalsamiq einerseits die Möglichkeit zur Verfügung das sich mehrere Personen gleichzeitig auf der selben Seite einloggen(Achtung: bei einem „logout“ fliegen alle raus)

• Andererseits kann ein Export/Import verwendet werden um die Daten auszutauschen

Smartphone Beispiele

Pencil

Pencil Android

Pencil Windows XP