__usability[___  
Grundsätzliches Konstruktion einer WebSite Informations Architektur Information organisieren Organisation von WebSites
Navigations Systeme von Usern lernen 10 Usability Erkenntnisse    
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Mensch Maschine Interface  Unterschied WebSite-WebPage Architektur einer WebSite    
||||||||||||||||||||||||
top
+Mensch Maschine Schnittstelle

Interface Design als Schnittstelle zwischen Mensch und Maschine.
Kommunikation zwischen dem Bediener und seiner Anlage.
Durch das Verständnis des menschlichen Verhaltens sollen bessere Mensch-Maschine-Systeme entwickelt werden. Die Charakteristik menschlicher Wahrnehmung und Erfahrung sowie Lern- und Problemlösefähigkeiten wird in die Entwicklung neuer interaktiver Systeme integriert.
Gestaltung von Bildschirmoberflächen, Navigations Elemente im Auto, das Design muss die Gegenstände erklären, es muss sicherstellen, dass Gegenstände kommunizieren können. Das Design interpretiert neue Gebrauchsmuster und Gebrauchsnormen.
Hardware: Maus, Keyboard
Software: Graphische Benutzeroberflächen

+Unterschied zwischen WebSite und WebPage:

[engl. site: Lage, Örtlichkeit, Gelände]
Eine WebPage ist eine “stand alone” Seite, also nur ein Teil einer WebSite. Die WebSite besteht aus allen dazugehörigen WebPages, deren Navigation und Verlinkung.

||||||||||||||||||||||||
top
+Architektur einer WebSite:

Jede Site hat eine unterschiedliche Architektur, so wie zum Beispiel ein Restaurant eine andere Architektur hat als die Umgebung in der man arbeitet. Es gibt Architekturen die verärgern, weil die Räume falsch konzipiert sind. Architekten planen solche Häuser oder Räumlichkeiten weil sie selbst nicht darin wohnen oder arbeiten müssen.
Der beste WebSite Produzent ein erfahrener Konsument!

Eine WebSite kann man als userfreundlich bezeichnen, wenn sie folgende Kriterien erfüllt:
-Erwartungskonformität: Was darauf steht ist auch drinnen. Die Bezeichnungen der Bereiche (labeling) ist so gewählt, dass sie für den User verständlich ist und den von ihm gewünschten Inhalt ausgibt.

-Selbsterklärungsfähigkeit: Die Bedienung erklärt sich von selbst.

-Bedienungseffizienz: Die WebSite kann sinnvoll genutzt werden.

-Fehlertoleranz: Fehlbedienungen werden weitgehend verhindert. Falls sie doch, auftreten helfen verständliche Fehlermeldungen sie rasch zu beheben.

-Übersichtlichkeit: Es ist leicht sich auf der Site zu orientieren. Der momentane Standort des Users und seine weiteren Handlungsmöglichkeiten innerhalb der Site werden angezeigt.

||||||||||||||||||||||||
top
Konstruktion einer WebSite (+brainstorming--2 Fragen)

                                                           |Brainstorming|   |Überlegungen |

Zuerst sollte man sich (am besten mit einigen Freunden oder Kollegen) zwei grundsätzliche Fragen stellen:
a: Was hasst man am Internet?----Fehler bei der Konstruktion und beim Design----
b: Was mag man am Internet?

ad a)
man findet nicht was man sucht
-kein Index, kein Inhaltsverzeichnis, keine Sitemap, keine Suchmöglichkeiten
-Bezeichnungen die für die gesuchte Information verwendet werden sind unklar
-schlechtes Navigations-System (Navigation ist einmal im Footer, einmal im Header, also nie am gleichen Platz)
-drastisch wechselnde Farbsysteme die von Page zu Page innerhalb der gleichen Site wechseln


schlechtes graphisches Design und Layout
-riesige Bilder (Ladezeiten)
-eine Menge Text, Bilder und Links auf einer Page (macht es schwerer sich zurechtzufinden-leere Flächen sind wichtig)
-lange Textseiten die scrollen erforderlich machen um zu wesentlichen Punkten zu gelangen
-lange Textseiten ohne eine Pause für die Augen (Bilder, Graphiken)
-schreiende Farbe (Augen beginnen nach einer Zeit zu brennen)
-Verwendung der gleichen Farbe für Links und bereits besuchte Links

||||||||||||||||||||||||
top

grundlos eingebundene Geräusche und Zähler

unangebrachte Sprache (nicht der Zielgruppe entsprechend)

“under construction” Animated Gifs oder Ähnliches (eine gute Site ist nie fertig)

