Wie kann ich sicherstellen, dass Benutzer glauben, dass eine Schaltfläche anklickbar ist?

Ich musste eine Seite mit ein paar Links erstellen, also dachte ich, ich würde versuchen, die Links groß und dekorativ zu gestalten:

Aber ich stieß auf das Problem, dass die Leute nicht merkten, dass es sich um einen Knopf handelte, und deshalb nicht wussten, worauf sie klicken sollten. Es ist offensichtlich, dass so etwas ein Knopf ist:

Meine Frage ist: Wie kann ich meine Schaltflächen so gestalten, dass sie offensichtlich anklickbar sind?

Dies ist nicht wirklich eine "Grafikdesign" -Antwort, aber Sie möchten möglicherweise auch sehen, ob Sie den Text ändern können. In Ihren Beispielen denke ich nicht, dass die Kunst der Schaltfläche "Installieren" besonders knopfähnlicher ist als die Ihrer Outlook-Schaltfläche. Der Text darauf ist jedoch ein bekanntes Verb, daher ist er mit der Ausführung einer Aktion verbunden. Ebenso kann "Outlook starten" mehr Klicks anziehen als nur "Outlook".

Vom grafischen Standpunkt aus (und weiter zu den Kommentaren von jhocking & happycypher) könnten Sie einige andere Dinge ausprobieren:

• Lassen Sie die Kanten beim Schweben leuchten
• Ändern Sie die Hintergrund- / Rahmenfarbschemata beim Schweben
• Fügen Sie einen subtilen Schatten hinzu (mit oder ohne Abschrägung der Oberfläche), damit die Schaltfläche von der Seite angehoben erscheint
• Fügen Sie neben dem Text ein kleines Symbol hinzu, um anzugeben, welche Aktion ausgeführt werden soll (wenn ich 'Outlook' verwende, was mache ich dann?)
• Platzieren Sie Ihre Schaltfläche an einer Stelle, an der normalerweise andere Schaltflächen auf Ihrer Website platziert sind
• Passen Sie das Schaltflächenthema an andere Navigationslinks / Schaltflächen auf der Site an.

Sie können auch versuchen, unter UX nach anderen UI-zentrierten Gedanken zu fragen .

Der Schlüssel hier ist die Erschwinglichkeit - visuelle Hinweise für den Benutzer, um das Verhalten und den beabsichtigten Gebrauch von etwas aus der Ferne bestimmen zu können - bevor er damit interagiert - wie eine flache Platte an einer Tür Push und ein Griff Pull sagt.

Sehen Sie hier für meine eigenen Beispiele für affordance.

Die Hauptmerkmale sind abgeschrägte Kanten und Verlaufsfüllungen für ein 3D-Gefühl und gegebenenfalls mit deutlichen, schattierten Kanten, die auf eine echte erhabene und abgerundete Schaltfläche hinweisen, bei der Sie das Gefühl haben, sie drücken zu wollen, kombiniert mit einem klaren Aufruf zum Handeln wie z entsprechendes Etikett und / oder gut gewähltes Symbol. Beachten Sie, dass abgerundete Ecken freundlicher sind und quadratische Ecken für das Auge hart erscheinen.

Siehe mein Tutorial zum Erstellen einfacher Metall- und Glanz- / Glaseffektschaltflächen mit Inkscape.

Fasen Sie die Grafik ab, damit sie dreidimensional aussieht.

Sie sollten zwei Arten von Bildern verwenden, von denen eines aktiv ist und eines normal ist. Der normale Zustand sieht etwas geprägt aus

Anhängen einer SS und sehen, wie sie verschiedene Statistiken einer Schaltfläche klären,

und wenn der Benutzer auf Ihre Schaltfläche steigt und den Cursor ändert, fühlt er sich wie ein Link an. Wenn möglich, können Sie mit einem kleinen Klick hier schreiben, um ihn zu installieren. Oder Sie können diese Schaltfläche mit Hilfe eines Pfeils oder ähnlichem zeigen ...

Sehen Sie, wie andere dort Schaltflächen zum Herunterladen / Installieren anzeigen.

Befolgen Sie dieses Tutorial, um so gut aussehende Schaltflächen zu erstellen

• Erstellen Sie eine glänzende Download-Schaltfläche
• zum Erstellen einiger attraktiver Schaltflächen ...

Ich denke, die Farbe und der Rahmenstil Ihrer Schaltfläche sind nicht das Hauptproblem Ihrer Schaltfläche. Es könnte sein, dass es zu groß ist! Es sieht eher aus wie ein Wort / Titel in einem Frame als wie eine Schaltfläche. Versuchen Sie, es etwas kleiner zu machen, damit der Text darin ausgefüllt wird (zumindest für die Höhe).

Wie andere gesagt haben, wird es auch hilfreich sein, wenn es beim Mouseover irgendwie herausspringt.

Warum unterstreichen Sie nicht den Text auf der Schaltfläche (oder machen ihn sogar blau) - auf diese Weise wird er als Link wahrgenommen und Benutzer wissen, dass ein Klick sie irgendwohin bringt.