#95 Drei Goldene Regeln für das Design deiner erfolgreichen Webseite

00:00:04: Unsere heutige Folge trägt den vielversprechenden und langen

00:00:08: Titel 3 goldene Designregeln für deine

00:00:11: Webseite, damit deine Online-Marketing-Maßnahmen nicht sinnlos

00:00:15: verpuffen. Es dreht sich heute effektives Webdesign.

00:00:19: Als Hörer oder Hörerin erhältst du tiefe Einblicke in die Welt des

00:00:23: Webdesigns und du bekommst von uns Tipps und Tricks aus der

00:00:27: Praxis für ein besseres Design. Darüber

00:00:30: hinaus möchten wir dich dazu anregen, über dein aktuelles

00:00:34: Webdesign nachzudenken. Ist es wirklich effektiv?

00:00:38: Unterstützt es deine Online-Strategie oder hindert es dich eher daran,

00:00:42: deine Ziele zu erreichen? Also, lass uns mal in

00:00:46: die spannende Welt des Webdesigns eintauchen und sehen, was das Ganze

00:00:49: auch mit Suchmaschinenoptimierung zu tun hat.

00:00:53: Ich stelle mir natürlich die Frage, muss ich als Online-Marketer,

00:00:58: also als Expertin für Suchmaschinenoptimierung und

00:01:02: Suchmaschinenwerbung mich jetzt auch noch im Webdesign

00:01:05: auskennen? Und meine Antwort ist ganz klar,

00:01:09: ja, jetzt zwar nicht bis in die Tiefe,

00:01:13: aber In gewissen Grundzügen sollte ich auch als

00:01:17: Online-Marketer natürlich Kenntnisse im Webdesign

00:01:20: haben. Denn die Conversion findet auf der

00:01:24: Webseite statt. Das heißt, das Ziel wird auf der Webseite

00:01:27: erreicht. Und wenn das unmöglich gemacht wird, weil

00:01:31: das Webdesign unmöglich ist, die Benutzerführung

00:01:35: unmöglich ist, dann hat das sehr wohl Auswirkungen auf den

00:01:38: Erfolg meiner Marketingmaßnahmen. Also

00:01:42: bin ich ganz klar Team Design und ich sage mir

00:01:46: auch als SEO- und SEA-Expertin, sollte ich mich zumindest

00:01:50: in den Grundzügen mit Design auskennen. Und genau aus diesem

00:01:54: Grund machen wir heute diese Podcast-Folge.

00:01:58: Denn wir sehen viele, viele Beispiele auch in der Praxis, wo

00:02:01: wir in der Tat dann auch mit unseren Kunden sprechen und

00:02:05: sagen, möchtest du hier vielleicht nicht mal den Button anpassen

00:02:09: oder hier die Benutzerführung verbessern oder hier

00:02:12: mehr Klartext sprechen. Das sage ich eigentlich

00:02:16: sehr, sehr häufig und das wäre jetzt auch der erste Punkt

00:02:20: für erfolgreiches Webdesign. Und zwar, du musst immer

00:02:24: daran denken, dass Menschen nicht nachdenken

00:02:27: wollen. Und genauso wie Menschen nicht nachdenken wollen, will

00:02:31: Google auch nicht nachdenken. Und ich bin immer Verfechterin

00:02:35: davon, wirklich Klartext zu reden. Also

00:02:39: Navigationsbezeichnung zum Beispiel.

00:02:43: Da bringt Geschwobel nichts, da bringt nichts, den

00:02:47: heißen Brei zu reden. Bezeichne deine

00:02:50: Navigationspunkte eindeutig, sodass jeder,

00:02:54: der sich deine Navigation anschaut, weiß, worum geht es auf

00:02:58: dieser Webseite. Dasselbe gilt für

00:03:02: Buttons zum Beispiel. Viel zu oft steht auf dem Button

00:03:05: weiter oder mehr. Das sind keine

00:03:09: aussagekräftigen Begriffe. So ein Button kann ganz

00:03:13: konkret bezeichnet werden. Wir kennen das alles

00:03:16: vom Kaufen-Button zum Beispiel. Da ist ja inzwischen auch

00:03:20: vorgeschrieben, kostenpflichtig bestellen. Das ist

00:03:24: aber eindeutig. Das ist eine Vorgabe, ja, die muss

00:03:27: ich einhalten, aber es ist eine eindeutige Aussage,

00:03:31: dass ich als Kunde jetzt hier in der Verantwortung

00:03:35: bin und kostenpflichtig bestelle. So,