broken Links (Error Meldungen)

der Inhalt ist nicht mehr zeitgemäß

ad b)
Ästhetik
-eindeutige Identität der Site
-verständliches Navigations System
-gebräuchliche Anwendungen (keine sonderbaren, nicht gängige Plug ins oder Player)
-das Seiten Layout und die Graphischen Elemente bilden eine Einheit

Nutzen
-die Site funktioniert (speziell Suchmaschinen, GameSites,...)
-die Site ist up to date (News, Events,...)

“Findability” (die Site und deren Inhalt wird gefunden)
-die Site wird von Suchmaschinen gefunden
-Sitemap ist vorhanden
-eine gute Informations Architektur bei Sites mit großem Umfang an Inhalten
-die Navigation ist eindeutig
-der User wird zu seiner Information geführt, ohne unwichtiger Info zu konfrontieren

Persönlichkeit des Users
-User sind nicht alle gleich, deshalb werden Sites oft für verschiedene Zielgruppen konstruiert
-Sites die es dem User durch persönliche Profile erlauben den für ihn interessanten Inhalt darzustellen (optimal)

||||||||||||||||||||||||
top
+Überlegungen:

-Was soll designed werden und wie?

-Wer wird die Site besuchen--Zielgruppe--?

-Wie wird festgestellt, dass die Site ein Erfolg ist?

Informations Architektur [was ist ein Informations Architekt?]

    |Was ist ein Informations Architekt|   |aus der Sicht des Users |  |Profilanalyse: Informations Architekt|

-Klärt den Einsatz der Site und die Vorstellungen des Auftraggebers ab. Schafft einen Ausgleich zwischen den Bedürfnissen des Auftraggebers und der Zielgruppe.
-Bestimmt welchen Inhalt und welche Funktionalität die Seite aufweisen soll.
-Setzt fest, wie User die Information der Site finden durch Definition der Organisation, Navigation und Bezeichnungen der einzelnen Informationsgebiete und Suchsysteme.
-Plant im voraus, wie die Site erweitert und an Veränderungen angepasst wird.

User bemerken Informations Architektur erst wenn sie nicht funktioniert!

||||||||||||||||||||||||
top
Aus der Sicht des Users [Information soll schnell und einfach gefunden werden]
known item searching:
Der User weiß genau was er sucht. Er weiß wie seine Information bezeichnet wird und dass sie vorhanden ist. Der User will die gesuchte Information schnell und einfach finden.

zwangloses, zufälliges browsing
[engl. browse: grasen, weiden]
Andere User wissen nicht genau wonach sie suchen. Sie kommen auf die Site mit einer vagen Vorstellung vondem was sie eigentlich wollen. Diese User wissen womöglich nicht die richtigen Begriffe oder Bezeichnungen der gewünschte Information.
Durch zwangloses browsen der Site werden sie über das Service der Firma oder Produkte informiert.
In einem gut durchdachten System wechseln viele User zwischen known item searching und zufälligen surfen.
Die Architektur der Site sollte beide Modi unterstützen.

||||||||||||||||||||||||
top
Profilanalyse: Informations Architekt

[Anforderungen]

-Jemand, der wie ein Außenstehender denken kann und sich in den User der Site versetzen kann.
-Jemand, der allerdings genug Einblick in des Unternehmen hat, das die Site in Auftrag gibt, um die Ziele, den Inhalt, die Zielgruppe und die Firmenphilosophie zu verstehen.

+beruflicher Background

-[Graphik Design]-

“Ist mehr als nette Bilder erzeugen”
-Ein Graphiker versteht es visuelle Elemente wirkungsvoll zu komponieren, die Beziehung von Flächen zueinander optimal einzusetzen (auch genügend Leerraum zuzulassen-white space-)
-Kombination zwischen Typographie und Bildern.
-Allerdings ist ein konventioneller Graphiker oft zu sehr auf die Gestaltung einzelner Seiten bedacht. (Keine Übersicht über die gesamte Site )

||||||||||||||||||||||||
top

-[Bibliothekswissenschaft]-

Menschen aus diesen Berufsgruppen sind ausgebildet, mit Such- und Registriertechnologien zu arbeiten.
Oft gehen sie aber zu sehr ins Detail und die Übersicht einer WebSite als Ganzes geht verloren.

-[Journalismus]-

Journalisten sind sehr gut im organisieren von Information und Inhalten, da sie permanent Information liefern und verarbeiten.
Sie können große Mengen an Information bearbeiten und zuordnen.

