Tag Archive for 'Design'

Alte Bekannte im neuen Gewand

CodeME

CodeME.de der Internetshop für T-Shirts mit denen Ihr individuell ausdrücken könnt was euch interessiert und bewegt hat ein neues Design verpasst bekommen. Mir persönlich gefällts gut. Die Seite wirkt sehr aufgeräumt und ist Augenfreundlich. Das Video macht Lust auf ein T-Shirt, soweit so gut. Nicht so gut finde ich allerdings, dass das Video automatisch los geht und auch der Sound an ist.

Youtube gibt neuen Player auch für externe Seiten frei

Offensichtlich hat Youtube den neuen Flashplayer jetzt auch für externe Seiten freigeschaltet. Ob, und wenn ja, was sich unter der Haube geändert hat weiß ich garnicht. Offensichtlichste Änderung ist jedenfalls das neue Design und ich für meinen Teil halte es für einen Schritt in die richtige Richtung. Der alte Player mit seinen, zu verspielt wirkenden, runden Buttons hat bei gleicher größe des Players weniger Platz für das Video gelassen weil die Buttonleiste sehr hoch war. Beim neuen sind die Buttons kleiner und nicht mehr so verspielt. Ausserdem kann der neue Player gleichzeitig anzeigen wieviel Zeit schon vergangen ist und wie lange das Video insgesamt dauert. Der alte hingegen hat lediglich die momentane Spieldauer angezeigt.

Hier der neue und der alte Player im vorher nachher Vergleich:

Altes Youtube Player Design Neues Youtube Player Design

Ich denke der neue Player ist ein Schritt in die richtige Richtung. Der neue Player wirkt insgesamt etwas unauffälliger und ist damit gerade für Seiten wie uns, die Player von verschiedenen Anbietern einbinden, ein Vorteil weil sehr eigenwillige Player das Gesamtbild einer Seite zerstören können.

Hört auf eure User

Ein Ratschlag den jedes Internet Start-Up beherzigen sollte.

Was uns, seitdem wir online sind, immer wieder von verschiedensten Stellen zugetragen wurde ist, dass unser Hauptmenü freundlich ausgedrückt Mist ist. Es fanden sich teilweise wesentlich deutlichere Ausdrücke, die ich aber an dieser Stelle nicht wiederholen möchte. Meine Antwort war jedesmal: “Du hat Recht, aber …” Das Aber war meistens zweigeteilt. Denn auch die Kritik am Menü bezog sich hauptsächlich auf zwei Probleme.

  1. Das Design
  2. Die Menüführung

Zum Design wurde häufig vorgebracht, das helle Grün in Kombination mit dem grellen Rot (bzw. Pink damit ich nicht wieder Schelte aus der Frauenwelt bekomme, weil ich nur 16 Farben kenne), sei unmöglich. Zu stark, zu grell und überhaupt eine Beleidigung für die Augen. Gut über Geschmack kann man bekanntlich streiten und es gab auch Stimmen denen Grün und Rot gut gefielen. Aber auch wenn es natürlich schwierig ist alle glücklich zu machen, heisst das nicht, dass man es nicht versuchen sollte.

Was den zweiten Kritikpunkt, die Menüführung, angeht so waren auch wir von Anfang an nicht ganz damit zufrieden. Warum wir es dann so veröffentlicht haben? Der Grund ist ganz einfach, das Menü dient einem einzigen Zweck. Es soll die Navigation durch die Inhalte auf der Seite ermöglichen. Das Problem war am Anfang aber ganz einfach, es gab keine Inhalte durch die man hätte navigieren können. Mitlerweile ist das anders, es gibt Herausforderungen und Wettbewerbe zu allen möglichen erdenklichen Themen. Unsere User waren, was uns natürlich ungemein freut, alles andere als untätig.

Das ist auch der Hauptgrund, warum wir so lange gewartet haben, bevor wir auf die berechtigte Kritik reagieren.

oldmenu.png (zum vergrößern anklicken)

Das alte Menü hatte vier Punkte.

  • Abstimmungen - Alle aktiven und beendeten Abstimmungen können hier gefunden werden. Die Standardeinstellung war beide anzuzeigen, sowohl aktive als auch beendete. Über die Filter in der Sidebar konnte dies dann individuell eingestellt werden.
  • Herausforderung - Hier findet man das Formular um andere Mitglieder herauszufordern.
  • Wettbewerb - Hinter diesem Punkt verbirgt sich das Formular um einen neuen Wettbewerb zu eröffnen.
  • Hilfe - Wie der Name schon sagt. Wer Probleme mit der Seite hat, findet hier hoffentlich die Antwort.

