Webdesign mit ergonomischem Anspruch umsetzen

Die Bedienungsfreundlichkeit eines Internetauftritts stellt eines der wichtigsten Merkmale dar, wenn es um die Einschätzung seiner Qualität geht.

Viele Kriterien für einen qualitativ gelungenen Internetauftritt sind einfach und gut nachvollziehbar; sie stammen anteilig aus dem Bereich der Ergonomie. Die folgenden Hinweise umfassen technische, inhaltliche und gestalterische Ziele, welche es den Nutzern leicht machen sollen, die Website mit ihrer individuellen Intention zu benutzen.

Ergonomisches und am Nutzer orientiertes Webdesign entfaltet zudem eine positive Wirkung in Hinblick auf Verweildauer und erneuten Besuch der Website. Auch Suchmaschinen präferieren hochwertige Sites mit einer benutzerfreundlichen Oberfläche.

Design im Internet umfasst somit mehr als reine Gestaltung und Verschönerung: Es hilft dem Anwender dabei, die vielen Informationen wahrzunehmen, zu ordnen, zu verstehen und fordert zudem auf, aktiv zu werden.

In den folgenden Ausführungen werden Ansätze, Tipps und Hinweise für besseres und bedienungsfreundliches Webdesign vorgestellt.

Onlinetext ergonomisch gestalten und präsentieren

In Hinblick auf den bestmöglichen Text im Web gibt es eine Menge Besonderheiten zu beachten. Sie resultieren daraus, dass das Internet ein spezifisches Medium mit expliziten Vor- und Nachteilen ist: So strengt Lesen am Monitor extrem an, da dieser eine eigene Lichtquelle darstellt. Das Bild baut sich zudem pro Sekunde mehrmals auf und der Kontrast des Monitors kann mit der Druckschärfe in einem Buch nicht mithalten.

Ein Internettext dient immer einem Zweck: Das kann Unterhaltung, Information, Plauderei, Verkauf oder Mitwirkung an der Meinungsbildung sein. Worte fungieren als wichtigstes Inhaltselement eines Internetangebotes.

Um die anvisierten Ziele zu erreichen, sollte der jeweilige Internettext von einer Vielzahl verschiedenster Menschen gelesen und zügig verstanden werden können. Folgende zusammengefasste Leitlinien helfen bei diesem Ziel.

Tipps und Hinweise für guten Text im Internet

