Das Feinkonzept einer Webseite

Im Feinkonzept wird das Pflichtenheft für den Designer und Programmierer erstellt.

Es wird festgelegt, welche Farben, Vorlagen und Funktionen verwendet werden sollen.

Auch der Ablauf und die Funktion dynamischer Vorgänge auf der Webseite wird strukturiert und aufgezeichnet, mit anderen Worten, was soll passieren wenn der Besucher einen Button klickt.

Das Pflichtenheft lässt sich in drei Teile aufteilen:

Vorlagen festlegen und Schlagworte finden

Am besten ist, man zeichnet mit einem Grafikprogramm wie Gimp zum Beispiel auf, wie die Seite sich darstellen soll. 

Erfahrene Webdesigner haben auch ihre WordPressthemes im Hinterkopf, wissen, was sich eignet und erstellen ein eigenes, falls sich keines findet.

Für die Navigationsleisten, Kategorien und Beschreibungen müssen Schlagworte gefunden werden.

Schlagworte finden bedeutet, wir beschreiben die Seite und das was sich hinter den Links befindet mich kurzen sprechenden Schlagworten.

Ein ansprechender Titel für die Seite als Ganzes und gute Schlagworte in den Navigationsleisten animieren den Besucher zu klicken und weiterzulesen.

Es muss auch darauf geachtet werden, dass der Besucher im ersten Moment, wenn er die Seite aufmacht, durch gute Farben und Schlagworte erfassen kann, worum es auf der Seite geht.

Texte und Formulare schreiben

Bevor man auf der Seite schreibt und dann ständig ändern muss, ist es besser, vorher die Texte separat abzufassen und erst im Produktionsschritt dort einzufügen wo sie hingehören.

Auch Formulare sollte man erst aufzeichnen, prüfen, wie sie wirken und dann erst auf der Seite kodieren.

Interaktionsdesign

Bei diesem Schritt stellen wir uns den Besucher auf der Webseite vor seinem Rechner vor und strukturieren die funktionellen Inhalte der Seite. Was geschieht bei welchem Klick, wie werden Daten übertragen, ist das Ergebnis auch für den Besucher zufriedenstellend oder wird er genervt die Seite zumachen, wenn das gewünschte Ergebnis nicht erscheint?

Benutzerfreundlichkeit einer Webseite

Bevor eine Webseite vermarktet wird, müssen verschiedene Tests durchgeführt werden, um zu sehen, ob eine Webseite bestimmten Anforderungen genügt. 

Einer davon ist der Usability Check.

In diesem Test prüft man, die Benutzerfreundlichkeit der Seite.

Es gibt verschieden Varianten dieses Testes:

• Expertenbasierte Usability-Evaluationen
• On-Site-Befragungen (inkl. Benchmarking)
• Abbrecheranalysen mit Hilfe von Nutzerverfolgungs-Werkzeugen und (eventbezogene) On-Site-Befragungen
• Konzept-/Design-Tests (on- und offline)
• Online-Usability-Tests über taskbasierte Online-Befragungen und Tracking des Klickverhaltens.

Grundsätzlich sind folgende Punkte wichtig:

Wahrnehmung

Hier ist es wichtig, Informationen gut zu strukturiere, damit der Besucher wichtige Punkte sofort mit den Augen erfassen kann.

Grafiken sollten zum Inhalt hinleiten und können auch gezielt dafür eingesetzt werden, die Webseite ansprechend zu gestalten.

Im Schnitt können wir drei bis fünf Einheiten im Kurzzeitgedächtnis speichern, deshalb sollte die Anzahl der Informationen in einer Leseeinheit nicht höher sein.

Aufmerksamkeit

Intensive Farben, starke Kontraste, scharfe Konturen sowie komplexe Formen und Elemente die eine intellektuelle Auseinandersetzung anregen.

Augenfreundlich und angenehm sind dagegen große Flächen, Pastelltöne sowie gedeckte, gebrochene oder abgedunkelte Farben. 

Besondere „Eye Catcher“ sind hochgesättigtes Rot und Warnfarben wie Schwarz und Gelb, Animationen, Gesichter, Augen, das Kindchenschema oder sexuelle Darstellungen.

Treten zu viele dieser die Aufmerksamkeit anregenden Elemente auf, wirken sie wieder ablenkend.

Falls man die Seite durch Werbung finanziert hat, sollte sie gut platziert sein, damit sie wahrgenommen wird, aber nicht stört und ablenkt.

Erster Eindruck

Wenn der Besucher die Seite aufmacht, schaut er erst einmal, was die Seite bietet. So ist er noch nicht aufmerksam, sondern scannt die Seite grob durch und erfasst so 50% des Inhaltes.

Um ihn danach nicht zu belasten, muss man die Seite lesefreundlich gestalten.

Überschriften sollten den Inhalt zusammenfassen, aber keine Ironie oder Wortspiele enthalten. Wichtige Wörter sollten am Anfang der Zeile stehen, aber nicht jede Zeile sollte mit demselben Wort beginnen. Es ist auch gut, wenn Schlüsselbegriffe, an die der Besucher gewohnt ist, herausstechen.

