Buttons, Links und die drei Punkte...

Wann verwendet man Buttons und wann Links?

So einfach sich diese Frage auch anhört. Diese Frage ist eine berechtigte Frage. Im UI-Design ist dies ein bestimmtes Muster, welches einer genauen Definition folgt.

• Links sollten keine unerwünschten Nebeneffekte erzeugen, wenn man auf diese klickt. Links sind dafür gedacht, um auf andere Ansichten und Seiten zu verweisen.
• Buttons sollten immer auf Aktionen verweisen, die eigentlich per Definition Nebeneffekte erzeugen. Das Klicken von Buttons dient immer dazu, Veränderungen an Ressourcen vorzunehmen. (eintragen, ändern, löschen, abschalten, einschalten, ok, abbrechen, speichern, ..)

Diese Definition sollte bei der Entwicklung von Benutzeroberflächen immer konsequent beachtet werden. Dem Benutzer der Anwendung macht es die Interpretation der Benutzeroberfläche auf jeden Fall erheblich leichter.

Leider wird dieses Muster beim Umsetzen von modernen Weboberflächen nicht immer optimal eingehalten. Man sieht sehr oft in Webanwendungen das Links als Auslöser für Aktionen missbraucht werden. Es werden z.B. öfters mal Links eingesetzt zum Abschicken von Formularen oder löschen von Daten. Dies ist meistens ein Usability-Killer und sollte daher vermieden werden.

Natürlich gibt es, wie immer im Leben, auch hier einige kleinere Ausnahmen, wann man doch besser auf Links zurückgreifen sollte.

Beispiel einer Ausnahme

Eine Ausnahme kann man z.B. bei der Umsetzung von Formulare machen, bei den mehrere Aktionen auslösen können. Anstatt für die primäre und sekundäre Aktion jeweils ein Button zu benutzen, könnte man für die sekundäre Aktion auch ein Link benutzen. Dies ist aber auch speziell vom Design der Oberfläche und dem vorhandenen Platz abhängig.

WordPress z.B. benutzt auf seiner Administrationsoberfläche für die sekundäre Aktion bei einigen Formularen auch nur Links anstelle von Buttons.

Dies kann man beim Formular sehen, wo man Beiträge schreibt bzw. bearbeitet. Die Aktion „In den Papierkorb legen“ ist z.B. nur mit einem Link umgesetzt. Hier bietet es sich an, weil diese Aktion zwar zum Kontext gehört, aber nicht zum Formular. Es soll auch nicht so sehr vom primären Button ablenken, der ja am häufigsten hier benutzt wird.

Was bedeuten die drei Punkte "..."

Man merkt sie kaum, aber sie sind da. Bei einigen Menüs, Buttons und Links sieht man hin und wieder drei Punkte am Ende stehen.

Die drei Punkte „…“ haben in der Usability (und allgemein im UI/UX-Design) eine recht klare Bedeutung. Sie stehen dabei für eine unvollständige Aktion. Das bedeutet, es folgt noch ein weiterer Schritt, bevor die eigentliche Aktion ausgeführt wird.
Die drei Punkte helfen also den Nutzern, vorherzusehen, was passiert. Das stärkt Predictability, ein wichtiges UX-Prinzip.

Beispiele:

• „Speichern unter…“ - Es öffnet sich ein Dialog, in dem du zuerst einen Dateinamen wählen musst.
• „Exportieren…“ - Noch weitere Optionen (Format, Zielort etc.) erscheinen.
• „Einstellungen…“ - Es öffnet sich ein Fenster, in dem Einstellungen vorgenommen werden.

Interpretation:

• „Löschen…“ wäre korrekt, wenn zuerst „Wirklich löschen?“ kommt.
• „Löschen“ ohne Punkte heißt: direkt löschen, ohne Nachfrage.

Kurz gesagt:

• Es folgt ein weiterer Schritt, bevor die eigentliche Aktion ausgeführt wird.
• Keine sofortige (irreversible) Aktion
• Es kommt zuerst ein Dialog, eine Auswahl oder eine Nachfrage.