UX Design

Was ist Webdesign und warum ist es so wichtig?

Webdesign bezeichnet die Planung, Strukturierung und Implementierung von Elementen auf einer Website. Ein Webdesigner entwirft dazu zunächst ein Layout, das bestimmt, wie die Webseite später einmal aussehen wird. Anschließend wird das nun entstandene Grundgerüst der Website mittels Grafikdesign und UX-Design (User Experience Design) ausgebaut. Wichtig ist das Ganze, da die Website eines Unternehmens die Wirkung nach außen hin beeinflusst. So kann auch die Kaufentscheidung von Kunden von der Website abhängen. Gefällt dem Kunden die Website und ist sie für ihn logisch aufgebaut, wird er eher was kaufen, als wenn beispielsweise er sich auf der Seite nicht zurecht findet und länger nach etwas suchen muss. Früher oder später wird es dem Kunden dann zu anstrengend, und er wird sich einen anderen Anbieter suchen. Außerdem beeinflusst die Website das Image eines Unternehmens Für ein starkes Image, sollte die Website modern und benutzerfreundlich aufgebaut sein. Mit einer benutzerfreundlichen Website steigt auch die Wahrscheinlichkeit, dass Kunden einem treu bleiben, da man durch die Website einen starken Marken-Wiedererkennungswert geschaffen hat und der Kunde dieser Marke treu bleiben möchte.

UX-Design

UX-Design ist die Abkürzung für User Experience Design und beschreibt den gesamten Prozess von vor der Nutzung, zu während der Nutzung bis hin zu nach der Nutzung aus der Nutzerperspektive. Man durchläuft also folgende Phasen:

Planen
Verstehen und Festlegen des Nutzungskontexts
Festlegen der Nutzungsanforderungen
Gestaltungslösungen erarbeiten
Evaluation

Dabei umfasst das UX Design die Informationsarchitektur, User Interface Design, Interaction Design und die Usability. Somit wird das Nutzererlebnis durch den Dreiklang aus Usability, Ästhetik und Utility optimiert. Das Ziel ist es, für den Nutzer ein einzigartiges Nutzungserlebnis zu gestalten und somit mit dem jeweiligen Brand ein positives Bild zu verbinden.

Der Nutzer wird in den Fokus gestellt und als UX-Designer, muss man den Kunden somit auch verstehen. Um das zu erreichen, gibt es verschiedene Methoden, wie z.B. Interviews, Use Cases, Customer Journeys usw. Die hierbei gewonnen Erkenntnisse spielen in das Design mit ein.

Und was hat das mit einer Banane zu tun?

Die Banane als Beispiel für ein perfektes UX-Design

Ja ihr habt richtig gelesen. Eine UX-Designerin wollte die Leute nicht mehr langweilen, wenn sie gefragt wurde was dieses „UX“ denn eigentlich sein soll und fing an das ganze mit einer Banane zu vergleichen.

Die UX der Banane:

man erkennt den Reifegrad einer Banane an ihrer Farbe (es sind keine Nachfragen nötig), ist sie gelb, kann man sie essen
der Genuss einer Banane ist stets und überall möglich (leicht schälbar, transportabel, ohne Hilfsmittel, eigene Griffhilfe)
leicht zu verspeisen (Nutzer muss sich keine Gedanken um Störfaktoren machen)
Bananen sind leicht verfügbar und haben weitere gute Eigenschaften (für jedermann verfügbar, Vitamine)
Bananen brauchen den Vergleich zu anderen Früchten nicht zu scheuen (auch andere Früchte haben ihre Vorteile, fallen aber in manchen Aspekten stets zurück)

Das gilt nicht nur für die Banane, sondern all diese Punkte kann man auch auf Websites beziehen. Wenn sie diese und einige weitere Punkte erfüllen, dann sind sie die Bananen unter den Websites.

Die wichtigsten Usability-Regeln:

die wichtigsten Inhalte sollen gut sichtbar und möglichst weit oben auf der Website platziert sein (oberen Hälfte des Bildschirms), denn die Besucher konzentrieren sich auf diesen Bereich
klare Struktur -> einfache Navigation
lange Ladezeiten vermeiden
Website nicht überladen mit Informationen
visuelle Hierarchie schaffen: desto wichtiger eine Sache ist, desto mehr muss sie für den Leser herausstechen. Außerdem muss die Hierarchie sichtbar sein (Content und Navigationselemente)
deutlich machen, was klickbar ist: nach den Konventionen Links blau und unterstreichen, oder einfach nur jeden wichtigen Link unterstreichen
Ablenkung vermeiden: Content deutlich hervorheben und „Hintergrundgeräusche“ vermeiden, damit der User nicht abgelenkt wird vom eigentlichen Inhalt
Dem User muss immer klar sein wo er ist. Das kann man erreichen durch:

