Usability misst den Grad des Usererlebnisses und kann damit umschrieben werden, wie einfach es ist eine bestimmte Aufgabe zu erfüllen. Usability Guru Jakob Nielson umschreibt dies folgendermassen:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

Wenn ein Websitebesucher zu lange warten muss, oder unerklärliche Fehlermeldungen auftreten, wenn ein Checkoutprozess nicht intuitiv ist, oder wenn man sich unnötigerweise mühsam für etwas registrieren muss, wird das Erlebnis auf der Website geschmälert und der Besucher entwickelt ein negatives Bild gegenüber dem Präsentierer.

Vielfach genügt nur schon eine grössere Schrift um das grundlegende Bedürfnis nach klarer Lesbarkeit zu erfüllen. Oft wird vergessen, dass eine Internetseite nicht nur am Desktopbildschirm von 20-Jährigen angesurft wird, sondern auch von Senioren auf einem iPhone. Die Kombination von kleinen Schriften und schlechten Kontrasten schliesst eine potentielle Zielgruppe aus, die immer grösser wird.

Es gibt auch einige Regeln, die beim Design und der Umsetzung beachtet werden sollten. Wie z.B. die Limitierung der Hauptnavigationseinträge auf sieben, da das Kurzzeit-Gedächtnis nicht mehr speichern kann. Oder die 3-Klick-Regel, die besagt, dass ein User mit maximal drei Klicks zu seinem Ergebnis gelangen sollte (Wenn auch dies schwierig ist so universal zu definieren, da gewisse Prozesse wie eine Bestellung in einem Onlineshop durchaus sechs und mehr Klicks beinhalten kann.).
Weitere interessante Aspekte betreffen die Psychologie. Da gibt es z.B. das Baby-Duck-Syndrom, das besagt, dass Besucher sich an das erste Design gewöhnen und danach alle anderen basierend auf dem ersten beurteilen. Dabei zeigt sich oft, dass User eher Designs bevorzugen, die dem ersten ähnlich sind und andere für schlecht befinden. Oder Banner-Blindheit, eine Fähigkeit, die es ermöglicht, unwichtige Elemente wie Bannerwerbung oder Inserate unbewusst auszublenden.
Desweiteren gibt es bezüglich Logodesign und Anordnung von Elementen eine ganze Liste mit psychologischen Erkenntnissen, die das Surfverhalten massgeblich beeinflussen.

Nachfolgend eine Checkliste, die bei der Umsetzung für eine Webseite herangezogen werden kann:

1. Aktive Navigation: Inklusive Hover-Effekte und Anzeige des aktiven Navigationsbaumes
2. Klickbare Labels in Formularen: Auch im Hinblick auf Accessibility für alternative Devices
3. Möglichst grosse Klickflächen: zur Verbesserung der Bedienerfreundlichkeit
4. Geführte Prozesse: wie z.B. bei einem Checkoutprozess mit einem Progress-/Prozessbar
5. Call-To-Action Links und leicht auffindbare Kontaktlinks: Da viele Leute immer noch den konventionellen Weg über das Telefon u.a. suchen
6. Strikte Trennung von Layout und Inhalten: Im Hinblick auf ein Redesign oder Portierung auf alternative Devices wie Screenreader

\\ tags: usability, webdesign

Dass Seitenlayouts nicht mit Tabellen und unsichtbaren GIF’s aufgebaut werden sollen, ist ja nix Neues, auch wenn dies von führenden Firmen und deren Webagenturen auch noch im Jahre 2009 praktiziert wird. 8 der 20 an der SMI kotierten Grosskonzerne schwören immer noch auf die veraltete Technik -> hier, hier, hier, hier, hier, hier, hier, hier. Die Nachteile liegen auf der Hand: Mehr Code, der zu längeren Ladezeiten führt und der nur schwer zu unterhalten oder umzugestalten ist, Plattformunabhängigkeit die nicht gegeben ist, Probleme beim Drucken, schlechte Indexierung bei Suchmaschinen, usw.

Die INM setzt Layouts für ihre Kunden schon seit langem nur noch mittels CSS um und verwendet nur den neusten Dokumenttyp-Standard XHTML 1.0.