• Modulares Schreiben: Informationen sind idealerweise als eigenständige Einheiten zu präsentieren. Das bedeutet, dass modulare Abschnitte für sich stehen können und somit ohne Kenntnis des weiteren Kontextes verständlich sein sollten. Dabei wird das Wichtigste stets am Anfang präsentiert. Ideal scheint es zu sein, jedem Gedankengang einen eigenen Abschnitt zu widmen. Diese Module sind meistens nur einige Zeilen lang und werden deutlich voneinander getrennt. Übersichtlich gegliederte und kurze Abschnitte erleichtern das Lesen am Bildschirm enorm.
• Scannbare Inhalten anbieten: Leser nehmen im Durchschnitt nur ca. 50 % des Textes wahr, sie überfliegen ihn anhand von optischen Haltepunkten. Daher empfiehlt sich der Einsatz von Teilüberschriften, Listen, Zitaten und Trennlinien. Hilfreich ist zudem die Verwendung von Fettschrift und kursiver Schreibweise für wichtige Begriffe. Um die Scannbarkeit zu erleichtern, wird empfohlen, möglichst einfach und nicht zu verschachtelt zu schreiben. Des Weiteren sollten Fremdwörter nur mit Bedacht eingesetzt werden. Ergänzend ist anzumerken, dass eine ordentliche Schriftgröße (mindestens 14 px bei absoluten Einheiten), der richtige Schrifttyp, die Zeilenlänge (60-80 Zeichen) und der Zeilenabstand die Lesbarkeit eines Onlinetextes deutlich beeinflussen. Immer wichtiger wird zudem eine gute mobile Darstellung.
• Hyperlinks sinnvoll nutzen: Durch Hyperlinks wird es möglich, Texte nichtlinear zu betrachten. Links erlauben es den Lesern, zügig zu den subjektiv relevanten Informationseinheiten zu springen. Dabei sollten die Sprungmarken klar und gut gekennzeichnet sein, sowohl farblich als auch in ihrer Benennung. In diesem Zusammenhang ist es wichtig, dass bedeutsame Begriffe im Text nicht unterstrichen werden sollten, um eine Verwechslung mit einem Link auszuschließen.
• Wahl einer passenden Sprache: Je nach Zielgruppe und angestrebtem Charakter der Site (sachlich, poppig, seriös, persönlich, experimentell usw.) sollte der Text konsistent in einer bestimmten „Tonart“ geschrieben sein. Dadurch erhöht sich der positive Reiz der Website und die Verständlichkeit nimmt zu.
• CSS zur optischen Darstellung einsetzen: CSS steht für „Cascading-Style-Sheets“. Diese Anweisungen bieten die Möglichkeit, HTML- Elemente (beispielsweise Absätze und Überschriften) in ihrem Aussehen zu definieren und somit gut lesbar und gefällig zu gestalten. CSS ist somit eine notwendige Ergänzung zu HTML, da es deutlich mehr Optionen bietet, Texte, Links, Hintergründe, Listen, Tabellen etc. zu formatieren. Inhalte können mithilfe der Anweisungen folglich optisch ansprechender gestaltet werden als mit reinem HTML, ohne dass sie an Funktionalität verlieren. Websites mit ergonomischem Anspruch setzen daher auf eine hohe Codequalität und bieten leicht lesbare und ansprechende Schrifttypen. Flash und aufgeblähtes Javascript sind für die Inhaltsgestaltung demnach nicht nötig, fast alles ist mit schnell ladendem CSS realisierbar.

Inhalte sorgsam und passgenau aufarbeiten

Je besser die Inhalte recherchiert und vorbereitet werden, desto mehr fühlen sich Leser und Leserinnen angesprochen. Zusammen mit den eben angesprochenen Qualitätskriterien entfalten sie ihre angestrebte Wirkung. Struktur, ein guter Ausdruck, Lesbarkeit und Wortwahl beeinflussen die Qualität und das Image eine Website enorm.

Zu ergänzen ist allerdings, dass die Grenzen des Onlinetextes in langen linearen Schriften mit komplexen Zusammenhängen liegen. Diese sollte man – falls sie im Seitenzusammenhang unverzichtbar sind und nicht gut in Modulform redigiert werden können – als PDF-Download anbieten.

Zudem eignet sich das Internet nicht gut für rhetorische Spielereien mit verschachteltem Satzbau. Es ist sehr anstrengend, solche Texte zu rezipieren.

Richtiger Einsatz von Multimedia-Elementen im Webdesign

Wer komplexe Zusammenhänge verdeutlichen will oder gerne Emotionen weckt, der setzt auf multimediale Elemente wie Bilder und Videos. Diese sind nicht nur optisch attraktiv, sie lockern eine Site zudem sinnvoll auf.

Bilder und Grafiken können bei der Reduktion des Textumfangs helfen, indem sie komplizierte Zusammenhänge „auf einen Blick“ darstellen. Multimediale Elemente erreichen somit schnelle Aufmerksamkeit, sie vermitteln eine Vielzahl von Informationen gleichzeitig. Im Idealfall ergänzt ein Bild den Text oder fasst diesen sinnvoll zusammen.

Wichtig ist, dass ein Bild zum Charakter der Site passt: So wird etwa ein seriöses Magazin keine verwackelten Amateuraufnahmen verwenden können. Ersetzen sollte das Bild den Text aber nicht, denn das Internet ist trotz der multimedialen Möglichkeiten ein Textmedium – wenn auch mit eigenen Anforderungen.