In kurzen Sätzen oder einer Grafik auf der Startseite die Quintessenz vorstellen. Hier ein Beispiel von Facebook, welches die Hauptaussage in einem Satz und einer Grafik zusammenfasst:

Wie ihr sehen könnt ist der Inhalt in einem Satz zusammengefasst und die Grafik unterstützt diese Aussage

Für Mobilgeräte gibt es das sog. „daumenfreundliche“ Layout. 49% der Smartphone-Nutzer benutzen ihren Daumen, um ihr Smartphone zu bedienen. Wenn das Layout also nicht auf die Interaktion mit dem Daumen ausgelegt ist, kommt es zu abstrichen beim Nutzererlebnis.

Wie gestaltet man benutzerfreundlich mit JavaScript, HTML und CSS?

Bilder

Bilder machen eine Website immer interessanter für den Menschen und peppen die Seite auch ein wenig auf. Wir Menschen mögen Bilder und Grafiken, denn ihnen können wie Informationen entnehmen, ohne viel lesen zu müssen. Außerdem prägen sich bei den meisten Menschen Bilder besser ein, als Text. Hat man also das richtige Bild ausgewählt, wird es länger im Kopf des Benutzers bleiben und man hat somit eine stärkere Verbindung zu der eigenen Marke aufbauen können. Um Bilder in eine Website zu packen , muss man lediglich das <img> Tag angeben und anschließend die Quelle, wo das Bild gefunden werden kann. Um den Inhalt, den das Bild rüber bringen soll, noch besser verständlich zu machen, sollte das alt-Attribut angewendet werden. Hiermit kann man eine kurze Erklärung oder Beschreibung zu dem Dargestellten angeben. Des Weiteren empfiehlt es sich unter Umständen eine ausführlichere Erklärung mit Hilfe des longdesc-Attributes zu geben. Dieses beschreibt eine URL, in der mehr Informationen über das Bild zu finden sind. Der Code könnte also so aussehen:

Formulare

Um Formulare leichter nutzen zu können, kann man folgendes tun:

Das fieldset-Element setzen, damit das Formular optisch vom restlichen Inhalt abgegrenzt wird. Es wird verwendet, um mehrere Steuerelemente sowie Bezeichnungen (HTMLElement („label“)) in einem Webformular zu gruppieren.
Das legend-Element unterstützt das verstehen des Formularelements. Es definiert eine Überschrift für einen Formularbereich. Darüber hinaus muss es das erste Kind eines fieldset-Elements sein.
mit label kann Eingabefeldern (z.B. Radio-Buttons) eine Beschriftung hinzugefügt werden. Sie wird dem Eingabeelement zugeordnet, indem sie es entweder als Elternelement umschließt oder durch die Verknüpfung des for-Attributs mit der id des Eingabeelements. Man verwendet es, dass die anklickbare Fläche vergrößert wird, da auch auf das Label geklickt werden kann.

Hier ein Beispielcode:

Seitenstruktur

Um es dem Benutzer zu ermöglichen zu wissen, wo er sich gerade befindet, also z.B. auf welcher Unterseite der Homepage, kann man vielleicht so etwas wie Events einbauen, damit sich beispielsweise der Tab dunkler, oder heller färbt, auf dem man sich befindet. So ähnlich hatten wir das auch schon in der Vorlesung gemacht, jedoch mit einer Tabelle, und das müsste man dann auf einen Tab beziehen. Das zu wählende Event, wäre dann das toggle()-Event, denn wenn man auf den Tab bzw. die Unterseite klickt, soll es sich verfärben. Klicken wir auf eine andere Seite, soll es wieder so aussehen, wie vorher (das toggle()-Event beinhaltet immer sozusagen zwei Events: das anklicken und wieder wegklicken). Ein weiterer Tipp, wie man seine Seite besser strukturieren kann, sind die jQuery-Akkordeons. Diese sehen so aus:

Auch die Tabs des Akkordeons kann man hervorheben, wenn sie gerade geöffnet sind, damit der Benutzer weiß, in welchem Tab er sich gerade befindet. Hierfür muss man eine Klasse in CSS anlegen und für diese dann eine Regel festlegen (z.B. dass der Hintergrund dunkelblau sein soll). Der Code dazu könnte so aussehen:

und in CSS würde man dann definieren:

Mit einem Akkordeon kann man den Inhalt einer Seite sehr gut strukturieren. Zum einen ist es nach Kategorien gruppiert und zum anderen, wird die Seite übersichtlicher. Nicht zu vergessen sind bei der Strukturierung natürlich die Absätze, um eine Seite übersichtlicher zu gestalten. Das kann man durch die <p>-Tags machen, also ziemlich einfach.

