pdf, ca. 1,74 MB

138
Bachelorarbeit Usability: Gestaltungsrichtlinien für die Entwicklung benutzerfreundlicher Internet-Angebote Maneifa Alchaer Said Djavan Khoshraftar Bachelorarbeit eingereicht im Rahmen der Bachelorprüfung im Studiengang Angewandte Informatik am Studiendepartment Informatik der Fakultät Technik und Informatik der Hochschule für Angewandte Wissenschaften Hamburg Betreuender Prüfer: Prof. Dr. Jörg Raasch Zweitgutachter: Prof. Martin Hübner Abgegeben am 31.August 2006

Transcript of pdf, ca. 1,74 MB

Page 1: pdf, ca. 1,74 MB

Bachelorarbeit

Usability: Gestaltungsrichtlinien für die Entwicklungbenutzerfreundlicher Internet-Angebote

Maneifa Alchaer

Said Djavan Khoshraftar

Bachelorarbeit eingereicht im Rahmen der Bachelorprüfungim Studiengang Angewandte Informatikam Studiendepartment Informatikder Fakultät Technik und Informatikder Hochschule für Angewandte Wissenschaften Hamburg

Betreuender Prüfer: Prof. Dr. Jörg RaaschZweitgutachter: Prof. Martin Hübner

Abgegeben am 31.August 2006

Page 2: pdf, ca. 1,74 MB

Inhaltsverzeichnis

Abbildungsverzeichnis 5

Tabellenverzeichnis 7

1 Einleitung 81.1 Motivation und Zielsetzung . . . . . . . . . . . . . . . . . . . . . . . . . 91.2 Aufbau der Arbeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121.3 Aufgabenunterteilung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2 Usability & Design 142.1 Begriffsbestimmungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.1.1 Was versteht man unter den Begriff Usability . . . . . . . . . . . 142.1.2 Kriterien für das Design ergonomischer Benutzerschnittstellen . . 15

2.2 Usability im World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . 18

3 Web-Design Usability Kriterien 223.1 Grundanforderung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.2 Sturktur und Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.2.1 Gruppierungsmechanismen . . . . . . . . . . . . . . . . . . . . . . 283.2.2 Platzierung der Navigation . . . . . . . . . . . . . . . . . . . . . . 303.2.3 Regeln zur Navigationsunterstützung . . . . . . . . . . . . . . . . 303.2.4 Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.2.5 Suchfunktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.3 Gestaltung von Webseiten . . . . . . . . . . . . . . . . . . . . . . . . . . 353.3.1 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.3.2 Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373.3.3 Textstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.3.4 Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.3.5 Scrollen und Scrollbalken . . . . . . . . . . . . . . . . . . . . . . . 423.3.6 Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423.3.7 CSS - Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . 443.3.8 Einsatz von Tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . 453.3.9 Benutzergruppen . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.3.10 Freiheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463.3.11 Werbungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

2

Page 3: pdf, ca. 1,74 MB

Inhaltsverzeichnis

3.4 Technische Gesichtspunkte . . . . . . . . . . . . . . . . . . . . . . . . . . 483.4.1 Bildschirmauflösungen . . . . . . . . . . . . . . . . . . . . . . . . 483.4.2 Antwortzeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.4.3 Darstellungswerkzeuge (Browser) . . . . . . . . . . . . . . . . . . 523.4.4 Plug-Ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.4.5 Session Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.4.6 Physikalische Seiten-Strukturen . . . . . . . . . . . . . . . . . . . 553.4.7 Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.4.8 Seitenaufbau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573.4.9 Transaktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

3.5 Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583.5.1 Bilder und Animationen . . . . . . . . . . . . . . . . . . . . . . . 59

3.6 Sonstige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.6.1 Drucken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.6.2 Hilfefunktion / Online - Dokumentation . . . . . . . . . . . . . . 623.6.3 Kontakt / Email . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

3.7 Gestaltung des Intranets . . . . . . . . . . . . . . . . . . . . . . . . . . . 633.8 Barrierefreiheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

3.8.1 Tipps für barrierefreie Internetauftritte . . . . . . . . . . . . . . . 673.9 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

4 Erstellung des Regelwerkes 684.1 Abgeleitete Regeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

5 Prototyperstellung 765.1 Ziele des Prototyps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.2 Anwendungsfälle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.3 Spezifikation des Prototyps . . . . . . . . . . . . . . . . . . . . . . . . . . 865.4 Implementierung und Design des Prototyps . . . . . . . . . . . . . . . . . 935.5 Usabilitytest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

5.5.1 Testkonzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 955.5.2 Testergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

5.6 Konsequenzen aus den Testergebnissen . . . . . . . . . . . . . . . . . . . 1135.6.1 Zusammenfassung der Testergebnisse . . . . . . . . . . . . . . . . 1135.6.2 Verbesserungsvorschläge . . . . . . . . . . . . . . . . . . . . . . . 114

6 Zusammenfassung und Ausblick 1156.1 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1156.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

6.2.1 Stand des Regelsystems . . . . . . . . . . . . . . . . . . . . . . . 1176.2.2 Stand des Prototyps . . . . . . . . . . . . . . . . . . . . . . . . . 118

Glossar 120

3

Page 4: pdf, ca. 1,74 MB

Inhaltsverzeichnis

Literaturverzeichnis 122

A. Regelsammlung 126

B. Inhalt der CD 133

C. Screenshots des entwickelten Prototyps 134

4

Page 5: pdf, ca. 1,74 MB

Abbildungsverzeichnis

3.1 Baumstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2 Lineare Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.3 Netzstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.4 Bildschirmauflösung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

3.5 Antwortzeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

3.6 Internetnutzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

3.7 Browsernutzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

5.1 UseCase-Diagramm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

5.2 3-Schichten-Architektur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

5.3 Klassendiagramm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

6.1 Student neu registrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

6.2 Studenten Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

6.3 Student: Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

6.4 Student: Angebot suchen . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

6.5 Student: Jobsuche aufgeben . . . . . . . . . . . . . . . . . . . . . . . . . 136

6.6 Student: Liste aller Firmen . . . . . . . . . . . . . . . . . . . . . . . . . . 136

6.7 Student: Persönliche Daten . . . . . . . . . . . . . . . . . . . . . . . . . . 137

5

Page 6: pdf, ca. 1,74 MB

ABBILDUNGSVERZEICHNIS

6.8 Firma: Bewerber suchen . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

6.9 Firma: Angebot aufgeben . . . . . . . . . . . . . . . . . . . . . . . . . . 138

6.10 Firma: Unsere Angebote . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

6

Page 7: pdf, ca. 1,74 MB

Tabellenverzeichnis

1.1 Usability-Filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.1 Farbwirkung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

7

Page 8: pdf, ca. 1,74 MB

1 Einleitung

In den 90er Jahren wurde das Internet von Tim Berners Lee1 und Robert Cailliau2entwickelt. Niemand hatte mit seiner bemerkenswerten Entwicklung gerechnet. DasInternet wurde anfänglich für militärische Zwecke und zur Kommunikation innerhalbvon Universitätsnetzwerken eingesetzt. Da das Internet ausschließlich von damaligenEntwicklern und Fachleuten genutzt wurde, hatten die Aspekte Ergonomie und Ge-brauchstauglichkeit noch keinen so großen Einfluss auf die Entstehung der Webseiten.

Mit laufender Entwicklung des Internets hat die Idee des weltweiten Webs (WWW)weiter an Bedeutung gewonnen. Immer mehr Firmen und Privatanwender schließen sichan das Internet an. Die Internettechnologie und ihre Weiterentwicklung wurden vonvielen Menschen als anziehend empfunden. Dies belegte die Pilotstudie des statistischenBundesamts im Jahr 2002. Laut dieser Studie nutzten im 1. Quartal 2002 rund 34Millionen Menschen das Internet. Das waren 46% der Gesamtbevölkerung.

Prognosen kündigen weiteres Wachstum der Internetnutzung an, denn das Internet hatsich als Medium vollständig ethabliert und ist heute nicht mehr wegzudenken. Das In-ternet ist eine sehr wichtige Plattform für die Beschaffung und den Austausch von In-formationen jeglicher Art (zum Beispiel Schulen, Wirtschaft, Beruf u.v.m.) gewordenund fungiert darüber hinaus als kommerzielle Schnittstelle für sowohl private als auchgewerbliche Geschäftspartner. Ein ausschlaggebendes Erfolgsmerkmal des Internets istder kollektive und globale Informationsaustausch, der zunehmend zu einer Informati-onsflut wird. Aus diesem globalen, multikulturellen und stark dynamischen Charaktersowie aus der Interaktivität ergeben sich neue Herausforderungen. Dies gilt besondersfür den Bereich der „Usability“.

Durch die wachsende Anzahl an Internetauftritten wird die Bedeutung der Benutzungs-freundlichkeit im Internet hervorgehoben. Denn Internetauftritte, die nicht benutzerge-recht gebaut sind, werden oft nicht besucht. Einer der ersten Eindrücke, die der Besuchereiner Webseite - oftmals auch unbewusst - wahrnimmt, ist die Benutzungsfreundlichkeit.Dieses Kriterium entscheidet meist darüber, ob der Benutzer die Seite durchsucht oder

1 Sir Timothy J. Berners-Lee, geboren am 8. Juni 1955 in London ist ein britischer Informatiker undgilt als Begründer des World Wide Webs

2 Robert Cailliau, geboren am 26.Januar 1947 in Tongeren ist ein belgischer Informatiker. Seit Dezem-ber 1974 am CERN tätig, veröffentlichte er am 12.November 1990 gemeinsam mit Tim Berners-Leedas Konzept für ein weltweites Hypertext-Projekt, aus dem das World Wide Web hervorging.

8

Page 9: pdf, ca. 1,74 MB

1.1. MOTIVATION UND ZIELSETZUNG

ob er, falls vorhanden, alternative Internetseiten mit höherem Bedienkomfort zur In-formationsbeschaffung nutzt. Die Folge dessen ist, dass Seiten mit durchaus wertvollenInhalten aufgrund ihrer schlechten Gestaltung oder komplexen Bedienbarkeit kaum be-sucht werden. Der Erstkontakt eines Benutzers mit einer Webseite ist somit entscheidendfür das weitere Verhältnis zwischen ihm und dem Webangebot. Einer Erhebung des sta-tistischen Bundesamtes [Sta05] nach setzten 80 % der Unternehmen in Deutschland imJahr 2003 Computer ein. Darüber hinaus nutzten im gleichen Jahr bereits 73% allerbefragten Unternehmen das Internet für Ihre Geschäftsabläufe.

Diese hohe Zahl ist eine wichtige Botschaft für jeden Webdesigner bzw. Webentwickler.Sie zeigt, wie wichtig die Benutzungsfreundlichkeit einer Webseite ist, denn wie in je-dem Zweig der Wirtschaft besteht auch im Internet ein Angebot-Nachfrage-Verhältnis.Die große Anzahl an Angeboten im Internet ermöglicht dem Besucher, sich frei im Webzu bewegen und sich für die am besten bedienbare und effektivste, kurzum: die benut-zerfreundlichste Seite zu entscheiden. Viele Unternehmen sind sich inzwischen dieserwichtigen Tatsache bewusst und versuchen daher ihre Webseiten im Hinblick auf dieNutzbarkeit zu optimieren. Die Benutzungsfreundlichkeit spielt daher eine wichtige Rol-le. In der Praxis wird dies weiterhin an vielen Stellen vernachlässigt ([Schweibenz03],S.10).

Der Erfolg eines Web-Auftritts ist trotz großer Konkurrenz im World Wide Web durchhöhere Benutzbarkeit und Ergonomie zu unterstützen. Inhalt und Design des Webauf-tritts sollten sich nicht an modischen Trends orientieren, sondern nach den Wünschenund Bedürfnissen der jeweiligen Zielgruppe entsprechend konzipiert werden. Mittlerwei-le haben Internet-Nutzer hohe Erwartungen an ein Internetangebot und möchten ihreInformationen sehr schnell und unkompliziert erlangen.

1.1 Motivation und Zielsetzung

Video-Aufzeichnungen im Usability Labor der Hochschule für angewandte Wissenschaf-ten (HAW) in Hamburg geben einen beachtlichen Aufschluss über die Wichtigkeit derErgonomie im Internet. In diesem Labor werden Testpersonen bei der Nutzung von An-wendungen vor allem Webanwendungen, beobachtet und Probleme, die bei der Lösungvon bestimmten Aufgaben auftreten, identifiziert. Dies wird entsprechend mit Kamerasfür weitere Bewertungen aufgezeichnet. Im laufe der Semester sind viele solcher Filmeentstanden (vgl. Tabelle 1.1).

Die daraus resultierenden Erkenntnisse haben ergeben, dass nach wie vor viele We-bauftritte eine verbesserungswürdige und zum Teil sogar eine minderwertige Benutz-barkeit aufweisen. Diese Situation verlangt nach einer Studie, die die Problematik derGebrauchstauglichkeit ausführlich behandelt. Darüber hinaus sollen für Web-Designer

9

Page 10: pdf, ca. 1,74 MB

1.1. MOTIVATION UND ZIELSETZUNG

bzw. Web-Entwickler Lösungsvorschläge erarbeitet und zur Verfügung gestellt werden.Bisher hatte der Web-Entwickler nur die Möglichkeit, auf eine umfangreiche Literaturund Websammlungen zuzugreifen, um die erstellten Webseiten hinsichtlich ihrer Benutz-barkeit anzupassen. Natürlich ist das eine Möglichkeit zur Vorgehensweise. Die Literaturist nur sehr umfangreich und befasst sich mit teilweise schon gelösten Problemen.

Bereits vor Beginn der Arbeit konnte vorbehaltlich genauerer Überprüfung festgestelltwerden, dass Internetauftritte einen Workflow berücksichtigen müssen, den der Benutzerabarbeiten möchte. Der Webdesigner muss also den Workflow des Nutzers vorausahnenund die Seite entsprechend gestalten. Derartige Regeln sind nach bisheriger Durchsichtin der Literatur allenfalls nur undeutlich erkennbar. Die Autoren dieser Arbeit bemühensich anhand der Usability-Labor-Aufzeichnungen, den daraus gewonnenen Erkenntnis-sen und der vorhandenen Literatur, ein kompaktes und übersichtliches Regelwerk zuerstellen und dessen Praktikabilität zu belegen. Zusätzlich soll das Regelwerk die Min-destanforderungen der Usability bei einer Webseite garantieren.

Die Schwierigkeit dieses Regelwerkes ist sicherlich, dass es keinen eindeutigen Weg bei derErstellung einer Webseite gibt. Es gibt verschiedene Lösungsansätze, Internetseiten un-ter Beachtung einiger grundsätzlich einzuhaltender Regeln zu erstellen. Innerhalb dieserAusarbeitung sollen die Regeln, die unbedingt bei der Erstellung von Internetseiten be-achtet werden sollten (Minimalregeln), herausgearbeitet und erläutert werden. Um eineUnterteilung zwischen Minimalregel bzw. Mussregel und erweiterte Regeln übersichtlichdarzustellen, sollen die genannten Regeln auch tabellarisch gegliedert werden.

Die Usability-Filme werden von den Autoren angesehen und ausgewertet. Diese werdendann mit den jeweiligen Dateinamen versehen und in der Bachelorarbeit referenziert.Die zu diesem Zweck erstellte Tabelle 1.1 beinhaltet zwei Spalten. In der ersten Spaltewerden die jeweiligen Dateinamen (Filmbezeichnungen) und in der zweiten Spalte dieentsprechende Seitenzahl der zugehörigen Referenzen in der Bachelorarbeit dargestellt(vgl. Tabelle 1.1). Anhand dieser Usability-Filme werden die aus der Literatur herausgearbeiteten Prämissen für benutzerfreundliche Seiten entweder belegt oder widerspro-chen.

Dieser Arbeitsabschnitt endet mit dem Zwischenergebnis eines unmittelbar praxisrele-vanten Regelsystems („DO & DON’T“), das die wichtigsten Regeln enthält und in einemüberschaubaren Rahmen präsentiert. Von jeder Regel wird zur Quelle bzw. zum Film ver-wiesen. Anschließend kann ein Webdesigner mit diesem Regelwerk ausgestattet werden.Aufgrund des überschaubaren Umfangs kann dieser Leitfaden leicht befolgt werden.

Im darauf folgenden und letzten Arbeitsabschnitt soll dann die Schlüssigkeit des Regel-werks anhand eines Prototyps belegt werden. Ziel ist es, diesen Prototyp dem erstelltenRegelwerk entsprechend zu entwickeln. Der Prototyp soll dann im Usability-Labor ge-nauer untersucht werden. Das Resultat dieser Untersuchung soll Aufschluss darübergeben, ob sich die aufgestellten Regeln auch in der Praxis bewähren.

10

Page 11: pdf, ca. 1,74 MB

1.1. MOTIVATION UND ZIELSETZUNG

Name des Usability-Films RefernzDVD1-01-bahn-lupo.m2p 23,36DVD1-04-neckermann.m2p 23, 34, 62DVD1-01-hansenet.m2p 35, 37, 59, 56,60DVD1-02-globetrotter.m2p 39DVD1-02-flugbuchung.m2p 37, 53, 55DVD1-03-gmx.m2p 40DVD1-Zeit-1.avi 39DVD2-07-stern.m2p 34DVD2-09-HVV.m2p 34DVD2-Niebüll-Bahn.m2p 34,36, 40, 42, 57DVD2-05-NorskIT.m2p 42DVD2-06-TCom.m2p 33, 35DVD2-09-Europcar-1.m2p 46DVD2-05-bahn-RE.m2p 26DVD2-08-tjaereborg.m2p 32, 34DVD3-10-Dresdner-Bank.m2p 42, 42, 39DVD3-2-04-phpbb.m2p 31DVD3-Conrad.m2p 30, 33DVD3-09-europcar-2.m2p 38,57DVD3-2-02-Ryanair.m2p 53DVD3-02-03-Musical.m2p 33DVD3-2-01-ebay.m2p 37DVD4-Hrdrewes.m2p 31, 55DVD4-HrDrewes-2.m2p 33, 60DVD4-HVV.m2p 50DVD5-TDSL.m2p 34, 42DVD5-stern-02.m2p 41, 60DVD6-zeit-2.m2p 58DVD6-Versicherung-03 39DVD6-Versicherung-1.m2p 48, 57Eu-kommision 31t1-otto 39T3-otto 55Lavendel.m2p 5708-Europcar.m2p 36Huk-1.m2p 33Zeit-01.m2p 34Otto-t5 34

Tabelle 1.1: Usability-Filme

11

Page 12: pdf, ca. 1,74 MB

1.2. AUFBAU DER ARBEIT

1.2 Aufbau der Arbeit

Das erste Kapitel bildet die Einleitung und die dazugehörige Motivation dieser Ba-chelorarbeit. Es soll die Problematik und die Bedeutsamkeit der Usability im WWWfür den Leser beschreiben. Der Leser wird mit der Problematik der Usability im Webkonfrontiert. Anschließend wird dem Leser ein Aufschluss über die Zielsetzung dieserAbschlussarbeit gegeben.

Im zweiten Kapitel wird der Begriff „Usability“ anhand unterschiedlicher Definitionenerläutert. Diese Erläuterungen sollen dem Leser vermitteln, wie die Usability in der Pra-xis gehandhabt wird. Im Anschluss wird die durch die Auswertung der zahlreichen Filmegewachsene Auffassung der Autoren dargelegt. Nach Festlegung der Usability Definitionwird der Stand der heutigen Usability im Web und die Ziele für eine Verbesserung derUsability angesprochen. Diese Verbesserung soll dem Leser Klarheiten über die Defini-tionsentscheidung durch die Autoren geben.

Das dritte Kapitel beinhaltet überwiegend Erfahrungen, die die Autoren anhand vondiversen Medien, wie zum Beispiel Usability-Aufzeichnungen aus dem Labor HAW-Hamburg, Literatur, Internetrecherchen usw. zusammengefasst haben. Nun gilt es diegesammelten Erfahrungen auszuwerten und zu bewerten. Die Zusammenfassung die-ser Erfahrungen soll im Detail die Grundanforderung für eine ergonomisch aufgebauteWebseite definieren. Somit sollte der Leser seine eigene Erfahrung im Web in dieserZusammenfassung wieder finden können. Diese direkte Wiederfindung ist eine Bestäti-gung für die aufgeführte Erfahrung in diesem Kapitel. Dies belegt zusätzlich das weitereVorhaben der Autoren bei der Erstellung eines Regelwerks.

Das vierte Kapitel beschäftigt sich mit dem Erstellen des Regelsystems. Alle aus Ka-pitel 3 zusammengefassten Usability-Kriterien zum Erstellen eines benutzerfreundlichenWebauftritts werden in Kapitel 4 in Form eines kompakten Regelsystems aufgezählt.Dieses Regelsystem soll die wichtigsten Kriterien, die eine gebrauchstaugliche Webseiteausmacht, beinhalten.

Im Kapitel fünf wird ein Prototyp erstellt ,der eine Jobbörse simulieren soll. Die inKapitel 4.1 abgeleiteten Regeln werden in diesem Prototyp eingesetzt und von Studentenim Usability-Labor getestet. Die daraus resultierenden Ergebnisse und Konsequenzenwerden in diesem Kapitel beschrieben.

12

Page 13: pdf, ca. 1,74 MB

1.3. AUFGABENUNTERTEILUNG

1.3 Aufgabenunterteilung

Gemäß der Prüfungsordnung sind die Kapitel dieser Bachelorarbeit unter den Auto-ren dieser Arbeit wie weiter unten aufgeführt aufgeteilt. Es ist anzumerken, dass eineklare Abgrenzung der Teilbereiche für die Autoren nicht immer möglich gewesen ist.Die aufgeführten Kapitel weisen eine starke Abhängigkeit zu einander auf. Aus diesemGrund war eine direkte Zusammenarbeit in fast allen Bereichen der Kapitel notwendig.Bei der Erstellung des Prototyps sollen die resultierenden Schlussfolgerungen aller Ka-pitel berücksichtigt und angewandt werden. Daher ist ebenfalls bei der Erstellung diesesPrototyps eine enge Kooperation beider Autoren unerlässlich.

Maneifa Alchaer

Kapitel 1, 1.1, 1.2, 2, 3.3, 3.4.1, 3.4.3, 3.4.7, 3.5, 3.5.1, 3.6.1, 3.6.2, 3.8, 4.1, 5.1, 5.2, 5.4,5.5, 6

Said Djavan Khostraftar

Kapitel 1, 1.1, 1.2, 2, 3.1, 3.2, 3.4.2, 3.4.4, 3.4.5, 3.4.6, 3.4.8, 3.4.9, 3.7, 4.1, 5.1, 5.3, 5.6,6

13

Page 14: pdf, ca. 1,74 MB

2 Usability & Design

2.1 Begriffsbestimmungen

Im folgenden Kapitel werden spezielle Begriffe, die für das Thema Usability von zentralerBedeutung sind, erläutert.

2.1.1 Was versteht man unter den Begriff Usability

Der Begriff Usability ist vielfältig definiert. Typische Definitionen sind:

“Der Begriff Usability stammt aus dem Englischen. Er setzt sich aus zwei Worten zu-sammen, to use (benutzen) und the ability (die Fähigkeit). Übersetzt wird der Begriff mitGebrauchstauglichkeit oder aber auch Brauchbarkeit“ [Usability 2005].

“Usability applies to all aspects of a system with a human might interact, includinginstallation and mightiness procedures“([Nielsen93], S. 25).

“Usability is the measure of the quality of the user experience when interacting withsomething - whether a Web site, a traditional software application, or any other devicethe user can operate in some way or another“ [Nielsen93].

“Usability ist der Maßstab an dem die Qualität der Erfahrung des Benutzers gemes-sen wird- basierend auf der Interaktion Maschine Mensch. Z.B. mit einer Webseite, ei-nem traditionellem Software Programm oder alles anderem, womit der User in Kontakttritt.

Bei der Übersetzung geht leider der Zusammenhang mit den Begriffen Usefulness (engl.für Nützlichkeit) und Utility (engl. für Nutzen) verloren. Daher hat sich mittlerweiledieser Begriff im deutschsprachigen Raum durchgesetzt und heute gelten die BegriffeBenutzerfreundlichkeit, Benutzungsfreundlichkeit, Benutzbarkeit als Synonyme für Usa-bility [Schweibenz03].

14

Page 15: pdf, ca. 1,74 MB

2.1. BEGRIFFSBESTIMMUNGEN

Die internationale Norm EN ISO 9241-11 besagt, das die “Usability eines Produkts dasAusmaß ist, in dem es von einem bestimmten Benutzer verwendet werden kann, umbestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellend zuerreichen“ ([ISO 9241-11], S.4).

Da die allgemeine ISO Norm überwiegend alle erwähnten Definitionen abdeckt, schließensich ihr die Autoren an. Dies beschreibt, dass die Usability eines Produkts der Maßstabist, der qualitativ und quantitativ bestimmt, wie der Benutzer mit einem Produkt zu-rechtkommt. Anhand dieses Maßstabes ist festzulegen, in welchem Maße die vom Benut-zer definierten Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellenderreicht werden können. Somit ist die “Usability immer abhängig vom aktuellen Nutzungs-kontext“ ([Jung05], S.7). Zu dem aktuellen Nutzungskontext gehören unter anderen dieEigenschaften von Menschen (Alter, Bildung, Vorkenntnisse etc.), die Aufgabenstellung(Anlass, Ziele, Häufigkeit etc.), die Umgebung der Nutzung (Helligkeit, Geräusche etc.)und die Eigenschaften der Maschine (Bandbreite, Bildschirmgröße etc.).

Zusammenfassend ist Usability eine Eigenschaft eines Produktes, die die Nutzbarkeitfestlegt. Hohe Usability erleichtert folglich die Nutzung des Produkts. Sie bietet Hilfe-stellung für Anwender und ist damit ein unverzichtbarer Bestandteil der Aufgabe desEntwicklers.

2.1.2 Kriterien für das Design ergonomischerBenutzerschnittstellen

Benutzeroberflächen interaktiver Systeme sollten vom Benutzer leicht zu bedienen sein.Der Teil 10 der Norm DIN EN ISO 9241-10 ([ISO 9241-10], S.4) beschreibt folgendeGrundsätze für die Gestaltung und Bewertung einer Schnittstelle zwischen Benutzer undSystem (Dialoggestaltung)

Aufgabenangemessenheit

“Ein Dialog ist aufgabenangemessen, wenn er den Benutzer unterstützt, seine Arbeits-aufgabe effektiv und effizient zu erledigen“.

Ein Benutzer sollte mit angemessenen Hilfestellungen sein Anliegen erledigen können.Mögliche Hindernisse sollten nicht auftreten, damit ein effektiver und effizienter Arbeits-ablauf garantiert wird.

15

Page 16: pdf, ca. 1,74 MB

2.1. BEGRIFFSBESTIMMUNGEN

Selbstbeschreibungsfähigkeit

“Ein Dialog ist selbstbeschreibungsfähig, wenn jeder einzelne Dialogschritt durch Rück-meldung des Dialogsystems unmittelbar verständlich ist oder dem Benutzer auf Anfrageerklärt wird“ .

Das System muss den Benutzer so genau wie möglich durch die Arbeitsschritte führen,damit keine Kommunikationsprobleme auftreten, die weitere Probleme zur Folge haben.Hierzu muss das System die Sprache des Benutzers zur Kommunikation nutzen.

Steuerbarkeit

“Ein Dialog ist steuerbar, wenn der Benutzer in der Lage ist, den Dialogablauf zu startensowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel erreicht ist“.

Hierzu muss das Programm auf den Benutzer konfigurierbar sein, damit dessen Freiheitgewährleistet wird. Somit dirigiert der Benutzer und nicht das Programm. Folglich kannder Benutzer die für ihn beste Konfiguration bestimmen und dadurch seine maximaleEffektivität bzw. Effizienz erreichen.

Erwartungskonformität

“Ein Dialog ist erwartungskonform, wenn er konsistent ist und den Merkmalen des Be-nutzers entspricht, zum Beispiel seinen Kenntnissen aus dem Arbeitsgebiet, seiner Aus-bildung und seiner Erfahrung sowie den allgemein anerkannten Konventionen“.

Hierzu ist es sinnvoll, sich herrschenden Standards anzupassen, um den Benutzer nichtdurch neue Definitionen zu irritieren. Eine erhöhte Irritation des Benutzers führt zurMinderung seiner Zufriedenheit und birgt die Gefahr, den Nutzer an die Konkurrenz zuverlieren.

Fehlertoleranz

“Ein Dialog ist fehlertolerant, wenn das beabsichtigte Arbeitsergebnis trotz erkennbar feh-lerhafter Eingaben entweder mit keinem oder mit minimalem Korrekturaufwand seitensdes Benutzers erreicht werden kann“.

16

Page 17: pdf, ca. 1,74 MB

2.1. BEGRIFFSBESTIMMUNGEN

Natürlich unterlaufen dem Benutzer Fehler oder es treten Missverständnisse auf. DemBenutzer muss das Gefühl vermittelt werden, dass diese Fehler toleriert werden. Hier-zu muss der Benutzer spezifisch auf seine Fehler hingewiesen werden bzw. sollten vomSystem Korrekturvorschläge gegeben werden. Diese Eigenschaft, Fehler spezifisch zuerkennen und nicht den gesamten Arbeitsablauf erneut zu starten, gehört zu den Cha-rakteristiken guter und ergonomischer Systeme.

Individualisierbarkeit

„Ein Dialog ist individualisierbar, wenn das Dialogsystem Anpassungen an die Erfor-dernisse der Arbeitsaufgabe sowie an die individuellen Fähigkeiten und Vorlieben desBenutzers zulässt“.

Die Anpassungsfähigkeit eines Systems muss basierend auf den Fähigkeiten der Benutzergegeben sein. Hierzu ist eine gesamte Anpassung der Seite an die Benutzerbedürfnissenotwendig. Der gesamte Webauftritt passt sich an die individuelle Änderung an und keinBereich wird eingeschränkt.

Lernförderlichkeit

„Ein Dialog ist lernförderlich, wenn er den Benutzer beim Erlernen des Dialogsystemsunterstützt und anleitet“.

Um die Kommunikation so einfach wie möglich zu halten, muss der Benutzer Schrittfür Schritt bei Arbeitsabläufen unterstützt werden. Beispielsweise kann dem Benutzerbeim Ausfüllen eines Formulars die notwendigen Angaben mit Hilfe einer Quickinfomitgeteilt werden. Ein ausgefülltes Musterformular kann ebenfalls als Hilfe in Erwägunggezogen werden. Diese Qualitätsanforderungen sollten bei der Gestaltung von Softwareberücksichtigt werden. Der Begriff der Usability wird nun im Zusammenhang mit demWeb näher interpretiert.

17

Page 18: pdf, ca. 1,74 MB

2.2. USABILITY IM WORLD WIDE WEB

2.2 Usability im World Wide Web

Nach den allgemeinen Begriffserklärungen in Kapitel 2.1 wird nun der Begriff Usabilityim Kontext der Internetnutzung näher erläutert. Da der Einsatz der Usability im Webunter besonderen Umständen auszuführen ist, sind wichtig vorhandene Einschränkungenzu erwähnen. Hierzu sollte die Rolle der Usability bei der Milderung dieser Beschrän-kungen angesprochen werden.

Für die hohe Bedeutsamkeit der Usability im WWW gibt es im Wesentlichen drei Grün-de:

1. Die Anzahl der Internetnutzer steigt erheblich (vgl. Kap. 1.1). Dieses Wachstumhat zur Folge, dass die Anzahl von Web-Angeboten dementsprechend steigen wird.Dann werden nur Internetseiten mit höherer Bedienbarkeit zu den erfolgreichenSeiten gehören.

2. Ein weiterer Grund sind die unterschiedlich vorhandenen Nutzergruppen im Web.Diese Tatsache steht im Gegensatz zur normalen Software, bei der eine spezifischeBenutzergruppe existiert und alle in gleicher Weise behandelt werden. Bei einemInternet-Auftritt sollte mit unterschiedlichen Nutzern gerechnet werden. Daher sollzum Beispiel für einen Profi-Benutzer eine Suchmaschine für das schnelle Auffindender Information angeboten werden. Dies darf aber nicht den normalen Benutzerdaran hindern, eine einfache Navigation zu bedienen.

