Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite...

16
150 User-Interface-Design Notwendige Elemente jeder Seite Da damit gerechnet werden muss, dass Benutzer nicht nur von der Homepage kommen, sollte auf jeder Seite für den Benutzer klar sein: Diese Subseite gehört zur Website »meine Website«, und hier komme ich zur Homepage von »meine Website«. Am besten wird dies erreicht durch Kenn- zeichnungen am oberen Rand der Seite, die mindestens eine Bezeichnung und wahlweise auch noch Logos und Grafik zur raschen Wiedererkennung enthalten sollten. Dadurch wird verhindert, dass so genannte »Waisen- kinder-Seiten« entstehen. Das sind Webseiten, die keinen Link auf andere Seiten der Website enthalten. Wenn Benutzer durch eine Such- maschine auf einer solchen Seite landen, dann gibt es keine Möglichkeit, auf die Homepage zu gelangen. Erfahrene Benutzer können in der Adresszeile durch neuerlichen Aufruf nur des Domain-Namens zur Homepage gelangen, Neulinge nutzen diese Möglichkeit nicht. Ein Link zur Homepage sollte auf jeder Seite enthalten sein. Falls ein Logo existiert, dann sollte das Logo ebenfalls mit der Homepage verlinkt sein, da diese Handhabung im Web weit verbreitet ist und die Benutzer es daher erwarten. Ein zusätzlicher Link auf die Home- page kann nicht schaden und kann auch im deutschsprachigen Raum mit »home« oder »homepage« oder »zur homepage« bezeichnet werden, der Begriff ist so weit verbreitet, dass es keine Verständnisprobleme dabei gibt. Auch Verlinkung mit mindestens der nächst- höheren Hierarchieebene sind zu empfehlen, weil der Benutzer sich in vielen Fällen für »ähnliche Seiten« interessieren wird und nicht nur für die gerade gefundene Seite, sondern auch für jene, die damit zusammenhängen. Kontaktmöglichkeiten dürfen auf keiner Seite fehlen. Falls vom Betreiber angestrebt wird, dass Benutzer ein Kontaktformular dazu Gestaltung verschiedener Seitentypen Erster Schritt beim User-Interface-Design ist die Überlegung, welche Typen von Seiten, also z.B. Strukturseiten, Inhaltsseiten, Formularseiten u.s.w., benötigt werden. Für jeden Typus wird ein grund- sätzliches Design entwickelt, das die Basis für alle detaillierteren Designphasen bildet und als ein- heitliche Grundlage dabei hilft, die Konsistenz zu sichern.

Transcript of Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite...

Page 1: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

150 User-Interface-Design

Notwendige Elemente jederSeite

Da damit gerechnet werden muss, dass Benutzernicht nur von der Homepage kommen, sollte aufjeder Seite für den Benutzer klar sein:� Diese Subseite gehört zur Website »meine

Website«, und� hier komme ich zur Homepage von »meine

Website«.Am besten wird dies erreicht durch Kenn-zeichnungen am oberen Rand der Seite, diemindestens eine Bezeichnung und wahlweiseauch noch Logos und Grafik zur raschenWiedererkennung enthalten sollten. Dadurchwird verhindert, dass so genannte »Waisen-kinder-Seiten« entstehen. Das sind Webseiten,die keinen Link auf andere Seiten der Websiteenthalten. Wenn Benutzer durch eine Such-maschine auf einer solchen Seite landen, danngibt es keine Möglichkeit, auf die Homepagezu gelangen. Erfahrene Benutzer können in derAdresszeile durch neuerlichen Aufruf nur des

Domain-Namens zur Homepage gelangen,Neulinge nutzen diese Möglichkeit nicht.

Ein Link zur Homepage sollte auf jeder Seiteenthalten sein. Falls ein Logo existiert, dannsollte das Logo ebenfalls mit der Homepageverlinkt sein, da diese Handhabung im Webweit verbreitet ist und die Benutzer es dahererwarten. Ein zusätzlicher Link auf die Home-page kann nicht schaden und kann auch imdeutschsprachigen Raum mit »home« oder»homepage« oder »zur homepage« bezeichnetwerden, der Begriff ist so weit verbreitet, dasses keine Verständnisprobleme dabei gibt.

