M101 - Webauftritt erstellen und veröffentlichen
  • Intro
    • 🗓️Organisatorisches
  • Tag 1
    • 01 Geschichte des Internets
    • 02 Realisation
    • 03 HTML
      • Grundlagen
      • Spezielle Tags
      • Tabellen & Listen
      • HTML Dokument
      • HTML Validierung
      • 🛠️Aufgabe Rechnung erstellen
    • 04 CSS
      • Grundlagen: Selektoren und Einbindung
      • CSS Boxmodell
      • CSS Validierung
      • 🛠️Aufgabe Rechnung gestalten
      • CSS Kaskadierung
      • Pseudoklassen
  • Tag 2
    • 01 Dokumentenstruktur
    • 02 Ordnerstruktur
    • 03 Bilder
    • 04 Gestaltung: Schriften, Farben, Einheiten
      • Schriftarten
      • Farben
      • Einheiten
    • 05 Inline und Block
    • 06 Flexbox
      • Konzept
      • Der Flex-Container
      • Die Flex-Items
      • 🛠️Aufgaben
        • Aufgabe Boxen
        • Aufgabe Newsportal
      • Weiterführende Links
    • 07 Exkurs: Usability
    • 08 Formulare
      • Formulare
      • Informationsgruppierung
      • Design- und Strukturgrundlagen
      • 🛠️Aufgabe Formulare
  • Tag 3
    • 01 CSS Grids
      • Konzept
      • Definition
      • Platzierung
      • 🛠️Grid Aufgabe
      • Grids vs. Flexbox
      • 🛠️Grids vs. Flexbox Aufgabe
      • Weiterführende Links
    • 02 Responsive Design
      • Media Queries
      • Responsive Design
      • 🛠️Aufgabe
    • 🛠️Testing-Workshop
    • 03 Konzeptionierung
    • 04 Veröffentlichen
    • Projektarbeit
Powered by GitBook
On this page
  • 1. Der erste Eindruck
  • Passendes Farbkonzept
  • Animationen, Gadgets und Musik
  • Layout und Seitenstruktur
  • Typographie
  • 2. Konsistent bleiben
  • 3. Die richtigen Bilder verwenden
  • 4. Übersichtliche Navigation
  • 5. Animationen
  • 6. Zugänglichkeit sicher stellen

Was this helpful?

  1. Tag 2

07 Exkurs: Usability

PreviousWeiterführende LinksNext08 Formulare

Last updated 6 months ago

Was this helpful?

1. Der erste Eindruck

Die Website repräsentiert ein Unternehmen und ein Angebot. Besucher, die den Auftritt zum ersten Mal sehen, beschäftigen sich typischerweise mit folgenden Fragen:

  • Finde ich hier, was ich suche?

  • Ist diese Seite vertrauenswürdig?

  • Wie steht es um die Professionalität des Unternehmens?

  • Fühle ich mich von der Seite angesprochen?

Tipps für einen guten ersten Eindruck:

Passendes Farbkonzept

Bei jedem Internetauftritt sollten Farben verwendet werden, welche zur Zielgruppe zum zum Angebot passen. Dabei ist weniger mehr, da die Besucher ansonsten schnell die Übersicht verlieren oder sogar überfordert sind. Die Farbauswahl einer Website kann daher auf 1-5 Farben geschränkt werden.

Animationen, Gadgets und Musik

Ein Element auf der Website zu platzieren, nur weil es irgenwie cool aussieht, ist eine schwache Strategie. Der Einsatz von Animationen, Gadgets und Musik ist nur dann sinnvoll, wenn dadurch für den Nutzer ein Mehrwert entsteht.

Layout und Seitenstruktur

Das A und O für einen übersichtlichen Internetauftritt ist einen einfache und klare Navigationsstruktur und ein klar strukturierter Seiteninhalt, welche sich durch allen Seiten hindurch zieht. Der Besucher sollte nicht mit zu vielen Informationen überhäuft werden und Leerstellen sollten gezielt eingesetzt werden um die Seite aufzulockern.

Typographie

Die Schrift sollte lesbar, genug gross und in einer angenehmen Schriftfarbe sein. Auch im Web sollten übliche Text-Stilmittel wie Auflistungen, Absätze, Markerungen etc. sinnvoll eingesetzt werden. Dies steigert die Lesbarkeit und die Informationen können einfacher aufgenommen werden.

2. Konsistent bleiben

Es hat sich bewährt, das Design über den ganzen Auftritt konsistent und einheitlich zu gestalten. Es empfiehlt sich, die Farben, Layouts und Schriften möglichst über alle Seiten gleich zu halten. So kann sich ein rundes Erlebnis für den User einstellen. Jedoch reicht ein einziges Layout selten für einen kompletten Internetauftritt.

Typischerweise benötigt man mindestens drei Layouts: eines für die Startseite, eines für Inhaltsseiten/Folgeseite und eines für Formularseiten.

3. Die richtigen Bilder verwenden

Bilder können ein mächtiges Element einer Website sein und deshalb sollten sie mit Bedacht eingesetzt werden. Aus Bequemlichkeit verwenden zum Beispiel viele Unternehmen Stock-Images, die man auf Bilder-Portalen kaufen kann. Aber macht das wirklich Sinn?

Diverse Experimente haben die Wirkung von Stock-Bildern und echten Bildern mit Menschen aus den Unternehmen bezüglich Ihrer Wirkung bei der Lead-Generierung verglichen. Dabei ist herausgekommen, dass die echten Bilder bei der Wirkung die Stock-Bilder um 95% überragten.

Wieso? Weil man Stock-Bildern ansieht, dass sie kaum Relevanz im speziellen Kontext besitzen. Achten Sie also bei der Bilderwahl auf deren Relevanz und deren Nähe zu den Texten auf der Seite.

4. Übersichtliche Navigation

Ein wichtiger Faktor für das Verbleiben des Besuchers auf einer Website ist eine klare, übersichtliche und intuitive Navigation. Wenn der Besucher nicht schnell findet, was er sucht, verlässt er die Seite schnell wieder.

Die wichtigsten Fragen eines Besuchers sind:

  1. Wo bin ich? Was ist das? (Orientierung)

  2. Wie komme ich zu XY? (Navigation)

Mögliche Grundsätze für eine gute Navigation sind:

  • Der Navigationslink sollte offensichtlich und unmissverständlich sein

  • Maximal sieben Navigationspunkte pro Ebene

  • Jede Seite sollte mit maximal drei Klicks erreichbar sein

  • Der Besucher sollte jederzeit wissen, wo er sich gerade befindet

Die übergreifende Regel ist einfach: Verlange nie von einem Besucher, dass er nachdenken muss, wie er seine Informationen findet – Don’t make me think!

5. Animationen

Animationen (mit CSS, GIFs oder JavaScript) können Aufmerksamkeit erzeugen. Genauso können sie Seitenbesucher von einer Webseite verjagen. Viele Leute fühlen sich durch unerwartete Animationen und Geräusche gestört - vor allem am Arbeitsplatz.

Animationen sollten sparsam und schlicht eingesetzt werden, z.B. für Hover-Effekte bei Menüs, Buttons und Bildern.

6. Zugänglichkeit sicher stellen

Mittlerweile erfolgt fast jeder zweite Internetzugriff über ein mobiles Gerät. Es muss sichergestellt werden, dass jeder Ihre Seite besuchen kann, unabhängig vom Browser (ausgenommen extrem alte Versionen) oder Gerät.

Adobe Kuler für das Farbkonzept
Webschriften für die kommerzielle Verwendung