Button-Menü

Gestaltung Schema & Schrift Layout & Farbe Bedienerführung Menügestaltung

Bedienerführung

Ziel der Bedienerführung

Die Führung sollte klar und übersichtlich sein und Besucher schnell zum Ziel führen. Dazu sollten Sie auf Begriffe verzichten, die unverständlich sind oder abwertend wirken könnten. Möchten Sie lieber den Menüpunkt "Consumer" oder "Privatkunde" wählen? Was verbirgt sich hinter "Diverses"?

Achten Sie darauf, dass sehr frequentierte Seiten leicht oder sogar direkt erreichbar sind. Ein Grafikkarten-Hersteller, der seine aktuellen Treiber zum Herunterladen hinter "Services | Support | Treiber | Downloads" versteckt wird bei einem Besucher mit diesem Anliegen nicht punkten.

Es gibt allerdings Gründe, den Besucher stufenweise zu seinem Ziel zu führen, z.B. damit er sieht, was Ihre Firma sonst noch alles bietet. Konstruieren Sie Ihre Führung nur dann so, wenn der Weg zum Ziel wirklich interessant ist, und das Ziel sich trotzdem gut finden läßt.

Am Anfang war das Menü

Das Hauptmittel der Navigation durch die meisten Websites ist das Menü. Es gibt jedoch Ausnahmen zu dieser Regel, z.B. Reiseveranstalter, die viele hunderte Reisen unmöglich in Menüs unterbringen können, sie daher über eine Suchfunktion finden lassen müssen. Ferner gibt es neben dem Hauptmenü oft ein Hilfsmenü, in dem Seiten wie AGB, Impressum, Kontakt und Login stehen, damit das Hauptmenü sich ausschließlich dem Zweck der Website widmen kann. Mehr über Menüs finden Sie unter Menügestaltung.

Reiter

Im Stil von Karteikarten bieten Reiter (Tabs) die Möglichkeit, zusätzlich zur Navigation mit Menüs – wie hier – ganze Seiten der Website zu wählen. Sie können aber auch Teilbereiche einer Seite mittels Reiter "austauschen". Früher wurden hierzu in HTML "frames" benutzt, die inzwischen verpönt sind. Jetzt benutzt man (vor allem in XHTML) das Element "object", welches neben HTML-Dateien eine allgemeine Unterstützung für Multimedia-Inhalte bietet. So könnte man z.B. ein HTML-Formular mit zwei Reitern realisieren, und eine Anleitung dazu auf einem dritten Reiter als PDF- oder Flash-Präsentation. Weitere Gründe für den Einsatz von Reitern sind (a) um eine weitere Navigationsebene im Menü zu meiden, (b) eine Präsentation bzw. einen Vorgang zusammenzuhalten, oder (c) das Hin- und Herspringen innerhalb eines Vorgangs (z.B. Bestellung) zu erleichtern.

Verweise

Verweise ("Links") sind Sprünge zu anderen Webseiten, die folgende Eigenschaften haben:

  • Als Verweis (das was angeklickt wird) kann Text oder eine Grafik dienen
    (bei Text wird der Verweis farblich, teils auch durch Unterstreichung, hervorgehoben).
  • Der Sprung kann zu einer beliebigen Seite des Internets erfolgen (auch zur aktuellen Seite).
  • Insofern entsprechend gekennzeichnet, kann der Sprung zu einer bestimmten Stelle der Zielseite erfolgen – der Browser scrollt dann die Seite ggf. vor, so dass diese Stelle oben sichtbar im Fenster steht.
  • Das Sprungziel kann im gleichen oder in einem neuen Browserfenster geöffnet werden (was neuerdings oft als in einem neuen Tab umgesetzt wird).

Setzen Sie Verweise nur dort ein, wo es wirklich sinnvoll ist – nicht zu viel und nicht zu wenig. Bedenken Sie dabei, dass der aktuelle Lesefluss des Besuchers dabei unterbrochen wird. Ganz kurze Infos (z.B. zu einem Begriff) können evtl. besser in einem Tooltip untergebracht werden (das kleine Kästchen das aufgeht, wenn die Maus über das Element gebracht wird).

Tipp: In modernen Browsern erhalten Sie mit einem Rechtsklick auf einen Verweis ein Kontextmenü, aus dem Sie wählen können, ob der Verweisziel in einem neuen Tab (Registerkarte) oder in einem neuen Browserfenster geöffnet wird.