3. Der dritte Grund lässt sich auf die Netzgeschwindigkeit zurückführen. Eine normaleAnwendung nutzt die gesamten Ressourcen innerhalb eines Rechners aus, wobeidie Kommunikation zwischen einzelnen Komponenten schnell stattfindet. Bei derInternetnutzung erwartet der Besucher dasselbe Prinzip. Er möchte sein Anliegenin einer akzeptablen Zeit erledigen können. Für den Benutzer ist nicht akzeptabel,dass im Internet die Kommunikation zwischen Komponenten wesentlich langsamerist ([Schweibenz03], S. 41).

Zu dem dritten Grund kann die Benutzererwartung durch ein einfaches Navigieren imWWW erhöht werden. Jedes Hindernis ist für ihn eine Verschlechterung der Benutzbar-keit des Web-Auftritts. Wenn der Benutzer mit seinen Erwartungen an die Seite nichtzufrieden gestellt wird, versucht er sofort, Konkurrenzseiten aufzurufen.

Eine Usability Definition von Lemme hebt hervor, “...dass Internetseiten möglichst ein-fach benutzt werden können, und das sie den Internetnutzer beim Erreichen seiner selbstdefinierten Ziele unterstützen“ ([Lemme01], S. 44).

18

Page 19: pdf, ca. 1,74 MB

2.2. USABILITY IM WORLD WIDE WEB

Nach Thissen bedeutet Usability im Kontext des World Wide Web, dass Informationenleicht zu finden, zu verstehen und zu nutzen sind. Die Aufgabe einer Webseite sei es,effektiv zu informieren und zu kommunizieren [Thissen01].

Nach ([Nielsen93], S.26) sind für Usability relevante Komponenten traditionell mit denfolgenden fünf Attributen verbunden:

I. Lernfähigkeit: Das System soll leicht zu erlernen sein, sodass der Benutzer sofortmit der Arbeit am System beginnen kann.

II. Effizienz: Das System soll effizient zu benutzen sein, sodass der Benutzer, nachdemer mit dem System vertraut ist, eine hohe Produktivität erzielen kann.

III. Wiedererlernbarkeit: Der Benutzer soll sich, nachdem er längere Zeit nicht mitdem System gearbeitet hat, schnell wieder im System zurechtfinden können. Ein erneutesEinarbeiten in das System soll nicht notwendig sein.

IV. Fehlertoleranz: Das System soll eine geringe Fehlerrate aufweisen. Wenn ein Fehlerauftritt, soll dieser mit einfachen Mitteln beseitigt werden können.

V. Zufriedenheit: Das System soll angenehm zu bedienen sein. Benutzer sollen dasSystem gerne benutzen.

Aus den oben aufgeführten Definitionen lässt sich eine starke Abhängigkeit von derWahrnehmung der Nutzer ableiten. Somit ist Usability nur bedingt ein technisches The-ma. Es ist vielmehr ein soziopsychologisches Problem in der Assoziation und Benutzunginteraktiver Medien und damit von interdisziplinärer Natur.

Die Gebrauchstauglichkeit einer Software ist von ihrem Nutzungskontext abhängig. ImTeil 11 der ISO 9241 werden Leitkriterien für die Gebrauchstauglichkeit einer Softwarebestimmt:

Effektivität im Web

Die Effektivität bestimmt, wie gut der Benutzer sein Ziel erreichen kann bzw. wie vieleBenutzer eine bestimmte Aufgabe erfolgreich abschließen können ([Balzert04], S. 4).Die Effektivität der Webseite ist wiederum für das Unternehmen wichtig, da mit einemOnlineauftritt das Ziel verfolgt wird, möglichst viele Besucher mit den gewünschtenInformationen zu versorgen (über E-Commerce Kunden gewinnen). Folglich wird dieentsprechende Seite immer wieder vom Kunden besucht. (Bsp.: von 100% der Besucherfinden 80% die gewünschte Information, d.h. dass 80% Effektivität entsteht).

19

Page 20: pdf, ca. 1,74 MB

2.2. USABILITY IM WORLD WIDE WEB

Effizienz im Web

Um den Grad der Akzeptanz im Internet zu steigern, ist die Effizienz im Internet vonzentraler Bedeutung. Denn der Benutzer sollte in einer akzeptablen Zeit und in einemzumutbaren Aufwand seine Aufgaben erledigen können. Mit nur zwei Mausklicks kommtder Benutzer zur gewünschten Information und die Seiten werden auch bei Benutzungeines Modems in weniger als 5 Sekunden geladen ([Balzert04], S. 5).

Zufriedenheit im Web

Zufriedenheit setzt sich aus Effizienz und Effektivität zusammen, d.h. wenn der Kundesein Anliegen mit einem verhältnismäßig niedrigen Aufwand mit einem zufriedenstellen-den Ergebnis erledigen kann.

Nutzungskontext im Web

Es sollte im Web angestrebt werden, die Umgebung einer Webseite an die Benutzer-zielgruppe anzupassen (zu gestalten). Einer der wichtigsten Nutzungskontexte ist dasWeb-Design. Beim Web Design ist zu beachten, dass unterschiedliche Gestaltungskon-zepte für verschiedene Benutzerzielgruppen verwendet werden.

Methoden (Heuristiken) zur Verbesserung der Usability im Web

[Nielsen90] hat zur Verbesserung der Usability im Web bestimmte Heuristiken auf-gestellt. Diese Heuristiken sind aus Erfahrungen gewonnen. Sie können durch bisherigeUntersuchungen im Usability Labor im Wesentlichen bestätigt werden. Jedoch stellt sichdie Frage, ob dieser Katalog vollständig und widerspruchsfrei ist. Im Folgenden werdendie wichtigsten Heuristiken von Jakob Nielsen über die Web-Usability aufgezählt:

1. Während der gesamten Entwicklungszeit einer Webseite sollte das Ziel und dieBenutzerzielgruppe bei jeder Entscheidung in Betracht gezogen werden.

2. Die Sprache des Systems soll der Sprache der Zielgruppe entsprechen.

3. Ein Benutzer, der nicht gut innerhalb einer Webseite zum Beispiel bei E-Commercenavigieren kann, wird das zu suchende Produkt nicht finden und zu einer anderenSeite wechseln. Die Effektivität wird reduziert unf folglich wird der Kunde die Seitenicht mehr besuchen.

20

Page 21: pdf, ca. 1,74 MB

2.2. USABILITY IM WORLD WIDE WEB

4. Es sollten keine Metaphern und Symbole verwendet werden, die auf einige Ziel-gruppen anderer Kulturen beleidigend wirken könnten.

5. Die Webseite sollte in unterschiedlichen Umgebungen (Browser, Betriebssystem)getestet werden, um mögliche Fehler auszuschließen.

6. Funktionen und Dienste einer Webseite sollten ohne jegliche Hilfe vom Benutzererkennbar sein.

7. Der Benutzer sollte die Möglichkeit haben, den Teil der Seite, der ihn interessiert,zu nutzen (Vermeidung von Frames).

8. Es sollte vermieden werden, die Seite mit Informationen zu überhäufen. Die In-formationen sollten übersichtlich mit Überschriften in Kurzform aufgefasst werdenund per Hyperlink bei Interesse vertieft werden können. Übersichtlichkeit ist dieFolge.

9. Beim Auftreten eines Fehlers sollte Hilfestellung in Form von alternativen Vor-schlägen gegeben werden, (zum Beispiel beim Ausfüllen eines Formulars).

10. Hilfetexte sollen knapp und verständlich sein.

21

Page 22: pdf, ca. 1,74 MB

3 Web-Design Usability Kriterien

In diesem Kapitel wird die Problematik der Gebrauchstauglichkeit im Web anhand vonUsability-Aufzeichnungen und Literatur gegenüber gestellt und die wichtige Thematikfür den Leser in Form einer Aufzählung dargestellt.

Diese Themen sollen dem Leser verdeutlichen, wie bedeutsam die Unterstützung einesWebbesuchers ist. Zwar interagiert der Webbesucher nur mit einer Maschine, er erwartetjedoch, dass er seine Ziele zufrieden in einem angemessenen Aufwand erreichen kann. Umden Erwartungen des Webbesuchers gerecht zu werden, muss die Mensch-Computer-Interaktion richtig gestaltet werden. Oft wird bei der Gestaltung interaktiver Systemeauf Software-Ergonomie und Usability verzichtet. Dies wird meist als zu überbewertet.Anstatt der erhofften Einsparungen treten somit meist hinterher größere Belastungenauf. Damit die gewünschten Benutzererwartungen erfüllt werden, sind Usabilty-Regelnunabdingbar.

Bei der Gestaltung einer Webseite gibt es keine festen Vorschriften. Im Prinzip kanndie Seite individuell gestaltet werden. Allerdings ist es ratsam, die allgemein bekanntenUsability Probleme zu vermeiden und Gestaltungsregeln (Styleguides) zu befolgen.

Die Erweiterung der Benutzbarkeit soll die Benutzer so motivieren, dass sie weiterhindie Seite besuchen und zufrieden gestellt werden. Schließlich hält sich jeder Besucherfreiwillig auf einer Seite auf, um bestimmte Informationen zu sammeln oder ein Pro-blem zu lösen. Webnutzer haben kein weiteres Wissen von möglichen Problemen, dieauftreten können. Sie möchten ohne Umwege an die gewünschte Information gelangenund tolerieren dabei keine Verzögerungen. Wartezeit bei der Datenverarbeitung ist fürden Benutzer ein Hindernis. Deshalb versucht er beim Auftreten solcher Hindernisse aufKonkurrenzseiten zu wechseln.

3.1 Grundanforderung

Es gibt sicherlich viele Wege, eine schlüssige Internetseite zu gestalten. Trotzdem solltenbei keinen Webseiten die Mindest-/ Grundanforderungen unbeachtet bleiben. In diesemAbschnitt werden die Grundaspekte zum Aufbau eines Webauftritts zusammengefasst.

22

Page 23: pdf, ca. 1,74 MB

3.1. GRUNDANFORDERUNG

• Der Aufbau eines Webauftritts soll so konzipiert werden, dass ein DV-technischunerfahrener Benutzer damit zurechtkommt [LMU-München].

• Die meistbenutzten Funktionen sollten durch Button ausgelöst werden könnenund die selten benutzten Funktionen können über die Standardmenüleiste bzw.Zusatzfenster abgerufen werden [LMU-München].

• Die Raumaufteilung des Bildschirms sollte so aufgebaut werden, dass die Über-sichtlichkeit der Seite unterstützt wird [LMU-München].

• Mausfunktion ist auch durch Tastaturkombinationen ersetzbar und dies sollte imMenüpunkt Hilfe ausführlich beschrieben werden. [LMU-München].

• Vermittlung wahrheitsgemäße bzw. gleich bleibende Information an den Benutzerin jedem Arbeitsschritt führt zur Glaubwürdigkeit der Internetseite. Ansonstenist der Benutzer unmotiviert und kann sich auf die Ergebnisse der Webseite nichtverlassen.

Der Usability-Film „04-neckermann.m2p“ zeigt diese Unstimmigkeit der Ergeb-nisse bei einer Flugreisebuchung. Die Testkandidaten werden darauf hingewiesen,dass die Verfügbarkeit gerade getestet wird. Nachdem die konkrete Reise vom Be-nutzer ausgewählt wird, kommt die Meldung, dass diese Reise doch nicht verfüg-bar ist. Im Usability-Film „01-Bahn-Lupo.m2p“ möchten die Testkandidaten einFahrrad auf ihrer Bahnreise mitnehmen. Im Feld „Fahrradmitnahme“ kann ein Ha-ken gesetzt werden, das wird auch gemacht. Doch beim Anklicken des „Verbindungsuchen“ Buttons wird darauf hingewiesen, dass die Buchung einer Fahrradkarte imInternet nicht möglich sei.

• Um die Glaubwürdigkeit der Seite bzw. des Unternehmers zu gewährleisten, ist essinnvoll nach ([Nielsen01]), die Seite erst zu veröffentlichen, wenn sie mit vollerFunktionalität ausgestattet ist.

• Es soll das Intuitivitätsgefühl des Benutzers unterstützt werden, indem er beimersten Aufrufen der Webseite sofort weiß, wo er sich gerade befindet, was ihmalles an Möglichkeiten bereitgestellt worden ist und was die Hauptaufgabe dieserWebseite ist [Nielsen01].

• Um festzustellen, welche Sprachunterstützungen für die Internetseite notwendigist, sollte die Serverlog Information zur Hilfe herangezogen werden. Anhand die-ser Information sollte festgelegt werden, wie viele Besucher aus unterschiedlichenLändern die Seite besucht haben ([Nielsen01], S. 320).

23

Page 24: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

Aktualisierung

1. Webseiten, die auf News und aktuelle Ereignisse spezialisiert sind, benötigen Echtzeit-Aktualität und müssen mehrmals am Tag mit aktuellem Inhalt versorgt werden.

2. Seiten, die Ihren Schwerpunkt nicht auf aktuelle Ereignisse legen, erfordern entwe-der tägliche oder wöchentliche Aktualität.

3.2 Sturktur und Navigation

Ein Webangebot besteht aus eine Anzahl von einzelnen Webseiten. Diese müssen mit Hil-fe einer Navigation strukturiert werden, damit der Benutzer sich darin orientieren kann.Eine angebotene Navigationshilfe bei Webseiten soll die Übersichtlichkeit und Auffind-barkeit der Seite erhöhen. Viele Internetseiten stellen trotz ihres intuitiv aufgebautenInhalts ohne eine übersichtliche Navigation ein Hindernis für Benutzer mit mangeln-der Web-Erfahrung dar. Eine gute Navigation sollte nach ([Nielsen01], S.188) folgendeFragen für den Benutzer beantworten:

• Wo befinde ich mich gerade?

• Wo bin ich gewesen?

• Wo kann ich hingehen?

Um die Frage “Wo befinde ich mich gerade?“ zu beantworten, gibt es folgende Möglich-keiten:

1. In der Navigationsleiste ist der aktuelle Link auf der Seite nicht mehr anzuklickenund meistens mit anderer Farbe oder/und Schriftgröße bzw. -stärke hervorzuheben.

2. Innerhalb der URL befindet sich auch der Name der aktuellen Seite.

3. Viele Seiten bieten zusätzliche Pfadinformation an. Das letzte Element des Pfadesist die aktuelle Seite.

Besuchte Seiten verändern ihre Schriftfarbe bzw. -stärke. Der Benutzer weiß anhand die-ser Änderung, wo er schon einmal gewesen ist. Die Unterbäume eines Navigationsbaumesspezifizieren ein Thema, d.h. wenn ein Benutzer sich genau über ein Thema informierenmöchte, soll er tiefer in den Baum navigieren. Die Blätter jedes Knotens im Baum zeigenweitere Navigationsmöglichkeiten für aktuelle Themen.

24

Page 25: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

Navigationsmodelle

Es gibt verschiedene Navigationsmodelle, welche unterschiedliche Vor- und Nachteileaufweisen. Im Rahmen dieser Arbeit werden die wichtigsten Unterschiede bezüglich derErgonomie von Navigationsmodellen dargestellt.

Baumstruktur

Bei der Baumstrukturnavigation gelangt man vom Stamm- bzw. Startseite auf die Un-terseiten, die wiederum auf die tieferen Seiten in den Baum referenzieren. Somit kannsich der Surfer in einem virtuellen Baum bewegen. Diese Struktur sollte man bei Web-seiten, die Produkte und Dienstleistungen anbieten, einsetzen.

Abbildung 3.1: Baumstruktur

Vorteile:

• Einfache Handhabung

• Übersichtlichkeit

• Zuordnung der Zugehörigkeit

• Auf -und Absteigen innerhalb eines Pfades ist möglich

Nachteile:

25

Page 26: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

• Bei ähnlichen Themen fällt die Entscheidung schwer, unter welcher Kategorie diesezu erreichen sein sollen.

• Die Verlinkung von einer Unterkategorie in eine andere ist nicht gegeben. Dadurchkann bei Erklärungsbedarf keine Verlinkung stattfinden.

• Auf- und Absteigen in unterschiedliche Pfade ist nicht möglich. Das bedeutet, dassnur die aktuelle Unterbaumstruktur für den Benutzer anwählbar ist [Dilth].

Ein Beispiel dafür findet der Leser im Usability-Film „05-Bahn-RE.m2p“ . Die gesuchteReisemöglichkeit war nur unter dem Baumknoten Angebote untergebracht. Der Testkan-didat hat intuitiv zuerst versucht, diese Reisemöglichkeit unter Fahrpläne zu finden. Hiersollte eigentlich die Auswahl beider Baumknoten zum richtigen Ergebnis führen.

Lineare Struktur

Abbildung 3.2: Lineare Struktur

Die Struktur ist die einfachste und primitivste Strukturart der Navigation. Jede Seite hatgenau eine Vorgänger -bzw. Nachfolgerseite. Wer von der letzten Seite nach vorne will,muss von Seite zu Seite springen, bis er irgendwann vorne angelangt ist. Diese Struktursollte dann eingesetzt werden, wenn zum Beispiel Informationen oder ein Vorgang aufmehreren Seiten verteilt werden soll.

Vorteile

• Erzwingung eines seriellen Besuchs aller Seiten, Abwendungs-Beispiel: Tutorials,Dokumentation, etc.

• Einfachheit

• Intuitive Funktionsweise

Nachteile

• Beim Rückwärtsnavigieren muss man durch alle bereits besuchten Seiten navigie-ren.

• Beim ausschließlichen Einsatz dieser Navigationsart kann die Bedienbarkeit derWebseite mangelhaft sein.

26

Page 27: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

Netzstruktur

Abbildung 3.3: Netzstruktur

Die am meisten verbreiteten Strukturen im Web sind die Netzstrukturen. Das Chaos imInternet ist der alleinigen Nutzung dieser Strukturart zu verdanken.

Vorteile

• Einfache Realisierung, da keine genaue Gruppierung nötig ist.

• Der Bau von komplexen Systemen ist möglich.

• Freie Verlinkung von Ast zu Ast des Baumes.

Nachteile

• Unordnung bzw. Chaos

• Unübersichtlichkeit

• Schwere Pflege des Systems

• Beim Löschen eines Knoten müssen die Referenzen umgeleitet werden.

Fazit

Für die Praxis wäre es sinnvoll, je nach Bedarf eine Kombination dieser drei Arteneinzusetzen, da alle drei Systeme ihre Vorteile in unterschiedlichen Ansätzen haben.Durch die Nutzung solcher Kombinationen können diese Vorteile zur Effektivität undBenutzbarkeit der Seite beitragen. Ein Beispiel für solche Kombinationen, die oft im

27

Page 28: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

Internet eingesetzt werden, kann wie folgt aussehen: Die Hauptkategorie wird in Formeiner Baumstruktur gewählt, wobei alle Themen kategorisiert in dieser Hauptkategorieuntergebracht sind. Die Unterkategorien können je nach Art des Seiteninhalts linearoder auf einer Netzstruktur basierend aufgebaut sein. Für den Benutzer bedeutet dasoptimale Benutzbarkeit. Er hat freie Wahl seines Sprungziels (durch den Baum), kannaber auch leicht innerhalb thematischer Bereiche navigieren [Dilth].

3.2.1 Gruppierungsmechanismen

Die Einordnung von Navigationsknoten ist je nach Bedarf auf unterschiedliche Weisesinnvoll. Im Folgenden beschreiben die Autoren die gängigsten Formen zur Gruppierungder Navigationsknoten [Dilth].

Alphabet

Die Konten des Navigationsbaumes werden alphabetisch aufgebaut. Dieser Mechanis-mus hat folgenden Nachteil. Oft hat man das Problem bei der Auswahl des geeignetenAnfangbuchstaben, der passend zu den jeweiligen Unterseiten ist. Beispielsweise wirdElektro-Herd bei den Buchstaben “E“ untergebracht und der Benutzer sucht Elektro-Herd unter den Buchstaben “H“ für Herd. Solche Zweideutigkeiten können dazu führen,dass der Benutzer bei seiner Suche erfolglos bleibt.

Semantische Kriterien

Wissenschaftliche Semantik ordnet die Baumknoten anhand einer oder mehrerer Eigen-schaften vom Knoten an. Oft führen diese Unterscheidungen zur Verwirrung des Benut-zers und daher sollte solche Arten von Gruppierung vermieden werden. Bsp.: Ein Patientsucht über die Webseite einer Apotheke ein Medikament gegen Bauchschmerzen. Einesemantische Zuordnung würde dazu führen, dass das Medikament unter Medikamentenmit Eigenschaft x und y zu finden wäre. Nun muss der Patient wissen, dass das gesuchteMedikament Eigenschaften x und y besitzt, um das Medikament gegen Bauchschmerzenzu finden.

Intuitivität

Intuitivität ist die beste Semantik, um die Navigationserfolge zu erreichen. Bei dieserSemantik setzt man sich in die Lage des Benutzers und versucht so intuitiv wie mög-

28

Page 29: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

lich den Baum zu gestalten. Um diese Lage zu erreichen, setzt man Testkandidaten ein.Diese Ergebnisse sollen die Intuitionsgenauigkeit optimieren. Trotzdem bleibt das Pro-blem, dass für die Gesamtheit aller Surfer eine allgemeine und für jeden verständlichenSemantik zu finden.

Örtliche / Zeitliche Semantik

Örtliche und zeitliche Semantik ist nur dann vom Vorteil, wenn die entsprechende Web-seite eine solche Unterteilung erfordert. Beispiel: Ein Tourist hat die Absicht nach Ham-burg zu reisen. Eine Webseite mit örtlicher Semantik könnte ihm dabei helfen, direktalle Sehenswürdigkeiten in Hamburg auf einer Übersicht darzustellen.

Zielgruppenorientierung

Wie der Name verrät, orientieren sich die einzelnen Knoten nach der Relevanz bestimm-ter Benutzergruppen. In speziellen Fällen, wo sich die Benutzer in einer Kategorienschnell wieder finden, kann man von optimaler Methodik sprechen. Das Beispiel dafürist die Webseite eines Unternehmens, die von Kunden, Lieferanten, Firmenpartner, In-vestoren, besucht werden. Die Besucher werden durch die Navigation direkt in den fürsie bestimmten Bereich weitergeleitet.

Lösungsorientierung (Workflow - Orientiert)

Diese Struktur wird meist im E-Commerce Bereich eingesetzt. Durch die Modellierungvon Workflows passt sich die Navigation so an, dass der gesamte Arbeitsschritt für denBenutzer leichter begreifbar wird. Die zusätzliche Infopfad-Navigation gibt dem BenutzerInformation darüber, in welchem Schritt des Workflow er sich gerade befindet und welcheArbeitsschritte ihm noch bevorstehen. Außerdem hat er die Möglichkeit, ohne Verlustvon Informationen zwischen den Arbeitsschritten zu wechseln und weitere Änderungenvorzunehmen. Moderne Webseiten benutzen Methoden der künstlichen Intelligenz inihrem Workflow-Management, um die Bedürfnisse einzelner Benutzer voraus zu ahnen.Damit wird versucht, dem Benutzer unnötige Arbeitsschritte zu erleichtern, sogar zuersparen.

29

Page 30: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

Vermischung

Jede der oben beschriebenen Gruppierungen haben ihre Vor- und Nachteile. Erfahrungs-gemäß empfiehlt sich eine Mischung von Gruppierungstechniken, um die Navigation zuoptimieren. Als Beispiel kann eine Webseite in Primärnavigation benutzergruppenorien-tiert aufgeteilt sein, in der sekundären Navigation dann aber intuitiv.

3.2.2 Platzierung der Navigation

In der Regel ist es möglich, Navigationsbäume

• oben

• unten

• rechts

• links

• mittig

zu platzieren. Die am meisten eingesetzte Platzierungsart ist die Positionierung des Navi-gationsbereiches im oberen und linken Bereich einer Website. Rechts angeordnete Navi-gationen sind sehr selten. Der untere Navigationsbereich sollte für allgemeine Hyperlinkswie Impressum, Kontakt, AGBs, etc. verwendet werden. Eine zentrale Platzierung istnur bei der Homepage zu empfehlen ([Balzert04],S. 50f).

3.2.3 Regeln zur Navigationsunterstützung

Folgende Regeln sollten beim Erstellen einer Navigation beachtet werden:

• Die Navigationsstruktur muss leicht verständlich sein [LMU-München] .

• Die Anzahl der Navigationspunkte muss übersichtlich bleiben [LMU-München].Im Usability-Film “Conrad.m2p“ kann beobachtet werden, dass die Testkandi-daten die Navigationsleiste nach unten Scrollen, um den gewünschten Navigati-onspunkt zu finden. Dieses Scrollen empfanden die Testkandidaten als sehr lästig.

• Kurze und direkte Navigationswege [LMU-München].

30

Page 31: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

• Rückweg über Seitenlogo und Back Funktion ermöglichen [LMU-München].

• Links aussagekräftig betiteln und mit Alt-Tags hinterlegen [LMU-München].

• Der User sollte auf jeder Seite genau darüber informiert werden, welche Schritte erbis jetzt gemacht hat (wo er sich befindet) und über Links die Möglichkeit erhalten,individuell auf die vorherigen Seiten gelangen [Nielsen01].

• Navigationspunkte sollten möglichst gleichbleibend verwendet werden ([Balzert04],S. 54f).

• Die Frage: Wo bin ich? kann durch das Hervorheben der aktuellen Seite in derNavigationsleiste erreicht werden.

• Wo bin ich gewesen? kann mit der Linkfarbe erreicht werden.

• Wo kann ich hingehen? die Erreichbarkeit der Seiten von der aktuellen Seite aussollte durch Unterstrich bzw. einem Button etc. erkennbar sein.

• Der Navigationsstammbaum sollte auf allen Seiten vorkommen, um einen Wechselin andere Kategorien zu erleichtern ([Balzert04], S. 36).

• Buttons aussagekräftig benennen und eindeutig wählen ([Balzert04], S. 45).

Im Usability-Film „Hrdrewes.m2p“ möchten die Testkandidaten eine Reise bu-chen, nach der Auswahl des Zielorts etc. stoßen die Testpersonen auf zwei identi-sche Buttons mit der Aufschrift Finden. Da die Testpersonen nicht wissen, welchesnun der richtige Button sei, klicken sie wählerisch auf den unteren Finden-Button.Dies wird auch im Usability-Film “04-phpbb.m2p“ beobachtet, die Testkandida-ten möchten im Forum einen selbst erstellten Beitrag löschen, das Löschsymbolwar leider nicht eindeutig gewählt. Es war durch ein X gekennzeichnet, doch dieKandidaten wussten nicht, ob nun ein Beitrag oder ein Thema damit gelöscht wird.

• Die Baumtiefe zu den Blättern des Baumes sollte maximal 3 sein. Gegen dieseRegel wird im Usability-Film: „Eu-kommision.m2p“ verstoßen. Das gewünschteDokument wird erst in der vierten Baumtiefe gefunden.

• Die Baumstruktur soll nicht zu komplex gestaltet werden. Faustregel: Jede Ebenebesteht aus normal 4 und maximal 9 Elementen.

• Nach 3 Ebenen (im Navigationsbaum) sollte der Benutzer entweder an sein ge-wünschtes Ziel gelangen oder seine Fehlentscheidung sollte zu erkennen sein [Dilth].

• Im ganzen Projekt muss darauf geachtet werden, das die Navigations-Struktur

31

Page 32: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

die Organisation des gesamten Projekts abbilden soll. Dadurch bleibt das gesamteProjekt erreichbar. Es gilt die Faustregel, keine Sackgasse zuzulassen [Dilth].

• Strukturell muss eine Seite eine Verbindung zur anderen Seite haben [Dilth].

• Eine nicht wieder erreichbare Seite sollte vermieden werden (Dies geschieht meis-tens bei Seiten, die zum Beispiel Formulare enthalten). Um dieses Problem zuumgehen, sollten Hyperlink bzw. Zurück-Buttons zur Verfügung gestellt werden.

• Der Benutzer muss erkennen, dass die angezeigten Elemente kategorisch geordnetsind. (z.B. durch einheitliche farbliche Kennzeichnung) [Dilth].

• Es dürfen keine Zurückbuttons eingesetzt werden, die die gleiche Funktion wieBrowser Zurückbutton haben. Es sollte aber ein aussagekräftiger Button vorhan-den sein, der zur obersten Ebene der Baumstruktur führt (Bsp. “Zurück zur Über-sicht“ [Dilth]).

• Erwartungskonformität: Der Benutzer möchte einen Workflow abarbeiten und des-wegen legt er sich einen Arbeitsplan zurecht, um dabei erwartungskonform seineZiele zu Recht zu legen. Der Usability-Film “08-tjaereborg.m2p“ weist auf ei-ne unlogische Platzierung von Auswahlfeldern auf. Die Testpersonen müssen vorder Auswahl des Abflugflughafens zuerst den Zielflughafen auswählen. Eine Erwar-tungskonformität ist somit nicht eingehalten worden.

• Es sollte eine Orientierung an etabliertem Design gegeben sein. Es ist sinnvoll, dassSeiten Wiedererkennungscharakter besitzen.

3.2.4 Sitemap

Eine Sitemap ist eine Lösung zur Steigerung der Übersichtlichkeit eines komplexen Sei-tenaufbaus. Sie stellt die Inhaltstruktur im Überblick dar. Als Darstellung eignen sichDiagramme oder Stichwortverzeichnisse in Form einer Baumstruktur. Durch Anklickendes Baumknotens soll der entsprechende Inhalt geladen werden. Nielsen empfiehlt dieNutzung dynamischer Sitemaps. Diese Art von Sitemap vermittelt dem Benutzer, welcheSeite zuvor besucht wurde. Die Sitemaps sollen das Auffinden gezielter Information er-leichtern und dadurch die Benutzbarkeit erhöhen. Es bieten sich klare Strukturen dafüran, was zum Beispiel durch die Zusammenfassung von Kategorien erziehlt werden kann.Diese Gruppen können auch nach den Erwartungen der Besucher gestaltet werden, nichtunbedingt nach Kompetenzen, Zuständigkeiten oder Abteilungen des Hauses. Auch eineSortierung nach Datum kann sinnvoll sein. Es ist sinnvoll, dass jede Seite einen Linkauf die Sitemap enthalten sollte, während umgekehrt die Sitemap auf alle Seiten desAngebots verweist [Webdesign97].

32

Page 33: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

Bei der Gestaltung von Sitemaps sind folgende Regeln zu beachten:

• Bei der Grobkonzeption sollte die Sitemap bereits alle Inhaltsbereiche mindestensbis in die zweite Ebene abbilden. Alle Hauptrubriken inklusive der Unterpunktesollten ersichtlich sein.

• Es sollen einzelne Navigationsebenen ersichtlich sein [Jacob04].

3.2.5 Suchfunktion

Ein unverzichtbarer Teil einer Webseite ist die Suchfunktion. Suchmaschinen sollen einschnelles Auffinden eines Themas, Produkts oder Ähnliches für den Benutzer ermögli-chen. Derzeitig sind viele Webseiten mit Suchmaschinen ausgestattet, sodass die Benut-zer grundsätzlich das Vorhandensein einer Suchmaschine erwarten. Die Existenz einerSuchmaschine allein ist nicht ausschlaggebend, sondern sie muss viel mehr die Bedürfnis-se der Zielgruppe zufrieden stellen. Dies würde für eine Webseite, die zum Beispiel einenArtikel über ein wissenschaftliches Thema heraus gibt, bedeuten, dass eine Volltextsu-che völlig ausreichen würde. Im Gegensatz dazu ist eine Produktsuche ein "Muss"fürWebseiten, die auch Produkte anbieten. Ein Beispiel hierzu zeigt der Usability-Film„06-TCom.m2p“ . In dem Film versucht der Benutzer ein Produkt zu finden, das ergerne bestellen möchte. Doch die Suchmaschine liefert ihm nur Texte, in denen lediglichder Produktname enthalten ist. Um die Komfortabilität und Nutzbarkeit der Suchfunk-tion zu steigern, sollten folgende Regeln bei der Erstellung einer Suchfunktion beachtetwerden:

