webentwicklung-frage-antwort-db.com.de

Ein Button mit einem Link: verständlich oder verwirrend?

Ich arbeite an einem Design einer Touchscreen-Version einer Webanwendung. Da es sich um einen Touchscreen handelt, möchte ich, dass alle anklickbaren Elemente ziemlich groß und leicht zu tippen sind (es ist ein einfacher Kiosk, sodass Multitouch und Zoom nicht funktionieren).

Der Standard-Hyperlink ist gut erkennbar, aber eher klein:

enter image description here

Der Knopf könnte viel größer sein:

enter image description here

Das Problem ist jedoch, dass normalerweise Schaltflächen für einige Aktionen und Links für die Navigation verwendet werden. Und als ich dachte: Was ist, wenn ich einen Link auf einen Button wie diesen setze:

enter image description here

Und wenn ich einen solchen Hybrid für die Navigation verwende, würde er funktionieren? Ist es ein Link mit einem großen anklickbaren Bereich oder ist es nur etwas Verwirrendes und Desorientierendes? Was denken Sie?

11
Kostya

Meiner Meinung nach sollten Sie verwenden Sie den Button-Ansatz, wenn der Link nicht in Text/Satz, Absatz/platziert ist. Das heißt - verwenden Sie den Schaltflächenhintergrund und die Linkfarbe, aber ohne Unterstreichung - diese Art des Mischens/unterstrichenen Textes in einer Schaltfläche/ist für erfahrene Benutzer verwirrend.

Der Endbenutzer macht jedoch selten einen Unterschied zwischen Link und Schaltfläche.

6
Yordanov

Da es sich um Touchscreens im Kiosk-Stil handelt und der Touch-Bereich ziemlich groß ist, können Sie nicht nur Text verwenden. Vielleicht ein großer Knopf mit einem passenden Symbol?

Button example with expanded text and icon

(Entschuldigen Sie das grobe Design, ich habe hier keine Möglichkeit, anständige Bilder zu machen).

Diese Methode zeigt deutlich, dass es sich um eine Schaltfläche handelt, und der zusätzliche verfügbare Realestate kann verwendet werden, um dem Benutzer mehr Informationen bereitzustellen, damit er weiß, was die Schaltfläche tatsächlich tut.

5
JonW

Nach meiner Erfahrung ist es den Leuten egal, ob Sie Links oder Schaltflächen anzeigen, wenn sie dadurch nicht nachdenken. Die meisten visuellen Anzeigen verfügen beispielsweise über Schaltflächen, obwohl sie als Links fungieren.

Die Herausforderung besteht darin, dass Sie eine Seite haben, auf der Sie beide verwenden müssen. In diesem Fall benötigen Sie eine klare Hierarchie zwischen der primären Aktionsschaltfläche und den sekundären Links/Schaltflächen. Trotzdem können Sie dies durch Dimensionierung, Styling und Positionierung erreichen.

Und noch etwas: Sie können den Touch-Bereich immer größer als den Text machen. Dies behält Ihre visuelle Hierarchie bei und bietet auch eine gute Benutzerfreundlichkeit.

4
Zoltán Gócza

Ich finde eine Schaltfläche mit unterstrichenem Text ziemlich verwirrend. Vielleicht ist es besser, eine Schaltfläche mit einem Pfeil zu verwenden, der die weitere Navigation anzeigt.

Ein sehr wichtiger Faktor wäre auch der tatsächliche Text auf der Schaltfläche. Wenn die Schaltfläche "Gehe zu Google" lautet, ist die Aktion ziemlich offensichtlich. Wenn es lieber "Suchen" lauten würde, würde der Benutzer die Weiterleitung zu einer Webseite nicht erwarten.

2
Jozef

Die 'Tag-Links' auf dieser Seite sind ein großartiges Beispiel für einen Link (im Markup), der sich wie ein Link verhält (zeigt eine andere Seite anstelle der aktuellen an, ohne weitere Nebenwirkungen), aber ist sehr ähnlich wie ein Knopf gestylt.

