Start Relaunch

Kabel Eins mit neuem Webauftritt

26

Kabel Eins Relaunch

Websites von Fernsehsendern sind nicht selten bunt, voll, verschachtelt und unübersichtlich. Die Website von RTL ist ein gutes Beispiel hierfür beziehungsweise ein schlechtes, je nachdem. Typisch für Webauftritte von Sendern ist zudem der Portalaufbau, bei dem in drei bis fünf Spalten die unterschiedlichsten Inhalte und Module Platz finden. Der frisch relaunchte Auftritt von KabelEins ist anders.

Auf der Startseite wird der Besucher von einem riesigen Hauptmotiv begrüßt. Auch die Überschriften der jeweiligen Themen-Teaser sind außergewöhnlich groß. Gesetzt in der NeoSans und eingebunden als Webfont kommen hier vor allem Freunde guter Typographie auf ihre Kosten. Aber nicht die Größe der Komponenten ist es, die den neuen Auftritt ausmachen. Das für Fernsehsender wirklich neuartige Bedien- und Navigationskonzept ist es, das, gepaart mit den großformatigen Elementen und dem schicken Screendesign, für eine besondere User Experience sorgt.

Mit der ersten Scrollbewegung fühlen wir uns an Zeiten erinnert, in denen Navigationsleisten noch in Frames steckten. Vorteil der damaligen wie auch der nun auf kabeleins.de reaktivierten Lösung, die freilich nicht mit Frames gelöst ist, sondern mit Hilfe von divs: Die Navigationsleiste bleibt stets im sichtbaren Bereich des Browserfensters., sodass der Nutzer zu jedem Zeitpunk in andere Bereiche der Site springen kann. Die Website wirkt wie eine Mischung aus Blog, bei dem in linearer Abfolge die Artikel aufgelistet sind, und Magazin, das man sich auch auf dem iPad einverleiben kann.

Übersichtsseiten, zu denen auch die Startseite gehört, sind zusätzlich mit einer Seitennavigation ausgestattet, die am rechten Rand platziert ist und die den Zugang zu den im unteren Bereich liegenden Inhalten erlaubt. Bei Aufruf einer Seite erscheint dieses Element in geöffnetem Zustand, um sich kurze Zeit später als Box zu verkleinern. Ein Ansatz, den man als Nutzer erst einmal erlernen muss. Dank ansprechender Optik und Haptik – gemeint ist mit diesem Begriff die visuelle Rückmeldung bei Interaktion durch den Nutzer – wird es Nutzern allerdings leicht gemacht, sich mit dem doch neuartigen Interface umzugehen.

Ein Schwachpunkt in der Usability ist die fehlende Kennzeichnung des angeklickten Navigationspunktes. Bei Klick auf „Auto“ sollte dieser auch nach Aufruf der entsprechenden Seite orange dargestellt sein (siehe Screenshot oben). Rollover- und Aktivzustand ließen sich hier zusammenführen.

Fazit

Kabeleins.de war bislang ein vollgestopftes Portal(monster), bei dem die Startseite überladen und das Interface eher gewöhnlich war. Mit dem Relaunch gelingt es dem Sender, sich von anderen Webangeboten deutscher TV-Sender abzuheben. Vielleicht erlebt die festsitzende Navigationsleiste ja eine Renaissance, denn auch Fork Unstable Media legte Anfang Juni einen Relaunch hin, bei dem ein fest sitzender Navigationsbalken Teil des Konzeptes ist. Der Ansatz ist ein ähnlicher. Der Kabel Eins-Auftritt schöpft die technischen Möglichkeiten der heutigen Zeit voll aus. Eine gelungene Verbindung aus Information und Interaktion. Das Design ist smart, frech und dabei funktional. Kabeleins.de ist anders und anders ist in diesem Fall gut.

Realisiert wurde der Auftritt von der Abteilung Multimedia TV-Marken bei SevenOne Intermedia.