Popups und neue Browserfenster

Nicht alles, was in einem neuen Browserfenster aufgeht, ist ein Popup. Ein Popup-Fenster wird von JavaScript aus geöffnet, mit dem Vorteil, dass diverse Eigenschaften des neuen Fensters (wie Größe, Position und Bedienelemente) festgelegt werden können. Der Nachteil davon ist, dass aufgrund des "Mißbrauchs" für aufdringliche Werbung alle modernen Browser "Popup-Blocker" eingebaut haben, die standardmäßig eingeschaltet sind. Der Besucher erhält in dem Fall eine Meldung vom Browser und muss sich entscheiden, ob er Popups von dieser Website erlauben will oder nicht. Das kommt beim Besucher meist nicht gut an – weswegen Popups nur noch mit großem Bedacht eingesetzt werden sollten. Zudem haben Sie das Problem, dass der Besucher, ähnlich einem Verweis, den aktuellen Lesefluss unterbricht.

Die Alternative zu Popups sind neue Browserfenster, die optional für die Darstellung von Verweiszielen spezifiziert werden können. Das neue Fenster kann in JavaScript nachträglich auf Größe und Position gebracht werden. Dieses Verfahren hat jedoch auch seine Tücken: (1) Man hat in bereits geöffneten Fenstern keinen Zugriff per JavaScript auf die Bedienelemente (Symbolleiste, Statusleiste usw.), d.h. man kann sie nicht abschalten, um mehr Platz zu schaffen für den Inhalt; und (b) je nach Browserkonfiguration wird das "neue Fenster" in einem neuen Tab (Registerkarte) geöffnet – wenn man dann per JavaScript das Fenster z.B. klein macht, dann ist der ganze Browser des Bedieners plötzlich klein! Daher…

  • Alle Sprünge innerhalb einer Website sollten im gleichen Fenster angezeigt werden, es sei denn, es liegen ganz besondere Belange vor.
  • Sprünge zu anderen Websites sollten generell in einem neuen Browserfenster angezeigt werden, damit der Besucher Ihre Website nicht 'verliert'. Hinweis: Bei XHTML benötigt dies die Sprachvariante 'Transitional'.
  • JavaScript-Popups sollten nur unter ganz besonderen Bedingungen benutzt werden. Auf dieser Website gibt es genau eins, für das JavaScript-Schachspiel. Für Hauser exkursionen haben wir ein Popup zur Darstellung der Tourenkarten eingesetzt, da die Karten recht groß sind und die Bedienelemente eines normalen Browserfensters zu viel Platz nehmen würden.
  

Suchfelder

Google  Benutzerdefinierte Suche
Google  Suche ohne Anmeldung

Wir unterscheiden zunächst zwei Arten von Suchfeldern:

  1. Die Suche nach Worten im Text der Website(s).
  2. Die Suche nach Produkten im Angebot einer Website, z.B. Waren, Flüge, Reisen usw.
Produktsuche

Die Produktsuche basiert auf Abfragen der Datenbank, die der Website zugrunde liegt. Darüber hinaus sind die Anforderungen sehr unterschiedlich – wir beraten Sie gerne im Bedarfsfall dazu.

Wortsuche

Für die Textsuche auf Ihrer Website bieten sich generell zwei Wege:

  1. Die Website selbst enthält Software, die die Suche durchführt und die Ergebnisse präsentiert.
  2. Man verzichtet darauf, das zu tun was andere schon getan haben, und bindet die Suchergebnisse einer kommerziellen Suchmaschine, beschränkt auf die eigene Website, ein.
Externe Suchmaschine

Der Branchenprimus Google bietet die Möglichkeit einer einfachen Suche ohne Anmeldung, die man in der äußeren Gestaltung ausdrücklich an die eigene Website anpassen darf. Nachteil: Die Suche erfolgt im ganzen Internet; es sei denn… Sie stellen Ihre Website am Anfang der Suche ein, wie hier. Das funktioniert dann, solange der Bediener sie nicht entfernt. Es ist jedoch nicht weiter schwierig, sich in Google anzumelden und dort eine Benutzerdefinierte Suchmaschine anzulegen, welche von vornherein auf Ihre Website eingeschränkt ist.

