Interfacedesign


Begriffsbestimmung

  • Content (Inhalt) HTML=Überschriften, Texte, Bilder, Absätze, Links
  • Design (Gestaltung) CSS = Positionierung, Farben, Typo, Größen

Content Management

  • Trennung von Content und Design
  • Statische Strukturen
    • für kleinere Internetauftritte z.B. Übungszwecke, Präsentationen und kleinere Firmen
    • Content wird in HTML5-Dateien platziert (für jeden Screen eine Datei)
    • Design in CSS3-Dateien gestaltet
    • dem Kunden ist nicht so viel Freiheit in der Erweiterung der Webseite gegeben
  • Dynamische Struktur
    • für größere Webauftritte sind diese besser geeignet
    • gesamter Content wird in einer Datenbank verwaltet
    • Ermöglicht Laien damit umzugehen
    • Design der Seite werden in CSS3-Dateien und in einer Vorlagen-Datei (Template) gespeichert
    • Templates = ähnlich wie Musterseiten aus InDesign oder Folienmaster in PowerPoint
    • durch Änderung von wenig Dateien, lässt sich ein kompletter Internetauftritt umformatieren

Content-Management-System

  • Software zur Erstellung und Verwaltung dynamischer Webseiten
  • Nutzerhirachie mit Individuellen Zugriffsrechten (Administrator…)
  • Kunde kann seinen Webauftritt selbst pflegen
  • Mehrheit aller Webauftritte nutzen CMS
  • eine Menge sind auf dem Markt sie unterscheiden sich zwischen Kosten und Leistung
  • Stand (2016): 59,3% WordPress, Joomla! 6,1%sd

Usability

Benutzeroberfläche (User Interface)

  • Wie muss die Oberfläche beschaffen sein, damit sie ihren Zweck optimal erfüllt
  • Schnittstelle zur Kommunikation zwischen Nutzer und digitalem Produkt

Benutzerfreundlichkeit (Usability)

  • Beschäftigt sich mit der Fragen:
    • Wie kann sich der Nutzer schnell zurecht finden?
    • Was ist erforderlich um dem Nutzer die Kommunikation zu ermöglichen?
    • Wie müssen Informationen gegliedert sein, um möglichst schnell gefunden und nachvollziehbar zu sein?
    • Wie lässt sich das Auge des Betrachters lenken?

Usability-Tests

  • Dient zur festellen der Nutzbarkeit
  • Fragebögen, Interviews
  • Mouse- und Eye- Tracking
  • Cognitive Walkthrough
  • Videobeoachtung

Zielgruppeanalyse

  • Zielgruppe kennen = besser optimierte Anpassung
  • Beispiel Kinderseite:
    • Freundliche, warme Farbgestaltung
    • Navigation ohne Sprachkenntnisse
    • Animationen und spielerische Elemente
    • Integration multimedialer Elemente
    • Minimaler Text, durch Grafiken unterstützt

Informationsdesign

Struktur der Webseite

  • Es gibt verschiedene Strukturen
  • Bestimmt wie man unter den Seiten navigiert
  • Navigationsstruktur bestimmt Anwendungsmöglichkeiten

Linieare Struktur

  • Informationen werden linear in einer festgelegten Reihenfolge angeordnet
  • Der User hat dadurch keinerlei Entscheidungsfreiheiten
  • Kommen häufig bei Bildschirmpräsentation zum Einsatz
  • Im Webdesign findet man diese Struktur bei One-Pager-Seiten
  • Wird daher oft bei mobilen Geräten angewendet

Baumstruktur

  • Mit Abstand häufigste verwendete Informationssturktur
  • Gibt die Möglichkeit von einer Ebene zur nächsten Ebene tiefer zu gelangen
  • Umgekehrt ist es ebenfalls möglich
  • Struktur ist in jedem Fachbuch hierachisch vorzufinden (Kapitel, Unterkapitel)
  • Mindmaps stellen ebenfalls eine Baumstruktur dar
  • Wird bei Offline-Produkten ebenfalls verwendet

Vorteile

  • Gute Gliederungsmöglichkeiten von Informationen
  • Intuitive Bedienung ohne Fachkenntnisse
  • Problemlose Änderung an der Struktur

Netzstruktur

  • Netzartig strukturierte Anwendung
  • Keine eindeutige Hierarchie
  • Screens sind in vielfältiger Weise miteinander verlinkt
  • Bietet einen großen Entscheidungsspielraum
  • Schneller Zugriff auf Informationen
  • Gefahr besteht sich dabei im Netz zu „verirren“
    • Fazit: Maximale Möglichkeiten verlangen Maximale Anforderungen an den Anwender