-[Usability]-

-Personen aus diesem Bereich sind Experten im testen und beurteilen von Systemen. Sie analysieren bei Informationssystemen Kriterien wie, die Zeit die User brauchen um mit einem System umzugehen und wie viele Fehler sie auf dem Weg dorthin machen.
-Usability Techniker haben von den genannten Berufen sicher die wissenschaftlichste Betrachtungsweise von Usern und der Qualität von Informationssystemen.
-Ihr Schwerpunkt liegt allerdings im testen und messen der Benutzerfreundlichkeit und nicht im designen oder redesignen.

||||||||||||||||||||||||
top

-Systemtest können das Redesign positiv beeinflussen.

-[Marketing]-

-Marketing Experten sind auf Zielgruppenverständnis und das wirkungsvolle Vermitteln von Aussagen spezialisiert.
(Verkauf von Produkten auf einer Site, Förderung des Markenbewusstsein)

-[Informatik]-

Informatiker sind Spezialisten um Inhalte in Datenbanken zu organisieren, aber oft geht die Haltung, dass der User beim Designen einer Site im Mittelpunkt steht, verloren.

Jeder aus diesen Berufen kann ein Informations Architekt sein, solange er oder sie der “Wächter” des großen Ganzen (WebSite) bleibt.
Er/Sie soll sich nur auf die Architektur der Site konzentrieren und nicht gleichzeitig für das Design verantwortlich sein.
Auf das Gleichgewicht in einem Team sollte wert gelegt werden, indem möglichst alle Perspektiven vertreten sind (z.B: Designer versus Usability Zuständigen).

||||||||||||||||||||||||
top

“All in one”
Wenn eine Person für alle Bereiche verantwortlich ist -Entwicklung, Design, Technik, Organisation, Produktion-, dann:
1. Eine Gruppe von Freunden oder Kollegen zusammenstellen, die bereit sind die Ideen anzuhören und ein Feedback zu geben,
2. Eine kontrollierte Schizophrenie entwickeln um die Seite aus der Sicht eines Designers betrachten, aus der Sicht eines Programmierers, aus allen Perspektiven die in einem Team vertreten wären.
Da aber eine Person nie ein Experte in allen Bereichen sein kann, ist es wichtig, dass ein Informations Architekt mit dem Entwicklungsteam der WebSite kommuniziert.

+Team

-Marketing: konzentriert sich auf die beabsichtigte Aussage und die Zielgruppe der Website
-Information Architekt: verantwortlich für das Benennen der Bereiche, die Navigation und das Unterstützen von Suchoptionen
-Graphik Design: das Graphische Design und Layout definiert die Identität und das Aussehen der Site
(Gleichgewicht zwischen Design und Funktion)
-Redaktion: zuständig für eine einheitliche und zielgruppenorientierte Sprache, die sich durch die ganze WebSite zieht
-Technik: kompetente Mitarbeiter in den Bereichen Serveradministration, Entwicklung und Integration von Editoren und WebSite Applikationen. Das Team muss über die technischen Möglichkeiten informiert werden.
-Projekt Management: ist verantwortlich dafür, dass das Projekt nach Zeitplan läuft und sich im Rahmen des Budgets befindet. Der Projektmanager führt Gespräche mit dem Team und Klienten.

||||||||||||||||||||||||
top
Information organisieren [Mehrdeutigkeit-Unklarheit]

                                             |Information organisieren|   |subjektiv organisieren|  

Systeme zur Kategorisierung von Information basieren auf Sprache, doch Sprache ist oft mehrdeutig. Z.B: das Wort Bank: einerseits kann man sich auf eine Bank setzen, andererseits ist die Bank ein Geldinstitut. oder:
eine Tomate ist eine rote oder gelbliche Frucht mit saftigem Fruchtfleisch, die als Gemüse verwendet wird: botanisch ist die Tomate eine Beere (Webster´s dictionary). Was ist die Tomate, eine Frucht, ein Gemüse oder eine Beere?
Die Organisation von Wörtern und Phrasen unter Berücksichtigung ihrer Vieldeutigkeit ist eine beträchtliche Herausvorderung.

+Verschiedenartigkeit

Eine WebSite ist ein multimedialer Schmelztiegel. Die Herausvorderung besteht in der Zusammenfügung der verschiedenen Medien.
Im Web gibt es verschiedene Möglichkeiten Information zu transportieren. (z.B: Werbung im Netz: kann entweder als animated Gif, als Flash Animation oder als Text, als Banner oder Pop Up vermittelt werden)
Links können innerhalb einer Site oder Page funktionieren, oder zu einer anderen Site linken.
Dadurch, dass verschiedenartigste Informationen (Inhalte und Medien) transportiert werden, soll man sich auf deren Charakteristika konzentrieren (wie diese darszustellen und zu vermitteln sind).