• Eine einfache und erweiterte Suche muss angeboten werden. Die Testkandidatenim Usability-Film: “huk-1.m2p“ möchten einen Suchbegriff in die Suchmaschineeingeben, um die gewünschte Information schneller zu finden. Doch leider bietet dieWebseite keine Suchfunktion an. Auch im Usability-Film „02-03-Musical.m2p“möchte das Testteam ihr Anliegen durch eine Suchfunktion erledigen. Doch auchhier fehlt eine Suchfunktion, sodass die Testkandidaten am Ende verärgert sind.

• Die erweiterte Suche sollte eine präzise und eingeschränkte Suche in Unterkatego-rien erlauben. Im Usability-Film “Conrad.m2p“ geben die Testkandidaten zweiSuchbegriffe ein, um die Suche zu verfeinern. Leider wird dazu nichts gefunden. Esist zu beobachten, dass sie nach einer erweiterten Suchfunktion suchen, um dortdas gesuchte Produkt zu finden. Dies ist auch im Usability-Film „HrDrewes-2.m2p“ zu beobachten. Die Testkandidaten möchten ihren Suchbegriff mit Hilfeeiner erweiterten Suche einschränken. In beiden Filmen wird keine erweiterte Sucheangeboten.

• Es sollten boolesche Operationen unterstützt werden.

33

Page 34: pdf, ca. 1,74 MB

3.2. STURKTUR UND NAVIGATION

• Um die Suchanwendung optimal zu nutzen, sollte eine Anleitung in Form einerHilfsfunktion angeboten werden. Dies kann Suchregeln bzw. Beispiele beinhalten[LMU-München].

• Bei komplexen Webseiten, wie Google und Ebay sollte eine Voruntersuchung desAnfragetextes in der Wörterbuch-Datenbank mögliche Tippfehler abfangen undanschließend entsprechende Wörter als Vorschlag anbieten [LMU-München].

• Es sollten möglichst Suchfunktionen im sichtbaren Bereich, meistens im oberen lin-ken Bereich platziert werden. [Nielsen01]. Gegen dieser Regel wird im Usability-Film “Zeit-1.m2p“ verstoßen. Der Testkandidat versucht einen Suchbegriff in dieSuchfunktion einzugeben. Allerdings ist die Suchfunktion nicht zu finden, da sieunten rechts platziert ist. Auch im Usability-Film „09-HVV.m2p“ ist dies zubeobachten. Weitere optionale Einstellungen der Suche sind erst nach zufälligemScrollen durch den Benutzer zu sehen. Der Usability-Film „TDSL.m2p“ kann diesbestätigen, denn der Testkandidat möchte sein Anliegen mit Hilfe der Suchmaschi-ne erledigen. Erst nach horizontalem Scrollen wird die Suchmaschine entdeckt.

• Die Integration einer externen Suche auf der Homepage (zum Beispiel eine Google-Suche) bietet dem Benutzer die Möglichkeit, sich andere Informationen zu beschaf-fen, ohne dabei die aktuelle Seite verlassen zu müssen.

• Es sollten Suchergebnisse nach besten Treffern im oberen Bereich des Internet-auftritts sortiert angezeigt werden. Der Benutzer sollte die Anzahl der angezeigtenTreffer pro Seite selbst bestimmen und nach verschiedenen Kriterien sortieren kön-nen ([Balzert04], S. 63). Die meistverbreitete Form von Sortierung ist das Klickenauf den Spaltennamen. Im Usability-Film “eu-kommision“ zeigt die Suchmaschinedie Ergebnisliste ohne jegliche Sortierung an, wodurch eine persönliche Differen-zierung für den Benutzer nicht möglich ist. Dies ist ebenfalls im Usability-Film„04-neckermann.m2p“ zu erkennen. Der Testkandidat versucht vergeblich aufden Spaltennamen “Preis pro Person“ zu klicken, um die Ergebnisse nach Preis zusortieren. Die Testkandidaten im Usability-Film „08-tjaereborg.m2p“ sammelnfast identische Erfahrungen. Sie haben keine Möglichkeit, die Suchergebnisse nachKategorien zu sortieren.

• Eine benutzerfreundliche Suchfunktion zeichnet sich dadurch aus, dass bei ei-nem nicht gefundenen Suchbegriff, ähnliche Treffer als Alternativen vorgeschla-gen werden ([Balzert04], S. 63, S.16). Diese Regel wird im Usability-Film „07-stern.m2p“ missachtet. Als die Testkandidaten eine bestimmte Ausgabe suchen,zeigt dir Suchmaschine nur “Ihre Suche wurde nicht gefunden“ an. Der Benutzererwartet Alternativwörter oder eine Hilfestellung, die ihm ermöglicht seine Sucheerfolgreich zu beenden. Auch im Usability-Film „Niebüll-Bahn.m2p“ ist dies zubeobachten. Im Usability-Film “otto-t5“ sucht die Testkandidatin eine rosafarbe-ne Hose. Bei der Eingabe des Begriffs “rosa Hose“ werden keine Treffer angezeigt.

34

Page 35: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

Bei der Eingabe des Begriffs “rose Hose“ ist die gesuchte Hose gefunden worden.

• Bei einer ergebnislosen Suche muss dem Benutzer mindestens mitgeteilt werden,dass seine von ihm gesuchte Anfrage erfolglos gewesen ist. Es sollte keinesfallseine kommentarlose Seite angezeigt werden. Dies ist im Usability-Film „hanse-net.m2p“ zu beobachten.

• Bei E-Commerce-Seiten sollte der Artikelbestand, ein Teil des Suchfeldes sein.Zudem sollte optional die Suche auf die Artikelbeschreibung erweiterbar sein.([Balzert04], S.16)

• Die Unterstützung von Synonymen hilft zur Steigerung der Trefferquote. Dabeiwerden die Ergebnisse, die in einem logischen Zusammenhang mit dem Sucht-ext stehen, als weitere Ergebnisse bereitgestellt [LMU-München]. Eine unaus-reichend informative Suchmaschine ist im Usability-Film “06-TCom.m2p“ zu er-kennen. Die Testkandidaten suchen per Suchmaschine ein Produkt, das garantiertauf dieser Webseite angeboten wird und bleiben trotzdem ergebnislos.

• Seiten, die nicht mehr vorhanden sind, könnten eventuell durch Suchmaschinen an-geboten werden. Deshalb sollte grundsätzlich keine Seite gelöscht werden. Lediglichder Inhalt soll mit einem Hinweistext und einem Link zur Hauptseite ausgetauschtwerden ([Balzert04], S.18).

• Descript-Befehle geben eine genaue Beschreibung über den Seiteninhalt der Web-seite. Suchmaschinen nutzen diese bei ihren Suchalgorithmen. (ca. 150-200 Zeichen)[Nielsen01]. Beim Eintragen einer Webseite für eine Suchmaschine speichert dieSuchmaschine Informationen über den vorkommenden Inhalt dieser Webseite. Die-se Informationen nennen sich Descript-Befehle. Je präziser und genauer diese sind,desto leichter lässt sich diese Seite finden.

• Webauftritte, die mehr als 100 abhängige Seiten haben, sollten eine lokale Such-maschine besitzen ([Balzert04],S. 61).

3.3 Gestaltung von Webseiten

In diesem Abschnitt wird auf den Aufbau und die Zusammensetzung einzelner Elementeder Webseite eingegangen. Hierbei ist zu beachten: Je ergonomischer der Aufbau ist, de-sto leichter ist die Bedienbarkeit einer Webseite. In den folgenden Unterpunkten werdendiese Zusammenhänge zur besseren und ergonomischen Bedienbarkeit beitragen.

35

Page 36: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

3.3.1 Hyperlinks

Eine der wichtigsten Aufgaben von Hyperlinks sind Verbindungen von Textabschnitten,damit wird das Benutzen der Webseite vereinfacht. Es wird die Möglichkeit gebotendurch Verweise auf andere Textstellen sofort mit einem Klick auf das Ziel zu gelangen.Nachfolgend werden gut bewährte Regeln vorgestellt:

• Zu viele Hypertexte führen zur Verwirrung des Benutzers. Deshalb sollen diese vomWebentwickler wohl überlegt eingesetzt werden, sodass der Benutzer an entspre-chender Stelle intuitiv einen Hyperlink erwartet. Im Usability-Film „01-Bahn-Lupo.m2p“ wird die Webseite als stark überladen bezeichnet. Durch zu vieleverwirrende Hyperlinks ist es nicht für den Testkandidaten möglich eine übersicht-liche Auskunft zu erhalten.

• Es sollten bereits besuchte Hyperlinks als solche zu erkennen sein (zum Beispieldurch Farbänderung, Schrifttyp etc.) (siehe Abschnitt 3.3.).

• Es ist zu bemängeln, dass in einer Webseite mehrere Hyperlinks mit unterschiedli-chen Bezeichnungen zur gleichen Seiten führen. Es ist erforderlich gleiche Bezeich-nungen zu verwenden.

• Links, die keine ausreichende Information über das Ziel beinhalten, werden oftnicht benutzt. Deshalb sollten Links mit der Bezeichnung “Hier klicken“ vermie-den werden ([Nielsen01],S.51), ([Balzert04],S. 56). Im Usability-Film „Niebüll-Bahn.m2p“ liefern die Linknamen keine ausreichende Information. Die Testkandi-daten wissen nicht, wohin der Link führt. Der Usability-Film „08-Europcar.m2p“dient auch als Bespiel, wie Hyperlinks nutzlos verwendet werden.

• Hyperlinks, deren Ziel ein spezielles Dateiformat haben, sollten dies kennzeichnen(zum Beispiel .pdf).

• Bei Links, die auf große Dateien verweisen, sollte die Ladezeit bei unterschiedlichenBandbreiten als Info angezeigt werden.

• Kurzinfos (Tooltips) sind auch sehr nützlich für Benutzer. Bei kurzem Anhaltendes Mauszeigers auf dem Link, öffnet sich ein kleines Infofenster, das weitere Infor-mationen enthält.([Nielsen01],S.51) Der Usability-Film “07.stern.m2p“ bestätigtdies. Die angebotenen Links sind als Bilder vorhanden, wobei dem Benutzer nichtvor dem Anklicken des jeweiligen Bildes klar ist, um welche Ausgabe sich diesesMagazin handelt.

• Eingehende Links sind wichtig, da nicht alle Benutzer die Webseite direkt kennen.Daher ist es sinnvoll, entsprechende Links bei Partnerwebseiten bzw. Suchmaschi-

36

Page 37: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

nen zu platzieren. Beim Ändern dieser Links sollte immer eine temporäre URL zurVerfügung gestellt werden, die Information über die Änderung bzw. einen Link zurHomepage beinhaltet. ([Nielsen01],S. 74).

• Jede Hypertext-Seite soll nach dem Prinzip der umgekehrten Pyramide gegliedertsein, d.h. dass die gegebenen Informationen durch Weiterklicken zunehmend spe-zifischer werden ([Nielsen01], S.112).

• Ein Link, der auf die gleiche Seite führt, führt zur Verwirrung und sollte vermiedenwerden. Im Usability-Film “02-flugbuchung.m2p“ werden innerhalb der GrafikLinks verwendet, die zur gleichen Seite verlinkt sind. Beim Anklicken dieser Linkswird keine Aktion ausgeführt.

• Alle Texte, die unterstrichen sind bzw. die eine blaue Schriftfarbe haben, sollenauch als Hyperlink genutzt werden ([Balzert04] ,S.56). Ein Verstoß gegen dieseRegel wird bei den Testpersonen im Film „01-hansenet.m2p“ beobachtet. Dabeiversuchen die Testpersonen vergeblich, auf blaufarbige Texte zu klicken, um weitereInformation zu bekommen.

• Aktionen, die durch Nutzung eines Links automatisch ausgeführt werden, solltenvor dem Ausführen dieser Aktion vom Benutzer bestätigt werden (zum BeispielAbspielen einer Musikdatei).

3.3.2 Formulare

Auf vielen Internetseiten werden Formulare angeboten, ob beim Bestellen eines Produk-tes oder Anfordern von Informationsmaterial. Somit ist die Usability eines Formularsein wichtiger Bestandteil. Bestellungen werden meistens abgebrochen, da der Benut-zer den Umgang mit dem Formular als schwierig empfindet. Nachfolgend werden einigeGrundsätze zur Gestaltung von Formularen aufgezählt:

• Nach dem Laden des Formulars solte der Cursor automatisch auf das erste auszu-füllende Feld gesetzt werden ([Balzert04], S. 261).

• Bei der Gestaltung des Formulars sollte die Schriftgröße und Schriftart gleich blei-ben.

• Es sollten Pflichtfelder gekennzeichnet werden. Im Usability-Film „01-ebay.m2p“geben die Testpersonen die Länge und Breite eines Produkts an, um die Versand-kosten für dieses Produkt zu ermitteln. Nach dieser Eingabe wird auf dem Be-stätigungsbutton geklickt. Doch es erscheint unerwartet eine Fehlermeldung, dieden Benutzer mitteilt, dass auch die Höhe angegeben werden muss. Obwohl diese

37

Page 38: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

Angabe nicht als Pflichtfeld gekennzeichnet gewesen ist, musste der Testkandidatdie Informationen erneut eingeben.

• Formulare sollen einfach und übersichtlich gestaltet werden.

• Felder, die für den Benutzer nicht vollständig verständlich sind, sollten unbedingterklärt werden ([Jacob04], S. 146).

• Fehlermeldungen sollten detailliert angegeben werden, damit der Benutzer an-schließend eine korrekte Eingabe vornehmen kann.Im Usability-Film „9-Europcar-2.m2p“ wird nach dem Ausfüllen des Formularseine Fehlermeldung ausgegeben. Nachdem der Benutzer im Formular eine Ände-rung vorgenommen hat, erscheint die Fehlermeldung erneut.

• Benutzer sollen immer nach dem Ausfüllen eines Formulars eine Rückmeldung bzw.eine Bestätigung bekommen, denn ohne Rückmeldung ist der Benutzer ratlos undweiß nicht, ob das Formular richtig ausgefüllt wurde. [Dilthform].

3.3.3 Textstruktur

Eines der häufigsten verwendeten Kommunikationsmittel auf Webseiten sind Texte. Siegehören zu den auf menschlicher Sprache basierenden verbalen Kommunikationsmitteln,die allgemein bei Tätigkeiten wie Schreiben, Lesen oder Sprechen verwendetet werden.Im täglichen Leben werden Texte in den verschiedensten Schreibstilen geschrieben. ZumBeispiel haben Briefe ein anderes Vorgehen, als wenn eine wissenschaftliche Arbeit ge-schrieben wird. Das Vorgehen hängt davon ab, welche Zielgruppe diesen Text lesen wird.Dieses Verhalten wirkt sich auch auf Webseiten aus. Die Texte sollten so konzipiert wer-den, dass die Sprache des Systems der Sprache der Zielgruppe entspricht [vgl. NielsensHeuristiken, Kap.2.2]. Das Lesen von Texten auf einem Bildschirm löst eine gewisseUngeduld beim Benutzer aus. Durch die große Anzahl an Internetangeboten wissen dieBenutzer oft nicht, ob sie den richtigen Inhalt gefunden haben. Deshalb versuchen sielange Texte zu überfliegen. Vielmehr sucht der Benutzer nach Schlüsselworten oder fürihn geeigneten Absätze. Ein weiterer Grund für das Überfliegen der langen Texte ist,dass Menschen am Monitor 25 % langsamer lesen als auf dem Papier. Deshalb sollten fol-gende Regeln bei der Erstellung eines Online-Dokuments beachtet werden. Diese sollendie Lesbarkeit und Übersichtlichkeit verbessern:

• Der Text sollte 50 % kürzer sein als der eines Printmediums mit gleichem Inhalt

• Statt lange scrollbare Texte zu verwenden, sollen Übersichtslisten eingesetzt wer-den. Web-typisch ist auch eine Gliederung als Hypertext. Informationen werdenhier auf mehreren Ebenen untergebracht.

38

Page 39: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

Im Usability-Film „02-globetrotter.m2p“ haben die Testkandidaten auf Grundder Unübersichtlichkeit Probleme den gewünschten Artikel zu finden.

• Artikel sollen in kurze Abschnitte mit eindeutigen Überschriften gegliedert werden.Im Usability-Film „Dresdner-Bank.m2p“ ist zu beobachten, wie die Testkandi-daten sehr lange Texte überfliegen. Auch im Usability-Film „Versicherung-03“wird der lange Text vom Testteam gar nicht gelesen. Der Testkandidat scrollt inder Hoffnung weiter, ein Schlüsselwort zu finden.

• Überschriften sollten den Überblick über den Inhalt des Abschnittes vermitteln[Schumacher].

• Benutzer erwarten bei Online Texten wie bei Printmedien auch eine einheitlicheSchreibweise [LMU-München].

• Um Verwirrung zu vermeiden, sollte eine klare Sprache und eindeutige Bezeich-nungen bzw. keine Metaphern verwendet werden [LMU-München]. Gegen dieseRegel wird im Usability-Film „t1.otto“ verstoßen. Die Testkandidaten sind überdie Bezeichnungen "Merkzettelünd "Bestellschein"verwirrt und wissen nicht, wasausgefüllt werden muss, um ein Produkt zu bestellen. Im Usability-Film „Zeit-1.avi“ sucht der Testkandidat den Link für eine geeignete Druckausgabe. DieserLink ist mit E-Paper bezeichnet und auf Grund dieser verwirrenden Beschreibungist die gewünschte Druckausgabe nicht gefunden worden.

• Bei langen Texten sollte eine Druckversion zur Verfügung gestellt werden.

• Leitseiten (Überschriften) und Leseseiten sollten deutlich voneinander abgehobenwerden.

• Als Schriftarten sollten Standardschriften gewählt werden. Bei speziellen Schrift-arten sollen Alternativschriftarten zur Verfügung gestellt werden [Nielsen01].

• Schriften sollen nicht in Form von Bildern dargestellt werden. Bei Vorlesesystemenbzw. Übersetzung der Seite würden Schriften in Bildform nicht als Text erkanntund ausgelassen werden. Zusätzlich kann beim Ändern der Auflösung das Bildverzerrt werden, wodurch der Text unlesbar wird [Nielsen01].

• Seiten, die unterschiedliche Schriftgrößenbereitstellen, werden vom Benutzer gernbesucht.

• Die Glaubwürdigkeit des Seiteninhalts nimmt mit Grammatikfehlern ab. Deshalbsollte der Seiteninhalt auf Grammatik überprüft werden [Nielsen01].

• Der Seitentitel sollte ca. 2 bis 6 Wörter lang sein. Er sollte aussagekräftig ge-

39

Page 40: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

nug sein, um über eine Suchmaschine bereitgestellt und gesucht werden kann[Nielsen01].

• Bei der Auswahl von serifen Schriftarten soll der Zeilenabstand klein gehalten undbei serifenlosen Schriften groß gehalten werden.

• Möglichst immer True-Type-Schrifttyp verwenden [Dilthtext].

• Um die Lesbarkeit zu steigern, sollte die Spaltenbreite nicht so groß sein [Dilthtext].

3.3.4 Farben

Es ist bekannt, dass Farben verschiedene emotionale Reaktionen beim Menschen auslö-sen. Durch eine bestimmte Farbwahl werden entweder positive oder negative Emotionenbeim Menschen hervorgerufen.

Bei der Gestaltung des Designs sollen folgende Regeln beachtet werden:

• Die Farbgestaltung von Texthintergründen, Masken und Steuerelementen solltediskret und unaufdringlich sein. Dies führt zu Selbstbewusstsein beim unerfahrenenBenutzer und gibt ihm Courage, Dienste der Seite zu benutzen.

• Mit Rücksicht auf farbenblinde Benutzer sollten Kombinationen wie rot/grün oderblau/violett, insbesondere für Text und Symbole vermieden werden.

• Rote Schrift auf blauem Hintergrund oder umgekehrt sollte nicht verwendet wer-den. Die Trennlinie zwischen Farbe Rot und Blau ist schlecht zu erkennen unddaraus resultiert ein schlechter Kontrast. Dies erschwert das Lesen.

• Farben, die internationale Eigenbedeutung/Symbolik haben, sollten für entspre-chende Bedeutungen eingesetzt werden. So sollte bei einer erfolgreichen Anmel-dung die Farbe Grün, bei Fehlschlag die Farbe Rot benutzt werden.

• Die Farben (Hintergrund/Layout) und Farbensymbolik sollen auf allen Seiteneinheitlich bleiben ([Nielsen01], S.46). Diese Regel ist im Usability-Film „03-gmx.m2p“ nicht beachtet worden, denn das Layout der Multimedia-Center-Seitevon gmx ist anders gewählt als das von gmx. Diese verschiedenen Layouts habendie Testkandidaten verunsichert und den Eindruck erweckt, auf einer anderen Ho-mepage gelandet zu sein. Auch im Usability-Film „Niebüll-Bahn.m2p“ ist dieszu beobachten. Die Homepage und die dazugehörigen Unterseiten sind vom Lay-out sehr unterschiedlich aufgebaut. Die Testkandidaten haben gedacht, dass siesich nicht mehr auf der Bahnseite befinden.

40

Page 41: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

• Bei jungen Zielgruppen kann das Design mit auffallenden Farben gestaltet sein. Beiälteren Zielgruppen dagegen ist ein klassisches, konservatives Design vorzuziehen([Balzert04], S. 94).

• Der Einsatz von schwarzer Farbe ist zu vermeiden, da damit oftmals negativeAssoziationen beim Benutzer hervorgerufen werden.

• Es ist zu empfehlen, Pastellfarben zu verwenden, da diese Farbtöne angenehm fürdie Augen sind.

• Hellgraue Schrift auf schwarzem Hintergrund ist deshalb gut zu verwenden, dadadurch ein optimaler Kontrast ensteht. Diese Regel ist im Usability-Film „stern-2.m2p“ nicht eingehalten worden. Die Menüpunkte sind von den Testkandidatennicht richtig wahrgenommen worden, da diese mit grauer Schrift auf weißem undnicht auf schwarzem Hintergrund hinterlegt gewesen sind.

Eine genauere Farbwirkung auf den Menschen kann für den Webdesigner von Bedeu-tung sein. Er kann mit dieser Information die Farbauswahl in Hinsicht auf menschlicheWahrnehmung optimieren. Tabelle 3.1 ([Jacob04], S. 165) gibt einen Eindruck über dieWirkung von Farben auf Menschen.

Tabelle 3.1: Farbwirkung

41

Page 42: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

3.3.5 Scrollen und Scrollbalken

Durch die Menge an Informationen im Web muss darauf geachtet, dass diese Informa-tionen richtig einzusetzen sind. Denn lange Texte, die vertikal oder horizontal gescrolltwerden müssen, erschweren das Lesen beim Benutzer und verunsichern ihn. Im Usability-Film „Niebüll-Bahn.m2p“ ist dies genauer zu beobachten. Die Menge an Informationverunsichert die Testkandidaten. Nachfolgend werden Nielsens Usability-Richtlinien zumThema Scrollen und Scrollbalken aufgezählt:

• Webseiten, die den gesamten Inhalt im Vollbildmodus des Browserfensters an-zeigen, sollten keine Scrollbalken anbieten. Dies lässt den Benutzer nämlich an-nehmen, dass sich dahinter noch mehr Informationen befinden. Im Usability-Film„Dresdner-Bank.m2p“ versucht der Testkandidat zu scrollen, obwohl sich dahin-ter keine Information befindet. Dies kann auch im Usability-Film „Musical.m2p“beobachtet werden. Durch den langen vertikalen Scrollbalken gehen die Testkan-didaten davon aus, dass sich dahinter weitere Informationen befinden.

• Horizontales Scrollen auf Webseiten sollte möglichst vermieden werden. Gegen die-se Richtlinie wird im Usability-Film „TDSL.m2p“ verstoßen. Die Testkandidatenkönnen erst nach zufälligem horizontalem Scrollen die Suchfunktion auffinden. Da-durch wird die Gefahr erhöht, die zur Verfügung gestellten Informationen nicht zufinden.

• Sowohl vertikales als auch horizontales Scrollen von Texten erfordert Konzentrati-on beim Benutzer. „Benutzer müssen somit ihren Ausschnitt in zwei Dimensionenbewegen, was den Raum als Ganzes schwerer fassbar macht. Im Gegensatz dazuist eindimensionales Scrollen eine simple Möglichkeit, um sich durch Inhalte zubewegen". Diese Richtlinie wird im Usability-Film „Dresdner-Bank.m2p“nichteingehalten. Die Testkandidaten müssen sehr viel vertikal und horizontal scrol-len, um an die gewünschten Informationen zu gelangen. Auch im Usability-Film„05-NorskIT.m2p“ kann beobachtet werden, dass die Testkandidaten sehr vielhorizontal und vertikal scrollen müssen. Dies erschwert das Lesen.

3.3.6 Frames

Die Nutzung von Frames ist seit der Einführung der CSS-Technologie deutlich zurückge-gangen. Dennoch gibt es noch eine große Anzahl von Webseiten, die Frame-Technologienutzen. Frames erleichtern zwar die Programmierarbeit der Webseite, erschweren abergleichzeitig die Benutzbarkeit. In der folgenden Auflistung werden die Vor- und Nachteilevom Einsatz von Frames gegenüber gestellt:

42

Page 43: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

Vorteile:

• Beim Scrollen ist immer der Seitentitel, das Logo und die Navigationsleiste sichtbar([Balzert04], S. 29).

• Beim Neuladen eines Frames bleibt das restliche Frame-Set unversehrt, was dazuführt, dass die anderen Frames einer Webseite nicht neu geladen werden([Balzert04], S. 29).

• Austauschen/Änderung von Inhalten ist unabhängig von Titel und Navigationsleis-te. Dies erleichtert Änderungen und vermeidet Programmierfehler ([Balzert04],S. 28).

Nachteile:

• Frames sind ungeeignet für die Navigation: Jede mit Frames aufgebaute Websei-te besteht aus mehreren ineinander geschachtelten Frames, die eine eigenständigeURL besitzen. Diese Eigenschaft führt oft zu Verwirrung der Benutzer. Beispiels-weise wird beim Aufnehmen der Webseite in die Favoritenliste oft die URL desfokussierten Frames gespeichert. Beim Wideraufruf wird nur der einzelne Frameangezeigt. Das gleiche Problem tritt auch beim Drucken der Seite auf ([Nielsen01],S.86).

• Viele Browser können Frames nicht bearbeiten bzw. anzeigen.

• Suchmaschinen haben Probleme mit Frames, denn diese können nicht auf denZusammenhang in einem Frame-Set Rücksicht nehmen und liefern nur einen Linkauf ein Teildokument ([Dahm06], S.268).

• Frames sollten in Inline Frames umgewandelt werden, denn mit Hilfe von InlineFrames kann der Inhalt einer beliebigen Webseite in den HTML-Code eingebundenwerden. Dadurch zeigt die Webseite ihren gesamten Inhalt durch eine einzige URLan ([Nielsen01], S.87 - 92).

• Beim Ausdrucken der Seite kann es durch Frames zu diversen Problemen kommen.Es wird nämlich nur der Teil der Seite ausgedruckt, auf den der Cursor zeigt. Umdem User dieses Ärgernis zu ersparen, ist es sinnvoll, eine Druckversion ebenfallsbereitzustellen ([Balzert04], S. 28).

43

Page 44: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

3.3.7 CSS - Stylesheets

CSS steht für Cascading Style Sheets. CSS wurde entwickelt, um die Darstellung einerWebseite in unterschiedlichen Browsern zu vereinheitlichen. Dies wird ab CSS Level3 in vollem Umfang verwirklicht. CSS ist eine deklarative Sprache für strukturierteDokumente. Sie definiert Regeln, die über mehrere Stylesheets vererbt werden können.Der Erfolg der CSS ist auf die Vereinfachung von Betreuung und Veröffentlichung derDokumente zurückzuführen. Dies geschieht durch die Trennung von Design und Inhalt.Beispielsweise kann eine Internetseite mit einem Inhalt und unterschiedlichen Stylesheetsin diversen Endgeräten (zum Beispiel PDA, Handy, PC etc.) dargestellt werden. ImBezug auf Usability bietet die Nutzung von Stylesheets folgende Vorteile:

• Durch CSS kann auf Frames verzichtet werden (Die Einschränkungen von Usabilitydurch Frames wird im Unterkapitel Frames (Kapitel 3.3.6) erläutert).

• Alle Änderungen des Designs werden zentral an einer Datei durchgeführt. Beider Änderung eines Wertes in dieser Datei wird dies auf der kompletten Seiteübernommen (zum Beispiel kann die Schriftart der Überschriften geändert werden).

• Gleichbleibende Designs auf allen Seiten einer Webseite geben dem Benutzer einenHinweis, ob er sich noch immer auf der gleichen Webseite befindet.

• CSS ermöglicht, die Druckausgabe einer Webseite anders als die Bildschirmausgabezu gestalten

• CSS unterstützt Barrierefreiheit:

1. Für Blinde oder Sehbehinderte kann durch CSS die Ausgabe auf einer Braille-zeile ausgegeben werden.

2. CSS bietet aurale Stylesheets. Durch aurale Stylesheets wird die Sprachaus-gabe der Webseite beeinflusst.

3. Durch Trennung von Gestaltung und Inhalt wird der Einsatz von Screenrea-dern vereinfacht. Ein Screenreader, auch Bildschirmvorleser genannt, ist einSoftware-Produkt, das Blinden und Sehbehinderten eine alternative Benut-zerschnittstelle anstelle des Textmodus oder anstelle einer grafischen Benut-zeroberfläche bietet.

4. Web-Designer können unterschiedliche CSS-Dateien zur Verbesserung der Bar-rierefreiheit im Web anbieten. Durch diesen Einsatz hat der Benutzer dieMöglichkeit, den für ihn am besten geeigneten Stil, nämlich einen besserenKontrast, geeignete Schriftarten, Hintergrundfarben etc. auszuwählen.

44

Page 45: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

• CSS erlaubt es, eine Webseite in unterschiedlichen Ausgabegeräten darzustellen.Dies wiederum hebt die Einschränkungen bei der Auswahl des Ausgabegerätes desBenutzers auf.

• Durch CSS werden Fehler vermieden. Durch das Trennen von Design und Inhaltbleibt die Fehlerquote beim Ändern des Inhalts sehr gering.

• Der Benutzer kann “On-the-Fly“ Design-Änderung vornehmen, ohne die Seite neuzu laden. Web-Designer können somit verschiedene Designs für unterschiedlicheBenutzergruppen zur Auswahl stellen.

• Die Gebrauchstauglichkeit der Suchmaschine wird durch den Einsatz von CSS-Dateien verbessert. Denn durch die Trennung von Struktur und Aussehen wirddie Bewertung der Seite vereinfacht und die zutreffenden Ergebnisse höherrangigausgegeben [Kaiser04].

3.3.8 Einsatz von Tabelle

Auf nahezu jeder Internetseite werden Tabellen eingesetzt. Tabellen strukturieren denInhalt der Webseite ([Jacob04] S. 183). Mit Hilfe von Tabellen können lange, schwer-lesbare Texte kurz, prägnant und übersichtlich zusammengefasst werden. Alle gängigenBrowser können Tabellen darstellen. Tabellen haben jedoch auch Nachteile. Die Nutzungvon Tabellen erschwert den Einsatz von Screenreadern. Somit wird die Usability einge-schränkt. Eine bessere Lösung ist der Einsatz von CSS-Dateien (vgl. Abschnitt 3.3.7).Damit kann der Einsatz von Tabellen minimiert werden und gleichzeitig der Einsatz vonScreenreader besser unterstützt werden.

3.3.9 Benutzergruppen

Anhand der Definition von Benutzergruppen wird festgelegt, welche Zielgruppen ange-sprochen werden. Dies kann durch folgende Fragen definiert werden:

• Welche Altersgruppe besucht meine Seite?

• Welche Internetkompetenz kann vorausgesetzt werden?

• Welche körperlichen Fähigkeiten sind vorhanden?

• Welches Geschlecht?

45

Page 46: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

• Welche Bildung?

• Welches Einkommensniveau?

• Von welchem Wohnort?