Auch Verlinkung mit mindestens der nächst-höheren Hierarchieebene sind zu empfehlen,weil der Benutzer sich in vielen Fällen für»ähnliche Seiten« interessieren wird und nichtnur für die gerade gefundene Seite, sondernauch für jene, die damit zusammenhängen.

Kontaktmöglichkeiten dürfen auf keinerSeite fehlen. Falls vom Betreiber angestrebtwird, dass Benutzer ein Kontaktformular dazu

Gestaltung verschiedenerSeitentypen

Erster Schritt beim User-Interface-Design ist dieÜberlegung, welche Typen von Seiten, also z.B.Strukturseiten, Inhaltsseiten, Formularseiten u.s.w.,benötigt werden. Für jeden Typus wird ein grund-sätzliches Design entwickelt, das die Basis für alledetaillierteren Designphasen bildet und als ein-heitliche Grundlage dabei hilft, die Konsistenz zusichern.

Page 2: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

verwenden, dann sollte ein Link auf diesesFormular angeboten werden, am besten mitder Bezeichnung »Kontakt«.

Besonders auf längeren Seiten wünschensich manche Benutzer einen Link »zurück zumSeitenanfang«. Auch eine Wiederholung derNavigationslinks als einfache Textlinks amEnde der Seite schadet nicht.

Die Homepage

Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild aufweisen, und es soll-te für die Homepage und auch für Subseitenauf den ersten Blick klar sein, was diese Web-site bietet. Die Internetbenutzer entscheideninnerhalb von wenigen Sekunden, ob sie aufder Site bleiben oder nicht. Wenn nicht aufden ersten Blick erkennbar ist, dass es sich umden gesuchten Inhalt handelt, dann klicken dieBenutzer rasch auf den Zurück-Button undsind wieder weg.

Dabei darf sich der Betreiber nicht daraufverlassen, dass wirklich jeder Benutzer dasLogo und/oder die Marke erkennt und sofortzuordnen kann. Im Web ist die Benutzer-gruppe oft breiter gestreut als jene Gruppe,die durch andere Werbemaßnahmen bishererreicht werden konnte. Und im Web geht esnicht darum, dass der Benutzer das Logo wieauf einem Plakat erkennt, sich merkt undwieder weggeht, sondern die Website spieltdie Aufgabe, dem Benutzer zu vermitteln,worum es in diesem Geschäft geht. Das Logokann unterstützen und Vertrauen erwecken,wenn der Benutzer eine bekannte Markewiedererkennt, im »Schaufenster Homepage«muss aber mehr zu finden und zu verstehensein als ein Logo.

Beim Beispiel in Abbildung 1 geht derBetreiber von www.selva.com anscheinenddavon aus, dass jeder Besucher den Marken-namen »Selva« bereits kennt oder zufälligdieselben Assoziationen hat wie der Fotograf,denn das Foto ist der einzige Hinweis darauf,um welches Produkt es sich handeln könnte.

151Gestaltung verschiedener Seitentypen

� Abbildung 1Um welches Produkt geht es auf dieserWebsite? Nicht um Unterwäsche,sondern um Möbel!

Page 3: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

Optimal ist für Shopping-Sites eine Abbildungdes Hauptprodukts oder eines typischen Pro-dukts, das die Website verkaufen soll, wie in(Abbildung 2): Hier ist auf den ersten Blick klar,dass Schlafsäcke angeboten werden.

Ein Bild als einziger Hinweis auf ein Produktwäre allerdings auch zu wenig: Gerade bei re-alen Bildern könnte es Verständnisproblemegeben. Es handelt sich meist um Symbolfotos,die von unterschiedlichen Menschen auch un-terschiedlich interpretiert werden können.

Ideal für das intuitive Verstehen ist es daher,wenn zusätzlich zum Logo noch eine »Tagline«angeboten wird, d.h. eine Zeile mit wenigenSchlagwörtern, die den Zweck der Seite um-reißen: Text sagt manchmal mehr als 1000Zeichnungen. Im Schlafsack-Beispiel ist diese

Tagline bereits im Logo enthalten: »SleepingBags« erklärt, welches Produkt es ist.

Ein weiteres Beispiel für eine Tagline findetsich bei Lycos (www.lycos.de): »Ihr persön-licher Internetguide« (Abbildung 3).

Die Strukturseite