||||||||||||||||||||||||
top
+Subjektiv organisieren

Jeder organisiert seinen Computer anders, allerdings immer so, dass es für denjenigen logisch wirkt. Ein Fremder würde womöglich beim Anblick der Einteilung verzweifeln.
Daher muss die Organisation einer WebSite und die Bezeichnung der Teilbereiche weg von der subjektiven Sicht des Konstrukteurs.
Man muss selbst in die Rolle des zukünftigen Users schlüpfen. Wie sehen die User die Information? Welche Bezeichnungen würden sie verwenden? WebSites müssen für verschiedene User gebaut werden.
Verschiedene User haben unterschiedliche Ansichten oder Wege im Verstehen von Information, manche sind mit dem Unternehmen mehr vertraut als andereOrganisation von WebSites

 
Organisation von WebSites

                                            |Organisations Schemata|   |Organisations Strukturen|  

Die Organisation ist der Hauptfaktor um den Erfolg einer Site zu garantieren.
Organisations Systeme setzen sich aus a:Organisations Schemata und b:Organisations Strukturen zusammen.
ad a) definieren den darzustellenden Inhalt und beeinflussen die logische Gruppierung der einzelnen Bereiche
ad b) beschreiben die Art der Beziehung zwischen dem Inhalt und der Gruppierung

Organisation hängt stark mit dem Navigationssystem und der Benennung der einzelnen Gebiete zusammen.

||||||||||||||||||||||||
top

+Organisations Schemata

Telefonbücher, Supermärkte, Fehrnsehzeitschriften,... alle machen sich Organisations Schemata zunutze um uns den Umgang zu vereinfachen. Man unterscheidet zwischen:

Exakte Organisations Schemata:
unterteilen die Information in gut definierte, eindeutige Bereiche (Telefonbuch)
Diese Organisations Schemata sind einfach zu verwenden und auch leicht zu designen und instandzuhalten.
Sie werden in drei Typen unterteilt:
-alphabetisch: primäres Organisations Schema für Enzyklopedien, Wörterbücher und Telefonbücher. Die Grundlage zur Organisation ist unser Alphabet .
-chronologisch: dieses Schema wird für Geschichtsbücher, TV Programme, Tagebücher,... verwendet.
-geographisch: ein Ort ist oft ein charakteristisches Merkmal für Information. Wir schenken z.B: Nachrichten unsere Region betreffend mehr Aufmerksamkeit.

Mehrdeutige Organisations Schemata:
unterteilen Information in Kategorien, die schwieriger zu designen und instandzuhalten sind.
Diese Schemata sind oft wichtiger und brauchbarer als exakte Organisations Schemata. (z.B: Suche nach einem Buch durch Autor, Titel oder Thema)
Diese Art der Organisation wird öfter genutzt.
Sie sind unterteilt in:

 

-thematisch: ist oft die sinnvollste Unterteilung (Zeitungen, Vorlesungen,...)
-anwendungsorientiert: dieses Schema organisiert den Inhalt und die Applikationen in eine Sammlung von Prozessen, Funktionen und Anwendungen. (anwendungsorientierte Programm-Menüs wie bearbeiten, Ansicht, Format)
-zielgruppenorientiert: wenn die Site für zwei oder mehr klar definierte Zielgruppen designed ist. Gute Lösung für wiederkehrende Besucher die sich ihren individuellen Teil der Site bookmarken können.
-metapherorientiert: z.B: der Mistkübel am Desktop. Diese Art der Organisation kann allerdings einschränken oder Verwirrung auslösen.

Gemischte Organisations Schemata:
setzen sich aus mehrdeutigen und exakten Organisations Schemata zusammen, führen oft zu Unklarheiten.

||||||||||||||||||||||||
top
+Organisations Strukturen

Die Struktur eine WebSite hat zwar nicht offensichtlich etwas mit “sichtbarem” Design zu tun, ist aber sehr wichtig um die Verlinkung festzulegen. Die Struktur beschreibt den Weg wie ein User innerhalb der Site navigieren kann

Die Hierachie: top-down