Bilder können zudem dafür genutzt werden, eine Seite optisch attraktiver zu machen. Dies kann ein Motiv, ein Logo, eine schöne Hintergrundgrafik oder eine attraktive Navigationsleiste sein. Menschen sind Augentiere, ihr optischer Sinn will bedient werden.

Einschränkungen:

1. Zu viele Bilder mit einer Unzahl an Farben überfordern den User schnell. Sie überladen den Bildschirm, schwächen sich gegenseitig und lenken vom Textinhalt und der Navigation ab.
2. Viele Farben führen besonders bei Hintergrundbildern zu einer Reizüberflutung und zu einer negativen Beeinflussung des Vordergrundes. Im schlechtesten Fall ist die Site nicht gut erfassbar und der User surft weiter. Es wird daher empfohlen, wenige farbige (nicht bunte!) Bilder mit einem begrenzten Ausschnitt und einem deutlichen Motiv zu verwenden. Der Hintergrund sollte eher Texturen, Farben oder Farbverläufe mit ebenso dezenten wie kühlen Farbtönen beinhalten.
3. Werden Bilder in der Navigation verwendet und ist dem Bild keine „alt“-Beschreibung beigefügt, wirkt sich dies negativ in Hinblick auf die Suchmaschinenoptimierung aus. Textlinks sind zudem in Hinblick auf bessere Ladezeiten zu bevorzugen.
4. Ferner ist der Einsatz von Bildern dann bedenklich, wenn ihre Größe und Farbtiefe nicht dem Medium Internet angepasst ist. Zu große Bilder mit enormer Farbtiefe benötigen eine längere Ladezeit – sie gelten als userunfreundlich. Zwar hat die Anzahl von Breitbandverbindungen zugenommen, jedoch ist es immer ein Ziel, dass Seiten barrierefrei gestaltet werden und niemanden mit einer langsamen Internetanbindung ausschließen.

Binärer Code kann verwirren, vor allem dann, wenn zu viele kleine Elemente um Aufmerksamkeit buhlen. Klare Strukturen im Text und eindeutige Motive in Bildern und Videos wirken diesen Problem entgegen

Bilder und Videos gezielt und dosiert nutzen

Bei dem Einbinden multimedialer Elemente muss man darauf achten, dass das Gesamtkonzept und die Struktur eines Internetangebotes darunter nicht leidet, sondern eine Aufwertung erfährt.

Rekapituliert man, dass es verschiedene Typen von Websites gibt, dann wird klar, dass zum Beispiel die Einbindung von Musikvideos zu einer jugendlichen Szenewebsite passt, nicht aber zu einer eher ruhig gehaltenen Präsenz über Architektur.

In diesem Zusammenhang ist vor allem auf die Zielgruppe hinzuweisen: Ergonomisches Webdesign hat immer den Leser und sein Erlebnis im Auge. Will man etwa ältere Menschen ansprechen, dann sollte klar sein, dass diese meistens nicht Teil der aktuellen Clipkultur sind, sondern hauptsächlich Informationen suchen. Ausladende Begrüßungsmusik, eine unnötige Vorschaltseite und zahllose Videos wären folglich nicht angebracht.

Welche Multimediaelemente werten die Site auf, lassen sich technisch gut integrieren, passen zum Thema, ergänzen den Text und bieten den Usern einen interessanten Mehrwert? Diese Fragen sollten sich Betreiber immer stellen.

Um ein Positivbeispiel zu nennen: Auf einer Infosite über Fahrradreparatur markiert ein Anleitungsvideo zum Reifenwechsel sicher einen guten Mehrwert. Auch ein Porträt (Beispiel: Firma oder Künstler) kann durch ein professionelles Video an Qualität gewinnen.

Multimedia und Usability in Einklang bringen