00:03:39: wenn jetzt hier weiter oder mehr stehen würde oder irgendwas

00:03:43: unkonkretes, dann dann klicke ich da und

00:03:46: ich weiß als Nutzer gar nicht, was passiert, wenn ich dort klicke.

00:03:51: Also guck mal einfach über deine Webseite und schaue, ob

00:03:54: alles konkret und aussagekräftig

00:03:58: benannt ist. Weil du gerade die

00:04:02: Button-Beschriftung erwähnt hattest, Simona, in

00:04:05: der letzten Folge über das WordCamp haben wir auch

00:04:09: über Zugänglichkeit von Webseiten gesprochen, dass wir dort auch Vorträge

00:04:12: gehört haben über Barrierefreiheit. Und auch das ist genau ein Thema,

00:04:16: dass der Button richtig und akkurat beschriftet ist, weil jemand, den

00:04:20: ich lesen kann oder vielleicht nur hört, der weiß ja nicht, was

00:04:23: dann weiter oder hier bedeuten soll. Und deshalb

00:04:27: ist die Button-Beschriftung, wenn dort wirklich akkurat draufsteht, was es

00:04:30: bedeutet, ist das auch für die Zugänglichkeit der Webseite extrem

00:04:34: wichtig. Naja, und vielleicht die Beschriftung ist das

00:04:38: eine, aber gehen wir einfach nochmal einen Schritt zurück.

00:04:42: Ich hatte ja am Anfang gesagt, Menschen wollen nicht nachdenken. Manchmal

00:04:45: wollen Menschen auch nicht einfach lesen oder sie können es nicht

00:04:49: lesen, weil die Sehkraft schon mit dem Alter nachgelassen

00:04:53: hat. Deshalb ist es so wichtig, ein Button auch so zu gestalten,

00:04:57: wie wir es gewohnt sind. Und Generell gilt das für

00:05:01: Webseiten. Also Elemente, die wir verwenden, sollten immer

00:05:04: so dargestellt sein, wie die Masse der Nutzer das

00:05:08: gewohnt ist. Und da ist ein ganz klassisches Beispiel so

00:05:12: ein Button. Jetzt magst du vielleicht denken, oh, das ist aber ein

00:05:16: profaner Tipp. Aber ich habe es in der Praxis auch schon anders gesehen.

00:05:19: Da werden teilweise dann keine Buttons verwendet, die geklickt

00:05:23: werden, sondern zum Beispiel in der grafischen Darstellung

00:05:27: ein Siegel verwendet, was geklickt werden darf. Und

00:05:31: dieses Siegel wird so beschriftet, dass ich, wenn ich mir das durchgelesen

00:05:35: habe und nachgedacht habe, dann komme ich drauf,

00:05:39: dass ich da klicken soll. Aber ich komme nicht in der

00:05:43: ersten Zehntelsekunde drauf, weil ich anfangen

00:05:46: muss zu lesen und zu denken. Und das ist wertvolle Zeit und das

00:05:50: kann man verhindern, indem man einen Button, der geklickt

00:05:54: werden soll, so auch gestaltet. Wie sieht so ein Button aus? Der ist

00:05:57: meistens länglich, schmal, hat entweder eckige

00:06:01: Kanten oder auch abgerundete Kanten und hat einen

00:06:04: kräftigen Untergrund und eine sehr kontrastreichte Beschriftung.

00:06:09: Das ist für mich so ein klassischer Klickbutton. Und da

00:06:12: irgendwelche Siegel zu nehmen oder was weiß ich,

00:06:16: vielleicht fällt jemand ein Dreieck zu verwenden oder ein

00:06:19: Oktagon. Das ist vom Design her, ist das vielleicht alles

00:06:23: schick und außergewöhnlich, aber von der Benutzerfreundlichkeit,

00:06:27: von der Zugänglichkeit ist das eben sehr, sehr

00:06:31: mangelhaft und sollte deshalb auch vermieden werden,

00:06:35: wenn erreicht werden möchte, dass eben möglichst viele

00:06:39: Nutzer auf diesen Button klicken. Vielleicht

00:06:42: noch ganz kurz als Einwand, falls es sich jemand jetzt nicht vorstellen kann,

00:06:46: was ein Siegel ist. Also ein siegel ist in der regel eher

00:06:50: ein ein rundes ein rundes design element was dann so außen so ein

00:06:53: bisschen zacken hat sowie so ein sternchen oder wie so ein

00:06:57: stern designt ist und in der mitte meistens noch so

00:07:01: ein abgesetzten teil wo dann irgendwas drauf steht 100

00:07:05: prozent garantie und das ist eben in dem dieser in der designsprache

00:07:09: ist das ein siegel was eben vertrauen oder eine

00:07:12: garantie ausdrückt oftmals und ein klickbutton so wie du

00:07:16: es erklärt hast hat halt eine andere form und eine andere funktion

00:07:19: ja das zählt ja alles was wir jetzt erzählt haben schon in den

00:07:23: bereich rein design sollte so sein wie es die

00:07:26: masse gewohnt ist und für mich zählt auch ganz

00:07:30: klar dazu dass ich von oben nach unten scrolle. Und ich habe

00:07:34: jetzt auch schon Webseiten gesehen, wenn ich anfange zu scrollen, geht

00:07:38: es irgendwie von rechts nach links. Das irritiert mich total. Es

00:07:41: mag zwar jetzt ungewöhnlich sein und dass man sagt, ja, das ist jetzt irgendwie

00:07:45: neu, aber es ist halt nicht gewohnt und ich scrolle von oben nach

00:07:48: unten und auch das ist ein wichtiges Element, dass man dort die

00:07:52: Erwartung der Masse der Besucher trifft, indem man sagt, ich

00:07:56: scrolle von oben nach unten. Genau und stell dir mal vor, du

00:07:59: hast deinen Klickbutton in Form eines runden Siegels

00:08:04: mit einer Beschriftung, klick hier,

00:08:08: nach dem Scrollen von links nach rechts, dann ganz

00:08:12: hinten rechts in der Ecke. Da passiert, also

00:08:16: da erreichst du natürlich nicht deine Ziele und deine Conversion und deine

00:08:19: Verkäufe oder Leads. Und deshalb,

00:08:23: dieses Beispiel zeigt nochmal, dass das sehr wohl uns SEO

00:08:26: und SEA-Experten interessiert, die Online-Marketing-Maßnahmen

00:08:30: aufsetzen und auch am Erfolg gemessen werden,

00:08:33: dass das Design auf der Webseite eben sehr entscheidend ist,

00:08:37: auch für den Erfolg von Marketingmaßnahmen.

00:08:41: Wenn ich an die Gestaltung meiner Webseite gehe, dann habe ich ja

00:08:44: meistens erst mal so, bin ich froh, wenn alles fertig ist. Aber

00:08:48: ganz wichtig ist, dass der Besucher, der auf meiner Webseite ist,

00:08:52: wenn er endlich reagiert, endlich

00:08:55: das Formular ausfüllt, endlich sich für die Newsletter anmeldet

00:08:59: oder endlich den Warenkorb auch abschickt, dass

00:09:03: er dann auch eine reaktion bekommt also dass eine

00:09:06: aktion vom user eine reaktion der

00:09:10: webseite zur folge hat was meine ich damit

00:09:14: also wenn er den wahren kopf wirklich abschickt das dann nicht

00:09:17: einfach nur wieder zurück zur Startseite geht, so nach dem Motto,

00:09:20: ja keine Ahnung, sondern dass da wirklich kommt, danke für den Einkauf,

00:09:24: prima, hier ist noch mal die Zusammenfassung deines Einkaufes, wir bemühen

00:09:28: uns das sofort rauszuschicken und und und. Oder wenn

00:09:32: beispielsweise jemand deine newsletter abonniert also er gibt

00:09:35: seinen namen ein gibt die adresse ein klickt an dass er das haben

00:09:39: will und der nutzer schickt es ab dann sollte eben auf jeden fall noch mal

00:09:43: eine kleine danke seite kommen in der dann steht ja schau bitte

00:09:46: noch mal nach jetzt kommt das du musst dir deine Anmeldung bestätigen. Schau bitte

00:09:50: auch in deinem Spam-Ordner nach und bestätige bitte deine

00:09:53: Anmeldung. Das ist halt wichtig. Das ist dieses Doppel-Opt-In-Verfahren.

00:09:58: Aber eben auch so, dass der Nutzer weiß, was muss er jetzt

00:10:01: tun? Aha, ich muss gucken, ich muss in meinem Spam-Ordner gucken und ich

00:10:05: muss die Anmeldung bestätigen. Diese drei kleinen Schritte muss ich tun.

00:10:08: Deshalb ist es so wichtig, auch hier in dem Gesamtdesign-Konzept,

00:10:15: Aktion und Reaktion zu haben. Aber

00:10:18: es hat natürlich auch noch einen weiteren Hintergrund, der aus

