Crossmedia Grundlagen WS 2011/12

Wireframes zum “Profi Planer”

Die Applikation “Pro Planer” ist für die Menschen gedacht, die Tennisprofi werden wollen und dabei auf die Marke HEAD stoßen. Sie dient als Terminkalender, Motivator und Statistikensammler.

Dieser frühe Entwurf unterscheidet sich zwar stark von den daraus entstandenen Beispielscreens aus Aufgabe 05, die zuvor genannten drei Aufgaben erfüllt er jedoch nachwievor.

Überarbeitetes Layout

Altes Layout 1

Altes Layout 2

Hier 2 alte und ein neues, überarbeitetes Layout für eine HEAD Landingpage zum Thema “Wie werde ich Tennisprofi”. Alle drei basieren auf dem Raster aus Aufgabe 2 und legen besonderen Wert auf Gesundheit, Fitness, die Technologie von HEAD und auf die Suche nach dem Schläger, der exakt zu dem jeweiligen Spielertypen passt.

Aufgabe: Sie haben anhand einer Sportmarke ein Konzept für eine Landing page und eine mobile Applikation entworfen. Bitte alle 5 Aufgaben die erarbeitet worden sind digital abgeben und auf einem Plakat die beiden Entwürfe konzentriert vorstellen. In dem Text auf dem Plakat sollten sie den Entwurf klar und kurz beschreiben. Unterteilen Sie den Text in die Abschnitte Ziel, Konzept und Entwurf. Bildunterschriften bitte bei Bedarf bei den Bildern einsetzen. Abgabetermin ist der 1.3.2012. Die Vorlage des Plakates erhalten Sie per Email. Das Plakat bitte als PDF und in gedruckter Form abgeben.

Tennisarm by HEAD Mobile App for Blackberry (interaktive PDF)

Für die finale Umsetzung der mobilen Anwendung zum Thema “Wie werde ich Tennisprofi?” habe ich mich für das Blackberry Bold 9900 statt dem  iPhone entschieden, da ich selbst eines besitze und somit auch ein Eigeninteresse für eine solche Anwendung darauf verfolge. Zudem ist das Blackberry technisch zu allem in der Lage was auch das iPhone kann und es besitzt bereits von vornherein einen Bildschirm im Breitbildformat, muss also beim Betrachten von Videos nicht mehr zusätzlich gedreht werden.

Bevor ich mit dem Layout der Anwendung beginnen konnte, habe ich mich zunächst informiert, was es bei Blackberry-Apps zu beachten gibt, welche Größe die Schaltflächen haben müssen, ihre Anordnung weitere Richtlinien, denn die App darf nicht nur über Touch bedienbar sein, sondern muss auch mit dem Trackpad unter dem Bildschirm verwendbar sein.

Mit diesem Hintergrundwissen konnte ich mit der Umsetzung der Idee beginnen.

Wie bereits in dem Mockup muss die Anwendung zuerst mit dem Tennisschläger über Bluetooth oder Funk verbunden werden. Der aktuelle Status dieser Verbindung ist am Icon der Schaltfläche(Zweite von links) zu erkennen. Ist diese grün, so ist alles in Ordnung und es kann weiter fortgefahren werden, befindet sich jedoch ein kreisrundes rotes Symbol mit Ausrufezeichen darüber, so muss die Verbindung durch Betätigen der gleichen Schaltfläche und eventuell eines Knopfes am Tennisschläger, noch geschaffen werden.

Steht die Verbindung, so kann das Aufzeichnen der Schlägerbewegungen durch betätigen der mittleren Schaltfläche beginnen.

Während der Aufnahme werden alle Bewegungen des Schlägers erfasst und aufgezeichnet. Die erfassten Bewegungsdaten werden mit denen aus einem Katalog an solchen Aktionen verglichen und ausgewertet. Die Bewegungen aus dem Katalog entsprechen den Idealbewegungen, daher wird beim Vergleich die Abweichung davon bestimmt und bewertet.

Nach Beenden der Aufnahem gelangt man automatisch zum Statistikbereich der Anwendung. Man kann diesen Bereich auch erreichen in dem man die entsprechende Schaltfläche des Startbildschirms betätigt(Zweite von rechts).

Der Statistikbereich stellt die Auswertung der Bewegungen zu den Idealbewegungen grafisch dar. Man hat hierbei die Möglichkeit die Resultate mit denen eines anderen Tages direkt zu vergleichen, um seine Verbesserung oder Verschlechterung in den verschiedenen aufgelisteten Disziplinen selbst zu sehen.

Unter den Statistiken schlägt die App dem Anwender Lernvideos vor, um seine Defizite in diesem Sport direkt anzugehen.

Zu den Videos gelangt man nicht nur über das Statistikfenster sondern auch über die anwendungsinterne Videoauflistung. Eine Schaltfläche hierfür befindet sich auf dem Startbildschirm ganz rechts.