Strukturseiten sind solche Webseiten, die denBenutzer in tiefere Ebenen der Struktur führen.Sie dienen der Navigation des Benutzers bis zudem Inhalt, den er gesucht hat, bis zum Blattim Hierarchiebaum. Das Blatt im Hierarchie-baum ist eine Inhaltsseite. Solange der Benut-zer sich noch im Such- und Navigationsprozessbefindet, verwendet er sehr wenig Zeit, umeine Seite zu betrachten, sondern versucht nur

152 User-Interface-Design

Abbildung 2 �Besser: www.carinthia-

bags.com: Ein Schlafsackauf der Homepage, unddas ist auch genau das,

was auf dieser Siteangeboten wird.

� Abbildung 3Eine Tagline sagt mehr als Logo undMarkenname.

Page 4: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

153Gestaltung verschiedener Seitentypen

� Abbildung 4Die Homepage der Öster-reichischen Nationalbank ...

Abbildung 5 �... und die Subseite zumThema »Euro«: Auf den

ersten Blick entsteht derEindruck, dass zum Euro

nur der Umrechnungskursangeboten wird.

Page 5: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

möglichst rasch an sein Ziel zu gelangen. Hater das Ziel schließlich gefunden, oder glaubt erzumindest, es gefunden zu haben, dannwendet er mehr Zeit auf.

Auf Strukturseiten lesen Benutzer kaum. Siescannen den Inhalt, um sich innerhalb von Se-kunden für einen Link entscheiden zu können.Fließtext hat daher auf einer Strukturseitenichts verloren.

Häufig findet man im Web Strukturseiten,die den weiteren Navigationsweg nur im links-seitigen oder oberen Navigationsbereichanbieten. Da der Teil in der Mitte nicht leerbleiben soll, wird eine beliebige Informationoder ein Bild angeboten. Bei Benutzertestszeigte sich, dass solche Strukturseiten fürBenutzer verwirrend sind. Da sie denNavigationsbereich schon von der Startseiteher kennen und Navigationsbereiche links undoben von vielen anderen Sites her bekanntsind, beachten sie ihn kaum noch. Sie blickenstattdessen auf den Inhaltsbereich der Seite.Befindet sich im Inhaltsbereich Text oderGrafik, dann bleibt der Blick des Benutzerszunächst dort hängen, und es dauert eineWeile, bis er erkennt, dass ihn der Inhalts-

bereich nicht weiterbringt und er sich doch imNavigationsbereich umsehen muss, um weiter-zukommen. Besonders deutlich ist dieserEffekt bei www.oenb.at (Abbildung 4,Abbildung 5): Auf der Subseite ändert sich dieNavigationsleiste, aber da sie aussieht, wie dieNavigation auf der Homepage wird dies vomBenutzer kaum bemerkt. Es entsteht auf derSubseite zum Euro daher auf den ersten Blickder Eindruck, dass zu diesem Thema nur einBild und der Umrechnungskurs angebotenwerden. Benutzerfreundlicher ist daher die Variante,bei der die weiterführenden Links im Inhalts-bereich der Strukturseite angeboten werden,wie dies im Beispiel in Abbildung 3 beiwww.wien.at der Fall ist.

Die Inhaltsseite

Inhaltsseiten sind Blätter im Hierarchiebaumder Website. Da der Benutzer hier (hoffentlich)am Ziel angelangt ist, navigiert er nicht,sondern widmet sich dem Inhalt und nimmtsich dafür etwas mehr Zeit, als wenn er noch

154 User-Interface-Design

� Abbildung 6Der Inhaltsbereich einer Strukturseite dientder Navigation und enthält daher Links aufweiterführende Seiten.

Page 6: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

auf der Suche ist. Die Inhaltsseite darf daherdurchaus etwas länger sein. Wenn die Seitelängeren Text oder eine längere Liste enthält,dann ist der Benutzer jetzt auch bereit, zuscrollen, wenn ein Teil des Textes im oberenBereich sichtbar ist und offensichtlich ist, dasses unten weitergeht.

Zusatzfenster

Zusatzfenster zum eigentlichen Browserfenstersind heiß diskutiert und werden gleichzeitigdoch immer häufiger verwendet.

Aus Usability-Sicht entsteht beim Öffneneines Zusatzfensters grundsätzlich schon ein-mal das Problem, dass das einfache Webmodell»Webseite – Klick auf einen Link – andereWebseite« durchbrochen wird, ähnlich wie bei

