BACHELORARBEIT // THOMAS SOYTER Ein interaktiver Prototyp ...

84
•••
Wireframe
Mit Wireframes wird die Funktionalität
einer Anwendung, eines
Produkts oder einer Website
dargestellt, ohne dabei bereits
gestalterische Details festzulegen.
Sie dienen häufig auch als
Diskussionsgrundlage zwischen
den beteiligten Personen (Nutzer,
Gestalter, Entwickler).
• Primärfunktion: Funktionen, die den Hauptnutzen
des Produktes oder Anwendung ausmachen
• Sekundärfunktion: Funktionen, die den Hauptnutzen
des Produktes erweitern
• Tertiärfunktion: Funktionen, die nicht unbedingt
notwendig sind, da sie nicht relevant für den Hauptnutzen
der Anwendung sind
Für die praktische Umsetzung von Funktionslayouts für
Touchscreen-Systeme ist es darüber hinaus hilfreich, diese
„pixelgenau“ zu realisieren. Diese Vorgehensweise reduziert
die Überladung des Bildschirms und hilft den Platzbedarf
von Touchelementen im Vorfeld richtig einzuschätzen
(SAFFER, 2009, S. 102; STAPELKAMP, 2010, S. 162 f.).
Wireframes des interaktiven Prototyps
Anhand der nachfolgend dargestellten Wireframes wird
ein erster Überblick über das Konzept des interaktiven Prototyps
dargestellt und beschrieben. Die vorgestellten Wireframes
sind dabei zum grundlegenden Verständnis gedacht
und repräsentieren nicht immer das finale Ergebnis,
wie es letztlich in die Mockups bzw. in den Prototyp selbst
eingeflossen ist. So wurden eine Reihe von Funktionen die
zum Teil in den Wireframes dargestellt sind, in der Endversion
von SketchCoLab nicht berücksichtigt oder modifiziert.
Die Wireframes zeigen daher neben dem eigentlichen
Konzept ebenfalls einen Überblick über während der
Entwurfsphase angedachte und teilweise wieder verworfene
Ansätze. Diese Ansätze demonstrieren den iterativen
Charakter während der Konzeptphase und bieten darüber
hinaus mögliche Ansätze für eine Weiterentwicklung des
Prototyps. Die dargestellten Wireframes werden größten-
SketchCoLab
Konzeption und praktische Umsetzung
teils durch direkt in den Grobentwürfen enthaltene Hinweise
unterstützt und geben einen Überblick über relevante
und geplante Interaktionen.
Als Teil des Gestaltungslayouts einer Anwendung, die
in die Wireframes und Mockups fließt, wird zunächst kurz
auf Aspekte des Formats und Rasters des Prototyps eingegangen.
Format
Als Grundlage zur Aufteilung und Strukturierung einer Fläche
dient das Format einer interaktiven Anwendung. Das
Format wiederum ist meist abhängig vom verwendeten
Medium und bestimmt maßgeblich die charakterlichen Eigenschaften
eines Interface- und Screendesigns. Aber auch
die eingesetzte Software (z. B. Browser) kann das Format
beeinflussen, da sie oft nicht den kompletten Platz eines
Mediums zur Verfügung stellt. Bei den meisten mobilen
Geräten ist die Besonderheit gegeben, dass sowohl die
Betrachtung im Quer-, als auch im Hochformat möglich ist.
Somit wird in der Queransicht am ehesten das natürliche
Blickfeld des Menschen unterstützt, während im Hochformat
die Dynamik gefördert wird. Im vorgestellten Prototyp
wird allerdings ausschließlich auf das Querformat gesetzt,
da eine für beide Formate optimierte Gestaltung den Umfang
dieser Arbeit sprengen würde (STAPELKAMP, 2010,
S. 256 ff.).
Das zur Verfügung stehende Testgerät arbeitet mit einer
Auflösung von 1280 x 800 Pixel. Die Realisation als Web-
Applikation erfordert den Einsatz eines Browsers, weshalb
die genannte Auflösung zur Darstellung der Anwendung
nicht voll zur Verfügung steht. Als einer der möglichen
einsetzbaren Browser wurde in dieser Arbeit der Android