Commit ac51f305 authored by Adrian Jagusch's avatar Adrian Jagusch
Browse files

Mitglieder in Config-Datei ausgelagert

parent 16b5c4f5
...@@ -10,3 +10,53 @@ markdown: kramdown ...@@ -10,3 +10,53 @@ markdown: kramdown
# Outputting # Outputting
permalink: /:categories/:title/ permalink: /:categories/:title/
members:
-
name: Stephan A.
role: Autor
image: stephan_a.jpg
-
name: Martin B.
role: Autor
image: martin_b.jpg
-
name: Florian D.
role: Qualitätsbeauftragter
image: florian_d.jpg
-
name: Jan H.
role: Autor
image: jan_h.jpg
-
name: Dario I.
role: Außenminister
image: dario_i.jpg
-
name: Adrian J.
role: Webseitenbeauftragter
image: jannik_s.jpg
-
name: Jörn J.
role: Autor
image: joern_j.jpg
-
name: Hendrik K.
role: Autor
image: hendrik_k.jpg
-
name: Lennart K.
role: Autor
image: lennart_k.jpg
-
name: Wenke N.
role: Autorin
image: wenke_n.jpg
-
name: Jannik S.
role: Autor
image: jannik_s.jpg
-
name: Martin S.
role: Autor
image: martin_s.jpg
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="col-lg-8 col-lg-offset-2 text-center"> <div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Kontakt aufnehmen</h2> <h2 class="section-heading">Kontakt aufnehmen</h2>
<hr class="primary"> <hr class="primary">
<p>Wir sind ist am besten über den E-Mail-Verteiler zu erreichen:</p> <p>Wir sind ist am besten über unseren E-Mail-Verteiler zu erreichen:</p>
</div> </div>
</div> </div>
<div class="col-lg-6 col-lg-offset-3 text-center"> <div class="col-lg-6 col-lg-offset-3 text-center">
......
<section class="no-padding" id="members"> <section class="no-padding" id="portfolio">
<div class="container-fluid"> <div class="container-fluid">
<div class="row no-gutter"> <div class="row no-gutter">
<div class="col-lg-2 col-sm-3"> {% for member in site.members %}
<a href="#" class="portfolio-box"> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<img src="img/members/jannik_s.jpg" class="img-responsive" alt=""> <div class="portfolio-box">
<img src="img/members/{{ member.image }}" class="img-responsive" alt="">
<div class="portfolio-box-caption"> <div class="portfolio-box-caption">
<div class="portfolio-box-caption-content"> <div class="portfolio-box-caption-content">
<div class="project-category text-faded"> <div class="project-category text-faded">
Category {{ member.role }}
</div> </div>
<div class="project-name"> <div class="project-name">
Jannik S. {{ member.name }}
</div> </div>
</div> </div>
</div> </div>
</a> </div>
</div> </div>
<div class="col-lg-2 col-sm-3"> {% endfor %}
<a href="#" class="portfolio-box"> </div>
<img src="img/members/adrian_j.jpg" class="img-responsive" alt=""> </div>
</section>
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Adrian J.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/wenke_n.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Wenke N.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/martin_b.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin B.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/martin_s.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin S.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/lennart_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Lennart K.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/joern_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jörn J.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/stephan_a.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Stephan A.
</div>
</div>
</div>
</a>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/florian_d.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Florian D.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/jan_h.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jan P. H.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/hendrik_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Hendrik K.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<a href="#" class="portfolio-box">
<img src="img/members/dario_i.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Dario I.
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="no-padding" id="membersAlternative">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/jannik_s.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jannik Spieker
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/adrian_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Adrian Jagusch
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/wenke_n.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Wenke Namuth
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/martin_b.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin Bieder
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/martin_s.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Martin Sonntag
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/lennart_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Lennart Krühsel
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/joern_j.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jörn Jürgens
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/stephan_a.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Stephan Adolf
</div>
</div>
</div>
</a>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/florian_d.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Florian Decker
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/jan_h.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Jan P. Hörding
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/hendrik_k.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Hendrik Kahlen
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/members/dario_i.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Dario Imsande
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
{% include call-to-action.html %} {% include call-to-action.html %}
{% include services.html %} {% include services.html %}
{% include members.html %} {% include members.html %}
{% include membersAlternative.html %}
{% include aside.html %} {% include aside.html %}
{% include contact.html %} {% include contact.html %}
{% include footer.html %} {% include footer.html %}
......
...@@ -5,9 +5,10 @@ subtitle: Es gibt viele Usability-Fettnäpfchen die vermieden werden sollten ...@@ -5,9 +5,10 @@ subtitle: Es gibt viele Usability-Fettnäpfchen die vermieden werden sollten
category: usability category: usability
author: Hendrik Kahlen author: Hendrik Kahlen
--- ---
Usability-Fehler findet man zahlreich auf beinahe jeder Webseite, mit größeren und kleineren Auswirkungen. Wir wollen in diesem Artikel bei der Veranschaulichung der wichtigsten Usability-Fehler unter anderem Fragen beantworten wie: „Warum ist der Usability-Fehler so schlimm?“, „Welche weiteren Auswirkungen hat dieser Fehler?“ und „Wie kann der Fehler vermieden werden?“. Ziel dabei ist es insgesamt ein klareres Verständnis für Usability-Fehler und deren Vermeidung zu schaffen, sodass Besucher Ihrer Seite nicht durch Usability-Fehler gestört oder gar abgeschreckt werden. Usability-Fehler findet man zahlreich auf beinahe jeder Webseite, mit größeren und kleineren Auswirkungen. Wir wollen in diesem Artikel bei der Veranschaulichung der wichtigsten Usability-Fehler unter anderem Fragen beantworten wie: „Warum ist der Usability-Fehler so schlimm?“, „Welche weiteren Auswirkungen hat dieser Fehler?“ und „Wie kann der Fehler vermieden werden?“. Ziel dabei ist es insgesamt ein klareres Verständnis für Usability-Fehler und deren Vermeidung zu schaffen, sodass Besucher Ihrer Seite nicht durch Usability-Fehler gestört oder gar abgeschreckt werden.
### Falsches Desing ### Falsches Design
Eine der wohl am häufigsten gemachten Fehler ist der eines falschen Designs. Dieses muss nicht etwa schillernd, blinkend und/oder bunt sein, es reicht aus, wenn das gewählte Design nicht zum Content passt und damit den Besucher verwirrt. Als Besucher eines eines großen Unternehmens erwartet man schließlich auch ein schlichtes und seriöses design und kein "flippiges Start-up"-Design. Ist dies nicht so, sorgt dies für Verwirrung aufgrund des Kontrasts zu den Erwartungen. Ebenso wichtig ist es dabei, dass sich das gewählte Design über die gesamte Webseite erstreckt, ein Bruch auf Unterseiten verwirrt den Nutzer ebenfalls.<sup>1</sup> Eine der wohl am häufigsten gemachten Fehler ist der eines falschen Designs. Dieses muss nicht etwa schillernd, blinkend und/oder bunt sein, es reicht aus, wenn das gewählte Design nicht zum Content passt und damit den Besucher verwirrt. Als Besucher eines eines großen Unternehmens erwartet man schließlich auch ein schlichtes und seriöses design und kein "flippiges Start-up"-Design. Ist dies nicht so, sorgt dies für Verwirrung aufgrund des Kontrasts zu den Erwartungen. Ebenso wichtig ist es dabei, dass sich das gewählte Design über die gesamte Webseite erstreckt, ein Bruch auf Unterseiten verwirrt den Nutzer ebenfalls.<sup>1</sup>
Auch ist es möglich, dass Hintergründe und andere Designelemente so gewählt sind, dass Sie Informationsaufnahme stören. Ein Beispiel dafür sind Texte die kaum einen [Kontrast zum Hintergrund] bieten. Zu bemerken sei an dieser Stelle aber, dass es für gewisse Zwecke durchaus sinnvoll ist den Kontrast niedrig zu halten, z.B. wenn man die Aufmerksamkeit auf einen anderen Bereich legen möchte. Vergewissern Sie sich also, dass Sie ihre Schriftart, Schriftfarbe und den Hintergrund richtig gewählt haben.<sup>1</sup><sup>6</sup> Auch ist es möglich, dass Hintergründe und andere Designelemente so gewählt sind, dass Sie Informationsaufnahme stören. Ein Beispiel dafür sind Texte die kaum einen [Kontrast zum Hintergrund] bieten. Zu bemerken sei an dieser Stelle aber, dass es für gewisse Zwecke durchaus sinnvoll ist den Kontrast niedrig zu halten, z.B. wenn man die Aufmerksamkeit auf einen anderen Bereich legen möchte. Vergewissern Sie sich also, dass Sie ihre Schriftart, Schriftfarbe und den Hintergrund richtig gewählt haben.<sup>1</sup><sup>6</sup>
......
...@@ -6,14 +6,9 @@ category: konventionen ...@@ -6,14 +6,9 @@ category: konventionen
author: Lennart Krühsel author: Lennart Krühsel
--- ---
Usability spielt eine wichtige Rolle, wenn es darum geht, Besucher auf eine Webseite zu bekommen und diese auch zu halten. Deshalb sind über die Jahre Konventionen und Richtlinien bezüglich der Usability entstanden, deren Umsetzung von den Besuchern eine Webseite erwartet wird.
Usability spielt eine wichtige Rolle, wenn es darum geht, Besucher auf eine Webseite zu bekommen und diese auch zu halten. Deshalb sind über die Jahre Konventionen und Richtlinien bezüglich der Usability entstanden, deren Umsetzung von den Besuchern eine Webseite erwartet wird. ### Auswahl von Schrift und Design
<br>
### Auswahl von Schrift und Design:
Die richtige Schrift und das richtige Design, spielen eine große Rolle für die Benutzerfreundlichkeit und Barrierefreiheit einer Seite. Das Design sollte so gewählt sein, dass der relevante Inhalt der Webseite im Vordergrund steht. Überschriften sollten auf Webseiten deutlich hervorgehoben, zum Beispiel durch größere, unterstrichene oder fettgedruckte Buchstaben, da Überschriften dem Benutzer bei der Navigation helfen. <sup>3</sup> Die richtige Schrift und das richtige Design, spielen eine große Rolle für die Benutzerfreundlichkeit und Barrierefreiheit einer Seite. Das Design sollte so gewählt sein, dass der relevante Inhalt der Webseite im Vordergrund steht. Überschriften sollten auf Webseiten deutlich hervorgehoben, zum Beispiel durch größere, unterstrichene oder fettgedruckte Buchstaben, da Überschriften dem Benutzer bei der Navigation helfen. <sup>3</sup>
...@@ -26,11 +21,9 @@ Im Allgemeinen gilt bei dem Design, weniger ist mehr, da eine Reizüberflutung b ...@@ -26,11 +21,9 @@ Im Allgemeinen gilt bei dem Design, weniger ist mehr, da eine Reizüberflutung b
### Ansprüche an die Navigation: ### Ansprüche an die Navigation:
Für Benutzer ist es wichtig, sich schnell auf einer Seite zurechtzufinden, da er i.d.R. Keine Lust hat, sich lange mit der Navigation aufzuhalten. Falls dem Besucher eine Webseite nicht zusagt, kann er sich ganz einfach eine andere Webseite suchen, die ähnliche Inhalte hat. Für Benutzer ist es wichtig, sich schnell auf einer Seite zurechtzufinden, da er i.d.R. Keine Lust hat, sich lange mit der Navigation aufzuhalten. Falls dem Besucher eine Webseite nicht zusagt, kann er sich ganz einfach eine andere Webseite suchen, die ähnliche Inhalte hat.
Deshalb ist die Navigation von großer Wichtigkeit, auch hier gibt es einige Sachen, die von den Benutzern mehr oder weniger erwartet werden. Wichtig ist, dass dem Besucher jederzeit klar ist, wo er sich auf unserer Webseite befindet, dazu gibt es verschiedene Möglichkeiten, man kann zum Beispiel in der Navigationsleiste die gerade ausgewählte Seite hervorheben oder sog. Breadcrumbs Deshalb ist die Navigation von großer Wichtigkeit, auch hier gibt es einige Sachen, die von den Benutzern mehr oder weniger erwartet werden. Wichtig ist, dass dem Besucher jederzeit klar ist, wo er sich auf unserer Webseite befindet, dazu gibt es verschiedene Möglichkeiten, man kann zum Beispiel in der Navigationsleiste die gerade ausgewählte Seite hervorheben oder sog. Breadcrumbs
einbinden, die praktisch einen Verlauf der verschachtelten Seiten anzeigen.<sup>4</sup> einbinden, die praktisch einen Verlauf der verschachtelten Seiten anzeigen.<sup>4</sup>
![breadcrumb](http://www.informatik.uni-oldenburg.de/~iug15/ew/img/brotkruemel.png "breadcrumb") ![breadcrumb](http://www.informatik.uni-oldenburg.de/~iug15/ew/img/brotkruemel.png "breadcrumb")
...@@ -50,22 +43,15 @@ Bei größeren Webseiten kann es schwer sein, eine Konsistenz zu erhalten, dabei ...@@ -50,22 +43,15 @@ Bei größeren Webseiten kann es schwer sein, eine Konsistenz zu erhalten, dabei
<br> <br>
### Hilfestellungen: ### Hilfestellungen
Für den Fall, dass Besucher auf unserer Seite auf Probleme stoßen, bietet es sich an, bestimmte Hilfestellungen zur Verfügung zu stellen. Zum Einen wäre das ein FAQ (Frequently Asked Questions), welches häufig gestellte Fragen beantwortet und bereits einen großen Teil der aufkommenden Fragen oder Probleme löst. Eine weitere Hilfestellung wäre eine Hilfeseite, die die auf der Webseite verfügbaren Funktionen erklärt. Sollten auf der Webseite viele Fremdwörter vorkommen, bietet sich ein Glossar an, in dem die Wörter erklärt werden.<sup>2</sup><sup>3</sup> Für den Fall, dass Besucher auf unserer Seite auf Probleme stoßen, bietet es sich an, bestimmte Hilfestellungen zur Verfügung zu stellen. Zum Einen wäre das ein FAQ (Frequently Asked Questions), welches häufig gestellte Fragen beantwortet und bereits einen großen Teil der aufkommenden Fragen oder Probleme löst. Eine weitere Hilfestellung wäre eine Hilfeseite, die die auf der Webseite verfügbaren Funktionen erklärt. Sollten auf der Webseite viele Fremdwörter vorkommen, bietet sich ein Glossar an, in dem die Wörter erklärt werden.<sup>2</sup><sup>3</sup>
<br> ### Weitere Usabilityaspekte
### Weitere Usabilityaspekte:
Ein mittlerweile sehr wichtiger Aspekt der Usability bildet die korrekte Darstellung der Webseite auf mobilen Endgeräten. Dazu gibt es verschiedene Umsetzungsmöglichkeiten, zum Einen kann das „Responsive Design“ angewendet werden, bei dem sich alle Webinhalte an die Größe des Fensters anpassen, was allerdings auch einige Nachteile birgt, wie man unter „Nachteile von Responsive Design“ nachlesen kann. Zum Anderen gibt es die Möglichkeit, eine zweite Seitenversion zu erstellen, die speziell auf mobile Endgeräte zugeschnitten ist, dabei werden die Besucher auf die mobile-URL umgeleitet, die normalerweise eine der folgenden Formen hat: "http://m.webseite.de" oder "http://mobile.webseite.de". <sup>6</sup> Ein mittlerweile sehr wichtiger Aspekt der Usability bildet die korrekte Darstellung der Webseite auf mobilen Endgeräten. Dazu gibt es verschiedene Umsetzungsmöglichkeiten, zum Einen kann das „Responsive Design“ angewendet werden, bei dem sich alle Webinhalte an die Größe des Fensters anpassen, was allerdings auch einige Nachteile birgt, wie man unter „Nachteile von Responsive Design“ nachlesen kann. Zum Anderen gibt es die Möglichkeit, eine zweite Seitenversion zu erstellen, die speziell auf mobile Endgeräte zugeschnitten ist, dabei werden die Besucher auf die mobile-URL umgeleitet, die normalerweise eine der folgenden Formen hat: "http://m.webseite.de" oder "http://mobile.webseite.de". <sup>6</sup>
Außerdem wird empfohlen, die Ladezeiten der Webseite möglichst kurz zu halten, da zu lange Ladezeiten die Geduld des Besuchers strapazieren und ihn unnötig Zeit kosten. <sup>3</sup> Außerdem wird empfohlen, die Ladezeiten der Webseite möglichst kurz zu halten, da zu lange Ladezeiten die Geduld des Besuchers strapazieren und ihn unnötig Zeit kosten. <sup>3</sup>
<br>
<small> <small>
<sup>1</sup> [Richtlinien für barrierefreie Webinhalte 2.0](http://www.w3.org/Translations/WCAG20-de/#content-structure-separation). Abgerufen: 18.11.2015. <sup>1</sup> [Richtlinien für barrierefreie Webinhalte 2.0](http://www.w3.org/Translations/WCAG20-de/#content-structure-separation). Abgerufen: 18.11.2015.
</small><br> </small><br>
...@@ -83,4 +69,4 @@ Außerdem wird empfohlen, die Ladezeiten der Webseite möglichst kurz zu halten, ...@@ -83,4 +69,4 @@ Außerdem wird empfohlen, die Ladezeiten der Webseite möglichst kurz zu halten,
</small><br> </small><br>
<small> <small>
<sup>6</sup> [Mobile Optimierung](https://de.onpage.org/wiki/Mobile_Optimierung) Abgerufen: 21.11.2015. <sup>6</sup> [Mobile Optimierung](https://de.onpage.org/wiki/Mobile_Optimierung) Abgerufen: 21.11.2015.
</small><br> </small><br>
\ No newline at end of file
...@@ -5,6 +5,7 @@ subtitle: Heute Hui morgen Pfui, dieser Grundsatz gilt zuweilen auch für Usabil ...@@ -5,6 +5,7 @@ subtitle: Heute Hui morgen Pfui, dieser Grundsatz gilt zuweilen auch für Usabil
category: usability category: usability
author: Hendrik Kahlen author: Hendrik Kahlen
--- ---
Ist die Usability von heute noch die gleiche wie vor 5 Jahren? –kurz „Nein“! Die Gründe dafür liegen überweigend in gestiegenen Nutzererwartungen und –Erfahrungen. In diesem Artikel soll daher einmal ein genauerer Blick auf den Wandel in der Usability geworfen werden. Wem noch die [Normen und Konventionen] der Usability noch nicht bekannt sind, der werfe einen Blick auf unsere Unterrubrik. Ist die Usability von heute noch die gleiche wie vor 5 Jahren? –kurz „Nein“! Die Gründe dafür liegen überweigend in gestiegenen Nutzererwartungen und –Erfahrungen. In diesem Artikel soll daher einmal ein genauerer Blick auf den Wandel in der Usability geworfen werden. Wem noch die [Normen und Konventionen] der Usability noch nicht bekannt sind, der werfe einen Blick auf unsere Unterrubrik.
### Gründe für Usability-Änderungen ### Gründe für Usability-Änderungen
...@@ -14,7 +15,7 @@ Die Gründe für die Änderungen sind vielfältig, konzentrieren sich aber auf d ...@@ -14,7 +15,7 @@ Die Gründe für die Änderungen sind vielfältig, konzentrieren sich aber auf d
### 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 ist heute nach Usability-Richtlinien nicht mehr gern gesehen. Das liegt vor allem daran, dass flash-Plugins sicherheitskritisch sind, auf Apple-Geräten nicht funktionieren und man das Plugin exta installiert haben muss, die Website also nicht für jeden funktioniert. 2000 war dies aber noch