Frames. Auch entspricht es nicht der Erwar-tungshaltung des Benutzers, der ja damitrechnet, dass sich eine neue Seite öffnet, nichtein neues Fenster.Ein zusätzliches Fenster bedeutet aber auch,dass am Bildschirm wieder ein Fenster mehrda ist, die Menge der Fenster, über die derBenutzer den Überblick behalten soll, steigt.Besonders für Neulinge ist es nicht so einfach,die Übersicht zu bewahren. Da kann es schonleicht vorkommen, dass ein Fenster hinter einanderes Fenster rutscht oder in die Taskleisteverschoben wird, und der Benutzer weiß einpaar Minuten später nicht mehr, wo es ist.Aber auch Expertenbenutzer reagieren oftetwas verärgert, wenn sich eine Anwendungherausnimmt, Fenster automatisch zu öffnen,also in die Organisation seines (virtuellen)Schreibtisches eingreift.

155Gestaltung verschiedener Seitentypen

� Abbildung 7Kleine Zusatzfenster wirken auf viele Benutzer wie Wer-beeinschaltungen und werden oft gleich wieder zugemacht.

Page 7: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

Viele Benutzer halten kleine Zusatzfenster,die sich automatisch öffnen für Werbeein-schaltungen und schließen sie gleich wieder(Abbildung 1). Wichtigen Inhalt in einemkleinen Zusatzfenster anzubieten ist daheretwas riskant.

Wird ein kleines Zusatzfenster geöffnet undder Benutzer klickt in das Hauptfenster oderein anderes Fenster, dann verschwindet eshinter dem Hauptfenster. Nicht alle Browserschaffen es dann überhaupt, das Fensterwieder nach vorne zu bringen, wenn derBenutzer nochmals auf den Link klickt, der dasFenster öffnen soll, weil das Fenster ja bereitsgeöffnet ist, allerdings im Hintergrund liegt. Eskönnen also große Probleme dabei auftreten,dass das Fenster »verloren geht« und derBenutzer es nicht wieder »findet«.

Ein häufig vorgebrachtes Argument FÜR einkleines Zusatzfenster ist, dass der jeweiligeInhalt, z.B. eine Übersicht zu der Landkarte,die am Bildschirm gerade im Detail angezeigtwird, erhalten bleiben soll, auch wenn derBenutzer das Hauptfenster scrollt oder zueiner anderen Seite wechselt. In Anbetrachtder Tatsache, dass das Fenster wie obenbeschrieben aber sehr leicht auch am Bild-schirm untergehen kann, sollte die Ent-scheidung für ein Zusatzfenster, das wichtigeInhalte enthält, wohl bedacht sein.

Wenn große Zusatzfenster geöffnet werden,dann birgt das wiederum andere Gefahren insich, nämlich dass die Benutzer gar nichtmerken, dass ein neues Fenster geöffnetwurde, da das neue Fenster sich genau überdas alte positioniert. Dass Benutzer es nichtmerken, ist so lange kein Problem, solange sienicht auf den Zurück-Button drücken. Dasneue Fenster hat nämlich auch einen neuen»Verlauf (History)«, d.h. die Liste der besuch-

ten Seiten, die über den Zurück-Button oderüber das Verlaufmenü erreicht werdenkönnen, wird neu angelegt und hat dahernoch keine Einträge. Der Benutzer möchtezurück, der Zurück-Button ist aber grau undfunktioniert nicht. Den Grund dafür erkennenNeulinge und Durchschnittsbenutzer meistnicht und reagieren verwirrt. Dass es also beigroßen Zusatzfenstern Probleme mit dem»Zurück« geben kann, ist insofern besondersinteressant, weil viele Webdesigner geradedeshalb für Zusatzfenster argumentieren, weilsie damit den Benutzer »auf der Websitehalten« möchten. Das Öffnen einer neuenSeite kann dazu führen, dass Benutzer zu derWebsite, die das Fenster geöffnet hat, nurschwer wieder zurückkommen. Das Ansinnen,Benutzer auf einer Website zu halten, ist imInternet aber ohnehin nicht praktikabel, esgibt keine Möglichkeit, den Benutzer auf einerWebsite »einzusperren«, wenn ihn dieWebsite nicht interessiert, wird er sie ver-lassen. Auf der Website gehalten werden kannder Benutzer nur durch die Website und ihrenInhalt selbst, nicht durch umständliche Inter-aktions- und Fenstertechniken.