26 Kommentare

  1. Ich bin tatsächlich sehr angetan vom Relaunch. Viel Inhalt, der aber ansprechend und im Verhältnis zu anderen Angeboten recht übersichtlich präsentiert wird. Dazu wirken die zahllosen abspielbaren Clips einladend – und agieren dabei nicht nur als Lockvögel für verschachtelte Untermenüs, in denen man sich mühsam durch endlose Punkte klicken muss, um endlich irgendwann zum gewünschten Filmchen zu kommen. Nein: man klickt und guckt.

    Ich muss sagen, das ist der angenehmste Web-Auftritt einer TV-Marke, der mir bislang untergekommen ist – sehr modern und (pardon) multimedial, ohne die klassischen Anforderungen an ein Surf-Angebot zu vergessen. Prima!

  2. Sehr gut gefällt mir, dass die schöne Neo Sans als Webfont integriert ist. Auch sonst eine schön zeitgemäße Umsetzung. Gute Nutzerführung, Bedienbarkeit, Übersichtlichkeit. Große Schriftgrößen, anständige Lesbarkeit.

    Von mir ein “Daumen hoch”. Bravo.

  3. Ich finde das Scrollkonzept fühlt sich sehr ungewohnt an. Das mit der omnipräsenten Navigation hätte man auch anders lösen können, zumal auch die blinkenden Werbebanner jetzt immer im Blickfeld sind.

  4. am meisten stören mich die beiden werbebanner oben und rechts, die auch noch fest positioniert sind. zusammen mit dem festsitzenden header schrumpft der eigentliche viewport auf ein minimum. bei einer browsergröße unter 1280px breite sieht das alles ziemlich furchtbar aus – hier hätte man diese breiche für kleinere auflösungen scrollbar machen sollen. hinzu kommen einige usability fehler, wie z.B. der menüpunkt “sendungen von a-z”, der anders als die restlichen punkte als dropdown öffnet. der neue auftritt ist zwar sehr modern umgesetzt, aber alles in allem finde ich ihn ziemlich schwierig zu navigieren.

    portale wie die von dmax oder dem zdf sind da meiner meinung nach deutlich besser bedienbar und sehen ebenfalls ansprechend aus.

  5. Die feststehende Navigation empfinde ich eher als Störend, da dadurch auch der Webebanner immer im Sichtfeld bleibt. Gut für Werbepartner. Unangenehm für den Nutzer. Technisch interessant finde ich, dass die Bild beim Scrollen oben anschlagen und stehen bleiben, die Inhalte scrollen dann darüber hinweg. Des ist eine sehr interessante Sache und habe ich in dieser Form noch nie vorher gesehen. Schade finde ich hingegen, dass die Clips nicht direkt auf der Starseite abgespielt werden. Das wäre das i-Tüpfelchen technischer Rafinesse.

    Alles in allem ein gelungener Relaunch. Nur mir persönlich behagt die feststehende Navigation nicht.

    Eine Sache geht mir gerade noch durch den Kopf. Wie schaut die Seite wohl im IE6 aus? ;) Auf dem iPad fallen die ganzen Effekte flach. Die Navigation scrollt mit und die Überlagerungen beim Verschieben gibt es nicht. Leider klemmt das Logo direkt am Bildschirmrand. Ansonsten eine sehr gut Lösung. An alles gedacht.

  6. Zur Seite des ZDF – da hatte ich ein interessantes Erlebnis. Ich fand sie immer recht gelungen, bis ich eines Tages meinen Vater (71 und Internet-affin) am Rechner beobachtete. Er versuchte recht verwirrt, sich durch das ZDF.de-Angebot zu klicken.

    Auf meine neugierige Frage, was ihm dabei so schwer fällt, antwortete er, dass die Seite ihm riesige Schwierigkeiten macht. Die unruhigen Größen der Vorschau-Bilder, die Schattenwürfe, die verschiedenen Farben und Font-Größen bei “Themen von A-Z”, die unmotivierte Einbindung der verschiedenen Info-Fenster (aktuelle Nachrichten klein rechts oben, das aktuelle Wetter viel weiter und viel größer unten, dazwischen der statische Mediathek-Link und winzig klein die Schlagzeilen) – er fand sich einfach nicht zurecht.

    Ich bin geneigt, ihm zuzustimmen. Auf den ersten Blick gefällt mir die Seite, aber auf den Zweiten finde ich kein stimmiges Konzept hinter den unterschiedlichen Größenverhältnissen, den Positionen und Größen der Fonts und der Links. Da gefällt mir der Angebot von Kabel1 deutlich besser.

  7. Sitze am Laptop und habe hier eine Auflösung von 1366×768. Da habe ich nur ein kleines Stück vom Inhalt den ich jetzt hoch und runterscrollen kann. Das geht gar nicht!

  8. Bei meinem Firefox habe ich auf dem Notebook ungefähr 600 Pixel in der Höhe zur Verfügung (Tabs, Webdeveloper etc). Mit dieser wuchtigen Navigation bleibt nicht mehr viel vom sichtbaren Bereich übrig. Ich wollte immer scrollen, um die Navigation wegzubekommen… Ging nicht.

  9. Ich bin mir mit dem festen Kopf nicht sicher – auf einen großen Bildschirm wirkt das ganz fein, ich gehe aber davon aus, dass das Ganze auf einem Laptop mit geringerer Auflösung echt nervt. Man sieht immer die Werbung und den Naviagtionskopf und hat nur einen Spalt Content im Blick. Besser wäre es m.E., wenn die Werbefläche wegscrollen würde und der Kopf dann am oberen Browser-Ende fixiert wäre.

    Desweiteren ist die Schrift auf den Teasern zu groß und wuchtig, in klein läuft die Schrift zu einem mächtigen weißen Block zusammen, hier ist die Kontrastwirkung nicht optimal. Das ganze wirkt ziemlich marktschreierisch (vielleicht soll das so sein?), weniger wäre hier mehr. Schrift ist kein Selbstzweck und sollte sich deutlich zurücknehmen. Ein bisschen mehr Luft zwischen den Objekten würde der Seite ebenfalls guttun.

    Die Seite wirkt alles in allem modern und übersichtlicher als vieles, was in dieser Branche sonst noch online ist. Dass sie sehr duster daherkommt ist für mich kein Problem, es sind einige nette Effekte eingebaut, die überraschen und einen Aha-Effekt auslösen.

  10. Ich habe das gleiche Problem wie Nils. Zudem ist die Seite noch nicht einmal zentriert.
    So ist, wenn überhaupt, ein Drittel meines Browserfensters mit Inhalt gefüllt… geht gar nicht. Außerdem fühlt sich die Scroll-Navigation irgendwie komisch an. Für mich wirkt das alles sehr beengt.

  11. Auf den ersten Blick ganz cool, auf den zweiten Blick aber eher nervig, gerade was das feststehende Menü betrifft. Und auf normalen Bürorechnern scrollts sich eher sehr ruckelig, das stört mich eigentlich noch mehr…

  12. Also was Fernsehsenderwebseiten angeht sehe ich ganz klar ARTE vorne! Vorallem mit deren Konzept Arte+7 (alle Sendungen 7 Tage lang online anschaubar).

  13. Interessant ist das Scrollverhalten. Die Teaser-Bilder snappen irgendwann oben an (vielleicht etwas zu spät) und beim Weiterscrollen legt sich der Content über das Bild. Sehr seltsam. Vor allem, wenn man schnell scrollt, hat man das Gefühl, die Seite hackt massiv.

    Ansonsten gefallen mir die Proportionen nicht. Das wirkt irgendwie unschön und klämmig. Die fehlende Breite ist bei fehlender Höhe durch die feste Navigation wird besonders krass sichtbar, in der Programmübersicht. Das geht gar nicht. Kann man dann auch gleich weglassen.

  14. Kann mich dem großen Lob momentan noch nicht anschließen. Es handelt sich nicht um ein momentan gefragtes “Responsive Layout” und auf dem großen Monitor hier steht nur eine relativ enge Spalte zum Scrollen zur Verfügung. Die verspielten Verschiebungen beim Scrolling sorgen eher für Verwirrung.

    Der Versuch die Teaser “magaziniger” wirken zu lassen funktioniert noch nicht so recht. Denn ich sehe hier kein funktionierendes Raster. Die Bilder und Texte stehen mehr nebeneinander als das die ein harmonisches Layout ergeben.

    Dutzende von grellen Reitern stehen zeitweise in sehr enger Abfolge untereinander und verhindern das so etwas wie “Usability” aufkommt.

    Den Dolchstoß versetzt sich die Seite (obwohl sie selber nichts dafür kann ;) durch den Einsatz der gigantischen Banner (Winkelhaken?). Diese üblen Dinger erzeugen auch auf anderen “großen” Portalen Kopfschmerz und Übelkeit beim Betrachter.

    Schade das die ganzen positiven Neuerungen so nicht zur Geltung kommen, und ein “wahrscheinlich” sehr ansehnliches Konzept noch wie eine Betaversion daherkommt.

    Dran bleiben!

  15. Interessant, dass P7S1 bei seinem Sender-Homepages vom Baukastenkonzept wegkommt. Waren bis vor ein paar Jahren sat1.de prosieben.de und kabeleins.de quasi identisch aufgebaut, dürfen die Sender nun Profil zeigen – zumindest im Internet. Im TV haben die Sender dank üppigem Sendungsaustausch inzwischen jedes Profil verloren.

  16. Sehr neu, sehr frisch, gefällt mir gut. Hier sticht Kabel1 positiv heraus aus der Masse der schlecht designten und/oder völlig überfüllten Sender-Webseiten à la RTL oder Pro7. Kann hier nicht meckern. Habe schon schlechtere Seiten-Relaunchs gesehen ;-)

  17. Also auf meinem Laptop (1366×768) ist der Inhaltsbereich sehr groß. 495 Pixel vom unteren Rand der Navigation bis zum unteren Rand meines Bildschirms. Reicht eigentlich aus, um die Inhalte der Seite zu sehen. Dennoch finde ich so eine feststehende Navigation sehr störend…

    Ich kann auch nicht nachvollziehen, warum man sich plötzlich für schwarz als dominierende Farbe entschieden hat. Im TV taucht die Farbe doch gar nicht auf. Da fand ich den beige-Ton der alten Seite passender und vor allem angenehmer.

  18. @Achim: wenn es nur das wäre… In vielen Bereichen hätte mehr Freiraum der Seite ganz gut getan.

    Bezüglich der Werbung die das ganze dann ganz nach unten zieht wurde ja eigentlich schon alles gesagt. Ein Vergleich: Ein Sterne-Koch hat ein leckeres Essen zubereitet, und serviert dies dann auf einen Teller, der rundherum mit Fäkalien beschmiert ist. Da kann das Essen dann noch so köstlich sein… ich würde mal sagen, dass es dann auch keiner mehr anrührt… ;) Der Kontext macht es halt aus!

    Aus Programmiertechnischer Sicht wurde sich auch ein wenig zu sehr ausgetobt. Gut, ich mache das auch schonmal – das meiste fliegt aber dann vor der Veröffentlichung einer Seite raus, weil es einfach nicht dienlich ist, sondern eher nur behindert.

    BTW: Auf meinem iPad sieht die Seite da schon VIEL besser aus! Erstmal gibt es keinen Werberand rundherum, und zum anderen scrollt die Navigation mit. Also Notenmäßig würde ich der Seite für den Desktop eine 5+ geben, und auf dem iPad eine 2.

  19. Ich kann ja verstehen, dass man eine grundsätzliche Aversion gegenüber Werbung hat. Dass allerdings im Rahmen einer Beurteilung des Webauftritts eines privaten Fernsehsenders, der sich prinzipiell über Werbung finanziert, Werbung dämonisiert wird, ist doch schon verwunderlich. Werbung ist nun einmal essentieller Bestandteil ganz vieler Webangebote. Die Aufgabe von Screendesignern ist es, diesem Umstand Rechnung zu tragen und die bestmögliche Lösung anzustreben. Ich vermute einmal, dass diejenigen, die in den Kommentaren Werbebanner als störend bezeichnen, noch nie eine Weboberfläche INKLUSIVE Werbebannern gestaltet haben.

  20. Ich fand es eigentlich ganz gut, nicht mein Stil, aber professionell umgesetzt, so von der Optik und dem komischen Bilder-Scroll-Verhalten her. Habe mich nur über den ungenutzten Freiraum über der Navigation gewundert, jetzt aber beim Lesen der Kommentare bemerkt, dass da wohl Werbung hingehört, die mir mein Noscript ausgeblendet hat.

    Als nächstes hätte ich jetzt aber auch überprüft, inwieweit die Seite mit dem Ausgabemedium mitwächst oder -schrumpft. Offenbar tut sie das aber nicht, und das geht ja nun schlicht wirklich überhaupt gar nicht: fixe Positionierung auf kleinen Bildschirmen.

Kommentieren

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src> <a> <blockquote>