Die Grundlage von beinahe jeglicher Informations Architektur ist eine gut durchdachte Hierachie. Wir sind vertraut mit diesem System- eine Familie z.B. ist hierachisch unterteilt. Wir können Bücher hierachisch unterteilen- ein Buch besteht aus Kapiteln, Absätzen, Sätzen, Wörtern und Buchstaben.
Beispiel für hierachische Struktur

 
  Hierachien designen
Es gibt zwei verschiedene Arten um Hierachien darzustellen. Es ist wichtig eine Balance zwischen “Breite” und “Tiefe” des Systems zu finden. Zwei Extreme sind schmale, tiefe und breite, flache Systeme.
 

Beispiel für schmal und tief

Angenommen der User muss auf die hier als page b bezeichnete Seite, weil dort seine Information liegt Er muss von page a ausgehend sechs mal klicken um zu b zu gelangen. Das ist vielen Usern verständlicherweise zu mühsam, deshalb muss man darauf achten diesen Extremfall zu vermeiden.

||||||||||||||||||||||||
top
 

Beispiel für breit und flach

Der User muss hier eine Wahl aus zehn verschiedenen Möglichkeiten treffen um einen spezielleren Kontent zu erreichen.
Sieben + - Zwei Regel: Web Site mit mehr als 10 Möglichkeiten überfordern den User (Psychologie).

 
||||||||||||||||||||||||
top
Auf Hypertext basierende Modelle:
Hypertext ist ein höchst nonlinearer Weg um Information zu strukturieren. Ein Hypertext System setzt sich grundsätzlich aus zwei Teilen zusammen, dem Inhalt der verlinkt werden soll und den Links selbst. Diese zwei Teile ermöglichen es Text, Bilder, Videos, Audiofiles, jegliche Art von Daten miteinander zu verbinden.
Die Information kann hierachisch, nicht hierachisch, oder, sowohl als auch verknüpft werden.

Beispiel für ein Hypertext System

Dieses System verschaft dem Designer viele Freiheiten, allerdings wird es für den User schnell zu komplex und verwirrend. Die Folgen sind frustrierte, überforderte User. Oft passiert die Verlinkung subjektiv. Sie ist dann für den Konsumenten nicht nachvollziehbar.

 
 

Um für den User eine durchschaubare, verständliche Struktur zu schaffen, ist es das Beste hierachische Modelle mit Hypertext Systemen zu kombinieren.

||||||||||||||||||||||||
top
Navigations Systeme

 |verschiedene Navigations Systeme|   |Navigations Leisten|

Sich verirren war schon bei Hänsel und Gretl ein Dilemma. Es wurden Navigations Systeme wie Kompass, Sternkarten, Strassenschilder und GPS entwickelt, damit wir wissen wo wir uns befinden, wohin wir gehen und wie wir wieder zurückfinden.
Genauso sollte es im Internet funktionieren. Ein gutes Navigations System kann User zu neuen Inhalten führen, es erleichtern mehr über ein Thema, Produkt oder Service zu erfahren, ohne dass sich der Konsument auf der Site verirrt.
Die Kunst eines guten Navigations Systems liegt darin, dem User Flexibilität zu gewähren, ihn aber nicht vor eine Unzahl von Möglichkeiten zu stellen.
Navigations Systeme können aus einer Vielfalt von Elementen bestehen. Graphische Navigationsleisten und Pop Up Menüs sind in die einzelnen Pages eingebunden. Sitmaps und Inhaltsverzeichnisse ermöglichen den Zugang zur Information über die Organisation Struktur unabhängig von der Navigation auf den einzelnen Seiten.

||||||||||||||||||||||||
top

+Browser Navigations Features

Beim Designen eines Navigations Systems ist es wichtig das Umfeld in dem es existieren soll zu beachten. Im Internet werden Browser wie, Netscape Communicator und Microsoft Internet Explorer verwendet, um sich im Web zu bewegen. Diese Browser beinhalten bereits einige Navigations Elemente.