Auf keinen Fall sollten große Zusatzfensterfür Links innerhalb der eigenen Website ver-wendet werden.

Werbung ist für manche Sites eine Über-lebensfrage, aber Zusatzfenster für Werbeein-schaltungen nerven die Benutzer. Sie ver-suchen, sie so rasch als möglich wieder zuschließen. Wehrt sich das Fenster und tauchteinfach nochmals auf oder hat gar keinenButton für das Schließen, dann sind dieBenutzer nur noch mehr verärgert. Wennmehrere Werbefenster geöffnet werden, kanndas die Benutzer so sehr verärgern, dass sie dieHauptsite gar nicht mehr besuchen wollen und

156 User-Interface-Design

Page 8: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

damit das Kind mit dem Bade ausgeschüttetwurde. Wenn im Zusatzfenster eine Microsite,also eine kleine, meist werbeorientierteWebsite geschaltet wird, dann ist es sehrschade, weil viel Aufwand darin steckt – nurdafür, dass die Benutzer das Fenster verärgertschließen. Wenn schon Werbung, dann sindBanner auf der Webseite selbst vorzuziehen.Die Benutzer sind sie gewohnt, fühlen sichnicht veranlasst, mit Zwangsfenstern zurangieren, und ärgern sich nur mäßig.

157Gestaltung verschiedener Seitentypen

Page 9: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

158 User-Interface-Design

Rahmen für die Homepage

Offensichtlich können manche Webdesignernicht mit der Freiheit der Benutzer umgehenund fixieren die Fenstergröße durch Öffneneines neuen Fensters auf eine fixe Größe, zusehen z.B. bei www.webagentur.de inAbbildung 1.

Auf einen Kommentar zum Inhalt der Seitekönnen wir hier auch nicht verzichten: Diescheinbare »Navigation« in der Mitte ist aucheinen Besuch wert: Die Icons bewegen sichentlang der waagerechten Leiste. Die Pointesei vorweggenommen: Es ist gar keine Navi-gation, sondern ein Designelement, wenn manlange genug versucht hat, auf eines der Iconszu klicken, bemerkt man schließlich, dass dasFirmenlogo in der Mitte doch immer wiederauftaucht und letztlich auch die einzigeKlickmöglichkeit darstellt.

Diese Sites verzichten also freiwillig aufBildschirmplatz, wertvollen Raum am Bild-schirm des Benutzers. Von solcher Vorgehens-weise ist dringend abzuraten. Nicht nur, dassein zusätzliches Fenster geöffnet werden muss,die Benutzer ärgern sich auch, wenn sie ver-suchen, ein Fenster größer zu machen, und esfunktioniert einfach nicht. Beim Benutzer ent-

steht der Eindruck, dass das alles sei, dieHomepage wirkt klein und vermittelt vielleichtunberechtigterweise, dass wenig Inhalt da ist,also der schlechteste Eindruck, der am Webentstehen kann. Denn wenn nur wenig Bild-schirmplatz verwendet wird, muss einBenutzer natürlich glauben, dass der Platzauch nicht benötigt wird, dass er auf dieserWebsite keine Seiten mit viel Inhalt vorfindenwird. Schon die Homepage macht deutlich:Hier wirst du nur Werbeplakate vorfinden.

Außerdem verzichten solcherart gestalteteSites auf die einfachste Navigationsmöglichkeitüberhaupt, den Zurück-Button. Eine Naviga-tionsmöglichkeit zu gestalten, die nochschneller verstanden wird, ist einfach nichtmöglich. Jede Navigationsform im kleinenFenster hat daher einen Nachteil im Vergleichzur »Gratisausstattung«, die man mit demZurück-Button erhält.

Ein zusätzlicher Nachteil entsteht durch dieTatsache, dass mehr als ein Fenster verwendetwird. Benutzer verwenden ja nicht nur ein ein-ziges Fenster, sonst würde man kein Fenster-system brauchen, sie schalten zwischen denAnwendungen herum und rangieren Fensteram Bildschirm. Dabei kann es leicht passieren,dass das – eigentlich nicht benötigte – Haupt-

Fenstergröße

Mit der Tatsache, dass die Größe des Fensters vomBenutzer verändert werden kann, muss man alsWebdesigner leben und sie natürlich in dieGestaltung einfließen lassen.

Page 10: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

159Fenstergröße