Es sollten keine Werbetexte verfasst werden, die die Bedürfnisse des Nutzers nicht befriedigen. Der Besucher möchte sich entweder informieren, etwas kaufen oder unterhalten werden. Alles andere empfindet er als anstrengend, weil er nicht das findet, was er sucht.

Lesbarkeit

Hat man den Kunden durch den ersten Eindruck gefangen, muß man die Seite so gestalten, dass er sie gut lesen kann.

Zur Erhöhung der Leserlichkeit tragen viele Einzelelemente bei.

• Kontrast zwischen Text und Hintergrund: 
• Den besten Kontrast bietet schwarze Schrift auf weißem Grund.
• Hintergründe sollten einfarbig sein, nicht ablenken oder nur dezente Muster haben.
• Statischer Text (kein Blinken oder Ändern der Größe)
• serifenlose Schriften besonders bei kleinen Texten (Verdana, Arial)
• Hervorhebungen im Text wie Unterstreichungen und Großschreibung ganzer Worte sparsam verwenden

Systemstatus

Der Systemstatus muß immer gut sichtbar sein auf der Webseite. 

Der Benutzer muß wissen, ob er eingelogged ist und soll auch wissen, welcher Betrag sich in seinem Einkaufskorb befindet, falls die Webseite ein Webshop ist.

Übereinstimmung mit der realen Welt

Der Dialog, der auf der Webseite entsteht sollte einem Dialog in der realen Welt entsprechen.

Benutzen Sie Worte und Begriffe, die sie in einem realen Gespräch benutzen würden.

Stellen Sie sich vor, sie seien Verkäufer in einem realen Geschäft. Sie würden den Kunden nie mit Fachbegriffen ansprechen, die er nicht versteht, sondern sie würden Begriffe wählen, die seinem Wortschatz entsprechen.

Genauso sollten sie die Texte auf der Webseite verfassen, stellen Sie sich den Kunden bildlich vor und sprechen Sie ihn durch die Texte so an, als käme er in ein Geschäft herein.

Navegation innerhalb der Seite

Als erstes soll dem Benutzer überlassen werden, was er klick und wo er sich aufhält, ohne dass man direkt Einfluss darauf nimmt. 

Er weiß meistens was er sucht und unnötige Popups dabei behindern ihn in der Suche und er wird deshalb die Seite genervt schließen.

Falls er sich verklickt hat und aus Versehen eine Systemfunktion aufgemacht hat, so braucht er einen Abbruch-Knopf, mit der er die Funktion sofort abbrechen kann.

Übereinstimmung und Standards

Auch wenn viele Standards die man im Internet benutzt nicht niedergeschrieben sind, so existieren sie trotzdem.

Ein Standard ist zum Beispiel, wo man das Impressum und den Kontaktbereich platziert.

Wenn Sie die Standards die andere Webseiten benutzen anwenden, so haben Sie die Garantie dafür, dass der Kunde sich schnell auf ihre Webseite einlesen kann und auch mit ihnen Kontakt aufnimmt.
     

Fehlervermeidung

Besser als gute Fehlermeldungen ist ein sorgfältiges Design, das verhindert, dass ein Problem auftritt. 

Entfernen Sie fehleranfällige Bedingungen oder bauen sie eine Bestätigungsfunktion ein, damit der Benutzer möglichst wenige Fehler begeht. 

Informationen speichern statt merken

Minimieren Sie die geistige Beanspruchung des Benutzers, indem Sie Objekte, Aktionen und Optionen sichtbar machen, er soll sich auf der Seite entspannt und nicht gestresst fühlen. 

Der Benutzer sollte nicht dazu gezwungen werden, sich Informationen während des Besuches im Kopf merken zu müssen, so ist es besser, die Informationen zu speichern und sichtbar darzustellen, wie zum Beispiel ein Einkaufswagen oben in der Kopfzeile im Fall eines Shops. 

     

Flexibilität und Effizienz der Nutzung

Man versucht oft die Seite zu optimieren, damit sie schneller läuft, vergisst aber dabei den unerfahrenen Benutzer. 

So sollte die Seite so geschneidert sein, dass der erfahrene Benutzer sich schnell durch die gewünschten Funktionen durchklicken kann, der Anfänger aber auch damit zurecht kommt.
   
Ästhetisches und minimalistisches Design

 Dialoge sollten keine Informationen enthalten, die irrelevant oder selten erforderlich sind. 

Jede zusätzliche Information  in einem Dialog verdeckt die relevante Information und verringert ihre Sichtbarket.
   

Fehlermeldungen sollten in Klartext (keine Codes) ausgedrückt werden, genau das Problem angeben und konstruktiv eine Lösung vorschlagen.

Dokumentation

Der Benutzer sollte sich ohne Hilfe auf der Webseite zurechtfinden können.

