Comunio.de ist ein Fantasy Fußball Manager der hauptsächlich in kleinen Gruppen, zB. im Freundeskreis gespielt wird. Die Nutzer können auf Grundlage realer Ergebnisse und Entwicklungen der Fußball Bundesliga Punkte sammeln und sich mit ihren Mitspielern in einer Tabelle messen. Sie ist das größte und beliebteste Portal ihrer Art im deutschsprachigen Raum.

Besonders die Informationsarchitektur und die visuelle Gestaltung der Oberflächen spiegelt diese herausragende Position jedoch nicht wider und schien uns daher ein ideales Projekt im Rahmen des Kursthemas.

Die Stärken der Seite liegen eindeutig im zugrunde liegenden Spielkonzept und in der bestehenden Infrastruktur (zB. Lizenzen). Hinsichtlich der Gestaltung der Seite lassen sich tatsächliche Stärken jedoch nur schwer oder gar nicht ausmachen.

Über Schwächen verfügt Comunio im Gegenzug aber um so reichlicher. Da wäre zunächst die bereits an anderer Stelle erwähnte unzureichende oder sogar fehlende Informationsarchitektur zu nennen. So gibt es beispielsweise mehrfach Redundanzen spielwichtiger Elemente und unnötige bis verwirrende Verschachtelungen innerhalb der Navigation. Neue Seiten öffnen sich mitunter in einem neuen Fenster was, abgesehen davon, dass es den Spielfluss unterbricht, bezüglich der Relevanz auf der Seite häufig nicht nachvollziehbar scheint.

Der Typografie kommt bei Comunio offenkundig eine äußerst kleine Rolle zu. Auszeichnungen sind rar gesät, Überschriften wirken bisweilen überdimensioniert und die Wahl der Schrift (Std. Sans-Serif) ist angesichts der mittlerweile verfügbaren technischen Möglichkeiten absolut bedenkenswert. Ein weiteres Problem ist die, auf Sportseiten obligatorische, Verwendung von Text und Zahlen innerhalb von Tabellen. Auch hier können die Tatsache, dass diese größtenteils unformatiert und eng stehend daherkommen die Nutzer leicht überfordern.

Alles in allem bleiben Gestaltungsmöglichkeiten unerschöpft, was im schlimmsten Fall zu Missverständnissen oder Fehlinterpretationen führt.

Eine besondere Bedeutung bei der Überarbeitung kam der Neugewichtung der Elemente und damit der, unseres Erachtens nach notwendigen, ›Entschlackung‹ und Umstrukturierung der Seite zu.

Auch die steife und veraltet wirkende Präsentation der Seite wollten wir zugunsten einer helleren, freundlicheren aber auch kernigeren Ästhetik bearbeiten.

Wir entwickelten folgendes Szenario:

• Ein Nutzer will einen Spieler schaut sich auf dem Transfermarkt neue Spieler an.
• Er kauft einen Spieler um seinen aktuellen Kader zu ergänzen.
• Einen Tag später kommt er wieder um zu überprüfen ob der Kauf erfolgreich war.
• Er stellt den neu erworbenen Spieler auf und speichert die Aufstellung.

Mit diesem Use Case waren zwei der wichtigsten Aktionen abgedeckt: Einkauf von Spielern und das Aufstellen eines Spielers von der Ersatzbank. Beides ist aufgrund von Formveränderungen oder Verletzungen immer wieder notwendig.

In den auf Grundlage dieses Use Case erarbeiteten Wireframes verzichteten wir auf Elemente, die uns im Sinne eine flüssigen Spielablaufs unbrauchbar erschienen und veränderten andere so, dass der Nutzer möglichst übersichtlich und eindeutig über die aktuelle Spielsituation informieren würden.

Eine komplette Überarbeitung erfuhr damit zum Beispiel die Statusleiste. Die Punkte ID und Liga fielen weg, da sie für das Spiel im Grunde bedeutungslos waren und die Platzierung und der aktuelle Punktestand wurden aufgenommen, da für Spielentscheidungen relevater.

Auf dem Dashboard, also der Startseite des Nutzers, fügten wir allerdings auch einige zusätzliche Elemente ein. Hier ist insbesondere die aktuelle Tabelle der jeweiligen Liga zu nennen. So muss der Nutzer nach dem Einloggen keine Umwege gehen, um sich über die aktuelle Spielsituation zu informieren. Ebenso werden den Nutzer betreffende Transfermarktentwicklungen direkt im Dashboard angezeigt (zB. Annehmen oder Ablehnen eines Angebotes bei Spielerverkäufen).