� Abbildung 1Freiwilliger Verzicht: DieseHomepage spart (unnötig)Platz.

Abbildung 2 �Ein falscher Klick, und dieHomepage rutscht hinter

das uninteressante Hinter-grundfenster.

Page 11: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

fenster in den Vordergrund rutscht, das klei-nere Fenster für die Homepage kann dannschon im Hintergrund verschwinden, und derBenutzer sieht vor sich eine leere Seite zu derHTTP-Adresse (Abbildung 2).

Katastrophal ist in dieser Situation die Kom-bination mit einer Intro: Angesichts der leerenSeite drückt der Benutzer sofort auf »Neuladen« mit dem Ergebnis, dass er nochmals dieganze Intro ansehen muss.

Ändern der Fenstergröße

Das automatische Ändern der Fenstergröße isttabu, man findet es aber doch immer wiederam Web, wie z.B. bei www.basta.de (sieheAbbildung 3). Öffnet der Benutzer diese URL,dann wird er mit einer Zusatzseite überrascht,die sich automatisch über den ganzen Bild-schirm legt und deren Größe noch dazu nichtänderbar ist. Die Betreiber dachten vielleicht,sie könnten den Benutzer so zwangsweise be-glücken, dabei haben sie aber nicht überlegt,

dass der Benutzer wohl einen Grund hatte,seinem Browserfenster genau diese und keineandere Fenstergröße zuzuweisen. Wenn dannauch noch der Zurück-Button fehlt, hat derBetreiber noch immer nicht gewonnen, denndem Benutzer bleibt immerhin noch die Mög-lichkeit, das Fenster aus Ärger ganz zuzuma-chen (und die Site nie wieder zu besuchen).

Scrollen

Beschränkt sich ein Betreiber auf ein kleinesFenster, kann natürlich schnell der Punktkommen, an dem der Inhalt größer wird undscrollen notwendig ist. Scrollen ist aber etwas,das Benutzer nur ungern machen. Ganzbesonders zu vermeiden ist quer zu scrollen,da der Benutzer dabei den Inhalt in zweiDimensionen verschieben muss und dabeileicht die Situation eintreten kann, dass ernicht mehr genau weiß, wo er sich dabeibefindet, denn es ist immer nur ein Teilbereichsichtbar, der Benutzer muss sich merken, was

160 User-Interface-Design

� Abbildung 3Keine Möglichkeit für den Benutzer, dieihm aufgezwungene Fenstergröße zu adap-tieren.

Page 12: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

im nicht sichtbaren Teil angeboten wurde, einklarer und schneller Überblick ist nicht möglich(Abbildung 4).

Gelegentlich trifft man sogar auf Seiten, beidenen die Navigation gescrollt werden kann(Abbildung 5, www.oebb.at). Für den Be-nutzer bedeutet das, dass er im Inhalt scrollenmuss, um sich innerhalb der Seite zu orien-tieren, und auch noch die Navigation scrollenmuss, um sich auf der Site zu orientieren.

Skalierbare Fenster

Wird ein Zusatzfenster geöffnet, dann hat derProgrammierer die Möglichkeit, die Fenster-größe zu definieren und auch fix einzufrieren,so dass der Benutzer keine Möglichkeit mehrhat, selbst die Fenstergröße zu ändern. DemBenutzer diese Freiheit zu nehmen istallerdings nicht ratsam.

Da auch Textgrößen nicht eingefroren wer-den sollten, ist nicht vorhersehbar, wie groß

die Darstellung im Inhalt sein wird, außer derInhalt besteht nur aus Grafik. Auch stellen un-terschiedliche Browser Seiten immer etwasunterschiedlich dar. Mit Pixelgrößen zu arbei-ten ist daher immer riskant.

Ein weiteres Problem ist folgendes: Wennein Zusatzfenster das aktive Fenster im Browserdarstellt und ein Benutzer eine neue Web-adresse durch Klick auf eine Webadresse z.B.in einer E-Mail öffnet, dann wird diese in demZusatzfenster geöffnet. D.h., dass im Zusatz-fenster unter Umständen auch völlig andererInhalt landen kann. Aus einem egoistischenBlickwinkel betrachtet könnte ein Betreibermeinen, dass das Problem der anderenWebsite ist – JEIN, denn ärgern wird sich derBenutzer über jene Website, die ihm dasChaos beschert hat. Er wird das Zusatzfensterschließen, um ein Fenster in normaler Größeöffnen zu können, und damit auch dieMöglichkeit verlieren, in der History/dem Ver-lauf des Zusatzfensters navigieren und damitzu der Site zurückkehren zu können.