Es ist aber sinnvoll, trotzdem einen Hilfebereich einzurichten, indem er einige wichtige Dinge nachlesen kann.

Im Hilfebereich ist es wichtig, die Fragestellungen genau zu definieren und Anzahl der Schritte, die der Benutzer durchführen muss, gering zu halten.

Barrierefreiheit

Alte Hasen im Webdesign wissen, dass es sehr wichtig ist, auf den Endbenutzer Rücksicht zu nehmen.

Früher waren da eher Themen interessant, wie Modemgeschwindigkeit, Endgerät usw.

In der heutigen technisierten Welt ist das weniger ein Thema. Was aber sehr wohl wichtig ist, ist die Barrierefreiheit beim Webgestalten, da heute auch behinderte Menschen auf den Service des Internets nicht verzichten möchen.

Was bedeutet Barierrefreiheit?

Im Netz gibt es eine große Gruppe von Benutzern mit verschiedenen Arten von Behinderungen, die auch einen Teil der Besucher Ihrer Webseite ausmachen.

Falls sie zur Zielgruppe Ihrer Webseite gehören, dann müssen Sie auch an diese Personengrppe denken.

Wenn Sie zum Beispiel Konzertkarten auf Ihrer Seite verkaufen, dann muss es für derjenigen, der schwer sehen kann auch möglich sein, seine Karte bei Ihnen zu buchen.

Sie  sollten auch an ältere Menschen denken, für die es nicht leicht ist, sich im Internet zurecht zu finden und Ihre Seite so gestalten, dass die Informationen, die für diese Gruppe wichtig sind, schnell verfügbar sind, ohne dass sie lange suchen müssen.

Warum ist die Barrierefreiheit so wichtig?

Das Web wird immer wichtiger in unserem Leben, wenn es darum geht, Angebote für Bildung, Finanzen und Freizeit zu benutzen.

Wir nutzen das Web unter anderem, wenn wir unsere Rechnungen bezahlen, Waren einkaufen, Eintrittskarten für Veranstaltungen  buchen, Kontakt mit der Gesundheitsversorgung aufnehmen , um Radio zu hören, Fernsehen zu schauen, Chatten, Informationen  suchen und vieles mehr.

Im gleichen Masse nimmt für viele Bereiche der Kundenservice vor Ort ab.

Einige Firmen verzichten bewusst auf den Kundenservice vor Ort oder lassen ihn sich teuer bezahlen, wie zum Beispiel Ryan Air, die für das einchecken vor Ort fast genauso viel berechnen wie für das Flugticket und jeder der mit ihnen reist, den Eincheck zuhause am Rechner machen sollte.

Bewerten Sie die Barrierefreiheit ihrer Seite

Wenn neue Websites entwickelt oder aktualiert werden um auf den neuesten Stand gebracht zu werden, dann muss die Barrierefreiheit im Entwicklungsprozess ständig untersucht und geprüft werden.

Je früher man erkennt, dass wichtige Funktionen für die Verbesserung der Barrierefreiheit fehlen, desto schneller kann man eingreifen und die Seite anpassen.

Einige einfache Tipps, um die Barrierefreiheit zu verbessern

• Die Bilder die sie verwenden, sollten in Bezug zu dem Textinhalt sein, damit Sie den Besucher der Webseite zu dem was er sucht hinleiten.
• Verwenden Sie Attribut „alt“, um die Bilder zu beschreiben. Auch Videos und Audios sollten mit Alternativtext ausgestattet sein.
• Stellen Sie sicher, dass es ein guter Kontrast zwischen Text und Hintergrund besteht (Kontrastprüfungsprogramme gibt es online oder als Zusatz für den Browser).
• Verwenden Sie einen Schriftsatz der gut zu lesen ist und formulieren Sie kurze Sätze. Generell gilt, Sans-Serif Schriften sind besser zu lesen als Serif-Schriften
• Verwenden Sie aussagekräftige und verständliche Texte und Hypertext-Links, vermeiden „hier klicken“.
• Formulieren Sie aussagekräftige Überschriften.
• Verwenden Sie ein ordnungsgemäßes und semantisches Markup, (<h1> – <h6> für Schlagzeilen, <ul> <ol> <dl> <li> Listen <p> Fließtext, der <table> für tabellarische Daten etc.)
• Gestalten Sie alle Seiten der Website einheitlich, damit sie ruhig wirkt.
• Stellen Sie sicher, dass es möglich ist, die Seite auch ohne CSS benutzen zu können, da einige Browser das CSS unterschiedlich interpretieren. Die Seite sollte auch ein gutes Erscheinungsbild geben, wenn die Skripte, Plug-Ins usw. nicht funktionieren.
• Rahmen (Frames) werden heutzutage nicht mehr verwendet, da sie auf verschiedenen Endgeräten nicht richtig interpretiert werden und im responsiven Design Schwierigkeiten machen. Heute arbeitet man mit Boxen und html5 stellt dafür tags wie <nav> oder <aside> bereit.
• Validieren Sie Ihre Seiten vor der Veröffentlichung.