Das Problem dabei war ganz einfach, von den vier Punkten war nur ein einziger, nämlich Abstimmungen, überhaupt für die Navigation durch die Inhalte auf myPEAK.net zu gebrauchen. Herausforderung und Wettbewerb erstellten neue Inhalte und unter Hilfe wird einem hoffentlich geholfen, aber Inhalte findet man dort auch nicht.

Das neue Menü sollte also vor allem erstmal besseren, schnelleren und intuitiveren Zugriff auf die Inhalte ermöglichen.

newmenu.png (zum vergrößern anklicken)

Die neuen Menüpunkte im einzelnen.

  • Start - Bisher startete man direkt auf der Übersicht über alle Herausforderungen und Wettbewerbe, sortiert nach Datum. Ganz oben finden sich dabei immer die Aktivitäten, die noch am längsten laufen. Mit dem neuen Menü werden wir dazu übergehen, als erste Seite eine extra Startseite anzuzeigen. Auf dieser soll kurz erklärt werden, was man auf myPEAK.net machen kann und dann direkt, quasi als Beispiele, 3-4 aktuelle Herausforderungen und Wettbewerbe angezeigt werden.
  • Aktivitäten - Hier kann man sobald das neue Menü online ist, die Übersicht über alle Herausforderungen und Wettbewerbe finden. Nach einem Klick auf Aktivitäten wird sich ein Untermenü öffnen, in dem man nach Herausforderungen, Wettbewerben oder beidem filtern kann. Zusätzlich dazu wird man natürlich weiterhin auch nach beendeten und aktiven unterscheiden können. Für die Zukunft sind dann auch noch weitere Filtermöglichkeiten geplant.
  • Bestenliste - Als nächster Punkt findet sich im Menü auch schon die erste Neuheit. Geplant war sie von Anfang an, aber ohne Inhalte… das alte Henne-Ei Problem. Die Bestenliste wird in verschiedenen Kategorien die besten User auszeichnen. Mehr wird aber erstmal nicht verraten.
  • Gruppen - Um die Kommunikation zwischen den Mitgliedern zu verbessern sollen Gruppen eingeführt werden. Dort können die Mitglieder beitreten und sich in Foren über die Aktivitäten auf myPEAK.net austauschen. Ausserdem wird es innerhalb der Gruppen auch die Möglichkeit geben den anderen Mitgliedern interessante Herausforderungen und Wettbewerbe zu empfehlen. Das Gruppenfeature ist für das übernächste Release geplant.
  • Hilfe - Hier bleibt alles beim Alten. Der Punkt ist wichtig und gehört deshalb auch weiterhin ins Hauptmenü.
  • Neu - Dieser Punkt macht seinem Namen alle Ehre. Er ist komplett neu. Was sich da hinter verbirgt ist ganz simpel. Nach einem Klick auf Neu landet man auf einer Seite, auf der erklärt wird, was eine Herausforderung und was ein Wettbewerb ist und man bekommt die Möglichkeit das eine odere das andere neu zu eröffnen.

Unter jedem der Hauptmenüpunkte kann es Untermenüpunkte geben um die direkte Navigation z.B. innerhalb der Aktivitäten zu erleichtern. Start ist im Prinzip die Seite auf der man landet, wenn man einfach auf das Logo klickt. Da dieses Konzept zwar weithin anerkannt ist, ein Klick auf das Logo führt an den Anfang, so tun sich doch einige Nutzer schwer damit. Aus diesem Grund haben wir mit der Aufnahme ins Hauptmenü eine zweite Möglichkeit geschaffen an den Anfang zu kommen.

Viel Text, viele Gedanken zu einem auf den ersten Blick einfach erscheinenden Thema. Aber der Schein trügt. Die Navigation durch die Inhalte einer Webseite ist eine der Kernkomponenten und sollte unter keinen Umständen so vernachlässigt werden, wie wir das bisher getan haben.

Am Rande bemerkt, ändert sich auch designtechnisch nochmal ein paar Kleinigkeiten auf der Seite. Aber auch Kleinigkeiten können eine große Wirkung haben, gerade optisch. Mehr wird aber noch nicht verraten.

Bezüglich der Designänderungen darf gerne in den Kommentaren spekuliert werden und über Meinungen zur neuen Menüstruktur freuen wir uns natürlich genauso.

Neues aus der Entwicklungsabteilung

