Der magische Button

Vor einigen Tagen habe ich ein paar Gedanken zu den neuen Funktionen in GMail notiert. Mit den beschriebenen neuen „Move to“ und Multiple-View Implementierungen zog zeitgleich ein neuer Buttontyp in das E-Mail Produkt ein.

Douglas Bowman, Lead Design bei Google beschreibt in seinem Artikel Recreating the button sehr ausführlich die Hintergründe, die zu diesem neuen, zentralen Element geführt haben, das künftig Einzug in viele weitere Produkte im Google Portfolio halten wird:

Today’s web apps allow increasingly complex interactions. Users can view, create, manage, and manipulate all kinds of data, from email messages to feeds to photos to blog posts, or even choosing what their DVR records on any given night. We’re at the point where these apps need something beyond standard HTML form controls and basic hypertext links to represent the actions a user can take.

btn20Grundsätzlich bin ich starker Befürworter für die Verwendung von Buttons und Systemelementen des Browsers. Zahlreiche Tests in denen ich die
Reaktion von Probanden auf eine Version mit grafischen Buttons im Vergleich zu der Variante mit systemnahen Schaltflächen beobachten konnte, zeigten sehr eindeutig, dass die den Nutzern bekannten und täglich verwendeten Buttons viel vertrauter und somit eindeutiger wirken. Das natürlich insbesondere, wenn sie sinnvoll und nachvollziehbar beschriftet sind.

Nun ist aber Googles neuer „Custom Button“ optisch sehr eng an die Haptik der HTML Buttons in den meisten Browsern angelehnt, so dass die Umstellung der Nutzer nur gering ist – viele werden es womöglich nicht merken.

btns-gmail

Das Entscheidende ist aber, dass das neue Element (das übrigens auf jedwede Grafik verzichtet und ausschließlich über CSS gestylt wird) Funktionen bietet, die über die der Standardelemente hinausgehen. Und wer sich mit der Gestaltung von Webapplikationen befasst weiß, dass es immer wieder Fälle gibt, in denen das erforderlich oder sogar unumgänglich ist. Und spätestens in diesem Moment ist es dann unvermeidbar, den eigentlich probateren Weg der Standardelemente zu verlassen.

Es mag durchaus sinnvoll sein, sich mit der Dokumentation dieses neuen Custom Buttons näher zu befassen – vielleicht entsteht hier ein Standard, dessen Nutzung in der Gestaltung neuer Applikationen zumindest in Betracht gezogen werden sollte…

Kommentare (17)

  1. Dein Link verweißt auf die Version 3.0 – die Version benutzt jedoch noch Hintergrundgrafiken. Erst in der Version 3.1 wird pures CSS verwendet. (http://stopdesign.com/eg/bu...) – Die Version ist jedoch so dargestellt nciht einsatzfähig, da sie zum Beispiel im IE nicht richtig dargestellt wird.

    Ich persönlich finde die Idee mit den CSS-Buttons toll, das viele Markup was dafür verwendet wird ist jedoch fast gleichwertig mit einer Grafik, oder?

    • Danke für den Hinweis, ich habe den Link korrigiert.

      Was mich vielmehr wundert (siehe auch die Diskussion in den Kommentaren bei Douglas Bowman) ist die Umsetzung als DIV und nicht als BUTTON Element.

      Gegen den Verzicht auf grafische Elemente habe ich wenig einzuwenden – das ist dann wohl eher die Frage nach der Reduktion, der zu übetragenden Dateien. Und das dürft CSS schneller sein…

  2. Ich schätze wegen Crossbrowserkompatibilität – http://stopdesign.com/archi...

    Der IE (auch 6) ist eben ein sehr weit verbreiteter Browser und daran wird sich in nächster Zeit nicht allzuviel ändern (trotz Chrome).

    Lange Zeit war Google Startseite auch als Tabelle angebildet, erst als die Benutzerleiste hinzukam gab es neuen Code. Ich denke die alten Browser renden einfach die „einfachen alten“ Dinge viel viel schneller.

  3. Schade….
    „To see the final code we ended up using in Gmail and Reader, you’ll have to reverse engineer the button code in one of those products.“

    Warum veröffentlicht Google so etwas nicht?? Ist ja fast wie bei M$…

    • Das finde ich auch etwas ärgerlich – insbesondere da der Code ja online ist.

      Müsste sich nur jemand die Mühe machen, ihn zu extrahieren…

  4. Ich habe mir den Artikel bereits gestern gespannt durchgelesen und war begeistert über die Kreativität und Innovation, die die Jungs von Google da an den Tag gelegt haben. Das Konzept des Button 3.1 ist meiner Meinung nach ebenso genial wie einfach.

    Das etwas „Mehr“ an Code, dass man schreiben muss, finde ich wirklich ertragbar, da sich die Anzahl an Buttons pro Webprojekt ja in der Regel wirklich im Rahmen hält.

    Wenn jetzt noch ein paar findige Code die Zeit und Muse haben sich einen passenden Workaround für unser aller Liebling, den IE zu basteln, dann bin ich glücklich! :)

    Grüße aus Köln,
    Oliver

  5. Hmm, irgendwie verwirren die Tweetbacks, wenn sie zwischen den Kommentaren angezeigt werden. Vielleicht wäre es sinnvoller, sie oben oder unten zu sammeln?

    • Ja, findest Du? Aber so sind sie in der richtigen Chronologie. Nicht, dass das immer wichtig wäre – manchmal aber schon…

      • Hab es ehrlich gesagt erst gar nicht verstanden, sondern mich gewundert, wieso da so viele einen Link zu dem Artikel als Kommentar posten… ;-)

  6. Da ist wiederum etwas dran. Vielleicht sollte man auf diesen Umstand bei den Tweetbacks hinweisen. Ich denke mal darüber nach :-)

  7. Habe ich das richtig verstanden, dass ich die Buttons nicht in meine Designs einbinden darf?

Kommentare sind geschlossen.