Kategorie: Allgemein

Vor ein zwei Wochen habe ich mich mit den Social Media Menschen bei der NW News über Ihres in die Jahre gekommenen Design ausgetauscht. Ging alles los mit diesem Tweet:

Das macht das Layout und Design der @nwnews nicht gerade lesbarer. Arbeiten da überhaupt Designer? pic.twitter.com/z3lRxZSgDu

— Medienproduzent B.A. (@medienproduzent) November 16, 2014

Die Werbung im Internet ist wirklich zunehmend schlimm und nervtötend geworden. Aber wohl viel Licht ist, gibt es auch viel Schatten. Ich nutze eben deshalb keinen Adblocker, weil ich gute Inhalte zu schätzen weiß. Nur Flash Inhalte werden bei mir erstmal nicht gestartet.
Die Konversation endete damit, dass die NW wohl ein neues Design in der Pipeline hat und das wurde jetzt veröffentlicht. Ich möchte das Ganze erstmal Loben und dem Team gratulieren aber auch ein paar Dinge ansprechen die meiner Meinung nach so nicht gehen.

ICH WILL HIER DIE ARBEIT DER PROGRAMMIERER UND DER DESIGNER AUF KEINEN FALL SCHLECHT REDEN, SONDERN LEDIGLICH AUF DINGE HINWEISEN, DIE MIR ALS WEBENTWICKLER AUFGEFALLEN SIND. DIE SEITE IST WIRKLICH SCHICK ABER ES FEHLT AN DETAILS UND TESTS.

Werbung

Werbung muss ja sein, das sehe ich ein. Schaue ich mir auch an. Ich zahle den Preis für gute Inhalte. Aber ich zahle hier etwas viel. Siehe Performance. Wenn ich das hier so sehe, kann ich verstehen warum Nutzer AdBlocker verwenden… Alles flackert, bewegt sich und macht mich ganz kirre. Schlimm.

Das Mega Menu

Das Mega Menu ist das Hauptproblem dieses neuen Designs. Ein Mega Menu sollte versuchen viele Inhalte möglichst strukturiert und übersichtlich darzustellen. Leider geht das hier voll in die Hose. Meiner Meinung braucht diese Seite dieses überdemensioniertes Menu gar nicht. Dazu später mehr.
Ich möchte erst auf die Usability zu sprechen kommen. Nicht genug, dass die Werbung mich ganz kirre macht, dass Menu tut es mit seiner Benutzung auch. Hover ich einen Menupunk, springt mir regelrecht ins Gesicht. Beim scrollen der Seite das Gleiche. Der Mauszeiger „schaut“ den Menupunkt nur an und ich bekomme ein Submenu präsentiert, welches ich garnicht sehen wollte und ich weiß somit garnicht mehr wo ich bin, da sich der Inahlt des Menu´s in keiner Weise vom Inhalt der Seite abgrenzt. Ich bin wieder verwirrt. Wieso nicht einfach das Menu mit einen Klick öffnen?
Des Weiteres scrollt das komplette Menu mit. Und nimmt kostbaren Platz für Inhalte. Denn wenn der Nutzer scollt, will er im Zweifel das Menu nicht nutzen. Eine entschlackte Variante hätte gereicht. So irgendwie:

Nun zu dem Punkt, warum ich der Meinung bin, dass diese Seite kein Mega Menu gebraucht hätte:
Das Menu macht aus dem Grund keinen Sinn, da es versucht Inhalte darzustellen, die der Nutzer nicht braucht. Er klickt die Inhalte an und weiß meistens genau, wo er auf der Seite hin navigieren möchte ohne erste Snippets und Vorschauen im Menu präsentiert zu bekommen. Ich bin auch davon überzeugt, das der Großteil des Traffics über soziale Netze generiert wird und nur ein kleinerer Teil über direkte Zugriffe. Wie oben im Screenshot kurz zusammengefummelt, hätte das Menu mit einer Dropdown Funktionalität völlig ausgereicht. Wichtige, oft besuchte Seite einfach dort anzeigen, fertig. Davon abgesehen sind einige der Menus einfach größtenteils leer.

Die Seite der Hochschule OWL macht das recht gut. Auch wenn das Design etwas in die Jahre gekommen ist.

Ein gelungenes Bsp. eines Megamenus: http://codyhouse.co/demo/mega-site-navigation/index.html

Java Script

Die Seite ist voller JavaScript. JavaScript ist toll. Mag ich. Es gibt im Web aber Statistiken die belegen, dass ca. 1% der Nutzer JavaScript deaktiviert haben (Finde die Statistik gerade leider nicht mehr).  Das scheint auf den ersten Blick recht wenig, geht man aber davon aus, wieviele Besucher die Seite der NW täglich hat, können das schon mal vorsichtig geschätzt 50 – 100 Nutzer sein. Hier mal ein Screenshot der Seite ohne Java Script:

