Eine erfolgreiche Website – Teil 1 „Authentizität“


Mann beißt auf Münze, um die Authentizität zu testen

In dem ersten Artikel unserer Serie „eine erfolgreiche Website“ dreht es sich um das Erscheinungsbild der eigenen Website. Bevor nähere Gedanken zur Gestaltung einer Website gemacht werden können, steht der konzeptionelle Teil im Vordergrund.

Fragen wie „Wer bin ich?“ oder „Wen will ich ansprechen?“ sind die ersten beiden, die ausführlich und vor allem kritisch beantwortet werden müssen, da man sie während des gesamten Gestaltungsprozesses im Hinterkopf haben sollte. Sind die grundlegenden Fragen geklärt und zu jeder Zeit abrufbereit, kann mit der eigentlichen Gestaltung begonnen werden.

Bevor wir ins Detail gehen, befassen wir uns in diesem Artikel mit der Authentizität eines Designs. Schauen wir uns auf anderen Internetseiten um, müssen wir feststellen, dass seit der Einführung von CSS3 der Drang nach pompös wirkenden Kopfbereichen und aufwendig gestalteten Buttons immer größer geworden ist. Der Inhalt einer Seite wurde von der Gestaltung immer mehr in den Hintergrund gedrückt und gerade auf Smartphones lässt sich so nur schwer eine Kernaussage herausfiltern.
Um dem Ganzen entgegen zu wirken und die Authentizität des Unternehmens und die des Internetauftritts zu steigern, gibt es eine Entwicklung hin zur Reduzierung verschiedenster Designelemente auf das funktionale Minimum.
So besteht das authentische Design im Wesentlichen aus 3 Säulen. Dem digitalen Look, dem Skeuomorphismus und dem inhalt-zentrierten Layout.

Digitaler Look

Strukturhintergründe, die bis vor kurzem auf fast jeder Website zu finden waren, um eine gewisse Atmosphäre zu schaffen, lenken von der eigentlichen Thematik ab und die Kernaussage des Internetauftritts verschwindet im künstlerischen Drumherum.
Um authentisch zu designen gilt es sich auf das Medium Internet und den damit verbundenen Eigenschaften einzulassen. Das bedeutet vorerst sich auf das Wesentliche zu konzentrieren und die Kernaussagen herauszustellen.

Skeuomorphismus

Im gleichen Atemzug wie die Strukturhintergründe kann man den Skeuomorphismus nennen. Er beschreibt den Willen, Eigenschaften von Gegenständen aus unserem Alltag nachzuahmen und in unserem Fall auf das digitale Medium Internet übertragen zu wollen. Nehmen wir uns als Beispiel ein Buch. Beim Umblättern der Seiten entsteht ein Schlagschatten und das Papier verbiegt sich an der angefassten Stelle. Zahlreiche Internetseiten versuchen solch einen Effekt nachzuahmen, um dem Gewohnheitstier Mensch so viel vertrautes Umfeld wie möglich zu bieten. Doch was wäre, wenn dieser Effekt nicht mehr vorhanden ist? Fakt ist, dass wir solch ein extremes Nachahmen nicht benötigen, um uns auf Internetseiten zurecht zu finden und es aus diesem Grund wichtig ist den Skeuomorphismus auf ein Minimum und damit meine ich Elemente, die ohne den Skeuomorphismus nicht funktionieren, zu reduzieren.

inhalt-zentriert

Um den Besuchern der Internetseite möglichst viel von unserem Unternehmen erzählen zu können, müssen wir darauf achten den Inhalt („Content“) in den Vordergrund zu stellen.

Für den ein oder anderen mag das Ganze jetzt sehr in die Richtung minimalistisches Design gehen. Doch im Gegensatz zum minimalistischen Design, ist es wichtig die Funktion der einzelnen Elemente in den Vordergrund zu stellen. Die Reduzierung kann nur so lange funktionieren, bis die Bedienbarkeit des reduzierten Elements unter dem Vorgang leidet.

Um Ihnen einen ersten Eindruck eines authentischen Designs zu vermitteln, geht es im folgenden Abschnitt um das Redesign in iOS7, dem Betriebssystem von iPhone und iPad, genauer um die Neugestaltung der Sprachmemo App.

Vergleich der Sprachmemo App

Links iOS6 und rechts iOS7

 

Apple wagt mit dem Redesign einen drastischen Schritt weg von dem skeuomorphen Design hin zu einem funktionellen Flat-Design, das das digitale Medium widerspiegeln soll.

Die Hintergrundstruktur wurde komplett entfernt und gegen eine zweigeteilte Farbfläche getauscht, die eine einfache Differenzierung zwischen der Aufnahme und dem Aufnahmearchiv ermöglicht, ohne diese auf zwei separaten Seiten darstellen zu müssen. Anstelle des großen Mikrophons ist nun eine Dezibelanzeige gerückt, die schon während der Aufnahme einen Aufschluss über eventuell zu laute oder leise Stellen bringt. Die Buttons mit ihrer für iOS typischen Alustruktur wurden bis auf ihr funktionelles Minimum reduziert und aufgrund der Platzersparnis findet eine Headline als Informationsträger am oberen Bildschirmrand zusätzlichen Platz.
Durch die Reduzierung auf das Funktionelle und die Anpassung an das digitale Medium, können alle Informationen, die in der App vorhanden sein müssen, auf einer Seite dargestellt werden.

Für uns ist wichtig, dass das Flat-Design, welches bei dem Redesign zum Einsatz gekommen ist, viele Elemente beinhaltet, die es ermöglichen inhalt-basierte und authentische Webseiten zu erstellen. Die Reduzierung der oftmals überladenen Seiten, das Herausstellen des Inhalts und das Einlassen auf das digitale Medium, ohne in den Skeuomorphismus zu verfallen.