Nachfolgend eine Auflistung mit kurzen Tutorials zu immer wiederkehrenden Problemen und best Practices im Zusammenhang mit CSS und HTML:

• Sticky Footer: Ein Seitenfooter, der immer zuunterst auf der Seite stehen soll. Wenn der Inhalt kürzer als das Browserfenster ist, dann soll der Footer am Rande des Fensters sein.
• Vertikale Zentrierung: 5 Möglichkeiten, eine vertikale Zentrierung hinzubringen. Eine Thematik, die seit eh und je bei Webdesigner für Kopfzerbrechen sorgt.
  
• Layout mit immer gleich hohen Spalten: Auch diese Problematik taucht immer wieder auf und kann nicht einfach so gelöst werden.
  
• Effiziente Print Stylesheets: Ein paar Tips, die beim Erstellen eines Stylesheets für die Druckausgabe berücksichtigt werden sollten.
• iPhone CSS: Mit der CSS-Klasse @media only screen and (max-device-width: 480px) { } können Elemente gezielt für den iPhone angesprochen werden.
• 10 weitere herausfordernde CSS-Techniken wie z.B. interessante Menüeffekte, erweiterte typographische Möglichkeiten mit CSS, CSS Charts oder dynamische CSS Variablen.
  

\\ tags: css, webdesign

Bisher gab es zur Frage, welche Sprache sich für das Web in Zukunft durchsetzen wird, keine klare Antwort, aber mit der Ankündigung des W3C, dass die Arbeiten an XHTML2 Ende dieses Jahres gestoppt werden sollen, scheint sich HTML5 als Sieger dieser “HTML-Wars” durchgesetzt zu haben.

Was macht aber HTML5 zum Favoriten gegenüber XHTML2?

1. Semantische Elemente wie <header>, <nav>, <article> oder <footer> erleichtern den Aufbau des Seitenlayouts und liefern zugleich eine logische Beschreibung der Dokumentenstruktur.
2. Tags wie z.B. <audio> oder <video> erleichtern die Einbindung von multimedialen Elementen ohne sich um Plugin-Abfragen kümmern zu müssen.
3. Die Ausweitung der API um Funktionen wie Drag&Drop, Offline Browsing oder Geolocation machen es für Entwickler noch einfacher, ansprechende und interaktive User Interfaces zu entwicklen.
4. Die Syntax ist – wie HTML4.01 – nicht so strikt wie XHTML. Standalone Tags wie <img> oder <br> müssen nicht zwingend abgeschlossen werden.

Gerade der letzte Punkt aber wird zu vehementen Diskussionen führen und eingefleischte Entwickler werden die Nase ob der erlaubten Nachlässigkeit beim Codieren rümpfen. XHTML2 ist ein Derivat von XML und jeder Tag muss sauber abgeschlossen werden. Dies ermöglicht ein schnelleres Rendering der Page, da der Browser sich nicht um Eventualitäten kümmern muss falls ein Tag offen gelassen wird.

Es scheint aber, dass HTML5 schnell Akzeptanz finden wird, da bereits grössere Projekte darauf basieren, wie z.B. Google’s Monsterprojekt Wave. Auch Devices, die auf der Webkit Rendering basieren, wie z.B. iPhone’s 3Gs oder Google’s Android, und auch Browser wie Opera 10 oder Firefox 3.5 bieten bereits eine fast 100%-ige Unterstützung der neuen HTML5-Tags.

Nichtsdestotrotz werden XHTML-codierte Seiten eine Daseinsberechtigung haben und nicht so schnell verschwinden. Heutige, auf XHTML-Standards codierte Seiten werden auch noch in 10, 20 Jahren korrekt gerendert, einfach weil die Syntax sauber ist und heute ein De Facto Standard ist.

Weitere Links zu HTML5:

• HTML 5 Demos and Examples
• HTML5 Gallery
• 23 Essential HTML 5 Resources

Was denkt Ihr? Wird sich HTML5 durchsetzen, und wird XHTML2 sogar verschwinden? Wie lange geht es, bis Webentwickler wirklich alle Möglichkeiten von HTML5 ausschöpfen werden können?

\\ tags: html5, xhtml