Die Videoauflistung beherbergt alle verfügbaren Videos, unterteilt in drei Schwierigkeitsstufen: Beginner, Fortgeschrittene und Profis.

Die Statistik empfiehlt dem Anwender stets nur Videos entsprechend seines Könnens, im Videobereich dagegen kann er alle Videos die für ihn von Interesse sind jederzeit aufrufen.

Die Videos werden in diesem Bereich mit einer Einleitung kurz erklärt. Über eine Schaltfläche gelangt man dann direkt zum Video oder über eine weitere Schaltfläche (i) zur Theorie in schriftlicher Form und sonstigen Informationen zum Thema.

Der Videobildschirm entspricht dem Standard des Blackberry-Systems. In dieser Anwendung dient er vor allem der schnellen und unkomplizierten Informationsaufnahme, da alles wissenswerte bildlich vorgeführt wird.

Die verwendete Tennisspieler-Vektorgrafik im Hintergrund des Startscreens stammt von hier, der Videoausschnitt im Videobereich stammt von hier und das Beispielbild für das zweite Video von hier.

Das Blackberry-Template sowie die Infografiken am oberen Bildschirmrand und das UI im Videoplayer sind Eigentum von Research In Motion Limited.

Das HEAD-Logo auf dem Startscreen ist Eigentum von HEAD.

Alle weiteren auf den Screens zu sehenden Grafiken sind selbst entworfen.

Mockup

Stellt man sich vor, HEAD würde das Ziel verfolgen seine Webseitenbesucher zu Tennisprofis auszubilden, so ist in der modernen Zeit der Gedanke nicht fern, dieses Vorhaben mit einer Anwendung für das Mobiltelefon zu unterstützen.

Doch wie kann ein Programm jemandem effektiv etwas beibringen?

Ich habe mir gedacht, dass diese Anwendung in der Lage sein müsste das Verhalten des Spielers zu erfassen, auszuwerten und danach mit Lehrvideos Tipps zum besser werden geben.

Diese Anwendung könnte sich beim Start mit einem vorbereiteten Tennisschläger über Funk oder Bluetooth verbinden(bei Problemen auch über eine Schaltfläche auf dem Display).

Nach betätigen einer speziellen Schaltfläche auf dem Display(“record”) würde sie jede Bewegung des Schlägers aufzeichnen und einer entsprechenden Bewegung aus dem Tennissport zuweisen. Die Abweichung von der idealen Bewegung wertet sie dann aus und gibt sie in statistischer Form wieder. Aufbauend auf dieser Auswertung, weiß die Anwendung, wie der Spieler seine Bewegung optimieren kann und berät ihn dann mit den oben erwähnten Lehrvideos in seinem Training.

Aufbauend auf meinem zuvor selbst erstellten Raster, habe ich mich an drei unterschiedlichen Layouts der Landingpage versucht.

Es war für mich wichtig das aktuelle Programm der Marke, What’s your Game?, das auch zu unserem Thema “Wie werde ich Tennis-Profi?” passt, an oberster Stelle zu platzieren. Ungünstig hierfür waren die vier Spalten meines Rasters, wo die Kampagne sich allerdings um fünf Stile dreht.

Beim ersten Layout habe ich den neusten Stil noch rausgelassen, da die Kampagne bis vor Kurzem noch mit nur vier Stile hatte und der fünfte noch ganz neu ist. Es war auch schwer an Bildmaterial für eben diesen Stil heranzukommen.

Layout 01 (3-seitige PDF, inkl. Raster)

Dem Hauptprogramm der Marke folgen die für unser Thema “Wie werde ich Tennis-Profi?” die besonders wichtigen Bereiche Fitness und Gesundheit. Direkt neben den großen Überschriften der Bereiche finden sich weiterführende Links, die das entsprechende Thema, das den Besucher interessiert näher beleuchten.

Ebenfalls sehr wichtig zum Verbessern im Sport ist die Community, die ebenfalls in allen Layouts weit oben ihren Platz gefunden hat.

Layout 02 (3-seitige PDF, inkl. Raster)

Beim zweiten Layout habe ich die Darstellung der fünf Stile in die Vertikale gebracht, womit nun alle sauber und passend zum Gesamtbild abgebildet sind.

Erst am unteren Ende findet sich der bei HEAD heutzutage stark vertretene, für das Thema aber nebensächliche, Shop-Bereich. Unter Equipment sieht man die von HEAD vertretenen Produkte nebeneinander aufgereiht und über weiterführende Links erreichbar.

Direkt darunter finden sich die Technologie-Informationen, die  das jeweils darüber liegende Produkt näher beleuchten.

Layout 03 (3-seitige PDF, inkl. Raster)

Die in Layout 03 verwendeten Tennisspieler-Vektorgrafiken im Hintergrund stammen von hier.

Alle anderen Grafiken sind entweder selbst entworfen oder Eigentum von HEAD.