Der Webentwickler soll anhand dieser Information die Benutzbarkeit für die anzuspre-chende Zielgruppe gewährleisten. Jede Zielgruppe hat spezielle Erwartungen. Die Ziel-gruppe intellektueller Menschen möchte zum Beispiel über die Entwicklung von Tech-nologien an aktuelle Informationen gelangen. Die jüngere Zielgruppe hat beispielswei-se Interesse über aktuelle Veranstaltungen. Zu den Unterscheidungen von Zielgruppenkommt die Unterteilung innerhalb jeder Zielgruppe, d.h. die Unterscheidung zwischenAnfänger und Profi. Profibesucher möchten ihr Anliegen auf schnellem Wege ohne Zwi-schenschritte, zum Beispiel mit einer Suchmaschine erledigen ([Balzert04], S. 14). Nocherwähnungswert ist die Nutzung von Defaultsprache. Die Defaultsprache sollte die Spra-che von der Hauptzielgruppe sein, wobei andere Benutzergruppen die Möglichkeit ha-ben, die Sprache zu wechseln. D.h. eine aus Deutschland stammende Seite (“.de“), dieüberwiegend deutschsprachige als Zielgruppe hat, hat die Defaultsprache “Deutsch“. ImUsability-Film „09-Europcar.m2p“ wird der Benutzer mit den englischen Städtenamenkonfrontiert und muss erst einmal die Übersetzung ins Deutsche vornehmen.

Im Gegensatz dazu will der Anfänger seine gewöhnlichen Navigationsschritte durchfüh-ren. In einem Workflow ist es für den Anfänger sinnvoll, ihn genau zu informieren, inwelchem Aktionsschritt er sich befindet und welche Aktionen ihm noch bevorstehen(Bsp.: Einkauf auf einer E-Commerce Seite).

3.3.10 Freiheit

Freiheit ist das Befriedigungsgefühl, das jedem Mensch in seinem täglichen Leben beglei-tet. Menschen fühlen sich dann wohl, wenn sie sich uneingeschränkt bewegen können.Dieses Gefühl soll auch im Internet vermittelt werden. Da sich im Internet jeder Besucherfreiwillig auf einer Webseite aufhält, werden Webseiten mit beschränkten Handlungsmög-lichkeiten vom Benutzer sofort verlassen. Um diesen Effekt zu vermeiden, sind folgendePunkte zu beachten:

• Beim Verlassen der Seite soll dem Benutzer nicht gedroht werden (zum Beispiel“Sie sind dabei die Seite zu verlassen“ [Nielsen01]).

• Manipulieren oder sogar deaktivieren des Zurückbuttons verärgern den Benutzer.

• Wenn der Benutzer auf der Seite „gefangen“ ist, wie zum Beispiel durch das Entfer-nen der Bedienungselemente führt dies dazu, dass der Benutzer die Seite zukünftig

46

Page 47: pdf, ca. 1,74 MB

3.3. GESTALTUNG VON WEBSEITEN

vermeidet [Nielsen01]. Beispielseite: “www.nasa.com“(Stand Januar 2006). BeimSchließen dieser Seite öffnet sich die Seite in einem neuen Fenster wieder. DerBenutzer wird gezwungen auf dieser Seite zu bleiben.

• Symbole, die beleidigend auf unterschiedliche Kulturen wirken können, sind zuvermeiden [Nielsen01].

• Bei der Beschaffung von unverbindlichen Informationen soll der Benutzer nichtzu einer unfreiwilligen Registrierung gezwungen werden. Dies kann in Film „01-hansenet.m2p“ deutlich beobachtet werden. Um die Verfügbarkeit einer DSL-Leitung zu überprüfen, wird eine Registrierung des Benutzers vorausgesetzt. Einweiteres Beispiel für dieses Verhalten ist im Usability-Film „ebay.m2p“ zu be-ochbachten. Die Testkandidaten möchten Informationen über die Transportkostenangezeigt bekommen, werden aber mit der Anmeldepflicht konfrontiert.

• Dem Benutzer dürfen i.d.R. keine festen Wege vorgeschrieben werden, sondernvielmehr Unterstützung zum korrekten Ablauf eines Workflows angeboten werden.

• eine Veränderung der Startseite soll nur durch Einwilligung des Benutzers statt-finden.

• Pop Up Fenster und unfreiwillige Weiterleitung auf andere Webseiten verhindernfreies Surfen.

• Änderung der Browserfenstergröße durch Skripte soll nur mit dem Einverständnisdes Benutzers durchgeführt werden.

• Animation und Sound sollten abschaltbar sein.

• Seiten, die nur eingeschränkte Benutzergruppen zulassen, sollen dies in Form einerFehlermeldung anderen Benutzergruppen mitteilen.

• Es soll die Möglichkeit zum Löschen und Verändern eines Benutzerkontos auf einerWebseite geben.

• Bei Eingabe von persönlichen Daten soll dem Benutzer mitgeteilt werden, welcheSicherheitstechnologie beim Übermitteln an den Server verwendet wird.

• Datenschutzbestimmungen müssen eingehalten werden.

47

Page 48: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

3.3.11 Werbungen

Es ist anzunehmen, dass sich viele Internetangebote durch Werbung finanzieren. “Studienzur Online-Werbung haben ergeben, dass 20 bis 30 Prozent der Internetnutzer, die nachdem Anklicken eines Werbebanners auf einer Firmen-Homepage landen, unmittelbar da-nach die Zurückschaltfläche betätigen“ ([Nielsen01], S. 77). Der Einsatz von Werbungmuss nicht unbedingt negativ wirken. Der richtige Einsatz kann sogar für Unterhaltungdes Benutzers sorgen. Um den richtigen Einsatz von Werbung sicherzustellen, könnenfolgende Regeln hilfreich sein:

• Werbungen sollen abschaltbar sein. Bei Werbung durch Pop-Up Fenster z.B., solltedas Pop-Fenster schließbar sein.

• Werbung soll den Benutzer von seinem eigentlichen Vorhaben nicht ablenken.

3.4 Technische Gesichtspunkte

3.4.1 Bildschirmauflösungen

Webseiten werden in unterschiedlichen Bildschirmauflösungen betrachtet. Damit dieWirkung der Webseite auf den Benutzer mit unterschiedlicher Bildschirmauflösung gleichbleibt, ist die Aufgabe des Webdesigners, die Seite so zu gestalten, dass alle Benutzeralle Nutzungsmöglichkeiten erhalten bleiben.

Im Usability-Film „Versicherung-1.m2p“ wird die Webseite (www.huk24.de) mit derAuflösung 800x600 dpi betrachtet. Hierbei wird die Seite nicht mehr zu 100% dargestellt.Informationen für den Benutzer gehen somit verloren.

Abbildung 3.4 aus [Reinhard05] zeigt den prozentualen Anteil der genutzten Bild-schirmauflösungen.

Es ist zu beobachten, dass es sich hierbei um eine verhältnismäßig breite Streuung han-delt. 11,6% verwenden die Auflösung 640x480, während 11,7% höhere Auflösungen als1024x768 verwenden. Ähnlich ist auch der Anteil von 800x600 (30,7%) und 1024x768(27,7%). Dies unterstreicht die Notwendigkeit, sich auf den Grundgedanken des WWWzurück zu besinnen. Webseiten für normale Benutzer sollten an die Auflösung 1024x768angepasst werden. Da es Benutzer gibt, die sich schon sehr gut mit dem Internet bzw.mit dem PC auskennen, könnte es ein wertvoller Hinweis sein, den Benutzer darüber zuinformieren, welche Auflösung er benötigt, um die Webseite angezeigt zu bekommen.

48

Page 49: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Abbildung 3.4: Bildschirmauflösung

3.4.2 Antwortzeit

Lange Antwortzeiten sind Barrieren jeder Webseite. Nielsen behauptet, “...dass schnelleAntwortzeiten das wichtigste Gestaltungskriterium für eine Webseite sind. Webseitenmüssen unter Berücksichtigung der Geschwindigkeit entwickelt werden“ ([Nielsen01],S. 42 / 46). Die Seiten, die trotz interessantem Inhalt einer langen Ladezeit unterliegen,werden oftmals als qualitativ schlecht bezeichnet. Folglich schließt der Benutzer die Seiteschon während des Ladevorgangs.

Die Benutzerwahrnehmung bezüglich der Wartezeit wird oft eingeschätzt:

• Antwortzeiten bis 0.1 Sekunden werden nicht als Wartezeit wahrgenommen.

• Antwortzeiten, die bis zu einer Sekunde dauern, unterbrechen nicht den Gedan-kenfluss des Benutzers, aber eine Verzögerung wird wahrgenommen.

• Bei Antwortzeiten zwischen 1-10 Sekunden sollte der Benutzer vom System überdie verzögerte Ladezeit informiert werden, um seine Aufmerksamkeit auf den Dia-log zu halten.

• Bei Antwortzeiten über 10 Sekunden sollte dem Benutzer eine andere Beschäfti-gung angeboten werden ([Nielsen01], S. 44).

Die Antwortzeiten beziehen sich auf die Größe der jeweiligen Elemente in der Webseite.Deshalb empfiehlt sich bei großen Daten, die zum Download bereitstehen, die Größe der

49

Page 50: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Datei anzugeben. Im Usabilty-Film „HVV.m2p“ wird beobachtet, wie die Testkandi-daten nach Anklicken eines Dokumentes dieses auf Grund der zu langen Ladezeit sofortwieder schließen.

Die Wichtigkeit der minimierten Downloadzeit zeigt noch mal Abbildung 3.5. DieseStatistik ist nach der Befragung von ca. 1000 Webbesuchern erstellt worden. Sie zeigtdie Benutzerakzeptanz in Abhängigkeit von der Ladezeit. Dabei beschreibt die Benut-zerakzeptanz hier den Anteil der Probanden, die trotz Wartezeit geduldig das Ergebnisabwarten. Mehr als 50% der Besucher tolerieren keine Ladezeit, die mehr als 10 Sekun-den dauert. Das bedeutet, dass die Webseite nur von der Hälfte der Besucher inhaltlichwahrgenommen wird.

Abbildung 3.5: Antwortzeit

Bei einer Antwortzeit von mehr als 1 Sekunde sollte dem Benutzer unbedingt mitgeteiltwerden, dass es sich um keinen Seitenfehler handelt, sondern dass die Daten lediglichvorbereitet werden. “Zehn Sekunden sind das Limit, um die Aufmerksamkeit des Benut-zers auf ein Dialog zu konzentrieren“ ([Nielsen01], S.44). Seiten, die ihre Informationenvon anderen Seiten beschaffen, könnten während dieser Zeitspanne für eine Beschäfti-gung des Benutzers sorgen. Allgemein kann als Maßstab für die Akzeptanz die Faustregel“Antwortzeiten < 10 Sekunden“ festlegt werden.

Ursachen für lange Ladezeiten können in drei Kategorien unterteilt werden:

• Serverbelastungen

• langsame Verbindungen

• Seitengrößen

50

Page 51: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Serverbelastung