Hierarchie

Nicht nur für die Seitenstruktur, sondern auch für die Navigationshierarchie spielt das Akkordeon eine wichtige Rolle, aber auch mit den Überschriften Tags kann man eine gewisse Hierarchie aufbauen, denn es gibt ja 6 verschiedene Größen von Überschriften. Somit kann man für die Hauptüberschrift <h1> nehmen, für eine ihrer Unter-Überschriften dann <h2>, usw. Dadurch entsteht dann eine Hierarchie, in der der Benutzer weiß, was zu welchem Punkt gehört und welche der Überschriften die Hauptüberschrift ist.

Das ist h2

Das ist h3

Das ist h4

und schwupps haben wir eine immer kleiner-werdende Überschrift und kennzeichnen somit eine Hierarchie.

Hervorheben von wichtigen Informationen

Auch durch hervorheben kann eine visuelle Hierarchie geschaffen werden, da für uns Menschen automatisch alles was gekennzeichnet ist, Aufmerksamkeit bekommt, da wir das Gefühl haben, dass es wichtig ist. Mit <em> kann man den eingeschlossenen Inhalt kursiv darstellen und somit sticht das Wort dann im Gegensatz zum restlichen Text heraus. <strong> stellt Texte fett dar und hat somit den gleichen Effekt. Wenn vielleicht ganze Abschnitte wichtig sind und gekennzeichnet werden sollen, kann man entweder über CSS einfach nur die Hintergrundfarbe, oder über eine Klasse alle Elemente definieren, die in einer bestimmten Farbe geschrieben werden sollen. Außerdem kann man auch das <span>-Element nehmen, denn es ermöglicht einem ein wenig Inline-Text von seiner Umgebung abzutrennen. Man kann <span>-Elemente mit Hilfe von CSS formatieren und Text somit leicht hervorheben.

Schriftgrößen

Als UX-Designer sollte man eher auf relative Schriftgrößen (z.B. smaller oder x-larger) zurückgreifen, als auf feste Größen (z.B. 12px), damit die Schriftgröße sich im Browser anpassen lässt.

Frames

Mit Frames lassen sich Seiten gut in Inhalt und Navigation unterteilen. Aber Achtung, nicht alle Browser unterstützen Frames, weshalb man einen noframes-Bereich anlegen sollte, der zum Beispiel auf eine Version der Seite ohne Frames verweist:

Ablenkung vermeiden

Um den User davon abzuhalten, sich von anderen Dingen auf der Website ablenken zu lassen und sich somit nicht mehr auf den Hauptinhalt konzentrieren zu können, kann man auch mit Rahmen bzw Frames arbeiten, oder auch mit Hintergrundfarben. Der Hintergrund der Website und der des Inhaltes, sollten Kontrastreich gewählt werden. Somit grenzt sich der Inhalt visuell ab. Man sollte jedoch auch beachten, dass durch die Farbe die Lesbarkeit nicht eingeschränkt wird, denn das würde die Nutzer der Website abschrecken. Die Farben sollten so gewählt sein, dass sie psychologisch mit dem Thema verwandt sind, denn Farben haben eine Auswirkung auf das Gehirn. So lässt rot die Menschen hungrig fühlen und blau weckt Vertrauen. Den Hintergrund und den Rahmen kann man mit CSS setzen. Für die Hintergrundfarbe schreibt man: background-color: farbe (z.B pink); . Den Rahmen bestimmt man mit: border: 5px dotted farbe(z.B. violett); . Je größer die Zahl vor px, desto größer sind die Punkte aus denen der Rahmen besteht.

Ladezeit vermindern

Da wir Menschen es hassen zu warten (vor allem wenn es um Seiten im Internet geht), sollte für die Website Ajax angewendet werden, damit Menschen immer noch interagieren können mit der Seite, obwohl der Webbrowser im Hintergrund lädt, denn Ajax ist asynchron und dadurch muss man nicht wie beim alten Anfrage-Antwort Modell warten, bis der Server an den Browser die Antwort geschickt hat. Jedoch hängt das nicht nur von Ajax ab. Um die Ladezeit zu verringern sollte man auf die Bildwahl achten. Bilder sollten im Allgemeinen höchstens etwa 400-1000 Pixel und nicht mehr als etwa 75k groß sein. Auch Videos sollten für die kleinste mögliche Größe optimiert werden, ohne dass die Qualität darunter leidet.

Die Quintessenz

Um die Quintessenz eines Textes herausstechen zu lassen, kann man Pull Quotes verwenden. Dieser ist ein Kasten mit einem interessanten Zitat aus dem Text. So kann man sich das vorstellen: