{"id":12685,"date":"2021-11-04T00:00:00","date_gmt":"2021-11-03T23:00:00","guid":{"rendered":"http:\/\/marketing.ch\/uncategorized\/fuer-den-besten-ersten-eindruck-diese-10-bausteine-braucht-eine-gute-webseite\/"},"modified":"2023-12-20T14:56:33","modified_gmt":"2023-12-20T13:56:33","slug":"fuer-den-besten-ersten-eindruck-diese-10-bausteine-braucht-eine-gute-webseite","status":"publish","type":"post","link":"https:\/\/marketing.ch\/digital-marketing\/fuer-den-besten-ersten-eindruck-diese-10-bausteine-braucht-eine-gute-webseite\/","title":{"rendered":"F\u00fcr den besten ersten Eindruck: Diese 10 Bausteine braucht eine gute Webseite"},"content":{"rendered":"\n<p><strong>Stell dir vor, du schaltest eine Textanzeige auf Google, in die du viel Aufwand und auch etwas Geld investiert hast. Sie kommt deswegen auch super an und wird gut geklickt, aber die User*innen springen schnell von deiner Landingpage ab, weil sie nicht gut designed ist. Ziemlich schade, oder?<\/strong><\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\"><h2>Inhaltsverzeichnis<\/h2><nav><ul><li class=\"\"><a href=\"#h-ein-gutes-fundament-legen\">Ein gutes Fundament legen<\/a><\/li><li class=\"\"><a href=\"#h-vor-der-ver-ffentlichung\">Vor der Ver\u00f6ffentlichung<\/a><ul><li class=\"\"><a href=\"#h-eine-passende-domain-finden\">Eine passende Domain finden<\/a><\/li><li class=\"\"><a href=\"#h-ziele-erfassen\">Ziele erfassen<\/a><\/li><li class=\"\"><a href=\"#h-zielgruppe-definieren\">Zielgruppe definieren<\/a><\/li><li class=\"\"><a href=\"#h-navigation-planen\">Navigation planen<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#h-die-umsetzung\">Die Umsetzung<\/a><ul><li class=\"\"><a href=\"#h-usability-regeln-einhalten\">Usability-Regeln einhalten<\/a><\/li><li class=\"\"><a href=\"#h-responsives-design-gestalten\">Responsives Design gestalten<\/a><\/li><li class=\"\"><a href=\"#h-ladezeiten-verk-rzen\">Ladezeiten verk\u00fcrzen<\/a><\/li><li class=\"\"><a href=\"#h-kontaktm-glichkeiten-einrichten\">Kontaktm\u00f6glichkeiten einrichten<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#h-laufende-optimierungen\">Laufende Optimierungen<\/a><ul><li class=\"\"><a href=\"#h-relevante-inhalte-kreieren\">Relevante Inhalte kreieren<\/a><\/li><li class=\"\"><a href=\"#h-sicherheit-laufend-berpr-fen\">Sicherheit laufend \u00fcberpr\u00fcfen<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#h-h-uschen-bauen\">H\u00e4uschen bauen<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Gutes Webdesign ist kein Nice-to-have, sondern ein Muss. Das gilt&nbsp;<a href=\"https:\/\/marketing.ch\/diese-9-elemente-duerfen-auf-deiner-landingpage-auf-keinen-fall-fehlen\/\" target=\"_blank\" rel=\"noreferrer noopener\">nicht nur bei Landingpages<\/a>, dein gesamter Webauftritt sollte gewisse Standards erf\u00fcllen, denn die Webseite ist h\u00e4ufig einer der ersten Interaktionspunkte, den Kund*innen mit deinem Unternehmen haben. Und du hast nur eine Chance, einen guten ersten Eindruck zu erzeugen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ein-gutes-fundament-legen\">Ein gutes Fundament legen<\/h2>\n\n\n\n<p>Die bedeutenden Faktoren, die eine gute von einer schlechten Webseite unterscheiden, sind sowohl vor als auch nach dem Webseiten-Launch zu ber\u00fccksichtigen. Wir unterteilen unsere Tipps deswegen in die Bausteine, die in der Planung zu ber\u00fccksichtigen sind, solche die bei der Umsetzung relevant werden und diejenigen, die laufend umgesetzt und optimiert werden sollten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-vor-der-ver-ffentlichung\">Vor der Ver\u00f6ffentlichung<\/h2>\n\n\n\n<p>Gute Planung ist das A und O eines jeden Projekts \u2013 auch bei einer Webseite. Wie du die Planungsphase aus Sicht der Projektleitung erfolgreich meisterst, erf\u00e4hrst du&nbsp;<a href=\"https:\/\/marketing.ch\/neue-webseite-so-geht-garantiert-nichts-vergessen-bei-deinem-projekt\/\" target=\"_blank\" rel=\"noreferrer noopener\">in diesem Artikel<\/a>. Hier geht es um die Bausteine des Webdesigns, die dich von Anfang an auf den Pfad zu einer guten Webseite f\u00fchren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-eine-passende-domain-finden\">Eine passende Domain finden<\/h3>\n\n\n\n<p>Deine Webseite muss f\u00fcr Interessierte gut auffindbar sein. Das heisst, du musst einen Domainnamen w\u00e4hlen, der kurz, einpr\u00e4gsam und m\u00f6glichst nah am Unternehmensname ist. Vielleicht erg\u00e4nzt du den Domainnamen noch um eine Beschreibung deiner Gesch\u00e4ftsaktivit\u00e4ten. Zum Beispiel Shop, Magazin oder Blog. Einige dieser Begriffe sind sogar als Top-Level-Domain verf\u00fcgbar.&nbsp;<\/p>\n\n\n\n<p>Auch diese sollte gut gew\u00e4hlt sein. Wenn du auf Swissness setzt, bietet sich nat\u00fcrlich .ch an. Bist du international t\u00e4tig? Dann vielleicht doch eher .com. Weitere Tipps zur Wahl deiner Domain und wie du beim Kauf vorgehen solltest, gibt es&nbsp;<a href=\"https:\/\/marketing.ch\/was-du-unbedingt-wissen-musst-bevor-du-deine-neue-domain-kaufst\/\" target=\"_blank\" rel=\"noreferrer noopener\">in diesem Artikel<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ziele-erfassen\">Ziele erfassen<\/h3>\n\n\n\n<p>Diesen Punkt solltest du dir nat\u00fcrlich schon ganz zu Beginn \u00fcberlegt haben. Welchen Zweck soll deine Webseite \u00fcberhaupt erf\u00fcllen? Wird es ein&nbsp;<a href=\"https:\/\/marketing.ch\/online-shop-erstellen-5-shopsysteme-fuer-dein-e-commerce-im-ueberblick\/\" target=\"_blank\" rel=\"noreferrer noopener\">Onlineshop<\/a>&nbsp;oder sollen einfach Daten zum Unternehmen \u00fcbersichtlich dargestellt werden? Versetze dich in die Perspektive deiner Kund*innen. Was erwarten, sie auf der Seite? Welche Informationen suchen sie? Wenn sie finden, was sie suchen, sind sie eher bereit, viel Zeit auf der Webseite zu verbringen und etwas zu kaufen, Kontakt aufzunehmen oder einen&nbsp;<a href=\"https:\/\/marketing.ch\/10-leadmagnete-die-deine-newsletter-liste-erfolgreich-mit-neuen-adressen-fuellen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Newsletter zu abonnieren<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-zielgruppe-definieren\">Zielgruppe definieren<\/h3>\n\n\n\n<p>Die Bestimmung der Zielgruppe h\u00e4ngt eng mit dem Ziel der Webseite zusammen, das wir gerade angeschaut haben. Die Inhalte auf deiner Seite m\u00fcssen f\u00fcr die Nutzer*innen interessant sein und einen Mehrwert bieten. Um zu wissen, was diese wollen, brauchst du eine gut definierte Zielgruppe \u2013 und <a href=\"https:\/\/marketing.ch\/kundenorientiertes-marketing-so-erstellst-du-erfolgreich-personas\/\" target=\"_blank\" rel=\"noreferrer noopener\">bestenfalls Personas<\/a>. Das Ziel dieses Bausteins ist \u00e4hnlich wie oben, den Besucher*innen den Content anbieten zu k\u00f6nnen, den sie erwarten. Das generiert Leads, Conversions und f\u00fchrt langfristig zu einem besseren Ranking in Suchmaschinen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-navigation-planen\">Navigation planen<\/h3>\n\n\n\n<p>Du weisst jetzt, welche Inhalte du erstellen musst, um die Erwartungen deiner Zielgruppe zu erf\u00fcllen. Bedenke aber, dass der Content innerhalb der Webseite auch gut auffindbar sein muss. Daf\u00fcr brauchst du eine sinnvolle und \u00fcbersichtliche Navigationsstruktur. Teile die Webseite daf\u00fcr in die Teilbereiche ein, f\u00fcr die sich unterschiedliche Personas interessieren. Die Bezeichnungen m\u00fcssen dabei sofort ersichtlich machen, wo sie die gesuchte Information oder die L\u00f6sung f\u00fcr ihr Problem finden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-die-umsetzung\">Die Umsetzung<\/h2>\n\n\n\n<p>Der Bauplan f\u00fcr deine Webseite steht jetzt. Nun geht es darum, diesen getreu umzusetzen. Oberstes Ziel ist, dass die Webseite gut navigierbar und nutzbar ist. So verbringen Interessierte mehr Zeit darauf. Folgende inhaltlichen und gestalterischen Gesichtspunkte gilt es dabei zu ber\u00fccksichtigen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-usability-regeln-einhalten\">Usability-Regeln einhalten<\/h3>\n\n\n\n<p>Viele Webseiten gleichen sich in ihrem Aufbau und in ihrer optischen Aufmachung. Nicht weil sie alle b\u00f6swillig voneinander abschauen, sondern weil es sinnvolle Regeln gibt, die eine gute Nutzbarkeit von Webseiten gew\u00e4hrleisten. Hier ein paar der wichtigsten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Aesthetic Usability Effect<\/strong>: Ein \u00e4sthetisch ansprechendes Design wirkt automatisch funktionaler und besser bedienbar.<\/li>\n\n\n\n<li><strong>Doherty Threshold<\/strong>: Nutzer*innen verlangen auf jede Aktion innert 400ms eine Reaktion. Deswegen muss deine Webseite auf Schnelligkeit optimiert sein. Ben\u00f6tigt eine Reaktion mehr Zeit, zeige den Besuchenden mit einer Animation, dass ihre Eingabe verarbeitet wird.<\/li>\n\n\n\n<li><strong>Fitt\u2019s Law<\/strong>: Die Zeit, die User*innen ben\u00f6tigen, um mit der Maus einen Zielpunkt zu erreichen ist abh\u00e4ngig von der Gr\u00f6sse des Ziels und der Distanz bis dahin. Und je l\u00e4nger eine Person braucht, um den Cursor zu bewegen, desto wahrscheinlicher ist es, dass sie es ganz bleiben l\u00e4sst. Platziere deswegen Call-to-action-buttons gut erreichbar und gross.<\/li>\n\n\n\n<li><strong>Hick\u2019s Law<\/strong>: Je komplexer oder zahlreicher die Auswahlm\u00f6glichkeiten, desto l\u00e4nger braucht es f\u00fcr eine Entscheidung. Biete darum bei Produkten und Dienstleistungen nicht zu viele Variationen an, sondern wenige daf\u00fcr sinnvolle.<\/li>\n\n\n\n<li><strong>Miller\u2019s Law<\/strong>: Ein Mensch kann etwa sieben (+\/- 2) Elemente gleichzeitig im Ged\u00e4chtnis behalten. Das heisst, du solltest nie mehr Men\u00fcoptionen, Aufz\u00e4hlungspunkte etc. darstellen.<\/li>\n\n\n\n<li><strong>Barrierefreiheit<\/strong>: Deine Webseite muss von Personen mit Einschr\u00e4nkungen problemlos nutzbar sein.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsives-design-gestalten\">Responsives Design gestalten<\/h3>\n\n\n\n<p>\u00dcber die H\u00e4lfte des gesamten Internet-Traffics geht derzeit von Smartphones aus \u2013 Tendenz steigend. Selbstverst\u00e4ndlich also, dass deine Webseite auf den kleinen Bildschirmen picobello aussehen muss. Moderne Webseiten sind darum responsiv gestaltet. Das bedeutet, dass sich die Darstellung der Inhalte dynamisch an die Bildschirmgr\u00f6sse des Endger\u00e4ts anpasst.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ladezeiten-verk-rzen\">Ladezeiten verk\u00fcrzen<\/h3>\n\n\n\n<p>Niemand wartet gerne darauf, dass eine Webseite ewig lange l\u00e4dt. Wenn du also User*innen nicht sofort abschrecken m\u00f6chtest, sorge daf\u00fcr, dass alle Seiteninhalte auf schnelle Ladezeiten optimiert sind. Lange Ladezeiten sind \u00fcbrigens auch f\u00fcr Suchmaschinen ein No-Go. Mit\u00a0<a href=\"https:\/\/pagespeed.web.dev\/?hl=de\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">diesem Tool von Google<\/a>\u00a0kannst du \u00fcberpr\u00fcfen, wie gut deine Seite abschneidet. Denke auch daran, dass wie oben erw\u00e4hnt viele Personen auf dem Smartphone und damit auch im mobilen Netz surfen, das oft nicht allzu schnell ist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-kontaktm-glichkeiten-einrichten\">Kontaktm\u00f6glichkeiten einrichten<\/h3>\n\n\n\n<p>Neben einer Anlaufstelle f\u00fcr das Informationsbed\u00fcrfnis deiner bestehenden und potenziellen Kundschaft soll deine Webseite auch eine Anlaufstelle f\u00fcr Kundensupport sein. Daf\u00fcr bindest du am besten ein Kontaktformular ein. Hier kannst du Nutzer*innen bei der E-Mail-Eingabe auch anbieten, deinen Newsletter zu abonnieren. Du kannst auch auf Social-Media-Kan\u00e4le verweisen, falls du dich dort mit deiner Community austauschst.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-laufende-optimierungen\">Laufende Optimierungen<\/h2>\n\n\n\n<p>Deine Webseite steht endlich! Doch die Arbeit h\u00f6rt nie auf. Damit Besucher*innen und Suchmaschinen deine Seite weiterhin lieben, musst du sie laufend aktuell halten. Folgende zwei Punkte sind dabei die gr\u00f6ssten Hebel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-relevante-inhalte-kreieren\">Relevante Inhalte kreieren<\/h3>\n\n\n\n<p>Hochwertige und f\u00fcr die Zielgruppe relevante Inhalte braucht deine Webseite von Beginn an. Wir f\u00fchren den Punkt aber hier auf, um zu betonen, wie wichtig es ist, diese Inhalte laufend zu aktualisieren und neue zu ver\u00f6ffentlichen. Es macht einen schlechten Eindruck, wenn Nutzer*innen auf deiner Seite veraltete Produktinformationen oder \u00fcberholte Blogartikel finden. Es kann schnell der Eindruck entstehen, dass die Webseite verwahrlost. Erstellst du zus\u00e4tzlich regelm\u00e4ssig neuen Content, danken es dir deine Besucher*innen und Suchmaschinen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sicherheit-laufend-berpr-fen\">Sicherheit laufend \u00fcberpr\u00fcfen<\/h3>\n\n\n\n<p>Das sollte selbstverst\u00e4ndlich sein, wird aber selten erw\u00e4hnt. Gute Sicherheitsvorkehrungen sind unabdingbar und d\u00fcrfen auch mal etwas kosten. Dass deine Webseite das sichere https-Protokoll nutzt, ist das absolute Minimum. \u00dcbrigens ist die Sicherheit deiner Webseite auch ein ausschlaggebender Faktor f\u00fcr das Ranking in Suchmaschinen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h-uschen-bauen\">H\u00e4uschen bauen<\/h2>\n\n\n\n<p>Eine Webseite funktioniert wie ein Haus. Erst mit einem ausf\u00fchrlichen Plan in der Hand, legst du mit der Konstruktion los. Dabei h\u00e4ltst du dich an gewisse Standards. Du musst das Rad nicht neu erfinden. Viele Designelemente haben sich etabliert, weil sie sinnvoll sind und gut funktionieren. Sch\u00f6pfe also aus etabliertem Wissen. Die meisten Fehler wurden schon von jemandem gemacht, du brauchst sie nicht zu wiederholen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stell dir vor, du schaltest eine Textanzeige auf Google, in die du viel Aufwand und auch etwas Geld investiert hast. Sie kommt deswegen auch super an und wird gut geklickt, aber die User*innen springen schnell von deiner Landingpage ab, weil sie nicht gut designed ist. Ziemlich schade, oder? Gutes Webdesign ist kein Nice-to-have, sondern ein [&hellip;]<\/p>\n","protected":false},"author":94,"featured_media":12686,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[173],"tags":[],"class_list":["post-12685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing"],"acf":[],"_links":{"self":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/12685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/comments?post=12685"}],"version-history":[{"count":3,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/12685\/revisions"}],"predecessor-version":[{"id":20980,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/posts\/12685\/revisions\/20980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media\/12686"}],"wp:attachment":[{"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/media?parent=12685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/categories?post=12685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marketing.ch\/wp-json\/wp\/v2\/tags?post=12685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}