Design und Usability

Modernes Webdesign und Nutzerfreundlichkeit

Modernes Webdesign ist sehr viel mehr als die oberflächige Kosmetik von Internetseiten. Als Bestandteil des kundenorientierten Gesamtkonzeptes sorgt professionelles Screendesign für ein Online-Erscheinungsbild, welches gleichermaßen ... 

  • funktional,
  • konsistent,
  • strukturiert und
  • fokussiert ist.

Aufgabe des Designs ist es, den Inhalten eine Form zu geben und sie optimal zugeschnitten auf die Zielgruppen zu kommunizieren. Dabei spielt die Usability eine zentrale Rolle. Denn was bringt eine noch so schöne moderne Website, wenn sie nicht bedienbar und ihre Inhalte für die Nutzer unzugänglich sind?

Nicht zuletzt ist es Aufgabe einer überzeugenden Gestaltung, den Nutzer durch stimmige Bild- und Farbwelten emotional anzusprechen und den Besuch einer Webseite zu einem Erlebnis zu machen.

Usability – Nutzerorientiertes Design

Ganz klar ist: Das Web wird nicht gelesen, seine Inhalte werden gescannt. Deshalb muss man sich als User schnell und ohne Anstrengung auf Webseiten zurechtfinden und wissen, wo es langgeht. Dies ist ein Anspruch an das Design einer Webseite, denn der Nutzer entscheidet innerhalb von Sekunden, ob er bleibt oder nicht.

Usability, also die Benutzerfreundlichkeit oder auch Gebrauchstauglichkeit, ist hier das Stichwort. Eine gute Benutzerführung bringt diesen schnell ans Ziel, lässt ihn ohne Umwege finden, was er sucht. Und auch wenn der User kein bestimmtes Ziel verfolgt, kann er durch benutzerfreundliches Design schnell und unkompliziert die Webseiten durchstöbern. Nutzerorientiertes Web-Design baut auf intuitive Menüführung, gezielte visuelle Schwerpunkte und arbeitet mit bereits erlernten Standards. Erfüllt Ihre Website alle Ansprüche der Usability und Accessibility? Machen Sie den Usability-Check bei eifel-online.

Barrierefreiheit

Längst hat das Thema Barrierefreiheit auch das Internet erobert. Die Seiten lassen sich so gestalten, dass die Inhalte unabhängig von körperlichen Problemen erfasst werden können. So können barrierefreie Internetseiten etwa über eine Braille-Zeile ertastet oder in sinnvoller Reihenfolge von Programmen vorgelesen werden. Je nach Zielgruppe der Seiten kann es sehr sinnvoll sein, diesem Thema besondere Aufmerksamkeit zu schenken.

Barrierefreie Informationstechnik Verordnung (BITV): Bei öffentlichen Internetseiten greift in Deutschland ohnehin die "Berrierefreie Informationstechnik Verordnung", die den entsprechenden Gesetzesbeschluss der Europäischen Union umsetzt. Es wurde zusammen mit den Behindertenverbänden ein Kriterienkatalog entwickelt, der festlegt, was alles beachtet werden muss. (BITV 2.0 Kriterien als PDF)

WCAG 2.0 Kriterien: Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 werden vom W3C empfohlen und bewirken bei Befolgung der Kriterien ebenfalls, dass die Inhalte für eine größere Gruppe von Menschen mit Behinderungen barrierefrei werden. Zu diesen Behinderungen zählen laut W3C "Blindheit und Sehbehinderung, Gehörlosigkeit und nachlassendes Hörvermögen, Lernbehinderungen, kognitive Einschränkungen, eingeschränkte Bewegungsfähigkeit, Sprachbehinderungen, Photosensibilität und Kombinationen aus diesen Behinderungen." Des Weiteren sorgen auch die WCAG-Kriterien dafür, dass Webinhalte im Allgemeinen für alle Seitenbesucher benutzbarer werden.

Je nach Zielgruppe lohnt es durchaus auch für Unternehmen, über eine barrierefreie Gestaltung der Internetseiten nachzudenken. Ganz nebenbei garantiert die Barrierefreiheit zudem eine gute Indizierbarkeit der Seiten durch Suchmaschinen. Somit werden einige Maßnahmen zur Barrierefreiheit auch im Rahmen einer Suchmaschinenoptimierung (SEO) durchgeführt.