Eine der häufigsten Probleme langer Ladezeiten (zu bestimmten Uhrzeiten) sind Server-belastungen. Die große Menge an Anfragen führt zur Überlastung der Webserver. Diesführt dazu, dass Benutzeranforderungen über Warteschlangen abgearbeitet werden müs-sen, da sie ungeplant auftreten. Basierend auf ständig aktualisierten Statistiken, „Logfiles“, muss daher die Kapazität der Server auf die Besucherzahlen abgestimmt werden.Auch Nielsen empfiehlt die Investition in schnellere Server ([Nielsen01], S.45 . Serversollten so eingerichtet werden, dass auch bei einer maximalen Belastung von 70-80 % derServerkapazität eine akzeptable Antwortzeit gewährleistet ist. Eine gute Alternative lautNielsen ist die “Antwortvariabilität zu minimieren“. Für die Entlastung des Webserversund für verkürzte Antwortzeiten ist das Vorbereiten von fertigen Antworten zu empfeh-len, da die meisten Besucher gezielt Informationen von der Seite erwarten ([Nielsen01],S. 44 f.). Die zweite Möglichkeit ist die Nutzung von alternativen Servern, die bei einerServerbelastung dazugeschaltet werden können. Bei internationalen Unternehmen ist esempfehlenswert, Alias-Server in aktuellen Regionen zu platzieren, die sich in Form einesverteilten Systems synchronisieren. Der Einsatz einer automatischen Systemanpassungwürde Anfragen mit sehr langen Antwortzeiten und eventuelle Server-Attacken (Denialof Service) erkennen und abwehren. Die genannten Anfragen werden dann gefiltert undsofern festgestellt wird, dass es sich um eine Server Attacke handelt, wird diese bereitsvon vornherein ignoriert. Das soll eine adäquate Serverkapazitätsteilung zwischen Usernermöglichen. Anfragen, die eine sehr lange Rechenzeit benötigen, werden abgebrochen.Dem Benutzer wird automatisch mitgeteilt, dass er diese Anfrage zu einem späterenZeitpunkt erneut ausführen möchte.

Langsame Verbindung

Die Majorität der Internetverbindungen in Deutschland sind schnelle Breitbandverbin-dungen. Darauf darf sich der Webdesigner nicht verlassen. Nach wie vor gibt es eine großeAnzahl von Benutzern, die Modems mit einer Übertragungsrate von 56kbs oder wenigereinsetzen. Diese Aussage bestätigt Abbildung 3.6. Sie zeigt im Jahr 2004, dass mehr alsdie Hälfte der Benutzer DSL-Verbindungen benutzt haben. Sie zeigt die Verbreitung vonverschiedenen Anschlüssen.

Diese Studie zeigt, dass „...die Nutzer ’kleinerer’ Internetzugänge nach wie vor nichtvernachlässigt werden dürfen. So gaben 21 % der Befragenen an, über ein Modem insInternet zu gelangen“[Ecc-Handel04].

Die Anzahl von Usern, die nur über eine 56kb/s Übertragungsrate verfügen, ist im Durch-schnitt in anderen Ländern noch höher. Deshalb muss die Seite so konzipiert sein, dassder Seitenaufbau auch mit langsameren Verbindungen in akzeptabler Zeit stattfindet.

51

Page 52: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Abbildung 3.6: Internetnutzung

Seitengröße

Die Seite stellt bestimmte Informationen, wie Texte, Bilder, Animationen, etc. dar. DieGröße der Seite (kbyte, Mbyte etc.) wird Seitengröße genannt. Der Client-Browser stelltdie Seiten anhand dieser Information dar. Der größte Teil des Seiteninhalts besteht ausGrafiken und Animationen. Die großen Grafiken und Animationen könnten zur Verlang-samung der Seitendarstellung führen. Die Seitengröße soll durch Verzicht auf aufwendigeGrafiken und Dateien gering gehalten werden ([Nielsen01], S. 46). Patrick J.LYNCHschreibt in seinem Buch “Erfolgreiches Web-Design“: “(...)Je mehr Grafiken Sie verwen-den, desto länger muss das Publikum auf die Webseite warten". Eine gute Webseitebraucht auch ein attraktives Design. Daher sollte ein Kompromiss zwischen der Ladezeitund dem Design getroffen werden. Die Techniken zur Erstellung netzgeeigneter Grafikenwerden im Abschnitt “Grafiken“ weiter erläutert.

3.4.3 Darstellungswerkzeuge (Browser)

Web-Browser bieten Zugriff auf alle relevanten Internet-Dienste und erlauben die Ver-knüpfung von Dokumenten. Inzwischen gibt es kaum noch eine Desktop-Installation ohneBrowser. Über die reinen Browser-Funktionen hinaus bieten die Programme die Möglich-keit, multimediale Inhalte abzuspielen. Außerdem erlauben sie die direkte und indirekteKommunikation mit Internet-Nutzern. Auch in lokalen Netzen und im Intranet bietensie eine einheitliche Schnittstelle für lokale und globale Informationen [Webhits05].

52

Page 53: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Hierbei ist für einen Webentwickler zu beachten, in welcher Größenordnung welche Brow-ser genutzt werden. Der meist benutze Browser sollte die Basis für die Entwicklung einerWebseite sein. Anschließend sollte ein Funktionstest für alle vorhandenen Browser durch-geführt und bei eventuellen Problemen alternative Lösungen angeboten werden. Wie derWebentwickler sich für einen Basisbrowser entscheidet, kann durch Betrachtungen vonStatistiken geschehen. Ein Beispiel für solches Vorgehen stellt die Abbildung 3.7 dar.Diese Abbildung zeigt die Anzahl der unterschiedlichen Browsernutzung im Zeitraumvon 2001 bis 2005 in Prozent an. Gemäß Abbildung 3.7 ist der Internet Explorer (67%)(gefolgt von Mozilla (26%)) der meist genutzte Browser. Die restliche Browsernutzungbeträgt 7%. Diese Ergebnisse haben eine klare Aussage für den Webentwickler bei derEntwicklung einer Webseite. Die Funktionalität muss unter den Internet Explorer undMozilla unbedingt gegeben sein.

Abbildung 3.7: Browsernutzung

Abb. 3.7: Statistiken der Zeitspanne von 2001- 2005 verdeutlichen, dass die Benutzungdes Internet Explorers um 6 % zugenommen hat [Webhits05].

Eine genauere Auswahl des Basisbrowsers kann zum Beispiel durch die Untersuchung derEigenschaft und die Einsatzmöglichkeiten des jeweiligen Browsers geschehen. Um die Ei-genschaften der in Frage kommenden Browser auf einen Blick im Vergleich darzustellen,hilft eine sollte eine Vergleichstabelle zur Hand genommen werden.

Tendenziell gibt es weiterhin Benutzer mit älteren Browsern, bei denen die Funktionalitätstark eingeschränkt ist. Es empfiehlt sich, auf der Webseite Hinweise über Darstellungs-probleme und eventuelle Einschränkungen bei einigen Browsern zu geben. Im Usability-Film „2-02-Ryanair.m2p“ kann der angebotene Kalender im Netscape-Browser nichtangezeigt werden. Es sollte dem Testkandidat ein Hinweis gegeben werden, dass esbeim Netscape-Browser eventuelle Einschränkungen geben kann. Somit kann der Kun-de die Mindestanforderung zur Darstellung der Webseite nachlesen und eventuell einBrowserupdate vornehmen. Hierbei ist die Aufgabe des Entwicklers, den Funktionstestauf einer erstellten Seite auch mit älteren Browsern durchzuführen und auf eventu-elle Einschränkungen auf der Webseite hinzuweisen. Diese Regel wurde im Usability-Film „01-hansnet.m2p“ missachtet. Die Testkandidaten haben versucht mit diversenBrowsern diese Internetseite aufzurufen und haben festgestellt, dass die Suchfunkti-on nur unter dem Internet Explorer funktionsfähig ist. Auch der Usability-Film „02-

53

Page 54: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

flugbuchung.m2p“ weist auf solch einen Verstoß hin. Die angebotene Flash-Animationauf der Seite war im Netscape-Browser nicht darstellbar. Dieser Aspekt bezieht sich auchbei der Nutzung von Browsern in Betaversionen. Wenn die Notwendigkeit zur Benutzungdieser neuen Funktionalitäten besteht, sollte wenigstens eine alternative Darstellung fürden älteren Browser angeboten werden.

3.4.4 Plug-Ins

Plug-Ins sind Erweiterungen des HTML-Standards im Webbrowser, die zum Ausführenbestimmter Applikationen innerhalb des Internetbrowsers benötigt werden. Dazu ge-hören unter anderem “Java-Applets“, “Flashfilme“, “Java-Scripts“(ausgenommen Version1.1), etc. Seit 1999 sind die Erweiterungen des Internetbrowsers nicht mehr standardmä-ßig in den Browsern enthalten. Erst bei Bedarf können die Zusatzprogramme installiertund benutzt werden. Die Installationsanforderungen des Browsers zum Ausführen dy-namischer Applikationen lösen Irritationen beim Benutzer aus. Die meisten Benutzerlesen diese Hinweismeldungen nicht und versuchen die Meldungen schnell zu schließen.Dies führt dazu, dass die Webseiten gar nicht oder unvollständig angezeigt werden. Fürden Benutzer ist das inakzeptabel. Ein weiterer Punkt beim Einsatz von Plug-Ins ist dieerhöhte Ladezeit. Bookmarks sind auch nicht mehr einsetzbar. Vor diesem Hintergrundkann die Nutzung dieser Plug-Ins in eine deutliche Sackgasse führen. Die Skalierbarkeitwird eingeschränkt und somit werden die individuellen Benutzereinstellungen ignoriert.Zudem stellt diese Art von Technologien Hürden für Sehgeschädigte und Blinde dar. AusUsability-Sicht sollten Plug-Ins nur in eingeschränktem Maße und nur dann, wenn ihreNutzung unvermeidbar ist, verwendet werden. Die weitere Maßnahme, um die Usabilitytrotz Nutzung von Plug-Ins zu unterstützten, ist die Bereitstellung einer Alternative.Dies soll die Darstellung der Seite auch ohne Plug-Ins ermöglichen. Somit haben dieBenutzer beim Eintritt der Seite die Möglichkeit sich für eine dieser Varianten zu ent-scheiden.

3.4.5 Session Cookies

Cookies sind kleine Textdateien, die die persönlichen Einstellungen des Benutzers bzw.den bisherigen Verlauf beim Besuch einer Webseite abspeichern. Anhand von Cookieskönnen Webserver einen Benutzer wieder erkennen und seine persönlichen Einstellungenbereitstellen. Diese Eigenschaften nutzen oft Seiten, die einen Webshop anbieten. Dervom Kunden ausgewählte Artikel muss nicht sofort bestellt werden, sondern kann ineinen virtuellen Warenkorb abgelegt und zu einem späteren Zeitpunkt bestellt werden.Dieser Dienst kann durch die Nutzung von Cookies realisiert werden. Die Webseitenkönnen mit Hilfe von JavaScript, die in Cookies gespeicherten Informationen abfragenund den Warenkorbinhalt darstellen.

54

Page 55: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Cookies können auch zur Verbesserung der Benutzbarkeit eingesetzt werden. Die perso-nalisierte Einstellung der Benutzer (wie Schriftgröße, Fenstergröße, etc.) kann in dieserForm abgespeichert werden. Dies erspart wiederholte Einstellungen des Benutzers beimnächsten Besuch dieser Webseite. Zusätzlich können Cookies den Ablauf eines Workflowsunterstützen. Die abgespeicherte Information kann beim Arbeitsschrittwechsel innerhalbeines Workflows wieder geladen werden. Somit braucht der Kunde die Information vomvorherigen Arbeitsschritt nicht erneut einzugeben. Die fehlende Funktionalität bei derAbarbeitung eines Workflows kann in dem Usability-Film „02-flugbuchung.m2p“ be-obachtet werden. Nach der Nutzung des Zurück-Buttons des Browsers sind die gesam-ten bis zu diesen Zeitpunkt eingegebenen Daten verloren gegangen. Der Testkandidatmuss somit die Angaben erneut eintippen. Auch im Usability-Film „Hrdrewes.m2p“konnte dieses Verhalten beobachtet werden. Die Testkandidaten haben zum angegebe-nen Zeitpunkt keine Reise gefunden und haben daher den Zurückbutton betätigt, umeinen anderen Zeitpunkt anzugeben. Leider sind durch diesen Vorgang alle ausgefülltenDaten verloren gegangen. Ein nächstes Beispiel dafür, zeigt der im Usability-Film „2-01-ebay.m2p“ . Auch hier muss der Testkandidat die Produktdaten erneut eingeben. ImUsability-Film „otto-t3“ werden auch hier die bisher eingegeben Daten gelöscht, sodassder Testbenutzer die Daten erneut eingeben muss.

Die Nutzung von Cookies hat jedoch auch Nachteile bzw. Einschränkungen. Die oben ge-nannten Vorteile machen erst dann Sinn, wenn der Computer von dem gleichen Benutzerbedient wird. Andernfalls werden auf Grund diverser Benutzer unterschiedliche Einstel-lungen gewählt. Es werden oft vom Webserver Zusatzinformationen, die den persönlichenDatenschutz des Benutzers berühren, abgespeichert. Deshalb schalten viele Benutzer dieCookies ab. Wenn eine Webseite nur mit Cookies bedienbar ist, ist die entsprechendeFunktionalität nicht mehr möglich. Daher sollte dem Benutzer mitgeteilt werden, dassCookies gegebenenfalls aktiviert werden müssen, um die Funktionalität dieser Seite zugewährleisten ([Jacob04], S. 122). Eine Session ist die Alternative zu Cookies. Sessions-Informationen werden auf dem Webserver gespeichert und beim nächsten Besuch könnendiese Informationen in den Browser geladen werden. Hierbei ist vorteilhaft, dass der Be-nutzer keine Änderung in seinem Browser vornehmen muss, um die Funktionalität derWebseite nutzen zu können. Der Nachteil ist allerdings, dass die Sessions-Informationenauf dem Server eine relativ kurze Lebensdauer haben.

3.4.6 Physikalische Seiten-Strukturen

Eine physikalische Struktur beschreibt die Speicherungsform und den Speicherort desWebseiteninhaltes. Diese Informationen sind in gewissem Maße bei der Steigerung derUsability von Bedeutung. Im folgenden Abschnitt werden wichtige Hinweise in Bezugauf eine physikalische Seitenstruktur zusammengestellt:

• Es sollen sinnvolle Ordnernamen vergeben werden, da die Suchmaschinen auch die

55

Page 56: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

Ordnernamen bewerten.

• Es empfiehlt sich, die Baumstruktur der Navigation genau auf das Speicherme-dium abzubilden; dies verschafft Übersicht und vermeidet Flüchtigkeitsfehler beiVeränderung des Inhalts [Dilthey, Site-Strukturen]

• Dateinamen sollen möglichst nach ihrem Inhalt benannt werden

• URL sollen kurz gehalten werden. Das Eintippen langer URLs ist dem Benutzernicht zuzumuten.

• Die Art der Dateibenennung ist überall zu vereinheitlichen

• Dateien mit Datum versehen; somit ist die Aktualität der Datei nachvollziehbar[DilthSite].

• Durch die einfache Vergabe von URL-Namen soll die direkte Angabe der URLermöglicht werden [DilthSite].

3.4.7 Downloads

Immer wieder beklagen sich Webbenutzer über die langsame Reaktion der Webseite beimÖffnen von Dokumenten. Dies ist im Usability-Film „01-hansenet.m2p“ zu beobach-ten. Hier wird ein zweiseitiges Text-Dokument in PDF-Format zur Ansicht angeboten.Dieser Vorgang beansprucht ein Download von einer Datei, die über 1MB groß ist. Dasist für einen Modembenutzer eine Wartezeit von mehreren Minuten bis das Textdoku-ment vollständig geladen ist. Dem Benutzer ist nicht bewusst, dass einige Dokumenteerst nach einem vollständigen Download darstellbar sind. Sie sehen diesen Effekt alsSeitenfehler oder Netzfehler und versuchen, mit dem Zurück-Button vergeblich die Ak-tion schnell abzubrechen. Ein weiterer Kritikpunkt ist die unzureichende Informationüber die Downloadzeit in unterschiedlichen Bandbreiten. Im folgenden Absatz werdenAnsätze der Usability über die Mindestanforderungen einer Webseite im Hinblick aufDownloads aufgezählt:

• Download-links sollen dem Benutzer ausreichende Information über das Downloa-dobjekt vermitteln. Diese Information kann in Form eines Textes oder als Tooltipzur Verfügung gestellt werden.

• Bei einer Downloadzeit von mehr als 10 Sekunden wird der Benutzer über dienotwendige Zeit in unterschiedlichen Bandbreiten informiert [Nielsen01].

• Der Benutzer sollte über das Format des Downloadobjekts informiert werden

56

Page 57: pdf, ca. 1,74 MB

3.4. TECHNISCHE GESICHTSPUNKTE

• Bei bekannten Formaten wie zum Beispiel PDF-Dateien sollte ein entsprechendesLogo des Formatherstellers genutzt werden ([Nielsen01], S.74).

• Versionisierte Dateien sollen Informationen über die Versionsnummer in ihremDownload-Linknamen beinhalten.

• Weitere, für den Benutzer wichtige Infos sind unter anderem die Lokalisierung desDownloadservers, das Downloadprotokoll, die Aktualität der Datei, die Anzahlbisheriger Downloads usw.

3.4.8 Seitenaufbau

Seitenaufbau ist das entscheidende Kriterium für die Übersichtlichkeit einer Internetsei-te. Es kann gut möglich sein, dass eine Webseite gut zusammengestellt ist, aber nichtkonform mit den üblichen Webangeboten ist. So eine Seite verhindert das schnelle Auf-finden für den Benutzer und reduziert damit die Usability. Dies konnte in mehreren Auf-zeichnungen des Usability-Labor der HAW-Hamburg beobachtet werden. Als Beispiel istim Usability-Film „09-europcar-2.m2p“ das Ergebnis von verfügbaren Fahrzeugen ein-zeilig ohne weitere Angaben und Verlinkung in einer Fahrzeugkategorie aufgelistet. DerBenutzer hat keine Möglichkeit, mehr Informationen über das vorhandene Fahrzeug zubekommen. Nachfolgend werden Grundsätze zum Aufbau der Internetseite aufgelistet.

• Die Navigationsleiste sollte am besten links platziert werden. Es soll eine Breitevon maximal 1/5 der Webseitenbreite der Gesamtbreite einnehmen

• Allgemeine Information wie Herausgeber, Impressum, Kontakt etc. sollten aufmehreren Stellen zu finden sein (z.B. ganz unten auf der Fußzeile des Internet-angebots oder unter den Navigationspunkt “Über Uns“ etc.). Im Usability-Film„Versicherung-1.m2p“ ist die Kontakt-Emailadresse sehr schlecht zu finden.

• Das Logo der Webseite sollte links oben platziert werden und auf allen Seiten vor-kommen. Es sollte dazu dienen, dass immer wieder auf die Homepage zurückge-kommen werden kann. Diese Regel wird im Usability-Film „Niebüll-Bahn.m2p“nicht eingehalten. Die Testkandidaten versuchen erfolglos von den Unterseiten aufdie Homepage zu wechseln. Im Usability-Film „Lavendel.m2p“ gelangen die Test-kandidaten über einen angebotenen Zurücklink auf die Hauptseite des Internetan-gebots. Dies löst eine Verwirrung beim Benutzer aus.

• Die Suchfunktion sollte unmittelbar unter dem Logo oder auf der oberen rech-ten oder linken Seite platziert werden. Die Autoren beobachten im Usability-Film„Niebüll-Bahn.m2p“ , wie die Testkandidaten die Suchfunktion nach langer Zeitfinden. Die Suchfunktion liegt unverständlicherweise in der Mitte der Navigation.

57

Page 58: pdf, ca. 1,74 MB

3.5. MULTIMEDIA

Auch im Usability-Film „zeit-2.m2p“ möchten die Testkandidaten einen Suchbe-griff in die Suchfunktion eingeben, doch diese ist unten rechts platziert und wirdfolglich übersehen [Dehnde05].

3.4.9 Transaktionen

Eine Transaktion vom Webbesucher bedeutet das Erledigen einer Aufgabe. Diese Auf-gabe kann aus mehreren Schritten bzw. Aktionen bestehen. Diese Schritte werden vonder Webseite intern beim Laden bzw. Verlassen einer Seite automatisch ausgeführt (z.B.Änderung in der Datenbank oder temporäre Werte in der Session). Da diese Aktionenmit dem Betätigen des Browser-Zurückbutton nicht rückgängig gemacht werden kön-nen, sollte ein extra Zurückbutton mit der Aufschrift “Zurück zum vorherigen Schritt“oder “Schritt rückgängig machen“ auf der Webseite zur Verfügung gestellt werden. BeiBetätigung dieses Buttons sollte die gesamte Transaktion rückgängig gemacht werden.Damit ist dem Benutzer die Möglichkeit gegeben, dynamische Seiten wie statische Seitenzu benutzen.

3.5 Multimedia

Multimedia Elemente im Internet sind Dateien, die nicht regulär in jedem Browser ab-spielbar sind und zusätzliche Plug-Ins benötigen. Dazu gehören unter anderem Sounds,Animationen, Videos, Flash usw. Die Verbreitung von Multimedia-Elementen im Inter-net zeigt, wie wichtig der richtige Umgang mit Multimedia-Dateien auf einer Webseiteist. Multimedia-Dateien sind anziehend bzw. beeindrucken den Benutzer und sind wich-tig, um die Konkurrenzfähigkeit der Webseite zu stärken. Um die Attraktivität der Seitezu wahren und trotzdem die Benutzbarkeit der Seite zu gewährleisten, sollten die Web-designer auf folgende Mindestanforderung achten.

• Um Multimedia-Elemente korrekt abspielen zu können, müssen entsprechende Plug-Ins installiert sein. Deshalb sollten Multimedia-Elemente mit entsprechenden Hin-weisen gekennzeichnet sein, wie zum Beispiel:

– um welche Dateiart es sich handelt

– welche Plug-Ins benötigt werden

– welche Hardwarevorrausetzungen benötigt werden

58

Page 59: pdf, ca. 1,74 MB

3.5. MULTIMEDIA

Da es sich bei Multimediadateien meistens um sehr große Dateien handelt, wird eineangemessene Bandbreite benötigt. Dies sollte dem Benutzer in Form von Hinweistextenmitgeteilt werden. Diese Information kann die Dateigröße, empfohlene Bandbreite etc.beinhalten

• Webentwickler sollen mit Hilfe von Alternativ-Tags Infos zu den Multimedia-Dateien, die nicht in dem Browser angezeigt werden können, für den Benutzerbereitstellen.

• Laut Nielsen sollten Videos mit hoher Qualität lieber als Streaming mit niedrigerQualität eingesetzt werden [Nielsen01].

• Große Video-Dateien sollten in kleine Sequenzen aufgeteilt und von einem Menüsteuerbar sein [Nielsen01].

• Audio-Dateien sollen leise im Hintergrund abgespielt werden, damit der Benutzernicht vom eigentlichen Ziel der Seite abgelenkt wird.

• Um den Benutzer nicht in seiner Entscheidungsfreiheit einzuschränken, sollten alleMultimedia-Elemente abschaltbar sein.

• Bei E-Commerce-Seiten sollten komplizierte Animationen, die nicht zur Präsenta-tion des eigentlichen Inhalts beitragen, vermieden werden [Felken00].

3.5.1 Bilder und Animationen

Neben dem Text unterstützen Bilder und Animationen die Kommunikation von Web-seiten. Sie dienen zur Steigerung der Ästhetik und zur Verdeutlichung des Inhalts einerWebseite. Dadurch soll die Aufmerksamkeit des Besuchers erhöht und ihm ein anspre-chendes Gefühl beim Surfen vermittelt werden. Animationen sind sinnvoll, wenn mehrereProdukte angezeigt werden sollen und wenig Platz auf der Homepage zur Verfügung steht([Nielsen01], S. 146f). Obwohl Bilder und Animationen ein wichtiger Bestandteil einerWebseite sind, ist zu berücksichtigen, dass im Gegensatz zu Texten, Bilddateien grö-ßer sind und daher eine größere Übertragungszeit benötigen. So muss ein Kompromisszwischen guter Qualität und kurzer Ladezeit erreicht werden.

Ein Beispiel für eine sinnlose Flash-Animation findet der Leser im Usability-Film „01-hansenet.m2p“ . Hier wird die Animation vom Testkandidaten zuerst übersehen undspäter als überflüssig empfunden. Beim Einsatz von Animationen und Bildern solltenfolgende Regeln beachtet werden:

• Animationen dürfen den Programmablauf nicht stören [Balzert04]. Im Usability-

59

Page 60: pdf, ca. 1,74 MB

3.5. MULTIMEDIA

Film „01-hansenet.m2p“ möchte der Testkandidat einen Suchbegriff in die Such-funktion eingeben, aber durch die auffällige Flash-Animation wird die Suchfunkti-on übersehen und dies führt dazu, dass der Programmablauf abgebrochen wird.

• Filmähnliche Vor- und Abspanne sind abschaltbar bzw. überspringbar [Balzert04].

• Lautstärke und Lautklang sind frei regelbar (abschaltbar) [Balzert04].

• Vorgelesene Texte lassen sich optional als Klartext am Bildschirm einsehen (bar-rierefrei für Gehörlose) [Balzert04].

• Es ist empfehlenswert, Produkte mit Hilfe von Bildern oder Animationen zu veran-schaulichen. Im Usability-Film „kellkoo“ suchen die Testkandidaten eine Digital-kamera. Als sie eine Liste von Digitalkameras bekommen, erwarten sie auch Bildervon den Produkten. Doch zu keinem Produkt werden Bilder angeboten. Auch imUsabilty-Film „HrDrewes-2.m2p“ ist dies zu beobachten. Das Testteam möch-te ein Auto mieten.Der Vorgang wird zwar erfolgreich beendet, allerdings werdenleider keine Bilder angezeigt.

• Bilder sollten anklickbar sein, um an weitere Informationen zu gelangen.Im Usability-Film „stern-02.m2p“ versuchen die Testkandidaten auf eine gefun-dene Ausgabe zu klicken, um mehr Informationen darüber zu bekommen, dochdieses Bild war nicht anklickbar.

• Bilder und Animationen, die nicht angezeigt werden können, sollen durch Alt-TagBeschreibung hinterlegt werden.

• Für Animationen und Grafiken, die abhängig von Verwendung bestimmter Pro-gramme sind (zum Beispiel Flash), soll eine vereinfachte Alternative zur Verfügungstehen.

• Große Bilddateien sollten vor dem Herunterladen als “Thumbnails“ eingesetzt wer-den. Der Benutzer sollte die Möglichkeit haben, nur bei Interesse das Gesamtbildherunterzuladen.

• Eine Zoom-Funktion sollte immer angeboten werden, um Zusatzinformation fürden Benutzer bereitzustellen.

• Gleiche Grafik sollte in unterschiedlichen Seiten wieder verwendet werden, um eineReduzierung der Ladezeit zu erreichen [Nielsen01].

• Um die Verbindung beim Wechseln der Seite innerhalb der Webseite aufrechtzuer-halten, soll die Grafik von der vorherigen Seite in der neuen Seite angezeigt werden[Nielsen01].

60

Page 61: pdf, ca. 1,74 MB

3.6. SONSTIGE

• Grafiken sollen mit Höhe / Breite festgelegt sein. Dadurch kann der Browser denPlatzhalter von der Grafik und restlichen Text vorab anzeigen ([Nielsen01], S.50).

3.6 Sonstige

3.6.1 Drucken

Häufig haben Benutzer den Wunsch, den Inhalt einer Internetseite zu drucken. Diesgeschieht aus unterschiedlichen Gründen:

• Bei einem Zeitungsartikel ist das Lesen vom Papier einfacher.

• Der Kaufvorgang in einem Webshop wird als Bestätigungsdokument aufbewahrt.

Meistens misslingt dieser Wunsch und verärgert den Benutzer. Dies kann folgende Ur-sachen haben:

• Die Internetseite beinhaltet Frames, bei denen sich der Standardbefehl Druckenimmer auf den fokussierten Frame bezieht. Dabei wird nur der Inhalt dieses Framesausgedruckt.

• Grafiken machen das Web attraktiv, aber sind nicht unbedingt wünschenswertzum Ausdrucken. Gründe sind die Ausnutzung teurer Farbpatronen und die langeDruckzeit ([Jacob04], S.209)

• Webseiten beinhalten weitere Elemente, die für die gedruckte Version nicht vonBedeutung sind (wie z.B. die Navigationsleiste/-baum) und störend wirken könn-ten.

• Seiten, die lange Scrollbalken beinhalten, ergeben mehrere Seiten beim Drucken,wobei sich die Tabellen und Absätze auf verschiedenen Seiten in eine missgestalteteForm teilen.

Die meisten dieser Probleme lassen sich beheben, indem eine Druckversion zur Verfügunggestellt wird. In der Druckversion werden ausschließlich wichtige Aspekte ohne lästigeGrafiken, Navigationsbäume, Werbebanner etc. in einem Pop-Up Fenster dargestelltund kann mit Standarddruckfunktionen ausgedruckt werden. Da Pop-Up Fenster oftdurch Pop-Up Blocker blockiert werden, bietet sich eine alternative PDF-Version zumAusdrucken an.

61

Page 62: pdf, ca. 1,74 MB

3.6. SONSTIGE

Wie bereits in Kapitel 3 erwähnt, ist eine Interaktivität der Seite wertvoll. Die Druckver-sion einer Webseite sollte auf das Profil des Benutzers interaktiv reagieren können undsomit die für sein Benutzerprofil relevanten Informationen in der Druckversion beinhal-ten. Bsp.: Auf Webseiten, auf denen sich der einzelne Benutzer unterschiedlichen Profilenzuordnen kann (Professor oder Student), sollte die druckbare Version auf der Webseitedie Informationen für den Professor gegenüber dem Studenten filtern und die darausresultierenden individuellen Informationen in der Druckversion bereitstellen.

Die Realisierung dieses Dienstes könnte bei einem Webshop wie folgt aussehen: DerKunde bekommt die Möglichkeit, seine Rechnung als Druckversion zu speichern oderauszudrucken. Diese Möglichkeit ist erst nach Abschluss eines Kaufvorgangs gegeben.

3.6.2 Hilfefunktion / Online - Dokumentation

Im Allgemeinen sollte eine Webseite so konzipiert werden, dass sie ohne jegliche Hilfe-funktionen zu bedienen ist. Die Webbesucher, die Informationen suchen oder ein Pro-blem lösen wollen, sind gewohnt, ihr Anliegen schnell und unkompliziert ohne zusätz-lichen Aufwand, wie z.B. durch das Lesen einer Anleitung, zu erledigen. Diese Benut-zergruppe weiß genau, was sie erwartet und agiert entsprechend. Es gibt jedoch Benut-zer, die nicht über große Web-Erfahrung verfügen und sich im Web unsicher fühlen.Um die Usability zu steigern, sollten solche Benutzer mit Hilfefunktionen unterstütztwerden, die die Benutzung der Webseite erklären und vereinfachen. Im Usability-Film„04-neckermann.m2p“ wurde die Lösungsorientierungsstruktur eingesetzt. Da zu die-ser Struktur keine Hilfe angeboten wird, denkt der Testkandidat, dass der Arbeitsschritt"Buchung", der erst im folgendem zu bearbeiten ist, nicht anzuklicken ist. Leider wer-den solche Hilfefunktionen sogar beim Auftreten eines Fehlers bei vielen Webangebotenvermisst. Im Usability-Film „01.hansenet.m2p“ tritt beim Abarbeiten eines Work-flows ein Fehler auf. Dies wird von der Seite ohne jeglichen Hinweis mitgeteilt, sodassder Benutzer hilflos aufgibt. Deshalb empfiehlt es sich, Hilfefunktionen in Form einerOnline-Dokumentation anzubieten. Einige zu empfehlende Inhalte der Hilfefunktionensind folgende:

• Bedienungslogik und Bedienungselemente werden in einer Hilfe erläutert.

• Alle Hilfetexte sollten als Druckversion angeboten werden ([Nielsen01], S. 129).

• Hilfetexte sind als Hypertexte strukturiert.

• Am Ende jedes Hypertextes sollen die jeweiligen Themen anhand von Beispielenerläutert werden.

• Bei Verwendung neuer oder nicht bekannter Funktionen, müssen diese in der Hilfe

62

Page 63: pdf, ca. 1,74 MB

3.7. GESTALTUNG DES INTRANETS

beschrieben werden ([Jacob04], S.123).

• Für die Gestaltung von Hilfefunktionen empfiehlt Nielsen, diese an richtige Stellenzu platzieren, diese mit geeigneten Beispielen zu versehen und so kurz wie möglichzu halten ([Nielsen01], S. 131).

• Bereitstellung eines FAQ-Bereichs (Frequently Asked Questions). Hier sollen häufiggestellte Fragen und Antworten strukturiert dargestellt werden ([Jacob04], S.123).

3.6.3 Kontakt / Email

Ein Kontakt-Link bzw. die Möglichkeit eine Email an den Betreiber/Webdesigner derWebseite zu schicken, sollte auf jeder Seite aufgeführt werden. Somit wird dem Benutzerdie Möglichkeit gegeben, seine Anregungen bzw. eventuelle Beschwerden an den Betrei-ber zu übermitteln. Diese Anregungen bilden die Basis für Verbesserungen im Hinblickauf Benutzbarkeit. Oft sind sich die Webdesigner nicht bewusst, mit welchen Schwierig-keiten die Benutzer bezüglich der Bedienbarkeit und die intuitive Nutzung einer Webseitekonfrontiert werden. Eine direkte Kontaktmöglichkeit führt zu einem sicheren Gefühl desBenutzers und erhöht die Glaubwürdigkeit der Webseite.

3.7 Gestaltung des Intranets

Ein Intranet dient nur zur Nutzung in firmeninternen Netzen. Prinzipiell gelten bei derGestaltung des Intranets die gleichen Anforderungen wie bei den Internet-Seiten. Daandere Eigenschaften gegenüber dem Internet herrschen, folgen folgende Abweichungen,Ausnahmen, Ergänzungen, Präzisierungen:

• Der Entwickler ist über die vorhandenen Technologien informiert und hat die Mög-lichkeit, diese Technologien innerhalb des Intranets zu verwenden. Deshalb existiertkeine Einschränkung bei der Technologienutzung.

• In einem Intranet ist die Bandbreite bekannt. Daher kann der Entwickler entspre-chende Anwendungen entwickeln. Somit können Anwendungen mit hoher Netzbe-lastung betrieben werden [Nielsen01].

• Das Intranet kann zur Vermittlung von aktuellen Ereignissen und zur Kommuni-kation innerhalb des Unternehmens genutzt werden.

63

Page 64: pdf, ca. 1,74 MB

3.8. BARRIEREFREIHEIT

• Ziel eines Webauftritts in einem Unternehmen ist die Unterstützung der Mitar-beiter bei der Erledigung ihrer Aufgaben. Es soll eine schnelle Bearbeitung derVorgänge innerhalb des Firmennetzes erreicht werden. Dies kann durch den Ein-satz von Suchmaschinen erfolgen. [Nielsen01].

• Besucher des Intranets sind Mitarbeiter des Unternehmens, die sich in ihrem Fach-bereich der Firma auskennen. Zur Steigerung der Effektivität der Webseite imIntranet können die Seiten in entsprechende Fachbereiche des Unternehmens un-terteilt bzw. benannt werden. [Nielsen01]

• Die Unternehmer setzen meistens die Mitarbeiter in unterschiedlichen Fachberei-chen ein und deshalb sollte die Navigation bzw. die Präsentation des einzelnenFachbereichs vereinheitlicht werden [Nielsen01].

• Ein Verzeichnisdienst (Sitemap) und Hyperlinks können die Navigation innerhalbdes Webangebots vereinfachen.

• Die Verzeichnishierarchie des Webauftritts kann eine Abbildung der Unterneh-mensstruktur wiedergeben. Das führt dazu, dass die Mitarbeiter mit Bekanntemkonfrontiert werden.

• Falls Einschränkungen für einige Mitarbeiter innerhalb des Intranets existieren,sollten diese für die Mitarbeiter mit einem entsprechenden Hinweis gekennzeichnetwerden.

• Es sollte auf jeder Seite ein eindeutiges Logo angezeigt werden, das gleichzeitig alsLink zur Homepage dient [Nielsen01].

3.8 Barrierefreiheit

Neben der Usability ist auch die Web Accessibility (Barrierefreies Internet) ein bedeu-tendes Thema im Web. Mit dem am 1. Mai 2002 in Kraft getretenen Gleichstellungs-gesetz für Behinderte besteht zunächst auf Bundesebene eine gesetzliche Verpflichtung,Internetseiten bis zum Jahr 2005 für alle zugänglich anzubieten. Somit sollten Inter-netangebote für alle Benutzer, unabhängig von körperlichen oder altersbedingten Ein-schränkungen, uneingeschränkt genutzt werden können. Die Grundlage für dieses Gesetzist in Artikel 3 Abs. 3 des Grundgesetzes geregelt. Es heißt, dass “Niemand wegen seinerBehinderung benachteiligt werden darf“[Accessibility04].

Dem statistischen Bundesamt zufolge leben 6,639 Millionen Menschen mit einer Schwer-behinderung in Deutschland [Sta04]. Unabhängig von ihrer Krankheit sind auch Men-

64

Page 65: pdf, ca. 1,74 MB

3.8. BARRIEREFREIHEIT

schen mit Behinderungen auf das Internet angewiesen. Die Benutzbarkeit von einemInternetangebot muss somit auch für behinderte Menschen gewährleistet sein. Um auchfür diese Zielgruppe einen benutzerfreundlichen Internetauftritt anzubieten, müssen ersteinmal die Eigenschaften dieser Zielgruppe bekannt sein. Folgende Eigenschaften müssenberücksichtigt werden:

• Menschen mit Sehbehinderungen haben oft Probleme Texte mit kleiner Schrift zulesen. Folglich sollten sich Texte vergrößern lassen.

• Farbblinde z.B., können die Farben im Rot-Grün-Bereich sehr schwer unterschei-den. Demzufolge müssen diese speziellen Anforderungen im Webdesign berücksich-tigt werden.

• Blinde Menschen benutzen eine Sprachausgabe, um selber auch Informationen ausdem Web zu bekommen. Daher muss der gesamte grafische Inhalt einer Webseitezusätzlich in Textform beschrieben sein ([Balzert04], S.226).

• Mobilitätsbehinderte Menschen benutzen oft andere Eingabegeräte als die Tastaturoder die Maus.

Dies bedeutet, dass Funktionen hinzugefügt werden müssen, so dass eine Internetseitefür alle Benutzer bedienbar und zugänglicher ist.

Damit ein Internetangebot barrierefrei vom Benutzer genutzt werden kann, müssen fol-gende Regeln bei der Erstellung eines Webangebots beachtet werden:

• Farben sollen kontrastreich eingesetzt werden.

• Farben sollen individuell einstellbar sein.

• Schriften/Bildschirminhalte müssen sich vergrößern lassen.

• Informationen müssen auch als Text zu finden sein und nicht nur als Bilder.

• Ein durchgängig gleiches Layoutschema ist erforderlich.

• Layout und Inhalt sollen getrennt werden.

• Frames sollen nicht benutzt werden.

• Navigationsführung sollte logisch eingesetzt werden.

• Eine einfache und verständliche Sprache sollte verwendet werden.

65

Page 66: pdf, ca. 1,74 MB

3.8. BARRIEREFREIHEIT

Es ist sich darüber Klarheit zu verschaffen, das Menschen mit Behinderungen an gesell-schaftlichen Prozessen durch den Einsatz von barrierefreien Internetseiten teilnehmenkönnen. Folgende Grundprinzipien müssen für barrierefreie Systeme eingehalten wer-den:

• Wahrnehmbarkeit

• Bedienbarkeit

• Orientierung

• Verständlichkeit

• Nachhaltigkeit

Bei der Wahrnehmbarkeit müssen alle in der Webseite enthaltenen Funktionen und Infor-mationen so dargestellt werden, dass sie von jedem Benutzer erkannt werden können.

Benutzer müssen alle bereitgestellten Elemente (Schaltfläche, Menüleisten) bedienenkönnen. Elemente, die zum Beispiel nicht aussagekräftig genug sind, werden nicht betä-tigt.

Die Orientierung innerhalb einer Webseite muss schnell und einfach sein. Benutzer möch-ten ihre Zeit nicht damit verschwenden, sich erst einmal auf einer Webseite orientierenzu müssen.

Die Verständlichkeit von Inhalt und Beschreibungen von Bedienelementen in einer Web-seite muss gewährleistet sein. Benutzer möchten kurze, übersichtliche Texte lesen, umInformationen schnell zu erhalten.

Durch den Andrang neuer Technologien muss gewährleistet sein, dass auch durch zu-künftige Zugangstechnologien der Zugriff auf eine Webseite möglich ist. So sollte jedeWebseite mit alter und neuer Technologie getestet werden.

66

Page 67: pdf, ca. 1,74 MB

3.9. FAZIT

3.8.1 Tipps für barrierefreie Internetauftritte

• Horizontale Navigationsleiste: senkrechte Trennstriche zwischen den Links einfügen

• Verweis zum eigentlichen Inhalt; gleich am Anfang der Seite

• Suchfunktion erreichbar platzieren; Ergebnisse in direkter Nähe aufbauen

• Bei einer Baumstruktur: - Die einzelnen Äste sollten sich in einer Navigationsleistewieder zusammenfalten lassen [POWS05].

3.9 Fazit

Die Informationen, die die Autoren aus der Literatur und den Usability-Filmen heraus-gearbeitet haben sind sehr umfangreich. Es gibt viele Aspekte, die nicht so wichtig bzw.entscheidend für die Benutzbarkeit eines Webauftritts sind. Daher wäre es jetzt hilfreichein Regelwerk zu erstellen, dass ein paar Regeln beinhaltet, worauf der Webentwicklerachten muß, um eine benutzerfreundliche Webseite zu gestalten.

67

Page 68: pdf, ca. 1,74 MB

4 Erstellung des Regelwerkes

4.1 Abgeleitete Regeln

Im folgenden gilt es, aus der sehr umfangreichen Literatur und dem daraus erstelltenkomplexen Regelwerk alle erscheinenden Regeln so zu filtern, dass eine pragmatischeHilfestellung für den Webdesigner entsteht. Ergänzend ist an dieser Stelle hinzuzufügen,dass auf vorgenannte Details nicht weiter eingegangen wird. Die folgende Auflistungder Regeln ist somit eher als kompaktes Regelwerk zu verstehen. Sofern für spezielleRegeln weiterer Klärungsbedarf besteht, verweisen die Autoren auf Kapitel 3, in dementsprechende Regeln ausführlich erläutert und anhand von ausgewählten Beispielen aufNotwendigkeit im Zusammenhang mit Usability überprüft werden.

Navigation (vgl. Kapitel 3.2.3)

„DO“:

Der Webentwickler muß verdeutlichen

• wo sich der Benutzer gerade befindet,

• welche Navigationsmöglichkeiten von einer Seite gegeben sind und

• welche Seiten bisher besucht worden sind.

„DON’T“:

Der Webentwickler darf nicht

• die Navigationsleiste rechts oder mittig platzieren,

• mehr als neun Äste unter einem Knoten im Navigationsbaum anordnen,

• mehr als drei Ebenen verwenden, um ein Ziel zu erreichen und

68

Page 69: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

• veränderbare Begriffe als Menüpunkt verwenden.

Suchfunktion (vgl. Kapitel 3.2.5)

„DO“:

Der Webentwickler sollte

• die Suchfunktion im sichtbaren Bereich platzieren,

• eine Hilfsfunktion zur Bedienung der Suchfunktion bereit stellen,

• die Option zur Verfügung stellen, Suchergebnisse zu sortieren und

• bei einer ergebnislosen Suche für Alternativvorschläge zu sorgen.

„DON’T“:

Der Webentwickler darf nicht bei einer ergebnislosen Suche eine leere Seite anzeigen.

Hyperlinks (vgl. Kap.3.3.1)

„DO“:

Der Webentwickler sollte

• besuchte Hyperlinks farbig kennzeichnen,

• das Dateiformat und -größe anzeigen,

• Hyperlinks, die das gleiche Ziel haben, gleich benennen ,

• Hyperlinks aussagekräftig benennen und

• Tooltips verwenden, um weitere Informationen vor dem Anklicken des Hyperlinksfür den Benutzer bereitzustellen.

„DON’T“:

Der Webentwickler sollte nicht

• unterstrichene Texte verwenden, die keine Hyperlinks sind,

69

Page 70: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

• die Ziele der verwendeten Hyperlinks entfernen und

• Hyperlinks verwenden, die zu wiederholtem Besuch der vorherigen Seite führen.

Formular (vgl. Kap.3.3.2)

„DO“:

Der Webentwickler sollte

• das erste Feld im Formular bereits aktiviert haben,

• Pflichtfelder erkennbar machen,

• dafür Sorge tragen, dass beim Auftreten eines Fehlers eine exakte Fehlermeldungausgeben wird,

• sicherstellen, dass der Benutzer beim erfolgreichen Abschicken eines Formulars eineRückmeldung vom System erhält,

• gewährleisten, dass beim Auftritt eines Fehlers die bisher eingegebenen Daten bei-behalten werden.

„DON’T“:

Der Webentwickler sollte nicht zu viele auszufüllende Felder auf einer einzigen Seiteplatzieren.

Textstruktur(vgl. Kap.3.3.3)

„DO“:

Der Webentwickler sollte Texte

• in kurze Abschnitte gliedern,

• mit eindeutigen Überschriften versehen,

• nach Möglichkeit ab einer Schriftgröße von >= 12 pt serife Schriften verwendenund

• bei denen spezielle Schriftarten verwendet worden sind, alternative Standardschrift-arten anbieten.

70

Page 71: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

„DON’T“

Der Webentwickler sollte keine zu breiten Textspalten verwenden.

Farben (vgl. Kap.3.3.4)

„DO“:

Der Webdesigner sollte

• kontrastreiche Farben nutzen und

• Pastellfarben verwenden, die angenehm für die Augen sind.

• internationale Farbedeutungen einsetzen (z.b. Rot für Fehler)

„DON’T“:

Der Webdesigner darf nicht

• Die Farbkombination rot/grün oder blau/violett einsetzen und

• einen schwarzen Hintergrund verwenden.

Scrollen (vgl. Kap.3.3.5)

„DON’T“:

Der Webentwickler sollte nicht

• die Webseite so gestalten, das horizontales Scrollen notwendig ist und

• das Scrollen in inhaltlose Bereiche führt.

Frames (vgl. Kap.3.3.6)

„DO“:

Der Webentwickler sollte

• Frames in Inline-Frames umwandeln,

• den Druckbefehl auf den Seiteninhalt lenken und

71

Page 72: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

• das Abspeichern der URL in die Favoritenliste ermöglichen.

„DON’T“:

Der Webentwickler sollte grundsätzlich Frames vermeiden.

CSS (vgl. Kap.3.3.7)

„DO“:

Der Webdesigner sollte CSS einsetzen

• um das Design für die gesamte Webseite zu zentralisieren,

• um das Wechseln des Designs ohne eine Änderung des Inhalts zu ermöglichen und

• um somit die Fehlerquote beim Ändern des Inhalts zu minimieren.

Freiheit (vgl. Kap. 3.3.10)

“DONT“

Der Webentwickler sollte

• keine festen Wege vorschreiben,

• den Zurückbutton nicht manipulieren und

• den Benutzer nicht auf der Webseite gefangen halten

Bildschirmauflösung (vgl. Kap.3.4.1)

„DO“:

Der Webentwickler sollte

• entweder unterschiedliche Styles (CSS) für die dynamische Anpassung der Webseitefür die aktuelle Auflösung bereitstellen oder

• einen Hinweis für die Auflösung geben, die zur besten Darstellung der Seite führt.

72

Page 73: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

Browser (vgl. Kap.3.4.3)

„DO“:

Der Webentwickler sollte

• die Webseite vor Veröffentlichung auf möglichst viele Browser auf korrekte Funk-tionalität testen und

• Hinweise für eventuelle Einschränkungen bei bestimmten Browsern geben.

Downloads

„DO“

Der Webentwickler sollte

• Downloadlinks mit Info zur Dateigröße sowie die dazu benötigte Downloadzeit inunterschiedlichen Bandbreiten versehen,

• Angaben über das Format der Downloaddatei, sowie bei bekannten Formaten einenIcon des Herstellers bereitstellen und

• bei Formaten, die besondere Programme benötigen, entsprechende Links zum Her-steller zur Verfügung stellen.

PlugIns (vgl. Kap.3.4.4)

„DO“:

Der Webentwickler sollte

• Alternativen anbieten, die bei Fehlen des Plugins, die Webseite vollständig darstelltund

• Links zum Download für benötigte Plugins für die optimale Darstellung bereitstel-len.

73

Page 74: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

Multimedia (vgl. Kap. 3.5)

„DO“:

Der Webentwickler sollte

• Multimedia-Elemente regulierbar / abschaltbar machen und

• große Multimedia-Elemente auf der Webseite in kleine Sequenzen aufteilen.

Bilder und Animationen (vgl. Kap. 3.5.1)

„DO“:

Der Webentwickler sollte

• Alt-Tags anbieten,

• große Bilder in mehrere Schichten laden und

• Thumbnails als Vorschau für große Bilder bereitstellen.

„DON’T“:

Der Webentwickler sollte keine Texte in Form von Bildern darstellen.

Hilfefunktionen und Onlinedokumentation (Kap. 3.6.2)

“DO“

Der Webentwickler sollte

• FAQs für verschiedene Benutzergruppen zur Verfügung stellen,

• Szenarien zur Erklärung eines Arbeitsablaufs bei Notwendigkeit bereitstellen und

• Online-Doku / Glossar anbieten.

74

Page 75: pdf, ca. 1,74 MB

4.1. ABGELEITETE REGELN

Kontakt / Impressum (Kap. 3.6.3)

„DO“

Der Webentwickler sollte

• Kontaktmöglichkeiten an den Webseiteninhaber sowie Impressum auf jeder Seiteanbieten.

Betaversion-Tests

„DO“

Der Webentwickler sollte

• erst nach fehlerfreie Betaversionstest die Webseite veröffentlichen,

• die Webseite von den zu erwartenden Benutzergruppen auf Benutzbarkeit undIntuitivität testen und

• die Webseite auf Rechtschreibfehler überprüfen lassen.

75

Page 76: pdf, ca. 1,74 MB

5 Prototyperstellung

5.1 Ziele des Prototyps

Die Autoren sollen im Zusammenhang mit dieser Bachelorarbeit einen Prototypen (Job-börse) erstellen. Anhand der Jobbörse werden die als wichtig erachteten Regeln für Usa-bility angewendet, um die theoretisch erarbeiteten Aspekte dieser Arbeit in der Praxiszu verwirklichen.

Ferner soll die Relevanz und die Umsetzung des erstellten Regelwerks überprüft werdenund gegebenenfalls weiter optimiert werden, sodass der Prototyp später als „Paradebei-spiel“ im Hinblick auf Usability gelten soll. Dieser Optimierungsprozess soll durch dentäglichen Einsatz der Job-Börse im Web und den daraus resultierenden Verbesserungs-vorschlägen der verschiedenen Benutzergruppen sichergestellt werden. Es wird seitensder Autoren erwartet, dass durch diverse Tests langfristig gesehen, das Regelwerk kom-plettiert wird.

5.2 Anwendungsfälle

Folgende Use-Cases für den Studenten sind in dieser Version vorzustellen:

• Student registrieren

• Student anmelden

• Jobsuche aufgeben

• Angebot suchen

• Firmendaten auflisten

• Persönliche Daten ändern

76

Page 77: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

• Eigene Jobsuche ändern

Use-Case: Student registrierenZiel: Freischaltung zur Nutzung des SystemsVorbedingung: Student muss immatrikuliert seinStudent besitzt eine gültige EmailadresseNachbedingung Erfolg: Student ist eingeloggt, um die Jobbörse zu nutzenNachbedingung Fehlschlag: Student erhält eine Fehlermeldung, Nutzung der Jobbörsebleibt ausAkteure: StudentAuslösendes Ereignis: Student möchte die Dienste der Jobbörse benutzenBeschreibung:

77

Page 78: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Use-Case: Student anmeldenZiel: Ein bereits erfasster Student hat sich am System angemeldetVorbedingung: Student hat sich bereits registriertNachbedingung Erfolg: Student ist im System angemeldetNachbedingung Fehlschlag: Student ist nicht am System angemeldetAkteure: StudentAuslösendes Ereignis: Student möchte die Dienste der Jobbörse nutzenBeschreibung:

Use-Case: Jobsuche aufgebenZiel: Student stellt sich als Jobsuchender Firmen vorVorbedingung: Student ist im System angemeldetNachbedingung Erfolg: Student hat eine Jobsuche aufgegebenNachbedingung Fehlschlag: -Akteure: StudentAuslösendes Ereignis: Student möchte Jobsuche aufgebenBeschreibung:

78

Page 79: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Use-Case: Angebot suchenZiel: Student findet ein JobangebotVorbedingung: Student ist im System angemeldetNachbedingung Erfolg: Student findet einen JobNachbedingung Fehlschlag: -Akteure: StudentAuslösendes Ereignis: Student braucht einen JobBeschreibung:

Use-Case: Firmendaten auflistenZiel: Liste aller Firmen vom System anzeigen zu lassenVorbedingung: Student ist im System angemeldetNachbedingung Erfolg: Student findet die von ihm gesuchte FirmaNachbedingung Fehlschlag: Student findet nicht die gewünschte FirmaAkteure: StudentAuslösendes Ereignis: Student benötigt Informationen über vorhandenen FirmenBeschreibung:

79

Page 80: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Use-Case: Persönliche Daten aufrufenZiel: Das Profil eines bereits registrierten Studenten ändernVorbedingung: Student ist im System angemeldetNachbedingung Erfolg: Die geänderten Daten wurden gespeichertNachbedingung Fehlschlag: -Akteure: StudentAuslösendes Ereignis: Veränderung bei Studentenprofil sind eingetreten (Bsp. Umzug)Beschreibung:

Use-Case: Eigene Jobsuche ändernZiel: Ändern der bereits erstellten JobsucheVorbedingung: Student ist im System angemeldetStudent hat bereits eine Jobsuche aufgegebenNachbedingung Erfolg: Student ändert seine JobsucheNachbedingung Fehlschlag: -Akteure: StudentAuslösendes Ereignis::Kriterien zur Jobsuche haben sich geändertBeschreibung:

80

Page 81: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Folgende Use-Cases für die Firma sind in dieser Version auszuführen:

• Firma registrieren

• Firma anmelden

• Bewerber suchen

• Angebot aufgeben

• Angebote ändern

• Firmen Daten aufrufen

Use-Case: Firma registrierenZiel: Freischalten zur Nutzung des SystemsVorbedingung: Besitz einer gültigen EmailadresseNachbedingung Erfolg: Firma ist eingeloggt, um die Jobbörse zu nutzenNachbedingung Fehlschlag:-Akteure: FirmaAuslösendes Ereignis:Beschreibung:

81

Page 82: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Use-Case: Firma anmeldenZiel: Eine früher erfasste Firma hat sich am System angemeldetVorbedingung: Firma hat sich bereits registriertNachbedingung Erfolg: Firma ist im System angemeldetNachbedingung Fehlschlag: Firma ist nicht am System angemeldetAkteure: FirmaAuslösendes Ereignis:Beschreibung:

Use-Case: Bewerber suchenZiel: Firma findet einen BewerberVorbedingung: Firma ist im System angemeldetNachbedingung Erfolg: Firma findet einen BewerberNachbedingung Fehlschlag:-Akteure: FirmaAuslösendes Ereignis:Beschreibung:

82

Page 83: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Use-Case: Angebot aufgebenZiel: Firma präsentiert ihr AngebotVorbedingung: Firma ist im System angemeldetNachbedingung Erfolg: Firma hat ein Angebot inseriertNachbedingung Fehlschlag:-Akteure: FirmaAuslösendes Ereignis:Beschreibung:

Use-Case: Angebot ändernZiel: Firma ändert oder löscht das AngebotVorbedingung: Firma ist im System angemeldetNachbedingung Erfolg: Firma hat ein Angebot geändert oder gelöschtNachbedingung Fehlschlag: -Akteure: FirmaAuslösendes Ereignis:Beschreibung:

Use-Case: Firmen Daten aufrufenZiel: Das Profil einer früher erfassten Firma wurde geändertVorbedingung: Firma ist am System angemeldetNachbedingung Erfolg: Die geänderten Daten wurden gespeichertNachbedingung Fehlschlag: Firmenprofil bleibt unverändertAkteure: FirmaAuslösendes Ereignis:Beschreibung:

83

Page 84: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

84

Page 85: pdf, ca. 1,74 MB

5.2. ANWENDUNGSFÄLLE

Abbildung 5.1: UseCase-Diagramm

85

Page 86: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

5.3 Spezifikation des Prototyps

Gründe für den Einsatz von JavaScript:

Die Plausibilitätsüberprüfung beim Client spart dem Benutzer das Neuladen der Web-seite beim Auftreten eines Fehlers. Zusätzlich kann das zu korrigiernde Feld aktiviertwerden.

Gründe für den Einsatz von PHP:

• Durch den PHP-Generator wird HTML - Datei erzeugt und an den Clientbrowsergesendet. Da alle Clients HTML verarbeiten können, entstehen keine Abhängig-keiten.

• PHP ermöglicht die Erstellung von dynamischen Seiten. D.h. dass die Webseitein Abhängigkeit von unterschiedlichen Situationen bzw. Parametern erzeugt. Derleichte Einsatz von PHP und MySql ist ein weiterer Grund für diese Auswahl.

Student: Spezifikation

Neue Registrierung / Persönliche Daten ändern

Client-seitig:

Nutzung von JavaScript. Beim ersten Schritt der Registrierung soll die Gültigkeit derEmailadresse und Matrikelnummer vor dem Abschicken des Formulars geprüft werden.Der Benutzer bekommt bei einer ungültigen Emailadresse bzw. Matrikelnummer einenHinweis, dass die eingegebenen Daten nicht gültig sind. Daraufhin wird das Feld mit un-gültigen Daten gelöscht und automatisch für die neue Eingabe aktiviert. Nach dem Ab-schluss der Registrierungsüberprüfung wird der Student aufgefordert seine persönlichenDaten einzugeben, um die Registrierung abzuschließen. Hier wird Clientseitig geprüft, obdie Pflichtfelder einen Wert beinhalten, ob die Emailadresse gültig ist und ob die Pass-wortlänge korrekt ist. Abschließend wird bei der Wiederholung der Passworteingabe, diewiederholte Eingabe mit der vorherigen Eingabe des Passworts verglichen.

Server-seitg:

Nutzung von php-Klassen: Serverseitig wird durch die Klasse “regCheckClass“ vor derRegistrierung geprüft

• ob sich der Student bereits im System registriert hat. Sollte das nicht der Fall sein,so kann die Registrierungsüberprüfung fortgesetzt werden.

86

Page 87: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

• ob der Familienname des Studenten mit den angegebenen Daten im Zusammen-hang mit der Matrikelnummer übereinstimmt.

Dies wird durch die Methode “Matrikelnummer-Check“ erreicht. Falls dadurch ein gülti-ges Ergebnis erzielt wird, spreichert diese Methode die Studentendaten in der Datenbank.Anschließend wird eine Email mit einem vom System generierten Link zum Registrie-rungsschritt 2 erzeugt und an den Studenten versendet. Bei einem Fehlschlag der beidenoben genannten Überprüfungen wird eine Hinweismeldung “reg_error_info“ dem Stu-denten angezeigt. Diese Infomeldung beinhaltet mögliche Fehlerursachen und eventuelleHinweise der Fehlerbehebungen. Zusätzlich bietet diese Informationsseite die direkteKontaktierungsmöglichkeiten für Meldungen für Registrierungsprobleme, die sich nichtdurch den Benutzer beheben lassen.

Nach dem ersten Registrierungsschritt wird die Klasse “studentClass“ die weitere Über-prüfung für die Registrierung übernehmen. Als erstes wird die Gültigkeit des Linksüberprüft. Das geschieht folgendermaßen:

• Der Link beinhaltet Information über den zu registrierenden Benutzer. Es wird mitder Methode “checkId“ geprüft, ob ein Benutzer mit der Id, die im Link vorhandenist. Weiter wird überprüft, ob dieser Benutzer die Registrierung abgeschlossen hat.Da die Registrierung nur einmal möglich ist. Dieser Ablauf garantiert, dass jederLink kann nur einmal eingesetzt werden. Bei der Nutzung eines bereits verwendetenLinks, wird der Benutzer hingewiesen, dass es sich um einen bereits verwendetenLink handelt. Zusätzlich wird der Benutzer hingewiesen, sich einen neuen Link beidem Systembetreiber durch eine Email zu holen.

• Nach der Erledigung der Registrierungsüberprüfung kann jetzt der Benutzer seinepersönliche Daten eintragen und die Registrierung damit abschließen.

Angebot suchen

Client-seitg:

Nutzung von JavaScript: Hierbei wird die Gültigkeit des Formats des eingegebenen Da-tumszeitraum geprüft. Bei einem Fehlerfall wird dem Benutzer auf den Fehler hingewie-sen. Nach der Bestätigung des Benutzers wird das zu verändernde Feld markiert, um dieÄnderung vorzunehmen. Zusätzlich bietet der “Datum wählen“- Button die Möglichkeitden Zeitraum durch die Anzeige eines Kalender auszuwählen.

Server-seitig:

Nutzung von php-Klassen: Die Klasse “jobClass“ stellt die Suchmethode “suche Job“bereit. Diese Methode sucht folgendermaßen:

87

Page 88: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

• die Ergebnisse werden durch die vom Benutzer ausgewählten Einschränkungengranuliert

• falls der Benutzer einen oder mehrere Suchwörter eingibt, werden diese in derDatenbank der Felder “Angebotbeschreibung“ und “Angebottitel“ durchsucht undals “beste Treffer“ als Ergebnis angezeigt

• sie unterstützt boolesche Operationen, sodass der Benutzer auch ähnliche Ergeb-nisse angezeigt bekommt

Die gelieferten Ergebnisse lassen sich durch diese Methode nach folgenden Kriteriensortieren:

• Berufsart

• Region

• Branche

• Startdatum und Treffergenauigkeit.

Alle angezeigten Ergebnisse sind mit Hyperlinks versehen. In der Datenbank initiierendiese die Wiedererstellung der gespeicherten Firmen- Flyer. Falls die Firma keinen Flyerbeim Aufgeben eines Angebots hinterlegt hat, wird vom System automatisch eine PDF-Datei zur Verfügung gestellt, sodass die Informationen über den Firmenkontakt und dieAngebotdetails eingesehen werden können.

Jobsuche aufgeben

Client-seitg:

Nutzung von JavaScript: Bei der “Jobsuche aufgeben“ wird die Methode “multiplewert“der value der Mehrfachauswahlfelder in eine Stringdatei kodiert. Dies ermöglicht dasÜbertragen von mehreren Werten, die zum gleichen Feld gehören. Eine andere Methode,die zur Überprüfung der Gültigkeit des Zeitraums und der Pflichtfelder verwendet wird,ist die Methode “Fehlertest“. Die Methoden “speichern“ und “returnabfangen“ haben inKombination die Aufgabe, trotz Abschicken des Formulars per Return-Taste oder trotzKlicken des Speichern-Buttons, die vorherigen Plausibilitättests durchzuführen.

Server-seitig:

Nutzung von php-Klassen: Die Methode “prüfe-meine-Berufsart“ stellt fest, bei welchenBerufsarten der Benutzer bereits eine Jobsuche aufgegeben hat. Das dynamisch erstellteFormular wird ohne diese Einträge bei der “Berufsart auswählen“ erstellt. Dadurch wird

88

Page 89: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

garantiert, dass jeder Student nur eine einzige Jobsuche bei einer Berufsart aufgebenkann. Da jede Jobsuche verschiedene Kriterien als mutliple beinhalten kann, kann sichder Benutzer mit einer einzigen aufgegebenen Jobsuche für mehrere Bereiche gleichzeitigbewerben. Nach erfolgreicher Abspeicherung der Jobsuche werden als Bestätigung dieabgespeicherten Daten von der Datenbank wieder aufgerufen und dem Benutzer in einerÜbersichtsmaske bereitgestellt. Nun hat der Benutzer die Möglichkeit diese Jobsuche zudrucken, zu ändern oder zu löschen.

Firmen auflisten

Client-seitg:

Nutzung von JavaScript: Die Methode “sort“ aktualisiert die Firmenliste mit dem zusortierenden Parameter und die Art der Sortierung (aufsteigend / absteigend).

Serverseitig:

Nutzung von php: Die Klasse “job“ stellt die Methode “gib-Firmenliste“ bereit. DieseMethode liefert Informationen über die Firma in einem Datenfeld. Dieses Feld wirdvon der Webseite verarbeitet und an entsprechender Stelle angezeigt. Die Eigenschaftendieser Methode sind wie folgt:

• der Parameter “sort“ sorgt dafür, dass die Ergebnisse nach ihrem Inhalt sortiertwerden

• der Parameter “aufAb“ sorgt dafür, dass die Sortierungsrichtung geändert wird

• die Parameter “von“ und “bis“ schränken die Anzahl und den Anfangsindex derErgebnisse in der Datenbank ein

Firma: Spezifikation

Neue Registrierung

Client- seitig:

Nutzung von JavaScript. Beim ersten Schritt der Registrierung soll die Gültigkeit derEmailadresse vor dem Abschicken des Formulars geprüft werden. Der Benutzer bekommtbei einer ungültigen Emailadresse einen Hinweis, dass die eingegebenen Daten nicht gül-tig ist. Daraufhin wird das Feld mit ungültigen Daten gelöscht und automatisch fürdie neue Eingabe aktiviert. Nach dem Abschluss der Registrierungsüberprüfung wirddie Firma aufgefordert ihre Firmendaten einzugeben, um die Registrierung abzuschlie-ßen. Hier wird Clientseitig geprüft, ob die Pflichtfelder einen Wert beinhalten, ob dieEmailadresse gültig ist und ob die Passwortlänge korrekt ist. Abschließend wird bei der

89

Page 90: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

Wiederholung der Passworteingabe, die wiederholte Eingabe mit der vorherigen Eingabedes Passworts verglichen.

Server-seitg:

Nutzung von php-Klassen: Serverseitig wird durch die Klasse “regCheckClass“ vor derRegistrierung geprüft

• ob sich die gleichenamige Firma mit derselben Emailadresse bereits im Systemregistriert ist. Sollte das nicht der Fall sein, so kann die Registrierungsüberprüfungfortgesetzt werden

• Anschließend wird eine Email mit einem vom System generierten Link zum Re-gistrierungsschritt 2 erzeugt und an die Firma versendet. Bei einem Fehlschlagder oben genannten Überprüfung wird eine Hinweismeldung “freg_error_info“ derFirma angezeigt. Diese Infomeldung beinhaltet mögliche Fehlerursachen und even-tuelle Hinweise der Fehlerbehebungen. Zusätzlich bietet diese Informationsseite diedirekte Kontaktierungsmöglichkeiten für Meldungen für Registrierungsprobleme,die sich nicht durch den Benutzer beheben lassen.

Nach dem ersten Registrierungsschritt wird die Klasse “firmenClass“ die weitere Über-prüfung für die Registrierung übernehmen. Als erstes wird die Gültigkeit des Linksüberprüft. Das geschieht folgendermaßen:

• Der Link beinhaltet Information über den zu registrierenden Benutzer. Es wird mitder Methode “checkId“ geprüft, ob ein Benutzer mit der Id, die im Link vorhandenist. Weiter wird überprüft, ob dieser Benutzer die Registrierung abgeschlossen hat.Da die Registrierung nur einmal möglich ist. Dieser Ablauf garantiert, dass jederLink nur einmal einsetztbar ist. Bei der Nutzung eines bereits verwendeten Links,wird der Benutzer hingewiesen, dass es sich um einen bereits verwendeten Linkhandelt. Zusätzlich wird der Benutzer hingewiesen, sich einen neuen Link bei demSystembetreiber durch eine Email zu holen.

Der Link beinhaltet Information über den zu registrierenden Benutzer. Es wird mitder Methode “checkId“ geprüft, ob ein Benutzer mit der Id, die im Link vorhanden ist.Weiter wird überprüft, ob dieser Benutzer die Registrierung abgeschlossen hat. Da dieRegistrierung nur einmal möglich ist. Dieser Ablauf garantiert, dass jeder Link nur ein-mal einsetztbar ist. Bei der Nutzung eines bereits verwendeten Links, wird der Benutzerhingewiesen, dass es sich um einen bereits verwendeten Link handelt. Zusätzlich wirdder Benutzer hingewiesen, sich einen neuen Link bei dem Systembetreiber durch eineEmail zu holen.

Nach der Erledigung der Registrierungsüberprüfung kann jetzt der Benutzer die Firmen-

90

Page 91: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

daten eintragen und die Registrierung damit abschließen.

Angebot aufgeben

Client-seitg: Nutzung von JavaScript: Beim Aufgeben eines Angebots prüft die Me-thode “speichern“ vor dem Abschicken der Daten die Gültigkeit des Zeitraums sowieder Pflichtfelder. Die Methode “returnabfangen“ fängt Return-Eingabe auf und ruft dieMethode “speichern( )“ auf. Die Methode “checklength“ prüft die Länge der bisher ein-gegebenen Anzahl von Charakter in dem Feld Angebotbeschreibung und stellt die Infoüber die Anzahl noch vorhandenen freie Charakters dar.

Server-seitig:

Nutzung von php-Klassen: Die Methode “saveAngebot“ speichert das Angebot in dieDatenbank. Nach erfolgreicher Abspeicherung des Angebots werden als Bestätigung dieabgespeicherten Daten von der Datenbank wieder aufgerufen und dem Benutzer in einerÜbersichtsmaske bereitgestellt. Nun hat der Benutzer die Möglichkeit dieses Angebotauszu drucken, zu ändern oder zu löschen.

Bewerber suchen

Client-seitg:

Nutzung von JavaScript: Hierbei wird die Gültigkeit des Formats des eingegebenen Da-tumszeitraum geprüft. Bei einem Fehlerfall wird dem Benutzer auf den Fehler hingewie-sen. Nach der Bestätigung des Benutzers wird das zu verändernde Feld markiert, um dieÄnderung vorzunehmen. Zusätzlich bietet der “Datum wählen“- Button die Möglichkeitden Zeitraum durch die Anzeige eines Kalender auszuwählen. Die Methode “returnab-fangen“ fängt Return-Eingabe auf und ruft die Methode “sucheStarten( )“ auf.

Server-seitig:

Nutzung von php-Klassen: Die Klasse “jobClass“ stellt die Suchmethode “suchebewerber“bereit. Diese Methode sucht folgendermaßen:

• die Ergebnisse werden durch die vom Benutzer ausgewählten Einschränkungengranuliert

• falls der Benutzer einen oder mehrere Suchwörter eingibt, werden diese in derDatenbank der Felder “Persönliche Qualitfikation des Studenten durchsucht undals “beste Treffer“ als Ergebnis angezeigt

• sie unterstützt boolesche Operationen, sodass der Benutzer auch ähnliche Ergeb-nisse angezeigt bekommt

91

Page 92: pdf, ca. 1,74 MB

5.3. SPEZIFIKATION DES PROTOTYPS

Die gelieferten Ergebnisse lassen sich durch diese Methode nach folgenden Kriteriensortieren:

• Berufsart

• Region

• Branche

Alle angezeigten Ergebnisse sind mit Hyperlinks versehen. Durch das Anklicken dieserHyperlinks wird ein neues Fenster mit den Kontaktdaten des Bewerbes angezeigt.

Angebot ändern

Client-seitig:

Nutzung von JavaScript: Beim “Angebot ändern“ findet die gesamte Überprüfung wiebeim Erstellen eines neuen Angebots statt.

Server-seitig: Nutzung von php-Klassen: Die Methode “ändernAngebot“ speichert dieÄnderungen in die Datenbank. Nach erfolgreichen Abschluss dieses Vorgangs werdenals Bestätigung die geänderten Daten von der Datenbank wieder aufgerufen und demBenutzer in einer Übersichtsmaske bereitgestellt. Nun hat der Benutzer die Möglichkeitdieses Angebot auszu- drucken, zu ändern oder zu löschen.

Spezifikation des Layouts

Es wird die Nutzung von Tabellen und Frames verzichtet und durch den Einsatz derCSS-Technologie ersetzt. Noch zu erwähnen ist der Einsatz von JavaScript bei der Dar-stellung der Webseite. Es werden unterschiedliche abgestimmte CSS-Dateien für unter-schiedliche Bildschirmauflösungen bereitgestellt. Mit Hilfe von JavaScript sollen dieseDateien in unterschiedliche Bildschirmauflösung geladen werden. Dies geschieht client-seitig, d.h. ohne dass die Webseite neu geladen werden muss, kann das Layout sich andie Bildschirmauflösung des Benutzers automatisch anpassen. Mit Hilfe von JavaScriptsoll sich der Navigationsbaums dynamisch auf die aktuelle Anforderung anpassen. D.h.wenn der Menüpunkt “Für Studenten“ ausgewählt wird, werden alle anderen Menüpunk-te geschlossen. Somit kann die Orientierung des Benutzers unterstützt werden.

92

Page 93: pdf, ca. 1,74 MB

5.4. IMPLEMENTIERUNG UND DESIGN DES PROTOTYPS

5.4 Implementierung und Design des Prototyps

Der Prototyp ist ein Webangbot, das eine Jobbörse anbietet. Der Prototyp wird mitPHP 5.0. in Verbindung mit der MySQL Datenbank 5.0.1. eingesetzt. Die eingesetzteArchitektur ist die meistverbreitete Drei-Schichten-Architektur.

Abbildung 5.2: 3-Schichten-Architektur

Dabei dient die erste Schicht (Präsentationsschicht) zur Kommunikation mit dem Benut-zer. Hierbei kann der Benutzer Daten bzw. Informationen mit dem System austauschen.Bei der zweiten Schicht (Fachkonzeptionsschicht) handelt es sich um die Ablaufprozess-steuerung einzelner Interkationen zwischen den Benutzer und dem System. Der Informa-tionsfluss zwischen dem Benutzer und dem System wird somit durch diese Schicht analy-siert und für weitere Bearbeitung an die oben bzw. unter gelegene Schicht bereitgestellt.Wrapper-Klassen liegen zwischen der Fachkonzeptionsschicht und Datenhaltungsschicht.Diese sind für die Datenaufbereitung für die Datenbank zuständig. Der Vorteil der Nut-zung von Wrapper-Klassen sind die einfache Handhabung und die Abstraktion von derjeweiligen Datenbank. Somit ist es möglich jeder Zeit die darunter liegende Datenbankgegen eine andere zu ersetzen.

93

Page 94: pdf, ca. 1,74 MB

5.4. IMPLEMENTIERUNG UND DESIGN DES PROTOTYPS

Folgendes Klassendiagramm erläutert die zu verwendeten Klassen und ihre Methodenbei der Erstellung des Prototyps:

Abbildung 5.3: Klassendiagramm

94

Page 95: pdf, ca. 1,74 MB

5.5. USABILITYTEST

5.5 Usabilitytest

5.5.1 Testkonzept

Technischer Aufbau

Die Tests sind im Usability-Labor der HAW gemacht worden. Das Usability-Labor dientdazu verschiedene Arten von Softwareanwendungen auf Benutzbarkeit und Ergonomiezu testen. Das Labor besteht aus zwei voneinander getrennten Räumen, einem Test- undRegieraum. Im Testraum wird ein Benutzer (Proband), der an dem Testobjekt arbeitetgefilmt. Dabei kann der emotionale Standpunkt vom Testleiter beobachtet werden. Dieserbefindet sich im Regieraum und kann dort alle wichtigen gespeicherten Informationenspäter zu einem Medium zusammenschneiden.

Testablauf

Im Usability-Labor sind insgesamt 14 Tests gedreht worden. Sieben Teilnehmer habensich einmal als Student registriert und Aufgaben bearbeitet und einmal als Firma. DieProbanden sind Studenten der HAW, die zufällig rekrutiert worden sind. Da es sichbeim dem Tests, um zwei Arten von Tests handelte, mussten auch dementsprechenddie Aufgaben so konzipiert werden. Für die Testperson, die sich als Student registrierensollten, wurden insgesamt sechs Aufgaben gestellt. Die sich als Firma registrieren sollteninsgesamt fünf Aufgaben. Jeder Test sollte nicht länger als ca. 15 Minuten andauern.Dafür sind 10 Minuten für den Test und weitere fünf Minuten für die Nachbereitungvorgesehen. Die Nachbereitung soll dazu dienen, noch einmal einen Gesamteindruckvom Testkandidat zu erhalten.

Testaufgaben

Aufgabenstellung für Student

1. Besuchen Sie die folgende URL: www.cuspidus.de/jobboerse-haw.Bite registrieren Sie sich mit folgenden Benutzerdaten:

• Familienname: student1

• Emailadresse: Bitte eine gültige Emailadresse angeben

• Matrikelnummer: 1111111

95

Page 96: pdf, ca. 1,74 MB

5.5. USABILITYTEST

2. Nachdem Sie sich registriert haben, ändern Sie den Nachnamen.

3. Sie wollen sich einer Firma präsentieren, dazu müssen Sie eine “Jobsuche aufgeben“.

4. Suchen Sie eine Werkstudententätigkeit in folgender Branche: „IT-Dienstleistung“im Bereich “ ‘java“.

5. Verlängern Sie den gewünschten Zeitraum ihrer persönlich “gespeicherten Jobsu-che“.

6. Wie viele Firmen gibt es insgesamt in der Datenbank? Wie viele davon bietenzurzeit ein Angebot an?

Weshalb wurde die Aufgabe gestellt?

1. Aufgabe:Anhand dieser Aufgabe soll die einfache Handhabung des Registrierungsvorgangs einesStudenten ermittelt werden.

2. Aufgabe:Somit soll die Intuivität der Widerfindung der “gespeicherten Persönliche Daten“ erprobtwerden.

3. Aufgabe:Der Student soll mit den vorhandenen Kriterien eine “Jobsuche aufgeben“ in Berührungkommen. Anschließend soll dies gemessen und bewertet werden.

4. Aufgabe:Anhand dieser Aufgabe soll der Usabilitygrad beim Suchen eines Angebots gemessenwerden. Dabei wird das Suchen eines Angebots mit bestimmten Einschränkungen ver-langt.

5. Aufgabe:Bei dieser Aufgabe soll ermittelt werden, wie die Einfachheit des Findens einer gespei-cherten Jobsuche ist, um diese zu ändern.

6. Aufgabe:Bei dieser Aufgabe wird ermittelt, ob die Sortierbarkeit der vorhandenen Informationenersichtlich ist.

Thesen

• Die Webseite ist leicht zu bedienen. Schon anhand des Registrierungsvorgangs ist

96

Page 97: pdf, ca. 1,74 MB

5.5. USABILITYTEST

es einfach in zwei Schritten zum Abschluss zu kommen und mit der eigentlichenArbeit zu beginnen.

• Des Weiteren wird es durch die gering gehaltene Anzahl der Pflichtfelder verein-facht, wodurch der Registrierungsvorgang schneller durchgeführt wird. So könntenFelder nachträglich eingetragen werden.

• Eine Jobsuche kann ohne jegliche Einschränkungen aufgegeben werden. Ausnah-men sind hierbei die Berufsart und das Verfallsdatum, welches festgelegt werdenmuss, wann diese Jobsuche aus der Datenbank gelöscht werden kann.

• Die Angebotsuche kann beliebig ohne Einschränkungen aufgegeben werden. DerBenutzer kann mit wenig Aufwand eventuelle Einschränkungen bei „Branche“, „Re-gion“, „Berufsart“, „Datum“ und „Suchwort eingeben“ durchführen, um genauereErgebnisse zu erzielen. Unterstützung von Suchworte in Form einer booleschenSuche soll bei Profibenutzer zu einer schnelleren Erledigung seiner Aufgabe füh-ren.

• Persönlich gespeicherte Jobsuche können in persönliche Daten leicht gefunden wer-den. Diese können dort ausgewählt und verändert werden.

• Die Firmenliste beinhaltet Informationen über die Anzahl der eingetragenen Fir-men und ist leicht erkennbar für den Benutzer. Der Benutzer hat die Möglichkeitdiese Liste problemlos nach unterschiedlichen Kriterien zu sortieren.

Aufgabenstellung für Firma

1. Besuchen Sie die folgende URL: www.cuspidus.de/jobboerse-haw.Bite registrieren Sie sich mit folgenden Benutzerdaten:

• Familienname: Bosch GmbH

• Emailadresse: Bitte eine gültige Emailadresse angeben

2. Nachdem Sie sich registriert haben, geben Sie bitte ein Angebot auf. (Angebotliegt als Datei auf dem Desktop).

3. Sie suchen einen Bewerber in Hamburg mit folgender Qualifikation: „Java-Kenntnisse“,schauen Sie sich seine Kontaktdaten an, um sich eventuell mit ihn (dem Student)in Verbindung zu setzen.

4. Ändern Sie den Titel ihres Angebots.

97

Page 98: pdf, ca. 1,74 MB

5.5. USABILITYTEST

5. Loggen Sie sich als folgende Firma ein:Loginname: airbuspasswort: airbus und verlängern Sie das erste abgelaufene Angebot

Weshalb wurde die Aufgabe gestellt?

1. Aufgabe:Anhand dieser Aufgabe soll die einfache Handhabung des Registrierungsvorgangs einerFirma ermittelt werden.

2. Aufgabe:Die Firma soll mit den vorhandenen Rubriken ein Angebot problemlos inserieren kön-nen.

3. Aufgabe:Anhand dieser Aufgabe soll der Usabilitygrad beim Suchen eines Bewerbers gemessenwerden. Dabei wird das Suchen eines Bewerbers mit bestimmten Einschränkungen ver-langt.

4. Aufgabe:Bei dieser Aufgabe soll ermittelt werden, wie die Einfachheit des Findens einer gespei-cherten Angebotsuche ist, um diese zu ändern.

5. Aufgabe:Bei dieser Aufgabe soll festgestellt werden, ob die Firma ein abgelaufenes Angebot schnellauffinden und ändern kann.

Thesen

• Die Webseite ist leicht zu bedienen. Schon anhand des Registrierungsvorgangs istes einfach in zwei Schritten zum Abschluss zu kommen und mit der eigentlichenArbeit zu beginnen.

• Des Weiteren wird es durch die gering gehaltene Anzahl der Pflichtfelder verein-facht, wodurch der Registrierungsvorgang schneller durchgeführt wird. So könntenFelder nachträglich eingetragen werden.

• Ein Angebot kann ohne jegliche Hilfe inseriert werden.

• Die Firma kann beliebig ohne Einschränkungen einen Bewerber finden und sichmit ihn gegebenenfalls in Verbindung setzen.

• Vorhandene Angebote können leicht gefunden werden. Änderungen an einem An-

98

Page 99: pdf, ca. 1,74 MB

5.5. USABILITYTEST

gebot kann die Firma mühelos durchführen.

• Das Verlängern eines verfallenden Angebots ist von der Firma unkompliziert zubetätigen.

5.5.2 Testergebnisse

Teilnehmer 1: Student 1

1. Nach sehr kurzer Orientierung auf der Seite klickt der Proband auf den Menüpunkt„Student registrieren“ in der Navigation. Beide Schritte der Registrierung kann erohne jeglichen Aufwand schnell und problemlos betätigen (3 Min.).

2. Der Proband ändert den Nachnamen im Menüpunkt „Persönliche Daten“. Diesgeschieht unkompliziert, die Rückmeldung vom System, dass die Änderungen er-folgreich gespeichert wurden, vergewissert den Proband (15 Sek.).

3. Nun möchte er eine Jobsuche aufgeben. Ohne langes Suchen, klickt er auf denMenüpunkt „Jobsuche aufgeben“ in der Navigation. Ihn kamen die Kriterien sehrverständlich vor und fing an sofort die passenden Kriterien auszuwählen. Er schätztdas Vorhandensein des Kalenders sehr ein (2:20 Min.).

4. Als nächstes soll der Proband ein Angebot suchen. Er klickt sofort auf den Menü-punkt “Angebot suchen“ im linken Navigationsbaum. Er sucht unter den Auswahl-kriterien das geforderte Suchwort “java-kenntnisse“ zu finden. Nach kurzer Überle-gung trägt er dies in Feld “Suchwort“ ein. Da in der von ihm gewählten Zeitraumkein Angebot in der DB vorhanden war, kehrte er zurück zur Angebot suche undhebt diese Einschränkungen auf. Beim zweiten Anlauf nimmt er die Einschrän-kungen von Berufart statt die geforderte Berufsart eine andere, auch dies führtzu keinem Ergebnis. Danach wurde er gebeten die nächste Aufgabe zu wechseln(3:10Min.).

5. Der Student soll das Datum seiner gespeicherten Jobsuche ändern. Er klickt aufden Menüpunkt “Persönliche Daten“ und findet dort seine gespeicherte Jobsuche.Er öffnet diese mühelos und ändert dort das Datum (1:30 Sek.).

6. Zur Zeitmangel wurde diese Aufgabe nicht von ihm bearbeitet.

99

Page 100: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Ergebnisse der Nachbereitung

Zusammenfassend ist die Seite insgesamt gut handhabbar. Das Layout ist sehr angenehmund ansprechend, durch das sterile Design wird eine konzentrierte Aufgabenbearbeitungermöglicht. Die Jobbörse ist recht einfach gehalten, das Aufgeben und Ändern einerJobsuche ist problemlos.

Verbesserungsvorschläge Sicht des Probanden

• auf Anhieb keine Verbesserungsvorschläge am Prototypen

• Aufgaben: Aufgabenbeschreibung fandet er nicht deutlich genug

• Er dachte, dass er anstelle seiner gespeicherten Jobsuche ein Angebot verlängernsollte

Teilnehmer 2: Student 2

1. Die Testperson klickt nach dem Laden der Seite sofort ohne zu zögern auf denMenüpunkt “Student registrieren“ in den linken Navigationsbaum. Beide Schritteder Registrierung kann er ohne jeglichen Aufwand schnell und problemlos betätigen(3:10 Min.).

2. Der Proband ändert den Nachnamen im Menüpunkt „Persönliche Daten“. Diesgeschieht unkompliziert, die Rückmeldung vom System, dass die Änderungen er-folgreich gespeichert wurden, vergewissert den Proband (15 Sek.).

3. Nun möchte er eine Jobsuche aufgeben. Ohne langes Suchen, klickt er auf denMenüpunkt „Jobsuche aufgeben“ in der Navigation. Er hat schnelle die für ihnpassenden Kriterien ausgewählt. (2 Min.).

4. Als nächstes soll der Proband ein Angebot suchen. Er klickt auf den Menüpunkt„Angebot suchen“ im linken Navigationsbaum. Dort gibt er alle geforderten Kriteri-en ein und bekommt zwei Angebote zusehen. Damit er mehr Angebote bekommenmöchte, geht er noch mal zurück zur Angebot suche, um die Alle Regionen aus-zuwählen. Die bereits eingegebenen Daten bestehen noch. Jetzt bekommt er einegrößere Liste von Angeboten und sortiert sie nach Startdatum (2:10Min.).

5. Der Student soll das Datum seiner gespeicherten Jobsuche ändern. Er klickt ohnezu zögern auf den Menüpunkt “Persönliche Daten“. Erst dort überlegt er, wo seinegespeicherte Jobsuche ist. Diese findet er dann und ändert dort das Datum. (1Min.).

6. Bei dieser Aufgabe geht der Proband auf den Menüpunkt “Angebot suchen“, er

100

Page 101: pdf, ca. 1,74 MB

5.5. USABILITYTEST

denkt dass sich die Anzahl der Angebote dort befindet. Er gibt keine Einschrän-kungen ein und bekommt alle Angebote zu sehen. Dann soll er die Anzahl derFirmen finden, die in der DB registriert sind. Dazu geht er auf den Menüpunkt“Liste aller Firmen“ (2 Min.)

Ergebnisse der Nachbereitung

Der Gesamteindruck wurde als ganz gut empfunden. Die Erwartungskonformität warzwichen gut und besser. Die Registrierung war üblich.

Verbesserungsvorschläge aus Sicht des Probanden

• Gespeicherte Jobsuche woanders erwartet, getrennt von pers. daten

• Pflichtfelder rot und fett nicht wie die Farbe vom text

Teilnehmer 3: Student 3

1. Sehr schnell findet der Proband den Menüpunkt “Student registrieren“ und erledigtSchritt1 der Registrierung. Durch die Intention der schnellen Erledigung der Auf-gabe übersieht der Testkandidat die Anforderung der Seite zum Abschließen derRegistrierung. Daraufhin bekommt er mehrere eindeutige Meldungen vom System,was er als nächstes ausfüllen muss. Er reagiert entsprechend und kann dann schnellden Registrierungsvorgang schnell abschließen (2 Min.).

2. Der Proband hat diese Aufgabe mit der vorherigen Aufgabe kombiniert und an-schließend mit Aufgabe 3 begonnen.

3. Bei dieser Aufgabe nutzt die Testperson die Sitemap und wählt dort den Link“ Jobsuche aufgeben“. Die hektigkeit des Probanden macht ihn zum Verhängnis.Er versucht eine Jobsuche aufgeben ohne die benötigen Daten einzugeben. Da-nach bekommt er vom System Infos, welche Schritte zu erledigen bzw. fehlendeDaten anzugeben sind. Obwohl das System den auszuwählenden Bereich automa-tisch markiert, wird das vom Testkandidat nicht wahrgenommen. Die Testpersonbemerkt nach den dritten Versuch, welches Pflichtfeld er ausgelassen hat (1:30Min.).

4. Der Testkandidat findet sehr schnell den Menüpunkt “Angebot suchen“. Dort gibter zügig die Eingrenzkriterien ein. Bei diesen eingebenden Angaben, findet dasSystem keine Angebote. Nach der genaueren Lesen der Aufgabenstellung, bemerkter seine falsche Angaben und korrigiert es. Er musste lediglich nur die falscheEingabe korrigieren, alle anderen Angaben waren beibehalten. Hinterher öffnet erdas erste Suchergebnis und schaut sich den Inhalt an (1:30Min.).

101

Page 102: pdf, ca. 1,74 MB

5.5. USABILITYTEST

5. Das Auffinden der gespeicherten Jobsuche fiel dem Testkandidat sehr schwer. Erist fast bei jeden Menüpunkt gegangen, um seine gespeicherte Jobsuche zu finden.Anschließend findet er durch Ähnlichkeit von der in der Aufgabenstellung “persön-lich gespeicherte Jobsuche“ mit “Persönliche Daten“ seine Anliegen unter diesenMenüpunkt. Nach Endecken dieser Erkenntnis konnte die Aufgabe sehr schnellerledigt werden (1:30 Min.).

6. Diese Aufgabe konnte intuitiv ohne weitere Überlegung erfolgreich gelöst werden(30 Sek.).

Ergebnisse der Nachbereitung

Die Seite wurde als gut bedienbar empfunden. Der Proband hatte Schwierigkeiten beider 5. Aufgabe gehabt, dort konnte er nicht gleich die persönlich gespeicherte Jobsu-che finden. Dies empfand er als negativ. Er erwartete die Gespeicherte Jobsuche alsMenüpunkt im Navigationsbaums.

Verbesserungsvorschläge Sicht des Probanden

• Gespeicherte Jobsuche sollte als Menüpunkt im Navigationsbaums erscheinen.

Teilnehmer 4: Student 4

1. Der Proband klickt ohne zu zögern auf den Menüpunkt “Student registrieren“.Nachdem er seine Benutzerdaten eingibt und abschickt, überfliegt er die Info zumweiteren Verlauf der Registrierung. Er versucht sich einzuloggen, was nicht möglichist. Der Testleiter weist den Testkandidaten darauf hin, seine vom System erhal-tene Bestätigungsemail abzurufen. Als er den mitgelieferten Link zu Schritt 2 derRegistrierung öffnet, nimmt er an, dass die Registrierung abgeschlossen ist. Durchweitere Hinweise kann er erst die Registrierung erfolgreich abschließen (3:25 Min.).

2. Der Testkandidat fühlt sich jetzt schon vertraut mit der Seite und kann schnellden Nachnamen im Menüpunkt “Persönliche Daten“ im Sitemap ändern. Die Be-stätigung vom System zur erfolgreichen Datenspeicherung ist für ihn informativ(20 Sek.).

3. Das Aufgeben einer Jobsuche wird schnell gefunden, wobei der Proband bei Ein-gabe des Datums nicht auf den vom System akzeptierten Formatierungs-Hinweisgeachtet hat. Daraufhin bekommt er eine Meldung, dass er das Datumsformatkorrigieren soll. Nachdem schließen dieser Meldung ist das zu korrigierende Feldautomatisch markiert und er ändert es (2 Min.).

4. Bei der Aufgabe ein Angebot zu suchen, findet der Proband gleich den Menüpunkt

102

Page 103: pdf, ca. 1,74 MB

5.5. USABILITYTEST

“Angebot suchen“ und betätigt diesen. Er grenzt seine Auswahl ein. Seine Sucheist auf Anhieb erfolgreich und er kann sie mühelos nach Startdatum sortieren (50Sek.).

5. Bei der Aufgabe, das Datum in seiner gespeicherten Jobsuche zu ändern, kann diegespeicherte Jobsuche nicht gefunden werden. Erst mit Hilfe vom Testleiter gelinktes dem Testkandidat, die Aufgabe erfolgreich auszuführen (2:15 Min.).

Ergebnisse der Nachbereitung

Insgesamt ist die Seite wegen den gewählten Farben bzw. Kontrast angenehm zu lesen.Sie ist überwiegend einfach zu bedienen. Zum Gesamteindruck der Seite konnte die Test-person nicht so viele Angaben machen, da sie sich zu sehr auf die Aufgaben konzentrierthat. Der Proband hatte einige Probleme die Aufgaben zu erledigen, da er die meistenHinweise überwiegend überflog.

Teilnehmer 5: Student 5

1. Der Proband klickt ohne zu zögern auf den Menüpunkt “Student registrieren“.Nachdem er seine Benutzerdaten eingibt und abgeschickt hat, liest er die Infozu Schritt 1 der Registrierung durch. Anschließend ruft er seine Emails ab undklickt auf den in Email enthaltenen Link und gelangt zum zweiten Schritt zurRegistrierung. Dies wird problemlos abgeschlossen (4 Min.).

2. Auffallend schnell änderte die Testperson den Nachnamen im Menüpunkt “Persön-liche Daten“. Dies hat den Eindruck erweckt, dass der Proband schon sehr vertrautmit der Seite war (20 Sek.).

3. Nun soll eine Jobsuche aufgegeben werden. Der Testkandidat klickt sofort auf denMenüpunkt “Jobsuche aufgeben“ in der Navigation. Er füllt sorgfältig die zu ihnpassenden Felder aus. Anschließend liest er die vom System erstellte Übersicht zuseiner Jobsuche durch und bestätigt die Richtigkeit seiner Eingaben mittels nicken(2:30 Min.).

4. Als nächstes soll der Proband ein Angebot suchen. Wie bei den meisten Proban-den konzentriert er sich auf den linken Navigationsbaum und findet dort sofortden Menüpunkt “Angebot suchen“. Er grenzt seine Auswahl ein. Nachdem die Su-che erfolglos war hat er die Aufgabe noch einmal durchgelesen und diesmal diegeforderten Kriterien ausgewählt. Anschließend kuckt er sich ein paar Angebotean (2Min.)

5. Als der Proband das Datum seiner “Jobsuche aufgeben“ ändern möchte, konntebeobachtet werden, das er zuerst sich überlegen musste worunter er dies finden

103

Page 104: pdf, ca. 1,74 MB

5.5. USABILITYTEST

kann. Er klickt dann auf den Menüpunkt “Persönliche Daten“ und findet dortseine gespeicherte Jobsuche. (1 Min.).

6. Wegen Windowsabsturz an diesem Rechner musste der Test an dieser Stelle abge-brochen werden

Ergebnisse der Nachbereitung

Die Seite war insgesamt sehr übersichtlich. Der Proband konnte alles auf Anhieb sofortfinden.

Teilnehmer 6: Student 6

1. Den Menüpunkt “Student registrieren“ wird mühelos gefunden. Die weiteren Schrit-te zur endgültigen Registrierung waren für den Testkandidat als übliche Wegeempfunden. Die Aufgabe wurde somit ohne Behinderungen erledigt (2:20 Min.).

2. Der Proband hat diese Aufgabe mit der vorherigen Aufgabe kombiniert und an-schließend mit Aufgabe 3 begonnen.

3. Bei dieser Aufgabe nutzt die Testperson die Sitemap und wählt dort den Link “Jobsuche aufgeben“. Die Testperson findet alles ganz schnell. Die Fehlermeldungfür die Datumseingabe war präzise genug, so dass der Benutzer ohne weitere Über-legung das Datum korrigieren konnte (1:40 Min.).

4. Der Testkandidat findet sehr schnell den Menüpunkt “Angebot suchen“. Dort gibter die Eingrenzkriterien ein. Bei diesen eingebenden Angaben, findet das Systemkeine Angebote. Als er die Datumseinschränkung weggelassen hat (was nicht inder Aufgabe gefordert war) hatte er die von der Aufgabe verlangten Ergebnissegefunden. Alle anderen Eingaben mussten nicht wiederholt eingegeben werden. DieErgebnisse konnte er dann sortieren und sich die Details zum Angebot anschauen(1:45Min.).

5. Der Testkandidat konnte die gespeicherte Jobsuche nicht auf Anhieb finden. Erstnach genauerer Betrachtung konnte er die gespeicherte Jobsuche finden und dieAufgabe erledigen (1:10 Min.).

6. Diese Aufgabe war mit ein wenig Überlegung erfolgreich gelöst (1:30 Sek.).

104

Page 105: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Ergebnisse der Nachbereitung

• sehr einfache Registrierung

• Layout ist ok

• Pflichtfelder waren als solche markiert, gut zu erkennen

• Positiv: kein Flash

Verbesserungsvorschläge Sicht des Probanden

• Das “Ausloggen“ möchte er rechts oben haben.

• Gespeicherte Jobsuche als Menüpunkt im Navigationsbaums.

• Es müsste die Möglichkeit geben die gesamten Firmen auf eine einzige Seite aufzu-listen und anzeigen Schnellere Server, um Anfragen schneller bearbeiten zu können.

Teilnehmer 7: Student 7

1. Den Menüpunkt “Student registrieren“ wird mühelos gefunden. Nach der Erledi-gung des ersten Schrittes der Registrierung, war ihm nicht klar, dass die Registrie-rung noch nicht abgeschlossen ist. Nach dem, dass er nicht weiter arbeiten konnte,hat er sorgfältig den Hinweis vom System gelesen und die Registrierung erfolgreichabgeschlossen (2:30 Min.).

2. Der Proband hat diese Aufgabe mit der vorherigen Aufgabe kombiniert und an-schließend mit Aufgabe 3 begonnen.

3. Bei dieser Aufgabe nutzt die Testperson die Sitemap und wählt dort den Link “Jobsuche aufgeben“. Die Testperson findet alles ganz schnell (1:45 Min.).

4. Der Testkandidat findet sehr schnell den Menüpunkt “Angebot suchen“. Der Pro-band hatte sehr große Probleme mit dem Verständnis der Aufgabe gehabt. Ihm warnicht klar, dass jede Einschränkungen große Auswirkung auf das Ergebnis hervor-ruft. Dabei sucht er vergeblich z.b. in der Region Berlin nach Angebote, die nichtvorhanden waren. Erst nach dem er sich an die Aufgabenstellung eingehalten hat,wurden Ergebnisse geliefert. Nach dem die Ergebnisse ausgegeben wurden, konnteer intuitiv die Sortiermöglichkeiten finden und anwenden. (4 Min.).

5. Der Testkandidat konnte die gespeicherte Jobsuche unter Persönliche Daten mitkleiner Verzögerung auffinden. Die Aufgabe konnte er dann zügig erledigen (1:15

105

Page 106: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Min.).

6. Diese Aufgabe war mit ein wenig Überlegung erfolgreich gelöst (1:40 Sek.).

Ergebnisse der Nachbereitung

• Seite ist in Ordnung

• Alles leicht zu finden, was man sucht

• Menüpunkte sind gut aufgelistet

Teilnehmer 1: Firma - Artec GmbH

1. Die Testperson klickt in der linken Navigation auf den Menüpunkt “Firma registrie-ren“. Nachdem sie ihre Emails abgerufen hat, kann sie ohne weitere Hindernisseden zweiten Schritt der Registrierung erfolgreich abschließen. Sie wird lediglichbei der Passwortübereinstimmungskontrolle darauf hingewiesen, dass die Eingabefehlgeschlagen ist und sie erneut ein Passwort eingeben muss (2:25 Min.).

2. Der Proband klickt im linken Navigationsbaum auf den Menüpunkt “Angebot auf-geben“. Dort wählt er die für das Angebot passenden Kriterien aus und lädt einepdf-Datei unkompliziert hoch. Das Aufgeben eines Angebots hat er somit zügigbearbeitet (1:05 Min.).

3. Bei der nächsten Aufgabe soll der Proband einen Bewerber suchen. Er klickt raschin den linken Navigationsbaum auf den Menüpunkt “Bewerber suchen“. Dort wählter die geforderten Auswahlkriterien aus und schaut sich die Details eines Bewerbersin der Ergebnisliste an. (1 Min.).

4. Die Testperson klickt auf den Menüpunkt “Firmen Daten“. Sie hat gedacht, dassder Aufbau der Firmenversion äquivalent zu der Studentenversion ist. Nach einigenVersuchen und einem Hinweis vom Testleiter findet er den richtigen Menüpunktund erledigt die Aufgabe. (3Min.).

5. Bei dieser Aufgabe kann sich die Testperson problemlos ausloggen und als neueFirma durch das Nutzen der linken Navigation wieder einloggen. Er klickt in derSitemap auf den Menüpunkt “Unsere Angebote“. Ohne Probleme kann er die An-gebote der eigenen Firma angezeigt bekommen und das verfallende Angebot durchdie rote Markierung schnell erkennen und verlängern (1:15 Min.).

106

Page 107: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Ergebnisse der Nachbereitung

Allgemein ist der Testkandidat mit Seite gut zu Recht gekommen. Das Erledigen derAufgaben ist einfach gewesen. Die Schwierigkeit hat darin gelegen, das zu veränderndeAngebot zu finden.

Verbesserungsvorschläge aus Sicht des Probanden

Der Menüpunkt “Für Firmen“ sollte dauerhaft fett geschrieben sein. Die Bezeichnung“Unsere Angebote“ sollte “Ihre Angebote“ lauten.

Teilnehmer 2: Firma - Avensis GmbH

1. Der Proband hat sofort den Menüpunkt “Firma registrieren“ im linken Navigations-baum betätigt, um sich als Firma zu registrieren. Beide Schritte der Registrierungbearbeitet er zügig. Die Registrierung wird somit sehr schnell bearbeitet (1:40Min.).

2. Der Proband klickt im inken Navigationsbaum auf den Menüpunkt “Angebot auf-geben“, um ein Angebot aufzugeben. Dort wählt er die für das Angebot passendenKriterien aus und lädt eine pdf-Datei unkompliziert hoch. Das Aufgeben einesAngebots konnte er somit zügig erstellen (50 Sek.).

3. Bei der nächsten Aufgabe soll der Proband einen Bewerber suchen. Er klickt imlinken Navigationsbaum rasch auf den Menüpunkt “Bewerber suchen“. Dort wählter ohne die Aufgabenstellung ausführlich zu lesen ein paar Auswahlkriterien aus.Allerdings erhält er mehrmals keine passenden Ergebnisse. Daraufhin gibt ihm derTestleiter einen Hinweis, die Aufgabenstellung ausführlich zu lesen und kurz darauffindet er mehrere Bewerber (2:00 Min.).

4. Die Testperson klickt im linken Navigationsbaum auf den Menüpunkt “UnsereAngebote“, um den Titel des Angebots zu ändern. Dies gelingt der Testpersonzügig. (30 Sek.).

5. Bei dieser Aufgabe kann sich die Testperson ohne weiteres ausloggen und als neueFirma einloggen. Sie bekommt eine Liste von mehreren Angeboten und ihr fälltsofort das Angebot auf, das verfallen ist. Anschließend verlängert sie es erfolgreich(30 Sek.).

107

Page 108: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Ergebnisse der Nachbereitung

Der Gesamteindruck der Seite wurde als sehr gut empfunden. Bei Aufgabe 5 waren dieverfallenden Angebote sehr gut zu erkennen.

Verbesserungsvorschläge aus Sicht des Probanden

Bei der dritten Aufgabe “Bewerber suchen“ war der Begriff “Sonstige Branchen“ verwir-rend. Der Testkandidat nahm an, dass hiermit Branchen gemeint waren, die nicht in derAuswahlliste vorkamen. Er gab den Vorschlag den Punkt in “Alle Branchen“ umzube-nennen.

Teilnehmer 3: Firma - Bosch GmbH

1. Nach sehr kurzer Orientierung auf der Seite klickt der Proband auf den Menüpunkt“Student registrieren“ in der oberen Navigation. Er liest die Meldung zum erstenSchritt der Registrierung durch und ruft seine Emails ab, um den zweiten Schrittder Registrierung abzuschließen. Er füllt die Pflichtfelder sorgfältig aus, somit wirddie Registrierung erfolgreich abgeschlossen (2:50 Min.).

2. Der Proband klickt auf der Sitemap auf den Menüpunkt “Angebot aufgeben“, einAngebot aufzugeben. Dort wählt er die für das Angebot passenden Kriterien ausund lädt eine pdf-Datei unkompliziert hoch. Das Aufgeben eines Angebots konnteer somit zügig machen (2:00 Min.).

3. Bei der nächsten Aufgabe soll der Proband einen Bewerber suchen. Er klickt raschauf den Menüpunkt “Bewerber suchen“ in den linken Navigationsbaum. Er gibt diezu geforderten Auswahlkriterien ein und findet mehrere Bewerber (2:40 Min.).

4. Die Testperson klickt auf den Menüpunkt “Unsere Angebote“ im oberen Naviga-tionsbaum, um den Titel des Angebots zu verlängern, diese Aufgabe wird sehrschnell gelöst (1:20Min.).

5. Bei dieser Aufgabe konnte sich die Testperson gut ausloggen und als neue Firmaeinloggen. Er konnte problemlos die Angebote der eigenen Firma anzeigen be-kommen. In der Aufgabe sollte er ein verfallendes Angebot verlängern, doch diesewaren nicht verfallen, somit war die Aufgabe erledigt. (1:10Min.).

108

Page 109: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Teilnehmer 4: Firma - IBM

1. Der Proband klickt auf den Menüpunkt “Firma registrieren“ im oberen Naviga-tionsmenü. Er liest die Meldung zum ersten Schritt der Registrierung durch undruft seine Emails ab, um den zweiten Schritt der Registrierung abzuschließen. Erfüllt die Pflichtfelder sorgfältig aus, somit wird die Registrierung erfolgreich abge-schlossen (2:00 Min.).

2. Der Proband klickt auf der Sitemap auf den Menüpunkt “Angebot aufgeben“, einAngebot aufzugeben. Dort wählt er die für das Angebot passenden Kriterien ausund lädt eine pdf-Datei unkompliziert hoch. Das Aufgeben eines Angebots konnteer somit zügig bearbeiten (1:50 Min.).

3. Bei der nächsten Aufgabe soll der Proband einen Bewerber suchen. Er klickt raschauf den Menüpunkt “Bewerber suchen“ in den linken Navigationsbaum. Er gibt diezu geforderten Auswahlkriterien ein und findet mehrere Bewerber (1 Min.).

4. Die Testperson klickt auf den Menüpunkt “Unsere Angebote“ im linken Navigati-onsbaum, um den Titel des Angebots zu ändern, diese Aufgabe wird sehr schnellgelöst (30 Sek.).

5. Bei dieser Aufgabe konnte sich die Testperson gut ausloggen und als neue Firmadurch das Nutzen der oberen Navigation einloggen. Er klickt auf “Unsere Angebote“auf der Sitemap. Problemlos konnte er die Angebote der eigenen Firma anzeigenbekommen und das verfallende Angebot verlängern (1:30 Min.).

Ergebnisse der Nachbereitung

• größtenteils recht intuitiv

• Angebot aufgeben sehr einfach, wobei die Hilfestellung nicht im ersten Momentwahrgenommen und später als sinnvoll empfunden

• Empfand es Intuitiver als Studentenversion

Verbesserungsvorschläge aus Sicht des Probanden

• Menüpunkt Ausloggen: Entweder als letzter Eintrag im Navigationsbaum oderoben rechts

109

Page 110: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Teilnehmer 5: Firma 5 Ortim

1. Die Testperson klickt auf den Menüpunkt “Firma registrieren“ in der oberen Menü-leiste. Nachdem er seine Emails abgeruft hat und komplett durchgelesen hat, hat erdurch das Benutzen des mitgelieferten Links den zweiten Schritt der Registrierungerfolgreich abgeschlossen (2:00 Min.).

2. Der Proband klickt auf den Menüpunkt “Angebot aufgeben“ im linken Navigati-onsbaum. Dort wählt er die für das Angebot passenden Kriterien aus und lädt einepdf-Datei unkompliziert hoch. Das Aufgeben eines Angebots konnte er somit zügigbearbeiten (1:30 Min.).

3. Bei der nächsten Aufgabe soll der Proband einen Bewerber suchen. Er klickt raschauf den Menüpunkt “Bewerber suchen“ in den linken Navigationsbaum. Er gibt diezu geforderten Auswahlkriterien ein und schaut sich die Details eines Bewerbersin der Ergebnisliste an. (1:30 Min.).

4. Die Testperson klickt auf den Menüpunkt “Firmen Daten“, sie dachte dass es äqui-valent zu der Studentenversion wäre. Nach kurzer Zeit sucht er dann im oberenMenü den richtigen Menüpunkt. Dies gelingt ihn auch ganz schnell und löst so dieAufgabe (50 Sek.).

5. Bei dieser Aufgabe konnte sich die Testperson gut ausloggen und als neue Firmadurch das Nutzen der oberen Navigation einloggen. Er klickt auf “Unsere Angebote“in der oberen Navigation. Mühelos konnte er die Angebote der eigenen Firmaanzeigen bekommen und das verfallende Angebot schnell erkennen und verlängern(1:40 Min.).

Ergebnisse der Nachbereitung

• Layout passt sehr gut zum HAW-Layout

• Angebot aufgeben: er konnte recht einfach ein Angebot aufgeben, das Aufgebeneines Angebots war detailliert genug, dass man das Angebot gut beschreiben konnte

• Kontaktdaten des Bewerber waren sehr gut aufgelistet und groß genug

110

Page 111: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Teilnehmer 6: Firma - Samsung

1. Nach sehr kurzer Orientierung auf der Seite klickt der Proband auf den Menüpunkt“Student registrieren“ in der oberen Navigation. Er liest die Meldung zum erstenSchritt der Registrierung durch und ruft seine Emails ab, um den zweiten Schrittder Registrierung abzuschließen. Er füllt die Pflichtfelder sorgfältig aus, somit wirddie Registrierung erfolgreich abgeschlossen (2:50 Min.).

2. Info: Testkandidat hat mit Aufgabe 3 weitergemacht. Er klickt rasch auf denMenüpunkt “Bewerber suchen“ in den linken Navigationsbaum. Er gibt die zugeforderten Auswahlkriterien ein und findet einen Bewerber. Bei den Suchbegriff“java-kenntnisse“ gibt er lediglich java mit einem * ein. Dies wird vom Systemangeboten. (1:30 Min.).

3. Der Proband klickt auf den Menüpunkt “Angebot aufgeben“, um ein Angebot auf-zugeben. Dort wählt er die für das Angebot passenden Kriterien aus und lädt einepdf-Datei unkompliziert hoch. Das Aufgeben eines Angebots konnte er somit zügigerledigen (1:00 Min.).

4. Da noch das aktuelle aufgegebene Angebot offen war, konnte er dort sofort denTitel des Angebots mühelos ändern (40 Sek.).

5. Bei dieser Aufgabe konnte sich die Testperson gut ausloggen. Das Einloggen alsneue Firma wurde durch mehrmalige falsche Eingabe des Passworts verzögert.Nach der erfolgreichen Anmeldung konnte die Testperson im Sitemap problemlosauf den Menüpunkt “Unsere Angebote“ klicken. Nachdem er die Angebote aufge-rufen hat, las er den Hinweis und konnte somit das verfallende Angebot verlängern(2 Min.).

Ergebnisse der Nachbereitung

• Aufgabenprobleme sind aufgetaucht, da der Proband zu schnell war.

• Titel des Angebots ändern war sehr leicht zu finden

• Verfallendes Angebot sehr leicht zu verlängern, da es rot war und es einen Hinweis(Beschreibung) gab

Verbesserungsvorschläge Sicht des Probanden)

