Die 20 wichtigsten Tipps für benutzbare Websites
Davon, dass eine Website möglichst usable/benutzerfreundlich sein muss, muss man heute praktisch niemanden mehr überzeugen. Trotzdem findet man auf unendlich vielen Sites ganz grobe Usability-Fehler.
Da ist die Liste von Spyrestudios sehr hilfreich, auf der die 20 wichtigsten Usability-Tipps für gute Websites versammelt sind. Zum Beispiel: Das Logo gehört ganz nach links oben. Die Suchfunktion nach oben links oder rechts. Preisangaben und Spezifikationen von Produkten sollten auch beim Überfliegen ins Auge springen.
Alle Tipps sind nicht einfach nur die Meinung der Autoren, sondern es sind erprobte Konventionen. Benutzer kennen diese Dinge von den meisten viel besuchten Sites, und erwarten daher von allen Sites ersteinmal, dass sie sich auch an diese Konventionen halten.
Und, halten Sie sich auf Ihrer Site an alle 20 Tipps? Wenn nicht: haben Sie einen guten Grund, das nicht zu tun?
The Ultimate 20 Usability Tips for Your Website
Google Maps-Karten auf der Homepage kostenpflichtig?
Die Konfusion darum, ob man künftig zahlen muss, wenn man Google-Karten auf seiner Website einbindet beendet Anwalt Ralf Zobel mit seinem Post Google Maps auf der Kanzlei-Homepage bald kostenpflichtig?
Vorab die schnelle Antwort: nein. Die komplizierte Antwort: in manchen Fällen schon, nämlich dann, wenn Sie die API nutzen. Wenn Sie nicht wissen, was das ist, dann bleiben die Karten für Sie weiter kostenfrei. Mehr im oben genannten Post.
Dem König Content die Ehre erweisen – Content Strategy
Das Magazin Website Boosting
In Website Boosting 11/12/2011 stelle ich vor, welche Ansätze dem „König Content“ zu seinem Recht verhelfen. Im Folgenden ein Auszug aus dem Artikel:
Content Marketing
Warum erstellt man überhaupt Inhalte? Wenn man nicht Künstler ist, dann fürs Content Marketing. Das heißt, Sie wollen mit den Inhalten ein Ziel erreichen – Sie wollen sich bekannt machen, Ihr Image stärken, für eine Idee werben oder etwas verkaufen. Ziele erreicht man mit Glück, oder man hat eine Strategie.
Die Content-Strategie hat Überschneidungen mit vielen anderen Disziplinen der Web-Entwicklung.
Dabei ist Content-Strategie wie Projektmanagement: Man kann es nicht nicht machen, man kann es nur schlecht machen.
Heute ist Content-Strategie noch so unbekannt wie Informations-Architektur oder Usability Ende der 1990er Jahre. Sehr häufig ist bei Webprojekten immer noch die Einstellung: „Den Content liefert der Kunde am Ende des Projekts und wir bauen ihn dann ein.“
Was ist Content?
Content sind alle Inhalte einer Site, zum Beispiel
- Text (Blogposts, Website-Artikel)
- strukturierte Information (Tabellen, Produktdatenblätter)
- Fotos
- Grafiken
- Video
- Interaktive Anwendungen, Spiele
Die Schein-Lösung: CMS
Dass der entscheidende Teil jeder Website der Content ist, das war seit den ersten Websites in den 1990ern klar. Trotzdem wurde der Content jahrelang vernachlässigt, ja sogar als Problem behandelt. Mit größer und größer werdenden Sites wurde der Umgang mit den Inhalten immer komplexer. Die scheinbare Lösung für das Problem waren Content-Management-Systeme (CMS).
CMS haben eine überwältigende Zahl von Features. Der Haken ist: die meisten von ihnen braucht man nicht. Und selten wird zuerst die Content Strategie erstellt und dann das CMS ausgesucht. Vielmehr muss man meist versuchen, die Strategie mit dem vorhandenen CMS umzusetzen. CMS nehmen zwar einen Teil der Verwaltungsarbeit ab. Aber trotzdem können sie nicht entscheiden, welche Inhalte wann für welche Nutzer relevant sind. Und auch, wann die Inhalte aktualisiert werden oder archiviert werden müssen, wissen sie nicht. Manche CMS bieten dafür Automatismen – aber sie sind eben genau das: automatisch. Man kommt nicht umhin, regelmäßig Menschen auf die Inhalte schauen zu lassen.
Wozu brauche ich eine Content-Strategie?
Content-Strategie ist die Planung der Produktion, der Publikation und der Pflege von Inhalten, die für die Nutzer relevant sind.
Relevant heißt, dass der Inhalt zum aktuellen Zeitpunkt hilft, das Ziel des Nutzers zu erreichen. Das heißt auch, dass etwas in einem Moment hoch relevant sein kann, im nächsten nur noch störend.
Wir müssen den Nutzern also liefern:
- Was sie brauchen,
- in dem Moment, in dem sie es brauchen,
- in der Form, in der sie es brauchen können (technisch – also z. B. nutzen sie einen PC, ein Tablet oder ein Mobilgerät – wie von der Aufbereitung her – haben sie das notwenige Hintergrundwissen, um die Inhalte zu verstehen).
Der Content muss immer helfen, die Ziele der Website-Betreiber zu erreichen. Damit das möglich ist, muss man sich Gedanken darüber machen, was der jeweilige Content bewirken soll. Dabei sollte man möglichst konkret sein. „Verkaufen“ ist zum Beispiel kein besonders konkretes Ziel. Am besten definieren Sie in diesem Fall, welches Produkt Sie verkaufen wollen, und wie Sie das mithilfe dieses Contents erreichen wollen – etwa, indem sie die Produktvorteile für einen Anwender zeigen, der das Produkt erstmals verwendet.
Gute Inhalte sind aus Nutzersicht:
- relevant
- auffindbar
- verständlich/benutzbar
- anwendbar
- teilbar (z. B. über Soziale Netze)
Gute Inhalte sind außerdem aus Sicht der Website-Betreiber:
- möglichst effizient produziert worden
- durch Metadaten klassifiziert
- für Suchmaschinen zugänglich
- langlebig und wiederverwertbar
Eine Frage, die man klären muss, ist, welches Medium das Richtige ist, um den Content so zum Nutzer zu bringen, dass er für ihn die höchste Relevanz hat. Wobei natürlich Kosten und Zeit auch eine Rolle spielen. Selbst wenn Sie wissen, dass ein Video eigentlich optimal wäre, erlauben es Zeit- und Kostengründe oft nicht, ein solches zu produzieren. Denken Sie aber trotzdem über das richtige Medium nach, bevor Sie einfach das produzieren, was Sie immer produzieren – meist ist das Text. Vielleicht ist aber eine Tabelle kürzer und leichter zu erfassen? Oder Sie erstellen eine einfache Grafik?
Als Nächstes legen Sie den Kanal fest: Blog, Website, Twitter, Facebook, Delicious, Google+, Youtube, Slideshare, Scribd …
So erarbeiten Sie eine eigene Content-Strategie
Eine Content-Strategie sollte idealerweise entworfen werden, bevor der erste Wireframe (Seitenskizze) erstellt wird, unbedingt aber bevor HTML-Code geschrieben oder ein CMS aufgesetzt wird. Denn der Content ist das, wofür Sie eine Website anlegen. Insofern müssen Sie sich damit auch als Erstes beschäftigen.
Content Strategie heißt auch, dass Sie nicht mit Lorem-ipsum-Platzhaltertext arbeiten. Platzhaltertext kann man im Einzelfall verwenden, wenn man aktuell Diskussionen über den Content vermeiden will. Aber dennoch ist es sinnvoll, dass auch die Gestalter von Anfang an wissen, welche Inhalte geplant sind. Denn nur dann können sie ihr Design so anpassen, dass die Inhalte optimal wiedergegeben werden.
Für Ihre eigene Content-Strategie gehen Sie so vor:
- Ziele, Zielgruppen festlegen (sollte eigentlich schon Teil des Website-Konzepts sein)
- Content-Inventar erstellen; Content-Lücken erkennen
- Migrations-Plan erstellen
- Kernbotschaften definieren
- Themen festschreiben (was interessiert die Zielgruppe?)
- Metadaten-Strukur aufstellen
- Styleguide, Vorlagen erstellen
- Editorial Workflow festlegen
- Verantwortlichkeiten bestimmen (wer erstellt, nimmt ab, pflegt den Content?)
- Veröffentlichungs-Kalender schreiben
- Vorgehen für Qualitätskontrolle, Umgang mit Nutzerfeedback definieren
- Analyse der Zugriffe und der Bewegungspfade auf der Site planen
Content-Styleguides gibt es schon bei einigen Projekten. Diese beschreiben aber nur, wie der Content aufbereitet werden soll. Für eine gute Content-Strategie sollten Sie noch einen Schritt früher ansetzen: Legen Sie fest, welcher Content überhaupt auf die Website soll. Wer immer den Content einstellen will, sollte zuvor folgende Fragen beantworten:
- Wer soll den Content nutzen?
- Was bringt dieser dem Nutzer? Beantwortet er Fragen, die er hat? Braucht er ihn wirklich?
- Was ist die beste Form, diese Inhalte zu präsentieren? Ist es wirklich eine Seite Text?
- Wie sorgen wir dafür, dass dieser Content aktuell bleibt?
Lernen Sie, wie ein Medien-Mogul zu denken und bringen Sie Ihren Auftraggeber dazu, das Gleiche zu tun. Wer eine Website betreibt, ist Herausgeber. Und ein erfolgreicher Herausgeber denkt vor allem daran, was seine Leser wollen.
HTML5-Animationen mit Hype
Animationen mit HTML5 zu erstellen ist mühsam, wenn man alles mit einem reinen Texteditor erstellen will. Ein kleines Mac-Programm, das das erreicht, und das mir gut gefällt, ist Hype.
Benutzeroberfläche des Programms Hype
Hype hat eine sehr aufgeräumte Oberfläche, intuitiv lassen sich damit Elemente auf dem Bildschirm erstellen, anordnen und anpassen.
In einer Zeitleiste (Timeline) kann man dann die Änderungen der Elemente in der Zeit vornehmen und damit die Animation erstellen. Die Ansicht in Hype ist Wysiwig, man sieht also sofort, wie alles im Browser aussehen wird.
Ist alles fertig, exportiert man den HTML-Code und kann ihn im Browser testen. Dabei wird auch gewarnt, welche Teile in bestimmten Browsern nicht ganz wie gewünscht dargestellt werden können. Welche Browser und welche Versionen berücksichtig werden sollen, kann man einstellen.
Den Code bindet man als div in seine eigenen Seiten ein, lädt den Ordner mit Ressourcen (JavaScript-, CSS-Dateien) auf den Webserver und schon ist die Animation online (für ein supersimples Beispiel habe ich keine zwei Minuten gebraucht).
Das Programm kostet 23,99 Euro (Einführungspreis) in Apples AppStore. Eine 14-Tage Testversion gibt es auf der Website des Herstellers Tumult.
Flash vs. HTML5
Flash hat in letzter Zeit ordentlich Gegenwind. Spätestens seit dem Erfolg von iPhone und iPad hat sich herumgesprochen, dass das Format für Animationen und komplexe Anwendungen im Web ein Problem hat. Auf anderen Plattformen wie dem PlayBook von RIM (dem Blackberry-Hersteller) und auf Android laufen Flash-Anwendungen – doch leider oft nicht zufriedenstellend, weil die mobilen Prozessoren mit den gewaltigen Hardware-Anforderungen nicht zurecht kommen.
Gegen Flash ist generell nichts einzuwenden. Das Plug-In wird mit den meisten Browsern automatisch installiert, und daher können die meisten Web-Benutzer Flash-Inhalte anzeigen. Dennoch gibt es einige, die das nicht können. Zum Beispiel solche in größeren Firmen mit strikten Vorschriften zu erlaubter Software. Und auch mobile Geräte wie Smartphones und Tablets haben meist Probleme mit Flash. Der Anteil der Besucher, die Flash nicht nutzen können, schwankt je nach Zielgruppe stark, liegt aber meist zwischen 10 und 20 Prozent.
Und doch kommt Flash oft auf Webseiten zum Einsatz, obwohl man es eigentlich gar nicht braucht. Für animierte Banner, für einfachste Animationen oder sogar nur für die Anzeige von exotischen Schriftarten.
Auch die Stabilität, die Sicherheit und die Geschwindigkeit von Flash wird vor allem unter Mac OS und auf mobilen Geräten kritisiert. Das Flash-Plug-In ist hier für manchen Absturz und für manchen unnötig schnell leergelaufenen Akku verantwortlich.
Solitaire, wunderschön gestaltet mit HTML5 (http://pasjans-online.pl/)
Statt Flash kann man aber in vielen Fällen HTML5, Javascript und CSS3 einsetzen (im Folgenden kurz als HTML5 bezeichnet). Mit HTML5 können wir Websites bauen, die schön gestaltet sind, Interaktivität bieten und dabei aus gut strukturiertem HTML bestehen. Das erleichtert das Erstellen, die Wartung und die korrekte Anzeige auch auf zukünftigen Browsern und Geräten.
Die Technologien Silverlight (Microsoft) und Java konnten sich für interaktive Inhalte und Animationen dagegen nicht durchsetzen.
|
|
Flash |
HTML5 |
|
Verfügbar auf |
Windows, Mac, Linux; Android |
Windows, Mac, Linux; Android, iOS (iPhone/iPad), Blackberry |
|
Voraussetzungen Wiedergabe |
Flash-Plug-In |
Moderner Browser (min. IE 9, Firefox 3, Safari 4, Chrome 9) |
|
Standard |
Proprietär (Adobe) |
Offen (W3C) |
|
Anforderungen an die Hardware |
Hoch |
Mittel |
|
Indizierung von Inhalten durch Suchmaschinen |
Nur über Umwege |
Ja |
|
Text kopierbar |
Nur, wenn eigens aktiviert |
Ja |
|
Funktionsumfang |
Groß |
Mittel |
|
Komfortable Entwicklungsumgebung |
Ja |
Nein |
|
Entwicklungszeit |
Kurz |
Mittel bis lang |
Welches die Technik sein wird, die in Zukunft eingesetzt wird, ist Einschätzungssache. Ich glaube, dass Flash als Plug-In-Format mittelfristig verschwinden wird. Das Programm wird es aber vielleicht weiter geben – etwa, um HTML5-Inhalte zu erstellen. Das wäre nicht das Schlechteste, denn damit ließen sich die Vorteile der beiden Technologien verbinden. Erste Schritte in die Richtung gibt es schon. Wobei Adobe derzeit auf ein eigenes Programm zu setzen scheint (siehe Sägt Adobe am eigenen Ast?).
Damit Flash- und HTML5-Anwendungen durchsuchbar sind, man auf deren Inhalte Lesezeichen setzen kann und der Ausdruck vernünftig klappt, muss man das als Entwickler extra berücksichtigen. Auch der Zurück-Button funktioniert nicht immer so, wie erwartet.
Ein Beispiel für eine interaktive Anwendung mit HTML5. Eine schicke Visualisierung von Twitter-Nachrichten (http://canvas.9elements.com/).
Für HTML5 wie für Flash-Anwendungen gilt gleichermaßen: Sehen Sie solche nicht nur vor, weil sie Ihnen gefallen, oder Sie von den technischen Möglichkeiten begeistert sind. Es muss immer ein echter Mehrwert für Ihre Benutzer dabei sein.
Der häufigste Einsatzzweck für Flash ist derzeit Flash-Video. Youtube und andere Videoplattformen bieten Videos im .flv-Format an – wobei Youtube inzwischen parallel auch HTML5 nutzt. Dazu gibt es ein eigenes HTML-Element, video. Wie Sie selbst Video technisch am besten auf Ihren Seiten einbinden, das ändert sich leider ständig.
Am besten informieren Sie sich aktuell unter www.content-crew.de/blog/tag/codec. Oder Sie nehmen den einfachen Weg und laden Ihre Videos zu Youtube hoch und binden diese dann auf Ihren Seiten ein.
Microsoft kippt Flash-Unterstützung
Apple verweigert sich Flash konsequent – unter iOS, dem Betriebsystem für iPad und iPhone, läuft Flash nicht. Jetzt drohen Flash weitere Probleme: Microsoft setzt in Windows 8 auf eine Version des Internet Explorers („Metro“), die ganz ohne PlugIns auskommt und HTML5 nutzt.
Zwar kann der Nutzer zu einer herkömmlichen Variante des Browsers wechseln, unter der auch Flash läuft, voreingestellt soll aber Metro sein. Auch die Aussagen von Microsoft lassen darauf schließen, dass die Flash-Unterstütuzng als Auslaufmodell gesehen wird. Statt dessen will man JavaScript, HTML5, CSS3 und andere Webstandards voranbringen. Windows 8 wird voraussichtlich Mitte bis Ende 2012 auf den Markt kommen.
t3n dazu: Windows 8 und Internet Explorer 10: Viel HTML5, Metro-Browser ohne Plugins
Noch mehr Tipps für die Providersuche
Im letzten Newsletter habe ich einige Tipps zur Providersuche gegeben. Das hat die Zeitschrift ct in ihrer neuen Ausgabe (Download für Nicht-Abonnenten kostenpflichtig) auch getan.
Die ct empfiehlt ganz Ähnliches, wichtig finde ich noch den Hinweis auf die DNS-Verwaltung: Wollen Sie Ihre Domains z. B. bei United Domains haben, den Webspace aber bei einem anderen Dienstleister, dann muss letzterer Ihnen Zugriff auf die DNS-Records gewähren (A Resource Record bzw. für IPv6 AAAA Resource Record).
Rechtsthemen gut aufbereitet – Blog- & Buchtipp
Im Juni-Newsletter geht es um ein Thema, das für die meisten Website-Betreiber ein leidiges ist: Recht. Doch es muss nicht immer unangenehm sein, sich damit auseinander zu setzen.
Dazu braucht es zwei Dinge: die richtige Einstellung und den richtigen Berater. Für beides finden Sie Tipps im Newsletter 06/2011 – Internetrecht – Webimpressum, Urheberrecht, Datenschutz, Abmahnungen.