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.

Farben in HTML

Es gibt keinen Tag für Farben.
Will man Farben benutzen, dann nimmt man Attribute her.
bgcolor= ändert die Hintergrundfarbe
color= ändert die Farbe des Elementes
Bei den Farbangaben nimmt man den Hexadezimalwert des Rot-Grün-Blau-Anteils her.
Beispiel:
color=#FF0000 macht den Text rot
bgcolor=#0000FF macht den Hintergrund blau

Farbenmischen

So, nun ist nur noch die Frage, welche Farben einem zur Verfügung stehen und was es mit den 6 Zahlen bzw. dem F als Farbangabe auf sich hat.

Welche Farben stehen zur Verfügung?

Wie in der Physik gelehrt, kann man fast alle Farben aus den 3 Grundfarben Rot, Grün und Blau zusammenmischen. Dieses Farbmodell wird oft in der Welt der Computer genutzt - es heißt RGB-Farbmodell. Dabei steht r für red, g für green und b für blau.

RGB-Farben und Zusammenhang mit HTML Farben

Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man den höchsten Wert, erhält man die reine Farbe, wie im Beispiel zu sehen ist. So besteht Rot dann aus den Anteilen 255 Rot, 0 Grün und 0 Blau. Weiß ist 255,255,255 und Schwarz das Gegenteil 0,0,0.
Eine Farbe, hier Rot, wird in der Regel wie folgt angegeben.
#FF0000
Die Zahl in Dezimal 256 wurde in Hexadezimal um gerechnet. Und ein 16 in Hexadezimal ist 16.

Dezimal	0	1	2	...	9	10	11	12	13	14	15	16	17	18	...	255
Hexadezimal	0	1	2	...	9	A	B	C	D	E	F	10	11	12	...	FF

 

Die andere Art, Farben anzugeben

Farben können auch über ihren englischen Namen angegeben werden.

Farbe	Farbname
	silver
	red
	yellow
	fuchsia

Farbpalette

Normalerweise sollten Sie sich nach Möglichkeit immer an das Standard-Schema halten, das von den Browsern optimal interpretiert wird. Die Standard-Palette wird eingesetzt, weil es immer Surfer gibt, die auf ihrem Computer nur 256 Farben anzeigen lassen. Für diese Surfer ist die Standard-Palette konzipiert. Wird diese nicht eingesetzt, werden Farben unter Umständen aufgerastert und das Ergebnis ist nicht optimal.
Die Standard-Palette bietet 216 Farben. Dabei handelt es sich um bestimmte Farben (mathematisch sind bei der Standard-Palette die RGB-Farbnummern durch 51 dividierbar). Um nun nicht mit dem Taschenrechner dasitzen zu müssen, hilft uns wie immer der HTML-Editor. Stellen Sie bei dem Reiter "Color" das Pulldownmenü auf st216_xxx.bmp
Sie haben dann die folgenden Farben zur Auswahl. Hier sehen Sie alle 216 Standardfarben und ihre hexadezimale Schreibweise.

Farbtabelle mit 216 Farben

Tipp:

Weniger ist mehr - viele Internetseiten sind viel zu bunt und zeichnen den Ersteller so durch schlechten Geschmack aus.

Variablen in php

In php gibt es vier verschiedene Typen von Variablen

• Integer: Ganzzahl
• Float: Kommazahl
• String: Zeichenkette
• Bool: logische Variable (kann den Wert true oder false annehmen)

Der Name der Variable beginnt mit dem Dollarzeichen $ und hat dann den Namen der Variablen.

<?php

$integer = 15; //Eine Integer Variable

$string = "Ganz viel Text"; //Ein String

$float = 15.5; //Eine Zahl mit einem Komma

$bool = true;

?>

Variablen können überall im Dokument definiert werden.

Sobald wir einer Variablen einen Wert zuordnen ist sie definiert und genau als die Variable, die für den Wert hergenommen werden muss.

Wenn wir eine Variable definiert haben, dann können wir sie danach auch ausgeben:

<?php

$ausgabe1=“Paul ist“;

$alter=20;

$ausgabe2=“Jahre alt“;

echo $ausgabe1;

echo $alter;

echo $ausgabe2;

?>

Ergebnis auf dem Bildschirm:

Paul ist 20 Jahre alt

Mit Zeichenketten und Ausgaben kann man noch sehr viel machen und es gibt eine ganze Bibliothek von nützlichen Zeichenkettenfunktionen in php, was wir später noch lernen werden.

Nur zum reinschnuppern:

Wir hätten die Ausgabe auch so schreiben können:

<?php
echo $ausgabe1 . $alter . $ausgabe2;
?> 

Die ersten Schritte mit php

Um auszutesten ob unser Server funktioniert und welche Version von php installiert ist, testen wir das mit einem kleinen Skript:

<?php

phpinfo();

?>

