Kaffeebohnen sind eines der wichtigsten Handelsgüter der Welt. Es werden jährlich rund 10 Mio. Tonnen Rohkaffee produziert. Dementsprechend ist die Konkurrenz in der Branche groß. Eine eindrucksvolle Website, die die User Experience unter die Lupe nimmt, ist für den Erfolg in der Kaffeeindustrie unerlässlich – egal, ob Sie eine Rösterei, einen Online-Shop oder ein Café betreiben.
Wir haben die Performance, Barrierefreiheit und das Nutzererlebnis von fünf Kaffee-Websites ausgewertet, um Sie bei der Erstellung Ihres Internetauftritts zu unterstützen. Nutzen Sie anschließend den KI-Website-Builder von Zarla, um schnell und einfach eine einzigartige und leistungsstarke Website für Ihre Kaffee-Firma zu generieren.
Zarla prüft, ob die Websites die wichtigsten Standards für mobile und Desktop-Geräte erfüllen. Dazu verwenden wir u. a. Google PageSpeed Insights und WAVE, einen Dienst, der die Zugänglichkeit bewertet. Beide sind wichtige Faktoren für das Suchmaschinen-Ranking. Die Ergebnisse von PageSpeed stimmen nicht immer mit der Nutzererfahrung überein und variieren oft.
Wien, Österreich
Rauwolf ist eine österreichische Kaffeerösterei mit Online-Shop und Filialen in Wien. Es werden neben Kaffeebohnen und Zubehör auch ein Abo und Baristakurse angeboten, um eine breite Zielgruppe anzusprechen. Die gut strukturierte Website der Rösterei richtet den Fokus auf die Vorteile von Rauwolf-Kaffee und den Online-Shop.
Auszeichnungen werden auf der Homepage prominent platziert und stellen so die Qualität der verschiedenen Kaffeesorten unter Beweis. Zahlreiche Blogbeiträge enthalten nützliche Informationen rund um das Thema Kaffee, um Besuchern Mehrwert beim Browsen der Seite zu liefern.
Inhalte sind logisch strukturiert und gewährleisten durch die klare Informationsarchitektur eine gut Nutzerführung. Im Online-Shop können Besucher sich vor dem Kauf über die Herkunft, den Geschmack und das Aroma der Kaffeesorten informieren und den Mahlgrad wählen, was Kundenorientierung beweist.
Der WAVE-Test für Accessibility zeigte zahlreiche Probleme mit allen getesteten Unterseiten der Website an. Darunter fehlende Beschriftungen für Schaltflächen und fehlende Alt-Texte. Wir konnten außerdem Probleme mit farblichen Kontrasten feststellen, die die Lesbarkeit der Seite beeinträchtigen können.
Gut platzierte CTA-Buttons, dezente Mouseover-Animationen und eine fixierte Seitenleiste mit einem Rabatt-Code für den ersten Kauf geben der Desktop-Ansicht einen sowohl dynamischen als auch kundenfreundlichen Charakter, während die im Hero-Bereich dargestellten Auszeichnungen die Vertrauensbildung unterstützen. Die Fixierung der Navigationsleiste wäre aufgrund des hohen Informationsvolumens wünschenswert.
Die Leistung der Desktop-Seite ist laut Google PageSpeed Insights sehr gut. Im Performance-Test erhielt sie zwischen 81 und 100 von 100 Punkten. Im Praxistest konnten wir dieses Ergebnis bestätigen – die Website lud auf dem Desktop-PC schnell und ohne Verzögerungen.
Die Navigation ist in der mobilen Version etwas schlechter als auf dem Desktop-PC. Das mobile Layout im Zusammenspiel mit den langen Texten hat einen hohen Scroll-Aufwand zur Folge. Ein Back-to-Top-Button und die Fixierung der Menüleiste würden die Navigation verbessern, während eine größere Schriftgröße und kompaktere Texte die Lesbarkeit verbessern würden.
Im Performance-Test von Google PageSpeed Insights wurde die Startseite mit 65 von 100 Punkten bewertet. Die Barista-Kurse-Seite lud mit 80 Punkten schneller, während die Über-uns-Seite mit nur 43 Punkten am langsamsten wiedergegeben wurde. Wir konnten im Praxistest mit dem Handy keine Probleme mit der Ladezeit der getesteten Seiten feststellen.
Schüpfen, Schweiz
Die Belém Café Rösterei aus Schüpfen in der Schweiz ist ein Familienunternehmen, das Trommelröstmaschinen einsetzt, um auserwählte Kaffeebohnen aus aller Welt zu rösten. Der Qualitätsanspruch des Unternehmens wird von einer eleganten Website inklusive Online-Shop bestens in Szene gesetzt.
Ein hochwertiges Video im Hero-Bereich ist ein Blickfang und stellt gleichzeitig die Röstmeisterin Brigitte Bircher vor. Die Umweltfreundlichkeit der Firma wird von einer Rubrik und einem Abschnitt auf der Startseite hervorgehoben und unterstützt so den Vertrauensaufbau. Die Seite schafft eine schöne Balance von Text und Bild, um die User Experience zu verbessern.
WAVE zeigte im Accessibility-Test kaum Probleme mit der Barrierefreiheit der Homepage, der Kontakt-Seite und der Über-uns-Seite an. Die Kaffeemischungen werden in der Rubrik „Kaffee“ kurz vorgestellt, während die Kaffeebohnengrafik den Charakter der verschiedenen Kaffeesorten auf eine leicht verständliche Art und Weise visualisiert.
Die Barrierefreiheit des Online-Shops sollte verbessert werden. WAVE zeigte sehr viele Probleme mit fehlenden Alt-Texten für verlinkte Bilder und unbeschriftete Links an. Es fehlen in der Rubrik „Über uns“ die Profilbilder einiger Teammitglieder, was als etwas unprofessionell empfunden werden kann. Im Test mit dem Laptop und dem Handy konnten wir einige sehr lange Verzögerungen bei der Wiedergabe mancher Elemente feststellen.
Auf dem Desktop-PC wirkt die Seite durch das Hero-Video dynamisch und einladend zugleich. Das unkonventionelle Layout kreiert einen hohen Wiedererkennungswert und teilt die Startseite gut auf, was die Navigation erleichtert und die Nutzerführung verbessert. Der Inhalt des Warenkorbs wird beim Mouseover des Icons angezeigt – ein kleines Detail, das uns gut gefiel.
Trotz guter Performance-Noten im Test von Google PageSpeed Insights dauerte es sehr lange, bis Bilder in den Rubriken „Shop“ und „Kaffee“ angezeigt wurden. Die Umformatierung der Bilder in den WebP-Format würde die Ladezeit reduzieren und so das Nutzererlebnis verbessern.
Wir konnten in unserem Test der mobilen Ansicht einige Probleme feststellen. Die Rubriken „Umwelt“, „Über uns“ und „Kontakt“ wurden auf der Startseite nicht angezeigt und erschienen beim Tappen auf den Menü-Button auch nicht. Im Zusammenspiel mit einem fehlenden Click-to-Call-Button kann dieses Problem eine sehr negative Wirkung auf die User Experience haben.
Die mobile Ansicht lud trotz des Hero-Videos schnell, obwohl manche Bilder, wie auch in der Desktop-Version, nur langsam wiedergegeben wurden. Die Startseite erhielt im Performance-Test von Google PageSpeed Insights 90 von 100 Punkten, während der Online-Shop nur 53 von 100 Punkten bekam.
https://www.kaffee-partner.de/de/
Osnabrück, Deutschland
Kaffee Partner spezialisiert sich auf Kaffeevollautomaten und Wasserspender aus eigener Manufaktur und bietet Besuchern kostenlose Beratung rund um das Thema Kaffee an. Im Online-Shop werden unter anderem Kaffeebohnen, Milch, Tee und Kakao zum Verkauf geboten.
Sowohl die Homepage als auch der Online-Shop überzeugten uns im Test mit intuitiver Navigation, einer ansprechenden Dynamik und Nutzerfreundlichkeit, während die hochwertigen Bilder das Angebot schick in Szene setzen und der Seite einen persönlichen Charakter verleihen.
Sowohl die Barrierefreiheit als auch die Suchmaschinenoptimierung der Website von Kaffee Partner sind sehr gut. WAVE konnte im Accessibility-Test so gut wie keine Probleme mit der Barrierefreiheit der getesteten Seiten feststellen. Der Button mit den Telefonnummern für die unterschiedlichen Servicebereiche beweist Kundenorientierung.
Es werden auf der Website keine Preisangaben zu den Kaffeevollautomaten und Wasserspendern gemacht. Außerdem werden die Maschinen und alle Produkte im Online-Shop nur Betriebskunden zum Verkauf geboten. Der Banner, der Besucher darüber informiert, sollte prominenter am oberen Seitenrand platziert werden
Die Desktop-Ansicht der Website von Kaffee Partner wirkt durch die Slideshow in Hero-Bereich, die dezenten Mouseover-Animationen inklusive der farblichen Hervorhebung der Firmenlogos der Referenzfirmen sowie der prominenten CTA-Buttons interaktiv, dynamisch und modern.
Im Test konnten wir die Seite dank der fixierten Menüleiste am oberen Seitenrand einfach navigieren. Ähnlich gut schnitt die Website im Performance-Test von Google PageSpeed Insights ab, wo sie mit zwischen 78 und 96 von 100 Punkten gute Ergebnisse erzielte.
In der mobilen Ansicht werden die Bilder in der Slideshow nicht optimal dargestellt. Wichtige Bildelemente werden abgeschnitten, was die werbliche und persönliche Wirkung der Bilder reduziert. Positiver ist die Interaktivität und Navigation der Seite. Klare CTA-Buttons und die fixierte Navigationsleiste verbessern die Nutzerführung.
In den Bereichen Ladezeit und Leistung schneidet die Seite nicht so gut ab wie in der Desktop-Ansicht. Google PageSpeed Insights vergab im Performance-Test rund 45 von 100 Punkten, was dennoch im ausreichenden Bereich liegt. Eine Optimierung des JavaScripts würde die Wiedergabezeit der Website verbessen.
Wien, Österreich
Vettore ist ein Online-Shop für unter anderem italienischen Kaffee, Mokkakannen und Maschinenzubehör. In den Filialen in Wien können Gäste verschiedene Kaffeesorten probieren und an Kaffeekursen teilnehmen.
Angenehm zu nutzen ist der Online-Shop, in dem Informationen und Zubereitungstipps zu den Kaffeesorten veröffentlicht werden, um im Zusammenspiel mit übersichtlichen Preisen das Nutzererlebnis zu verbessern. Auffällig sind die blauen Farbakzente, die thematisch kaum zu Kaffee passen, der Seite aber einen individuellen Look verleihen.
Die Suchfunktion sowie die klar strukturierten Kategorien des Online-Shops verbessern die User Experience und ermöglichen es Nutzern, Kaffeesorten nach Herkunft, Geschmack, Zubereitungsart oder Koffeingehalt zu filtern.
WAVE zeigte im Accessibility-Test vereinzelte Probleme mit der Barrierefreiheit der Website an. Die Website wirkt durch fehlende Slideshows, Videos und Mouseover-Animationen sehr statisch. Die Vorstellungsvideos in den Beschreibungen der Kaffeesorten konnten wir in unserem Test nicht öffnen.
Auf dem Desktop-PC lädt die Seite schnell. Dieser Eindruck wurde vom Performance-Test von Google PageSpeed Insights mit einer Note von 91 von 100 Punkten für die Startseite bestätigt. Die Seite wirkt jedoch überholt und undynamisch, was positiv zur Ladezeit beiträgt, aber nicht aktuellen Website-Trends entspricht.
Die Menüleiste mit dem Anmeldungsformular, Wunschzettel und Warenkorb gewährleistet durch die Fixierung am oberen Seitenrand den schnellen Zugriff auf wichtigen Funktionen und erleichtert so die Navigation.
Die Website passt sich trotz des überholten Erscheinungsbilds gut an mobile Bildschirme an. Inhalte werden gut wiedergegeben, obwohl die Leistung mit rund 45 von 100 PageSpeed-Insights-Punkten in der Kategorie „Performance“ deutlich schlechter ist als die der Desktop-Website. Im Praxistest konnten wir jedoch keine Verzögerungen feststellen.
Die Suchfilterfunktion könnte in der mobilen Ansicht etwas kondensiert werden, um die Sortierung der Suchergebnisse auf dem kleineren Bildschirm zu erleichtern. Ein Click-to-Call- oder WhatsApp-Button wäre wünschenswert, um die Kontaktaufnahme für Handynutzer einfacher zu machen.
Dübendorf, Schweiz
Das Kaffee-Unternehmen Atinkana spezialisiert sich auf kolumbianischen Kaffee aus nachhaltigem Anbau und verfolgt neben dem Verkauf von Kaffee das Ziel der Wiederaufforstung der Sierra Nevada. Um den Nachhaltigkeitsansatz zu betonen, wird der Rohkaffee ausschließlich mit dem Segelschiff nach Europa transportiert.
Die moderne, unkonventionelle Website von Atinkana spiegelt auf elegante Art und Weise das unkonventionelle Konzept und den Kerngedanken der Umweltfreundlichkeit wider. Die hochwertigen Bilder und clever platzierten Firmenlogos von Atinkana geben der Seite einen professionellen Touch.
Die kreativen Video-Thumbnails mit beweglichem Play-Button beweisen Kreativität und setzen das innovative Geschäftsmodell gut in Szene. Das Filtern nach Zubereitungsmethode oder Röstgrad unterstützt Besucher bei der Wahl des richtigen Kaffees.
Der integrierte Instagram-Feed ist am unteren Seitenrand in der Rubrik „News & Events“ zu versteckt, um Besucher zur Interaktion zu motivieren. Im WAVE-Test für Accessibility konnten wir vereinzelte Probleme mit der Barrierefreiheit der Website feststellen.
Die Desktop-Ansicht der Atinkana-Website setzt auf hochwertige Bilder, um die unterschiedlichen Rubriken auf kreative Art und Weise zu visualisieren. Die dezenten Scroll-Animationen sorgen für einen dynamischen Touch, während die am oberen Seitenrand fixierten Social-Media- und Mailto-Buttons zur Kontaktaufnahme motivieren.
Texte sind gut auf die Bildwelten abgestimmt und werden kurz gehalten, um eine gute Balance von Text und Bild zu schaffen. Auch die Schriftgröße und -art wurden gut gewählt, um die Lesbarkeit der Inhalte zu erhöhen. Die Google-Bewertungen sind in der Rubrik „Online-Shop“ etwas versteckt und wären auf der Startseite besser aufgehoben.
Die Website passt sich im Allgemeinen gut an mobile Bildschirme an, aber die Bilder im Hero-Bereich der Startseite werden sehr klein wiedergegeben und es wird auf den Mouseover-Effekt verzichtet, was die Seite etwas statisch erscheinen lässt. Die Texte könnten gekürzt werden, um eine angenehmere optische Balance zu schaffen.
Die Leistung der mobilen Ansicht ist nicht so gut wie die der Desktop-Version. Im Performance-Test von Google PageSpeed Insights wurde die Website mit durchschnittlich 45 von 100 Punkten bewertet. Im Gegensatz dazu erzielte die Desktop-Ansicht mit rund 90 von 100 Punkten fast die Topnote.
Wir haben im obigen Artikel fünf Kaffee-Websites bewertet und zeigen Ihnen, was gut und was weniger gut umgesetzt wurde. Lassen Sie sich von diesen Website-Beispielen inspirieren und erstellen Sie eine einzigartige Website.