Generell ist es wichtig, mit multimedialen Inhalten durchdacht und im Sinne des Users umzugehen. Sie sollten passend und verständnisfördernd im Layout implementiert werden. Folgende Hinweise helfen beim praktischen Umgang:

• Die Seite baut sich bei zu vielen multimedialen Inhalten ( große Grafiken mit enormer Farbvielfalt und -tiefe, Hintergrundmusik) nur langsam auf und zeigt sich dadurch schlecht nutzbar. Zahllose Negativbeispiele fanden sich seinerzeit auf diversen Myspace-Profilen und trugen ihren Part zum Niedergang der Plattform bei.
• Bei viel Effekthascherei wird vom Inhalt der Site abgelenkt und der Text verliert an Bedeutung. Da es aber im Web darum geht, Inhalte zu transportieren, ist dies ein unerwünschter Nebeneffekt. Optisch attraktive Inhalte entbinden niemals von einer guten Textausarbeitung, Recherche und Darstellung.
• Überladene Seiten werden schlechter erfasst. Möglicherweise leidet das Erkennen des Themas und die Orientierung eines Users darunter und er verlässt die Seite aufgrund der schlechten Usability.
• Besonders Videos und Bilder sollten den Inhalt eine Seite ergänzen und nicht die Hauptaussage tragen. Dies würde im ersten Fall alle Menschen ausschließen, die das Video nicht sehen können oder welche durch fehlende Bandbreite keine Zeit für den langwierigen Datentransport haben. Wichtig ist ebenfalls, Videos und Bilder für den Fall der Nichtanzeige mit einem Alternativtext zu versehen.
• Animationen wie die früher so beliebten GIFs lassen sich zwar schnell laden, jedoch wird der User abgelenkt, wenn es an allen Ecken blinkt. Eine Animation pro Screen reicht völlig, wenn es denn überhaupt nötig ist.
• Eine Seite, die sich hinter zahllosen Bildern und Videos „versteckt“, überzeugt die meisten Menschen vom Design nicht.
• Hintergrundmusik passt zu den wenigsten Websites. Ist sie dennoch vorhanden und vom Betreiber gewollt, sollten gut sichtbare Steuerungs-Elemente vorhanden sein, damit der User die Klänge bei Bedarf an- oder abschalten kann.

Wer Ergonomie im Webdesign ernst nimmt, rückt immer den Leser und seine Bedürfnisse sowie die allgemeine Funktionalität und Nutzbarkeit in den Vordergrund. Multimedia sollte sorgsam in diesem Kontext eingebettet sein.

Interaktivität, Motivation und Feedback

Websites werden einerseits aus einem ästhetischen Blickwinkel betrachtet, vor allem steht aber ihre Gebrauchstauglichkeit im Vordergrund. Interaktivität markiert eines der wichtigsten Positivmerkmale des World Wide Webs. Wie kann das Design also die Kommunikation unterstützen?

Binden Sie Ihre Besucher ein, etwa durch Umfragen mit Anzeige der Ergebnisse. Websites, die genutzt werden können, überzeugen mehr und motivieren den Besucher, gerne wiederzukommen.

Vorteilhaft ist es ferner, die Kontaktaufnahme so einfach wie möglich umzusetzen. Hilfreich sind datensparsame und funktionierende Kontaktformulare, einladende E-Mail-Buttons und natürlich richtige Angaben im Impressum – schon aus rechtlichen Gründen. Blogbetreiber setzen darüber hinausgehend auf die Kommentarfunktion, um den Austausch mit den Lesern lebendig zu gestalten.

Eine mit Liebe zum Detail eingerichtete Kontaktseite signalisiert zudem Offenheit gegenüber Anfragen und sollte respektvolle Formulierungen aufweisen, damit mögliche Kunden und Interessenten sich wohlfühlen.

Allgemeines zum ergonomischen Design – Ladezeit, Struktur, Navigation und Konsistenz

