Buttons: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
|||
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
Buttons sind speziell designte Mikrobanner und gehören zu den [[Plugins]]. Sie werden z.B. von Bloggern eingesetzt, um zu Diensten oder Gruppen zu verlinken, bei denen sie Mitglied sind. Man kann sich individuelle Buttons bauen oder auf Sammlungen fertiger Buttons zurückgreifen. | Buttons sind speziell designte Mikrobanner und gehören zu den [[Plugins]]. Sie werden z.B. von [[Blogger|Bloggern]] eingesetzt, um zu Diensten oder Gruppen zu verlinken, bei denen sie Mitglied sind. Man kann sich individuelle Buttons bauen oder auf Sammlungen fertiger Buttons zurückgreifen. | ||
'''Buttons''' | |||
Buttons sind heutzutage im world wide web nicht mehr wegzudenken. | |||
So ziemlich jede Shoppingseite, sämtliche Social-Media-Portale, bis hin zu Nachrichtenseiten, verwenden die unterschiedlichsten Button Varianten. | |||
Diese kleinen interaktiven Elemente werden jeden Tag hundertfach von Usern angeklickt. | |||
Buttons entwickeln sich mit der Veränderung vom Webdesign immer weiter. | |||
Webseitenentwickler nutzen gerne und oft diese kleinen Schaltflächen mit dem Ziel, dass der User sie schnell als solche erkennt und diese Schaltfläche auch unkompliziert und intuitiv nutzen kann. | |||
'''Die Evolution des Buttons''' | |||
Button kommt aus dem englischen und heißt soviel wie "Knopf". | |||
Wir Menschen haben schon von klein auf gelernt Knöpfe zu bedienen und das diese Bedienung zu einem Ergebnis führt. | |||
Drückt man bei einem Kinderspielzeug auf den Button mit der Kuh, gibt dieses den Laut einer Kuh wieder. | |||
Später dann drücken wir die Buttons auf der Fernbedienung und der Fernsehkanal ändert sich. | |||
Auf vielen Geräten und Fahrzeugen begegnen wir im Alltag ständig Buttons, die wir intuitiv bedienen und damit eine Aktion hervorrufen. | |||
Zum Beispiel der Taschenrechner, Mixer, Staubsauger, Funktionen im Auto Cockpit und Buttons am Bankautomaten und vieles mehr. | |||
Da macht es Sinn, dieses gelernte Verhalten von Menschen auch in das Webdesign einzubauen, indem diese Buttonschaltflächen auch aussehen wie Knöpfe. | |||
'''Das Design''' | |||
Mit den unterschiedlichsten Farben und Schattierungen, sollen sie sich von den restlichen Content Elementen unterscheiden. | |||
Das Design dieser Schaltfläche sollte möglichst auffällig, aber einfach sein. | |||
Dem User soll es am sofort ins Auge fallen und er soll auch auf den ersten Blick wissen, was er damit bewirkt, wenn er diesen Button anklickt. | |||
Daher sind auffällige Farben und vor allem kurze, sowie prägnante Schlagwörter wichtig. | |||
In der Marketingbranche ist im Zusammenhang mit Buttons auch die Rede von " [[Call to Action]]" (CTA). | |||
Auch die Beschriftung des Buttons sollte daher einen Aufforderungscharakter haben. | |||
Mit passiven Formulierungen wird bei Usern wenig Aufmerksamkeit erregt. | |||
Auffälliger sind Handlungsaufforderungen im Imperativ, wie zum Beispiel „buchen", „bestellen", „finden". | |||
Im Zusammenhang mit Zeitwörtern, wie zum Beispiel „jetzt", „gleich", „heute", wird auch noch eine Dringlichkeit suggeriert. | |||
Die Farbe sollte natürlich auffallen, aber auch zur Webseite passen und aus dem Corporate Design entspringen. | |||
Die Farbauswahl sollte dem direkten Umfeld angepasst sein und als Komplimentärfarben gestaltet werden. | |||
Zu grell und bunt wirkt schnell unprofessionell. | |||
Bei der Größe des Buttons ist dabei zu beachten, dass für mobile Endgeräte die Buttons etwas größer gestaltet werden sollten, da diese Schaltfläche mit den Fingern bedient wird. | |||
Bei Desktopversionen können sie auch kleiner sein. | |||
'''Button Variationen''' | |||
Ghost Buttons: Unter Ghost Buttons versteht man eine Schaltfläche, dessen Designkonzept auf ein Minimum reduziert ist. | |||
Der Button hat meist keine Hintergrundfarbe, sondern Transparenz und nur einen nur sehr dezent dünnen Rand. | |||
Man kann den Ghost Button auch so programmieren, dass er erst eine Farbe erhält, wenn der User mit der Mouse über das Icon hovert. | |||
'''Der Placebo Button''' | |||
Der Mensch ist so konzipiert, dass er gerne sein Handeln und Umfeld kontrollieren möchte. | |||
Dies gibt ihm das Gefühl von Sicherheit und Kontrolle. | |||
Und genau aus diesem Grund gibt es den Placebo Button. | |||
Er soll dem User den Eindruck vermitteln, dass er beim drücken dieser Schaltfläche irgendetwas beeinflussen könnte. | |||
Dem ist aber nicht so! | |||
Zum Beispiel haben [[cloud]]-basierende Dienste oft einen „speichern" Button. | |||
Dieser ist allerdings vollkommen unnötig, da Clouds mittlerweile jede Änderung in Echtzeit automatisch speichern. | |||
Auch [[Facebook]] nutzt einen Placebo Button. | |||
Möchte der [[User]] seinen [[Account]] löschen, betätigt er den Deaktivieren-Button. | |||
Gelöscht werden die Daten jedoch nicht. | |||
Der User hat aber das Gefühl zu bestimmen, was mit seinen Daten passiert. | |||
'''Flat Buttons''' | |||
Flat Buttons setzen ganz auf das Prinzip „weniger ist mehr". | |||
Das Design soll auf das wesentliche reduziert sein. | |||
Es werden auf Schatten, Verläufe, oder Perspektiven verzichtet. | |||
Derzeit liegt das Flat Design sehr im Trend. | |||
Das Gesamtbild wird durch dieses reduzierte [[Design]] leichter. | |||
== Weblinks == | == Weblinks == | ||
* [http://www.kalsey.com/tools/buttonmaker Individuelle Buttons bauen] | * [http://www.kalsey.com/tools/buttonmaker Individuelle Buttons bauen] | ||
* [https://microbuttons.wordpress.com/ Sammlung fertiger Buttons des Berliner Designers Markus Angermeier alias Kosmar] | * [https://microbuttons.wordpress.com/ Sammlung fertiger Buttons des Berliner Designers Markus Angermeier alias Kosmar] | ||
[https://praxistipps.chip.de/html-button-erstellen-so-gehts_39785 Button selber erstellen] | |||
<ref>https://usersnap.com/de/blog/buttons-design/</ref> | |||
<ref>https://www.profi-homepage.de/das-klickt-buttons-erfolgreich-gestalten/</ref> | |||
<ref>https://www.golem.de/1101/80997.html</ref> |
Aktuelle Version vom 29. August 2020, 18:37 Uhr
Buttons sind speziell designte Mikrobanner und gehören zu den Plugins. Sie werden z.B. von Bloggern eingesetzt, um zu Diensten oder Gruppen zu verlinken, bei denen sie Mitglied sind. Man kann sich individuelle Buttons bauen oder auf Sammlungen fertiger Buttons zurückgreifen.
Buttons
Buttons sind heutzutage im world wide web nicht mehr wegzudenken. So ziemlich jede Shoppingseite, sämtliche Social-Media-Portale, bis hin zu Nachrichtenseiten, verwenden die unterschiedlichsten Button Varianten. Diese kleinen interaktiven Elemente werden jeden Tag hundertfach von Usern angeklickt. Buttons entwickeln sich mit der Veränderung vom Webdesign immer weiter. Webseitenentwickler nutzen gerne und oft diese kleinen Schaltflächen mit dem Ziel, dass der User sie schnell als solche erkennt und diese Schaltfläche auch unkompliziert und intuitiv nutzen kann.
Die Evolution des Buttons
Button kommt aus dem englischen und heißt soviel wie "Knopf". Wir Menschen haben schon von klein auf gelernt Knöpfe zu bedienen und das diese Bedienung zu einem Ergebnis führt. Drückt man bei einem Kinderspielzeug auf den Button mit der Kuh, gibt dieses den Laut einer Kuh wieder. Später dann drücken wir die Buttons auf der Fernbedienung und der Fernsehkanal ändert sich. Auf vielen Geräten und Fahrzeugen begegnen wir im Alltag ständig Buttons, die wir intuitiv bedienen und damit eine Aktion hervorrufen. Zum Beispiel der Taschenrechner, Mixer, Staubsauger, Funktionen im Auto Cockpit und Buttons am Bankautomaten und vieles mehr. Da macht es Sinn, dieses gelernte Verhalten von Menschen auch in das Webdesign einzubauen, indem diese Buttonschaltflächen auch aussehen wie Knöpfe.
Das Design
Mit den unterschiedlichsten Farben und Schattierungen, sollen sie sich von den restlichen Content Elementen unterscheiden. Das Design dieser Schaltfläche sollte möglichst auffällig, aber einfach sein. Dem User soll es am sofort ins Auge fallen und er soll auch auf den ersten Blick wissen, was er damit bewirkt, wenn er diesen Button anklickt. Daher sind auffällige Farben und vor allem kurze, sowie prägnante Schlagwörter wichtig. In der Marketingbranche ist im Zusammenhang mit Buttons auch die Rede von " Call to Action" (CTA). Auch die Beschriftung des Buttons sollte daher einen Aufforderungscharakter haben. Mit passiven Formulierungen wird bei Usern wenig Aufmerksamkeit erregt. Auffälliger sind Handlungsaufforderungen im Imperativ, wie zum Beispiel „buchen", „bestellen", „finden". Im Zusammenhang mit Zeitwörtern, wie zum Beispiel „jetzt", „gleich", „heute", wird auch noch eine Dringlichkeit suggeriert. Die Farbe sollte natürlich auffallen, aber auch zur Webseite passen und aus dem Corporate Design entspringen. Die Farbauswahl sollte dem direkten Umfeld angepasst sein und als Komplimentärfarben gestaltet werden. Zu grell und bunt wirkt schnell unprofessionell. Bei der Größe des Buttons ist dabei zu beachten, dass für mobile Endgeräte die Buttons etwas größer gestaltet werden sollten, da diese Schaltfläche mit den Fingern bedient wird. Bei Desktopversionen können sie auch kleiner sein.
Button Variationen
Ghost Buttons: Unter Ghost Buttons versteht man eine Schaltfläche, dessen Designkonzept auf ein Minimum reduziert ist. Der Button hat meist keine Hintergrundfarbe, sondern Transparenz und nur einen nur sehr dezent dünnen Rand. Man kann den Ghost Button auch so programmieren, dass er erst eine Farbe erhält, wenn der User mit der Mouse über das Icon hovert.
Der Placebo Button
Der Mensch ist so konzipiert, dass er gerne sein Handeln und Umfeld kontrollieren möchte. Dies gibt ihm das Gefühl von Sicherheit und Kontrolle. Und genau aus diesem Grund gibt es den Placebo Button. Er soll dem User den Eindruck vermitteln, dass er beim drücken dieser Schaltfläche irgendetwas beeinflussen könnte. Dem ist aber nicht so! Zum Beispiel haben cloud-basierende Dienste oft einen „speichern" Button. Dieser ist allerdings vollkommen unnötig, da Clouds mittlerweile jede Änderung in Echtzeit automatisch speichern. Auch Facebook nutzt einen Placebo Button. Möchte der User seinen Account löschen, betätigt er den Deaktivieren-Button. Gelöscht werden die Daten jedoch nicht. Der User hat aber das Gefühl zu bestimmen, was mit seinen Daten passiert.
Flat Buttons
Flat Buttons setzen ganz auf das Prinzip „weniger ist mehr". Das Design soll auf das wesentliche reduziert sein. Es werden auf Schatten, Verläufe, oder Perspektiven verzichtet. Derzeit liegt das Flat Design sehr im Trend. Das Gesamtbild wird durch dieses reduzierte Design leichter.