Modernes Webdesign

Ein Unternehmen möchte nach außen beständig, geschlossen und damit glaubhaft auftreten. Zu einem guten Image leistet ein schlüssiges und konsistentes Erscheinungsbild einen wichtigen Beitrag. Unsere Aufgabe ist es, das Profil sowie die Inhalte und Werte Ihres Unternehmens ins Web zu transportieren und sie dort mediengerecht zu präsentieren. Strukturiertes Arbeiten und kreatives Schaffen sind dabei keine Gegensätze. Konzipieren und Planen steht vor jedem grafischen Entwurf. Die kreative Arbeit fängt beim Briefing an. Denn ganz genau zu wissen, was unsere Kunden wollen und brauchen, befähigt uns, kreative und effektive Lösungen zu schaffen.

Wireframes und Screendesigns

Nach oder während der Pflichtenhefterstellung konzipieren wir sogenannte Wireframes. Diese Drahtgitter-Modelle visualisieren das grobe Seitenlayout. Als grobe, relativ schnell zu erstellende Skizzen der späteren Webseiten dienen Wireframes der genauen Abstimmung über die Funktionsweise und den Aufbau der Seiten. Sie zeigen, wie die Inhalte und Funktionen auf der Seite angeordnet werden und welchen Raum sie einnehmen. In der Regel wird zu den wesentlichen Seitentypen der Website je ein Wireframe erstellt: Startseite, Rubriköffnerseite und Detailseite. Bei komplexen Webportalen oder Webanwendungen erstellen wir zu allen für den Ablauf und die User Experience wichtigen Seiten ein Wireframe.

Erst danach geht es an das Feinlayout und die grafische Ausarbeitung der Screendesigns. Screendesigns sind eine Sammlung von Bildern, die das Aussehen der fertigen Website wiedergeben. Da die Website den Content später dynamisch anzeigt, können die Screendesigns nur exemplarisch die Ausgabe von Inhalten darstellen. Damit ist jedoch auch die Anforderung verbunden, dass das Design eine Anpassung an verschiedenste Arten von Änderungen, Varianten und Wachstum der Inhalte zulässt. Einerseits sollen die Screendesigns einen Überblick über die User Experience vermitteln, andererseits kann aber nicht jede einzelne Seite als Ansicht aufbereitet werden. Daher werden ähnlich wie bei den Wireframes auch hier nur die Schlüsselseiten in Photoshop erstellt, z.B. für die Startseite, eine der Rubriköffnerseiten sowie eine Detailseite.

Responsive Webdesign

Starr konstruierte Webseitenlayouts haben bei kleineren Displaygrößen häufiges Scrollen und Zoomen zur Folge. Dadurch wird der Bedienkomfort erheblich eingeschränkt und das Konsumieren von Inhalten wird insgesamt verlangsamt. Ohne die Inhalte und das CMS zu ändern, kann das Seitenlayout der Webseiten heute so entwickelt werden, dass sich die Darstellung an die verfügbare Displaygröße anpasst. So kann durch ein responsives Webdesign die Website auch auf Smartphones und Tablets mit beliebiger Screengröße optimal genutzt werden. Responsive Webdesign ist zum Standard geworden und ein Must-have bei jedem Website-Relaunch.

 

Online Styleguide

Ein Online Styleguide definiert alle optischen wiederkehrenden Elemente einer Website (oder auch der gesamten Online-Kommunikation eines Unternehmens). Im Styleguide werden mögliche Layouts, Schriften, Farben und Content-Module definiert. Diese Anleitung unterstützt die Redakteure bei ihrer Arbeit und gewährleistet einen konsistenten Umgang mit Inhalten und optischen Elementen, was zu einem stimmigen und nutzerfreundlichen Gesamtbild führt.

Interaction Design und User Experience

Im Zuge von HTML5, CSS3 und immer komfortableren JavaScript Frameworks wurden auch die interaktiven Möglichkeiten auf Webseiten immer vielfältiger. Videos, 3D-Grafiken, Animations-Effekte und dynamische Infografiken sind aus modernen Websites nicht mehr wegzudenken. So können Microinteractions oder interaktive Features auf Webseiten einerseits die Bedienbarkeit fördern, andererseits auch komplexe Sachverhalte für den Nutzer verständlich und spielerisch erlebbar machen.