webthreads.de - Web 2.0, Web-Entwicklung und Netzkultur von Markus Kühle

Yahoo! Design Pattern Library die Zweite

In einem Artikel im Februar wurde schon über die Yahoo! Design Pattern geschrieben weil Yahoo! ihre User Interface Libraray und die in der eigenen Entwicklung angefallenen Probleme in der User Interface Design Pattern Library veröffentlicht haben. Yahoo! hatte damals angekündigt neue Design Pattern monatlich hinzuzufügen. Nach einiger Wartezeit hat Yahoo! in der letzten Nacht viele neue Design Patterns online gestellt.
Design Pattern beschreiben eine optimale Lösung für ein bestehendes Problem in einem bestimmten Kontext. Die Yahoo! Design Pattern beschreiben Lösungen für typische Probleme in der Web Entwicklung. Dabei ist die Technik, mit der die Design Pattern umgesetzt werden, erst einmal nicht relevant. Mehr zu “Was ist ein Pattern” kann hier nachgelesen werden.

Viele der neuen Design Pattern von Yahoo! können in die zwei Bereiche Invatiation Pattern und Transition Pattern eingeordnet werden.

Die Invatiation Pattern beschäftigen sich damit dem User einen Hinweis zu geben, dass ein interaktives Feature existiert. Darunter fallen zum Beispiel die Pattern Tool Tip Invitation oder Drop Invitation.

Yahoo! Invitation Design Pattern

Während die Tool Tip Invitation Pattern mehr oder weniger aus den bisherigen Zeiten des Webs bekannt sind ist das Drop Invitation Pattern neu. Drag und Drop im Browser wird immer mehr zu einer Standardkomponente, so dass ein richtiger und sinvoller Umgang mit Drag und Drop sehr nützlich sind. Ein Hinweis für den richtigen Umgang mit Drag und Drop ist die “Drop Einladung”. Dem User soll angezeigt werden wohin er ein gerade “gedraggtes” Objekt ablegen kann.

Die Transition Pattern beschäftigen sich mit den visuellen Übergängen von einem Zustand der Seite in einen Anderen. Es soll dem User angezeigt werden, dass etwas passiert oder das eine Aktion gestartet wurde die etwas auf der Seite verändert.

Yahoo! Transition Design Pattern

Dieser Bereich von Design Pattern hat seit Ajax einen immer höheren Stellenwert. War doch bisher allein der Browser dafür zuständig anzuzeigen, dass sich der Zustand ändert indem eine neue Seite geladen wurde oder der Ansatz “Animationen haben nichts auf ordentlichen Webseiten zu suchen” weit verbreitet. Durch die Verwendung Rich User Interfaces wie Drag und Drop oder Sliders im Zusammenspiel mit Ajax sind visuelle Effekte eng mit der Usability für den User verknüpft. Es sollte allerdings noch darauf hingewiesen werden, dass visuelle Effekte auch überdimensioniert und somit abschreckend sein können. Für die Usability sind allerdings Animationen im geringen Rahmen für interaktive Anwendungen ein Muss.
Schöne Patterns sind zum Beispiel das Self Healing Transition Pattern um anzuzueigen, dass ein Element auf der Seite entfernt wird oder das Splotlight Transition Pattern um anzuzeigen wo der User sich gerade im Formular befindet.

Als letzten Punkt soll noch auf die Auto Complete Pattern hingewiesen werden, welches auch neu hinzugekommen ist. Eines der wahrscheinlich häufigsten verwendeten Beispiele ist das Auto Complete bei Eingabefeldern.

Yahoo! Auto Complete Design Pattern

Tatsächlich ist dieses Feature für eine Anwendung eine sehr nützliche Erweiterung, wenn es an sinvollen Stellen eingesetzt wird. Auf der ajaxpatterns.org Seite wird dieses Pattern “Suggestion” genannt.
Nach dem Auto Complete Pattern und dem Module Tab Pattern wurde schon recht früh im der Yahoo! Design Pattern Discussion Group gefragt. Es lohnt sich also dort seine Anfragen loszuwerden ;).

Insgesamt als Fazit kann man sagen, dass Yahoo! eine sehr gelungene Design Pattern Library mit ausführlichen Erläuterungen mit Beispiel Animation bereitstellt. Dabei ist in erster Linie egal welche Library oder Sprache für die Umsetzung genutzt wird. Natürlich bietet Yahoo! auch gleich ihre passende User Interface Libray mit den entsprechenden Modulen an und verweist an einigen Stellen in den Design Pattern auch darauf aber generell sind die Patterns erst einmal unabhängig. Eine kleine Einführung in die Yahoo! User Interface Library kann in dem Turial “Die Drag and Drop Komponente der Yahoo! User Interface Library” gefunden werden.
Um das Geschehen weiter zu Verfolgen lohnt es sich auch den Yahoo! User Interface blog vorbei zu schauen. Es werden wohl in der nächsten Zeit noch einige Design Pattern hinzugefügt.

Ähnliche Artikel, die dich interessieren könnten:

    None Found

Ein Kommentar zu 'Yahoo! Design Pattern Library die Zweite' »»


Kommentare


Trackbacks & Pingbacks »»

  1. [...] Yahoo! letzte Nacht ihre neue Homepage als Beta veröffentlicht. Dass interessante dabei ist, dass diese neue Homepage unter Verwendung der Yahoo User Interface Library und der Yahoo! User Interface Design Pattern entstanden ist, die erst kürzlich erweitert wurde. Man kann somit neben den gegebenen Beispielen in der Dokumentation für die Bibliothek und die Patterns auch direkte Implementierungen als Beispiel ansehen. Auf dem Yahoo! User Interface Blog wird beschrieben, dass nur notwendiger Code geladen wird: “download-on-demand”. Durch die Größe der Bibliothek ist ein solches Vorgehen meiner Meinung nach auch sehr zu empfehlen. Auch sehr interessant ist, dass Yahoo! sehr auf die Verwendung von JSON setzt. JSON ist die leichtgewichtige Alternative für den Datentransfer mit Ajax und bisher nicht ganz so populär wie XML. [...]

Hinterlasse ein Kommentar »»

Bad Behavior has blocked 1474 access attempts in the last 7 days.