Derzeit arbeite ich wieder einmal an einem grösseren Web-Projekt, das in den nächsten Wochen online gehen wird. Normalerweise liefere ich bei Aufträgen sowohl Design als auch Programmierung (HTML, CSS und PHP) und Einfüllen der Inhalte aus meiner Hand, einem Generalunternehmer gleich.

Dieses mal wurde das Design von einem Grafiker angeliefert und von mir dann (mit Ach und Krach) umgesetzt. Bei meinen Designs achte ich dank meiner Erfahrung in der Umsetzung von Photoshop-Screens in funktionierendes HTML mit CSS automatisch darauf, dass ich nichts hineindesigne, was sich nachher mehr schlecht als recht umsetzen lässt. Trotz einiger Hindernisse (am zeitaufwändigsten war ein Schatten der „Inhaltsbox“, der unterschiedliche Seitenhintergründe überlagern sollte) konnte ich das Design schlussendlich umsetzen. Sichtlich stolz, denn anscheinend kriegt man mit CSS, Hartnäckigkeit und Tüftelei heutzutage fast alles hin – und sogar Cross-Browser-kompatibel.

Die ewigen Streitpunkte

Nachdem das Template fertig gestellt war, füllte ich die von der Auftraggeberin verfassten Inhalte in die entsprechenden Seiten ab. Bei der Durchsicht von Auftraggeber und Grafiker wurden aber zwei Wünsche laut:

Kleinere Schriftgrössen

Gemäss der Dank Web 2.0 herrschenden Auffassung kann Schrift fast nie zu gross sein. Deutlich anders war dies noch vor wenigen Jahren – die Grafikstudios unterboten sich gegenseitig mit „hippen“ Designs und noch kleineren Schriftgrössen. „Ist doch egal, wenn der Kunde den Text gar nicht lesen kann – wir designen für unsere Kollegen und all die schicken Bücher, in denen herausragende Werke alljährlich publiziert werden“ schien das Motto zu lauten. Kam hinzu, dass viele Designer und Web-Seitengestalter selbst 10 oder 11px-Texte problemlos lesen können. Das doppelt so alte Leute wie die Schöpfer von Web-Sites Probleme haben könnten, kleine Pixel-Schriften zu lesen, schien damals niemanden in den Sinn zu kommen.

Seit Web 2.0 scheinen Schriftgrössen kein Kritikpunkt mehr zu sein: Arial und möglichst gross, ein paar Verläufe und Rundungen, schon strahlt einem Web 2.0-Flair entgegen. Und ich muss sagen: Es gefällt mir. Wahrscheinlich mit dem Aufkommen von Weblogs und der vermehrten Lesetätigkeit bemerkten auch die hinterletzten Designer, a) den Benutzern lesbare Schriftgrössen vorzusetzen und b) die Benutzer diese im Notfall auch selbständig adjustieren zu lassen (wie oft betätige ich heutzutage Apfel-+, wenn ich längere Texte lesen muss? – priceless!).

Vereinzelt – wie bei diesem Projekt – gibt es aber immer noch Leute (vom Fach), die sich an einer 11px-Navigation nicht stören. Mit meinen anscheinend falschen Argumenten konnte ich leider auch nichts ausrichten, gab aber auch relativ schnell auf: Da ich nur als „Coder“ ausgewiesen werde, war mir ein Kampf gegen Windmühlen aber zu schade.

Links

Beim Wunsch, Links doch in der Standardformatierung nicht zu unterstreichen, standen mir die Haare zu Berge. Immerhin hatte ich dieses Mal gewichtige Argumente im Köcher, und zwar von niemand geringerem als dem Usability-Guru Jakob Nielsen:

Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.

Quelle: Guidelines for Visualizing Links

Meine Argumentation, dass der Benutzer Links auf den ersten Blick erkennen müsse, in dem man diese a) farblich wie auch b) mit Unterstreichung aus dem Begleittext hervorhebt, verpuffte auch hier: „Benutzer können ja über die Links fahren und erkennen anhand des anderen Cursors, dass es sich um einen Link handelt.“ Naja – ich als User möchte nicht die Maus über jede farbige Hervorhebung im Text bewegen, um zu überprüfen, ob es sich dabei um einen Link handelt …

Die Unterstreichung musste weg, aber immerhin hebt sich die Linkfarbe (ein wenig) vom restlichen Text ab. Auf Grund der kleinen Schriftgrösse und des mangelnden Kontrastes zur Standardfarbe des Textes sind Links aber dennoch nicht derart auffällig, wie sie es aus meiner Sicht sein sollten.

Der Entscheid aber, besuchte Links schwarz zu färben (und selbstverständlich ohne Unterstreichung), erachte ich als eindeutiger Fehler. Der Kontrast zum restlichen Text ist gleich null – hat erst jemand einen Link geklickt und sucht ihn etwas später wieder, muss diese Person über Adleraugen verfügen, wenn sie ihn wiederfinden will.

Ranglistenführer

Bei den zwei angesprochenen Problemkreise sind in Nielsens Top Ten Web Design Mistakes of 2005 an prominenter Stelle vertreten: Platz 1 und 2 werden von eben diesen Fehlern eingenommen. Auch 2005 scheint sich also doch nicht alles derart gebessert zu haben, wie ich das ursprünglich vermutet habe:

1. Legibility Problems

Bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; […]

2. Non-Standard Links

• Make obvious what’s clickable: for text links, use colored, underlined text (and don’t underline non-link text).
• Differentiate visited and unvisited links.
• Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO). Don’t use „click here“ or other non-descriptive link text.
• Avoid JavaScript or other fancy techniques that break standard interaction techniques for dealing with links.
• In particular, don’t open pages in new windows (except for PDF files and such).

Links are the Web’s number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site.

Quelle: Top Ten Web Design Mistakes of 2005