“Bewerber suchen“, dort war der Begriff “Sonstige Branchen“ in der Rubrik Brancheverwirrend. Besser wäre es ihn “Alle Branchen“ zu benennen.

111

Page 112: pdf, ca. 1,74 MB

5.5. USABILITYTEST

Teilnehmer 7: Firma 7 Signal Iduna

1. Der Proband klickt auf den Menüpunkt “Firma registrieren“ im linken Navigations-baum. Nachdem er seine Emails abruft, um den zweiten Schritt der Registrierungabzuschließen, füllt er die Pflichtfelder sorgfältig aus, dabei wählt er ein Passwortder Länge 2, doch dieses wird vom System gewarnt, dass er ein Passwort mit ei-ner Mindestlänge von 6 Zeichen wählen muss. Der Cursor landet automatisch aufdem Passwortfeld. Der Testkandidat gibt somit ohne weitere Mausbewegungen einneues Passwort ein. Die Registrierung ist erfolgreich abgeschlossen (3:00 Min.).

2. Bei der nächsten Aufgabe soll der Proband einen Bewerber suchen. Er klickt raschauf den Menüpunkt “Bewerber suchen“ in den linken Navigationsbaum. Er gibt diezu geforderten Auswahlkriterien ein, wobei er bei den Begriff “Sonstige Branchen“seine Schwierigkeiten hatte. Er konnte nicht richtig zuordnen, dass es die AuswahlSonstige Branchen die Branchen-Einschränkung ausfällt. (2 Min.).

