Im Web steht der Nutzer über allem. Ohne ihn sind Websites sinnlos. Sie tun also gut daran, ihn gut zu behandeln und seine Wünsche und Probleme zu verstehen.

Usability

Der Begriff steht für Benutzerfreundlichkeit und bezeichnet im Fall von Websites die Möglichkeit, eine Website vernünftig benutzen zu können. Ein Nutzer tritt mit seinem Besuch in eine Interaktion mit ihrer Website. Er schaut sich die Inhalte an, klickt auf Links oder füllt ein Formular aus.

Eine gelungene Usability leitet sich von verschiedenen Aspekten ab

  1. Die Usability einer Website hängt stark von der jeweiligen Zielgruppe ab.
  2. Die Usability richtet sich nach der Zielsetzung der Website und der Situation der Nutzer.
  3. Die Usability wird danach beurteilt, ob ein Nutzer auf ihrer Website seine Ziele überhaupt erreicht und wenn, mit welchem Aufwand er sie erreicht.

Im Laufe der Entwicklung im Web haben sich klare Konventionen herausgebildet, nach denen die Usability einer Website grundsätzlich eine gute Basis hat.

grundstruktur website

Solche Websites bestehen aus einem Header oben mit einer Navigation, einem Hauptbereich mit den Inhalten, einer Subnavigation an den Seiten (bei Blogs meist rechts, sonst meist links) und einem Footer. Ist eine Website für die Benutzung auf mobilien Geräten optimiert (Responsibilität), wird auf die Subnavigation oftmals verzichtet.

Beispiel Struktur mit Subnavigation: http://www.przytulla.de/

Beispiel Struktur ohne Subnavigation: https://www.deutschepost.de/de.html

Konventionen sind naturgemäß stark kulturell geprägt. http://opus.co.il/

Bereiche einer Website

Im Header nimmt ein Link, der zurück zur Startseite führt, eine zentrale Rolle ein. Er befindet sich in der Regel links und beinhaltet meist das Logo. Der Nutzer ist diese Struktur gewohnt und sie stärkt das Vertrauen in die Website - wenn ich mich auf der Seite verirre, komme ich mit diesem Link auf jeden Fall wieder zurück.
Meist wird auch in der Hauptnavigation ein Link Home oder Startseite eingefügt, der die gleiche Funktion hat.

Die Hauptnavigation gibt die Sektionen ihrer Website wieder.

Oft wird die Hauptnavigation im Header durch Hilfsnavigationen ergänzt. Hier finden sich Links zu Seiten, die nicht ganz so wichtig sind,z.B. Impressum oder Informationen über das Unternehmen.

Suchfunktion: Es gibt kaum Websites, die auf eine Suchfunktion verzichten (können). Es gibt Zielgruppen, die zum Navigieren auf der Website eher die Suche-Funktion als die Hauptnavigation verwenden.
Beispiel: http://www.ebay.de/

Navigation

Hauptaufgabe der Navigation ist naturgemäß das Navigieren durch die Seite. Darüber hinaus hat sie aber noch andere Aufgaben:

  1. Einen Eindruck von der Tiefe und Breite der Website vermitteln
  2. Das Kernthema der Website vermitteln
  3. Vorschläge zeigen, was der Nutzer als nächstes tun könnte

Wichtigste Aufgabe der Navigation ist es aber Vertrauen zu schaffen. Der Aufbau und die Inhalte der Navigation zeigen dem Nutzer, ob der Betreiber der Website weiß wovon er spricht, ob alle Themen enthalten sind die man hier erwarten könnte und wie einfach es voraussichtlich sein wird, die Informationen zu finden.

Beispiele für verschiedene Navigationen

http://anet-design.cz/

http://www.lbvd.com/

http://fff.cmiscm.com/#!/main

http://actionfilm.ru/

https://www.expeditiewadden.nl/

http://www.fantasy-cartography.com/

Beispiel für Navigation mit klaren Bereichen

navigation bereiche

https://www.welt.de/

Als Webdesigner muss man also immer abwägen, ob man nun eine optisch attraktive und außergewöhnliche Navigation erstellt und damit Einbußen bei der Usability in Kauf nimmt oder doch lieber auf eine vertraute Struktur setzt.

