{"id":3421,"date":"2013-09-23T06:48:12","date_gmt":"2013-09-23T05:48:12","guid":{"rendered":"http:\/\/www.zeichenschatz.net\/?p=3421"},"modified":"2013-09-23T06:48:12","modified_gmt":"2013-09-23T05:48:12","slug":"analyse-einer-website-webdesign-beurteilen","status":"publish","type":"post","link":"https:\/\/zeichenschatz.net\/en\/webdesign\/analyse-einer-website-webdesign-beurteilen\/","title":{"rendered":"Analyse einer Website \u2013 Webdesign beurteilen"},"content":{"rendered":"<p class=\"lead-in\">Die Analyse einer Website ist Voraussetzung und Ausgangspunkt jedes Redesigns im <a title=\"Webdesign Schritt f\u00fcr Schritt \u2013 Entstehungsprozess einer Website\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/webdesign-schritt-fur-schritt-entstehungsprozess-einer-website.html\/\">Entstehungsprozess einer Website<\/a>. Oft gibt es bereits einen Internetauftritt und meistens gibt es damit Unzufriedenheiten. Dann bildet die aktuelle Website den Ma\u00dfstab aller Ver\u00e4nderungen, denn schlussendlich werden die neue und die alte Seite verglichen werden.<\/p>\n<p>Doch auch um den\u00a0<strong>Mitbewerb zu beurteilen<\/strong> ist es wichtig zu wissen, auf welche Gesichtspunkte man besonders achten sollte.\u00a0Eine gute Analyse l\u00e4sst Potentiale erkennen, aus Fehlern lernen und f\u00fcr die Zukunft planen. Es gibt viele Kriterien nach denen sich eine Website beurteilen l\u00e4sst. Ich m\u00f6chte es hier auf die f\u00fcr mich wichtigsten herunterbrechen.<\/p>\n<h3>Drei Fragen<\/h3>\n<p>Wenn man eine Website besucht sollte man auf der Startseite in Mindestzeit dieses drei Fragen beantwortet bekommen:<\/p>\n<ol>\n<li><strong>Worum geht es?<\/strong>\u00a0\u2013 Inhalt<\/li>\n<li><strong>Kann ich mich gut orientieren?<\/strong>\u00a0\u2013\u00a0Navigation<\/li>\n<li><strong>Spricht mich die Atmosph\u00e4re Website an?<\/strong>\u00a0\u2013\u00a0Design<\/li>\n<\/ol>\n<p>Da das Internet kein statisches Medium ist, ist die\u00a0<strong>Interaktion<\/strong> mit einer Website ebenso entscheidend, sowie weiter Aspekte eher technischer Natur. Schauen wir uns die einzelnen Punkte im Detail an.<\/p>\n<h3>Inhalt<\/h3>\n<p>Die Inhalte sind der Grund warum jemand eine Website besucht und deshalb zahlt es sich aus hier richtig kritisch zu sein:<\/p>\n<ul>\n<li><strong>Sinnvolle Inhalte<\/strong>\u00a0\u2013 Sind die Inhalt qualit\u00e4tsvoll, interessant und aktuell?<\/li>\n<li><strong>Aufbau und Gliederung<\/strong>\u00a0\u2013 Sind die Inhalte verst\u00e4ndlich und logisch dargestellt?<\/li>\n<li><strong>Richtige Darstellung f\u00fcr den richtigen Inhalt<\/strong>\u00a0\u2013 Content kann in verschiedenen Formen angeboten werden. Text, Bild, Grafik, Animation, Video, Audio, etc..\u00a0Jede Art hat ihre Vor- und Nachteile. Wichtig ist, dass die Art der Darstellung zum Inhalt passt, bewusst eingesetzt wird und dadurch einen Mehrwert erzeugt.<\/li>\n<li><strong>USPs<\/strong> \u2013 Werden Besonderheiten und Alleinstellungsmerkmale deutlich vermittelt?<\/li>\n<li><strong>Accessibility<\/strong>\u00a0\u2013 Sind die Inhalte barrierefrei und nach den g\u00e4ngigen technischen Standards gestaltet?<\/li>\n<\/ul>\n<figure id=\"attachment_3538\" aria-describedby=\"caption-attachment-3538\" style=\"width: 686px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2013\/09\/lk_baden_homepage-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-3538 img-border\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2013\/09\/lk_baden_homepage-1-686x720.png\" alt=\"Homepage des Landesklinikum Baden-M\u00f6dling\" width=\"686\" height=\"720\" \/><\/a><figcaption id=\"caption-attachment-3538\" class=\"wp-caption-text\">Texte ohne Mehrwert: \u201eAuf unserer Homepage erhalten Sie einen ersten, interessanten Einblick in den Spitalsalltag und viele n\u00fctzliche Informationen rund um Ihren Krankenhausaufenthalt!\u201c auf der Startseite vom\u00a0<a title=\"Landesklinikum Baden-M\u00f6dling\" href=\"http:\/\/www.baden.lknoe.at\/\">Landesklinikum Baden-M\u00f6dling<\/a>.<\/figcaption><\/figure>\n<h3>Navigation<\/h3>\n<p>Gerade bei der Navigation sollte man sich auf keine Experimente einlassen. Es gibt gelernte Benutzermuster, auf die User zur\u00fcckgreifen. Diese zu durchbrechen ist sehr riskant.<\/p>\n<ul>\n<li><strong>Struktur<\/strong> \u2013 Ist die Navigation (Haupt-, Sub-, Metanavigation, etc.) klar und logisch strukturiert?<\/li>\n<li><strong>Einfachheit<\/strong> \u2013 Ist die Navigation intuitiv und einfach zu bedienen und immer an der selben Stelle? Bekommt man schnell, direkten Zugang zu den gew\u00fcnschten Inhalten?<\/li>\n<li><strong>Sichtbarkeit<\/strong> \u2013 Ist die Navigation immer sichtbar oder direkt erreichbar (z.B. bei kleineren Bildschirmaufl\u00f6sungen)?<\/li>\n<li><strong>Zugang zur Startseite<\/strong> \u2013 Ist es von \u00fcberall aus m\u00f6glich die Startseite direkt zu erreichen?<\/li>\n<li><strong>Seiteninterne Suche<\/strong> \u2013 Erhalte ich schnell und einfach Zugang zu gesuchten Inhalten?<\/li>\n<\/ul>\n<figure id=\"attachment_3547\" aria-describedby=\"caption-attachment-3547\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2013\/09\/Architekturzentrum-Wien-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-3547 img-border\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2013\/09\/Architekturzentrum-Wien-1-720x594.png\" alt=\"Die Hauptnavigation des Architekturzentrum Wien ist trotz Gliederung in Gruppen mit \u00fcber zwanzig Links sehr umfangreich. Dadurch wirkt sie in erster Linie \u00fcberfordernd, es f\u00e4llt schwer sich schnell zu orientieren.\" width=\"720\" height=\"594\" \/><\/a><figcaption id=\"caption-attachment-3547\" class=\"wp-caption-text\">Die Hauptnavigation vom <a title=\"Architekturzentrum Wien\" href=\"http:\/\/www.azw.at\">Architekturzentrum Wien<\/a> ist trotz Gruppierungen mit \u00fcber zwanzig Links sehr umfangreich. Dadurch wirkt sie in erster Linie \u00fcberfordernd, es f\u00e4llt schwer sich schnell zu orientieren.<\/figcaption><\/figure>\n<h3>Design<\/h3>\n<p>Design ist kein Bonus sondern mit Inhalt und Navigation untrennbar verwoben. Im Idealfall gibt Design dem Inhalt und der Navigation die passende Form in einer \u00e4sthetischen und thematisch ansprechenden Art und Weise.<\/p>\n<ul>\n<li><strong>Look and Feel und \u00c4sthetik<\/strong>\u00a0\u2013 Welche Atmosph\u00e4re vermittelt die Website?\u00a0Ist das Design ansprechend und thematisch passend?<\/li>\n<li><strong>\u00dcbersichtlichkeit<\/strong> \u2013 Sind die jeweiligen Seitenelemente (Navigation, Inhalt, Sildebar, Footer, etc.) gut gegliedert und klar unterscheidbar?<\/li>\n<li><strong>Typografie<\/strong> \u2013 Ist der Inhalt der Website ideal lesbar? Sind Schriftwahl, Zeilenl\u00e4nge, Zeilenabstand und\u00a0Kontrast auf einader abgestimmt?<\/li>\n<\/ul>\n<figure id=\"attachment_3544\" aria-describedby=\"caption-attachment-3544\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2013\/09\/aufkleber-drucken-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-3544 img-border\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2013\/09\/aufkleber-drucken-1-720x533.png\" alt=\"Trotz des benutzerzentrierten Ansatzes den Preiskalkulator auf die Startseite zu stellen, l\u00e4sst das \u00fcberladene, unruhige Layout die aufkleber-drucken.at kompliziert erscheinen.\" width=\"720\" height=\"533\" \/><\/a><figcaption id=\"caption-attachment-3544\" class=\"wp-caption-text\">Trotz des benutzerzentrierten Ansatzes den Preiskalkulator auf die Startseite zu stellen, l\u00e4sst das \u00fcberladene, unruhige Layout die <a title=\"Aufkleber drucken\" href=\"http:\/\/www.aufkleber-drucken.at\">aufkleber-drucken.at<\/a>\u00a0kompliziert und unprofessionell erscheinen.<\/figcaption><\/figure>\n<h3>Interaktion<\/h3>\n<p>Wie sich eine Website anf\u00fchlt und bedienen l\u00e4sst, h\u00e4ngt stark von Inhalten, Navigation und Design ab. In der Interaktion sind diese Elemente miteinander verschmolzen.<\/p>\n<ul>\n<li><strong>Bedienung und Benutzerfreundlichkeit<\/strong>\u00a0\u2013 Wie bedient sich die Website?<\/li>\n<li><strong>Weg durch die Website<\/strong>\u00a0\u2013 Kann man sich immer gut orientieren und durch die verschiedenen Ebenen der Website navigieren?<\/li>\n<li><strong>Call to Action<\/strong>\u00a0\u2013 Gibt es gen\u00fcgend Ankn\u00fcpfungspunkte von denen aus ich Aktionen setzen kann?<\/li>\n<li><strong>Contact<\/strong>\u00a0\u2013 Ist es einfach in Kontakt zu treten?<\/li>\n<li><strong>Darstellung von Links<\/strong>\u00a0\u2013 Sind Links deutlich ausgezeichnet und vom restlichen Inhalt unterscheidbar?<\/li>\n<\/ul>\n<h3>Weitere Aspekte<\/h3>\n<p>Ein paar weitere Gesichtspunkte, die ich noch f\u00fcr relevant halte sind eher unter der Haube versteckt, doch deshalb keinesfalls weniger relevant.<\/p>\n<ul>\n<li><strong>Standards<\/strong> \u2013 Ist die Website nach den g\u00e4ngigen <a title=\"W3C Standards\" href=\"http:\/\/www.w3.org\/standards\/\">W3C-Standards<\/a> programmiert?<\/li>\n<li><strong>Performance<\/strong> \u2013 Wird die Seite ausreichend schnell geladen?<\/li>\n<li><strong>Suchmaschinenoptimierung \u2013<\/strong> Ist die Website technisch und inhaltlich f\u00fcr Suchmaschinen optimiert?<\/li>\n<li><strong>Cross-Browser-Compatibility<\/strong> \u2013\u00a0Funktioniert die Internetseite auf den verschiedenen g\u00e4ngigen Browsern?<\/li>\n<li><strong>Mobile friendly<\/strong>\u00a0\u2013 Funktioniert die Website auch auf mobilen Ger\u00e4ten (Smartphone, Tablet) oder ist vielleicht sogar daf\u00fcr optimiert?<\/li>\n<li><strong>Resolution Independence<\/strong> \u2013 Funktioniert die Seite auf verschiedenen Bildschirmaufl\u00f6sungen (Responsive Webdesign)?<\/li>\n<\/ul>\n<h3>Was haltet ihr f\u00fcr wichtig?<\/h3>\n<p>Meine Aufz\u00e4hlung ist bestimmt nicht vollst\u00e4ndig. Welchen f\u00fcr euch wesentlichen Aspekt habe ich vergessen? Oder sollte man noch etwas zu den erw\u00e4hnten erg\u00e4nzen? Ich freue mich \u00fcber Kommentare!<\/p>\n<p>Mehr zum\u00a0<a title=\"Webdesign Schritt f\u00fcr Schritt \u2013 Entstehungsprozess einer Website\" href=\"https:\/\/zeichenschatz.net\/en\/blog\/web\/webdesign-schritt-fur-schritt-entstehungsprozess-einer-website.html\/\">Entstehungsprozess einer Website<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Die Analyse einer Website ist Voraussetzung und Ausgangspunkt jedes Redesigns im Entstehungsprozess einer Website. Oft gibt es bereits einen Internetauftritt und meistens gibt es damit Unzufriedenheiten. Dann bildet die aktuelle Website den Ma\u00dfstab aller Ver\u00e4nderungen, denn schlussendlich werden die neue und die alte Seite verglichen werden. Doch auch um den\u00a0Mitbewerb zu beurteilen ist es wichtig [&hellip;]<\/p>","protected":false},"author":3,"featured_media":3524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[26,79,90,181,248,393,414],"class_list":["post-3421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-analyse","tag-content","tag-design","tag-interaktion","tag-navigation","tag-usability","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/3421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/comments?post=3421"}],"version-history":[{"count":0,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/3421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media\/3524"}],"wp:attachment":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media?parent=3421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/categories?post=3421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/tags?post=3421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}