{"id":13769,"date":"2024-11-05T12:38:27","date_gmt":"2024-11-05T11:38:27","guid":{"rendered":"https:\/\/effecty.nl\/?p=13769"},"modified":"2024-11-05T12:40:08","modified_gmt":"2024-11-05T11:40:08","slug":"10-ux-tipps-zur-verbesserung-deiner-website","status":"publish","type":"post","link":"https:\/\/effecty.nl\/de\/10-ux-tipps-zur-verbesserung-deiner-website\/","title":{"rendered":"10 UX-Tipps zur Verbesserung deiner Website:"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>3.<\/strong> <strong>Kein Hamburger-Men\u00fc auf dem Desktop<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es ist normalerweise nicht ratsam, ein Hamburger-Men\u00fc auf dem Desktop zu verwenden. Es verdeckt die Navigation und die Men\u00fcpunkte k\u00f6nnen nicht auf einen Blick zeigen, wof\u00fcr die Website da ist, ohne dass man erst klicken muss. Besser ist es, die Men\u00fcpunkte direkt in der Kopfzeile sichtbar zu machen. Denken Sie daran, dass es f\u00fcr Ihre Website wichtig sein kann, so ruhig wie m\u00f6glich zu sein. Wenn die Verwendung eines Hamburger-Men\u00fcs Ihre Website sch\u00f6ner aussehen l\u00e4sst und Sie bereit sind, bei der Benutzerfreundlichkeit Kompromisse einzugehen, kann ein Hamburger-Men\u00fc in Betracht gezogen werden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"887\" height=\"140\" src=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image.png\" alt=\"\" class=\"wp-image-8902\" srcset=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image.png 887w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-300x47.png 300w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-768x121.png 768w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Unsere Desktop-Website verwendet kein Hamburger-Men\u00fc und alle Men\u00fcpunkte sind daher direkt sichtbar.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4.<\/strong> <strong>Anzahl der Ergebnisse beim Filtern<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beim Filtern von Produkten zum Beispiel wird oft eine Schaltfl\u00e4che angezeigt, um die gesetzten Filter tats\u00e4chlich anzuwenden. F\u00fcr die Nutzer ist es hilfreich, wenn die Anzahl der Ergebnisse, die nach dem Anklicken der Schaltfl\u00e4che erscheint, im Text der Schaltfl\u00e4che mitgeteilt wird. Auf diese Weise wissen die Nutzer bereits, was sie erwartet. M\u00f6glicherweise m\u00f6chten sie als Reaktion auf die Anzahl der Ergebnisse sogar noch mehr filtern, bevor sie mit der Anzeige beginnen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"327\" height=\"406\" src=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-1.png\" alt=\"\" class=\"wp-image-8903\" srcset=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-1.png 327w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-1-242x300.png 242w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Auf der mobilen Website <\/em><a href=\"https:\/\/www.zalando.nl\/heren-home\/\" target=\"_blank\" rel=\"noopener\"><em>von Zalando<\/em><\/a><em> zeigt die Schaltfl\u00e4che zum Anwenden der Filter die Anzahl der Ergebnisse an.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5.<\/strong> <strong>Gro\u00dfes Men\u00fc \u00f6ffnet sich nicht beim Hovern<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Manchmal braucht eine Website ein gro\u00dfes, umfangreiches Men\u00fc. Ein solches Men\u00fc nimmt viel Platz auf dem Bildschirm ein. Daher ist es wichtig, es nur dann zu \u00f6ffnen, wenn Sie sicher sind, dass der Benutzer es w\u00fcnscht. Daher ist es in der Regel besser, ein gro\u00dfes Men\u00fc nicht beim Hover zu \u00f6ffnen, sondern nur, wenn man auf den \u00fcbergeordneten Men\u00fcpunkt klickt. Auf diese Weise ist es weniger wahrscheinlich, dass das Men\u00fc versehentlich ge\u00f6ffnet wird und im Weg ist. Beachten Sie, dass der \u00fcbergreifende Men\u00fcpunkt dann keinen Link enthalten darf. Wenn ein solcher Link ben\u00f6tigt wird, muss er auch in das ausgeklappte Men\u00fc eingef\u00fcgt werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>6.<\/strong> <strong>Klebe\u00fcberschriften f\u00fcr Vergleichstabellen<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vergleichstabellen enthalten manchmal sehr viele Zeilen. Es ist dann l\u00e4stig, immer nach oben scrollen zu m\u00fcssen, um die Spalten\u00fcberschriften zu sehen. Eine geeignete L\u00f6sung daf\u00fcr ist, diese \u00dcberschriften <em>klebrig<\/em> zu machen. Auf diese Weise sind sie immer im Blick und Sie k\u00f6nnen leichter zwischen verschiedenen Abonnements, Diensten oder Produkten vergleichen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"278\" src=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-2-1024x278.png\" alt=\"\" class=\"wp-image-8904\" srcset=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-2-1024x278.png 1024w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-2-300x81.png 300w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-2-768x209.png 768w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-2.png 1278w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Auf der Tarifseite <\/em><a href=\"https:\/\/monday.com\/lang\/nl\/pricing\" target=\"_blank\" rel=\"noopener\"><em>von Montag<\/em><\/a><em> sind die Abonnements dank der klebenden \u00dcberschriften neben der Tabelle leicht zu vergleichen.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>7.<\/strong> <strong>Lieber kein <\/strong><em><strong>unendliches Scrollen<\/strong><\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es gibt mehrere M\u00f6glichkeiten, um viele verschiedene Produkte in einer \u00dcbersicht darzustellen. Am h\u00e4ufigsten wird die Paginierung verwendet. Hier werden die Produkte auf Seite 1, Seite 2, Seite 3, usw. verteilt. Eine andere M\u00f6glichkeit besteht darin, alle Produkte auf einer Seite zu platzieren und unter jede Reihe von Produkten eine Schaltfl\u00e4che \u201eMehr laden\u201c zu setzen, die es erm\u00f6glicht, jedes Mal neue Produktreihen zu laden. So werden nicht alle Produkte sofort geladen, denn dann w\u00fcrde die Seite sofort sehr lang werden. <em>Unendliches Scrollen <\/em>ist die dritte M\u00f6glichkeit. Auch hier befinden sich alle Produkte auf der gleichen Seite, aber die Produkte werden bei jedem Scrollen automatisch geladen. Dies hat den Nachteil, dass der Benutzer weniger Kontrolle \u00fcber die Anzahl der Produkte auf der Seite hat, dass es schwierig ist, den \u00dcberblick zu behalten, welche Produkte bereits angesehen wurden, und dass die Fu\u00dfzeile nicht erreicht werden kann. Aus diesen Gr\u00fcnden wird die Verwendung des <em>unendlichen Scrollens<\/em> in den meisten F\u00e4llen nicht empfohlen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>8.<\/strong> <strong>Breadcrumb-Men\u00fc anzeigen<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine Website drei oder mehr Ebenen hat, wie tief die Seiten strukturiert sind, kann diese Struktur f\u00fcr die Nutzer schwer zu verstehen sein. Hier hilft ein \u00fcbersichtliches Men\u00fc, das immer leicht zu erreichen ist. Dar\u00fcber hinaus ist es ratsam, ein Breadcrumb-Men\u00fc zu implementieren. Dies ist die \u201ezus\u00e4tzliche\u201c <a href=\"https:\/\/effecty.nl\/knowledge-base\/cro-ux\/trunk-test\/\">Navigation<\/a>, die sich vorzugsweise oben links befindet. Es sollte zeigen, welche \u00fcbergeordneten Seiten es gibt. Auf diese Weise k\u00f6nnen die Benutzer eine Vorstellung davon bekommen, wie tief sie sich auf der Website befinden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"37\" src=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-3.png\" alt=\"\" class=\"wp-image-8905\" srcset=\"https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-3.png 795w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-3-300x14.png 300w, https:\/\/effecty.nl\/wp-content\/uploads\/2022\/10\/image-3-768x36.png 768w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Das Breadcrumb-Men\u00fc auf der Website <\/em><a href=\"https:\/\/www.coolblue.nl\/\" target=\"_blank\" rel=\"noopener\"><em>von Coolblue<\/em><\/a><em> macht die Struktur der Website leichter verst\u00e4ndlich.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>9.<\/strong> <strong>Bildvorschauen in <\/strong><em><strong>Karussells<\/strong><\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Karussells<\/em> sind eine beliebte L\u00f6sung, um viele Bilder auf einer Seite unterzubringen. Hier wird ein Teil einer Bildergalerie direkt angezeigt und andere Bilder k\u00f6nnen z. B. durch Anklicken eines Pfeils nach links oder rechts navigiert werden. Es ist gut f\u00fcr die Bindung an die Website, wenn mehr als ein Bild betrachtet wird. Dies ist jedoch keineswegs immer der Fall. Die Wahrscheinlichkeit, dass mehr Bilder angesehen werden, ist geringer, wenn au\u00dfer dem \u201eFeatured\u201c-Bild keine kleinen oder verk\u00fcrzten Vorschauen der Bilder direkt sichtbar sind. Es ist wahrscheinlicher, dass \u00fcbersehen wird, dass es mehr Bilder gibt. Sorgen Sie daher daf\u00fcr, dass andere Bilder immer sichtbar sind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>10.<\/strong> <strong>Keine automatischen <\/strong><em><strong>Karussells<\/strong><\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Auch bei der Verwendung von <em>Karussells<\/em> ist es ratsam, die Bilder nicht automatisch wechseln zu lassen. Der Grund daf\u00fcr ist, dass ein automatisches <em>Karussell<\/em> den Nutzern eine Menge Kontrolle entzieht. Au\u00dferdem wird durch die Bewegung viel Aufmerksamkeit erregt. Diese Aufmerksamkeit ist oft besser auf ein St\u00fcck Text oder eine <a href=\"https:\/\/effecty.nl\/knowledge-base\/cro-ux\/5-tips-voor-de-perfecte-call-to-action-button\/\">wichtige Schaltfl\u00e4che<\/a> gerichtet. Aus diesem Grund sollten Sie nur manuelle <em>Karussells<\/em> verwenden. Werden Sie sich trotzdem f\u00fcr ein automatisches <em>Karussell<\/em> entscheiden? Dann stoppen Sie den automatischen Wechsel des Bildes, sobald Sie mit dem <em>Karussell<\/em> interagiert haben.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"253\" src=\"https:\/\/effecty.nl\/wp-content\/uploads\/2024\/06\/image-4-1-768x253.webp\" alt=\"\" class=\"wp-image-12023\" srcset=\"https:\/\/effecty.nl\/wp-content\/uploads\/2024\/06\/image-4-1-768x253.webp 768w, https:\/\/effecty.nl\/wp-content\/uploads\/2024\/06\/image-4-1-300x99.webp 300w, https:\/\/effecty.nl\/wp-content\/uploads\/2024\/06\/image-4-1-150x49.webp 150w, https:\/\/effecty.nl\/wp-content\/uploads\/2024\/06\/image-4-1-1536x507.webp 1536w, https:\/\/effecty.nl\/wp-content\/uploads\/2024\/06\/image-4-1.webp 1758w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Das Bewertungskarussell auf der Website von <\/em><a href=\"https:\/\/www.hofvanzeeland.nl\/\" target=\"_blank\" rel=\"noopener\"><em>Hof van Zeeland<\/em><\/a><em> schaltet die Bewertungen nicht automatisch um, um unn\u00f6tige Ablenkungen zu vermeiden.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kontaktieren Sie uns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00f6chten Sie weitere Tipps zum Thema UX? Dann nehmen Sie Kontakt mit uns auf! Je besser die UX auf Ihrer Website ist, desto zufriedener werden Ihre Kunden mit Ihrer Website sein und desto mehr Umsatz werden Sie damit machen.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/effecty.nl\/de\/uber-effecty\/kontakt\/\">Schicken Sie uns eine E-Mail<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>3. Kein Hamburger-Men\u00fc auf dem Desktop Es ist normalerweise nicht ratsam, ein Hamburger-Men\u00fc auf dem Desktop zu verwenden. Es verdeckt &hellip;<\/p>\n","protected":false},"author":3,"featured_media":8909,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-13769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledge-base"],"acf":[],"_links":{"self":[{"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/posts\/13769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/comments?post=13769"}],"version-history":[{"count":1,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/posts\/13769\/revisions"}],"predecessor-version":[{"id":13770,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/posts\/13769\/revisions\/13770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/media\/8909"}],"wp:attachment":[{"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/media?parent=13769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/categories?post=13769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/effecty.nl\/de\/wp-json\/wp\/v2\/tags?post=13769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}