Egal für welche Art der Navigation man sich entscheidet, auf die Navigation muss immer Verlass sein! Landet ein Nutzer unerwartet auf einer ganz anderen Seite als erwartet oder gar auf einer 404-Fehlerseite, spricht das nicht für die Qualität der Programmierung und damit für die Reputation des Unternehmens.

Achten Sie auch darauf, dass die gerade aktive Webseite in der Navigation optisch hervorgehoben wird. Stichwort für die Umsetzung: CSS Pseudo-Selektoren :hover, :focus.

Links

Ein Link führt den Nutzer von einer Webseite zu einer anderen. Als Webdesigner können sie die Entscheidung, ob ein Nutzer auf den Link klickt oder nicht, in gewissen Grenzen beinflussen. Wägen sie ab, ob sie einen Link optisch eher klassisch oder auffällig gestalten wollen. Geben sie dem Linktext aber immer eine sinnvolle Aussage. Hier klicken ist auf jeden Fall nicht hilfreich. Aktuelle Nachrichten Spiegel.de sagt da schon sehr viel mehr aus. Achten sie auch auf ein gutes title-Tag

Seitentypen

Nicht jede Seite einer Website hat die gleiche Funktion. Als sinnvoll hat sich die folgende Einteilung herausgestellt:

  • Startseite: Die sicherlich anspruchsvollste Aufgabe für jeden Webdesigner. Hier soll die Zielgruppe in kurzer Zeit angesprochen und überzeugt werden auf die Unterseiten zu navigieren. Die Startseite sollte die Hierachie der Website aufzeigen und gleichzeitig Lust auf die Inhalte machen.
  • Kategorieseite: Hier findet der Nutzer die Rubriken einer Website. Das können z.B. die Kategorien eines Blogs sein, die Produkttypen eines Onlineshops oder die Themen einer Nachrichtenseite.
  • Detailseite: Hier finden sich die eigentlichen Inhalte einer Website. Das können Artikel oder Produkte sein.

Startseite

Fragestellungen für die Startseite

  • Worum geht auf der Website?
  • Was kann ich als Nutzer hier machen?
  • Was bietet die Website an?
  • Warum soll ich diese Website nutzen - und warum keine andere?
  • Wo fange ich an?

Eine gute Startseite bietet Antworten auf all diese Fragen. Je besser Ihre Startseite das macht, um so eher ist der Nutzer geneigt ihre Website auch auf den Untersiten zu besuchen.

Barrierefreiheit

Es gibt zahlreiche Hilfsmittel, mit denen behinderte Menschen auf Websites surfen können. Für blinde Menschen gibt es Screenreader, für Menschen mit Seheinschränkungen Bildschirmlupen. Wer Schwierigkeiten mit der Bedienung mit Maus oder Touchscreen hat, kann den Computer auch per Spracheingabe, mit dem Mund oder durch bloße Blicke steuern.

In Deutschland darf laut Gesetz niemand diskriminiert werden. Auch wenn sie als Webdesigner dadurch nicht gezwungen werden ihre Website barrierefrei zu gestalten, ist es weit mehr als eine nette Geste eben das zu tun. Der Aufwand hierfür ist überschaubar und es gibt Hinweise, dass auch Suchmaschinen barrierefreie Websites höher gewichten.

Mobiles Webdesign

Das Web wird immer mobiler. Nach einer Untersuchung aus dem Jahr 2013  nutzen in Deutschland bereits rund 30 Millionen Menschen das Internet mittlerweile mobil, was 58% der Gesamtnutzermenge entspricht. Im Jahr davor waren es noch 28%. Der Trend zu mobilen Websites ist also ungebrochen und wird in einigen Jahren der Standard sein. Grund genug, ihre Website bereits heute so mobil wie möglich zu gestalten.

