Seiten-Preview-Leiste bei Tchibo

Gerade bin ich über ux·zentrisch auf eine interessante Art aufmerksam geworden, wie man die Navigation von großen, also langen Seiten, für den User übersichtlicher machen und ihn dadurch unterstützen kann: mit einer Seiten-Preview-Leiste.

Tchibo setzt eine solche Leiste in ihrem Online-Shop ein. Scrollt man dort aus dem sichtbaren Bereich heraus, so erscheint auf der rechten Seite eine Leiste mit einem Positionsrahmen, ähnlich wie man ihn von den Drei-Monatskalendern kennt, wie er in vielen Büros seit Jahrzehnten zu finden ist. Dies Positionsrahmen kann man auch zum scrollen verwenden und auf der Leiste kann man grob erahnen, wo ein gesuchtes Produkt sein könnte. Dies ist auch interessant, da Tchibo ihre Seite jede Woche, entsprechend der ebenfalls in diesem Rhythmus wechselnden Themenwelt, neu gestaltet und sich der User in jeder Woche dort neu orientieren muss.

Auf ux·zentrisch hat Martin Gude in diesem Artikel auch darauf hingewiesen, dass Googles What do you love? auf der linken Seite eine vergleichbare Funktion nutzt … jedoch ohne Vorschau.

Online-Galerie mit interessantem Navigationskonzept

Über den Blog von Jeriko bin ich auf den Photographen Christopher Loren Ewers aufmerksam geworden. Was an und für sich nichts besonders erwähnenswertes ist, in einem Blog, der sich wie das Netzlogbuch eher mit Web-Themen beschäftigt. Die Website von Ewers’ hat aber eine besonders interessante Bild-Navigation, die mir persönlich sofort gut gefallen hat.

In der Regel und je nach Größe des Browserfensters sieht man jeweils nicht nur das aktuell angesteuerte Bild, sondern auch noch jeweils Teile des vorhergehenden bzw. der nachfolgenden Bilder. Die Bilder werden horizontal angesteuert und u.a. da die Site in Flash entwickelt wurde, geschieht dies mit einem sehr passenden Verschiebeeffekt. Zum Ansteuern der Bilder ist unter der Bilder-Leiste eine Zahlenleiste platziert, mit der man z.B. auch mehrere Bilder überspringen kann. Was sich aber nicht unbedingt empfiehlt, da dann doch nicht die Navigation das Highlight dieser Website ist, sondern die Bilder.

Studie: Mobile muss es einfach sein

Eine Studie von IBM bestätigt wohl, was ich immer dann auch bemerke, wenn ich mit meinem Handy irgendwelche Internet-Dienste wie E-Mail oder das Web nutze: Dann muss es schlichtweg einfach funktionieren.

Zum einen weil es immer noch recht kostenintensiv ist, wenn man derzeit mobil ins Netz geht … was sich hoffentlich bald ändert … und zum anderen, weil es trotz iPhone und Co. noch kaum ganzheitlich überzeugende und alltagstaugliche Eingabemöglichkeit gibt, wenn man z.B. auf dem Heimweg in der S-Bahn mal schnell eine Mail schreiben möchte oder ein Bestellung in einem Online-Shop tätigen möchte.

Laut Digital:next gibt es jedoch noch ein weiteres Problem im Bezug auf mobile Endgeräte:

Ein großes Problem bei der Bereitstellung von Inhalten ist vor allem aber die Vielzahl an Betriebssystemen und unterschiedlichen Endgeräten, weil die Nutzer eine möglichst einfache Anwendung der Inhalte wünschen. Daher sollten künftig nicht mehr die Anforderungen des Geräts, sondern die Anforderungen des anzubietenden Dienstes im Mittelpunkt der Soft- und Hardware-Entwicklung stehen. Die wichtigsten Kriterien für die mobilen Märkte der Zukunft seien aber vor allem ein günstiger Zugang mit einem günstigen Endgerät.

Allgemein muss man aber sagen, dass das Web weiter von der recht eingleisigen Ausrichtung auf die Ein-und Ausgabe am Rechner mit Tastatur und Monitor weg kommen sollte bzw. muss. Hier hilft schon mal die strikte Einhaltung des Paradigmas von der Trennung von Layout, Verhalten und Inhalten. So können mobile Dienste auf den Inhalten aufsetzen und nicht nur angepasste Layouts anbieten, sondern auch eine angepasste Nutzungslogik. Insgesamt ist dies vor allem eine Herausforderung an die Menschen, die Informationssysteme konzipieren und entwickeln.

IzzyMenu – CSS-Menü-Generator

Izzy Menu

IzzyMenu ist ein kostenloser Online-Generator für CSS-Menüs. Der faule Webdesigner hat die Möglichkeit zahlreiche Formatierungen vorzunehmen, um sein Wunschmenü zu erhalten, wie z.B. Font, Farbe, Background-Image usw. Ist man eingeloggt kann man sein erstelltes Menü in den Katalog speichern und es somit anderen Leuten zur Verfügung stellen. Eine ähnliche Anwendung ist auch der Tabcreatr. Von den Funktionen her sind IzzyMenu & Co. eine echte Alternative zu Programmen wie dem CSS Tab Designer, was auch den Trend hin zu Web-Anwendungen zeigt.

01. April 2008
von Simon Schmid
Profilbild von Simon Schmid

Website = User Interface

Logo der Website ui-patterns.com

Auch wenn es viele nicht glauben mögen, aber Websites sind in erster Linie User Interfaces, also grafische Benutzeroberflächen. Das ist es zumindest, was ihren großen Vorteil gegenüber vielen anderen Medien ausmacht. Erst so ist es möglich einen personalisierten Informationsaustausch zwischen dem Website-Nutzer und System zu ermöglichen.

Weiter ist es kein Geheimnis, dass die Anzahl der möglichen Interface-Elemente optisch zwar unendlich groß sein mag, aber logisch deutlich beschränkt ist. Da gibt es Formulare und Hyperlinks in den verschiedenen Ausprägungen, von Suchfeldern über Thumbnails bis zu den deutlich umstrittenen Tagclouds. Aber alles in allem sind die im Kern immer wieder verwendeten Elemente, in ihrer Anzahl durchaus zu überblicken. Darum ist es nicht gerade dumm, wenn man auch bei den Web Interfaces auf die in der Informatik lange bewährte Methode der Entwurfsmuster zurückgreift.

Und genau das macht die Website UI-patterns.com. Hier gibt es in einer Bibliothek für die gängigsten Interface-Elemente praktische Standard-Lösungen, die einem das Leben als Web-Entwickler durchaus erleichtern können.

schließen