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.
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.
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.
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.