Beide Methoden zeigen Werbung auf den Ergebnisseiten. Wenn Sie das nicht wollen, gibt es die Business-Version von 'Custom Search', die kostenpflichtig ist und dafür die Ergebnisse ohne Werbung anzeigt. Ferner können Sie beim 'Custom Search' unter Zuhilfenahme von einem Google Ajax-API die Ergebnisse innerhalb einer eigenen Seite anzeigen (was Ihnen Arbeit macht, nicht funktioniert wenn JavaScript ausgeschaltet ist und ggf. immer noch Werbung enthält).

Eigene Suchmaschine

Im Internet mangelt es nicht an Angeboten für Software, die eine Suche nur innerhalb der eigenen Website realisieren, wobei sehr unterschiedliche Technologien vertreten sind:

  1. Die Software läuft auf einem anderen Rechner im Internet und liesst Ihre Website (mit einem sog. "Spider") über das Internet aus. Bei dieser Variante wird generell ein Index (oder gar Abbild) Ihrer Website auf dem Fremdrechner abgelegt. Die Suchanfragen werden von Ihrer Website entgegengenommen und unsichtbar im Hintergrund an den Fremdrechner geleitet.
  2. Die Software läuft auf dem gleichen Rechner wie die Website, und untersucht die Dateien des Webauftritts direkt. Hierbei kommen unterschiedliche Lösungen zum Einsatz:
    • Die Dateien des Webauftritts werden bei jeder Anfrage durchsucht. Man spart sich dabei Komplexität und erhält immer aktuelle Antworten.
      Nur bei kleinen bis mittelgroßen Auftritten sinnvoll!
    • Die Dateien des Webauftritts werden regelmäßig indexiert, die Suche erfolgt zunächst im vorgefertigten Index.
      • Der Index wird in einer Datenbank verwaltet; oder
      • Der Index wird in eigenen Dateien verwaltet.

Von allen Varianten gibt es Gratis- wie auch kostenpflichtige Lösungen. Welche davon geeignet ist, hängt von den individuellen Umständen ab.

<title>Bedienerführung - Tipps von Tim Reeves Internet-Programmierung</title> <meta name= "description" content= "Website-Bedienerführung - Menüs, Verweise, Reiter, Popups und neue Browserfenster - Tipps von Tim Reeves Internet-Programmierung" /> <meta name= "keywords" content= "Bedienerführung, Menüs, Verweise, Reiter, Popups, Browserfenster, Produktsuche, Suchmaschine" /> <meta name= "date" content= "2007-12-29" /> <?php include("../head.inc.php"); ?> <script type= "text/javascript"> /*<![CDATA[*/ function schachAuf() { window.open('../wissen/chess/chess.htm','chess','width=400,height=580,scrollbars=no,resizable=yes'); return; } /*]]>*/ </script> <!-- Google CSE Search --> <style type= "text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <style type= "text/css"> table.spalten td.sp2 div.text form input.myField { width: 180px; } table.spalten td.sp2 div.text form input.myButton, table.spalten td.sp2 div.text form input.myButtonDown { width: 52px; } ul.sec { list-style-image: url(../images/bullet.gif); } ul.sec li { } </style> <!--[if gte IE 5]> <style type= "text/css"> input.myButton, input.myButtonDown { padding: 0px; } </style> <![endif]--> <?php include("../navi.inc.php"); ?> <div class= "content"> <table cellpadding= "0" cellspacing= "0" class= "spalten"> <tr> <td class= "sp3"> <h1>Bedienerführung</h1> <h4>Ziel der Bedienerführung</h4> <p>Die Führung sollte klar und übersichtlich sein und Besucher schnell zum Ziel führen. Dazu sollten Sie auf Begriffe verzichten, die unverständlich sind oder abwertend wirken könnten. Möchten Sie lieber den Menüpunkt "Consumer" oder "Privatkunde" wählen? Was verbirgt sich hinter "Diverses"?</p> <p>Achten Sie darauf, dass sehr frequentierte Seiten leicht oder sogar direkt erreichbar sind. Ein Grafikkarten-Hersteller, der seine aktuellen Treiber zum Herunterladen hinter "Services | Support | Treiber | Downloads" versteckt wird bei einem Besucher mit diesem Anliegen nicht punkten.</p> <p>Es gibt allerdings Gründe, den Besucher stufenweise zu seinem Ziel zu führen,