Ich denke, normalerweise macht der Kontext vollkommen Sinn, so dass beispielsweise etwas, das sogar vage wie eine Schaltfläche in einem Formular aussieht, als Schaltfläche interpretiert wird. Etwas, das vage einem Link außerhalb eines Formulars ähnelt, wird als Link interpretiert. Daher wäre ich immer sehr vorsichtig, wenn ich einen Link in ein Formular einfügen würde.

Ich denke, es ist vernünftig, den Berührungs-/Klickbereich eines Links anzugeben, insbesondere auf einem Touchscreen-Gerät, das nicht das Äquivalent von: Hover hat. Das Hinzufügen eines subtilen Hintergrunds zu einem Link erscheint mir daher vernünftig.

2
Bobby Jack

Denken Sie daran, für welches Medium Sie entwerfen - Touch, keine Maus. Haben Sie einige Personen beobachtet, die mit einem Kiosk interagieren, oder Best Practices für das Design von Touch-Geräten überprüft?

Links sind gut für die Mausinteraktion, da Menschen mit einer Maus eine hohe Genauigkeit haben.
Tasten eignen sich gut für die Interaktion mit Fingern (Berührungen), da sie einen größeren Zielbereich zum Schlagen bieten.

  • Erstens möchten wir, dass Ihr Benutzer klicken kann - meine Meinung: Verwenden Sie die Schaltfläche (größeres Ziel für dicke Finger)
  • Zweitens muss der Benutzer verstehen, was passieren wird, wenn er klickt, bevor er/sie klickt. Der Schaltflächentext ist also wichtig.

Nach dieser Diskussion denke ich, dass es nicht so wichtig ist, den Text zu unterstreichen oder nicht, als ein großes Ziel für ungeschickte Finger und beschreibenden Text bereitzustellen, der die Benutzer anleitet.

2
JeroenEijkhof

Ich denke, dass es mehr als in Ordnung ist, sie zu kombinieren.

Stellen Sie einfach sicher, dass die gesamte Schaltfläche in einem Link enthalten ist. Auf diese Weise können Sie, wenn der Benutzer irgendwo auf der Schaltfläche schwebt, das richtige Schwebefeedback aktivieren (z. B. unterstreichen).

Siehe diesen Screenshot für ein Beispiel aus der aktuellen iPhone-Seite von Apple.

2
eknown

Ich stimme Ihnen voll und ganz zu, dass wir eine wichtige Gelegenheit zur Kommunikation verlieren mit unseren Benutzern sind, wenn wir weiterhin Links und Schaltflächen austauschbar für Navigations- und Befehlsaktionen verwenden. Um zwischen Navigation und Befehlen zu unterscheiden, möchte ich die Steuerelemente für Befehle so schaltflächenartig wie möglich gestalten:

  • Beschriftung mit schwarzem Text.

  • Schattierter Hintergrund im Kontrast zum Arbeitsbereich.

  • "Erhöhter" 3-D-Look.

Und lassen Sie die Steuerelemente für die Navigation so linkartig wie möglich aussehen, während Sie dennoch eine Möglichkeit finden, eine große Ziel-Hotzone für Touchscreens abzugrenzen:

  • Beschriftung mit farbigem Text.

  • Unterstrichen.

  • Weißlicher Hintergrund in der gleichen Farbe wie der Arbeitsbereich.

  • So subtile Markierung der Hot-Zone-Grenzen, wie Sie nur können.

Für die letzte Kugel würde ich eine Art „offene“ Markierung versuchen und mich auf das Gestaltverschlussprinzip verlassen, um sie als rechteckige Zielheißzone erscheinen zu lassen. Versuchen Sie beispielsweise, den Link mit folgenden Elementen zu umgeben:

  • Große Klammern.

  • Ecken des Hot-Zone-Rechtecks ​​(aber stellen Sie sicher, dass diese nicht mit Auswahlgriffen verwechselt werden).

  • Horizontale Regeln oben und unten.

Der letzte kann die Notwendigkeit beseitigen, den Text zu unterstreichen, da die untere Regel eine Unterstreichung vorschlägt, obwohl zwischen dem Text und der Regel eine große Lücke besteht. Dadurch werden Ihre Link-Labels beim Booten auch besser lesbar.

1