3. Die Testperson klickt auf den Menüpunkt “Firmen Daten“, wie es bereits bei derStudentenversion kannte. Dort konnte er aber die gespeicherten Angebote nichtfinden. Nach kurzer Verzögerung findet er im linken Navigationsbaum den Menü-punkt “Unsere Angebote“ und ändert dort den Titel des Angebots (1 Min.).

Ergebnisse der Nachbereitung

• Verfalldatum für Angebot erstellen, fand er überflüssig. Angebote sollte ewig gültigsein

• Insgesamt ist die Seite brauchbar. Er ist eine Person, die auf Anhieb nicht allessofort findet, aber auf dieser Seite konnte er sich zurecht finden

Verbesserungsvorschläge Sicht des Probanden

• Sonstige Branchen sollte Alle Branchen heißen.

112

Page 113: pdf, ca. 1,74 MB

5.6. KONSEQUENZEN AUS DEN TESTERGEBNISSEN

5.6 Konsequenzen aus den Testergebnissen

5.6.1 Zusammenfassung der Testergebnisse

Die Usability- Tests sind sehr ähnlich ausgefallen. Solch ein Testergebnis zeigt, dass dieTestergebnisse nicht zufällig, sondern auf Basis des tatsächlichen Aufbaus und Funkti-onsweise der Jobbörse beruht.

Benutzbarkeit

Ein einstimmiges Ergebnis über die Handhabbarkeit der Webseite ist positiv ausgefallen.Durch das Konzept konzentrierte Vorgehensweise ist die Webseite beim Testkandidatenals einfach und übersichtlich empfunden worden. Die Studenten konnten die Aufgabenzum größten Teil mühelos erledigen. Die Bereitstellung von verschiedenen Navigations-arten (Navigationsbaum und horizontales Menü) haben gezeigt, dass diese nicht von denTestpersonen als redundant, sondern als weitere Erleichterung empfunden wurden. DieTestkandidaten haben beide Menüs in unterschiedlichen Kontext willkürlich genutzt.

Erwartungskonformität

Die Umsetzung der Funktionalität wurde mit der Betrachtung von der Benutzererwar-tung implementiert. Dies hat bei den Probanden den Widererkennungseffekt und Intui-tivität ausgelöst. Die Testkandidaten konnten somit sofort die Anforderungen der Seiteerkennen.

Layout

Das sterile Design führt zu einem sicheren Handhabungsgefühl. Dies bedeutet, dass derTestkandidat ohne sich von der Seite verwirren zu lassen, die Menüpunkte sofort gefun-den hat. Durch den Einsatz der blauen Pastellfarbe ist eine kontrastreiche Umgebunggegeben. Der Einsatz der Warnfarbe rot bei den verfallenden Angeboten bestätigt dieabgeleitete Regel für den Farbeneinsatz. Die Studenten nahmen solche Angebote ohneden Hilfstext lesen zu müssen, als abgelaufen wahr.

Hilfsmittel

Die Hilfstexte zeigten ihre positive Wirkung beim Testkandidaten nach genauerer Be-trachtung. Die Probanden konnten nach Anweisung dieser Hilfstexte bzw. durch kurzeBeispiele ihre Aufgaben effizient erledigen. Die Trennung der einzelnen Arbeitsschrit-te in detaillierte Schritte mit ausreichender Erklärung erleichterte das Erledigen diesesArbeitsschrittes.

