Commit ac51f305 authored by Adrian Jagusch's avatar Adrian Jagusch

Mitglieder in Config-Datei ausgelagert

parent 16b5c4f5
......@@ -10,3 +10,53 @@ markdown: kramdown
# Outputting
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 @@
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Kontakt aufnehmen</h2>
<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 class="col-lg-6 col-lg-offset-3 text-center">
......
<section class="no-padding" id="members">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-2 col-sm-3">
<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 S.
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-2 col-sm-3">
<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 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="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
{% for member in site.members %}
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="portfolio-box">
<img src="img/members/{{ member.image }}" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
{{ member.role }}
</div>
<div class="project-name">
{{ member.name }}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<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 @@
{% include call-to-action.html %}
{% include services.html %}
{% include members.html %}
{% include membersAlternative.html %}
{% include aside.html %}
{% include contact.html %}
{% include footer.html %}
......
......@@ -5,9 +5,10 @@ subtitle: Es gibt viele Usability-Fettnäpfchen die vermieden werden sollten
category: usability
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.
### 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>
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
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.
<br>
### Auswahl von Schrift und Design:
### 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>
......@@ -26,11 +21,9 @@ Im Allgemeinen gilt bei dem Design, weniger ist mehr, da eine Reizüberflutung b
### 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.
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>
![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
<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>
<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>
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>
<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>
......@@ -83,4 +69,4 @@ Außerdem wird empfohlen, die Ladezeiten der Webseite möglichst kurz zu halten,
</small><br>
<small>
<sup>6</sup> [Mobile Optimierung](https://de.onpage.org/wiki/Mobile_Optimierung) Abgerufen: 21.11.2015.
</small><br>
\ No newline at end of file
</small><br>
......@@ -5,6 +5,7 @@ subtitle: Heute Hui morgen Pfui, dieser Grundsatz gilt zuweilen auch für Usabil
category: usability
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.
### 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
### 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 anders, da es damals keine vergleichbaren alternativen für schnelle Animationen auf meist noch statischen Webseiten gab. Mit HTML-5 gibt es aber schnellere und ohne Plugin funktionierende Alternativen, weshalb Flash-Nutzung heutzutage auch verpöhnt. Auch aber wurde der Gebraucht von Flash-Teilweise auf schlechte Weise stark übertrieben, wie dies von [orrfelt.com](http://orrfelt.com/) gut illustriert wird. Wer mag kann diese Seite auch einmal auf dem Smartphone aufrufen. <sup>1</sup>
Auch haben sich die Positionen von Design-Elementen, Bedienelementen oder Content im Laufe der Jahre verändert, bzw. nähern diese sich einem Grenzmuster an. Mit Bezug auf [Einschränkungen der Werbung durch Usability] ist es interessant zu sehen, wie sich die Erwartungen über die Position von Werbung auf dem Website-Raster vom Kopf der Seite (2003) hinzu der rechten Seite (2009) der Website bewegt haben.
Auch haben sich die Positionen von Design-Elementen, Bedienelementen oder Content im Laufe der Jahre verändert, bzw. nähern diese sich einem Grenzmuster an. Mit Bezug auf [Einschränkungen der Werbung durch Usability] ist es interessant zu sehen, wie sich die Erwartungen über die Position von Werbung auf dem Website-Raster vom Kopf der Seite (2003) hinzu der rechten Seite (2009) der Website bewegt haben.
> ![Werbeposition](http://www.eresult.de/fileadmin/Bilder/forschungsbeitraege/Suchfunktion_2003bis2009.jpg)
Ähnlich sieht es bei der Suchfunktion aus. Bemerkenswert hierbei ist, dass die Erwartung einer Suchfunktion zurück geht, was wohl an der schnelleren Suche über Google oder die meist nur einmaligen Besuche liegt (ausgenommen sind Online-Shops). Die Position einer Suchfunktion von 2003-2009 wurde fast ausnahmslos in der oberen rechten Hälfte erwartet.<sup>2</sup>
......@@ -22,7 +23,7 @@ Auch haben sich die Positionen von Design-Elementen, Bedienelementen oder Conten
> ![Suchfunktionposition](http://www.eresult.de/fileadmin/Bilder/forschungsbeitraege/Werbung_2003_bis_2009_links.jpg)
### Usability der Zukunft - eine Voraussage
Es gibt mehrere Usability-Design-Trends in 2016, einige davon waren auch schon in 2015 stark vertreten und werden auch noch weiterhin stark an Bedeutung gewinnen. Unter anderem ist dies das Responive Web Design. Mit zahlreichen und mehr oder weniger verschiedenen Browsern und Endgeräten, wie etwa die Smartphones und Tablets, 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 Website erstellt werden muss, wird die Website responsive entwickelt, d.h. eine Website für alle Plattformen mit anderen Layouts.<sup>3</sup>
Es gibt mehrere Usability-Design-Trends in 2016, einige davon waren auch schon in 2015 stark vertreten und werden auch noch weiterhin stark an Bedeutung gewinnen. Unter anderem ist dies das Responive Web Design. Mit zahlreichen und mehr oder weniger verschiedenen Browsern und Endgeräten, wie etwa die Smartphones und Tablets, 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 Website erstellt werden muss, wird die Website responsive entwickelt, d.h. eine Website für alle Plattformen mit anderen Layouts.<sup>3</sup>
> ![Responsive Web Design](https://think360studio.com/wp-content/uploads/2015/07/responisve-website-design-2016.png)
Bemerkenswert hierbei auch, dass Google nach Responsive Design filtert und für mobile Endgeräte die Seite benachteiligt, wenn sie durch den Test fallen. Google bietet zu diesem [Resppnsive Design Test] ein Tool.
......@@ -32,7 +33,7 @@ Ein weiterer Trend sind die Card Style Layouts, womit sich sehr schnell und übe
#outerdiv {position: relative; width: 100%;
}
#innerdiv {
position: relative;
position: relative;
}
</style>
<div id="outerdiv">
......@@ -41,7 +42,7 @@ position: relative;
</div>
</div>
Der mit am sapnnendste Design-Trend ist aber wohl das Story-Telling. Man überlege sich hierbei, wie wichtig Content für Websites ist, aber lange Texte zu lesen meist sehr mühsam ist, wenn dieser nicht auf visuell aufbereit ist. 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, erklärenden und beeindruckenden Bildern und Videos die Story erzählt wird. Der Hauptvorteil dabei ist, dass durch die Bilder und Videos die Aufmerksamkeit des Lesers nicht verloren geht. Vor allem geht mit den Bildern und Videos ein zum Content passender Hintergrund einher, was eine Forderung der Usability-Konventionen ist.
Der mit am sapnnendste Design-Trend ist aber wohl das Story-Telling. Man überlege sich hierbei, wie wichtig Content für Websites ist, aber lange Texte zu lesen meist sehr mühsam ist, wenn dieser nicht auf visuell aufbereit ist. 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, erklärenden und beeindruckenden Bildern und Videos die Story erzählt wird. Der Hauptvorteil dabei ist, dass durch die Bilder und Videos die Aufmerksamkeit des Lesers nicht verloren geht. Vor allem geht mit den Bildern und Videos ein zum Content passender Hintergrund einher, was eine Forderung der Usability-Konventionen ist.
Auch werden Texte so interaktiver, d.h. der Nutzer steuert interaktiv die Geschichte durch scrollen oder Mausbewegungen/Touchbewegungen<sup>5</sup>
Eine schöne Verdeutlichung von Story Telling bietet [story.glass](http://story.glass/), wo Story Telling noch einmal erklärt wird.
......
......@@ -6,32 +6,26 @@ category: konventionen
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, welche in der Bildschirmarbeitsverordnung
festgeschrieben sind.<sup>1</sup>
Bei diesen Leitlinien geht es um die Interaktion zwischen Mensch und Computer und wie diese zu mehr Konsistenz und
Gebrauchstauglichkeit geführt werden kann. Im deutschsprachigen Raum ist die Norm DIN EN ISO 9241-110 gültig, welche sich aus folgenden
Bei diesen Leitlinien geht es um die Interaktion zwischen Mensch und Computer und wie diese zu mehr Konsistenz und
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>
<br>
### Aufgabenangemessen
Die Dialogwege zwischen Fenstern, Webpages und Internetseiten und die auf diesen dargestellten informationen, sollten Aufgabenangemessen sein
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.
<br>
### Selbstbeschreibend
Alle Texte, Labels, Buttons, Meldungen und weitere Bestandteile der Internetseite sollten auf Anhieb vertständlich sein. Diese Bestandteile sollten
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>
<br>
### 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
Aufgabe führen. Dabei sollten Arbeitschritte rückgängig und Menüeinträge aufgehoben werden können.<sup>1</sup>
......@@ -40,8 +34,6 @@ Der Benutzer soll zum Beispiel beim ausfüllen eines Bestellformulares am Ende n
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.
<br>
### Erwartungskonform
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>
......@@ -49,17 +41,13 @@ 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
wie er sich im allgemeinen auf dieser Internetseite zurecht findet und sich durch diese Navigieren kann.
<br>
### 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>
So soll zum Beispiel bei einem Bestellformular darauf geachtet werden, dass bei dem Geburtsdatum gar nicht erst Buchstaben eingetragen werden können und falls
doch etwas Falsch gemacht wird, soll der Benutzer vor der Bestellbestätigung nochmal alles kontrollieren und korrigieren können.
<br>
### Individualisierbar
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 einer eigenen
......@@ -80,4 +68,4 @@ Die Webpages innerhalb einer Interseite sollten somit schlicht gleich aussehen.
</small><br>
<small>
<sup>2</sup> [Grundsätze der Dialoggestaltung - Definition](http://wiki.infowiss.net/Grundsätze_der_Dialoggestaltung). Abgerufen: 24.11.2015.
</small><br>
\ No newline at end of file
</small><br>
......@@ -5,6 +5,7 @@ subtitle: Erwartungskonforme Funktionalitäten bereitstellen
category: funktionalitaet
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>
### Welche Funktionalitäten sollte eine EW bereitstellen?
......@@ -20,7 +21,7 @@ Bei einer erwartungskonformen Webseite spielt nicht nur die Auswahl, sondern auc
![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, 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.
### Fazit
Für eine erwartungskonforme Website ist es wichtig eine Auswahl an Funktionalitäten anzubieten, die auf die Zielgruppe abgestimmt sind. Desweiteren 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.
......@@ -35,4 +36,4 @@ Für eine erwartungskonforme Website ist es wichtig eine Auswahl an Funktionalit
</small><br>
<small>
<sup>3</sup> Brand-Sassen, K. (2009) [Imagery III: Erwartungskonforme Website-Gestaltung – Ergebnisse einer Längsschnittanalyse (2003 bis 2009)](http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/imagery-iii-erwartungskonforme-website-gestaltung-ergebnisse-einer-laengsschnittanalyse-2003-b/). Abgerufen: 21.11.2015.
</small><br>
\ No newline at end of file
</small><br>
......@@ -8,17 +8,13 @@ author: Jörn Jürgens
###Definition
<br>
###Impressumspflicht
Die Impressumspflicht, welche 1997 in Kraft getreten ist, dient in erster Linie dem Verbraucherschutz, aber auch Konkurrenten oder Kunden, die sich über
den Inhaber einer Internetseite informieren oder gerichtlich gegen diesen vorgehen wollen.<sup>3</sup> Dieses Gesetz besagt schlicht, dass ein Impressum zur Anbieterkennzeichnung
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>
<br>
##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 Email, des Inhabers der Internetseite aufgeführt werden.
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>
......@@ -26,9 +22,8 @@ Ist der Anbieter in ein Register wie das Handels- oder Vereinsregister eingetrag