nicht angemeldet Ingo Siemon
Struppi
Ingo Siemon
Ingo Siemon
Ingo Siemon
Ingo Siemon
at
Guten Tag
Ich habe auf meiner Webseite bisher die Formular-Elemente
etwas dem Design meiner Seite angepasst.
Also z.B. die Ränder der Input-Felder und des Submit-Buttons
mit CSS etwas "verschänert".
Nun stelle ich mir gerade die Frage, ob das Sinnvoll ist.
Vor allem in Bezug auf Internet-Anfänger-User.
Die sind es doch erstmal grundsätlich gewohnt, dass Formularfelder
und Buttons so aussehen, wie es ihr Betriebssystem und ihr Browser
als Voreinstellung haben.
Wenn ich nun z.B. diesey typischen 3-D Look mit CSS entferne,
könnte doch passieren, dass diesen Anfänger-Usern garnicht mehr
klar ist, dass es sich um Eingabefelder und Buttons zum Draufklicken handelt.
Vor allem, wenn man z.B. mit einem Mac-Rechner im Internet
unterwegs ist, haben diese Buttons ja einen sehr schönen eignen
Look.
Wie dent Ihr darüber?
Gruß
Ingo
Die sind es doch erstmal grundsätlich gewohnt, dass Formularfelder
und Buttons so aussehen, wie es ihr Betriebssystem und ihr Browser
als Voreinstellung haben.
...
Wie dent Ihr darüber?
Eine durchaus sinnvolle Überlegung.
Aber letztendlich musst du das selber entscheiden, es ist natürlich eine Frage, wie die veränderten Elemente aussehen und ob sie anhand anderer Merkmale als Formularelemente erkennen lassen.
Ich hatte z.b. schonmal das Problem, das in einem Shop die Bestätigunsseite, die im Prinzip nur den vollständigen Bestellungstext zeigte (zum kontrollieren und evtl. ausdrucken) als endgültige Bestellung angesehen wurde. Da mußte dann der Button (der schon die Aufschrift "Bestellung abschicken" trug) mit Signalfarben und einem kleinen JS (blinkend - rot auf gelb) hervorgehoben wurde. DAUs heißen nicht umsonst so ;-)
Struppi.
Liber Struppi
Eine durchaus sinnvolle Überlegung.
Jop, finde ich auch :)
Deswegen post ich diese Frage ja hier bei Euch :)
Aber letztendlich musst du das selber entscheiden, es ist natürlich eine Frage, wie die veränderten Elemente aussehen und ob sie anhand anderer Merkmale als Formularelemente erkennen lassen.
Ja, genau, das meine ich ja.
Nimm mal dieses Beispiel.
Das kleine Suchen-Furmular oben links in der Navigation.
Einem Mac-User könnte z.B. entgehen, dass dieser graue Suchen-Button
eben ein Button ist. Oder auch einem User, der Windiws-XP
in der Standardoptik laufen hat.
Ich überlege halt, ob ich die Eingabefelder und Buttons
überhaupt mit CSS optisch anpassen sollte.
Oder es lieber dem Betriebssystem/Browser des Users zu überlassen,
je nachdem, welche Einstellungen sich dieser in seinem
Betriebssystem/Browser eingestellt hat.
(Meine Güte, was ist denn das für ein Deutsch :-)) )
Gruß
Ingo
Hallo Ingo,
um die Safari-Nutzer brauchst Du Dir keine Sorgen machen, der Safari lässt sich bei der Anzeige von <input type="submit" /> von CSS nicht beeinflussen. Dafür müsstest Du schon <button type="submit">Suchen</button> verwenden.
Das Formatieren von Formularen geht so lange gut, bis man irgendwo ein Upload/file-Feld hat, das lässt sich kaum formatieren, vor allem der "Durchsuchen"-Button nicht.
Ich verwende meistens nur dezente Formatierungen, z.B. hinterlege ich nicht ausgefüllt Pflichtfelder mit (Pastell-)Gelb. Allerdings führt das unter Windows XP z.B. dazu, dass diese inputs mit "inset"-Border dargestellt werden, während andere inputs im "Luna-Style" gerendert werden. Insofern ist eine Formatierung aller textarea/input[type=password]/input[type=text], bzw. eine Formatierung deren "border" dann schon wieder sinnvoll, um einen konsistenten look zu erreichen.
schönen Gruß, David
Lieber David
um die Safari-Nutzer brauchst Du Dir keine Sorgen machen, der Safari lässt sich bei der Anzeige von
<input type="submit" />von CSS nicht beeinflussen.
OK, verstehe.
Danke für den Hinweis.
Ich verwende meistens nur dezente Formatierungen, z.B. hinterlege ich nicht ausgefüllt Pflichtfelder mit (Pastell-)Gelb. Allerdings führt das unter Windows XP z.B. dazu, dass diese inputs mit "inset"-Border dargestellt werden, während andere inputs im "Luna-Style" gerendert werden. Insofern ist eine Formatierung aller textarea/input[type=password]/input[type=text], bzw. eine Formatierung deren "border" dann schon wieder sinnvoll, um einen konsistenten look zu erreichen.
Dann müsste es ja so, wie ich es gemacht habe,
gut funktionieren oder?
Gruß
Ingo
Hallo Ingo,
Dann müsste es ja so, wie ich es gemacht habe,
gut funktionieren oder?
Ich würde sagen: ja ;-)
Zur Zeit versuche ich, mal mit diesen browser-Screenshotmachern eine tabellarische Übersicht zu machen, wie verschiedene Browser gestylte und ungestylte Formularelemente zu machen. Muss aber eigentlich lernen, daher wird das noch etwas dauern.
schönen Gruß,
David
Lieber David
Zur Zeit versuche ich, mal mit diesen browser-Screenshotmachern eine tabellarische Übersicht zu machen, wie verschiedene Browser gestylte und ungestylte Formularelemente zu machen. Muss aber eigentlich lernen, daher wird das noch etwas dauern.
OK, gute Idee.
Ich habe inzwischen die CSS-Formatierung der Formular-Elemente
bei mir wieder entfernt (bis auf die Länge der Input-Felder).
Ich denke, dass gerade auch die Anfänger-User sich leichter tun,
wenn sie die Formular-Elemente (Buttons, Radios usw) genau so zu sehen bekommen,
wie sie es ihn Ihren Betriebsystemen und Browsern eingestellt haben.
Wenn sich jemand z.B. in seinem Windows-System diese XP-Optik einstellt,
will er ja vielleicht auch gerne diese schönen Input-Felder und Buttons haben.
Und das will ich ihm dann auch nicht nehmen.
Wenn man nun z.B einen eigenen Button und eigene Radios kreiert
und sich dann der Safari-Browser über die Button-Formatierung
hinwegsetzt, passen die Radios wieder nicht zum Mac-Button.
u.s.w.
Darum verzichte ich da lieber auf eine spezielle Formatierung.
Ansehen kannst Du das ales hier bei meinen 3 Formularen:
http://spaceart.de/_Test2/nr/kontakt-email.php
http://spaceart.de/_Test2/nr/rueckruf-service.php
http://spaceart.de/_Test2/nr/newsletter.php
Und natürlich das Suchen-Formular links oben in der Navigaton.
Was denkst Du über meine Argumentation?
Gruß
Ingo
Hallo Ingo,
ja, ich denke, Du hast recht: Anfänger (oder auch einfach nicht so Computer-affine) tun sich mit den generischen Formularelementen sicher leichter.
Wie man Radios gezielt (bis auf die Größe) habe ich noch gar nicht herausgefunden. Kann man da was mit background-images machen?
Ich denke aber, dass man auf Styling nicht ganz verzichten muss; ich finde, man darf die Hintergrundfarbe oder den Rahmen von Feldern und Buttons schon verändern, wenn man sich nicht über ihre gewohnte Charakteristik hinwegsetzt: Felder erwartet "der unbedarfte User" nun mal als versenkt, Buttons erhoben. Mit Eingabefeldern, die einen Rand vom Typ "border: 1px solid #irgendwas;" haben, hatte auch ich schon meine Probleme, das finde ich einfach nicht prägnant genug.
in Ordnung finde ich es zum Beispiel, für input-Felder einen inset-Rahmen von nur einem Pixel zu definieren, einfach weil ich das optisch ein wenig attraktiver finde.
Ein Beispiel wäre:
/* Rahmen für Eingabefelder, Auswahllisten und mehrzeilige Eingabefelder
Für selects und textareas habe ich einen Attributselektor angegeben,
damit der IE sie ignoriert, wie er es ja auch mit den input-Eingabefeldern macht.
Somit haben IE-Benutzer ihre gewohnten Controls, im Normalfall also XP-Luna *g*,
und nicht die eine Hälfte generisch im Luna-Style, die andere Hälfte so, wie es mir passt.*/
input[type=text],
input[type=password],
select[name],
textarea[name] {
border: 1px inset #684;
background: #fff;
}
/* Alles, was nach Button aussieht */
input[type=submit],
input[type=reset],
button[type] {
border: 1px outset #aaa;
background: #ddd;
}
Die Liebesmüh zahlt sich halt bei IE-Usern nicht aus, die behalten die generischen Elemente.
Ob der Safari die textareas stylt, weiß ich gerade gar nicht. Die submit- und reset-inputs bleiben auf jeden Fall Mac-generisch, ebenso wie die Auswahllisten.
Die Buttons hingegen stellt der Safari nach Wunsch dar.
schönen Gruß,
David
Teanastellen!
Ich denke, es kommt vor allem auf die Farben an, die Du verwendest. Wenn die Formularfelder und Buttons alle schön beieinander bleiben und auffällig genug gefärbt sind, werden die Leute sie schon noch erkennen.
In letzter Zeit habe ich öfters gesehen, daß Buttons regelrecht getarnt wurden, d.h. 2-D und in Hintergrundfarbe - davon würde ich abraten, denn die sind manchmal echt schwer zu finden.
Aber ansonsten halte ich das Umfärben nicht für sonderlich problematisch, zumal es sich im Web mehr und mehr etabliert. Die Bahn hat ihre z.B. auch in 2-D und verfärbt, und die Formulare versteht man trotzdem auf Anhieb.
Die Buttons haben dort auch einen deutlich sichtbaren Hover-Effekt, und der Cursor wird zur Hand - damit wird dem Benutzer sehr deutlich gezeigt, daß es hier was zu klicken gibt.
Viele Grüße vom Længlich
Hoi Længlich
Ich denke, es kommt vor allem auf die Farben an, die Du verwendest.
Ich habe die Formularfelder weiss gelassen
und die Buttons in deisem typischen Windows-Grau.
Aber bei Macs mit Ihren schönen Glas-Buttons ists ja nix
mit "gewohntem Grau".
Wenn die Formularfelder und Buttons alle schön beieinander bleiben und auffällig genug gefärbt sind, werden die Leute sie schon noch erkennen.
OK, verstehe.
Klar, bei einem "normalen" und offensichtilchen Formular
geht das sicher.
ABer wenn es sich z.B. nur um ein einziges Input-Feld plu Button
in der Navigation handelt (suchen-Funktion), kann das schon mal
schwieriger werden, denke ich.
In letzter Zeit habe ich öfters gesehen, daß Buttons regelrecht getarnt wurden, d.h. 2-D und in Hintergrundfarbe - davon würde ich abraten, denn die sind manchmal echt schwer zu finden.
OK, ein regelrechtes Tarnen ist natürlich blöd, das ist klar ;-)
Aber ansonsten halte ich das Umfärben nicht für sonderlich problematisch, zumal es sich im Web mehr und mehr etabliert. Die Bahn hat ihre z.B. auch in 2-D und verfärbt, und die Formulare versteht man trotzdem auf Anhieb.
Ja, das liegt aber auch ein bisschen mit daran, dass es wieder
mehrere Feilder sind, die man nicht so leicht übersehen kann.
Aber nimm mal mein Suchen-Feld in meiner Navigation
Oder noch besser, das Suchen-Feld von meiner alten Seite.
Du glaubst garnicht, wie vielen Usern ich am Telefon immer wieder
erklären muss, dass das eine Suchen-Funktion ist.
Die Buttons haben dort auch einen deutlich sichtbaren Hover-Effekt, und der Cursor wird zur Hand - damit wird dem Benutzer sehr deutlich gezeigt, daß es hier was zu klicken gibt.
"Normalerweise" haben doch Buttons in den Browsern keine
Cursor-Hand beim drüberfahren, oder?
Meinst Du man, sollte diese einbauen, egal, ob nun CSS-Buttons
oder normale?
Gruß
Ingo
Hyvää päivää!
Ja, das liegt aber auch ein bisschen mit daran, dass es wieder
mehrere Feilder sind, die man nicht so leicht übersehen kann.
Aber nimm mal mein Suchen-Feld in meiner Navigation
Den finde ich sichtbar genug. Vielleicht noch einen Hover-Effekt, daß er beim Darüberfahren ein bißchen heller wird oder so was, dann fällt er wirklich gut auf.
Oder noch besser, das Suchen-Feld von meiner alten Seite.
Du glaubst garnicht, wie vielen Usern ich am Telefon immer wieder
erklären muss, dass das eine Suchen-Funktion ist.
Ja, der ist schon schwerer zu finden. ;-) Hier liegt das Problem, glaube ich, in folgenden drei Punkten:
Die Buttons haben dort auch einen deutlich sichtbaren Hover-Effekt, und der Cursor wird zur Hand - damit wird dem Benutzer sehr deutlich gezeigt, daß es hier was zu klicken gibt.
"Normalerweise" haben doch Buttons in den Browsern keine
Cursor-Hand beim drüberfahren, oder?
Meinst Du man, sollte diese einbauen, egal, ob nun CSS-Buttons
oder normale?
Nein, normalerweise nicht. Aber Links haben die Hand, und deswegen - finde ich - suggeriert die Hand, daß eine neue Seite kommt, wenn man hier klickt.
Aber die Hand muß ja nicht sein; ein Hover-Effekt reicht m.E. aus. Außerdem verwendest Du ja bereits das title-Attribut, das auch noch mal suggeriert, daß hier nicht nur Text steht.
Viele Grüße vom Længlich
Tach
Den finde ich sichtbar genug. Vielleicht noch einen Hover-Effekt, daß er beim Darüberfahren ein bißchen heller wird oder so was, dann
fällt er wirklich gut auf.
OK, Kann man solche Hover-Effekte bei Buttons eigentlich
auch mit CSS machen?
Ich dachte immer, das geht nur beim a-Element.
Ja, der ist schon schwerer zu finden. ;-) Hier liegt das Problem, glaube ich, in folgenden drei Punkten:
- er ist ziemlich klein
- er hat keine "klassische" Button-Form
- er hängt direkt hinter dem Eingabefeld, welches viel größer ist
OK, deswegen habe ich das ganze Ding bei meiner neuen Seite
auch ganz nach oben in die Navi gesetzt.
Und em Teil auch noch eine eigene Überschrift verpasst.
Und dieses "erweitere Suche" machts ja cuh nochmal etwas deutlicher.
Was würdet Ihr eigentlich in den Button schreiben,
"Suchen", "Finden" oder "Los"?
Gruß
Ingo
Ola!
OK, Kann man solche Hover-Effekte bei Buttons eigentlich
auch mit CSS machen?
Ich dachte immer, das geht nur beim a-Element.
Nö, die Pseudoklassen wie z.B. :hover kannst Du prinzipiell überall verwenden. Das verstehen auch die meisten Browser, nur einer nicht, nämlich der IE. Dem kann man, wenn man will, mit einer .htc-Datei auf die Sprünge helfen (also mit Javascript), oder man läßt es einfach bleiben. ;-) (Ich habe gerade mit dem IE bei der Bahn nachgeschaut: Die haben es bleiben lassen.)
Was würdet Ihr eigentlich in den Button schreiben,
"Suchen", "Finden" oder "Los"?
"Los" finde ich nicht so gut wie die anderen beiden; es sagt irgendwie nicht viel aus (was geht jetzt los?). Das üblichste ist wohl "Suchen".
Viele Grüße vom Længlich
Moin
Nö, die Pseudoklassen wie z.B. :hover kannst Du prinzipiell überall verwenden.
OK, dann werde ich mich damit nun mal befassen.
"Los" finde ich nicht so gut wie die anderen beiden; es sagt irgendwie nicht viel aus (was geht jetzt los?). Das üblichste ist wohl "Suchen".
Ich finde "Suchen" auch am sprechendsten.
Aber wenn man sich mal umguckt, findet man fast überall
"Finden" und "Los".
Gruß
Ingo
Hallo.
Schade ist, dass kaum ein Browser alle Möglichkeiten der Formatierung unterstützt. Opera tut sich beispielsweise mit Kapitälchen schwer.
Ich tarne gelegentlich das Suchfeld als Eintrag innerhalb der Navigationsliste. Nur beim Klick auf den vermeintlichen Verweis gibt sich das Feld zu erkennen uns steht direkt für die Eingabe bereit, statt auf ein gesondertes Formular zu verweisen. Zu den Voraussetzungen für einen solchen Effekt gehören allerdings eine sehr aufgeräumte Navigation -- also maximal halb so viele Punkte wie bei dir -- und eine praktikable Breite für das Suchfeld. Und da der Text "Suche" einerseits bereits vorbelegt sein muss, damit der "Auswahlpunkt" überhaupt über einen Text verfügt, und andererseits verschwinden soll, wenn das Feld den Fokus erhält, empfiehlt es sich, die Tarnung vollständig mittels Javascript vorzunehmen.
MfG, at