00:10:22: der Suchmaschinenwerbung resultiert. Simona, da kannst du bestimmt noch mal kurz

00:10:26: was sagen. So eine Danke-Seite macht sich natürlich auch immer

00:10:29: gut für die Erfolgsmessung, denn sobald eine

00:10:33: Danke-Seite aufgerufen wird, habe ich ja eine Zielseite, die ich

00:10:37: erreichen wollte. Also genau das ist das Ziel, was ich

00:10:40: erreichen wollte und das kann ich dann natürlich gut

00:10:44: messen. Aber ich will auch noch mal kurz einhaken

00:10:47: und das Augenmerk darauf legen, dass nicht nur bei Erfolgsseiten

00:10:53: ein Feedback von den Webseitenbetreibern kommen sollte,

00:10:56: sondern auch zum Beispiel, wenn Fehlermeldungen

00:11:00: gegeben werden. Gegeben werden. Also entweder, wenn beim Formular

00:11:05: was nicht richtig ausgefüllt wurde, dass dann dort

00:11:08: wirklich ganz explizit geschrieben wird, vielleicht noch in einer

00:11:12: anderen Farbe, ja hier fehlen noch Informationen in diesem Feld.

00:11:17: Ansonsten weiß ja der Nutzer gar nicht, warum sich das Formular zum Beispiel jetzt

00:11:21: nicht abschickt. Oder der Nutzer

00:11:25: gibt im Browser die falsche Adresse ein,

00:11:28: beziehungsweise eine bestimmte Unterseite ist nicht

00:11:32: erreichbar, sodass eine 404-Fehler-Seite

00:11:36: erscheint. Und auch hier ist es eine Aufgabe des

00:11:39: Webdesigners, eine 404-Fehler-Seite so zu

00:11:43: gestalten, dass da der Nutzer eben einfach nicht nur eine

00:11:47: lapidare Aussage bekommt, dass er sich hier an

00:11:51: der Stelle falsch befindet, sondern erst

00:11:54: mal vielleicht durch eine witzige Gestaltung die

00:11:58: Laune des Nutzers wieder anhebt und dann den Nutzer

00:12:01: natürlich auch wieder zurückführt auf die eigentliche Webseite,

00:12:05: wo er entsprechende Inhalte finden kann. Also

00:12:09: so eine 404-Fehler-Seite gehört eben auch ganz klar für

00:12:13: mich zu dem Thema Kommunikation mit dem

00:12:16: Kunden nach einer bestimmten Aktion. Und diese

00:12:20: Aktion ist eben nicht immer nur der Kauf und der Lead und das

00:12:23: Ausführen des Kontaktformulars, sondern der Kunde kann sich ja

00:12:27: auch verirren auf deiner Webseite. Und auch dort ist es

00:12:31: wichtig, entsprechend zu kommunizieren. Dann

00:12:34: lass mich noch mal die drei goldenen Designregeln ganz kurz

00:12:38: zusammenfassen. Also Regel Nummer eins, Menschen wollen nicht nachdenken.

00:12:42: Mach es klar und einfach für die Menschen.

00:12:46: Punkt Nummer zwei, Design soll so sein,

00:12:49: wie es die Mehrheit der Nutzer kennt. Also

00:12:53: experimentiere bitte nicht rum mit den Kauf- und Klickbuttons.

00:12:58: Und Punkt Nummer drei. Jede Aktion auf der

00:13:01: Seite sollte eine Reaktion von dir hervorrufen,

00:13:05: dass der Nutzer auch weiß, wo er sich befindet und was er in der

00:13:09: Zukunft tun soll. Und was du jetzt tun

00:13:12: kannst, wenn dich dieses Thema wirklich interessiert und du deine Webseite auf

00:13:16: das nächste Level heben willst, kann ich dir jetzt an dieser Stelle

00:13:20: sagen, komm einfach in unsere Community, wo wir genau

00:13:23: solche Themen abarbeiten, besprechen und dort auch mehr

00:13:27: und weitere hilfreiche Tipps geben. Die Community findest du

00:13:31: unter

00:13:31: https://alsa-digital.de/community

00:13:37: und den Link dazu findest du natürlich logischerweise auch in den

00:13:40: Shownotes. Ich freue mich, wenn wir dich bei uns begrüßen

00:13:44: können und verabschiede mich für heute und sage tschüss, bis zur nächsten

00:13:48: Woche. Ich verabschiede mich auch und sage tschüss und

00:13:51: auf

00:13:51: Wiedersehen.