Commit 7f702084 authored by Adrian Jagusch's avatar Adrian Jagusch
Browse files

Korrekturlesen – Teil 2

parent 346cc8f6
...@@ -6,43 +6,44 @@ category: usability ...@@ -6,43 +6,44 @@ category: usability
author: Martin Sonntag author: Martin Sonntag
--- ---
Um die Benutzerfreundlichkeit einer Internetseite zu überprüfen, gibt es viele verschiedene Testmethoden. Diese können einfache und professionell durchgeführte Tests sein. Die Anzahl der Werkzeuge zur Überprüfung von "Usability" ist groß, wobei je nach bestimmter Situation, Fragestellung oder auch Zielgruppe verschiedenste Techniken zum Einsatz kommen können.<!--more--> Im Folgenden wird ein kleiner Überblick gegeben, was für gängige Methoden eingesetzt werden können.<sup>1</sup> Um die Benutzerfreundlichkeit einer Internetseite zu überprüfen, gibt es viele verschiedene Testmethoden. Dies können einfache und professionell durchgeführte Tests sein. Die Anzahl der Werkzeuge zur Überprüfung von "Usability" ist groß, wobei je nach bestimmter Situation, Fragestellung oder auch Zielgruppe verschiedenste Techniken zum Einsatz kommen können.<!--more--> Im Folgenden wird ein kleiner Überblick gegeben, welche gängige Methoden eingesetzt werden können.<sup>1</sup>
### Beobachtung von Personen ### Beobachtung von Personen
Eine leicht durchführbare Methode ist die persönliche Beobachtung von Testpersonen. Dabei werden den Probanden bestimmte Aufgaben zugeteilt, wie zum Beispiel die Suche nach Produktinformationen auf ihrer Webseite oder eine Angebotsanfrage. Durch Beobachtung der Testpersonen bei dieser Aufgabe, wird erkannt, wie gut diese auf der Webseite zurechtkommen, wo Probleme auftreten können und ob die jeweilige Aufgabe gut gelöst werden kann. So sollten nur Testpersonen eingesetzt werden, die die Internetseite noch nicht kennen, um das Ergebnis nicht zu verfälschen. Nach dem der Test durchgeführt worden ist, kann von den Probanden noch ein Feedback eingeholt werden, welches zusammen mit den Erkenntnissen aus der Beobachtung zur Verbesserung der Webseite genutzt werden kann.<sup>1</sup> Eine leicht durchführbare Methode ist die persönliche Beobachtung von Testpersonen. Dabei werden den Probanden bestimmte Aufgaben zugeteilt, wie zum Beispiel die Suche nach Produktinformationen auf ihrer Webseite oder eine Angebotsanfrage. Durch Beobachtung der Testpersonen bei dieser Aufgabe, wird erkannt, wie gut diese auf der Webseite zurechtkommen, wo Probleme auftreten und ob die jeweilige Aufgabe erfolgreich gelöst werden kann. Daher sollten nur Testpersonen eingesetzt werden, die die Internetseite noch nicht kennen, um das Ergebnis nicht zu verfälschen. Nachdem der Test durchgeführt worden ist, kann von den Probanden noch ein Feedback eingeholt werden, welches zusammen mit den Erkenntnissen aus der Beobachtung zur Verbesserung der Webseite genutzt werden kann.<sup>1</sup>
### Onsite-Befragung ### Onsite-Befragung
Eine Onsite-Befragung gehört zur Familie der Online-Befragungen und dient dazu in kürzester Zeit Feedback von vielen Benutzern einer Webseite zu generieren. Der Fragebogen wird dabei direkt auf der Internetseite eingebunden. Die Anwender werden meist über ein Popup oder einen Layer zur Teilnahme der Befragung eingeladen, wobei diese eigenständig entscheiden können, ob sie an der Befragung teilnehmen möchten.<sup>2</sup> Eine Onsite-Befragung dient dazu in kürzester Zeit Feedback von vielen Benutzern einer Webseite zu generieren. Der Fragebogen wird dabei direkt auf der Internetseite eingebunden. Die Anwender werden meist über ein Popup oder einen Layer zur Teilnahme der Befragung eingeladen, wobei diese eigenständig entscheiden können, ob sie an der Befragung teilnehmen möchten.<sup>2</sup>
Durch eine Onsite-Befragung lässt sich unter anderem herausfinden:<br> Durch eine Onsite-Befragung lässt sich unter anderem herausfinden:
- Was für Inhalte dem Nutzer wichtig sind, <br>
- wie zufrieden er mit der Internetseite ist,<br>
- Ob es Verbesserungsvorschläge für die Internetseite gibt, <br>
- Welche Möglichkeiten der Benutzer vermisst und <br>
- Was für Eigenschaften die Teilnehmer der Befragung besitzen.<sup>3</sup>
Vorteile der Onsite-Befragung sind dabei, dass echte Nutzer der Website angesprochen werden, die Methode sich regelmäßig durchführen lässt, um neue Erkenntnisse zu erlangen und zudem sich der Erfolg einer Webseite so gut messen lässt.<sup>3</sup> - Welche Inhalte dem Nutzer wichtig sind
- Wie zufrieden er mit der Internetseite ist
- Ob es Verbesserungsvorschläge für die Internetseite gibt
- Welche Funktionen der Benutzer vermisst
- Informationen über die Teilnehmer der Befragung<sup>3</sup>
Eine Grundvoraussetzung für fundierte Ergebnisse sind möglichst hohe Teilnehmerzahlen der Befragung. Dieser Punkt stellt eine Schwachstelle der Onsite-Befragung dar, denn die Teilnehmerzahlen liegen meist im einstelligen Prozentbereich. Dies kann zum Beispiel daran liegen, dass die falsche Zielgruppe erreicht wird oder die Befragungen meist als störend angesehen und einfach weggeklickt werden.<sup>4</sup> Vorteile der Onsite-Befragung sind, dass echte Nutzer der Website angesprochen werden, die Methode sich regelmäßig durchführen lässt, um neue Erkenntnisse zu erlangen und sich der Erfolg einer Webseite so gut messen lässt.<sup>3</sup>
Eine Grundvoraussetzung für fundierte Ergebnisse sind möglichst hohe Teilnehmerzahlen der Befragung. Dieser Punkt stellt eine Schwachstelle der Onsite-Befragung dar, denn die Teilnehmerzahlen liegen meist im einstelligen Prozentbereich. Dies kann zum Beispiel daran liegen, dass die falsche Zielgruppe erreicht wird oder die Befragungen häufig als störend angesehen und einfach weggeklickt werden.<sup>4</sup>
### Eye-Tracking ### Eye-Tracking
Eye-Tracking (Blickbewegungsmessung) ist eine professionelle Methode, um die Usability einer Website zu messen. Hierbei wird der Blickverlauf eines Benutzers sichtbar gemacht. Dies geschieht durch eine Infrarottechnik, die in einem Monitor verbaut ist und das Gesicht des Nutzers mit nicht gefährlichen Infrarotstrahlen abtastet. Zeitgleich wird der Nutzer von einer Augenkamera gefilmt, wodurch beispielsweise Augenbewegungen, Blickverläufe und Gesichtsmimik erfasst werden können.<sup>5, 6</sup> Eye-Tracking (Blickbewegungsmessung) ist eine professionelle Methode, um die Usability einer Website zu messen. Hierbei wird der Blickverlauf eines Benutzers sichtbar gemacht. Dies geschieht durch eine Infrarottechnik, die in einem Monitor verbaut ist und das Gesicht des Nutzers mit nicht gefährlichen Infrarotstrahlen abtastet. Zeitgleich wird der Nutzer von einer Augenkamera gefilmt, wodurch beispielsweise Augenbewegungen, Blickverläufe und Gesichtsmimik erfasst werden können.<sup>5, 6</sup>
Durch Eye-Tracking kann erkannt werden, welche Stellen einer Website die Aufmerksamkeit eines Nutzers anregen und welche Elemente einer Website Blickfänger sind. Zudem ist einsehbar, welche Informationen einer Internetseite betrachtet oder auch wirklich gelesen werden. Ebenso wird die Reihenfolge, in welcher der Benutzer die Elemente einer Seite erfasst, aufgezeichnet.<sup>6</sup> Durch Eye-Tracking kann erkannt werden, welche Stellen einer Website die Aufmerksamkeit eines Nutzers anregen und welche Elemente einer Website Blickfänger sind. Zudem ist einsehbar, welche Informationen einer Internetseite betrachtet oder auch wirklich gelesen werden. Ebenso wird die Reihenfolge, mit welcher der Benutzer die Elemente einer Seite erfasst, aufgezeichnet.<sup>6</sup>
Die Ergebnisse dieser Methode können in unterschiedlicher Weise visualisiert werden:<br> Die Ergebnisse dieser Methode können in unterschiedlicher Weise visualisiert werden:<br>
**Heatmap:**<br> **Heatmap:**<br>
Heatmaps zeigen, welche Bereiche einer Webseite häufig und lange betrachtet wurden. Dabei werden Elemente, die am häufigsten und am längsten betrachtet wurden, wie bei einer Wärmebildkamera, rot angezeigt. Weniger relevante Elemente werden grün dargestellt.<sup>5, 7</sup> Heatmaps zeigen, welche Bereiche einer Webseite häufig und lange betrachtet wurden. Dabei werden Elemente, die am häufigsten und am längsten betrachtet wurden, wie bei einer Wärmebildkamera, rot dargestellt. Weniger relevante Elemente werden grün dargestellt.<sup>5, 7</sup>
**Gaze Opacity:**<br> **Gaze Opacity:**<br>
Hier werden alle nicht betrachteten Teile einer Webseite schwarz eingefärbt. Nur Bereiche, die die Benutzer häufig angesehen haben werden nicht eingefärbt. Je mehr solcher Einschwärzungen (enstanden aus den Testergebnissen) aufeinander gelegt werden, umso weniger sind helle Bereiche vorhanden und umso deutlicher wird das Testergebnis.<sup>5, 7</sup> Hier werden alle nicht betrachteten Teile einer Webseite schwarz eingefärbt. Nur Bereiche, die die Benutzer häufig angesehen haben, werden nicht eingefärbt. Je mehr solcher Einschwärzungen (enstanden aus den Testergebnissen) aufeinander gelegt werden, desto weniger helle Bereiche sind vorhanden und desto deutlicher wird das Testergebnis.<sup>5, 7</sup>
**Gaze Plot:** <br> **Gaze Plot:** <br>
Gaze Plots zeigen den ganzen Blickverlauf einer Testperson. Visuell werden die Reihenfolge, Dauer und Sakkaden (schnelle und sprunghafte Blickbewegung) durch Kreise (Fixpunkte) und Linien (Blickbewegungen) dargestellt. Umso größer ein Kreis ist, desto größer ist die Dauer dieser Betrachtung. Durch die Nummerierung der Kreise ist es zudem möglich zu erkennen, welche Bereiche der Webseite, einem Nutzer als erstes aufgefallen sind.<sup>5, 7</sup> Gaze Plots zeigen den gesamten Blickverlauf einer Testperson. Visuell werden die Reihenfolge, Dauer und Sakkaden (schnelle und sprunghafte Blickbewegung) durch Kreise (Fixpunkte) und Linien (Blickbewegungen) dargestellt. Je größer ein Kreis ist, desto größer ist die Dauer dieser Betrachtung. Durch die Nummerierung der Kreise ist es zudem möglich zu erkennen, welche Bereiche der Webseite einem Nutzer als erstes aufgefallen sind.<sup>5, 7</sup>
### Card Sorting ### Card Sorting
Die Informationsstruktur einer Webseite ist ein wichtiger Faktor. Die ideale Methode, um eine benutzerfreundliche Navigationsstruktur zu entwickeln, ist Card Sorting. Bei diesem Verfahren werden Kategorien und Inhalte eines Systems auf Karten geschrieben. Die Teilnehmer fassen dabei die Begriffe in thematisch zusammengehörige Gruppen zusammen, wodurch sich zum Beispiel Oberpunkte einer Menüstruktur erarbeiten lassen. Durch das Card Sorting ist es auch möglich Begriffe zu erkennen, die sich nicht so leicht in einen Kategorie einfügen lassen oder missverständlich sind. Card Sorting lässt sich online (tool-basiert) oder offline (mit Karten) durchführen. Online können größere Nutzergruppen teilnehmen, wohingegen offline in der Gruppe Argumente besser erfasst und diskutiert werden können.<sup>8, 9</sup> Die Informationsstruktur einer Webseite ist ein wichtiger Faktor. Eine gute Methode, um eine benutzerfreundliche Navigationsstruktur zu entwickeln, ist Card Sorting. Bei diesem Verfahren werden Kategorien und Inhalte eines Systems auf Karten geschrieben. Die Teilnehmer fassen dabei die Begriffe in thematisch zusammengehörige Gruppen zusammen, wodurch sich zum Beispiel Oberpunkte einer Menüstruktur erarbeiten lassen. Durch das Card Sorting ist es auch möglich Begriffe zu erkennen, die sich nicht so leicht in einen Kategorie einfügen lassen oder missverständlich sind. Card Sorting lässt sich online (tool-basiert) oder offline (mit Karten) durchführen. Online können größere Nutzergruppen teilnehmen, wohingegen offline in der Gruppe Argumente besser erfasst und diskutiert werden können.<sup>8, 9</sup>
Generell lässt sich das Card Sorting in zwei Ansätzen unterteilen:<br> Generell lässt sich das Card Sorting in zwei Ansätzen unterteilen:<br>
**Geschlossenes Card Sorting:**<br> **Geschlossenes Card Sorting:**<br>
...@@ -52,7 +53,7 @@ Die Teilnehmer sortieren die Karten in schon vorgegebene Kategorien ein. Dadurch ...@@ -52,7 +53,7 @@ Die Teilnehmer sortieren die Karten in schon vorgegebene Kategorien ein. Dadurch
Im Gegensatz zum geschlossenen Card Sorting erstellen hier die Teilnehmer die Kategoriebezeichnungen. Das Offene Card Sorting zeigt, wie die Karten aus der Sicht der Teilnehmer logisch zusammengesetzt werden sollten.<sup>10</sup> Im Gegensatz zum geschlossenen Card Sorting erstellen hier die Teilnehmer die Kategoriebezeichnungen. Das Offene Card Sorting zeigt, wie die Karten aus der Sicht der Teilnehmer logisch zusammengesetzt werden sollten.<sup>10</sup>
### Fazit ### Fazit
Usability-Testmethoden können hilfreiche Werkzeuge sein, um eine Seite auf ihre Nutzerfreundlichkeit oder Fehler zu testen. Es gibt eine Vielzahl an Methoden und jede besitzt bestimmte Schwächen und Stärken. Somit ist die Auswahl des passenden Werkzeuges wichtig, denn nicht jede Testmethode lässt sich immer anwenden. Es kommt beispielsweise darauf an, was getestet wird, wie viel Zeit man für die Methode hat oder ob Testpersonen/technische Hilfsmittel zur Verfügung stehen. Denn nur so kommt ein vernünftiges Ergebnis oder Feedback zustande, um die Webseite zu verbessern. Usability-Testmethoden können hilfreiche Werkzeuge sein, um eine Seite auf ihre Nutzerfreundlichkeit oder Fehler zu testen. Es gibt eine Vielzahl an Methoden und jede von ihnen besitzt bestimmte Schwächen und Stärken. Somit ist die Auswahl des passenden Werkzeuges wichtig, denn nicht jede Testmethode lässt sich immer anwenden. Es kommt beispielsweise darauf an, was getestet wird, wie viel Zeit man für die Methode hat oder ob Testpersonen oder technische Hilfsmittel zur Verfügung stehen. Denn nur so kommt ein gutes Ergebnis bzw. Feedback zustande, um die Webseite zu verbessern.
<hr id="sources"> <hr id="sources">
#### Quellen #### Quellen
......
...@@ -6,23 +6,23 @@ category: usability ...@@ -6,23 +6,23 @@ category: usability
author: Hendrik Kahlen author: Hendrik Kahlen
--- ---
Die Usability von heute ist nicht mehr die gleiche wie vor 5 Jahren! Die Gründe sind unterschiedlich, weshalb in diesem Artikel daher einmal ein genauerer Blick auf den Wandel in der Usability geworfen werden soll. <!--more--> Wem die [Normen und Konventionen] der Usability noch nicht bekannt sind, der werfe an dieser Stelle zunächst einen Blick auf unsere entsprechende Unterrubrik. Die Usability von heute ist nicht mehr die gleiche wie vor 5 Jahren! Die Gründe sind unterschiedlich, weshalb in diesem Artikel ein genauerer Blick auf den Wandel in der Usability geworfen werden soll.<!--more--> Wem die [Normen und Konventionen] der Usability noch nicht bekannt sind, werfe an dieser Stelle zunächst einen Blick auf unsere entsprechende Unterrubrik.
### Gründe für Usability-Änderungen ### Gründe für Usability-Änderungen
Wie eingangs erwähnt gibt es mehrere Gründe für den Wandel und auch nach [usability.ch]{:target="_blank"} liegt der Hauptfokus dafür, in den technischen Veränderungen (Innovationen), dem verändertem User-Verhalten und der weniger starken Nutzung von verbotenen Design-Elementen. Mit technischen Veränderungen ist hier gemeint, dass sich Browser, Leistung des Endgeräts, usw. immer weiter verbessern, weshalb andere Design-Elemente möglich sind. Gleichzeitig ändert sich mit der Zeit das User-Verhalten, beispielsweise, weil eine beliebte Webseite ein Grundmuster für die Navigiation in die Köpfe der Masse gelegt hat (z.B. Google). Die weniger starke Nutzung von verbotenen Desigin-Elementen hat auch zur Folge, dass z.B. Pop-Ups nicht unbedingt immer verboten gehören, eben bei weniger starken Nutzung und nicht der exzessiven wie sie bei [Die schlimmsten Usability-Fehler]{:target="_blank"} beschrieben wurde.<sup>1</sup> Wie eingangs erwähnt, gibt es mehrere Gründe für den Wandel: Nach [usability.ch]{:target="_blank"} liegt der Hauptgrund dafür in den technischen Veränderungen (Innovationen) und dem verändertem Nutzerverhalten. Mit technischen Veränderungen ist hier gemeint, dass sich Browser und die Leistung der Endgeräte immer weiter verbessern, weshalb neue Design-Elemente möglich sind. Gleichzeitig ändert sich mit der Zeit das Nutzerverhalten, beispielsweise, weil eine beliebte Webseite ein Grundmuster für die Navigiation in die Köpfe der Masse gelegt hat (z.B. Google).<sup>1</sup>
### Was hat sich geändert? - Neue und alte Usability Regeln ### Was hat sich geändert? - Neue und alte Usability Regeln
Die Nutzung von Flash-Inhalten oder Webseiten die auf das Flash-Plugin angewiesen sind, wird heute nach Usability-Richtlinien als eher kritisch angesehen. Das liegt vor allem daran, dass Flash-Plugins sicherheitskritisch sind, auf Apple-Geräten nicht funktionieren und eine explizite Installation erforderlich ist, die Webseite also ohne das Plugin nicht (komplett) funktioniert. Im Jahr 2000 war dies aber noch anders, da es damals keine vergleichbaren Alternativen für schnelle Animationen auf meist noch statischen Webseiten gab. Mit HTML-5 gibt es aber heute eine solche Alternative (neben anderen), weshalb Flash-Nutzung heutzutage auch nicht Usability-konform ist. Eine gute Illustration eines (auf schlechte Weise) übertriebenen Gebrauchs von Flash findet sich auf [orrfelt.com]{:target="_blank"} und verdeutlicht die hier genannten Punkte.<sup>1</sup> Die Nutzung von Flash-Inhalten oder Webseiten die auf das Flash-Plugin angewiesen sind, wird heute nach Usability-Richtlinien als kritisch angesehen. Das liegt vor allem daran, dass Flash-Plugins sicherheitskritisch sind, auf vielen Apple-Geräten nicht funktionieren oder eine explizite Installation erforderlich ist, die Webseite also ohne das Plugin nicht (komplett) funktioniert. Noch Im Jahr 2000 war dies anders, da es damals keine vergleichbaren Alternativen für schnelle Animationen auf meist noch statischen Webseiten gab. Mit HTML5 gibt es jedoch heute eine solche Alternative (neben anderen), weshalb die Flash-Nutzung heutzutage nicht mehr als usabilitykonform angesehen wird. Eine gute Illustration eines (auf schlechte Weise) übertriebenen Gebrauchs von Flash findet sich auf [orrfelt.com]{:target="_blank"} und verdeutlicht die hier genannten Punkte.<sup>1</sup>
Auch haben sich die Positionen von Design-, Bedienelementen oder des eigentlichen Contents im Laufe der Jahre verändert, bzw. nähern diese sich einem Grenzmuster an. Mit Bezug auf [Einschränkungen der Werbung durch Usability]{:target="_blank"} ist es interessant zu sehen, wie sich die Erwartungen über die Position von Werbung auf einem Webseite-Raster verändert haben, bis sie seit 2009 auf der rechten Seite verharren. Auch haben sich die Positionen von Design-, Bedienelementen oder des eigentlichen Contents im Laufe der Jahre verändert, bzw. nähern diese sich einem Grenzmuster an. Mit Bezug auf [Einschränkungen der Werbung durch Usability]{:target="_blank"} ist es interessant zu sehen, wie sich die Erwartungen über die Position von Werbung auf einem Webseite-Raster verändert haben, bis sie seit 2009 auf der rechten Seite verharren.
Ein ähnlicher Wandel lässt sich bei der Suchfunktion feststellen, wobei hier noch zusätzlich bemerkenswert ist, dass die Erwartung einer Suchfunktion insgesamt zurück geht. Ein Grund dafür könnte in der schnelleren Suche über Google und in den meist nur einmaligen Besuchen liegen (ausgenommen sind Online-Shops). Die Position einer Suchfunktion von 2003-2009 wurde fast ausnahmslos in der oberen rechten Hälfte erwartet, wie auf [eResult] zu sehen ist.<sup>2</sup> Ein ähnlicher Wandel lässt sich bei der Suchfunktion feststellen, wobei hier noch zusätzlich bemerkenswert ist, dass die Erwartung einer Suchfunktion insgesamt zurück geht. Ein Grund dafür könnte in der schnelleren Suche über Google und in den meist nur einmaligen Besuchen liegen (ausgenommen sind Online-Shops). Die Position einer Suchfunktion von 2003-2009 wurde fast ausnahmslos in der oberen rechten Hälfte erwartet, wie auf [eResult] zu sehen ist.<sup>2</sup>
### Usability der Zukunft - eine Voraussage ### Usability der Zukunft - eine Blick in die Zukunft
Es gibt mehrere Usability-Design-Trends in 2016, wovon einige schon 2015 stark vertreten waren und auch noch weiterhin stark an Bedeutung gewinnen werden. Unter anderem ist dies das Responsive Web Design. Mit zahlreichen und mehr oder weniger verschiedenen Browsern und Endgeräten, wie etwa Smartphones, Tablets und Laptops, braucht es für diese unterschiedlichen Umgebungen das passende Design mit anderen Größenordnungen, Struktur- und Bedienelementen. Damit nicht für jede Umgebung eine eigene Version der Webseite erstellt werden muss, wird die Webseite "responsive" (engl, für reagierend) entwickelt, d.h. eine Webseite für alle Plattformen mit anderen Skalierungen.<sup>3</sup> Es gibt mehrere Usability-Design-Trends im Jahr 2016, wovon einige schon 2015 stark vertreten waren und auch noch weiterhin stark an Bedeutung gewinnen werden. Unter anderem ist dies das Responsive Web Design. Mit zahlreichen, mehr oder weniger verschiedenen, Browsern und Endgeräten, wie etwa Smartphones, Tablets und Laptops, braucht es für diese unterschiedlichen Umgebungen das passende Design mit anderen Größenordnungen, Struktur- und Bedienelementen. Damit nicht für jede Umgebung eine eigene Version der Webseite erstellt werden muss, wird die Webseite "responsive" (engl. für reagierend) entwickelt, also eine Webseite für alle Plattformen mit unterschiedlichen Abmessungen.<sup>3</sup>
Bemerkenswert ist hierbei auch, dass Google nach Responsive Design filtert und für mobile Endgeräte die Webseite benachteiligt, wenn sie durch den Test fallen. Google bietet zu diesem [Responsive Design Test]{:target="_blank"} ein Tool, mittels derer man seine Webseite auf Googles Konventionsanforderungen prüfen kann.<sup>3</sup> Bemerkenswert ist hierbei, dass die Google-Websuche nach Responsive Design filtert und für mobile Endgeräte Ergebnisse benachteiligt, wenn sie sich nicht an die Abmessungen anpassen. Google bietet mit einem [Responsive Design Test]{:target="_blank"} ein Tool, mittels dessen man seine Webseite auf Googles Konventionsanforderungen prüfen kann.<sup>3</sup>
Ein weiterer Trend sind die Card Style Layouts, womit sich sehr schnell und übersichtlich viel Content organisieren lässt. Dazu werden Bilder genutzt, die zum Thema des Contents passen, bzw. diesen bestmöglich zusammenfassen. Diese Layouts können auch gut in Kombination mit Responsive Design eingebracht werden. Ein solches Card-Style-Layout findet sich auf unserer [Home Page], auch wenn damit nicht die Kategorien organisiert sind verdeutlicht es ganz gut die Funktionsweise:<sup>4</sup> Ein weiterer Trend sind die Card Style Layouts, womit sich sehr schnell und übersichtlich viel Content organisieren lässt. Dazu werden Bilder genutzt, die zum Thema des Contents passen, bzw. diesen bestmöglich zusammenfassen. Diese Layouts können auch gut in Kombination mit Responsive Design eingebracht werden. Ein solches Card-Style-Layout findet sich auf unserer [Home Page]. Auch wenn damit nicht die Kategorien organisiert sind, verdeutlicht es gut die Funktionsweise:<sup>4</sup>
<section class="no-padding" id="portfolio"> <section class="no-padding" id="portfolio">
<div class="container-fluid"> <div class="container-fluid">
...@@ -47,14 +47,14 @@ Ein weiterer Trend sind die Card Style Layouts, womit sich sehr schnell und übe ...@@ -47,14 +47,14 @@ Ein weiterer Trend sind die Card Style Layouts, womit sich sehr schnell und übe
</div> </div>
</div> </div>
</section> </section>
Zu beachten ist an dieser Stelle natürlich, dass die gewählten Bilder zu den erwarteten Content der Kategorie passen müssen. Zu beachten ist an dieser Stelle natürlich, dass die gewählten Bilder zu dem erwarteten Content der Kategorie passen müssen.
Der spannendste Design-Trend ist aber wohl der des Story-Telling. Man überlege sich hierbei, wie wichtig Content für Webseiten ist. Folgt dieser Content als langer Text, der nicht auf passende Weise visuell aufbereit ist, so ist das lesen sehr mühselig. Mit Story-Telling gibt es die Möglichkeit dem User mit auf eine Story-Reise zu nehmen, indes ihm mit kleinen Texten und zum diesen Texten passenden und erklärenden Bildern sowie Videos die Story erzählt wird. Der Hauptvorteil dabei ist, dass durch die teils starken Bilder und Videos die Aufmerksamkeit des Lesers nicht verloren geht, vor allem aber damit ein zum Content passender Hintergrund einher geht, was auch eine Forderung der Usability-Konventionen ist. Der vermutlich spannendste Design-Trend ist das Story-Telling. Man überlege sich hierbei, wie wichtig Content für Webseiten ist. Folgt dieser Content als langer Text, der nicht auf passende Weise visuell aufbereit ist, so ist das lesen sehr mühselig. Mit Story-Telling gibt es die Möglichkeit dem Nutzer mit auf eine Story-Reise zu nehmen, wobei ihm mit kleinen Texten und zu diesen Texten passenden und erklärenden Bildern sowie Videos eine Geschichte erzählt wird. Der Hauptvorteil liegt darin, dass durch die teils starken Bilder und Videos die Aufmerksamkeit des Lesers nicht verloren geht, vor allem aber damit ein zum Inhalt passender Hintergrund einhergeht, was auch eine Forderung der Usability-Konventionen ist.
Auch werden Texte so interaktiver, d.h. der Nutzer steuert interaktiv die Geschichte durch scrollen oder Maus- oder Touchbewegungen.<sup>3, 5</sup> Auch werden Texte so interaktiver, wodurch. der Nutzer interaktiv die Geschichte durch scrollen oder Maus- oder Touchbewegungen steuern kann.<sup>3, 5</sup>
Eine schöne Verdeutlichung von Story Telling bietet [story.glass]{:target="_blank"}, wo Story Telling noch einmal mittels Story Telling erklärt wird. Eine schöne Verdeutlichung von Story Telling bietet [story.glass]{:target="_blank"}, wo Story Telling noch einmal mittels Story Telling erklärt wird.
### Fazit ### Fazit
Die Vielfältigkeit der Gründe des Wandels von Usability-Konventionen wurde nun kurz angerissen. Im Zuge der technischen Möglichkeiten wird es dabei auch zukünftig immer mehrere Möglichkeiten geben Web-Designs umzusetzen, von denen einige zukünftig nicht mehr Usability-gerecht sein könnten oder in anderer Gestalt auftauchen. Die Usability wird immer einem Wandel unterliegen, aber heutige Web-Designer sind gut aufgestellt, wenn sie aktuelle Trends im Auge behalten und diese usability-konform umsetzen. Die Vielfältigkeit der Gründe des Wandels von Usability-Konventionen wurde nun kurz angerissen. Im Zuge der technischen Möglichkeiten wird es dabei auch zukünftig immer verschiedene Möglichkeiten geben Web-Designs umzusetzen, von denen einige zukünftig nicht mehr usabilitygerecht sein dürften. Usability wird immer einem Wandel unterliegen, aber heutige Web-Designer sind gut beraten, wenn sie aktuelle Trends im Auge behalten und diese usabilitykonform umsetzen.
<hr id="sources"> <hr id="sources">
......
...@@ -6,45 +6,45 @@ category: barrierefreiheit ...@@ -6,45 +6,45 @@ category: barrierefreiheit
author: Jan Philipp Hörding author: Jan Philipp Hörding
--- ---
Das Internet ist in den vergangenen Jahren immer mehr in den Mittelpunkt der Gesellschaft gerückt. Es genießt eine viel höhere Bedeutsamkeit, als noch vor einigen Jahren. Sehr viele Tätigkeiten im Alltag finden heute über das Internet statt, sei es durch Nachrichten, Fernsehen, Einkäufe, Online Formulare und viele mehr. <!--more--> Das Internet ist in den vergangenen Jahren immer mehr in den Mittelpunkt der Gesellschaft gerückt. Es genießt eine viel höhere Bedeutsamkeit, als noch vor wenigen Jahren. Sehr viele Tätigkeiten im Alltag finden heute über das Internet statt, sei es durch Nachrichten, Fernsehen, Einkäufe, Online Formulare und viele mehr. <!--more-->
Gerade vor diesem Hintergrund sollte nicht vergessen werden, dass auch immer mehr Menschen mit Behinderung das Internet nutzen wollen. Eine entsprechende Sensibilisierung hat in den vergangenen Jahren stattgefunden und findet auch heute noch statt. So werden Webseiten für Menschen mit Behinderung angepasst, woraus alle Nutzer Vorteile erzielen, da Seiten so übersichtlicher und aufgeräumter aussehen und sich die Navigation vereinfacht. Gerade vor diesem Hintergrund sollte nicht vergessen werden, dass auch immer mehr Menschen mit Behinderungen das Internet nutzen wollen. Eine entsprechende Sensibilisierung hat in den vergangenen Jahren stattgefunden und findet auch heute noch statt. So werden Webseiten für Menschen mit Behinderung angepasst, woraus alle Nutzer Vorteile erzielen, da Seiten so übersichtlicher und aufgeräumter aussehen und sich die Navigation vereinfacht.
Im Folgenden werden einige der wichtigsten Techniken vorgestellt. Im Folgenden werden einige der wichtigsten Techniken vorgestellt.
<!--more--> <!--more-->
### Screenreader - die Schnittstelle zum Inhalt ### Screenreader - die Schnittstelle zum Inhalt
Unter einem Screenreader versteht man ein Bildschirmleseprogramm, welches Inhalte auf dem Bildschirm erfasst. Dies ist essentiell für Blinde und Sehbehinderte, da sie die Inhalte nicht selbst wahrnehmen können. Somit wird eine alternative Benutzerschnittstelle zur grafischen Benutzeroberfläche geboten. Unter einem Screenreader versteht man ein Bildschirmleseprogramm, welches Inhalte auf dem Bildschirm erfasst. Dies ist essentiell für Blinde und Sehbehinderte, da sie die Inhalte nicht selbst wahrnehmen können. Somit wird eine alternative Benutzerschnittstelle zur grafischen Benutzeroberfläche geboten.
Ein Screenreader erkennt alle Elemente, welche auf dem Bildschirm angezeigt werden. Es können nicht nur einfach Texte mittels Audioausgabe vorgelesen werden, sondern alle grafischen Elemente des Bildschirms. Der Nutzer kann also durch einen Screenreader alle Elemente auf dem Bildschirm wahrnehmen, denn die Software kann eine Vielzahl weiterer Informationen ausgeben. Dies kann beispielsweise die Position eines Fensters, eines Buttons und dessen Beschriftung oder auch ein Menu sein, in dem der Nutzer navigiert. Ein Screenreader erkennt alle Elemente, welche auf dem Bildschirm angezeigt werden. Es können nicht nur Texte mittels Audioausgabe vorgelesen werden, sondern alle grafischen Elemente des Bildschirms. Der Nutzer kann also durch einen Screenreader alle Elemente auf dem Bildschirm wahrnehmen, denn die Software kann eine Vielzahl weiterer Informationen ausgeben. Dies kann beispielsweise die Position eines Fensters, eines Buttons und dessen Beschriftung oder auch ein Menü sein, in dem der Nutzer navigiert.
Es kann also eine vollwertige Navigation gewährleistet werden.<sup>1, 2</sup> So kann eine vollwertige Navigation gewährleistet werden.<sup>1, 2</sup>
Es gibt eine Vielzahl an Programmen auf dem Markt wie etwa JAWS, welches als Marktführer im Bereich der Bildschirmleseprogramm gilt.<sup>4</sup> Des Weiteren gibt es auch Programme die direkt im Betriebssystem integriert sind, wie VoiceOver von Apple, dass mit Mac OS ausgeliefert wird.<sup>5</sup> Hierfür gibt eine Vielzahl an Programmen, wie etwa JAWS, das als Marktführer im Bereich der Bildschirmleseprogramm gilt.<sup>4</sup> Des Weiteren gibt es auch Programme, die direkt im Betriebssystem integriert sind, wie VoiceOver von Apple, das mit Mac OS ausgeliefert wird.<sup>5</sup>
Einige mögliche Anwendungen eines Screenreaders sind im Folgenden aufgelistet. Einige mögliche Anwendungen eines Screenreaders sind im Folgenden aufgelistet.
### Die Audioausgabe ### Die Audioausgabe
Eine Möglichkeit Texte, welche mit einen Screenreader erfasst wurden nicht visuell auszugeben ist die Audioausgabe. Der Text wird hierbei durch die Lautsprecher des Computers ausgegeben. Der Text klingt allerdings teilweise unangenehm, da die Aussprache nicht immer richtig ist und die Betonung nicht die Qualität eines Menschen erreicht.<sup>3</sup> Eine Möglichkeit Texte, welche mit einen Screenreader erfasst wurden, nicht visuell auszugeben ist die Audioausgabe. Der Text wird hierbei durch die Lautsprecher des Computers ausgegeben. Der Text klingt allerdings teilweise unangenehm, da die Aussprache nicht immer richtig ist und die Betonung nicht die Qualität eines Menschen erreicht.<sup>3</sup>
### Ausgabe in Braille-Schrift für Blinde ### Ausgabe in Braille-Schrift für Blinde
Falls eine Braillezeile vorhanden ist, kann der Text auch hierüber ausgegeben werden. Die vom Screenreader erfassten Inhalte werden an das Gerät weitergegeben und darauf ausgegeben. Wie bei der Blindenschrift wo die Zeichen mit 6 Punkten kodiert und erfühlt werden können, kann auf dem Gerät der Inhalt auf die gleiche Weise erkannt werden. Dazu werden bei Bedarf kleine Erhebungen aus dem Gerät geschoben, die haptisch erkannt werden können.<sup>6</sup> Falls eine Braillezeile vorhanden ist, kann der Text auch hierüber ausgegeben werden. Die vom Screenreader erfassten Inhalte werden an das Gerät weitergegeben und darauf ausgegeben. Wie bei der Blindenschrift, bei der Zeichen mit 6 Punkten kodiert und erfühlt werden können, kann auf dem Gerät der Inhalt auf die gleiche Weise erkannt werden. Dazu werden bei Bedarf kleine Erhebungen aus dem Gerät geschoben, die haptisch erkannt werden können.<sup>6</sup>
Der Inhalt einer Webseite kann - im Vergleich zur Audioausgabe - durch eine Braillezeile genauer erfasst werden, da so alle Buchstaben einzeln ausgegeben werden, wodurch die Rechtschreibung erkannt werden kann. Der Inhalt einer Webseite kann - im Vergleich zur Audioausgabe - durch eine Braillezeile genauer erfasst werden, da so alle Buchstaben einzeln ausgegeben werden, wodurch die Rechtschreibung erkannt werden kann.
Ein Nachteil der Braillezeile sind die hohen Anschaffungsgebühren, die durchaus einige 1000 € betragen können.<sup>11</sup> Ein Nachteil der Braillezeile sind die hohen Anschaffungsgebühren, die durchaus mehrere 1000 € betragen können.<sup>11</sup>
### Inhalte in Gebärdensprache für Gehörlose Menschen ### Inhalte in Gebärdensprache für gehörlose Menschen
Gehörlose Menschen haben häufig den Nachteil, dass sie komplexe Texte nicht so gut erfassen können. Dies liegt darin begründet, dass unsere Sprache eine Lautsprache ist und das Textverständnis in hohem Maße von dem gedanklichen Mitsprechen des Textes abhängt.<sup>12</sup> Gehörlose Menschen haben häufig das Problem, dass sie komplexe Texte nicht so gut erfassen können. Dies liegt darin begründet, dass unsere Sprache eine Lautsprache ist und das Textverständnis in hohem Maße von dem gedanklichen Mitsprechen des Textes abhängt.<sup>12</sup>
Für gehörlose Menschen sind daher Inhalte in Gebärdensprache sehr wichtig. Allerdings müssen Webseiten hierfür in Gebärdensprache umgewandelt werden. Dazu werden die Inhalte von einer Person in Gebärdensprache umgewandelt und in einem extra Bereich Angeboten, wie etwa auf der Seite des [Bundesministeriums der Justiz und für Verbraucherschutz][gebärdensprache]{:target="_blank"}. Für gehörlose Menschen sind daher Inhalte in Gebärdensprache sehr wichtig. Allerdings müssen Webseiten hierfür in Gebärdensprache umgewandelt werden. Dazu werden die Inhalte von einer Person in Gebärdensprache übersetzt und in einem eigenen Bereich Angeboten, wie etwa auf der Seite des [Bundesministeriums der Justiz und für Verbraucherschutz][gebärdensprache]{:target="_blank"}.
### Die Techniken im barrierefreien Internet ### Die Techniken im barrierefreien Internet
Das World Wide Web Consortium (W3C), welches Techniken und Spezifikationen im Internet standardisiert, hat die Web Accessibility Initiative (WAI) gegründet.<sup>8</sup> Diese Initiative beschäftigt sich mit dem barrierefreien Zugang zum Web. Von ihr wurden mehrere Standards veröffentlicht, die zum Beispiel festlegen, dass es Alternativen zu auditiven und visuellen Inhalten geben soll oder etwa das die Benutzung nicht auf ein Eingabegerät beschränkt ist. Das World Wide Web Consortium (W3C), welches Techniken und Spezifikationen im Internet standardisiert, hat die Web Accessibility Initiative (WAI) gegründet.<sup>8</sup> Diese Initiative beschäftigt sich mit dem barrierefreien Zugang zum Web. Von ihr wurden mehrere Standards veröffentlicht, die zum Beispiel festlegen, dass es Alternativen zu auditiven und visuellen Inhalten geben soll oder etwa dass die Benutzung nicht auf ein Eingabegerät beschränkt ist.
Barrierefreie Webseiten werden im Allgemeinen nicht durch Kompromisse beim Layout erreicht, sondern durch den webkonformen Einsatz von Auszeichnungs- und Stylesheetsprachen im Web.<sup>7</sup> Barrierefreie Webseiten werden im Allgemeinen nicht durch Kompromisse beim Layout erreicht, sondern durch den webkonformen Einsatz von Auszeichnungs- und Stylesheetsprachen im Web.<sup>7</sup>
Eine der wichtigsten Methoden für Barrierefreiheit ist die Trennung von Inhalt und Layout, damit der Inhalt von Webseiten schnell für Programme erkannt werden kann. Die HTML-Standards sollten eingehalten werden, also die korrekte Bezeichnung der Überschriften usw. Vieles lässt sich erreichen indem auf eine aussagekräftige Beschreibung geachtet wird.<sup>7, 9</sup> Eine der wichtigsten Methoden für Barrierefreiheit ist die Trennung von Inhalt und Layout, damit der Inhalt von Webseiten schnell für Programme erkannt werden kann. Die HTML-Standards sollten eingehalten werden, also die korrekte Bezeichnung der Überschriften usw. Vieles lässt sich erreichen, indem auf eine aussagekräftige Beschreibung geachtet wird.<sup>7, 9</sup>
Der Text sollte skalierbar sein, damit er an Bedürfnisse der Nutzer angepasst werden kann. Diese Bedürfnisse können zum Beispiel ein vergrößerter Text oder größere Abstände im Text sein. Der Text sollte skalierbar sein, damit er an Bedürfnisse der Nutzer angepasst werden kann. Diese Bedürfnisse können zum Beispiel ein vergrößerter Text oder größere Abstände im Text sein.
Grafiken lassen sich häufig zumindest grundlegend als Text beschreiben, dies ist eine große Hilfe für Sehbehinderte. Grafiken lassen sich häufig zumindest grundlegend als Text beschreiben, dies ist eine große Hilfe für Sehbehinderte.
...@@ -52,15 +52,15 @@ Auch gilt es die Plattformunabhängigkeit zu gewährleisten, da Nutzer mit unter ...@@ -52,15 +52,15 @@ Auch gilt es die Plattformunabhängigkeit zu gewährleisten, da Nutzer mit unter
### ARIA - Eine Empfehlung der W3C ### ARIA - Eine Empfehlung der W3C
Für Barrierefreie Webseiten sind einige Anpassungen in technischer Hinsicht sinnvoll, damit auf sie problemlos mit z.B. Screenreadern zugegriffen werden kann. Für barrierefreie Webseiten sind einige Anpassungen in technischer Hinsicht sinnvoll, damit auf sie problemlos mbeispielsweise mit Screenreadern zugegriffen werden kann.
Deshalb hat die Web Accessibility Initiative<sup>8, 9</sup> die ARIA (Accessible Rich Internet Applications) Initiative entwickelt. ARIA ist eine Erweiterung für HTML, die mittels JavaScript und Ajax realisiert wird und das Aussehen der Webseite nicht verändert<sup>7</sup>. Sie stellt Informationen für die barrierefreie Nutzung zur Verfügung. Dafür werden Webseiten nicht als statische Seiten betrachtet, sondern als Anwendungen. Deshalb hat die Web Accessibility Initiative<sup>8, 9</sup> die ARIA (Accessible Rich Internet Applications) Initiative entwickelt. ARIA ist eine Erweiterung für HTML, die mittels JavaScript und Ajax realisiert wird und das Aussehen der Webseite nicht verändert<sup>7</sup>. Sie stellt Informationen für die barrierefreie Nutzung zur Verfügung. Dafür werden Webseiten nicht als statische Seiten betrachtet, sondern als Anwendungen.
So können Elemente der Seite für Screenreader sichtbar gemacht werden. Auch werden Elemente, die sich selbst aktualisieren von Screenreader erkannt. So können Elemente der Seite für Screenreader sichtbar gemacht werden. Auch werden Elemente, die sich selbst aktualisieren von Screenreadern erkannt.
### Captcha-Systeme - das Problem der Barrierefreiheit ### Captcha-Systeme - Ein Problem für die Barrierefreiheit
Im Internet werden Captcha-Systeme eingesetzt, damit sich ein Nutzer als Mensch identifizieren kann und ausgeschlossen werden kann, dass ein Programm zugriff auf Funktionen bekommt. Diese Systeme sind häufig im Internet bei Anmeldeformularen oder ähnlichem zu finden. Zumeist werden Bilder eingesetzt, die eine verzerrte Ziffernfolge zeigen, welche richtig erkannt werden muss. Dies ist aber gerade für blinde oder sehbehinderte Menschen nicht möglich. Zum Teil werden auch akustische Systeme eingesetzt, hier muss z.B. eine vorgelesene Frage beantwortet werden. Dies ist jedoch wiederum nachteilig für taube Menschen oder für Nichtmuttersprachler. Im Internet werden Captcha-Systeme eingesetzt, damit sich Nutzer als Mensch identifizieren können und ausgeschlossen werden kann, dass ein Programm automatisierten Zugriff auf Funktionen erhält. Diese Systeme sind häufig im Internet bei Anmeldeformularen oder Ähnlichem zu finden. Zumeist werden Bilder eingesetzt, die eine verzerrte Ziffernfolge zeigen, welche richtig erkannt werden muss. Dies ist aber gerade für blinde oder sehbehinderte Menschen nicht möglich. Zum Teil werden auch akustische Systeme eingesetzt, hier muss z.B. eine vorgelesene Frage beantwortet werden. Dies ist jedoch wiederum nachteilig für taube Menschen oder für Nichtmuttersprachler.
Auch werden sich Captcha-Systeme in Zukunft dem Problem stellen müssen, dass künstliche Intelligenzen immer ausgefeilter werden und die Captcha-Systeme sich dem anpassen müssen, indem die Tests schwieriger werden, was wiederum bedeutet, dass Captchas für die Barrierefreiheit eine noch größere Hürde darstellen werden.<sup>10</sup> Auch werden sich Captcha-Systeme in Zukunft dem Problem stellen müssen, dass künstliche Intelligenzen immer ausgefeilter werden und die Captcha-Systeme sich dem anpassen müssen, indem die Tests schwieriger werden, was wiederum bedeutet, dass Captchas für die Barrierefreiheit eine noch größere Hürde darstellen.<sup>10</sup>
Somit ergibt sich hier ein großes Problem des barrierefreien Internets und es existiert momentan keine umfassende und zufriedenstellende Lösung. Somit ergibt sich hier ein großes Problem des barrierefreien Internets für das bisher keine umfassende und zufriedenstellende Lösung existiert.
<hr id="sources"> <hr id="sources">
......
...@@ -6,61 +6,44 @@ category: konventionen ...@@ -6,61 +6,44 @@ category: konventionen
author: Jörn Jürgens author: Jörn Jürgens
--- ---
Internetseiten können, ebenso wie Software, ergonome Grundsätze der Dialoggestaltung einhalten, welche in der Bildschirmarbeitsverordnung Internetseiten können, ebenso wie Software, ergonome Grundsätze der Dialoggestaltung einhalten, die in der sogenannten Bildschirmarbeitsverordnung
festgeschrieben sind.<sup>1</sup> festgeschrieben sind.<sup>1</sup>
<!--more--> <!--more-->
Bei diesen Leitlinien geht es um die Interaktion zwischen Mensch und Computer und wie diese zu mehr Konsistenz und Bei diesen Leitlinien geht es um die Interaktion zwischen Mensch und Computer und wie diese zu mehr Konsistenz und Gebrauchstauglichkeit geführt werden können. Im deutschsprachigen Raum ist die Norm DIN EN ISO 9241-110 gültig, welche sich aus folgenden Grundsätzen zusammensetzt:<sup>2</sup>
Gebrauchstauglichkeit geführt werden kann. Im deutschsprachigen Raum ist die Norm DIN EN ISO 9241-110 gültig, welche sich aus folgenden
Grundsätzen zusammensetzt:<sup>2</sup>
### Aufgabenangemessen ### Aufgabenangemessen
Die Dialogwege zwischen Fenstern, Webpages und Internetseiten und die auf diesen dargestellten informationen, sollten angemessen sein Die Dialogwege zwischen Fenstern, Webpages und Internetseiten und die auf diesen dargestellten Informationen, sollten angemessen sein und somit die Arbeitsschritte zur Erledigung einer Arbeitsaufgabe genau abbilden.<sup>1</sup>
und somit die Arbeitsschritte zur Erledigung einer Arbeitsaufgabe genau abbilden.<sup>1</sup>
Damit ist gemeint, dass der Benutzer bei einer Aufgabe, die er sich selbst stellt, genauen Schritten folgen kann um diese zu erfüllen. Dies Damit ist gemeint, dass der Benutzer bei einer Aufgabe, die er sich selbst stellt, genauen Schritten folgen kann um diese zu erfüllen. Dies kann zum Beispiel der Bestellvorgang auf einer Seite sein, bei dem der Benutzer über den Warenkorb, bis hin zum Bezahlvorgang, durch die komplette Bestellung geleitet wird.
kann zum Beispiel der Bestellvorgang auf einer Seite sein, bei dem der Benutzer über den Warenkorb, bis hin zum Bezahlvorgang, durch die komplette
Bestellung geleitet wird.
### Selbstbeschreibend ### Selbstbeschreibend
Alle Texte, Labels, Buttons, Meldungen und weitere Bestandteile der Internetseite sollten auf Anhieb vertständlich sein. Diese Bestandteile sollten Alle Texte, Labels, Buttons, Meldungen und weitere Bestandteile der Internetseite sollten auf Anhieb vertständlich sein. Diese Bestandteile sollten sich selbst so gut beschreiben, damit der Benutzer dieser Internetseite direkt weiß, was passiert wenn er diese benutzt, beziehungsweise wenn diese auftauchen.<sup>1</sup>
sich selbst so gut beschreiben, dass der Benutzer dieser Internetseite direkt weiß, was passiert wenn er diese benutzt, beziehungsweise wenn diese
auftauchen.<sup>1</sup>
### Steuerbar ### Steuerbar
Die Dialogwege auf der Internetseite, über Schaltflächen, Menüeinträge und Icons, sollten den Benutzer einfach und vor allem flexibel zum Ziel seiner Die Dialogwege auf der Internetseite, über Schaltflächen, Menüeinträge und Icons, sollten den Benutzer einfach und vor allem flexibel zum Ziel seiner Aufgabe führen. Dabei sollten Arbeitschritte rückgängig und Menüeinträge aufgehoben werden können.<sup>1</sup>
Aufgabe führen. Dabei sollten Arbeitschritte rückgängig und Menüeinträge aufgehoben werden können.<sup>1</sup>
Der Benutzer soll zum Beispiel beim Ausfüllen eines Bestellformulares am Ende nochmals seine Anschrift überprüfen und ändern können und zwischen den Der Benutzer soll zum Beispiel beim Ausfüllen eines Bestellformulares am Ende nochmals seine Anschrift überprüfen und ändern können und zwischen den Arbeitschritten, bis hin zur endgültigen Bestellung, ohne Weiteres wechseln können. Dabei soll der Benutzer auch selbst bestimmen können, wann und ob er einen Schritt weiter in der Arbeitsreihenfolge machen möchte.
Arbeitschritten, bis hin zur endgültigen Bestellung, ohne Weiteres wechseln können. Dabei soll der Benutzer auch selbst bestimmen können, wann und ob
er einen Schritt weiter in der Arbeitsreihenfolge machen möchte.
### Erwartungskonform ### Erwartungskonform
Bedienungsabläufe, Symbole und die Anordnung der Informationen auf der Internetseite sollten innerhalb dieser konsistent sein und für den Benutzer dem Bedienungsabläufe, Symbole und die Anordnung der Informationen auf der Internetseite sollten innerhalb dieser konsistent sein und für den Benutzer dem gewohnten Muster einer Internetseite entsprechen.<sup>1</sup>
gewohnten Muster einer Internetseite entsprechen.<sup>1</sup>
Der Benutzer soll also beim erstmaligen Benutzen der Internetseite, alleine durch seine Erfahrungswerte wissen, wo er zum Beispiel "die Suche" findet oder Der Benutzer soll also beim erstmaligen Benutzen der Internetseite, alleine durch seine Erfahrungswerte wissen, wo er zum Beispiel die Suche findet oder wie er sich im Allgemeinen auf dieser Internetseite zurecht findet und sich durch diese navigieren kann.
wie er sich im Allgemeinen auf dieser Internetseite zurecht findet und sich durch diese navigieren kann.
### Fehlertolerant ### Fehlertolerant
In allen Situationen, insbesondere bei einer Arbeitsaufgabe, soll die Internetseite weitestgehend dabei helfen Fehler zu vermeiden und dem Benutzer im In allen Situationen, insbesondere bei einer Arbeitsaufgabe, soll die Internetseite weitestgehend dabei helfen Fehler zu vermeiden und dem Benutzer im Nachhinein Möglichkeiten zur Kontrolle und zur Korrektur geben.<sup>1</sup>
nachhinein Möglichkeiten zur Kontrolle und zur Korrektur geben.<sup>1</sup>
So soll zum Beispiel bei einem Bestellformular darauf geachtet werden, dass bei dem Geburtsdatum gar nicht erst Buchstaben eingetragen werden können und falls So soll zum Beispiel bei einem Bestellformular darauf geachtet werden, dass beim Geburtsdatum gar nicht erst Buchstaben eingetragen werden können und falls doch etwas falsch gemacht wird, soll der Benutzer vor der Bestellbestätigung erneut alle Angaben kontrollieren und korrigieren können.
doch etwas falsch gemacht wird, soll der Benutzer vor der Bestellbestätigung erneut alles kontrollieren und korrigieren können.
### Individualisierbar ### Individualisierbar
Fenstereinstellungen, Spaltenanordnungen in Listen, Menüs und Weiteres sollte vom Benutzer selbst einstellbar und somit individualisierbar sein.<sup>1</sup> Fenstereinstellungen, Spaltenanordnungen in Listen, Menüs und Weiteres sollte vom Benutzer selbst einstellbar und somit individualisierbar sein.<sup>1</sup>
Ein Beispiel hierfür ist, dass der Benutzer zum Beispiel sein Profil auf einer Internetseite selbst einstellen kann, durch ein eigenes Foto und eine eigene Ein Beispiel hierfür ist, dass der Benutzer sein Profil auf einer Internetseite durch ein eigenes Foto und eine eigene Signatur selbst einstellen kann. Außerdem sollte er Suchergebnisse filtern und die Reihenfolgen ändern können.
Signatur. Außerdem sollte er Suchergebnisse Filtern und die Reihenfolgen ändern können.
<br> <br>
### Lernförderlich ### Lernförderlich
Alle Bedienungsschritte, Tastenkürzel, Menüeinträge, Funktionen und Fundorte der Informationen sollten für jede Webpage einem gleichen, schnell zu erlernbaren Alle Bedienschritte, Tastenkürzel, Menüeinträge, Funktionen und Fundorte der Informationen sollten für jede Webseite einem gleichen, schnell zu erlernbaren Prinzip folgen, damit sich der Benutzer nach dem erstmaligen Betreten der Seite auf den Folgeseiten schnell koordinieren kann.<sup>1</sup>
Prinzip folgen, damit sich der Benutzer nach dem erstmaligen Betreten der Seite auf den Folgeseiten komplett koordinieren kann.<sup>1</sup>
Die Webpages innerhalb einer Internetseite sollten somit schlicht gleich aussehen.
<hr id="sources"> <hr id="sources">
......
...@@ -6,24 +6,25 @@ category: funktionalitaet ...@@ -6,24 +6,25 @@ category: funktionalitaet
author: Dario Imsande author: Dario Imsande
--- ---
Durch das Bereitstellen bestimmter Funktionalitäten kann sich die Verweildauer von Besuchern der Website erhöhen. Andersherum gibt es jedoch auch Funktionalitäten, die Nutzer dazu bringen die Website zu verlassen. Deshalb ist die Wahl der richtigen Funktionalitäten besonders wichtig. Hierbei sollten sich die Auswahlkriterien an den Bedürfnissen und Fähigkeiten der Zielgruppe orientieren. Beispielsweise können Nutzer mit zu vielen oder unbekannten Funktionen überfordert sein. <sup>1</sup> Durch das Bereitstellen bestimmter Funktionalitäten kann sich die Verweildauer von Besuchern der Website erhöhen. Andersherum gibt es jedoch auch Funktionalitäten, die Nutzer dazu bringen die Website zu verlassen. Deshalb ist die Wahl der richtigen Funktionalitäten besonders wichtig. Hierbei sollten sich die Auswahlkriterien an den Bedürfnissen und Fähigkeiten der Zielgruppe orientieren. Beispielsweise können Nutzer mit zu vielen oder unbekannten Funktionen überfordert sein.<sup>1</sup>
<!--more--> <!--more-->
### Welche Funktionalitäten sollte eine erwartungskonforme Webseite bereitstellen? ### Welche Funktionalitäten sollte eine erwartungskonforme Webseite bereitstellen?
Bei der Auswahl der Funktionalitäten ist es wichtig sicherzustellen, dass diese mit dem Inhalt und Zweck der Webseite korrespondieren und dem Nutzer einen zusätzlichen Nutzen bieten. Denn dann wird diese Funktionalität von den Nutzern als hilfreich empfunden. Bei der Auswahl der Funktionalitäten ist es wichtig sicherzustellen, dass diese mit dem Inhalt und Zweck der Webseite korrespondieren und dem Nutzer einen zusätzlichen Nutzen bieten. Denn nur dann wird diese Funktionalität von den Nutzern als hilfreich empfunden.
![Websitefunktionen](http://www.informatik.uni-oldenburg.de/~iug15/ew/img/websitefunktionen.png "Websitefunktionen") ![Websitefunktionen](http://www.informatik.uni-oldenburg.de/~iug15/ew/img/websitefunktionen.png "Websitefunktionen")
In diesem Bild werden drei Bestandteile von Website gezeigt: Utilities, Sektionen, Navigationshilfen. Diese Gruppen von Funktionen unterstützen das erwartungskonforme Webdesign, indem sie dem Nutzer bei der Orientierung auf der Webseite helfen. Diese Funktionen können größtenteils frei kombiniert werden. Dabei sollte man sich an der Größe der Website, also aus wie vielen Webseiten sie besteht und an dem Zweck der Website orientieren. <sup>2</sup> In diesem Bild werden drei Bestandteile von Webseiten gezeigt: Utilities, Sektionen und Navigationshilfen. Diese Gruppen von Funktionen unterstützen das erwartungskonforme Webdesign, indem sie dem Nutzer bei der Orientierung auf der Webseite helfen. Diese Funktionen können größtenteils frei kombiniert werden. Dabei sollte man sich an der Größe der Webseite, also aus wie vielen einzelnen Seiten sie besteht und an dem Zweck der Website orientieren. <sup>2</sup>
Beispielsweise ist eine Suche erst ab einer bestimmten Größe notwendig, da man bei kleinen Websites mit der Hauptnavigation deutlich schneller die Zielseite erreichen kann. Genauso schöpft ein Navigationspfad sein Potenzial erst dann aus, wenn viele Navigationsebenen auf einer Website vorhanden sind. Beispielsweise ist eine Suche erst ab einer bestimmten Größe notwendig, da man bei kleinen Websites mit der Hauptnavigation deutlich schneller die Zielseite erreichen kann. Genauso schöpft ein Navigationspfad sein Potenzial erst dann aus, wenn viele Navigationsebenen auf einer Website vorhanden sind.
Weitere wichtige Funktionalitäten für Webseiten sind beispielsweise die Kontaktmöglichkeit, die Auswahl der Sprache, die Schrift vergößern/verkleinern, Anmeldebereich für registrierte Nutzer, die Datenschutzrichtlinien, die AGB. Je nach Zweck der Website sollten weitere Funktionalitäten bereitgestellt werden. Unternehmen sollten generell Links zu "Über-Uns" und Jobangebote in ihre Seite einbinden. Für das Beispiel Online-Shops kommen noch Funktionen wie Links zu Versand- und Verpackungskosten, Kundenkonto, Warenkorb und Zertifizierungen hinzu. <sup>3</sup> Weitere wichtige Funktionalitäten für Webseiten sind beispielsweise die Kontaktmöglichkeit, die Auswahl der Sprache, das Vergößern und Verkleinern der Schrift, ein Anmeldebereich für registrierte Nutzer, die Datenschutzrichtlinien und die AGB. Je nach Zweck der Webseite sollten weitere Funktionalitäten bereitgestellt werden. Unternehmen sollten generell Links zu "Über-Uns" und Jobangebote in ihre Seite einbinden. Bei Online-Shops kommen noch Funktionen wie Links zu Versand- und Verpackungskosten, dem Kundenkonto, dem Warenkorb und Zertifizierungen hinzu.<sup>3</sup>
### Worauf muss ich achten, wenn ich Funktionalitäten erstelle? ### Worauf muss ich achten, wenn ich Funktionalitäten erstelle?
Bei einer erwartungskonformen Webseite spielt nicht nur die Auswahl, sondern auch die Positionierung der Funktionalitäten auf der Webseite eine große Rolle, denn im Laufe der Jahre haben die Nutzer Erfahrungen beim Surfen im Internet gesammelt. Diese führen dazu, dass sie mehrheitlich Funktionalitäten in den gleichen Bereichen der Seite erwarten. <sup>3</sup> Bei einer erwartungskonformen Webseite spielt nicht nur die Auswahl, sondern auch die Positionierung der Funktionalitäten auf der Webseite eine große Rolle, denn im Laufe der Jahre haben die Nutzer Erfahrungen beim Surfen im Internet gesammelt. Diese führen dazu, dass sie mehrheitlich Funktionalitäten in ähnlichen Bereichen der Seite erwarten.<sup>3</sup>
![Positionierungsschema für Online-Shops](http://www.informatik.uni-oldenburg.de/~iug15/ew/img/Positionierungsschema_OnlineShops.jpg "Positionierungsschema für Online-Shops") ![Positionierungsschema für Online-Shops](http://www.informatik.uni-oldenburg.de/~iug15/ew/img/Positionierungsschema_OnlineShops.jpg "Positionierungsschema für Online-Shops")
Auf diesem Bild ist ein Positionierungsschema für Online Shops zu sehen. Darauf lässt sich erkennen, dass Funktionen wie die "Suche", der "Hilfe-Link", der "Login-Bereich" im oberen rechten Seitenbereich erwartet werden. In der Bildschirmmitte wird der Content angezeigt. Im unteren Bereich der Seite werden Links zu Datenschutz, Impressum, AGB erwartet. Werbung wird hier als optionales Element am rechten Seitenrand eingeordnet. Anhand eines solchen Schemas kann ein Webentwickler einen erwartungskonformen Online-Shop erarbeiten. Auf diesem Bild ist ein Positionierungsschema für Online-Shops zu sehen. Darauf lässt sich erkennen, dass Funktionen wie die "Suche", der "Hilfe-Link" oder der "Login-Bereich" im oberen rechten Seitenbereich erwartet werden. In der Bildschirmmitte wird der Inhalt angezeigt. Im unteren Bereich der Seite werden Links zu Datenschutz, Impressum und den AGB erwartet. Werbung wird hier als optionales Element am rechten Seitenrand eingeordnet. Anhand eines solchen Schemas kann ein Webentwickler einen erwartungskonformen Online-Shop erarbeiten.
### Fazit ### Fazit
Für eine erwartungskonforme Website ist es wichtig, eine Auswahl an Funktionalitäten anzubieten, die auf die Zielgruppe abgestimmt ist. Des Weiteren ist es von Vorteil die Positionierung der Elemente auf der Webseite den Erwartungen der Nutzer anzupassen, um eine möglichst hohe Verweildauer auf der Seite zu erreichen. Für eine erwartungskonforme Website ist es wichtig, eine Auswahl an Funktionalitäten anzubieten, die auf die Zielgruppe abgestimmt ist. Des Weiteren ist es von Vorteil die Positionierung der Elemente auf der Webseite den Erwartungen der Nutzer anzupassen, um eine möglichst hohe Verweildauer auf der Seite zu erreichen.
......
...@@ -6,64 +6,47 @@ category: konventionen ...@@ -6,64 +6,47 @@ category: konventionen
author: Jörn Jürgens author: Jörn Jürgens
--- ---
Bei der Erstellung einer Website, gerade wenn diese öffentlich zugänglich ist, gibt es Gesetze, die Eingehalten werden müssen. In diesem Kapitel werden Bei der Erstellung einer Website, gerade wenn diese öffentlich zugänglich ist, gibt es Gesetze, die Eingehalten werden müssen. In diesem Kapitel werden die Impressumspflicht und die grundsätzlichen Gesetze des BITV behandelt.
hauptsächlich die Impressumspflicht und die Grundsätzlichen Gesetze des BITV behandelt.
<!--more--> <!--more-->
###Impressumspflicht ###Impressumspflicht
Die Impressumspflicht, welche 1997 in Kraft getreten ist, dient in erster Linie dem Verbraucherschutz, aber auch Konkurrenten oder Kunden, die sich über Die Impressumspflicht, welche 1997 in Kraft getreten ist, dient in erster Linie dem Verbraucherschutz, aber auch Konkurrenten oder Kunden, die sich über den Anbieter einer Internetseite informieren oder gerichtlich gegen diesen vorgehen wollen.<sup>3</sup> Dieses Gesetz besagt, dass ein Impressum zur Anbieterkennzeichnung geführt werden muss, welches unmittelbar von der Internetseite erreichbar sein muss.<sup>2</sup>
den Inhaber einer Internetseite informieren oder gerichtlich gegen diesen vorgehen wollen.<sup>3</sup> Dieses Gesetz besagt schlicht, dass ein Impressum zur Anbieterkennzeichnung
geführt werden muss, welches unmittelbar von der Internetseite erreichbar sein muss.<sup>2</sup>
##Inhalt des Impressums ##Inhalt des Impressums
In dem Impressum muss der Name, die Anschrift und eine Möglichkeit zur schnellen Kontaktaufnahme, beispielsweise per Email, des Inhabers der Internetseite aufgeführt werden. In dem Impressum muss der Name, die Anschrift und eine Möglichkeit zur schnellen Kontaktaufnahme, beispielsweise per E-Mail aufgeführt werden. Außerdem muss ein zweiter Kommunikationsweg eröffnet werden, was zum Beispiel die Telefonnummer sein kann. Als zweiter Kommunikationsweg reicht aber auch eine automatisierte Kontakaufnahme, zum Beispiel durch eine elektronische Anfragemaske.<sup>2</sup>
Außerdem muss ein zweiter Kommunikationsweg eröffnet werden, welcher zum Beispiel die Telefonnummer sein kann. Als zweiter Kommunikationsweg reicht aber auch eine
automatisierte Kontakaufnahme, zum Beispiel durch eine elektronische Anfragemaske.<sup>2</sup>
Ist der Anbieter in einem Register wie dem Handels- oder Vereinsregister eingetragen, muss auch diese Registernummer im Impressum aufgeführt werden. Des weiteren müssen Inhaber Ist der Anbieter in einem Register wie dem Handels- oder Vereinsregister eingetragen, muss auch diese Registernummer im Impressum aufgeführt werden. Des weiteren müssen Inhaber, deren Betrieb von Aufsichtsbehörden überwacht wird (etwa Spielhallenbetreiber), Angaben zur zuständigen Aufsichtsbehörde machen, damit der Benutzer die Möglichkeit hat dort Beschwerde einzureichen.<sup>2</sup>
deren Betrieb von Aufsichtsbehörden überwacht werden, zum Beispiel Spielhallenbetreiber, Angaben zur zuständigen Aufsichtsbehörde machen, damit der Benutzer die Möglichkeit hat
dort Beschwerde einzureichen.<sup>2</sup>
##Geltungsbereich ##Geltungsbereich
Grundsätzlich sollte jede Internetseite ein Impressum führen. Es gibt allerdings Ausnahmen, wenn die Internetseite zum Beispiel ausschließlich persönlichen Zwecken dient. Kein Impressum muss geführt werden, wenn:<sup>2</sup>
Grundsätzlich muss jede Internetseite ein Impressum führen. Es gibt allerdings Ausnahmen, wenn die Internetseite zum Beispiel ausschließlich dem persönlichen Zweck
dient. Kein Impressum muss geführt werden, wenn:<sup>2</sup>
+ Inhalte Passwortgeschützt sind + Inhalte Passwortgeschützt sind
+ Inhalte aus dem engsten Lebensbereich nur für mich selbst existieren + Inhalte aus dem engsten Lebensbereich nur für den Ersteller selbst existieren
Ein Impressum ist also Pflicht für alle geschäftsmäßigen und öffentlichen Internetseiten, also alle, die nicht nur dem persönlichen Zweck dienen. Ein Impressum ist also verpflichtend für alle geschäftsmäßigen und öffentlichen Internetseiten.
---------------------------------- ----------------------------------
<br> <br>
###[BITV] ###[BITV]
Die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz vom 12.09.2011 sorgt dafür, dass Die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz vom 12.09.2011 sorgt dafür, dass behinderte Menschen bei der Benutzung von Internetseiten nicht benachteiligt werden. Hierbei wird ein gesetzlicher Geltungsbereich ebenso wie anzuwendende Standards definiert, nach denen gehandelt werden kann. Die Verordnung wird regelmäßig unter Berücksichtigung des technischen Fortschritts überprüft und gegebenenfalls überarbeitet und angepasst.<sup>1</sup>
behinderte Menschen bei der Benutzung der Internetseite nicht benachteiligt werden. Hierbei wird ein gesetzlicher Geltungsbereich
ebenso wie anzuwendende Standards definiert, nach denen gehandelt werden kann. Die Verordnung wird regelmäßig unter Berücksichtigung des technischen
Fortschritts überprüft und gegebenenfalls überarbeitet und angepasst.<sup>1</sup>
<br> <br>
##Geltungsbereich ## Geltungsbereich
Die Verordnung gilt für Behörden der Bundesverwaltung und deren Internetauftritte und -angebote, sowie grafische Programmoberflächen, die öffentlich Die Verordnung gilt für Behörden der Bundesverwaltung und deren Internetauftritte und -angebote, sowie grafische Programmoberflächen, die öffentlich zugänglich sind.<sup>1</sup>
zugänglich sind.<sup>1</sup>
<br> <br>
##Handlungsbereich ## Handlungsbereich
Die Internetauftritte und Angebote müssen so gestaltet sein, dass behinderte Menschen im Sinne des §3 des Behindertengleichstellungsgesetzes<sup>4</sup>, die Die Internetauftritte und Angebote müssen so gestaltet sein, dass behinderte Menschen im Sinne des §3 des Behindertengleichstellungsgesetzes<sup>4</sup>, die Internetseite benutzen können. Da diese Menschen ohne weiteres die Informationstechnik nicht benutzen können, muss ihnen also eine Möglichkeit gegeben werden, die Benutzung zugänglich zu machen.<sup>1</sup>
Internetseite benutzen können. Da diese Menschen ohne weiteres die Informationstechnik nicht benutzen können, muss ihnen also eine Möglichkeit gegeben
werden, die Benutzung zugänglich zu machen.<sup>1</sup>
<br> <br>
##Anzuwendende Standards ## Anzuwendende Standards
Die Informationen müssen so dargestellt werden, dass sie vom Benutzer wahrgenommen werden können und auch die Komponente der Schnittstellen müssen dahingehend Die Informationen müssen so dargestellt werden, dass sie vom Benutzer wahrgenommen werden können und auch die Komponenten der Schnittstellen müssen dahingehend angepasst werden. Außerdem muss die Startseite des Internetangebots Informationen zum Inhalt und der Navigation geben, welche in Gebärdensprache und leichter Sprache zu schreiben sind.<sup>1</sup>
angepasst werden. Außerdem muss die Startseite des Internetangebots Informationen zum Inhalt und der Navigation geben, welche Gebärdensprache und leichter Sprache
zu schreiben sind.<sup>1</sup>
<br> <br>
......
...@@ -9,27 +9,26 @@ author: Jannik S. ...@@ -9,27 +9,26 @@ author: Jannik S.
Eine Webseite wird mit dem Internet, also mit dem Begriff „*online*“ assoziiert. Was also haben *Offline*-Funktionalitäten im Bereich erwartungskonformer Webseiten zu suchen? Eine Webseite wird mit dem Internet, also mit dem Begriff „*online*“ assoziiert. Was also haben *Offline*-Funktionalitäten im Bereich erwartungskonformer Webseiten zu suchen?
Webseiten erreicht man, indem man die URL, also die Adresse der Internetseite, in die Navigationsleiste seines Browsers eingibt. Ein Internetbrowser kann neben diesen Webseiten aus dem Internet auch Offline-Webseiten anzeigen, also solche, die sich nur lokal auf dem Gerät befinden und nicht mit dem Internet verbunden sind. Über eine Offline-Webseite kann man beispielsweise Multimedia-Präsentationen darstellen. <!--more--> Webseiten erreicht man, indem man die URL, also die Adresse der Internetseite, in die Navigationsleiste seines Browsers eingibt. Ein Internetbrowser kann neben diesen Webseiten aus dem Internet auch Offline-Webseiten anzeigen, also solche, die sich nur lokal auf dem Gerät befinden und nicht mit dem Internet verbunden sind. Über eine Offline-Webseite kann man beispielsweise Multimedia-Präsentationen darstellen. <!--more-->
Ein weiteres Konzept, komplett internetloser Webseiten sind offline „*Single Page Applications*“ (Einzelseiten-Webanwendung). Die Seite [TiddlyWiki][tiddlywiki]{:target="_blank"}<sup>3</sup> bietet beispielsweise eine dieser "Single Page Applications" zum herunterladen an. Hierbei handelt es sich um einen persönlichen Notizblock, auf den man über seinen Internetbrowser zugreift und Notizen hinzufügt. Diese Notizen gelangen aber nie ins Internet sondern werden lokal auf der Festplatte gespeichert. Ein weiteres Konzept, komplett internetloser Webseiten sind offline „*Single Page Applications*“ (Einzelseiten-Webanwendung). Die Seite [TiddlyWiki][tiddlywiki]{:target="_blank"}<sup>3</sup> bietet beispielsweise eine dieser "Single Page Applications" zum herunterladen an. Hierbei handelt es sich um einen persönlichen Notizblock, auf den man über seinen Internetbrowser zugreift und Notizen hinzufügt. Diese Notizen gelangen aber nie ins Internet, sondern werden lokal auf der Festplatte gespeichert.
Wirklich interessant aber werden Seiten, welche im Internet laufen, aber viele der Funktionalitäten auf den Computer des Nutzers verlagern und somit verschiedene Offline-Features anbieten. Somit kann der Besucher Teilbereiche einer Webseite auch dann benutzen, wenn er kurzzeitig die Internetverbindung verliert. Ein sehr praktisches Beispiel hierfür ist die beta-Version, also die nicht komplett fertiggestellte Seitenerweiterung [„Gmail Offline“][gmailoffline]{:target="_blank"}<sup>4</sup> von Google. Diese erlaubt es dem Nutzer - nach einer ersten Synchronisierung mit dem jeweiligen Gmail-Account - sämtliche Mails auch ohne Internetzugriff zu lesen oder darauf zu antworten (abgeschickt werden die E-Mails wenn wieder ein Internetzugriff vorhanden ist). Diese Funktion ist äußerst praktisch, da einem ein E-Mail-Entwurf, den man in der Internetseite eingibt nicht verloren geht wenn das Internet ausfällt bevor man auf „*Absenden*“ gedrückt hat.<sup>1</sup> Wirklich interessant werden Seiten, die im Internet vorgehalten werden, aber viele der Funktionalitäten auf den Computer des Nutzers verlagern und somit verschiedene Offline-Features anbieten. So kann der Besucher Teilbereiche einer Webseite auch dann benutzen, wenn er kurzzeitig die Internetverbindung verliert. Ein sehr praktisches Beispiel hierfür ist die beta-Version, also die nicht komplett fertiggestellte Seitenerweiterung [„Gmail Offline“][gmailoffline]{:target="_blank"}<sup>4</sup> von Google. Diese erlaubt es dem Nutzer - nach einer ersten Synchronisierung mit dem jeweiligen Gmail-Account - sämtliche Mails auch ohne Internetzugriff zu lesen oder darauf zu antworten (abgeschickt werden die E-Mails, wenn wieder ein Internetzugriff vorhanden ist). Diese Funktion ist äußerst praktisch, da einem ein E-Mail-Entwurf, den man in der Internetseite eingibt, nicht verloren geht, wenn das Internet ausfällt, bevor man auf „*Absenden*“ gedrückt hat.<sup>1</sup>
Auch wenn die Anzahl der Breitbandanschlüsse in Deutschland in den Vorjahren [drastisch gestiegen][fazstatistik]{:target="_blank"}<sup>2</sup> ist, macht es dennoch Sinn, Teilbereiche einer Webseite auf das Endgerät des Nutzers ausuzlagern. Offline-Technologien können die Daten von jedem Besucher individuell *cachen* (zwischenspeichern), was der Webapplikation erlaubt, die für den Nutzer relevanten Daten noch schneller anzuzeigen, als wenn dieser alles neu herunterladen müsste. Der Server, also dort wo die Internetseite und damit die Webapplikation die der Besucher benutzt liegt, bekommt nur die Veränderungen zu sehen, und passt die Daten dementsprechend an. Auch wenn die Anzahl der Breitbandanschlüsse in Deutschland in den vergangenen Jahren [drastisch gestiegen][fazstatistik]{:target="_blank"}<sup>2</sup> ist, macht es dennoch Sinn, Teilbereiche einer Webseite auf das Endgerät des Nutzers ausuzlagern. Offline-Technologien können die Daten von jedem Besucher individuell *cachen* (zwischenspeichern), was der Webapplikation erlaubt, die für den Nutzer relevanten Daten noch schneller anzuzeigen, als wenn dieser alles neu herunterladen müsste. Der Server bekommt nur die Veränderungen zu sehen, und passt die Daten dementsprechend an.
[Cookies][cookieswiki]{:target="_blank"} speichern auch einen Teil an Informationen offline, jedoch ist hierbei die Kapazität zu gering um derarte Seiteninhalte zu speichern. Auch *Plugins* (Zusatzmodule), wie Flash oder Java können Inhalte zwischenspeichern. Hierbei ist jedoch vorausgesetzt, dass das Plugin beim Benutzer installiert ist, sodass man durch benutzen dieser einige Nutzer von diesen Funktionalitäten ausschließt. [Cookies][cookieswiki]{:target="_blank"} speichern auch Informationen offline, jedoch ist hierbei die Kapazität zu gering, um derarte Seiteninhalte zu speichern. Auch *Plugins* (Zusatzmodule), wie Flash oder Java können Inhalte zwischenspeichern. Hierbei ist jedoch vorausgesetzt, dass das Plugin beim Benutzer installiert ist, sodass man durch das Verwenden dieser einige Nutzer von den Funktionalitäten ausschließt.
### Was sind moderne Methoden zum Zwischenspeichern? ### Was sind moderne Methoden zum Zwischenspeichern?
Es gibt primär zwei relevante offline-Funktionalitäten in HTML5: Zum einen das „*application caching*“ und den „*offline storage*“ (auch „*client-side storage*“). Beim application caching werden Teile der grundlegenden Programmlogik und der Bedienoberfläche zwischengespeichert, und beim offline storage werden nutzerspezifische Inhalte und Daten gespeichert. Es gibt primär zwei relevante offline-Funktionalitäten in HTML5: Zum einen das „*application caching*“ und den „*offline storage*“ (auch „*client-side storage*“). Beim application caching werden Teile der grundlegenden Programmlogik und der Bedienoberfläche zwischengespeichert, wohingegen beim offline storage nutzerspezifische Inhalte und Daten gespeichert werden.
Application caching ist zum Teil bereits durch den Internetbrowser möglich, welcher besuchte Webseitenlayouts zwischenspeichern kann um die Seite beim erneuten Aufruf schneller darzustellen. So würde bei dem oben genannten Beispiel „Gmail Offline“ das Layout und das Design der Seite (also die HTML- und die CSS-Struktur) zwischengespeichert. Die durch den Browser angebotene Funktionalität bleibt jedoch nicht für immer vorhanden, sondern wird irgendwann durch aktuellere Inhalte ausgetauscht. Ein richtiger application cache hat dabei sozusagen einen „Sonderstatus“, denn diese Inhalte bleiben auf der Festplatte vorhanden bis sie manuell gelöscht werden. Application caching ist bereits durch alle Internetbrowser möglich. Hirbei werden besuchte Webseitenlayouts zwischenspeichert, um die Seite beim erneuten Aufruf schneller darzustellen. So würde bei dem oben genannten Beispiel „Gmail Offline“ das Layout und das Design der Seite (also die HTML- und die CSS-Struktur) zwischengespeichert. Die durch den Browser angebotene Funktionalität bleibt jedoch nicht für immer vorhanden, sondern wird irgendwann durch aktuellere Inhalte ausgetauscht. Ein richtiger application cache hat dabei sozusagen einen „Sonderstatus“, denn diese Inhalte bleiben auf der Festplatte vorhanden, bis sie manuell gelöscht werden.
Mit Hilfe des application cache kann der Nutzer also die Seite sofort laden, aber was geschieht, wenn er in seinem vorherigen Besuch der Seite eine E-Mail verfasst hat und als Entwurf gespeichert hat? Solche Daten sind nutzerspezifisch und deshalb nicht im application cache gespeichert. Stattdessen können diese Daten im offline storage gespeichert werden. Somit kann auch der Entwurf sofort absendebereit dargestellt werden. Würde der Nutzer nun Text zu der E-Mail hinzufügen, würden nur diese Veränderungen an den Server übermittelt und gleichzeitig lokal gespeichert werden. Sollte das Internet erneut abgeschaltet werden, sind die letzten Änderungen immer noch vorhanden. Logisch wird dabei auch, dass der Seitenanbieter damit deutlich Bandbreite einsparen kann, da die Veränderungen viel kleiner sind als die gesamte Seite. Mit Hilfe des application cache kann der Nutzer also die Seite sofort laden. Aber was geschieht, wenn er in seinem vorherigen Besuch der Seite eine E-Mail verfasst hat und als Entwurf gespeichert hat? Solche Daten sind nutzerspezifisch und deshalb nicht im application cache gespeichert. Stattdessen können diese Daten im offline storage gespeichert werden. So kann auch der Entwurf einer E-Mail sofort absendebereit dargestellt werden. Würde der Nutzer nun Text zur E-Mail hinzufügen, würden nur diese Veränderungen an den Server übermittelt und gleichzeitig lokal gespeichert werden. Sollte die Verbindung zum Internet erneut unterbrochen werden, sind die letzten Änderungen immer noch vorhanden. Deutlich wird dabei auch, dass der Seitenanbieter damit Bandbreite einsparen kann, da die Veränderungen viel kleiner sind, als die gesamte Seite.
### Wofür kann man Offline-Speicher noch verwenden? ### Wofür kann man Offline-Speicher noch verwenden?
Mit lokalem Speicher kann man auch andere Resultate erzielen. Beispielsweise kann man dadurch Informationen auf den Nutzer soweit auslagern, dass man auf eine eigene Datenbank verzichten kann. Dies hat unter anderem den Vorteil, dass der Nutzer sich nicht zwangsweise registrieren muss, und trotzdem die Webseite mit seinen eigenen Daten benutzen kann. Logischerweise sollte dies nur für nicht-sensitive Daten geschehen, beispielsweise kann man so den Suchverlauf eines Nutzers auf einer Webseite darstellen. Mit lokalem Speicher kann man auch andere Funktionen erzielen. Beispielsweise kann man dadurch Informationen auf den Nutzer soweit auslagern, dass man auf eine eigene Datenbank verzichten kann. Dies hat unter anderem den Vorteil, dass der Nutzer sich nicht zwangsweise registrieren muss und trotzdem die Webseite mit seinen eigenen Daten benutzen kann. Logischerweise sollte dies nur für nicht-sensible Daten geschehen, beispielsweise kann man so den Suchverlauf eines Nutzers auf einer Webseite darstellen.
Ein weiterer Verwendungszweck ist das sogenannte **Host-Proof Hosting**. Hierbei wird die Verschlüsselung von sensitiven Informationen auf den Nutzer ausgelagert. Das bedeutet, dass beispielsweise ein Passwort nie im Klartext den Browser verlässt, sondern vom Browser des Nutzers automatisch verschlüsselt wird. Würde ein potentieller Angreifer die Verbindung des Nutzers mit einer Internetseite abfangen, würde er also nicht das Passwort erlangen können, sondern nur die verschlüsselte Variante dessen, von der er nicht ohne Weiteres auf das Passwort schließen könnte. An dieser Stelle ist es aber wichtig zu erwähnen, dass diese auf den ersten Blick sehr sichere Art der Verschlüsselung [nicht absolut sicher ist][javascriptharmful]{:target="_blank"}<sup>5</sup>.
Ein weiterer Verwendungszweck ist das sogenannte **Host-Proof Hosting**. Hierbei wird die Verschlüsselung von sensiblen Informationen auf den Nutzer ausgelagert. Das bedeutet, dass beispielsweise ein Passwort nie im Klartext den Browser verlässt, sondern vom Browser des Nutzers automatisch verschlüsselt wird. Würde ein potentieller Angreifer die Verbindung des Nutzers mit einer Internetseite abfangen, würde er also nicht das Passwort erlangen können, sondern nur die verschlüsselte Variante dessen, von der er nicht ohne Weiteres auf das Passwort schließen könnte. An dieser Stelle ist es aber wichtig zu erwähnen, dass diese auf den ersten Blick sichere Art der Verschlüsselung [nicht absolut sicher ist][javascriptharmful]{:target="_blank"}<sup>5</sup>.
### Fazit ### Fazit
Offline-Funktionalitäten haben viel Wachstumspotential. Dabei muss das Ziel nicht unbedingt sein, dass eine Webapplikation auch im Flugzeug oder im Zug benutzbar ist. Mit aktuellen Funktionen wie dem "HTML5 offline storage" hat ein moderner Entwickler viele Möglichkeiten um seine Seite nicht nur schneller sondern auch praktischer und für den Nutzer individueller zu gestalten. Offline-Funktionalitäten haben viel Wachstumspotential. Dabei muss das Ziel nicht unbedingt sein, dass eine Webapplikation auch im Flugzeug oder im Zug benutzbar ist. Mit aktuellen Funktionen wie dem "HTML5 offline storage" hat ein moderner Entwickler viele Möglichkeiten um seine Seite nicht nur schneller sondern auch praktischer und für den Nutzer individueller zu gestalten.
......
...@@ -6,46 +6,35 @@ category: barrierefreiheit ...@@ -6,46 +6,35 @@ category: barrierefreiheit
author: Wenke Namuth author: Wenke Namuth
--- ---