Um eine Website mobil zu machen, gibt es mehrere Möglichkeiten

  • Mobile Version einer Website: Die Extrawurst für die Website. Sie erstellen einfach eine zweite Version ihrer Website und toben sich gestalterisch für mobile Anforderungen aus. Die Umschaltung zwischen mobiler Version und der Standard-Version erfolgt über eine Browserweiche. Dabei wird beim Aufruf der URL zunächst abgefragt, mit welchem Gerät der Nutzer die Website gerade ansurft.
    Diese Variante sollten sie wählen, wenn sie davon ausgehen können, dass der Nutzer auf der mobilen Version ganz andere Bedürfnisse hat als an seinem normalen Rechner.
    Beispiel:
    https://www.bahn.de/m/view/de/index.shtml
    https://www.bahn.de/p/view/index.shtml

    Der Nachteil einer seperaten mobilen Version liegt auf der Hand: es ist sehr viel mehr Arbeit. Aktuelle Inhalte müssen auf beiden Systemen gepflegt werden, sofern sie nicht die gleiche Datenbank nutzen.
  • Responsive Webdesign:  Der Trend geht klar in eine andere Richtung. Eine Version der Website für alle Geräte, aber flexibel angepasst auf die spezifischen Gegebenheiten.
    1. Einem flexiblen Raster, dass sich an die Herausforderungen unterschiedlicher Größenverhältnisse anpassen kann.
    2. Flexible Bilder und Medien, die auf allen Geräten funktionieren.
    3. Einem META-Viewport-Element im Head der Website
    4. Den Media-Queries von CSS3

Populäre Rastersysteme sind z.B.

http://960.gs/
http://getbootstrap.com/
http://foundation.zurb.com/

META-Viewport-Element

Das META-Viewport-Element gehört zu den meta-Elementen und legt fest, dass mobile Browser Media Queries verwenden soll. Ohne das Viewport-Element verkleinert ein iPhone eine Website auf die Größe des Displays. Auf diese Weise lassen sich Websites auch ohne Responsive Webdesign einigermaßen bedienen.

Oft ist das aber nicht Sinn der Sache. Die Website soll auf mobilen Geräten nicht irgendwie bedient werden, sondern mindestens genauso gut, wie auf dem normalen Rechner. Dafür muss sich die Website aber dem mobilen Gerät anpassen: dazu fügen sie die folgende Zeile in den head ihrer Website ein:

<meta name="viewport" content="width=device-width">

Nun lädt der mobile Browser die Media Queries, die sie in CSS3 definiert haben.

Media Queries

Media Queries sind für Responsiv Webdesign so bedeutsam, wie Auftrieb für Flugzeuge: ohne geht es nicht. Was aber wird eigentlich abgefragt?

@media screen and (max-width: 1024px) {
     /* Hier kann beliebiges CSS stehen */
}

Eingeleitet wird die Media Query mit dem Schlüsselwort @media. Dann folgt die Angabe für den Media Type, im Beispiel: screen.Damit legen sie fest, für welches Ausgabemedium die Media Query gelten soll. Die häufigsten Ausgabemedien sind screen und print. Mit screen legen sie fest, welches CSS für die Ausgabe auf einem Bildschirm verwendet werden soll.
Es folgt nun eine Angabe, die den zur Verfügung stehenden Raum abfragt: mit der Eigenschaft max-width bestimmen sie, bis zu welcher Maximalbreite die CSS-Anweisung gelten soll. Es gibt außerdem noch die Eigenschaft min-width, mit der sie die Minimalbreite abfragen. Sie können auch beide Eigenschaften kombinieren, um einen Gültigkeitsbereich der CSS-Anweisung zu definieren:

@media screen and (min-width: 320px) and (max-width: 1024px) {
     /* Hier kann beliebiges CSS stehen */
}

Das obige Beispiel gilt für alle Geräte, die eine Ausgabegröße von mindestens 320px und maximal 1024px haben.

Sie können die Media Query auch noch um eine Abfrage nach der Ausrichtung des Ausgabegerätes ergänzen. Das unten stehende Beispiel gilt für Ausgabegeräte in der Ausrichtung Portrait, also Hochformat. Die Einstellung für Querformat wäre: orientation: landscape.

@media screen and (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) {
     /* Hier kann beliebiges CSS stehen */
}

Heute89
Gestern325
Diese Woche89
Dieser Monat6263
Insgesamt233931

Who Is Online

2
Online

Montag, 20. November 2017 05:50

Rückrufservice

Kontaktdaten

dats
Druckagentur Torsten Scheel

Malvenweg 8
44289 Dortmund

Telefon: 0231 | 13 86 86 18
E-Mail:  kontakt@torstenscheel.de