Als Webentwickler weiß ich, dass große Seite nicht ohne JavaScript auskommen, will man dem Besucher mehr bieten als bloße Inhalte. Aber Warum keine Warnung? Ein kleiner Hinweis? Das sind nicht mehr als 2 Zeilen Code. Und es gibt ja auch nocht den http://modernizr.com/ und seine no-script Klasse. Der Besucher wird hier völlig alleine gelassen. Das ist nicht so schön.

Fehler im Java Script

Ja, der Otto-Normalo sieht das gar nicht und bekommt meistens auch nichts davon mit. Die Seite läuft trotzdem, aber solche Fehler sind meistens ein kleiner Schneeball, der zur Lawine wird und Browser finden sowas nicht nett. Genau wie Google und der w3c Validator.

Cookie Warnung

Wo ist die Cookiewarnung?!!

Wetter Widget

Ein Wetter Widget. aha. Warum? „Dont boil the ocean“. Features und Spielereien sind nett, aber nicht, wenn es auf Kosten der Nutzbarkeit und der Übersicht geht. Klammern wir das mal aus und schauen uns das Widget mal genauer an:

Der Hintergrund ist sehr hell und die Typo in weiß gehalten. Ergo man kann es kaum lesen. Abhilfe hätte hier eine einfach If Else geschaffen, welche je nach Wetter einfach die Kolorierung der Typografie angepasst hätte. Falls keine Programmierer anwesend sind, hätte auch ein einfacher Schatten der Schrift funktioniert.

Hier eine kleine schnelle nicht optimierte Anpassung (klick für beste Ansicht):

text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.96);

Immernoch nicht perfekt, aber schon etwas besser lesbar. 2 Zeilen im CSS Code. Um eine Optimierung für ältere Browser zu erreichen, wäre die Abfrage des Hintergrundes und die Textanpassung die bessere Lösung, da text-shadow nur in modernen Browsern (CSS3) funktioniert.
Das Wetter Widget ist auch so eine Funktion, die man als Programmierer total cool findet und eine Implementierung super viel Spaß macht. Leider sehen das die Nutzer anders und wenn man mal ehrlich ist, hat jeder Nutzer genug Wetter Apps auf seinem Smartphone und eine Google Suche bringt ein schnelleres (und hübscheres) Ergebnis…

Typografie

Das Thema Typografie. Serifen gehen nicht. Viele <h*> Überschriften wurden hier in: „Droid Serif“ übernommen. Und nicht nur die Überschriften, auch im Menu finden wir die Serifen-Fonts. Bei einer derart großen Zielgruppe, die nicht über die neusten Monitore und Browser verfügt, ist das eher eine schlechte Wahl. Warum? Serifen verschmieren auf älteren Monitoren. Bildschirme bieten immernoch eine sehr viel geringere Auflösung als Papier. Man sagt Papier bieten 1000 ppi und ein modernes Smartphone gerade mal 400 ppi. Das Ergebnis ist, dass die Darstellung auf älteren Monitoren schmiert und nicht lesbar ist oder zumindest nicht hübsch aussschaut. Desweiteren wurden die Fonts von Google Webfonts eingebunden. Hmm. Ja ok. Kann man machen, aber ein Typekit Font wäre die bessere Wahl gewesen. klarer, kompatibler, kleiner, besser, kostenpflichtig.

Performance

Ich habe die Seite vor 2 Stunden aufgerufen. Seit dem steht mein Ventialtor meines Macbook Pros (i7) nicht mehr still. Das mag an den Flash Inhalten liegen, aber selbst wenn ich diese deaktiviere scheint auf der Seite einiges an JS zu routieren. Safari hat gleich mal den Stromsparmodus auf der Seite aktiviert. aha.

Sicherheit

Oh, wie ich gerade feststellen mußte werden sämtliche Login-Daten der Kunden unverschlüsselt an die Server übertragen. Ernsthaft? Man muss ja keine generelles SSL für die Seite aktivieren (Google mag das seit neustem), aber im Nutzerbereich sollte das schon sein und gerade heutzutage ist das ein unumgängliches Feature. Das sollten die mal schleunigst nachbessern.
Fazit: Für mich fühlt sich diese Seite an wie eine wacklige Beta. Der erste Eindruck ist Top, der zweite floppt. Der Druck, den Programmierer und Designer von „oben“ bekommen ist nicht zu unterschätzen und da wird oft kurz vor der Deadline irgendwas zusammengeschustert. Aber eine solche Seite, in einem solchen Umfang, mit derart vielen Besuchern darf so nicht freigeschaltet werden. Druck hin oder her. Eine Qualitätskontrolle einer unabhängigen dritten Partei hätte hier geholfen. Bleibt nur abzuwarten, wie hier nachgebessert wird. Die mobile Seite habe ich außen vorgelassen. Sieht aber auf den ersten Blick gut aus.

😉

Verwendete Libs der Seite.

• Backbone js
• Google Webfonts
• Bootstrap
• jQuery
• jQuery UI

Webserver: Apache