Web-Navigation Menü-Strukturen


responsives-webdisign-beispiele Bei fexiblen und vielseitig einsetzbaren Menü-Strukturen möchte die Fähigkeiten der Browser, die Eigenschaften ihrer Internetverbindung, die unterschiedliche Ergonomie und Geräteabhängigkeiten berücksichtigen. Ziel ist ein multi-device-kompatibeles, responsives Webdesign.

   Ein responsives Webdesign verwendet
   adaptive Darstellungs- und Steuerelemente.

Mit dem Responsiven Webdesign ( de.wikipedia ), de.wikipedia , Unobtrusive JavaScript unaufdringliches JavaScript = barrierefreies JavaScript, Barrierefreies Internet , Progressive Enhancement Progressive Verbesserung ) wird versucht, eine automatische Anpassung der Darstellung von Webseiten an das jeweils benutzte Endgerät zu erreichen.
Mit ( ab ) CSS3 können Gestaltungsvorlagen geräte-spezifische Medientypen ( siehe z.B. wikipedia Media Queries nutzen und Breite/Höhe des Gerätes/Browserfensters, die Orientierung bei Quer-/Hochformat und die grafische Auflösung, die Bildschirmuflösung und weitere gerätespezifische Merkmale berücksichtigen können.


Orientierung und Navigation Sicht- und Handlungsweisen

Große Informationssysteme sind als Ganzes oft unüberschaubar. Im Hyperspace kann ein Surfer leicht das Ziel verpassen ( Lost in Hyperspace ). Die Navigation eines Schiffes entspricht einer Zielsuche. Ähnlich ist es im "Bit-Meer der Informatik". Die "Faszination des Machbaren" weist auf zahlreich "Klippen" hin, wie z.B. Software-Entwicklungssyteme, Cursware, Autoren-Systeme, Content-Management-Systeme, intelligente tutorielle Systeme, elektronische Bücher, eBooks, elektronische Lehrsysteme, CIM und Simulationen, Information-Retrievel, multimediale Lernprogramme, Storyboard-Perspektiven, Guided Tours, Hypertext-Systeme, Deep-Map-Systeme, Web-Menüs, steuerbare Funktionalitäten und Aktivitäten usw. Navigationssysteme dienen der Zielfindung. Umfangreiche Navigationssysteme können vielschichtig und komplexen sein und wechselseitige Abhängigkeiten zwischen dem aktuellen Kontext und den Navigationsmöglichkeiten auweisen. Es gibt Visualisierungen mit UML-Diagrammen.

In großen Informationssystemen kann die Orientierung des Benutzers "fragmentarisieren" und das Informationssystemen wie ein "pfadloses Land" erscheinen lassen, siehe z.B.: de.wikipedia: Lost in Hyperspace Menschen können sich etwa so orientieren:

Die strukturierenden Prinzipien thematisch gegliederte Navigationshilfen, von Menüs und Web-Design möchten dazu beitragen, individuell-gewünschte, sinnvolle Sichten und Informationsdarstellungen in die "unermeßlich vielen Informationsfraktale" ( Informationsüberflutung ) zu ermöglichen.

Darstellungsformen und Design-Strukturen Navigationselemente

Navigationselemente können unterschiedlich angeordnet werden. Weniger Navigationsebenen ergeben einen besseren Überblick.

Regeln zum Dialogdesign Ben Shneiderman

Bereits 1992 formulierte Ben Shneiderman acht allgemeine Regeln für die Gestaltung interaktiver Systeme ( "Shneiderman's goldene Regeln des Dialogdesigns" )

  1. Streben nach Konsistenz:
    konsistente Begriffe verwenden, wie Prompts, Menüs und Kontexthilfe, ähnliche Ausgangssituationen sollten ähnliche Aktionen bedingen
  2. Kurzbefehle für Vielnutzer:
    Abkürzungen, spezielle Tasten, Hotkeys, Befehlsmakros
  3. Informative Aktionsanzeige:
    Eine Aktion sollte eine sichtbare Reaktion bewirken und Änderungen verdeutlichen.
  4. Design-Dialoge sollten abgeschlossen werden:
    Aktionsfolgen gruppieren (Beginn, Mitte, Ende) erleichtert das "Wo bin ich jetzt"
  5. Fehlervermeidung:
    Es sollte nicht möglich sein, schwerwiegende Fehlbedienungen zu begehen. Ggf. Fehlerbehandlung anbieten.
  6. Umkehrung von Aktionsumkehrung:
    Aktionen sollten zurück gesetzt werden können.
  7. Intuitive Erfassung der Aktionen:
    Häufige Dialognutzung soll zu keinen Irritationen führen und das "intuitive Ablauf-Erfühlen" stärken.
  8. Bedien-Vereinfachungen:
    Hilfen für weitere Abkürzungen von Aktionssequenzen
Menü und Benutzeroberfläche GUI

Die visuellen Wahrnehmungsmöglichkeiten von Menschen führen zu "Graphical User Interfaces" ( siehe de.wikipedia: Grafische Benutzeroberfläche ( GUI ).

Bei Web-Seiten ( einer Homepage ) werden die Methoden der Navigation mit Hyperlinks realisiert. Ein Menü sollte einfach, effektiv, effizient sein und unterschiedliche Sichten auf die Informationen, wie z.B. fachlich-gruppiert, Site map, Einführendes, spezielle Suche und Zusammenstellungen erlauben, Auswahl zusammenstellen, Darstellungen ändern, ästetische Stile, Geräteanpassungen, usw. , wobei das menschliche Verhalten, das psychologische Situationsbewusstsein berücksichtigen ( Blinde, Sehende, ARIA ) und ein "User-Centered Design" angestrebt wird. Web-Entwicklungen müssen das "Corporate Design", die Benutzerfreundlichkeit ( Usability ) und ein barrierefreie Webdesign ( Accessibility ) beachten.

Natürlich sind bei Responsiven Webdesign ( Websiten-Layout ) und ARIA ( Accessible Rich Internet Applications, WAI - Richtlinien, semantische HTML - Erweiterung ) und WCAG ( Web Content Accessibility Guidelines ) die funktionalen Anforderungen vorrangig vor der Ästetik, "Art and Design". Zur elektronischen Steuerung von Geräten und technischen Systemen ( z.B. Auto ) gibt es u.a. direkte Manipulationen, Kommando-Systeme mit Benutzerbedienung, Menü-Systeme, Dialog- und Masken-Systeme, Hypermedia, usw. Ein Menü dient der interaktiven Benutzerführung bei Applikationen ( Computerprogramme ). und ist ein Teil der grafischen Benutzeroberfläche (GUI, TUI bzw. VUI).

Das Layout einer Seite ist das sichtbare Ergebnis des Rendern, d.h. der Umwandlung von strukturierten Informationen ( Bilder, SVG, XHTML, usw ) in die nativ-Pixel des Bildschirm-Speichers.

Grafischen Benutzeroberfläche beinhalten u.a. geführte Systeme ( Wizards ), interaktive Dialoge ( Modal-Dialoge und Modeless-Dialoge ) und Menüs ( zeichenorientiert, sprachorientiert, Block-Grid, Zustandsanzeige, usw. ). Menüleisten sind ein gebräuchlicher User-Zugang ( Bedienung ), siehe z.B. de.wikipedia: Common User Access .

Ein Menü kann hirachisch aufgebaut sein ( z.B. Dateimenü ), aber auch linear oder als Grid. Ein Menü-Item kann Informationen anzeigen ( Hilfeseiten, Versionsinformation ). Ein Menü-Item kann Programmausführungen starten ( Eventsteuerung ). Ein Menü kann abhängig vom Kontext sein ( Kontextmenü ), das nur die aktuell sinnvollen Menü-Punkte anzeigt. Optisch kann ein Nenü wie eine Menü-Leiste aussehen oder z.B. auch wie ein Aufklapp-Menü, Dropout-Menü, Dropdown-Menü, Pulldown-Menü, Popup-Menü, Top-Sidebar, Bottom-Sidebar, Left-Hand-Sidebar. Es gibt Mini- und Maxi-Navigationssysteme, die für sehbehinderte Menschen geeignet/ungeeignet sein können.

Geräteabhängigkeiten Responsives Webdesign, Media Queries

Mit Hilfe des Responsive Webdesign ( de.wikipedia de.wikipedia ) wird versucht, eine automatische Anpassung der Darstellung von Webseiten an das jeweils benutzte Endgerät zu erreichen. Dies meint "alle" Ausgabegeräte und nicht nur ein Design für mobile Websites.

Bei CSS3 - Gestaltungsvorlagen gibt es eigenschaftsspezifische Medientypen, die gerätespezifische Merkmale, wie z.B. Breite/Höhe des Gerätes/Browserfensters, die Orientierung bei Quer-/Hochformat und die grafische Auflösung, Bildschirmuflösung berücksichtigen können ( Siehe z.B. de.wikipedia Media Queries ).

Web-Präsentationen sollen i.a. unabhängig von Geräten und speziellen Herstellern sein. Verschiedene Screen-Stylesheets hängen u.a. von der aktuellen Fenstergröße ( window size ) des Browsers und der verfügbaren Geräteauflösung ab. Firmenspezifische (proprietäre) Präsentationen und Software-Anpassungen können auf ein spezielles Gerät zugeschnitten sein. Dies kann Vor- und Nachteile haben. Es gibt neue firmenspezifisch Entwicklungen und die neuesten Produkte nur von einem Hersteller. Anderseits besteht die Kunden-Freiheit in der Wahlmöglichkeit des Herstellers.

Ein Web-Präsentation kann versuchen, gerätespezifische Sonderheiten zu nutzen. Es kann spezielle Gründe geben, die es wünschenswert erscheinen lassen, das Design und die Styles möglichst optimal an das Gerät anzupassen ( building smartphone-optimized websites ). Hierzu werden Geräte-Daten, wie max-device-width oder maximum-scale gebraucht. Die Style-Anpassung kann für ein spezielles Gerät optimiert werden. Siehe z.B. de.wikipedia: Responsive Design , en.wikipedia: Cascading Style Sheets ( Selectoren ) , de.wikipedia: Cascading Style Sheets ( Selectoren ) , und w3.org: CSS3 ( u.a. 4.1 Property Index und 4.2 Selector Index ), CSS21 Media types ( all, braille, embossed, handheld, print, projection, screen, speech, tty, tv ), CSS3-Mediaqueries , .

Beispiele:

Bildschirm-Style innerhalb eines CSS-Dokumentes:
@media screen {
  h1 { background: #229; }
}

Includiere Style für Bildschirm-Ansicht:
<link rel="stylesheet" type="text/css" href="my_style.css" media="screen"/>

Includiere Style für die Druckausgabe:
<link rel="stylesheet" type="text/css" href="my_print.css" media="print"/>

Drucker-Style innerhalb eines CSS-Dokumentes einbinden:
@media print {  
  h1 { background: #229; } 
  ...
}

Smartphones und Tablet-PC:
<link type="text/css" rel="stylesheet" media="screen" href="my_smart_style.css" />
<link type="text/css" rel="stylesheet"
      media="only screen and (max-device-width: 480px)" href="my_iphone.css" />

Zoom deaktivieren und Skalierung festlegen:
<meta name="viewport"
      content="width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;" />

iPhone / iPod Touch
@media only screen and (max-device-width: 480px) { ... }

iPhone mit Retina Display:
@media only screen and (max-device-width: 480px)
                   and (-webkit-min-device-pixel-ratio: 2) { ... }

iPad ( landscape ):
@media only screen and (min-device-width: 768px) 
                   and (max-device-width: 1024px) 
                   and (orientation : landscape) { ... }
oder ( portrait ):
@media only screen and (min-device-width: 768px) 
                   and (max-device-width: 1024px) 
                   and (orientation : portrait) { ... }

device-aspect-ratio:
@media screen and (device-aspect-ratio:   16/9  ) { ... }
@media screen and (device-aspect-ratio: 1280/720) { ... }
Browserabhängigkeiten CSS-Reset

CSS-Reset: Rücksetzen der CSS-Browservorgaben. Ein CSS-Reset setzt alle default Style-Informationen 'auf Null'. Siehe z.B. Reset-Stylesheet und global-css-reset , Siehe auch http://meyerweb.com/eric/tools/css/reset/

Menü und Stile Vor-und Nachteile

Es gibt zahlreiche Varianten und Möglichkeiten, wie die Web-Navigation und Web-Menüs entwickelt, gestaltet und verwendet werden. Mehr oder weniger kann dazu CSS und/oder ECMAScript verwendet werden. Bei größeren Projekten gibt es Gestaltungsrichtlinien in Form von Style-Guides, die bei der Erstellung der Screen-Designs beachtet werden sollen. Styleguides, CSS Frameworks und Grid Systeme mit float/festem Raster können bei der Umsetzung helfen.

Welche Vor-und Nachteile haben die verschiedenen Menü-Stile? Eine abschließende Antwort gibt es nicht.

Float a-Tag-Liste als Menü Beispiel

Die geräteabhängige Fensterbreite und die festen Kachelgrößen haben zur Folge, daß die erzeugten Quelltexte geräteabhängig werden. Hier kommt eine einfache Form von Web-Links. Es wird ein "dynamisches CSS-float-left" verwendet. Dadurch ergibt sich eine größere Geräteunabhängigkeit. Die verwendeten Style-Klassen sind:

<style>
a.width0 {
  float :left !important; display:inline !important; overflow: hidden;
  margin:3px 2px 3px 2px; padding:3px;border:3px outset #ccc; 
}
a.width0:hover {
  border:3px inset #999; cursor:pointer; 
}
.width0 { 
 width:170px; 
}
.float_clear_left { 
 clear:left !important;
}
</style>

Dieses Menü besteht lediglich aus a-Tags, wie etwa

<a class="width0"
   href="http://www.w3.org/People/Berners-Lee/">
   Tim Berners-Lee
</a>

Bitte dieses Menü experimetell testen. Bitte auch die Fensterbreite ändern.

Tim Berners-Lee Håkon Wium Lie Bert Bos Brendan Eich Douglas_Crockford crockford.com

Select-Box als Menü Beispiel

Es gibt zahlreiche unterschiedliche Arten, ein Menü zu gestalten, wie z.B. Mini- und Maxi-Navigationssysteme, Akkordeons, Drop-Down-Menüs, Fly-Out-Menüs, Cascading-Menüs, Mega-Menüs, Floating Menus, usw.

Hier soll nun eine aufklappbare Select-Box kann als Menü verwendet werden, indem die Ausführung bei einem Mausklick den onchange-Event auslöst und die ECMAScript-Funktion select_auswahl(this) auslöst. Das folgende Beispiel verwendet CSS-, HTML- und ECMAScript-Quellcode:

<style>
.menu_form{ clear:both; background-color:#669;
 padding:14px !important; width:97%; float:left;
 border-radius:20px;
 box-shadow: 5px -4px 12px #444, 
            -5px 4px 62px #bce,
             6px -6px 46px #fce, inset 5px -5px 5px rgba(64,64,64,0.9);
}
.menu_select {cursor:pointer;background:#669;color:#fff;width:99%;
 font-size:24px !important;line-height:28px !important;
 border-bottom:1px solid #ccc;
}
.screenreader {position:absolute;left:-9999px;overflow:hidden;}
</style>
<script>
function select_auswahl(that) { // nur Mausbedienung
  var el = that, 
  opt = el.options, 
  i = el.selectedIndex, 
  par = (opt[i].value).split(","), 
  fn = par[0], href = par[1], target = par[2] || '_blank';
  that.style.cursor = 'pointer';
  switch (fn) {
    case 'weblink': window.open(href, target); break;
    default: alert('Bitte andere Wahl ...'); break;
  }
}
</script>
<form class="menu_form" action="#">
<select class="menu_select" size="1" tabindex="0"
  onchange="select_auswahl(this);">
  <option value=""> Auswahl mit Select-Box </option>
  <option value="weblink,http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</option>
  ...
  </select>
</form>
Menü und Grid ( liquid layout ) Beispiel

Bei einfache Grid-Generatoren werden die Fensterbreite und die Kachelgrößen fest vorgegeben, etwa

<div class="grid-container">
   <div class="grid-item-1"> ...  </div>
   <div class="grid-item-2"> ...  </div>
   <div class="grid-item-3"> ...  </div>
   ...
</div>

Die geräteabhängige Fensterbreite und die festen Kachelgrößen haben zur Folge, daß die erzeugten Quelltexte geräteabhängig werden.

Mit CSS 3 ist hat das Box-Modell "box-sizing: border-box;" Vorteile!

Hier die "Zahlen-Gymnastik" mit dem kontextbezogenenen W3C-Standard-Box-Modell. Ein "dynamisches CSS-float-Raster" ist flexibler. Mit CSS kann eine größere Geräteunabhängigkeit erreicht werden, indem mit CSS ein "dynamisches float-Raster" verwendet wird. Ein solches Raster kann sich beim Zoomen oder Änderung der Schrift-Skalierung automatisch anpassen. Einleitende Betrachtungen zu einem float:left Entwurf:


   |-------------------------------------------------------------------------------|
   012345678901234567890123456789012345678901234567890123456789012345678901234567890 = 81
 
012 margin-left:3px;                      012   margin-left:3px;
   |-------------------------------------|   |-------------------------------------|
                                    width2 = 012345678901234567890123456789012345678 = 39

   |-----------------------|   |-----------------------|   |-----------------------|
                                                  width3 = 0123456789012345678901234 = 25

Es gibt zahlreiche Abhängigkeiten, wie z.B. border-width, margin, padding, Realisierungen bei den Browsern, usw. Deshalb wurden width0,1,2 angepaßt. Der Style sieht dann etwa so aus:

<style>
a.width0, a.width1, a.width2, a.width3 {
  float :left !important; display:inline !important; overflow: hidden;
  margin:3px 2px 3px 2px; padding:3px;border:3px outset #ccc; 
}
a.width0:hover, a.width1:hover, a.width2:hover {
  border:3px inset #999; cursor:pointer; 
}
.width0 { width:170px; }
.width1 { width:77px; }
.width2 { width:30px; }

.float_clear_left { clear:left !important; }
</style>
Siehe W3C css3 ( Flex-Box ) , en.wikipedia CSS Flex Box Layout
wikipedia Responsiven Webdesign



Beispiel: Menu-Daten mit figure-Tag, img und onclick Beispiel

Die Menu-Daten ( url, img, text) kommen von einem ( externen ) js-Array, wie z.B.
var menu_daten = [
"my_url0 , my_img0 , my_text0",
"my_url1 , my_img1 , my_text1",
...
];

Die Funktion build_html_figure_menu(menu_daten, id_wrapper) baut das Menu zusammen und zeigt es in id_wrapper an.