Natürlich entwickeln wir kontinuierlich weiter und versuchen die Plattform an allen Ecken zu verbessern.

Eine Sache, die uns negativ aufgefallen ist, ist die Darstellung der einzelnen Wettbewerbsteilnehmer. Was uns dabei primär gestört hat ist die Tatsache, dass man nicht ohne weiteres mal eben durchklicken kann. Wir möchten es also ermöglichen, dass man sich einen Beitrag nach dem anderen ansehen kann. Das ganze möglichst ohne große Verrenkungen, so einfach wie Zappen beim Fernsehen.

Dazu haben wir den entrySwitcher entwickelt. Dort werden immer der aktuelle Teilnehmer und die zwei letzten und nächsten angezeigt. Sollte es in eine Richtung keine weiteren Teilnehmer geben, werden in die andere Richtung vier angezeigt. Diese 5 Teilnehmer kann man dann direkt aufrufen, zusätzlich gibt es nach oben und nach unten Pfeile mit denen man sich durchklicken kann. Eine Sache die mich persönlich immer besonders stört, wenn ich mich z.B. durch Photos klicke ist, wenn das Bild wechselt und der “Weiter”-Knopf nicht mehr an der selben Stelle ist. Deshalb haben wir bei unserem entrySwitcher dafür gesorgt, dass dieses Problem bei uns nicht auftritt. Ich bin mir sicher, ich bin nicht der einzige der sich darüber freuen wird.

Ein Bild sagt allerdings bekanntlich mehr als tausend Worte. Deshalb hier ein kleiner Screenshot von unserem Entwicklungsserver.

entryswitcherscreenshot.png

(zum vergrößern Klicken)

Weil die Teilnehmer jetzt anstelle der Wettbewerbsbeschreibung angezeigt werden, gibt es zusätzlich den Info Button, mit diesem kann man sich die Wettbewerbsbeschreibung jederzeit nochmal anzeigen lassen. Ausserdem wollen wir das zurücknehmen und neu vergeben der eigenen Stimme intuitiver machen. Das ist auch der Grund, warum bisher noch kein Knopf zum abstimmen zu finden ist. Aber wenn alles gut läuft und keine schweren Bugs mehr auftauchen könnte das ganze bereits Sonntag Abend online gehen. Spätestens zur Guten Gesellschaft wird das ganze aber sicher online sein.

Gute Gesellschaft? Wen interessiert worum es sich dabei handelt, der klickt hier. Was myPEAK damit zu tun hat beantworte ich dann am Montag.

Breiter, schneller, YUI!

Wir haben ein paar Veränderungen am Design vorgenommen, aber keine Angst. Wir kopieren jetzt nicht auch noch Facebook.

Auffälligste Änderung ist die neue Seitenbreite. Die Seite ist von 800 auf 974 Pixel gewachsen. Das hört sich zwar so nicht wirklich viel an, aber optisch macht es einen riesen Unterschied. Vorteil der neuen Breite ist einfach viel mehr Platz für Eure Inhalte. Die Videos und Bilder können dadurch wesentlich größer angezeigt werden.

Neben dieser Änderung haben wir noch viele kleine Designfehler beseitigt. Da diese nicht bei jedem aufgetreten sind, profitiert da jetzt nicht jeder von, aber man kann sich ja auch mal für andere freuen. Oder nicht?

Das wir unsere Javascript und CSS Dateien schon seit längerem mit dem YUI-Compressor packen wird der ein oder andere vielleicht wissen. Wir schonen damit nicht nur unsere Bandbreite, sondern was viel wichtiger ist, beschleunigen die Ladezeiten der Seite für euch. Zusätzlich mit der Designänderung benutzen wir jetzt auch noch YUI reset, base, font und grids. Mit diesen Dateien wird uns viel Arbeit abgenommen, was die normalisierung der Darstellung in verschiedenen Browsern angeht und auch im Bezug auf die Positionierung. Ich kann jedem, der sich gerne mal mit CSS rumärgert, raten sich die Sache mal anzuschauen. Es lohnt sich wirklich!

So, ich werd mich langsam mal in Richtung Bett begeben, damit ich morgen früh fit bin. Wie bereits angekündigt sind wir morgen den ganzen Tag auf der Aufschwung-Messe in Frankfurt.

Achja, wer eine Neuerung findet, die ich vergessen habe zu erwähnen, gewinnt einen Monat kostenlose Premiummitgliedschaft… Haha!

Gute Nacht. Morgen, spätestens Mittwoch hab ich dann hoffentlich Gutes von der Messe zu berichten.

