{"id":57,"date":"2017-03-15T14:51:27","date_gmt":"2017-03-15T13:51:27","guid":{"rendered":"https:\/\/www.webmen.de\/blog\/?p=57"},"modified":"2017-05-10T09:42:46","modified_gmt":"2017-05-10T07:42:46","slug":"die-benutzerfreundliche-website","status":"publish","type":"post","link":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/","title":{"rendered":"Die benutzerfreundliche Website"},"content":{"rendered":"
\n

Jetzt mal Hand aufs Herz: Wie sieht denn eigentlich eine gute, benutzerfreundliche Website aus? Eine Frage, die uns Kunden oft stellen. Wir verweisen dann gerne auf unsere Referenzen<\/a>, dort findet man genug Beispiele zum anschauen. Live und in Farbe. Eine gute Website sieht dabei nicht einfach nur schick aus, sie sollte vor allem auch benutzerfreundlich<\/strong> sein. Aber was bedeutet das genau? Und wie war das nochmal mit der Website-Usability<\/strong>?<\/p>\n<\/div>\n

<\/p>\n

\n

Die Sache mit der Website-Usability<\/h2>\n

Usability – ein Schlagwort, das immer h\u00e4ufiger in einschl\u00e4gigen Blogs und bei Fachgespr\u00e4chen \u00fcber Websites zu finden oder zu h\u00f6ren ist. Usability bedeutet \u00fcbersetzt soviel wie Brauchbarkeit, [Be-]Nutzbarkeit oder Bedienbarkeit. Sie beschreibt die Benutzerfreundlichkeit (user friendlyness) einer Website. Was bedeutet es aber im Detail, eine Website unter dem Gesichtspunkt der Usablilty zu erstellen?<\/p>\n

Eine Website muss \u00a0bestimmten Anforderungen gerecht werden<\/strong>, um als benutzerfreundlich eingestuft zu werden. Hierbei ist darauf zu achten, die Darstellung der Inhalte an die menschliche Aufnahmef\u00e4higkeit anzupassen. Der Nutzer muss in der Lage sein, die Information auf der Website schnell zu erfassen, zu verarbeiten und richtig einzuordnen.<\/p>\n

Dabei beachten wir stets folgende Usability-Regeln f\u00fcr Websites:<\/h3>\n
    \n
  • Die Website sollte stets eine bekannte Struktur<\/strong> aufweisen, damit ein Wiedererkennungswert geben ist. Der Nutzer findet sich somit schnell zurecht und muss nicht viel umdenken. Durch gelernte Standards und Vorgehensweisen sowie einem einem festem Layout wird dem Nutzer \u00a0eine intuitive Bedienung<\/strong> erm\u00f6glicht. Das bedeutet nicht, dass wir hier nach einem 08\/15-Muster vorgehen. Auch eine bekannte Struktur kann ansprechend, individuell und spannend sein.<\/li>\n
  • Zu viele Informationen<\/strong> st\u00f6ren die Auffassungsgabe. Das gleiche gilt f\u00fcr\u00a0St\u00f6rfaktoren<\/strong> wie nervige Pop-Ups, zu schnell wechselnde Slider oder zu viele Animationen sollte verzichtet werden.<\/li>\n
  • Die Kernaufgabe einer Website ist immer, den Bed\u00fcrfnissen des Besuchers<\/strong> nachzukommen. Der Nutzer m\u00f6chte sich beispielsweise informieren, etwas kaufen oder unterhalten werden. \u00a0Die besucherfreundliche Website muss ihren Inhalt eindeutig vermitteln und die Informationen sollten in eindeutigen Hierarchien klar dargestellt und sinnvoll gruppiert sein.<\/li>\n
  • Der Nutzer m\u00f6chte schnell zum Ziel kommen, lange Ladezeiten sollten vermieden werden.<\/strong><\/li>\n<\/ul>\n

    Die benutzerfreundliche Website: ein Zusammenspiel von Usability und Design<\/h2>\n

    Ein Website-Besucher entscheidet innerhalb von Sekunden, ob er er auf der Website bleiben m\u00f6chte oder diese sofort wieder verl\u00e4sst. Sekunden, die entscheidend sein k\u00f6nnen. Hier z\u00e4hlt der erste Eindruck. Oft wird uns die Frage gestellt, wie wichtig dann noch ein Design ist? Reicht es vielleicht ein einfaches, dem Zeitgeist entsprechendes Layout f\u00fcr die Website zu erstellen?<\/p>\n

    Wir sind der Meinung, dass ein Design die Leistung eines Unternehmens widerspiegeln soll. Das kann in einfacher oder in einer aufw\u00e4ndigen Form erfolgen. Wichtig ist, dass die Website den Anforderungen der Suchmaschinen und der Besucher entspricht. Dabei gilt: Ein Design, wie auch immer es aussieht, hilft der Website nicht zwangsl\u00e4ufig bei Suchmaschinen voran zu kommen. Es kommt auf den Aufbau der Seite und die Inhalte an. Und hier leisten Suchmaschinen den Internetnutzern einen gro\u00dfen Dienst. Besonders Google achtet mehr auf Inhalte und gut strukturierte Seite als auf besonderes Design.<\/p>\n

    Usability vs. Design<\/h3>\n

    In vielen F\u00e4llen stellt das Design einen Kompromiss dar. Einen Kompromiss zwischen einer bedienerfreundlichen Seite und Ideen, die die W\u00fcnsche des Betreibers der Website widerspiegeln. Ein solcher Kompromiss ist oft aber viel besser, als eine Seite, die von den Besuchern nur kurz betrachtet und dann wieder verlassen wird. Der Grund liegt dabei oft in der komplizierten Navigation oder den verwirrenden Grafiken, die der Besucher nicht sofort erschlie\u00dfen kann.<\/p>\n

    Der letzte Schritt: die technische Umsetzung<\/h2>\n

    Ist das Design gekl\u00e4rt geht es an die technische Umsetzung.\u00a0Die technische Umsetzung sollte mit einem modernen Content Management System – kurz: CMS – erfolgen. Diese Systeme bieten viele M\u00f6glichkeiten um eine Seite bedienerfreundlich zu programmieren. Des Weiteren kann der Betreiber der Website Inhalte schnell und einfach pflegen. Somit kann die Website auf einem aktuellen Stand gehalten werden, was wiederum sowohl f\u00fcr die Besucher der Website echten Mehrwert verspricht als auch von Google gern gesehen und honoriert wird.<\/p>\n

    So machst du deine Website benutzerfreundlich:<\/h2>\n

    Der Besucher oder die Besucherin sollen sich auf der Seite sofort zurechtfinden und die gew\u00fcnschten Informationen ohne Umwege finden. Deshalb:<\/p>\n

    \"die<\/p>\n

      \n
    1. Don’t make me think:<\/strong><\/span> Die Website muss einfach und selbsterkl\u00e4rend sein<\/li>\n
    2. Bekannte Muster:<\/strong><\/span> Eine bekannte Struktur schafft einen Wiedererkennunsgwert und erm\u00f6glicht eine intuitive Bedienung<\/li>\n
    3. Strukturierte Inhalte:<\/strong> <\/span>Der Inhalt muss strukturiert sein und sich den Lesegewohnheiten anpassen<\/li>\n
    4. Zur\u00fcck zum Start:<\/span>\u00a0<\/strong>Die Startseite sollte immer direkt erreichbar sein<\/li>\n
    5. Ruf mich an:<\/strong><\/span> Kontaktdaten sollten immer an pr\u00e4senter Stelle der Website stehen<\/li>\n
    6. Auf den ersten Blick<\/strong>:<\/span> Wichtige Inhalte sollten an pr\u00e4senter Stelle stehen und m\u00f6glichst auf den ersten Blick erfasst werden k\u00f6nnen<\/li>\n
    7. Nerv mich nicht:<\/strong><\/span> Auf St\u00f6rfaktoren wie Pop-Ups, zu schnelle Slider und zu viele Animationen verzichten<\/li>\n
    8. Wo bin ich?<\/strong><\/span> Der Besucher oder die Besucherin m\u00f6chte immer wissen wo sie sich befinden. Deshalb ist eine Anzeige des gerade benutzten Navigationspunktes notwendig<\/li>\n
    9. Gef\u00e4llt mir:<\/strong><\/span> Die Website sollte immer dem Bed\u00fcrfnis (informieren, kaufen oder unterhalten werden) des Besuchers\u00a0nachkommen<\/li>\n
    10. Mit Vollspeed:<\/strong><\/span> Die Website soll schnell sein. Lange Ladezeiten durch gro\u00dfe Bilder oder Grafiken frustrieren den Besucher oder die Besucherin. Besonders bei der Nutzung von Smartphones sollte das Design angepasst sein<\/li>\n<\/ol>\n

       <\/p>\n

       <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      Jetzt mal Hand aufs Herz: Wie sieht denn eigentlich eine gute, benutzerfreundliche Website aus? Eine Frage, die uns Kunden oft stellen. Wir verweisen dann gerne auf unsere Referenzen, dort findet man genug Beispiele zum anschauen. Live und in Farbe. Eine…<\/p>\n","protected":false},"author":1,"featured_media":58,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3,6,7,15,14],"tags":[],"class_list":["post-57","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-e-commerce","category-marketing","category-online-marketing","category-tipps-tricks","category-webentwicklung"],"yoast_head":"\nDie benutzerfreundliche Website - Usability - WebMen Blog<\/title>\n<meta name=\"description\" content=\"Jetzt mal Hand aufs Herz: Wie sieht eine benutzerfreundliche Website aus? Und was hat es mit der Usability & dem Design auf sich? + schicke Infografik\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Die benutzerfreundliche Website - Usability - WebMen Blog\" \/>\n<meta property=\"og:description\" content=\"Jetzt mal Hand aufs Herz: Wie sieht eine benutzerfreundliche Website aus? Und was hat es mit der Usability & dem Design auf sich? + schicke Infografik\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-15T13:51:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-10T07:42:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2016\/08\/die-besucherfreundliche-Website.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"4491\" \/>\n\t<meta property=\"og:image:height\" content=\"2994\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"webmen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Die benutzerfreundliche Website - Usability - WebMen Blog","description":"Jetzt mal Hand aufs Herz: Wie sieht eine benutzerfreundliche Website aus? Und was hat es mit der Usability & dem Design auf sich? + schicke Infografik","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/","og_locale":"de_DE","og_type":"article","og_title":"Die benutzerfreundliche Website - Usability - WebMen Blog","og_description":"Jetzt mal Hand aufs Herz: Wie sieht eine benutzerfreundliche Website aus? Und was hat es mit der Usability & dem Design auf sich? + schicke Infografik","og_url":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/","article_published_time":"2017-03-15T13:51:27+00:00","article_modified_time":"2017-05-10T07:42:46+00:00","og_image":[{"width":4491,"height":2994,"url":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2016\/08\/die-besucherfreundliche-Website.jpg","type":"image\/jpeg"}],"author":"webmen","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"webmen","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#article","isPartOf":{"@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/"},"author":{"name":"webmen","@id":"https:\/\/www.webmen.de\/blog\/#\/schema\/person\/30971e27f22eb6a451c7502035fabed7"},"headline":"Die benutzerfreundliche Website","datePublished":"2017-03-15T13:51:27+00:00","dateModified":"2017-05-10T07:42:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/"},"wordCount":870,"commentCount":3,"publisher":{"@id":"https:\/\/www.webmen.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2016\/08\/die-besucherfreundliche-Website.jpg","articleSection":["E-Commerce","Marketing","Online-Marketing","Tipps & Tricks","Webentwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/","url":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/","name":"Die benutzerfreundliche Website - Usability - WebMen Blog","isPartOf":{"@id":"https:\/\/www.webmen.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#primaryimage"},"image":{"@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2016\/08\/die-besucherfreundliche-Website.jpg","datePublished":"2017-03-15T13:51:27+00:00","dateModified":"2017-05-10T07:42:46+00:00","description":"Jetzt mal Hand aufs Herz: Wie sieht eine benutzerfreundliche Website aus? Und was hat es mit der Usability & dem Design auf sich? + schicke Infografik","breadcrumb":{"@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#primaryimage","url":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2016\/08\/die-besucherfreundliche-Website.jpg","contentUrl":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2016\/08\/die-besucherfreundliche-Website.jpg","width":4491,"height":2994,"caption":"benutzerfreundliche Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webmen.de\/blog\/2017\/03\/15\/die-benutzerfreundliche-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.webmen.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Die benutzerfreundliche Website"}]},{"@type":"WebSite","@id":"https:\/\/www.webmen.de\/blog\/#website","url":"https:\/\/www.webmen.de\/blog\/","name":"Conversionzauber","description":"","publisher":{"@id":"https:\/\/www.webmen.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webmen.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.webmen.de\/blog\/#organization","name":"Webmen Internet GmbH","url":"https:\/\/www.webmen.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.webmen.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2019\/12\/WebMen_Logorgb.png","contentUrl":"https:\/\/www.webmen.de\/blog\/wp-content\/uploads\/2019\/12\/WebMen_Logorgb.png","width":252,"height":55,"caption":"Webmen Internet GmbH"},"image":{"@id":"https:\/\/www.webmen.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webmen.de\/blog\/#\/schema\/person\/30971e27f22eb6a451c7502035fabed7","name":"webmen","url":"https:\/\/www.webmen.de\/blog\/author\/webmen\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":16,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/media\/58"}],"wp:attachment":[{"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmen.de\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}