Kombinierte Struktur

  • Eine Kombination aller Grundtypen der Informationstruktur
  • Navigationsstrukturen sind bei allen größeren Webauftritten häufig miteinander kombiniert
  • Navigationsstrukturen sind abhängig von der Größe des Endgeräts bei Webauftritten

Entwurf einer Navigationsstruktur

  • Wichtig zur Orientierung des Nutzers auf der Webseite
  • Informationen so gliedern das sich horizontal nicht mehr als 7 Screens ergeben
  • Nicht mehr als 3 Unterebenen
  • Informationen von oben nach unten verfeinern

Navigationselement

Maus und Tastatur

  • Textlinks
  • Bildlinks
  • Schaltflächen (Buttons)
  • Menü
  • Eingabefeld (Suchfeld)

Textlink

  • Sind nach HTML-5 blau unterstrichen dargestellt
  • Cursor ändert sich beim überfliegen des Wortes
  • Minimale Ladezeit aufgrund geringer Datenmenge
  • Gestaltungsanpassung durch CSS3
  • Identifikation muss dennoch gewährleistet werden

Bildlink

  • Erzielen eine starke Wirkung und spielen daher eine zentrale Rolle
    • Achtung: Bilder können eine Barriere für Blinde darstellen sie sollten daher nur bedingt eingesetzt werden!!

Schaltflächen (Buttons)

  • Entsprechen den Schaltern des täglichen Gebrauchs (z.B. Kaffeemaschine, Fernbedienung etc.)
  • Dem Nutzer muss die Funktion durch Grundregeln deutlich gemacht werden
  • Abhilfe schafft eine Menüführung und ein Suchfeld, mit dem Programmierer vertraut sind

Touchscreen

  • Größe der Finger muss beachtet werden
  • Navigationselemente werden mit dem Finger gesteuert
  • Buttons geben eine visuelle Rückmeldung
  • Unterschiedliche Steuermöglichkeiten – gleiches Resultat:
    • Touch (Mausklick)
    • DoubleTouch (Doppelklick)
    • LongTouch (Rechterklick)
    • Scroll (Vertikales Ziehen)
    • Swipe (Horizontales Ziehen)
    • Pinch (Zoomfunktion)
    • Rotate (kreisförmiges Drehen mit zwei Finger)

Navigationshilfen

  • Breadcrumb-Navigation
    • Die zuvor besuchten Seiten werden angezeigt und können wieder angewählt werden
  • Viesuelle Feedback
    • Links ändern Farbe zur leichten Erkennung
  • Akustisches Feedback
    • Tonsignal signalisiert dem Nutzer das  er auf einen Link geklickt hat
  • Sitemap
    • Digitales Inhaltsverzeichnis

Interaktionsdesign

Begriffsbestimmung

  • Dem Nutzer wird ermöglicht mit den Inhalten auf der Webseite zu „interagieren“
  • Industrien welchen auf Interaktionsdesign bauen:
    • Unterhaltung (nline-Spiele, Videos…)
    • Bildung (Lernsvideos, Tutorials…)
    • Information (Wikis, Blogs…)
    • Kommunikation (Communitys, Foren…)
    • Werbung (Werbebanner, Werbeanzeigen…)
    • Verkauf (Webshops, eBay..)

Interaktionsformen

  • Asynchrone Interaktion
    • Teilnehmer können zeitversetzt handeln
    • E-Mail, Posts, Tweets, SMS, Whatsapp
  • Synchrone Interaktion
    • Alle Teilnehmer müssen gleichzeitig online sein
    • Chats, (Videos) Telefonie

Formulare

  • Voraussetzung für alle Textbasierten Interaktionsformen im Web
  • Schlechte Formulare
    • Zu geringer Kontrast
    • Falsche Reihenfolge der Eingabefelder
  • Gutes Formular
    • Die Nutzung ohne Maus, also mittels Tastatur oder Spracheingabe muss möglich sein
    • Größe der Textfelder an den einzugebenden Inhalt angepasst

Barrierefreies Webdesign

Begriffsbestimmung

  • Eine Barriere ist eine Sperre die Zugang zu bestimmten Inhalten verhindert
  • Barrierefreie Websites müssen daher so konzipiert werden, das auch eingeschränkte Menschen einen Zugang ermöglicht wird
  • Barrierefreies Webdesign fängt bereits mit der Konzeption an
  • Laut dem Gesetz(BGG) ist es erforderlich, für eingeschränkte Menschen einen Zugang zu Websites zu schaffen

Maßnahmen

  • Es ist daher essientiell Maßnahmen zu setzen für:
    • Sehbehinderte (Installieren eines Screenreaders)
    • Farbenfehlsichtige (Maßnahme durch Farbtafel)
    • Menschen mit motorischer Einschränkung (Maßnahme durch Geräte mit Touchscreens)
    • Funktionale Analphabeten (Einfache Formulierung der Site)