Die ersten Sekunden entscheiden über den Eindruck, wenn ein Nutzer zum ersten Mal eine Webpräsenz ansteuert. Dauert das Laden zu lange oder wirkt die Site überladen bis konfus, dann ist er schnell wieder weg. Die Ladezeit sollte 2–3 Sekunden nicht übersteigen, die Navigations-Elemente müssen dabei immer sofort in ihrer Funktion erkennbar sein.

Zudem sollte sich ein Nutzer immer problemlos zurechtfinden: Ein konsistentes Layout des Screens, gut erkennbare und verständlich bezeichnete Menüs gelten als wichtige Grundstandards in einem guten und ergonomischen Webdesign. Es gilt, mit dem Leser arbeiten – nicht gegen ihn.

Wichtige Elemente wie Header, Logo, Footer oder das Menü befinden sich idealerweise immer am gleichen Ort. Sie rahmen den Auftritt sinnvoll ein und fungieren dabei als zuverlässige Orientierungselemente. Gute Sites sind immer intuitiv und logisch bedienbar.

Abgestimmte Farben (lieber weniger als zu viele), eine einheitliche Formatierung des Textes sowie aussagekräftige Bilder und ansehnliche Logos tragen zudem zu einem gelungenen und professionellen Eindruck bei.

Barrierefreiheit

Barrierefreiheit bedeutet, niemanden zu benachteiligen und es allen Usern zu ermöglichen, die Site zu nutzen. Es gilt, Hürden für die Benutzer von textorientierten Browsern und kleinerer Display-Medien (PDA, Tablet-PC, ältere Handys) abzubauen.

Sehbehinderte Nutzer benötigen bei Bildern und Videos sinnvolle Alternativbeschreibungen im HTML-Code, welche Ihr Screenreader dann vorliest.

Hinweis: Der Bereich der Barrierefreiheit gilt mitunter als schwierig und die Hinweise entwickeln sich kontinuierlich weiter. W3C-Konformität bei der Programmierung hilft dabei, dieses Ziel zu erreichen – sie stellt aber nach wie vor – oft aus pragmatischen, mitunter aus funktionalen Gründen – eine Ausnahme dar.

Mobile Ansicht optimieren

Immer mehr Zugriffe erfolgen mobil über Handys, Smartphones oder Tablets. Kaum eine seriöse Site kann es sich leisten, diesen Nutzern eine schlechte und nicht optimierte Ansicht zu bieten.

CMS-Nutzer können zur Lösung Plugins für eine angepasste mobile Ansicht verwenden; es liegen viele Erweiterungen vor. Je bekannter das CMS ist (Beispiel: WordPress, Joomla! oder Drupal) desto mehr Optionen sind verfügbar.

Alternativ verfügen viele HTML-Grundgerüste (Themes) bereits über einen responsiven Code. Dieser bewirkt, dass sich die Site dem jeweiligen Ausgabemedium anpasst. Wer ein Theme oder eine neue Site vom Designer/Programmierer erwirbt, sollte auf diesen Aspekt besonders achten. Planung im Vorfeld erspart viel Arbeit und Korrekturen im Nachhinein.

Die Google Suchmaske im Einsatz auf einem Tablet. Es gilt, die bereitgestellten Informationen auf jedem Ausgabegerät nutzerfreundlich und gut erkennbar darzustellen

Ein weit verbreitete Methode ist es zudem, die mobile Absicht auf eine Subdomain auszulagern. Der mobile Code liegt bei diesem Ansatz getrennt vor und wird nur jenen Besuchern gezeigt, die mit einem entsprechenden Gerät zugreifen.

Fazit: Ergonomie im Webdesign

Alle diese Kriterien werden von Suchmaschinen zudem zur Beurteilung guter Sites herangezogen. Gebrauchstaugliche Seiten gefallen daher den Lesern und begünstigen den von vielen Betreibern gewünschten Traffic. Ein doppeltes Plus.