Parallax-Effekt
Mit dem Parallax-Effekt (de.wikipedia.org/wiki/Parallaxe ) lässt sich die Illusion von Bewegung erzeugen. Hierbei wird die Tiefe des Raums genutzt, was zu einer Art 3-D-Effekt führt. Sparsam eingesetzt, kann dies zu verblüffen Aha-Effekten auf der Website führen. Bei allen Parallax-Effekten werden Grafiken werden mittels unterschiedlicher Techniken positioniert und erzeugen dadurch eine Vorspiegelung von Bewegung.
Hierzu gibt es unterschiedliche Technologien: Natürlich kann Bewegung mittels Flash umgesetzt werden. Sie kann aber auch durch den Einsatz von JavaScript (JavaScript-Framework jQuery, speziell jQuery-Plugin jParallax) oder mittels CSS3 und HTML5 (dann aber nur in modernen Browsern darstellbar) erzeugt werden.
Beim Parallax-Scrolling (de.wikipedia.org/wiki/Bewegungsparallaxe ) wird der Hintergrund der Website (meist mehrere hintereinander liegende Ebenen unterschiedlich schnell) bewegt. Andere Parallax-Effekte reagieren auf die veränderte Position des Cursors und erzeugen so ein Bewegtbild. Der Effekt kann auch benutzt werden, um Elemente auf der Website in der Tiefe so anzuordnen, dass sie sich immer an die entsprechende Bildschirmauflösung anpassen. Das ist dann allerdings, gemessen am Parallax-Scrolling, weniger spektakulär für den Betrachter.
Hierzu gibt es unterschiedliche Technologien: Natürlich kann Bewegung mittels Flash umgesetzt werden. Sie kann aber auch durch den Einsatz von JavaScript (JavaScript-Framework jQuery, speziell jQuery-Plugin jParallax) oder mittels CSS3 und HTML5 (dann aber nur in modernen Browsern darstellbar) erzeugt werden.
Beim Parallax-Scrolling (de.wikipedia.org/wiki/Bewegungsparallaxe ) wird der Hintergrund der Website (meist mehrere hintereinander liegende Ebenen unterschiedlich schnell) bewegt. Andere Parallax-Effekte reagieren auf die veränderte Position des Cursors und erzeugen so ein Bewegtbild. Der Effekt kann auch benutzt werden, um Elemente auf der Website in der Tiefe so anzuordnen, dass sie sich immer an die entsprechende Bildschirmauflösung anpassen. Das ist dann allerdings, gemessen am Parallax-Scrolling, weniger spektakulär für den Betrachter.
Beispiel / Reaktion auf veränderte Position des Cursors: Tutorial für jParallax: webdev.stephband.info/parallax.html /webdev.stephband.info/jparallax/demos.html
Beispiel für die Anpassung an die Bildschirmauflösung: www.cdev.ru/?proceed (Banner im Header verändert sich bei der Größenänderung des Browsers)
Beispiel für die veränderte Position des Cursors im Header: www.yolcudergisi.com
Beispiele für Parallax-Scrolling: www.rowtothepole.com und inner.geek.nz/javascript/parallax
Hier bewegen sich die Eisschollen des Hintergrundes unterschiedlich schnell beim Scrollen. Beispiel für Parallax-Scrolling: www.rowtothepole.com
Informative Mouseover-Effekte
Informative Mouseover-Effekte (Änderung beim Überfahren mit der Maus) können beispielsweise für Techniken wie Dropdown-Menüs, Karteikarten, Formulare und Teaser verwendet werden und. Sie sind benutzerfreundlich, da der Nutzer schon vor dem Klick weiß, ob er sich auf dem richtigen Weg befindet. Solche Effekte werden seit Jahren eingesetzt und finden ihre Verbreitung durch den Einsatz von JavaScript. Seit der Veröffentlichung der frei verfügbaren JavaScript-Klassenbibliothek jQuery (de.wikipedia.org/wiki/JQuery ) sind vielfältige Effekte und Animationen möglich, die den Webdesigner kaum noch Wünsche offen lassen.
Mouseover-Effekt zur Anzeige von Detailinformationen auf der Audi-Website: www.audi.de
und zur Anzeige von Tarifinformationen auf der Website des Verkehrsverbundes Großraum Nürnberg: www.vgn.de
Sehr schön gelöst: Anzeige verfügbarerer Größen im Esprit Online-Webshop beim Überfahren der Produkte mit der Maus (www.esprit.de )
und zur Anzeige von Tarifinformationen auf der Website des Verkehrsverbundes Großraum Nürnberg: www.vgn.de
Sehr schön gelöst: Anzeige verfügbarerer Größen im Esprit Online-Webshop beim Überfahren der Produkte mit der Maus (www.esprit.de )
Akkordeon-Effekte
University of Queensland
www.uq.edu.au
www.uq.edu.au
Wie bei einem Akkordeon werden bei dem Effekt gleichen Namens einzelne Bereiche und deren Inhalt (z.B. Teaser, komplette Texte, Bilder oder Videos) beim Überfahren oder Klick mit der Maus angezeigt und wieder verborgen. Das Aufklappen kann hart und schnell oder weich und langsam animiert sein. Der Vorteil liegt auf der Hand: der Inhalt kann platzsparend auf einer Seite präsentiert werden und die Seiten werden durch die ausgeblendeten Inhalte wesentlich übersichtlicher. Dies ist vor allem dann sinnvoll, wenn Informationen für sich genommen einen zu geringen Umfang haben, um selbst eine komplette Seite füllen zu können. Die Darstellung aller Informationen auf einer Seite, würde jedoch zu einer viel zu langen und unübersichtlichen Seite führen. Hier kommt dann der Akkordeon-Effekte zum Einsatz. Weitere Einsatzmöglichkeiten sind Umsetzungen innerhalb der Navigation oder bei Schnellzugriffsmenüs (Schnellfinder) und zielgruppenorientierter Ansprache. Sinnvoll sind Akkordeon-Effekte auch zur Darstellung von Detailinformationen. Verkürzte Texte zu diesen Informationen können dann zum Beispiel in einem Teaser angerissenen werden. Nachteilig wirkt sich aus, dass die Effekte mittels JavaScript erzieht werden. Im Browser deaktiviertes JavaScript öffnet dann das gesamte Akkordeon. Ein weiterer Nachteil: die per JavaScript ausgeblendeten Inhalte werden von Suchmaschinen indiziert und als Kurztext auf der Ergebnisseite der Suchmaschine angezeigt. Wird der Treffer jedoch vom Nutzer angeklickt, ist der gesuchte Begriff erst einmal nicht sichtbar.
Drop-Down-Menü/Klapp-Navigation
Klapp-Menü mit abgeschrägten Ecken auf der Seite der Senioren Leichtathletik-EM
www.evacs2012.com
www.evacs2012.com
Ein Klapp-Menü wird gern verwendet, wenn die Navigation so umfangreich ist, dass die aneinander gereihten Punkte in der Menüleiste unübersichtlich wirken oder sich die komplette Navigationsleiste im Header befinden soll. Ein Ausklappmenü, wahlweise mit vertikaler oder horizontaler Aufklapprichtung, kann hier sehr praktisch sein, da die Unterpunkte erst bei Klick oder überfahren mit der Maus auf den entsprechenden Hauptmenüpunkt erscheinen. Der Vorteil: die Navigation erscheint sehr aufgeräumt und übersichtlich. Jedoch ist die komplette Navigationsstruktur nicht von vornherein ersichtlich. Manchmal ist bei den Menüpunkten auch nicht erkennbar, dass es sich um ein Drop-Down-Menü handelt. Abhilfe können hier Richtungsangaben (Pfeile die in die Klapprichtung weisen) sein.
Suchmaschinenfreundlich und barrierearm wird ein Klappmenü mittels CSS und ohne Java Script umgesetzt. Im Sinne der Zugänglichkeit sollte daher ein Klappmenü nicht die einzige Navigationsmöglichkeit auf der Seite sein. In Kombination mit den ebenfalls in Mode gekommen großen Footern kann dies
Suchmaschinenfreundlich und barrierearm wird ein Klappmenü mittels CSS und ohne Java Script umgesetzt. Im Sinne der Zugänglichkeit sollte daher ein Klappmenü nicht die einzige Navigationsmöglichkeit auf der Seite sein. In Kombination mit den ebenfalls in Mode gekommen großen Footern kann dies
einfach und übersichtlich gelöst werden. Möglichst sollten auch alle Befehle mit Hilfe von Tastenkombinationen zusätzlich angesteuert werden können. Dies trifft ebenso auf die Nutzung mobiler Endgeräte mit geringer Bildschirmauflösung zu. Weiterhin sollte auch die Menüleiste bei Nutzung vergrößerter Schrift mitwachsen, nicht unkontrolliert umbrechen oder Textbereiche gar übereinander ausgeben. Die Umsetzung von ordentlich programmierten Klapp-Menüs erfordert daher schon ein wenig Know-how und wird immer schwieriger, je mehr verschachtelte Unterebenen mit der Navigation abgebildet werden müssen.
Die Nutung bleibt jedoch bei Vergrößerung der Seite bei Sehbehinderten meist problematisch, zum Beispiel wenn das Klappmenü über den vergrößerten Bereich heraus ragt. Bei motorisch eingeschränkten Benutzern kann es zusätzlich zu Problemen führen, wenn der Mauszeiger versehentlich aus dem Menü herausrutscht (besonders bei Hover-Effekten), da dann die komplette heraus geklappte Unternavigation sofort wieder verschwunden ist und neu angesteuert werden muss.
Die Nutung bleibt jedoch bei Vergrößerung der Seite bei Sehbehinderten meist problematisch, zum Beispiel wenn das Klappmenü über den vergrößerten Bereich heraus ragt. Bei motorisch eingeschränkten Benutzern kann es zusätzlich zu Problemen führen, wenn der Mauszeiger versehentlich aus dem Menü herausrutscht (besonders bei Hover-Effekten), da dann die komplette heraus geklappte Unternavigation sofort wieder verschwunden ist und neu angesteuert werden muss.
Hinweis auf eine weitere vorhandene Unterebene in der Navigation: Pfeil in Drop-Down-Navigation auf den Seiten des Gerhart Hauptmann-Theater Görlitz-Zittau www.g-h-t.de .
Thumbnail Design/Thumbnail-Links
Seit Jahren sind Thumbnails bei Bildvorschau oder Galerien bereits im Einsatz. Früher wurde dies vor allem dazu genutzt um Ladezeiten einer Seite gering zu halten. Mittlerweile hat sich die Bildervorschau durchgesetzt, um den Betrachter eine komfortable Vorschaumöglichkeit zu bieten. Suchmaschinen wie Google setzten ebenfalls auf diesen Trend und bieten eine Thumbnail-Vorschau in ihren Trefferlisten an. Aber auch zur Vorschau von Textinformationen bietet sich dieser Trend durchaus an und wird so zum Beispiel als Teaser oder in Navigationsmenüs eingesetzt.
Thumbnail-Links als Vorschau für Fahrzeug-Angebot: www.quaddriver.de
Thumbnail-Design im Navigationsmenü:
Graham Short "the world`s smallest engraver" www.thehandsofgenius.com
Webseiten-Vorschau der Treffer bei Google als Thumbnails
Thumbnail-Design im Navigationsmenü:
Graham Short "the world`s smallest engraver" www.thehandsofgenius.com
Webseiten-Vorschau der Treffer bei Google als Thumbnails
Geolocation/Geotagging
Anwendungen wie Google-Maps haben in den letzten Jahren den Siegeszug der Georeferenzierung (de.wikipedia.org/wiki/Georeferenzierung ) eingeleitet.
Hierbei werden raumbezogene Informationen beispielsweise einem Datensatz, einem Bild oder einer Website zugeordnet, indem sie mit Koordinaten versehen werden. Webseiten erhalten durch eine Navigation per Landkarte (Beispiele: einfache Länderauswahl, Umkreissuche, zoombare Karten) entsprechenden Mehrwert.
Beispiel Filickr:
Fotos mit Geotags: www.flickr.com/map
Beispiel Filickr:
Fotos mit Geotags: www.flickr.com/map
Ein weiterer typischer Einsatz ist die Darstellung von Routen auf interaktiven Landkarten. Tourverläufe stellen gerade für Tourismusportale, Wander- und Trekkingseiten einen interessanten Mehrwert dar.
Viele Geräte, die GPS-Daten empfangen können, ermöglichen die Speicherung der Daten im KML-Format von Google-Earth. Diese könnend dann problemlos in Google Earth geladen und angezeigt werden. Sie können dann von weiteren Usern genutzt werden, um den nächsten Törn zu Wasser oder zu Lande zu planen.
Beispiel Zittauer Gebirgslauf & Wandertreff: www.zittauer-gebirgslauf.de
Beispiel Zittauer Gebirgslauf & Wandertreff: www.zittauer-gebirgslauf.de
Der Klassiker schlechthin! Geocaching ist eine Art moderne Schatzsuche oder Schnitzeljagd bei der mittels GPS-Empfänger und Koordinaten aus dem Internet ein von anderen „Geocachern“ versteckter Schatz gesucht wird. Geocaching ist die gelungene Symbiose aus Geländespiel und Internet und erfreut sich seit Jahren steigender Beliebtheit. www.geocaching.de
Beispiel Garmin Connect (connect.garmin.com ): Das Training immer im Überblick! Trainingsdaten des Trainings- oder Outdoor-Gerätes auf Garmin Connect online analysieren, Fitnessziele und Fortschritte verfolgen und auf Wunsch mit der Communityy teilen oder an Soziale Netzwerke posten.
Bei vielen Diensten findet Geotargeting bereits seit längerer Zeit Einsatz, meist auch ohne direkte Verbindung mit geografischer Darstellung. So nutzen Suchanbieter wie Google Geotargeting für die Erkennung der Ortszugehörigkeit der Suchanfrage und liefern, auch wenn beispielsweise kein Ortsname eingegeben wurde, Geo-bezogene Resultate. Weitere Beispiele sind die Schaltung regional differenzierter Werbung. Bei PayPal wird es verwendet um Onlinezahlungen auf regionale Unstimmigkeiten zu überwachen.
Bei YouTube werden einige Videos aufgrund von Lizenzfragen in unterschiedlichen Ländern nicht angeboten. Weitere Beispiele sind der automatische Start in der entsprechenden Landessprache bei Besuch eines Angebotes oder Zuweisung von passenden Filialen bei Besuch von Unternehmensseiten sowie Umkreissuche um beispielsweise die nächste Filiale im Umkreis von 50 km zu suchen.
Zielgruppenorientierung
Unter Zielgruppenorientierung auf Webseiten versteht man die spezielle Gestaltung von Einstiegsseiten oder ganzer Navigationsbereiche für entsprechende Ziel- oder Usergruppen. Die Orientierung in der Menüführung auf spezielle Kundengruppen fällt in den Bereich der Usability (Benutzbarkeit), mit welcher nach einer idealen Strukturierung von Information gestrebt wird, um den Nutzer eine effizienten Benutzung von Informationen und Technologie zu ermöglichen. Sehr oft findet eine Bündelung von Informationen auf Webseiten von Hochschulen und Universitäten statt, indem man hier die Zielgruppen in Studieninteressierte, Studierende oder Ehemalige (Alumni) unterteilt und diesen dann gezielte Informationen anbietet. Die Schwierigkeit besteht darin, dass trotzdem keine Informationen doppelt angeboten werden sollten, was eine Herausforderung an die Seitenstruktur der Webseite aber auch an deren technische Umsetzung darstellt.
Beispiele für zielgruppen-
orientierte Navigation im
Hochschulbereich:
University of Aberdeen
www.abdn.ac.uk
University of Queensland
www.uq.edu.au
Gateway Yale University
www.yale.edu
Flexible Auflösung/Lösungen für mobile Endgeräte
Sehr aufwändig mit CSS umgesetzte Layouts passen sich automatisch unterschiedlichen Auflösungen an, ganz egal ob Desktop-Monitore, Tablet-PC’s oder Displays von Smartphone. Im optimalen Fall sollten je nach Bildschirm-Ansicht Bilder automatisch kleiner oder größer skaliert und Texte und Spaltenräume verkleinert oder vergrößert werden. Auch die Navigation sollte sich entsprechend anpassen. So lassen sich Tablet-PC und Smartphone nicht nur in die übliche vertikale Richtung scrollen. Ein weiterer zu berücksichtigender Faktor sind die Browser der mobilen Endgeräte und deren Unterstützung von JavaScript und Flash. Optimierte Seiten sollten auch bei mangelnder Unterstützung (z.B. Flash bei iPhones) noch benutzbar sein. Diese Faktoren schränken Webseiten, die mit allen Geräten benutzbar sein wollen, enorm ein und sind allenfalls mit wesentlich größerem Aufwand als „normale“ Webseiten umsetzbar.
Viele Anwendungen werden daher speziell für mobile Endgeräte entwickelt (Apps) und sind damit komplett von der eigentlichen Website gelöst. Der Nachteil ist, dass die Apps speziell auf die Zielplattform angepasst werden müssen und meist nur über ein herstellerspezifisches Online-Portal bezogen werden können. Dies bringt einen hohen Aufwand in der Entwicklung und meist auch geringe Kosten für den Endnutzer mit sich.
Beispiel: University of Queensland: iPhone Campus-App
Beispiel: University of Queensland: iPhone Campus-App
Eine weitere Variante ist die Darstellung in einem zweiten Layout für mobile Endgeräte (Beispiel: Rednose). Bei Webseiten mit einer strikten Trennung von Inhalt und Layout ist dies kein Problem. Je nach Endgerät und Auflösung wird einfach eine unterschiedliche Formatierung mittels CSS ausgeliefert. So eine für mobile Endgeräte optimierte Webseite sollte einfacher gehalten sein als die „normale“ Webseite. Mit einer Ausnahme: minimalistische Webseiten sind meist ohnehin einfach gehalten und müssen daher nicht mehr angepasst werden.
Beispiel Red Nose Day:
Website: www.rednoseday.com
Mobile Site: m.rednoseday.com
Beispiel Red Nose Day:
Website: www.rednoseday.com
Mobile Site: m.rednoseday.com
Anke Hojenski
Besuchen Sie unsere Kunden im Internet
Copyright ©2003-2023 ISS-Oberlausitz Germany. All Rights Reserved.