Muessen Webseiten in jedem Browser exakt gleich aussehen?

Die Antwort gibts hier.

Via: pixelgraphix

Neue Features

Wir haben eben eine neue Version hochgeladen die neben vielen kleinen Detailverbesserungen auch ein neues Feature mitbringt. Ab sofort findet man auf jeder Wettbewerbsseite einen Widget Code. Diesen kann man auf jeder Seite einbinden auf der Javascript erlaubt ist.

Ausserdem ist es jetzt möglich neben Youtube und Revver auch myVideo als Videodienst zu verwenden. Myvideo ist der einzige deutsche Anbieter der eine API anbietet. Sehr schade eigentlich. Ein paar kleine Schwachpunkte hat die Myvideo API allerdings noch. So ist es z.B. nicht möglich die Videos eines Benutzers abzufragen wenn man die User ID nicht weiss. Das bedeutet, um eure myVideo Vidoes abfragen zu können müsstet ihr uns eure User ID verraten. Diese bekommt man aber nicht ohne weiteres angezeigt. Deshalb ist es vorläufig bei myVideo nicht möglich die Videos per API abzufragen. Ihr könnt die jeweilige Video-URl oder den Embed Code aber von Hand in das Link Feld kopieren.

MyVideo scheint die Entwicklung der API ausgelagert zu haben. Was ich persönlich für keine gute Entscheidung halte, weil ich finde Kernkomponenten sollten im Haus entwickelt werden. Der zuständige Entwickler, mit dem wir in Kontakt stehen, hat auch gesagt, das Feature die Videos über den Benutzernamen abzufragen wäre möglich, aber er kann es nur entwickeln wenn er von MyVideo dazu den Auftrag bekommt.

Ich werde euch diesbezüglich auf dem Laufenden halten. Bis dahin viel Spass mit dem Widget. Das Ganze sieht dann übrigens so aus:

UsabilityBeta

Unsere größte Befürchtung vor der geschlossenen Beta war eigentlich, dass die Software technische Fehler aufweisen könnte. Große Käfer die schlichtweg nicht tot zu kriegen sind. Im übertragenen Sinne gesprochen. Diese Befürchtung hat sich aber erfreulicherweise nicht bewahrheitet.

Es sind natürlich Probleme zum Vorschein gekommen, die wir vorher nicht gefunden haben, bzw. die wir auch garnicht hätten finden können und es gibt auch 2 Fehler die gemeldet wurden, die wir verzweifelt versuchen nachvollziehen zu können, die bei uns aber schlichtweg nicht auftreten wollen. Alles in allem verläuft der Betatest aber sehr gut, zumindest was die technischen Probleme angeht.

Ein anderes nicht weniger wichtiges Thema verlangt allerdings, dass zeigt sich deutlich, unsere volle Aufmerksamkeit.

Continue reading ‘UsabilityBeta’

Website performance do’s and dont’s

Meiner Meinung nach gibt es fast nichts schlimmeres als langsame und träge Webseiten. Dabei muss man unterscheiden zwischen Seiten deren Erstellung Serverbedingt langsam ist und Seiten deren Darstellung im Browser langsam ist.

Der Nutzer bildet sich seine Meinung basierend auf seiner Wahrnehmung. Natürlich ist es wichtig, die Datenbankabfrage am Backend um 3ms zu verbessern. Aber es zeigt sich sehr deutlich, dass das Backend häufig nur einen geringen Teil der gesamten Zeit in Anspruch nimmt. Teilweise bis zu 95% entfallen auf Vorgänge im Browser und es ist schlichtweg nicht richtig, dass man darauf als Entwickler keinen Einfluss hat.

Yahoo hat deshalb auf den Entwicklerseiten 14 Regeln veröffentlicht mit denen sich die Geschwindigkeit des Frontend sehr einfach optimieren lässt.

Continue reading ‘Website performance do’s and dont’s’

Hurra

Es freut mich ganz besonders verkünden zu dürfen, dass wir soeben nochmals eine neue Version hochladen konnten die die größten Fehler beim Internet Explorer behebt. Auch IE Nutzer können jetzt abstimmen und Seiten umblättern.

Das ändert zwar nichts an meiner Empfehlung zu einem der besseren Browser, aber man hat ja als Web-Entwickler keine Wahl. Im übrigen kann ich nur sagen, wenn schon Internet Explorer, dann doch bitte den 7er. Allerdings zeigt unsere Google Analytics Statistik sowieso, dass über die Hälfte unserer Besucher dem Firefox vertrauen. Sehr gut!