Das gibt uns als Ergebnis eine Liste mit allen Informationen über unsere php-Installation.

Jetzt schreiben wir unser erstes php-Skript:

<?php

echo "Hello World";

?>

Mit

<?php 

 eröffnen wir das Skript.

Der echo-Befehl ist eine Ausgabe, die wir als Ergebnis auf dem Schirm sehen.

Und mit ?> schliessen wir das Skript ab.

Wenn wir die Ausgabe fett drucken wollen, können wir noch einen HTML-Tag einbinden:

echo "<b>Hello World</b>";

Da wir die Gänsefüsschen schon für die Ausgabe benutzen, müssen wir das Sonderzeichen \ einfügen, falls wir in der Ausgabe ein Gänsefüsschen haben wollen:

<?php

echo "Hello \"World\"";

?>

Wenn wir das ganze dann in eine HTML-Datei einbinden wollen sieht es so aus:

<html>

<head>

<titel>php mit html </titel>

<head>

<body>

<h2>Herzlich Willkommen</h2>

<?php

echo "Auf meiner Internetseite";

?>

</body>

</html>

Um das ganze abzuspeichern und auszuführen, müssen wir „Speichern unter“ und dort .php als Dateiendung angeben.

Wollen wir noch Kommentare in unser php Skript einsetzen dann geht das so:

<?php

//Dies ist ein Kommentar

echo "Hallo Welt. Wie ihr feststellt, wird nur dieser Text angezeigt. Die Kommentare vor sind nicht sichtbar.";

?>

<?php

/* Kommentar startet

Hier genau schreiben was wir dokumentieren wollen

Ende des Kommentares */

echo "Hallo Welt. Wie ihr feststellt, wird nur dieser Text angezeigt. Die Kommentare vor sind nicht sichtbar.";

?>

Kommentare sind sehr wichtig.

Eine gute Programmierarbeit besteht nicht nur in einem sauber strukturierten Code, sondern auch in einer guten Dokumentation, damit wir selber nach ein paar Jahren wenn wir keine Ahnung mehr haben was wir damals gemacht haben, das Skript an Änderungen anpassen können.

Darum ist es wichtig, dass wir erstmal ausserhalb des Skriptes in einer Textdatei aufschreiben, was wir gemacht haben und in das Skript hineinschreiben, was da genau passiert ist.

Spätestens wenn es sich um ein grosses Projekt handelt, mit vielen php Skripten ist es wichtig in den Kopfbereich als Kommentar zu schreiben, was da genau passieren soll.

Das sind die wichtigsten Punkte zu php in Kürze, nach und nach gehen wir auf die einzelnen Befehle ein.

Dateien auslesen mit php

Um eine Datei auszulesen, muss im ersten Schritt über fopen ein Dateistream, eine Verbindung zur Datei, erzeugt werden.
Dabei wird der Dateinamen angegeben und auf welche Art mit der Datei umgegangen wird.
$handle = fopen ("mailadressen.txt", "r");
Die Variable handle gibt false zurück, falls die Datei nicht geöffnet werden konnte, das ist praktisch um einen Fehler abzufangen und ein Programmabbruch zu vermeiden.
Im Folgenden ist eine Spalte über die Möglichkeiten eine Datei zu öffnen.
In der Spalte der Tabelle namens Zeiger ist der Startpunkt des Lesen/Schreibens ersichtlich. Wird dieser auf Anfang gestellt, werden bestehende Daten überschrieben!
In der Spalte erzeugen ist ersichtlich, ob die Datei automatisch anlegt wird, wenn diese noch nicht vorhanden ist.

Modus	engl.	Aktion	Zeiger	erzeugen
a+	append - anfügen	lesen und schreiben	Ende	Ja
a	append - anfügen	nur schreiben	Ende	Ja
w+	write - schreiben	lesen und schreiben	Beginn	Ja
w	write - schreiben	nur schreiben	Beginn	Ja
r+	read - lesen	lesen und schreiben	Beginn	Nope
r	read - lesen	nur lesen	Beginn	Nope

Durch das while wird die Datei Zeile für Zeile durchgegangen, bis keine Zeile mehr geliefert wird.

PHP-Quellcode: Dateien auslesen über while

<?php

// Datei öffnen zum lesen und schreiben
$handle = fopen ("mailadressen.txt", "r");

// Probleme abfangen 

if (!$handle) echo {'Probleme beim Oeffnen der Datei';}

else 

{
while ( $inhalt = fgets ($handle, 4096 ))
{
  echo "<li> $inhalt </li>";
}
 
fclose($handle);

?>

Der Ablauf dieses Skriptes ist ganz einfach:

Wir öffnen die Datei.

Danach fragen wir ob alles gut gegangen ist.

Danach lesen wir die Datei Zeile für Zeile und geben den Inhalt aus.

Und schliesslich machen wir die Datei wieder zu.  

HTML editieren

PHP lernen der Echo Befehl