161Fenstergröße

� Abbildung 4Hier wird amfalschen Platzgespart: Quer zuscrollen sollte ver-mieden werden(www.die-erste.at).

Abbildung 5 �Wenn die Navigation gescrollt werden muss, dann

bedeutet das, dass sich der Benutzer in derNavigationsleiste zurechtfinden muss, um sich auf der

Site zurechtzufinden.

Page 13: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

162 User-Interface-Design

Vorteile von Frames

Die Navigationsleiste bleibt beim ScrollenerhaltenHauptargument der Befürworter ist, dass dieNavigationsleiste für den Benutzer auch dannerhalten bleibt, wenn er nach unten scrollt.Das ist aber mittlerweile auch mit anderenTechniken möglich.

Teile der Seite müssen nicht neu geladenwerdenBei geframten Seiten muss nur der Inhalts-bereich einer Seite neu geladen werden,dadurch haben alle Folgeseiten rasche Über-tragungszeiten. Nicht geframte Seiten könnenin diesem Punkt aber auch optimiert werden,so dass möglichst nur die neuen Teile einerSeite geladen werden müssen. Bei Naviga-tionsleisten, die auch anzeigen, in welchemBereich sich der Benutzer gerade befindet,muss ohnehin in jedem Fall die Navigation neugeladen werden, die Auswirkungen auf dieLadezeit sind mit oder ohne Frames diegleichen.

Nachteile von Frames

Das mentale Modell geht verlorenDas mentale Modell, das ein Benutzer vomgesamten Web hat, ist ein Netz von verlinktenSeiten. Dieses Modell ist sehr leicht zu ver-stehen und mit ein Grund dafür, dass das Webdas wurde, was es heute ist. Wenn eine SeiteFrames verwendet, dann befinden sich inner-halb der Seite mehrere Seiten. Man merktschon an der Formulierung, dass jetzt nichtmehr klar ist, was eine Seite ist. Das mentaleModell der Seite geht verloren und muss einerkomplizierteren Vorstellung weichen, die einementale Belastung für den Benutzer darstellenkann.

SuchmaschinenEs gibt Suchmaschinen, die Framesets ab-lehnen oder schlechter ranken als nicht ge-framte Seiten.

Frames ohne Navigation als SuchergebnisOft werden Hauptframes ohne das zugehörigeFrameset und damit ohne die Navigation alsSuchergebnis von Suchmaschinen gefunden.Dieser Auftritt einer Webseite »oben ohne«(oder »links ohne«) entspricht natürlich nicht

Frames

Die Diskussion über »to frame or not to frame« wirdvon Vertretern der gegensätzlichen Standpunkteschon jahrelang hitzig geführt. In der Entscheidungs-phase hilft eine Betrachtung der Vor- und Nachteileund der Sparte der Website.

Page 14: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

dem Bild, das der Betreiber beim Interes-senten erwecken möchte.

Jede Inhaltsseite eines Framesets sollte da-her auch zumindest einen Link auf die zuge-hörige Homepage enthalten. Auch eine Lö-sung des Problems mit JavaScript ist möglich.Wird die Seite ohne die Navigationsframesaufgerufen, so bewirkt das Javascript, dass dieSeite nochmals mit dem gesamten Framesetgeöffnet wird.

Unerfreulich sind auch Suchergebnisse, diedie »No-Frame«-Version eines Framesets alsSuchergebnis liefern wie in Abbildung 1 undals Titel haben »Ihr Browser verwendet keineFrames ...«, statt den Titel der Website, derFirma oder des Themas zu liefern.

Das DruckproblemDas Druckproblem hat jeder bereits erlebt:Man klickt den Drucken Knopf in der Brow-serleiste, und der Drucker spuckt ein Blatt aus,auf dem nur die Navigationsleiste enthaltenist. Dies resultiert daher, dass es für den Brow-ser immer einen »aktiven« Frame gibt. Ge-druckt wird der aktive Frame. Der Benutzersieht aber nicht, welcher Frame gerade aktivist. Klickt der Benutzer in einen Frame, so wirddieser aktiv. Da der Benutzer, um zu navi-gieren, in der Navigationsleiste klickt, ist dieseaktiv und wird gedruckt. Besonders ärgerlich