Auf Comunio.de bestimmen derzeit hauptsächlich verschiedene Grüntöne das Bild. Tabellen, Fließtext-Boxen und Navigation sind dabei in helleren, Hintergrund und sonstige Elemente in dunkleren Grüntönen eingefärbt. Es überwiegen allerdings die dunkleren Töne.

Mit unserer Farbwahl blieben wir zwar bei Grün als Grundfarbe, ließen aber deutlich mehr Weißanteile zu um die Seite freundlicher zu gestalten und stärkere Kontraste zu erzeugen. Die hellen Grüntöne aus den Tabellen ersetzten wir mit Grau.

Die visuelle Formsprache von TV-Fußball-Übertragungen war Inspiration für die Gestaltung der Überschriften Inhaltsblöcke. Entgegen aktueller Entwicklungen hin zum Flat Design entschieden wir uns bewusst für diesen Effekt um den Nutzern ein bekanntes Bild zu liefern.

Icons sollten nach wie vor wichtiger Bestandteil der Seite bleiben. Um neben den bunten Vereinslogos nicht zu sehr in den Hintergrund zu geraten entschieden wir uns nach einigen farbigen Iterationsschritten für eine einheitlich monochrome Variante.

Das Logo behielten wir in seiner ursprünglichen Form bei, vektorisierten es allerdings und korrigierten es dabei leicht um klarere und eindeutigere Formen zu erhalten.

Die Wahl der Schriftart fiel mit der [Justus Pro](http://www.myfonts.com/fonts/urw/justus-pro/ „Justus Pro bei MyFonts“) auf eine Egyptienne. Da es uns ein Anliegen war, die Seite markanter zu gestalten, und damit von ähnlichen Angeboten abzuheben, entschieden wir uns damit für eine Serifenschrift. Wichtig war dabei, dass sowohl Fließtext, als auch Zahlen gut lesbar sein sollten.

Zusätzlich setzen wir mit der [Museo Sans](http://www.myfonts.com/fonts/exljbris/museo-sans/ „Museo Sans bei MyFonts“) für den Fließtext auf der Seite eine serifenlose Schrift ein.

Im Gegensatz zum Status Quo sieht unser typografisches Konzept eine differenziertere Unterscheidung textueller Elemente vor. Markantestes Segment ist dabei die Statusleiste. So sollen jederzeit Punkte und finanzielle Mittel als entscheidungswichtige Faktoren im Blick sein. Hier arbeiten wir mit Farbe (#000) und Größe des Textes.

Anfangs sahen wir auch für die Fließtexte die Justus Pro vor, entschieden uns dann jedoch mit der Museo Sans eine serifenlose Schrift einzusetzen. Einerseits heben sich so die spielrelevanten Inhalte (Tabellen, Punkte, Nutzernamen, Spielerbewegungen, etc.) besser von den Fließtexten ab, andererseits wirkt die Seite so weniger streng. Wie die meisten Texte auf der Seite sind sie in einem dunklen grau (#333333) gesetzt.

In den Tabellen war es ein Ziel die für den Nutzer relevantesten Daten in den Vordergrund zu rücken. So sind im Kader eines Nutzers auf der Aufstellungsseite beispielsweise die am vergangenen Spieltag erreichten Punkte hervorgehoben und die Gesamtpunkte – weil für die Aufstellung am nächsten Spieltag unwichtig – ausgegraut. Im Transfermarkt ist es umgekehrt, da hier eine Kaufentscheidung eher von der Gesamtleistung abhängen wird.

Obwohl wir zu Beginn des Kurses auch Mobile Endgeräte bedienen wollten, richtete sich das erarbeitete Konzept am Ende hauptsächlich an Nutzer der Desktop-Variante. Dementsprechend konzentrierten wir uns auch bei der Arbeit an unserem [Prototypen](http://philippgeuder.com/comunio „Redesign Prototyp“) auf die Desktop-Nutzer.

Der Prototyp sollte insbesondere das Use Case nachvollziehbar machen. Über eingeschränkte Funktionalität verfügen daher die Seiten:

• Dashboard
• Aufstellung
• Transfermarkt.

Vorlesungen und Vorträge zu technischen Möglichkeiten und Voraussetzungen boten eine gute Grundlage für die anschließende Projektarbeit, in deren Verlauf wir, mit Blick auf das zu Projektbeginn gesteckte Ziel, sicherlich zu einem angemessenem Ergebnis gelangt sind. Die Überarbeitete Struktur und Präsentation machen die Seite deutlich zugänglicher. Gerne hätten wir sie mittels Liquid Layout auch für mobile Geräte uneingeschränkt nutzbar gemacht, was aber aus zeitlichen Gründen leider nicht mehr umsetzbar war.