113

Page 114: pdf, ca. 1,74 MB

5.6. KONSEQUENZEN AUS DEN TESTERGEBNISSEN

5.6.2 Verbesserungsvorschläge

Aus den Usability-Tests ergeben sich folgende Verbesserungsvorschläge:

• Die Bezeichnung des Begriffs “Sonstige Branchen“ hat beim Testkandidat für Ver-wirrung gesorgt. Deshalb sollte dieser auf “Alle Branche“ umbenannt werden.

• Der Menüpunkt Ausloggen wurde als letzter Eintrag im Navigationsbaum oderoben rechts erwartet. Diese Menüpunkt sollte umplatziert werden.

• Die Bezeichnung des Menüpunkts “Unsere Angebote“ war nicht eindeutig genug.Die Testkandidaten konnten nicht richtig zu ordnen, was sich hinter diesem Menü-punkt verbirgt. Besser wäre “Ihre Inserate“.

• Die Platzierung der bereits gespeicherten Jobsuche wurde nicht in den Menüpunkt“Persönliche Daten“ erwartet, somit hatten die meisten Testpersonen ihre Schwie-rigkeiten mit dem Widerfinden ihrer bereits gestellten Jobsuche.Die Autoren habendiese Platzierung mit der Absicht Wiederfindbarkeit zu testen bei der Firma undStudent unterschiedlich aufgestellt. Der Test zeigte, dass die Platzierung als extraMenüpunkt erwartet wurde.

• Die AGBs/Impressum sollten zusätzlich in jede Fußzeile einer Seite vorkommen

• Es sollten die zuletzt erstellten Angebote auf die erste Seite für den Benutzerbereitgestellt sein.

• Es sollte die Funktion “Liste aller Firmen“ auch für Firmen möglich sein. DieFirmen sollen über andere Firmen und deren Angebote informiert werden können.Das soll das Ansehen der Webseite bei den Firmen bestätigen.

• Als Rechtsgrundlage müssen die Studenten das Einverständnis für das Bereiststel-len ihrer Kontaktdaten für die Firmen bestätigen.

• Es muss die Möglichkeit geben, das der Student seine Kontaktdaten anonym, öf-fentlich oder für ausgewählte Firmen markiert.

• Der Loginname sollte durch Emailadresse ersetzt werden, somit soll der Benutzer-name eindeutig werden. Als weiterer Vorschlag ist die Vereinheitlichung des Loginsfür die Firma und den Studenten. Demnach soll es nur noch einen Menüpunkt “Lo-gin“ geben.

• Das Einführen von Zeitstempel sollte das Überschreiben von Eingabedaten durchmehrmaliges Anmelden am System vermeiden.

114

Page 115: pdf, ca. 1,74 MB

6 Zusammenfassung und Ausblick

6.1 Zusammenfassung

In diesem Kapitel fassen die Autoren die Ergebnisse der Bachelorarbeit zusammen. Imabschließenden Ausblick wird die Weiterentwicklung bezüglich des Regelsystems und desPrototyps behandelt. Demnach wird das Regelsystem mit zusätzlichen Regeln, die vonden Verbesserungsvorschlägen entnommen worden sind, erweitert. Die Weiterentwick-lung des Prototyps bis zum Erreichen des produktiven Einsatzes wird durch Erweiterungder Methoden und Optionen erreicht.

Anmerkung der Autoren

Nach Aufzählung der von den Testkandidaten vorgeschlagenen Verbesserungen, nehmendie Autoren folgende Stellung ein:

Es wurde gewünscht, dass der Ausdruck “Sonstige Branchen“ durch den Ausdruck “Al-le Branchen“ ersetzt wird. Grund hierfür ist eine mögliche Verwirrung des Benutzers,da der Ausdruck “Sonstige Branchen“ eine andere Bedeutung als von den Autoren ge-wünscht hat. “Alle Branchen“ stimmt hingegen mit der von den Autoren gewünschtenBedeutung überein. Daher finden die Autoren, dass dieser Einwand berechtigt ist, sodass dieser Vorschlag als Verbesserung für den Prototyp übernommen wird. Es ist fest-zuhalten, dass dieser Einwand nicht das Resultat des Regelsystems zu sehen ist. DasRegelsystem verlangt eine eindeutige und aussagekräftige Beschriftung. Daher würdedas Regelsystem den Ausdruck “Alle Branchen“ verlangen, da der Ausdruck “Sonsti-ge Branchen“ mehrdeutig wäre (z. B. könnten damit alle Branchen mit Ausnahme derkonkret genannten gemeint sein). Dieser Mangel ist daher auf das nicht befolgen desRegelsystems zurückzuführen.

Der Unter-Menüpunkt “Ausloggen“ sollte als letzter Eintrag in den Menüpunkt “für denStudent“ platziert werden. Dieser Vorschlag ist bei Betrachtung der Literatur berech-tigt. In dieser wird eine chronologische Platzierung der Menüpunkte empfohlen, wobeidie Vertretung dieser Meinung sehr umstritten ist. Der Grund dafür ist, dass jede Web-seite unterschiedliche Eigenschaften aufweist. Diese Eigenschaften können sich bei derPlatzierungsentscheidung auf der Menüleiste auswirken. Beispielsweise kann auch ar-

115

Page 116: pdf, ca. 1,74 MB

6.1. ZUSAMMENFASSUNG

gumentiert werden, dass der letzte Eintrag immer der Eintrag ist, der am wenigstenbesucht wird. Somit kann diese Wunschäußerung nicht unbedingt bei jeder Webseite zurVerbesserung der Benutzbarkeit führen. Die Autoren sind nach Berücksichtigung unter-schiedlicher Meinungen zu den Punkt gekommen, dass diese Entscheidung sehr variabelist. Somit kann dieser Punkt nicht in das Regelsystem aufgenommen werden.

Die Autoren sehen den Verbesserungsvorschlag für den Menüpunkt “Unsere Angebote“als berechtigt an. Wie in der Literatur ausgedrückt, sind Bezeichnungen relativ, d.h.es muss versucht werden, wie im Regelsystem beschrieben, die aussagekräftigste Be-zeichnung für Menüpunkte zu wählen. Somit kann immer mit einem besseren Vorschlagfür eine Benennung gerechnet werden. Der Vorschlag war “Unsere Angebote“ in “IhreInserate“ zu verbessern. Die Autoren hingegen, möchten den Verbesserungsvorschlag“verbessern“, und ändern diesen Vorschlag in “Eigene Angebote“ um. Diese Änderungwird in die Verbesserung des Prototyps übernommen.

Der Wunsch, die gespeicherte Jobsuche unter einem Menüpunkt in der Navigationsleistezu finden, ist völlig berechtigt. Wie bereits erklärt, existieren zwei Menüstrukturen, dieder Studenten und die der Firmen. Grund hierfür ist, dass die Autoren durch Tests her-ausfinden wollten, welche Menüstruktur vorteilhafter ist. Da die Umsetzung des genann-ten Wunsches, einer Angleichung der Studentenmenüstruktur an die Firmenmenüstruk-tur gleichkommt, lässt sich sagen, dass das Resultat dieses Tests die Firmenmenüstrukturbegünstigt. Eine Änderung dieser Menüstruktur liegt daher im Willen der Autoren.

Dieser Test berührt die vorhandenen Regeln im Regelsystem nicht. Er kann aber indas Regelsystem neu aufgenommen werden. Zum beispiel könnte dies “Platzierung derElemente“ als Erweiterung des Regelsystems heißen. Somit soll die neue Regel folgen-dermaßen lauten:

Der Webentwickler sollte die Elemente, bei dem die Widerfindbarkeit unsicher sein kann,unterschiedlich platzieren und erst nach umfassenden Tests auf Benutzbarkeit sich füreine Platzierung dieser Elemente entscheiden.

Der Login-Name sollte durch die Emailadresse ersetzt werden. Diese Verbesserung emp-finden die Autoren als sehr interessant und positiv. Somit bleibt der zu verwendete Be-nutzername stets eindeutig. Dieser Wunsch hat keine Auswirkungen auf die bestehendenRegeln, sondern erweitert das Regelwerk um folgende Regel:

Der Webentwickler sollte redundante Menüpunkte, die zu einer Verwirrung führen kön-nen, vermeiden.

Die folgenden Wunschäußerungen werden zusammengefasst. Sicherlich sind einige dieserVorschläge sehr konstruktiv und werden im Kapitel Ausblick zum Fortschritt (Verbesse-rung) des Prototyps verwendet, dennoch tragen diese Anregungen nicht unbedingt zurSteigerung der Benutzbarkeit bei. Somit werden diese auch nicht zur Erweiterung oder

116

Page 117: pdf, ca. 1,74 MB

6.2. AUSBLICK

Verbesserung des Regelsystems beitragen.

• Es sollten die zuletzt erstellten Angebote auf die erste Seite für den Benutzerbereitgestellt werden.

• Es sollte die Funktion „Liste aller Firmen“ auch für Firmen möglich sein.

• Als Rechtsgrundlage müssen die Studenten das Einverständnis für die Bereiststel-len ihrer Kontaktdaten für die Firmen bestätigen.

• Es muss die Möglichkeit geben, das der Student seine Kontaktdaten als anonym,öffentlich oder für ausgewählte Firmen markiert.

• Das Einführen von Zeitstempel sollte das Überschreiben von Eingabedaten durchmehrmaliges Anmelden am System vermeiden.

6.2 Ausblick

6.2.1 Stand des Regelsystems

Das von den Autoren erstellte Regelsystem ist sicherlich ein erster Entwurf, der 80 %der Mindestanforderung jedes Benutzers in Bezug auf die Gebrauchstauglichkeit um-fasst. Durch dynamische Erweiterbarfähigkeit des Regelsystems können neue Regelndas Regelsystem für eine bestmögliche Gebrauchstauglichkeit für jeden Benutzer opti-mieren. Des Weiteren wird sich die Eigenschaft der Erweiterbarkeit des Regelsystemsauf die bevorstehende Technologie anpassen müssen. Diese Erweiterungen können durchFeedbacks, die Erfahrungen sowie die Anregungen des Anwenders der das Regelsystembenutzt geschehen.

Bei Usability-Tests des Prototyps stoßen die Autoren auf neue Erkenntnisse, die durchWünsche bzw. Erwartungen der Benutzer hervorgehoben worden sind.

Regelerweiterung 1 (Erweiterung der Grundregel: Navigation):

Der Webentwickler sollte redundante Menüpunkte, die zu einer Verwirrung führen, ver-meiden.

117

Page 118: pdf, ca. 1,74 MB

6.2. AUSBLICK

Regelerweiterung 2 (Erweiterung der Grundregel: Betaversion-Tests):

Der Webentwickler sollte die Elemente, bei dem die „Widerfindbarkeit“ unsicher seinkann, unterschiedlich platzieren und erst nach umfassenden Tests auf Benutzbarkeit sichfür eine Platzierung dieser Elemente entscheiden.

6.2.2 Stand des Prototyps

Verbesserung:

Der erstellte Prototyp von den Autoren hatte die Aufgabe das erstellte Regelsystem imBezug auf Benutzbarkeit zu testen. Ein effektiver Einsatz dieses Prototyps wird mit dennachstehenden Erweiterungen erzielt:

• Austausch des Eintrages “Sonstige Branchen“ in der Tabelle “Branche“ der Daten-bank durch den Begriff “Alle Branchen“

• Umbenennen des Untermenüpunktes “Unsere Angebote“ im Menüpunkt “Für Fir-men“ durch den Begriff “Eigene Angebote“

• Einführen des Untermenüpunktes “Eigene Jobsuche“ im Menüpunkt “Für Student“

• Deutliche Hervorhebung der Markierung der Pflichtfelder.

Erweiterung:

• Füllen der Menüpunkte Impressum, Kontakt und AGBs mit Inhalt.

• Bereitstellen der Funktion “Liste aller Firmen“ auch für Firmen.

• Einführen der Eigenschaft “Kontaktzugänglichkeit für die Studentenkontakte“ (derStudent hat die Möglichkeit zu entscheiden, ob seine Kontaktdaten anonym oderöffentlich behandelt werden sollen).

• Einführen der Abnahme der Studentenbestätigung bei der Veröffentlichung dereingestellten gespeicherten Jobsuche.

• Testen des Prototyps auf Funktionalität und Design in anderen Browsern undDurchführung eventueller Anpassungen

• Überprüfung des Prototyps auf eine mögliche Steigerung der Performance.

118

Page 119: pdf, ca. 1,74 MB

6.2. AUSBLICK

• Zusammenfügen der Unterpunkte “Studenten Login“ und “Firmen Login“ zu einemneuen Menüpunkt “Login“.

• Verwenden der Emailadresse als Login-Name.

• Automatisches Generieren von Passwort-Emails bei Passwortverlust.

• Einführen von Zugriffszeitstempel, zum Regulieren paralleler Zugriffe.

• Bereistellen von Agenten, die den Benutzer nach dem Aufgeben einer Jobsuche odereines Angebots von der Existenz solcher Treffer in der Datenbank informieren.

119

Page 120: pdf, ca. 1,74 MB

Glossar

Antwortzeit (Synonym: Rückantwortzeit): Antwortzeit bezeichnet die Zeitspanne zwischendem Absenden einer Eingabe und dem Anfang der darauffolgenden Antwort an einemBildschirm. DIN 66 233 Teil 1.

Bandbreite Die Bandbreite eines Internet-Providers sagt aus welche maximale Datenmengegleichzeitig durch seine Leitung passt.

Browser Englisch für “to browse = grasen, schmökern“. Software, die von Servern im Inter-net Informationen abruft und darstellt/zeigt.

Client Vernetztes Computersystem, das Dienstleistungen con Servern in Anspruch nimmt.

Cookie Cookie: Krümel, Keks; eine kleine Information, die von einem Web-Server beimClient (über den Browser) im Rechner / PC eingetragen wird, um diesen beispielsweiseimmer wieder klar identifizieren zu können. (Häufig bei Shops verwendet „wer hatgerade welchen Warenkorb“

CSS (cascading style sheet) Zusatzsprache zu HTML, die es ermöglicht, CSS Stilvorlagenfür HTML Befehle zu formulieren.

Download Englisch für „Herunterladen“. Typischer Vorgang, wenn man sich von einer Web-site sich eine Datei per Download-Link auf den lokalen PC überträgt. Gegenteil =Upload. Umgangangssprachlich auch "downloaden", „downgeloadet“ oder „gedown-loadet“

Flash Vereinfacht gesagt „animierte Grafikfilme mit Sound etc.“ Schwierig für Suchmaschi-nen und problematisch wenn es auf die Ladezeit ankommt. Flash funktioniert nicht mitallen Browsern, man benötigt ein sogenanntes Plug-in

Java-Applet Ein Applet ist ein kleines „unselbständiges“ Programm - geschrieben meist inder Programmiersprache Java, das beim Aufruf Aktionen wie „Animationen“, „Über-prüfung von Eingaben in Formularen“ usw.) übernimmt

MMI Mensch-Computer-Interaktion als Teilgebiet der Informatik beschäftigt sich mit derbenutzergerechten Gestaltung von interaktiven Systemen und ihren Mensch-Maschine-

120

Page 121: pdf, ca. 1,74 MB

Glossar

Schnittstellen. Dabei werden neben Erkenntnissen der Informatik auch solche aus derPsychologie, der Arbeitswissenschaft, der Kognitionswissenschaft, der Ergonomie, derSoziologie und dem Design herangezogen.

PlugIn Zusatzprogramme für Browser, um bei Internetseiten außer „normalem HTML“ auchandere ßchöne"Dinge zeigen zu können. Beispiel: Plugins für verschiedene Videoformate

Schnittstelle Eine Schnittstelle (englisch interface) ist ein Teil eines Systems, das demAustausch von Informationen als Spannungen, Energie oder Materie analog oder digitalmit anderen Systemen dient. Bei einer Schnittstelle werden digitale oder auch analogeDaten übergeben, z. B. vom Mikrofon an eine Soundkarte.

Screen-Reader Ein Screen-reader ist ein Programm, das Texte „vorliest“. Gerade für Seh-behinderte, Analphabeten etc. können damit auch Internetseiten verständlich werden.Wichtig barrierefrei programmieren! Alt-Texte verwenden!

Server Ein Server ist ein Computer in einem Netzwerk, der anderen Computern seine Da-teien zur Verfügung stellt (serviert). Server im und für das Internet sind sogenannteWebserver.

Stylesheet Style sheet ist die Erweiterung, um Webseiten-Layouts einfacher und effektiverzu erstellen. Dabei werden häufig benutzte Formatvorgaben sowie Schrifttypen undandere Eigenschaften nur noch einmal definieren. Das bedeutet, dass die Datenmengeeiner Webseite enorm reduziert wird, da diese Vorgaben nur einmal im Style sheetKlassen vorkommen.

Thumbnail engl. Daumennagel = Thumbnail. Bezeichnung für eine Mini-Grafik, die oftals Vorschaubild für eine größere Grafik oder Bild dient. Erst durch anklicken desThumpnail wird dann das größere Bild geladen. Gut geeignet für Übersichten vonBildern und Bildgalerien.

Usability Gebrauchstauglichkeit eines Systems, die sich zum Beispiel mit den AttributenEffektivität, Effizienz und Zufriedenheit des Benutzers mit dem System bewerten lassen

Workflow (engl.) Im Gegensatz zu einem Geschäftsprozess, der eine Folge von Aktivitätenmit dem Ziel einer Leistungserstellung beschreibt, ist ein Arbeitsablauf (engl. Work-flow) eine vordefinierte Abfolge von rechnergestützt ablaufenden Aktivitäten. Ein Ge-schäftsprozess wird durch ein IT-System unterstützt, mit notwendigen Daten versorgtund gemäß einer im System hinterlegten Vorgabe/Algorithmus abgewickelt.

121

Page 122: pdf, ca. 1,74 MB

Literaturverzeichnis

Webdesign & Web-ErgonomieBalzert, Heide, 2004, ISBN 3-937137-02-5

Barrierefreies Intra- und InternetEin Workshop der T-Systems Multimedia Solutions GmbH, Booklet

Grundlagen der Mensch-Computer-InteraktionMarkus Dahm, 2006, ISBN 3-8273-7175-9

Web-Usability; Günter Dehne, 2005;URL: http://www.gdehne.de/usability/content/usability-seitenaufbau.shtml Zugriffsda-tum: 11.10.05

AboutWebDesignAlexander Dilthey; 2000, „Formular-Gestaltung“URL: http://www.webdesign-referenz.de/designpraxis-formulare.shtml#5.6.2 Zugriffs-datum: 23.11.05

AboutWebDesignAlexander Dilthey; 2000, „Site-Strukturen und Navigation“URL: http://www.webdesign-referenz.de/designtheorie_site-strukturen.shtml#3.4.2.1Zugriffsdatum: 09.03.05

AboutWebDesignAlexander Dilthey; 2000, „Site-Strukturen“;URL: http://www.webdesign-refernz.de/designtheorie_site-strukturen_d.shtml Zu-griffsdatum: 09.03.05

AboutWebDesignAlexander Dilthey; 2000 „Textgestaltung“;URL: http://www.webdesign-referenz.de/designtheorie_fonts_d.shtml Zugriffsdatum:09.03.05

122

Page 123: pdf, ca. 1,74 MB

LITERATURVERZEICHNIS

E-Commerce-Center Handel2004, URL: http://www.ecc-handel.de/erkenntnisse/1041251952 Zugriffsdatum:05.03.05

Resourcen; Christian Felken, Ausgabe 15/2000URL: http://www.webmaster-resource.de/service/newsletter/archiv/20000528.php Zu-griffsdatum: 06.08.05

Europäisches Komitee für NormungErgonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten - Teil 10:Grundsätze der Dialoggestaltung. 1998

Europäisches Komitee für NormungErgonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten - Teil 11: An-forderungen an die Gebrauchstauglichkeit - Leitsätze. 1998

Website-KonzeptionJens Jacobsen: ISBN 3-8273-2147-6, 2004

User Centric DesignChristian Jung: SinnerShraderNeueInformatik, 2005

Warum CSS?Kaiser, Gerrit: Warum CSS?, 2004 URL http://www.style-sheets.de/guide/grundlagen/warum-css#standardZugriffsdatum: 07.06.2005

Gewohnheitstier Mensch, Lemme, Michelle, 2001

Gestaltungskriterien für Web UsabilityLudwig-Maximilians-Universität München URL: http://www.uni-muenchen.de/toolbox_iuvh/usability_guide/usab_gestaltung.html Zugriffsdatum:28.02.2005

Ten Usability HeuristicsNielsen, Jacob;1990, URL: http://www.useit.com/papers/heuristic/heuristic-list.html Zugriffsdatum:15.08.05

Usability EngineeringNielsen, Jakob ;San Diego: Academic Press, 1993, ISBN 1-12-518406-9

123

Page 124: pdf, ca. 1,74 MB

LITERATURVERZEICHNIS

Nielsen, Jakob: Designing Web Usability; München, 2001, ISBN 3-86150-466-9

BarrierefreiheitPraesentation Barrierefreiheit.pdfZugriffsdatum: 05.04.2006

Benutzerfreundlichkeit von WWW-basierten Navigationssystemen2005, Reinhard, URL: http://pamer.net/benutzerfreundlichkeit/kapitel-4-2.htmlZugriffsdatum: 11.10.05

Multimedia und ErgonomieDr. Joachim Schumacher; URL: http://www.multimedia-beratung.de/ergonomie/theorie/text/scannen.htm; Zugriffsdatum: 05.08.05

Qualität im WebSchweibenz, Werner & Thissen, Frank, Qualität im Web, Benutzerfreundliche Webseitendurch Usability Evaluation ,ISBN:3-540-41371-5, Springer Verlag, 2003

Statistisches Bundesamt: Soziale SicherungSven C. Kaumanns;URL: http://www.destatis.de/basis/d/solei/soleiq27.php;Zugriffsdatum:02.02.2006

Statistisches BundesamtSven C. Kaumanns;URL: http://www.destatis.de/presse/deutsch/pm2004/p1380530.htmZugriffsdatum:15.03.2005

Gewohnheitstier Mensch 2001

Institut für Ergonomie und UsabilityULR: http://www.usability.ch/D-Textonly/Usabi-T.htmZugriffsdatum: 12.02.2005

Dr. Web Magazin Sven LennartzDirk Metzmacher; 1997-2006; URL: http://www.drweb.de/usability/sitemaps.shtmlZugriffsdatum: 11.10.05

124

Page 125: pdf, ca. 1,74 MB

LITERATURVERZEICHNIS

Computer&Technik2005 Ausgabe: (30.4.2005) http://www.webhits.deZugriffsdatum: 01.05.05

125

Page 126: pdf, ca. 1,74 MB

A. Regelsammlung

Navigation (vgl. Kapitel 3.2.3)

„DO“:

Der Webentwickler muß verdeutlichen

• wo sich der Benutzer gerade befindet,

• welche Navigationsmöglichkeiten von einer Seite gegeben sind und

• welche Seiten bisher besucht worden sind.

„DON’T“:

Der Webentwickler darf nicht

• die Navigationsleiste rechts oder mittig platzieren,

• mehr als neun Äste unter einem Knoten im Navigationsbaum anordnen,

• mehr als drei Ebenen verwenden, um ein Ziel zu erreichen und

• veränderbare Begriffe als Menüpunkt verwenden.

Suchfunktion (vgl. Kapitel 3.2.5)

„DO“:

Der Webentwickler sollte

• die Suchfunktion im sichtbaren Bereich platzieren,

• eine Hilfsfunktion zur Bedienung der Suchfunktion bereit stellen,

126

Page 127: pdf, ca. 1,74 MB

A. Regelsammlung

• die Option zur Verfügung stellen, Suchergebnisse zu sortieren und

• bei einer ergebnislosen Suche für Alternativvorschläge zu sorgen.

„DON’T“:

Der Webentwickler darf nicht bei einer ergebnislosen Suche eine leere Seite anzeigen.

Hyperlinks (vgl. Kap.3.3.1)

„DO“:

Der Webentwickler sollte

• besuchte Hyperlinks farbig kennzeichnen,

• das Dateiformat und -größe anzeigen,

• Hyperlinks, die das gleiche Ziel haben, gleich benennen ,

• Hyperlinks aussagekräftig benennen und

• Tooltips verwenden, um weitere Informationen vor dem Anklicken des Hyperlinks fürden Benutzer bereitzustellen.

„DON’T“:

Der Webentwickler sollte nicht

• ünterstrichene Texte verwenden, die keine Hyperlinks sind,

• "die Ziele der verwendeten Hyperlinks entfernen und

• "Hyperlinks verwenden, die zu wiederholtem Besuch der vorherigen Seite führen.

Formular (vgl. Kap.3.3.2)

„DO“:

Der Webentwickler sollte

• das erste Feld im Formular bereits aktiviert haben,

127

Page 128: pdf, ca. 1,74 MB

A. Regelsammlung

• Pflichtfelder erkennbar machen,

• dafür Sorge tragen, dass beim Auftreten eines Fehlers eine exakte Fehlermeldung aus-geben wird,

• sicherstellen, dass der Benutzer beim erfolgreichen Abschicken eines Formulars eineRückmeldung vom System erhält,

• gewährleisten, dass beim Auftritt eines Fehlers die bisher eingegebenen Daten beibe-halten werden.

„DON’T“:

Der Webentwickler sollte nicht zu viele auszufüllende Felder auf einer einzigen Seite platzie-ren.

Textstruktur(vgl. Kap.3.3.3) „DO“:

Der Webentwickler sollte Texte

• in kurze Abschnitte gliedern,

• mit eindeutigen Überschriften versehen,

• nach Möglichkeit serife Schriften verwenden und

• bei denen spezielle Schriftarten verwendet worden sind, alternative Standardschriftartenanbieten.

„DON’T“

Der Webentwickler sollte keine zu breiten Textspalten verwenden.

Farben (vgl. Kap.3.3.4)

„DO“:

Der Webdesigner sollte

• kontrastreiche Farben nutzen und

• Pastellfarben verwenden, die angenehm für die Augen sind.

• internationale Farbedeutungen einsetzen (z.b. Rot für Fehler)

128

Page 129: pdf, ca. 1,74 MB

A. Regelsammlung

„DON’T“:

Der Webdesigner darf nicht

• Die Farbkombination rot/grün oder blau/violett einsetzen und

• einen schwarzen Hintergrund verwenden.

Scrollen (vgl. Kap.3.3.5)

„DON’T“:

Der Webentwickler sollte nicht

• die Webseite so gestalten, das horizontales Scrollen notwendig ist und

• das Scrollen in inhaltlose Bereiche führt.

Frames (vgl. Kap.3.3.6)

„DO“:

Der Webentwickler sollte

• Frames in Inline-Frames umwandeln,

• den Druckbefehl auf den Seiteninhalt lenken und

• das Abspeichern der URL in die Favoritenliste ermöglichen.

„DON’T“:

Der Webentwickler sollte grundsätzlich Frames vermeiden.

CSS (vgl. Kap.3.3.7)

„DO“:

Der Webdesigner sollte CSS einsetzen

• um das Design für die gesamte Webseite zu zentralisieren,

129

Page 130: pdf, ca. 1,74 MB

A. Regelsammlung

• um das Wechseln des Designs ohne eine Änderung des Inhalts zu ermöglichen und

• um somit die Fehlerquote beim Ändern des Inhalts zu minimieren.

Freiheit (vgl. Kap. 3.3.10)

“DONT“

Der Webentwickler sollte

• keine festen Wege vorschreiben,

• den Zurückbutton nicht manipulieren und

• den Benutzer nicht auf der Webseite gefangen halten

Bildschirmauflösung (vgl. Kap.3.4.1)

„DO“:

Der Webentwickler sollte

• entweder unterschiedliche Styles (CSS) für die dynamische Anpassung der Webseitefür die aktuelle Auflösung bereitstellen oder

• einen Hinweis für die Auflösung geben, die zur besten Darstellung der Seite führt.

Browser (vgl. Kap.3.4.3)

„DO“:

Der Webentwickler sollte

• die Webseite vor Veröffentlichung auf möglichst viele Browser auf korrekte Funktiona-lität testen und

• Hinweise für eventuelle Einschränkungen bei bestimmten Browsern geben.

130

Page 131: pdf, ca. 1,74 MB

A. Regelsammlung

Downloads

„DO“

Der Webentwickler sollte

• Downloadlinks mit Info zur Dateigröße sowie die dazu benötigte Downloadzeit in un-terschiedlichen Bandbreiten versehen,

• Angaben über das Format der Downloaddatei, sowie bei bekannten Formaten einenIcon des Herstellers bereitstellen und

• bei Formaten, die besondere Programme benötigen, entsprechende Links zum Herstellerzur Verfügung stellen.

PlugIns (vgl. Kap.3.4.4)

„DO“:

Der Webentwickler sollte

• Alternativen anbieten, die bei Fehlen des Plugins, die Webseite vollständig darstellt und

• Links zum Download für benötigte Plugins für die optimale Darstellung bereitstellen.

Multimedia (vgl. Kap. 3.5)

„DO“:

Der Webentwickler sollte

• Multimedia-Elemente regulierbar / abschaltbar machen und

• große Multimedia-Elemente auf der Webseite in kleine Sequenzen aufteilen.

Bilder und Animationen (vgl. Kap. 3.5.1)

„DO“:

Der Webentwickler sollte

131

Page 132: pdf, ca. 1,74 MB

A. Regelsammlung

• Alt-Tags anbieten,

• große Bilder in mehrere Schichten laden und

• Thumbnails als Vorschau für große Bilder bereitstellen.

„DON’T“:

Der Webentwickler sollte keine Texte in Form von Bildern darstellen.

Hilfefunktionen und Onlinedokumentation (Kap. 3.6.2)

“DO“

Der Webentwickler sollte

• FAQs für verschiedene Benutzergruppen zur Verfügung stellen,

• Szenarien zur Erklärung eines Arbeitsablaufs bei Notwendigkeit bereitstellen und

• Online-Doku / Glossar anbieten.

Kontakt / Impressum (Kap. 3.6.3)

„DO“

Der Webentwickler sollte

• Kontaktmöglichkeiten an den Webseiteninhaber sowie Impressum auf jeder Seite an-bieten.

Betaversion-Tests

„DO“

Der Webentwickler sollte

• erst nach fehlerfreie Betaversionstest die Webseite veröffentlichen,

• die Webseite von den zu erwartenden Benutzergruppen auf Benutzbarkeit und Intuiti-vität testen und

• die Webseite auf Rechtschreibfehler überprüfen lassen.

132

Page 133: pdf, ca. 1,74 MB

B. Inhalt der CD

Die Verzeichnisse der mitgelieferten CD enthalten folgende Ressourcen:

Bachelorarbeit: dieses Dokument Bachelorarbeit.pdf

Literatur: in der Bachelorarbeit erwähnte Literatur

Usability-Filme : von der HAW zur Verfügung gestellte Usability-Filme

Usability-Filme : im Usability-Labor getestete Studenten an den Prototypen

Quellcode: der Quellcode zum Prototyp

Software: verwendete Software

133

Page 134: pdf, ca. 1,74 MB

C. Screenshots des entwickeltenPrototyps

Abbildung 6.1: Student neu registrieren

Abbildung 6.2: Studenten Login

134

Page 135: pdf, ca. 1,74 MB

C. Screenshots des entwickelten Prototyps

Abbildung 6.3: Student: Sitemap

Abbildung 6.4: Student: Angebot suchen

135

Page 136: pdf, ca. 1,74 MB

C. Screenshots des entwickelten Prototyps

Abbildung 6.5: Student: Jobsuche aufgeben

Abbildung 6.6: Student: Liste aller Firmen

136

Page 137: pdf, ca. 1,74 MB

C. Screenshots des entwickelten Prototyps

Abbildung 6.7: Student: Persönliche Daten

Abbildung 6.8: Firma: Bewerber suchen

137

Page 138: pdf, ca. 1,74 MB

C. Screenshots des entwickelten Prototyps

Abbildung 6.9: Firma: Angebot aufgeben

Abbildung 6.10: Firma: Unsere Angebote

138