ist dieser Effekt, wenn der Benutzer nichtsofort prüft, ob der Druck korrekt war, z.B.weil der Drucker sich in einem anderen Raumbefindet. Bis er den Fehler entdeckt hat, weißer eventuell die URL schon nicht mehr, oder,wenn es eine dynamische Seite war wie dieBestätigung einer Kontotransaktion, die Seiteexistiert auch gar nicht mehr.

Entgegengehalten wird dieser Argumen-tation häufig, dass der Benutzer im Browser jaeinstellen kann, was er drucken möchte. Dasist schöne Theorie, aber die meisten Benutzerstellen in ihrem Browser (und anderenAnwendungen) nichts um. Es sind nur dieExpertenbenutzer und EDV-Freaks, die an denEinstellungen und Optionen herumdrehen.Laienbenutzer lassen die Finger davon undnehmen Software größtenteils so hin, wie sieist.

Ein weiteres Gegenargument ist, dass aufder Website eine Druckfunktion eingebautwerden kann. Gegen Druckfunktionen istprinzipiell nichts einzuwenden. Der Betreiberdarf sich aber nicht darauf verlassen, dass dieBenutzer auch brav die Druckfunktion ver-wenden. Der Drucken-Knopf im Browser istein Knopf, den sie besser kennen, dessenPosition über alle Webseiten hinweg gleich istund der kein Nachdenken erfordert. Gedrücktwerden wird er daher auf alle Fälle.

163Frames

� Abbildung 1Statt einer Seitenbeschreibung,die die Chance erhöht, dass derBenutzer auf den Link klickt,liefert die Suchmaschine »DieseSeite verwendet Frames ...«.

Page 15: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

Das Favoriten- und Link-ProblemJede Webseite verdient ihre eigene URL. Wirdein einziges Frameset für eine ganze Websiteverwendet, dann haben Subseiten keineeigene URL. Auf solchen Sites ist es nichtmöglich, eine Subseite als Favoriten fest-zulegen, versucht man es doch, wird nur dieHaupt-URL gespeichert. Möchte der Benutzerzurück zu der Seite, so landet er auf derHomepage. Der Weg, den er dabei durch dieWebsite bereits gegangen ist, geht verloren,und damit sinkt die Chance, dass er die Seitewieder findet. Dasselbe gilt für Links vonaußen. Auch diese können nur auf die Start-seite gesetzt werden und verlieren damit,wenn die Subseite gemeint war, an logischemZusammenhang, oder es wird gar nicht ver-linkt, eine verlorene Chance für den Betreiber.

Informationssites sollten daher auf Framesverzichten oder, was aufwändiger ist, eineigenes Frameset für jede Seite definieren. Sorealisiert z.B. bei www.help.gv.at (Abbildung 2):Favoriten und Links von anderen Seitenmüssen für diese Website, die sehr umfang-reich ist, einfach funktionieren, sonst funk-tioniert die ganze Website nicht.

IFrames

IFrames (oder auch »Inline Frames/FloatingFrames«) sind Frames innerhalb einer Seite(auch innerhalb eines Frames). Das Konzeptwurde zunächst nur von Internet Explorerunterstützt, in Netscape funktionieren IFramesab Version 6.0. Wie Frames können auch

164 User-Interface-Design

� Abbildung 2Trotz Frames hatjede Seite ihreeigene URL.

Page 16: Gestaltung verschiedener Seitentypen · Navigationslinks als einfache Textlinks am Ende der Seite schadet nicht. Die Homepage Eine Website sollte ein leicht wiedererkenn-bares Erscheinungsbild

IFrames für den Benutzer sehr verwirrendwirken, besonders IFrames mit Scrollbars, diesich auf Seiten befinden, die ebenfalls gescrolltwerden können. Bei mehreren scrollbarenEbenen wird rasch unklar, was eigentlichgerade gescrollt wird. Benutzergerecht sindIframes daher nur auf Seiten, die selbst nichtscrollbar sind.

Quintessenz zu Frames

Am Web sollten Frames besonders für Sites,die statische Informationsseiten enthalten,vermieden werden. Anders ist die Situation beiSoftwareanwendungen im Web oder imIntranet, wo Frames sinnvoll eingesetztwerden können.

165Frames