35 Beispiele zur Header-Gestaltung bei Online-Shops
![](https://www.usabilityblog.de/wp-content/uploads/2009/08/Beitragsbild_Johanna-Moeller_3_UsabilityBlog_unsplash-300x200.jpg)
Einen Header – oder auch Kopfbereich – weist jede Website im Internet auf. In diesem werden meist zentrale Einstiege und Funktionen angeboten, damit diese für den Nutzer von jeder Unterseite aus erreichbar sind.
Häufig vorkommende Elemente
|
|
Viele der genannten Elemente werden heutzutage von Nutzern im Header erwartet. Sind diese dort nicht zu finden, löst dies Irritationen und vielleicht auch Frustration beim Nutzer aus.
35 Beispiele von deutschen und internationalen Online-Shops
![3suisses.de - Elemente: Logo, Navigation, Suchfunktion, Warenkrob, Direktbestellung, Login/Logout, persönlicher Bereich, Registierung, Sprachauswahl. Header bei 3suisses.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-3suisses.de_-550x80.png)
3suisses.de - Header-Elemente: Logo, Navigation, Suchfunktion, Warenkrob, Direktbestellung, Login/Logout, persönlicher Bereich, Registierung, Sprachauswahl.
![amazon.de - Header-Elemente: Logo, Navigation, Suchfunktion, Warenkorb, Login/Logout, persönlicher Bereich, Registrierung, Angebotseinstiege, Wunschzettel. Header bei amazon.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-amazon.de_-550x75.png)
amazon.de - Header-Elemente: Logo, Navigation, Suchfunktion, Warenkorb, Login/Logout, persönlicher Bereich, Registrierung, Angebotseinstiege, Wunschzettel.
![baby-walz.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Beratung, Filialfinder, Login/Logout, Direktbestellung und weitere Meta-Navigation. Header bei baby-walz.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-baby-walz.de_-550x105.png)
baby-walz.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Beratung, Filialfinder, Login/Logout, Direktbestellung und weitere Meta-Navigation.
![barnesandnoble.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, persönlicher Bereich, Filialfinder und weitere Meta-Navigation. Header bei barnesandnoble.com](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-barnesandnoble.com_-550x114.png)
barnesandnoble.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, persönlicher Bereich, Filialfinder und weitere Meta-Navigation.
![baur.de - Header-Elemente: Logo, Navigation, Suchfunktion, Warenkorb, Login/Logout, Registrierung, persönlicher Bereich, Direktbestellung, Servie & Hilfe, Merkzettel, Angebotsteaser. Header bei baur.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-baur.de_-550x100.png)
baur.de - Header-Elemente: Logo, Navigation, Suchfunktion, Warenkorb, Login/Logout, Registrierung, persönlicher Bereich, Direktbestellung, Servie & Hilfe, Merkzettel, Angebotsteaser.
![bestbuy.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Registrierung, persönlicher Bereich, Service, Sprachauswahl, Filialfinder und diverse weitere Angebots-/Informationseinstiege. Header bei bestbuy.com](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-bestbuy.com_-550x75.png)
bestbuy.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Registrierung, persönlicher Bereich, Service, Sprachauswahl, Filialfinder und diverse weitere Angebots-/Informationseinstiege.
![bonprix.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Filialfinder, Direktbestellung, Wunschzettel, persönlicher Bereich, Service. Header bei bonprix.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-bonprix.de_-550x69.png)
bonprix.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Filialfinder, Direktbestellung, Wunschzettel, persönlicher Bereich, Service.
![cunda.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Sprachauswahl, Service, Merkzettel, Newsletter und Verweise auf andere Unternehmesbereiche. Header bei cunda.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-cunda.de_-550x74.png)
cunda.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Sprachauswahl, Service, Merkzettel, Newsletter und Verweise auf andere Unternehmesbereiche.
![docmorris.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Hilfe, Service, Schriftgrößenauswahl und weitere Meta-Einstiege. Header bei docmorris.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-docmorris.de_-550x66.png)
docmorris.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Hilfe, Service, Schriftgrößenauswahl und weitere Meta-Einstiege.
![galeria-kaufhof.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, persönlicher Bereich, Merkzettel, Filialfinder, weitere Meta-Elemente sowie Verweis auf Prospekte, Blog und Payback. Header bei galeria-kaufhof.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-galeria-kaufhof.de_-550x97.png)
galeria-kaufhof.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, persönlicher Bereich, Merkzettel, Filialfinder, weitere Meta-Elemente sowie Verweis auf Prospekte, Blog und Payback.
![globetrotter.de - Header-Elemente: Logo, Suchfunktion, übergeordnete Gesamt-Navigation, Warenkorb, Direktbestellung, Filialen, Meta-Navigation. Header bei globetrotter.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-globetrotter.de_-550x72.png)
globetrotter.de - Header-Elemente: Logo, Suchfunktion, übergeordnete Gesamt-Navigation, Warenkorb, Direktbestellung, Filialen, Meta-Navigation.
![hagebau.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, Login/Logout, Registrierung, Filialfinder, persönlicher Bereich, Service, Beratung sowie weitere Aktions-/Informationseinstiege. Header bei hagebau.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-hagebau.de_-550x128.png)
hagebau.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, Login/Logout, Registrierung, Filialfinder, persönlicher Bereich, Service, Beratung sowie weitere Aktions-/Informationseinstiege.
![heine.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, persönlicher Bereich, Beratung, Login/Logout. Header bei heine.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-heine.de_-550x88.png)
heine.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, persönlicher Bereich, Beratung, Login/Logout.
![ikea.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, persönlicher Bereich, Bereatung, Filialfinder und weitere ikea-eigene Einsteige. Header bei ikea.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-ikea.de_-550x65.png)
ikea.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, persönlicher Bereich, Bereatung, Filialfinder und weitere ikea-eigene Einsteige.
![karstadt.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Filialfinder, Login/Logout, Merkzettel, Service und Kundenkarte. Header bei karstadt.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-karstadt.de_-550x71.png)
karstadt.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Filialfinder, Login/Logout, Merkzettel, Service und Kundenkarte.
![mirapodo.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Registrierung, persönlicher Bereich, Service, Vorteile, Newsletter und Blog. Header bei mirapodo.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-mirapodo.de_-550x102.png)
mirapodo.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Registrierung, persönlicher Bereich, Service, Vorteile, Newsletter und Blog.
![misterspexx.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Hilfe, Sprachauswahl, Newsletter, Vorteile und Telefonhotline sowie Social Media. Header bei misterspexx.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-misterspexx.de_-550x121.png)
misterspexx.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Hilfe, Sprachauswahl, Newsletter, Vorteile und Telefonhotline sowie Social Media.
![mydays.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Registrierung, Newsletter, Hilfe und Trust-Element. Header bei mydays.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-mydays.de_-550x104.png)
mydays.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, Registrierung, Newsletter, Hilfe und Trust-Element.
![newegg.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, MarkenShop, Geschäftskunden, Login/Logout, Registrierung, Wunschzettel, Hilfe und Social Media. Header bei newegg.com](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-newegg.com_-550x85.png)
newegg.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, MarkenShop, Geschäftskunden, Login/Logout, Registrierung, Wunschzettel, Hilfe und Social Media.
![otto.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, Login/Logout, Registrierung, Service, Hilfe und Sitemap. Header bei otto.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-otto.de_-550x101.png)
otto.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, Login/Logout, Registrierung, Service, Hilfe und Sitemap.
![otto-office.de - Header-Elemente: Logo, Suchfunktionen, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Direktbestellung, Service, Stichwortliste als Navigation. Header bei otto-office.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-otto-office.de_-550x94.png)
otto-office.de - Header-Elemente: Logo, Suchfunktionen, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Direktbestellung, Service, Stichwortliste als Navigation.
![peterhahn.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Direktbestellung, Merkzettel, Login/Logout, Hilfe, Veranstaltungen, Filialfinder, Service, Katalog und Über uns. Header bei peterhahn.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-peterhahn.de_-550x103.png)
peterhahn.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Direktbestellung, Merkzettel, Login/Logout, Hilfe, Veranstaltungen, Filialfinder, Service, Katalog und Über uns.
![planet-sports.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Vorteile, Trust-Elemente, Service, Sprachauswahl, Filialfinder, Social Media und Verweise auf weitere eigenen Auftritte. Header bei planet-sports.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-planet-sports.de_-550x111.png)
planet-sports.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Vorteile, Trust-Elemente, Service, Sprachauswahl, Filialfinder, Social Media und Verweise auf weitere eigenen Auftritte.
![play.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Registrierung, Hilfe. Header bei play.com](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-play.com_-550x86.png)
play.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Registrierung, Hilfe.
![plus.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Merkzettel und Trustelemente. Header bei plus.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-plus.de_-550x109.png)
plus.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Merkzettel und Trustelemente.
![real-onlineshop.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Filialfinder, Angebotsteaser, Merkzettel, persönlicher Bereich, Hilfe, Registrierung, Trust-Elemente. Header bei real-onlineshop.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-real-onlineshop.de_-550x121.png)
real-onlineshop.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Filialfinder, Angebotsteaser, Merkzettel, persönlicher Bereich, Hilfe, Registrierung, Trust-Elemente.
![redcoon.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Registrierung, Kontakt, Merkzettel sowie weitere Navigationselemente zu anderen speziellen Seitenbereichen. Header bei redcoon.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-redcoon.de_-550x123.png)
redcoon.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Registrierung, Kontakt, Merkzettel sowie weitere Navigationselemente zu anderen speziellen Seitenbereichen.
![rossmannversand.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Service & Hilfe, Meta-Elemente, diverse Angebotsteaser und Einstiege zu speziellen Seitenbereichen. Header bei rossmannversand.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-rossmannversand.de_-550x79.png)
rossmannversand.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Service & Hilfe, Meta-Elemente, diverse Angebotsteaser und Einstiege zu speziellen Seitenbereichen.
![sportscheck.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, persönlicher Bereich, Vergleichsfunktion, Hilfe, Sprachauswahl und Angebotsteaser. Header bei sportscheck.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-sportscheck.de_-550x99.png)
sportscheck.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, persönlicher Bereich, Vergleichsfunktion, Hilfe, Sprachauswahl und Angebotsteaser.
![staples.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Hilfe-Funktionen, Filialfinder, Aktionsteaser, Login-Logout und Spezialeinstiege. Header bei staples.com](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-staples.com_-550x99.png)
staples.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Hilfe-Funktionen, Filialfinder, Aktionsteaser, Login-Logout und Spezialeinstiege.
![tchibo.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Service, Kontakt, Newsletter und PrivatCard. Header bei tchibo.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-tchibo.de_-550x108.png)
tchibo.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, persönlicher Bereich, Login/Logout, Service, Kontakt, Newsletter und PrivatCard.
![thalia.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, Filialfinder, Hilfe, persönlicher Bereich, Login/Logout. Header bei thalia.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-thalia.de_-550x77.png)
thalia.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Merkzettel, Filialfinder, Hilfe, persönlicher Bereich, Login/Logout.
![weltbild.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, persönlicher Bereich, Hilfe & Service, Kontakt, Vorteile und Aktionsteaser. Header bei weltbild.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-weltbild.de_-550x113.png)
weltbild.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Login/Logout, persönlicher Bereich, Hilfe & Service, Kontakt, Vorteile und Aktionsteaser.
![zalando.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Trust-Elemente, Vorteile, persönlicher Bereich, Wunschzettel, Hilfe, Gutscheine, Newsletter, Jobs, Login/Logout. Header bei zalando.de](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-zalando.de_-550x77.png)
zalando.de - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Trust-Elemente, Vorteile, persönlicher Bereich, Wunschzettel, Hilfe, Gutscheine, Newsletter, Jobs, Login/Logout.
![zappos.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Vorteile, Aktionsteaser, Marken-Verzeichnis, Login/Logout, persönlicher Bereich, Merkzettel, Hilfe, Hotline, Registrieren und Verweis auf vorhandene Blogs. Header bei zappos.com](https://www.usabilityblog.de/wp-content/uploads/2012/08/header-zappos.com_-550x128.png)
zappos.com - Header-Elemente: Logo, Suchfunktion, Navigation, Warenkorb, Vorteile, Aktionsteaser, Marken-Verzeichnis, Login/Logout, persönlicher Bereich, Merkzettel, Hilfe, Hotline, Registrieren und Verweis auf vorhandene Blogs.
Haben Sie Interesse an weiteren Good practices? Auch zu anderen Themen und Anwendungen? Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.
Pingback: Handelskraft – Das E-Commerce und Social-Commerce-Blog - Amazon vs. eBay: Die Lieferung am selben Tag kommt [5 Lesetipps]