Durch die Eingabe der URL gelangt man zu jeder Page einer WebSite. Durch Zurück und Vorwärts kann man Seiten in beide Richtungen blättern. Der Verlauf enthält alle besuchten Seiten eines definierten Zeitraums. Bookmarks ermöglichen dem User die Adresse einer Page für zukünftigen Besuch zu speichern. Außerdem stellen diese Browser Textlinks in voreingestellten Farben dar. (Standard: Link= blau, visited Link= rot) Werden diese Linkfarben von Webdesignern durch andere ersetzt führt das oft zur Verwirrung des Users (grünes Stoppschild anstelle eines roten?!)
Außerdem ermöglichen Browser eine, für den User vorausschauende Navigation, indem er den Cursor über einen Hypertext Link steuert erscheint unten im Browser Fenster die Zieladresse, im Idealfall wird auf den Inhalt hingewiesen (z.B: http://www.orf.at/program).

+Zusammenhänge aufbauen

Auf jeder Page der Site sollte sich das Logo der Firma oder Organisation befinden. Damit wird vermittelt, dass man sich immer noch innerhalb der Site bewegt. Die Site soll auch durch ihre graphische Identität einen ganzheitlichen Eindruck erzeugen. Für den User hilfreich ist das Anzeigen seines “momentanen Standpunktes” , das heißt, er weiß durch ein Farbleitsystem, Beschriftung oder unterlegten Menüpunkt wo er sich zur Zeit auf der Site befindet.

||||||||||||||||||||||||
top
+verschiedene Navigations Systeme
Eine komplexe WebSite bedient sich oft mehrerer Arten von Navigations Sytemen. Um eine erfolgreiche Site zu
designen ist es wichtig die verschiedenen Systeme, ihre Vorteile und Nachteile zu kennen.

hierachische Navigations Systeme:
sind die am häufigsten verwendeten.
Von der Hauptseite zu den Subpages die die eigentliche Information enthalten.
Wie schon erwähnt ist die Hierachie wichtig, schränkt aber auch ein.

globale Navigations Systeme:
Ein globales Navigations System ergänzt oft die hierachisch aufgebaute Information, da es dem User mehr Bewegungsfreiheit auf einer Site einräumt.
Einfache globale Navigations Syteme bestehen oft aus einer graphisch dargestellten Navigationsleiste am unteren Rand der Pages, auf der Hauptseite ist diese Navigationsleiste womöglich überflüssig, da die auszuwählenden Optionen zweimal dargestellt werden würden. Auf den Subpages kann die Leiste einen zusätzlichen Link zur Startseite beinhalten.
Tipp: da wir von rechts nach links lesen, sollte der Startseiten Link der erste in der Leiste sein.

lokale Navigation Systeme:
Für eine komplexere WebSite kann es nötig sein, globale Navigations Systeme mit lokalen Navigations Systemen zu ergänzen. Es ist wichtig, das Konzept einer SubSite zu verstehen. Jakob Nielson prägte diesen Begriff. Eine SubSite ist eine unbestimmte Anzahl an Seiten innerhalb einer WebSite (z.B: ein online Katalog der mehrere HTML Seiten umfasst). Es ist sinnvoll für eine SubSite eine eigene, für den Inhalt spezifische Navigation (lokales Navigations System) zu entwerfen.

Es ist wichtig, dass das globale Navigations System auch auf der SubSite präsent ist. Der User soll immer die Möglichkeit haben, auf die Main Page zu gelangen. Lokale Navigations Systeme sollten so konzipiert sein, um die globale Navigation zu ergänzen und nicht zu ersetzen. Beide Navigations Systeme auf einer Seite müssen durch intelligentes Design präsentiert werden, um Verwirrung bei Usern zu vermeiden.

||||||||||||||||||||||||
top

Ad Hoc Navigation:

sind Links die z.B. in Phrasen oder Sätze eingebettet sind.
Da aber User Seiten schnell scanen, übersehen sie diese Art der Links oft und darum ist es besser, wenn diese Links extern, also nicht im Text eingebunden, noch einmal dargestellt werden.

Beispiel für eingebettete und extern dargestellte Links

eingebettet Links

Wie hier dargestellt sind eingebettete Links von Text umgeben.
User übersehen oft diese Art von Links.
Eine Lösung für das “eingebettete Link” Problem ist die Darstellung der Links in einem eigenem Absatz.
Eine andere Lösung wäre ein eigenständiges Menü am unterem oder oberem Rand der Seite.

° eingebettete Links

° User

° Eine Lösung für das “eingebettete Link” Problem

||||||||||||||||||||||||
top

+Navigations- Leisten

Navigations Leisten kann man auf verschiedene Arten einbinden. Man kann sie für hierachische, globale und lokale Navigations Systeme verwenden.
Die einfachste Form einer Navigations Leiste ist eine Sammlung von Hypertext Links, die gruppiert, auf einer Seite dargestellt werden. Die Alternative zu reinen Text Links ist die graphische Darstellung in Form von Image maps oder einzelne Bilder die tabellarisch angeordnet sind.
Graphische Navigations Elemente können die Ladezeit der Site beeinträchtigen. Werden für die globale Navigation Bilder verwendet, müssen diese innerhalb der Site nur einmal geladen werden. Dennoch muss beim Verwenden von Bildern als Navigations Elemente auf die User mit schlechter Bandbreite Rücksicht genommen werden. Außerdem sollte man auch die User mit High End Browsern nicht übergehen, die die Text Only Anwendung aktiviert haben (bei Text nur kurze Ladezeit). In diesem Fall sollte das <ALT> Attribut verwendet werden, indem ein Text als Alternative zum Navigationsbild eingegeben wird.
Ein Text Menü kann leichter modifiziert und erweitert werden als eine graphische Navigation.
Die Navigations Leiste sollte laut Usability Studie am oberen oder unteren Rand der Seite plaziert werden, da Buttons auf der Seite der Page (rechts-links) vergleichbar uneffektiver sind.
Wenn die Navigations Leiste am oberen Rand der Seite ist, eröffnet man dem User sofort den Zugang zur Navigation und er bekommt eine Idee vom Aufbau der Site.
Die Plazierung der Navigation am unteren Rand setzt voraus, dass der User die Seite vorher liest.
Die Navigation am oberen und unteren Rand der Seite angebracht, hängt von der Länge des Inhalts der Page ab.

||||||||||||||||||||||||
top

Graphische Navigations Elemente setzen sich meist aus Bild und Schrift zusammen. Es können auch Icons verwendet werden, allerdings ist die eindeutige Aussage nur schwierig zu treffen. Bilder sagen mehr als tausend Worte, aber eben oft nicht die richtigen. Icons können erfolgreich als Ergänzung zu Bild-Text Elementen verwendet werden
(z.B. Darstellung des Warenkorbs als Einkaufswagen) .
Frames:
Statische Navigations Elemente in Frames nehmen manchmal viel nützlichen Platz einer Webpage weg (800px*600px).
Darum sollte die Navigationsleiste schmal gehalten werden. Ein Vorteil ist, dass die Navigations Leiste immer am Screen ist, soweit der User im anderen Frame auch nach unten scrollt.

Das Page Model
Jede Page im Internet hat eine eindeutige Adresse. Bei der Verwendung von Frames wird dieses Model um-
gestoßen, da eine Page in einzelne, unabhängige Teile gesplitet wird. Beim Einsatz von Frames können wichtige Browser Navigations Funktionen ausgeschaltet werden (Bookmarks, Verlauf, Links,...). Eine Schwierigkeit kann auch das Drucken von Seiten werden.

Ladezeiten
Bei Einsatz großer Graphiken kann es lange daueren bis die gesamte Framsite geladen ist.

Komplexes Design
Frames sind geeignet für den Einsatz von globalen Navigations Systemen, die die ganze Zeit sichtbar sind. Verschiedene Browser stellen Frames oft unterschiedlich dar (Tests mit allen gängigen Browsern und Versionen sind notwendig).

Pull Down Menüs:
Diese Art von Menüs erlaubt dem Designer viele Auswahloptionen auf einer Page anzubieten. Eine anspruchsvollere Art des Pull Down Menüs ist ein Pop Up Menü.
+eigenständige Navigations Elemente

Eigenständige Navigations Elemente sind Sitmaps und Inhaltsverzeichnisse die nicht in der grundsätzlichen Hierachie einer WebSite integriert sind.
Diese Elemente ermöglichen eine Gesamtübersicht über den Inhalt der Site. Üblicherweise werden sie in einem eigenen Browser Fenster dargestellt.Sitmaps und Inhaltsverzeichnisse sollen als Übersicht der Site angeboten werden.

 

||||||||||||||||||||||||
top
von User lernen [Usability Tests]
Testgruppen:
Testgruppen setzen sich aus potentiellen Usern der Site zusammen. In einer typischen Testgruppen Sitzung werden eine Reihe zuvor überlegter Fragen gestellt. Z.B: Was würden Sie gern auf der Seite sehen, wonach würden Sie suchen?
Ein Prototyp der Site wird gezeigt. Die Testgruppe muss ihren Eindruck der Site beschreiben und Vorschläge zur Veränderung machen.
Testgruppen sind sehr gut dafür geeignet, den möglichen Inhalt und die Funktion der Site festzustellen und Vorschläge zu äußern.
Eine öffentliche Demonstration der Site ist allerdings noch keine Garantie für tatsächliche Benutzerfreundlichkeit.

Individuelle Tests:
Eine weitaus geeigneterer Methode zum Testen der Usability ist es, die Site einzelnen Usern vorzustellen. Der User muss durch die Site navigieren und seine Eindrücke und Unklarheiten verlautbaren. Die Statements des Users können auf verschiedene Art aufgezeichnet werden (Video, Tape, Papier).
Es ist wichtig die Site von mehreren Usern testen zu lassen, am besten von Usern aus verschiedenen Zielgruppen.

Fragen und Vorschläge:
Eine der simpelsten Methoden um die Usability einer Site festzustellen ist eine Konsumentenbefragung. Man kann eine Fragen/Vorschläge Rubrik in die Site integrieren, die von jeder Page zugänglich ist.
Man sollte Usern immer die Möglichkeit bieten, ein Feedback zur Seite abgeben zu können. Ein Formular ist oft besser als ein mailto tag. Das Formular soll aber nicht zu lang werden, da die wenigsten User die Ausdauer besitzen eine Unzahl von Fragen zu beantworten, deshalb sollte man Prioritäten setzen. Es ist erfreulich, wenn Konsumenten bereitwillig ein Feedback zur Site abgeben, sollten sich die User nicht dafür interessieren, sind Wettbewerbe, mit der Möglichkeit Geschenke zu gewinnen, sinnvoll.
Es ist wichtig den Usern auf ihre Fragen und Vorschläge zu antworten, da sich der User auch die Zeit nimmt ein Formular auszufüllen.
User sollten bei technischen Problemen den Webmaster und bei Problemen den Inhalt betreffend eine dafür zuständige Person kontaktieren können.

||||||||||||||||||||||||
top
10 Usability Erkenntnisse

Überblick über den Status:
Der User soll durch angemessene Meldungen innerhalb eines gewissen Zeitraums über die Aktivität des Systems informiert werden. (z.B: Film wird geladen, bitte warten)

Zusammenhänge zwischen Virtualität und Realität:
Das System sollte die Sprache des Users sprechen. Verwenden Sie Wörtern, Phrasen und Herangehensweisen die ihm vertraut sind eher, als systemorientiertes Fachvokabular.

“User control” und seine Freiheiten
User machen Fehler. Sie wählen ungewollt Systemfunktionen aus und brauchen darum einen klar gekennzeichneten “Notausgang” um den ungewollten Zustand zu beenden ohne mit einem ausgedehnten Dialog konfrontiert zu werden. Unterstützen Sie undo und redo.

Standards
User sollten nicht mit verschiedenen Wörtern, Situationen oder Aktionen konfrontiert werden, die das gleiche bedeuten. Halten Sie sich an Standards.


Fehler- Prevention
Besser als gute Fehlermeldungen ist es Fehlern vorzubeugen. Fehlerprevention durch adäquates Design.

wiedererkennen besser als wiedererinnern
Objekte, Aktionen und Optionen sollten sichtbar sein. Gebrauchsanleitungen sollten sichtbar oder jederzeit abrufbar sein.
Der User soll sich nicht an Informationen von vorangegangenen Arbeitsschritten erinnern müssen, um folgende Arbeitsschritte ausführen zu können.

||||||||||||||||||||||||
top

Flexibilität und Gebrauchseffizienz
Beschleunigende Faktoren (für einen Anfänger irrelevant) ermöglichen dem Experten ein schnelleres Arbeiten. (z.B: short cuts)
Dem User sollte die Möglichkeit geboten werden das System seinen Bedürfnissen entsprechend zu modifizieren. (frequently actions)

Ästhetisches und minimalistisches Design
Vermeidung irrelevanter oder selten gebrauchter Information. Jede zusätzliche Information konkuriert mit dem Wesentlichen.

Helfen Sie dem User beim Erkennen, Analysieren und Beseitigen von Fehlern
Fehlermeldungen sollten ausformuliert werden und nicht in Programmcode dargestellt werden, Fehler sollen präzise beschrieben werden und konstruktive Lösungsvorschläge geboten werden.

Hilfe und Dokumentation
Auch wenn es grundsätzlich besser ist das System ohne Dokumentation verwenden zu können, könnte es notwendig sein Hilfe und Dokumentation anzubieten. Diese Information sollte leicht auffindbar, der Arbeit des Users angepasst und nicht zu lang sein. Konkrete Vorgehensschritte sollten aufgelistet sein.

 

quellen:

Information Architectur for the World Wide Web
Verlag: O’Reilly
Autoren: Louis Rosenfeld & Peter Morville
ISBN: 1-56592-282-4

http://www.useit.com
Site von Jakob Nielsen [usability engineering]

   
||||||||||||||||||||||||
top
|||||||||||||||||||||||||||||||||||||||||||||||||| k:rho |||||||||||||||||||||||||||||||||||||||||||||||||