Cüneyt Coskun. Dipl.-Red. (FH) Cüneyt Coskun

Transkript

1 Cüneyt Coskun Dipl.-Red. (FH)

2 Web-Usability und Barrierefreiheit

3 Inhalt Allgemeines Struktur- und Layout-Konventionen Die Navigation Die Inhalte Die Startseite Key Benefits 3 von 27

4 Web-Usability und Barrierefreiheit Web-Usability = Erreichbarkeit und einfache Nutzung der Website-Informationen Barrierefreiheit = Uneingeschränkte Nutzbarkeit der Website von allen Menschen Eine Website muss klar, naheliegend und selbsterklärend sein Nutzer sollen nicht nachdenken müssen Wenn die Nutzer einen Gegenstand weder nutzen möchten noch können, bräuchte er eigentlich gar nicht zu existieren. Das Ziel:» Benutzer sollen intuitiv mit der Website umgehen können» Mehrwerte bieten 4 von 27

5 Alles erscheint in einem besseren Licht 5 von 27

6 Inhalt Allgemeines Struktur- und Layout-Konventionen Die Navigation Die Inhalte Die Startseite Key Benefits 6 von 27

7 Website-Aufbau Teilung der Website in klar definierte Bereiche Standard-Bereiche an gewohnte Plätze setzen Header Navi Inhalt Boxen 7 von 27

8 Visuelle Hierarchien Schaffung klarer visueller Hierarchien Je wichtiger etwas ist, desto auffälliger ist es Sehr wichtig Weniger wichtig Zwar relevant, aber nicht mehr wichtig 8 von 27

9 Visuelle Hierarchien Logisch miteinander verknüpfte Dinge sind auch visuell miteinander verknüpft Startseite Über uns Shop Überschrift Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 9 von 27

10 Website-Layout Eindeutige Kennzeichnung von anklickbaren Elementen» Farben» Auszeichnungen Überschrift Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Button 10 von 27

11 Website-Layout Kontrast-Funktion Schriftvergrößerung Vorlesefunktion 11 von 27

12 Funktion vs. Nutzen Überflüssige Funktionen weglassen Website entschlacken 12 von 27

13 Inhalt Allgemeines Struktur- und Layout-Konventionen Die Navigation Die Inhalte Die Startseite Key Benefits 13 von 27

14 Navigationsformen Meta-Navigation» Wichtigste Navigationspunkte wie Startseite, Impressum, Datenschutz, AGB Header Navi Inhalt Boxen Wichtigste Navigationspunkte (z. B. Startseite, Impressum, Datenschutz, AGB) 14 von 27

15 Navigationsformen Haupt- und Unternavigation» Verweise zu Hauptbereichen der Website Header Navi Inhalt Boxen 15 von 27

16 Navigationsformen Breadcrumb» Navigationsform, Schaffung einer Orientierungshilfe Sie befinden sich hier: Startseite > Anleitungen > Meine erste Arbeit Header Navi Inhalt Boxen 16 von 27

17 Navigationstiefe Flache Navigationsstruktur Mit drei Klicks zum Ziel Maximal zwei bis drei Navigationsebenen Maximal sieben Hauptnavigationspunkte 17 von 27

18 Weitere Navigationsmöglichkeiten Kontextsensitive Boxen Cross-Selling-Funktionen Verweise innerhalb des Contents Das Ziel:» Der Benutzer findet immer, was er sucht» Verbesserung der Position in den Suchmaschinen 18 von 27

19 Inhalt Allgemeines Struktur- und Layout-Konventionen Die Navigation Die Inhalte Die Startseite Key Benefits 19 von 27

20 Texten fürs Web Texte am Bildschirm zu lesen ist anstrengend Nutzlose Informationen und Wörter weglassen Realistisches Ziel: Entfernung zwischen einem Drittel bis der Hälfte aller Wörter Der Effekt:» Deutlichere Hervorhebung nützlicher Inhalte und Services» Schnellere Informationsaufnahme 20 von 27

21 Texten fürs Web Happy Talk eliminieren Instruktionen vermeiden Wichtige Informationen an den Anfang Wichtig Wichtigkeit der Informationen Unwichtig 21 von 27

22 Die Inhalte der Startseite 22 von 27

23 Die Inhalte der Startseite 23 von 27

24 Inhalt Allgemeines Struktur- und Layout-Konventionen Die Navigation Die Inhalte Die Startseite Key Benefits 24 von 27

25 Key Benefits Informationen lassen sich schneller finden und aufrufen Besucher halten sich länger auf der Website auf und kommen gern wieder Erfolgssteigerung, weil sich Benutzer besser zurechtfinden und gewünschte Informationen erhalten 25 von 27

26 Don t make me think!

27 Was sein muss, muss sein... Die vorliegende Arbeit und die Ausarbeitung der Grafiken sowie der gesamte Inhalt der vorliegenden Präsentation sind Eigentum der klartxt gmbh. Die Benutzung, Vervielfältigung, Verwertung oder Umsetzung (auch auszugsweise oder teilweise) sind nur mit schriftlichem Einverständnis der klartxt gmbh gestattet. 27 von 27