Der folgende Beitrag ist ein Gastbeitrag von Brin Wilson von WinningWP. Brin schrieb mir, weil er ein wenig Werbung für seine Seite machen wollte. Ich hätte das natürlich gerne angenommen, aber noch besser, da Brin sowieso ein Tech-Autor ist, warum nicht gleich einen Gastbeitrag schreiben? Das ist immer eine Win-Win-Situation, und da er sowieso eine gute Idee hatte... leg los, Brin!
Wenn Sie dies lesen, gehe ich davon aus, dass Ihnen die Benutzererfahrung wichtig ist. Wie ich, haben Sie wahrscheinlich unzählige Stunden damit verbracht, jedes letzte Detail Ihrer Website zu perfektionieren: von der Sicherstellung, dass alles so aussieht, wie es sollte, auf zahlreichen verschiedenen Geräten, bis hin zur Erstellung einer unterhaltsamen und/oder hilfreichen 404-Seite! Aber haben Sie jemals darüber nachgedacht, was passiert, wenn Leute Ihre Website über die bereitgestellte Suchfunktion durchsuchen (d. h. normalerweise ein einfaches Suchfeld irgendwo oben auf der Seite), aber versehentlich Enter drücken, ohne etwas eingegeben zu haben?
Wenn man sich im Web umsieht, scheint es keinen wirklichen Konsens darüber zu geben, was in diesem besonderen Grenzfall passieren sollte. Tatsächlich scheinen selbst die überwiegende Mehrheit der branchenführenden Webdesign-Blogs keine wirkliche Einigung darüber zu geben, was passieren sollte oder nicht!
Einige Beispiele für leere Suchanfragen
Neuladen / Weiterleitung zur Startseite
Bekannte Beispiele sind: Web Designer Wall und der Team Treehouse Blog.
In diesen Fällen ist es wahrscheinlich ein WordPress-Theme, das 1) die Standard-WordPress-Suche verwendet und 2) eine search.php-Vorlagendatei fehlt (oder die Vorlage im Wesentlichen mit der Homepage identisch ist). So wird die Standard-Homepage ohne Suchfilter geladen, was bedeutet, dass kein Filter angewendet wird und Sie sehen, was normalerweise auf dieser Seite steht. Es ist nicht sehr klar, was vor sich geht.
Nichts tun
Bekannte Beispiele sind: Codrops und Sitepoint.
Das Suchfeld tut einfach nichts und/oder schließt sich selbst.
Nichts gesucht / Nichts gefunden
Bekannte Beispiele sind diese Seite selbst, d. h. CSS-Tricks und tatsächlich derzeit meine eigene Seite WinningWP.
Ein Standardergebnis erscheint und zitiert, wonach auch immer der Benutzer gesucht hat (in diesem Fall nichts), und es werden keine Ergebnisse angezeigt. Sozusagen das Gegenteil der ersten Beispiele, bei denen aufgrund fehlender Suchfilter alles gefunden wird. Aber Sie befinden sich auch auf einer eindeutigen Suchseite, sodass eine Aktion stattgefunden hat.
Nichts gesucht / Alles gefunden
Bekannte Beispiele sind WebDesignerDepot und Code Tuts+.
Eine Liste der neuesten Beiträge wird angezeigt.
Völlig leer
Bekannte Beispiele sind Smashing Magazine und Designmodo.
Eine vollständig leere Liste von Suchergebnissen erscheint.
Verbuggt
Bekannte Beispiele sind TheNextWeb und 1stWebdesigner.
Die Seite sieht einfach (oder sagt), sie sei kaputt.
Ein besseres Ergebnis
Was sollte also passieren? Nun, die Verwendung des Attributs „required“ würde wahrscheinlich viel dazu beitragen, die Benutzererfahrung in Browsern zu verbessern, die diesen Teil von HTML5 unterstützen.
<input required type="search" name="q" id="q">Dadurch wird verhindert, dass Benutzer mit moderneren Browsern überhaupt eine leere Suche durchführen können (wie das Verhalten der leeren Suchbox auf Speckboy Design Magazine zeigt). Hier ist ein vollständiges Formularbeispiel
<form id="search-form" action="/search-results/">
<div>
<label for="q" id="search-label">
Search
</label>
<input required aria-labelledby="search-label" id="q" type="search" name="q" class="search-field" value="">
<input type="submit" value="Search" class="screen-reader">
</div>
</form>
required zu verwenden, da dies eine einfache und offensichtliche Verbesserung zu sein scheint.Aber was ist mit nicht unterstützenden Browsern? Ist das gut genug? Und mehr noch: Können wir es besser machen?
Ich persönlich bin der Meinung, dass diese Art von leeren Suchanfragen den Benutzer am besten bedienen könnte, indem man ein Ergebnis liefert, das dem Benutzer mitteilt, dass er eine Suche durchgeführt hat, aber irgendwie das Suchfeld leer gelassen hat. Vielleicht im Stil einer humorvollen 404-Seite. Allerdings gebe ich zu, dass dies vielleicht übertrieben ist und für einige Websites wahrscheinlich unangebracht wäre.
Vielleicht könnte eines der schönsten Benutzererlebnisse (von Chris vorgeschlagen, nachdem er den ersten Entwurf dieses Beitrags gesehen hatte) darin bestehen, den Benutzer zu einer wirklich gut gestalteten Vollbild-Sucherfahrung zu leiten: vielleicht mit einigen Vorschlag für beliebte Suchbegriffe.
Oder vielleicht ist die leere Suche einfach ein zu extremer Grenzfall, um sich darum zu kümmern, besonders auf Websites mit relativ geringem Traffic.
Haben Sie andere Vorschläge, was am besten zurückgegeben werden sollte, wenn ein Benutzer das Suchfeld leer lässt? Gibt es eine Chance, dass der Benutzer versehentlich auf Suchen geklickt hat oder eine andere Annahme hatte, was es tun würde? Gedanken?
„Here’s some of the most popluar search terms:“ sollte „Here are some of the most popluar search terms:“ lauten
"Here's" oder vollständiger "Here is" bezieht sich auf einen einzelnen Gegenstand.
Das sollte es nicht...
http://english.stackexchange.com/questions/54682/heres-plurality-question
Ich denke, Sie sollten den Link, den Sie gepostet haben, überprüfen und ihn bis zum Ende lesen, abzüglich des allerletzten, der einfach falsch ist.
Wenn Sie den Satz nehmen-
-und ihn kürzen auf-
-das bedeutet wörtlich-
-und das ist einfach falsch.
Ehemaliger Englischlehrer hier. OP hat Recht.
Die Schlüsselteile des Satzes: „Here’s
some ofthemost popular searchterms“Da „here’s“ eine Abkürzung von „here is“ ist, haben wir
„Hier ist die Begriffe.“
Das ist falsch.
Hat niemand bemerkt, dass Mnesikles einen Tippfehler in seinem Grammatik-Nazi-Post hatte?! Keine Beleidigung, Mnesikles! :) Wenn ich beide Sätze noch einmal lese, ist das Lustige, dass das das Einzige war, was ich bemerkt habe! Ich habe nicht einmal bemerkt, dass du
Here'sinHere aregeändert hast! Lolz.Haben Sie (Brin & Chris) dazu vielleicht irgendwelche Zahlen? Ich handhabe es normalerweise auf die eine oder andere Weise, aber es scheint ein Grenzfall zu sein, der wahrscheinlich von jemandem ausprobiert wird, der keine Absicht hat, eine echte Suche durchzuführen.
Die Einstellung von „required“ ergibt für mich viel Sinn. Es könnte jedoch zum Beispiel durch einen einfachen geskripteten Ballon verbessert werden, der genau erklärt, warum die Suche nicht funktioniert, und Alternativen wie einen Link zu einer Sitemap anbietet. (<3 erforderlich, aber ich höre oft, dass die Leute es überhaupt nicht hilfreich/beschreibend finden)
Ich mag die Bereitstellung beliebter Suchbegriffe nicht wirklich. Ich könnte falsch liegen, aber die 5 beliebtesten Suchbegriffe machen immer noch nicht einmal 5 % der gesamten Suchanfragen auf den meisten Websites aus. Dadurch wird der hinzugefügte Text zu Lärm auf der Seite.
Was wäre, wenn Sie einfach einen zufälligen Artikel/eine zufällige Unterseite der Website anzeigen?
(Nur eine Idee, die ich beim Fehlinterpretieren des ersten GIFs hatte.)
Das ist ein cooles Ergebnis (meiner Meinung nach), solange der Benutzer nicht vergessen hat, einen Suchbegriff einzugeben. Aber wenn er versehentlich Enter drückt, wäre es benutzerfreundlicher, wenn er nur eine freundliche Erinnerung erhält, einen Suchbegriff einzugeben...
Also sollten Sie diesen Hinweis wirklich anzeigen. Aber ein zufälliger Artikel-Button ist keine schlechte Idee. ;D
Ich kann mir gut vorstellen, dass dies Teil des Vollbild-Sucherlebnisses ist. Im Sinne von: „Sie haben nichts gesucht, hier ist ein großes Suchfeld, wenn Sie es erneut versuchen möchten, oder warum nicht diesen zufällig ausgewählten Artikel ansehen?“
Ich habe mich typischerweise für die Vollbild-Suchseite entschieden, aber nie die Idee in Erwägung gezogen, absichtlich einen zufälligen Inhalt anzuzeigen. Scheint eine clevere Möglichkeit zu sein, diesen leeren Platz zu nutzen!
Guter Beitrag, Brin. Ich mag die
required-Technik zumindest als einfache progressive Verbesserung, um dies zu handhaben.Nebenbei bemerkt: Ich bin kein Barrierefreiheitsexperte, aber ich bin zu 90 % sicher, dass das Attribut
aria-labeledbyim Codebeispiel redundant ist. ARIA soll die inhärenten Barrierefreiheitsfunktionen bestehender HTML-Elemente nachahmen. In diesem Fall bietet dasElement die gesamte Barrierefreiheit, die Sie benötigen. Es ist immer am besten, die richtigen Elemente ohne ARIA zu verwenden, wenn möglich. `aria-labeledby` ist nützlich für Felder mit mehreren Labels, Nicht-Labels und einige Nicht-Formular-Anwendungsfälle.Bah. Die Formatierung ist durcheinander geraten. (Es sieht so aus, als ob die Verwendung von Inline-HTML-Elementen, selbst wenn sie in Anführungszeichen gesetzt sind, nicht funktioniert.) Der letzte Abschnitt sollte lauten:
Das habe ich auch gesehen. Es scheint die Nischenfälle eines Labels ohne Label oder eines zu vielen abzudecken, bei denen das Label für mehrere Widgets gilt. Mozilla sagt, es sei für typische Formularelemente, gibt dann aber ein Beispiel für die Anwendung auf ein Div.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute#Notes.C2.A0
Wenn ein Label nicht mit einem Eingabeelement, Widget oder einer Gruppe verknüpft ist, wird es von einem Screenreader nicht vorgelesen.
Relevante Lektüre: „ARIA in HTML – da geht die Nachbarschaft“
Mein Instinkt (keine Zahlen zur Untermauerung) sagt mir, dass das Drücken von Enter auf einem leeren Suchfeld fast immer ein Fehler ist, daher sollte die allgemeine Regel lauten, die aktuelle Seite nicht zu verlassen. Die einzige mögliche Ausnahme wäre, wenn Sie eine dedizierte "Erweiterte Suche"-Seite haben, zu der Sie möglicherweise weiterleiten.
Das
required-Attribut erreicht dies in unterstützenden Browsern. Aber ein benutzerdefiniertes clientseitiges Validierungsskript könnte besser sein, da Sie dann eine aussagekräftigere Popup-Nachricht hinzufügen könnten. Dies könnte besonders hilfreich sein, wenn Sie eine sehr minimalistische Suchbox verwenden (wie das aktuelle CSS-Tricks-Design), bei der die Möglichkeit besteht, dass der Benutzer nicht erkennt, dass es sich um ein Suchfeld handelte.Wenn Sie Grund zu der Annahme haben, dass Leute absichtlich eine leere Suche verwenden, um eine Liste aller Beiträge zu erhalten, können Sie immer einen direkten Link zu diesem Ergebnis in der Warnmeldung anzeigen, die nach einer leeren Suche erscheint.
Ich habe schon leere Suchen durchgeführt. Ich schätze Szenarien mit „Nichts gesucht / Alles gefunden“ wirklich sehr... vielleicht habe ich aus Neugier, was angezeigt wird, eine leere Suche eingegeben, vielleicht habe ich es getan, um mich vom schreienden/ablenkenden Inhalt der aktuellen Seite zu entfernen. Es ist eine großartige Möglichkeit, beworbene oder beliebte Inhalte anzuzeigen. Ganz spontan gefällt mir die Idee, frühere Suchanfragen oder angesehene Seiten anzuzeigen (ähnlich wie Amazon mich an Dinge erinnert, die ich angesehen habe und noch nicht in meinen Warenkorb gelegt habe).
Was ist mit dem Deaktivieren des Suchbuttons/der Enter-Taste mit JavaScript, so dass gar nicht erst versucht wird zu suchen, wenn nichts drin steht?
Das ist, was ich dachte.
Mein Blog wird auf Blogger (CMS) gehostet, wenn ich meine Suche leer lasse, kommt das Ergebnis aller letzten Beiträge.
Ich finde, wenn ein Besucher eine leere Suche eingibt, sollte die Seite einfach... nichts tun, weil nichts eingegeben wurde.
Die
required-Technik ist dafür gut, liefert zusätzliche Hilfe. Für die anderen Browser sollte das Submit-Ereignis einfach mit Javascript abgebrochen werden.Die Homepage sollte die Ergebnisse einer leeren Suche liefern. Dies kann natürlich bei einer stark gestylten Homepage anders sein, aber das ist selten der Fall.
Ich vermute, es hängt alles davon ab, ob man „“ als Suchbegriff betrachtet. (Ich tue es nicht).
Der Artikel beginnt damit, anzunehmen, dass Sie „versehentlich“ eine leere Zeichenkette suchen. Daher würde ich meiner Meinung nach die gleiche Erfahrung wie bei Benutzern anderer Formulare auf Ihrer Website bieten wollen. Wenn Sie einen Fehler in einem Formular machen, hoffen Sie auf clientseitige Validierung (vorzugsweise mit
required), die Sie auf den Fehler aufmerksam macht, anstatt auf eine Seitenaktualisierung.Passiert mir immer wieder. Ich halte mich für ziemlich technisch versiert und es passiert trotzdem. Wie?
Nun, soweit ich mich erinnere, verfügen diese Seiten über eine Suchfunktion, die aus einem Suchfeld und einem Button mit der Beschriftung „Suchen“ oder ähnlich besteht. Oft gibt es eine Art Trickserei, die den größten Teil der Suchbox versteckt oder sie kleiner macht, bis sie fokussiert ist. Also sage ich mir: „Hey, da ist die Suche, lass uns zum Suchding gehen“. Und ich klicke auf den Button in der Hoffnung, auf eine Seite zu gelangen, auf der ich eine Suche durchführen kann, und habe die Anwesenheit der ersten Suchbox übersehen.
Ich gebe schlechtem UX die Schuld.
Meiner Meinung nach gibt es nur eine Option.
Wenn Sie eine Suche mit nichts im Suchfeld eingeben, haben Sie versehentlich eine Suche gestartet.
Dann erwarten Sie offensichtlich auch kein Suchergebnis.
Geben Sie also meiner Meinung nach nichts, wenn Sie nichts verlangt haben!
Ignorieren!
Ja, die erste Validierung muss in JavaScript und die zweite im Backend (z.B. PHP) erfolgen, bevor die Anfrage gesendet wird.
Ich mache manchmal absichtlich leere Suchen, um mehr zu erfahren, wenn die aktuelle Seite mir nicht genug nützliche Informationen liefert. Wenn ich ein neues System zum ersten Mal benutze, weiß ich manchmal einfach nicht, wonach ich suchen soll. Hier sind meine Vorschläge für das, was ich für am hilfreichsten halte.
Ich möchte das Suchfeld nicht als erforderlich markieren. Das ist nur eine Sackgasse. Ich würde es vorziehen, etwas zu tun, das es dem Benutzer ermöglicht, weitere Informationen zu entdecken. Wenn es sich um eine Broschürenseite handelt, würde ich eine Landingpage mit den beliebtesten Produkten anzeigen. Wenn es sich um einen Blog handelt, würde ich die neuesten Einträge auflisten. Für eine Webanwendung würde ich ein Verzeichnis von Links zu Hilfeseiten, gängigen Suchbegriffen und einer Liste von Links anzeigen, die für Personen mit den Rollen des Benutzers relevant wären. Für alles andere würde ich, wenn ich die vorherigen Suchbegriffe des Benutzers kenne und es nicht zu nachbar-mäßig ist, die Ergebnisse der letzten Suche, die er durchgeführt hat, anzeigen. Wenn alles andere fehlschlägt, können sich zufällige Suchergebnisse als überraschend nützlich erweisen, solange alle Links zu Seiten führen, auf die der Benutzer zugreifen darf.
Sie haben keine Suchbegriffe eingegeben
Hier ist also ein Hase mit einem Pfannkuchen auf dem Kopf.
Ich mache dafür normalerweise eine Javascript-Funktion. Sie deckt zwei Fälle ab
1) Wenn ein Benutzer nur auf den Button klickt (ohne das Suchfeld überhaupt zu fokussieren), dann fokussiere ich es für ihn und verhindere das Standardverhalten
2) Wenn ein Benutzer fokussiert hat, aber eine leere Suche durchgeführt hat – dasselbe, nur dass das Eingabefeld fokussiert bleibt
Aber ich denke, es gibt Raum für das
required-Attribut oder eine spezielle ostereiähnliche Suchergebnisseite. Danke dafür.Auf dieser Seite sollte dieser Artikel aufgerufen werden.
Clever, das gefällt mir.
Eine Kombination aus Ihrer Idee für die 404-ähnliche Seite und dem ersten Beispiel. Alles zurückgeben, aber mit der zusätzlichen Benachrichtigung, dass Sie alles sehen, weil Sie nichts gesucht haben.
Ich frage mich, ob einige Endbenutzer glauben, dass die Suche ohne Schlüsselwörter in der Suchbox dann alles auf der Website zurückgibt, von wo aus sie alles auf der Website durchsuchen können.
Your text to link here… hat den humorvollen Ansatz gewählt. :)
LOL, das ging ja gut... der Link sollte Google Play Store lauten.
Wenn verfügbar, zeigen Sie ein Website-Verzeichnis / Tag-Verzeichnis mit einem Kommentar zur durchgeführten leeren Suche an. Sitemap wäre die zweite Wahl.
Ich widerspreche dem einzigen Anwendungsfall, da Suche auch als Filterperspektive betrachtet werden kann. Nehmen wir an, wir zeigen alle neuesten Blogbeiträge an, also alle Blogbeiträge nach Erstellungsdatum geordnet. Wenn der Benutzer etwas in das Suchfeld eingibt, können wir AJAX verwenden, um einen Aufruf an das Backend zu machen und nur die Blogbeiträge anzuzeigen, die relevant sind, geordnet nach Erstellungsdatum. Wenn der Benutzer mehr Beiträge sehen möchte, entfernt er den Text aus dem Suchfeld, was effektiv den Filter entfernt.
Diese Interaktion ermöglicht es dem Benutzer immer noch, die Website zu durchsuchen, und gibt eine klare Botschaft darüber, welche Funktion ein leeres oder gefülltes Textfeld hat.
Kein Profi, aber wie viele hier würde ich erwarten, dass nichts passiert.
Wenn die Suche keine Weiterleitung erfordert und die Seite nicht zu sehr beeinflusst (wie z.B. eine Liste von Beiträgen in einer Seitenleiste oder so etwas), dann würde ich erwarten, dass die Suche wie ein Filter funktioniert und alles angezeigt wird.
Ich würde gerne sehen, wie mehr Websites JavaScript-Modals für leere Suchen verwenden. Ich habe hier einen einfachen Mockup erstellt.
(Kein Codepen, da es wirklich keine Funktionalität gibt.)
Ich mochte schon immer den Ansatz des Google Play Stores. Er sucht stattdessen einfach nach "Einhörnern".
https://play.google.com/store/search?q
Das ist großartig, ich mag es wirklich, dafür eine lustige 404-Seite zu verwenden. Ich würde sagen, machen Sie es! Es gibt viele wirklich lustige Möglichkeiten, es darzustellen. Zum Beispiel: „Nun, das war höllisch peinlich.“ Ich weiß nicht, wo Sie sich befinden, aber die Verwendung von Slang in der Nähe wäre lustig. „Wicked“ ist definitiv eine Sache in New England.
Ich glaube, der Text im Suchfeld sollte verschwinden, sobald ein Benutzer beginnt, in das Feld zu tippen. Es ist wirklich ärgerlich, immer noch Suchfelder zu sehen, bei denen man den Text „Hier suchen“ löschen muss und dann die Suchanfrage eingibt.
Meiner Meinung nach wäre der beste Weg, nicht zu suchen und stattdessen eine kleine Nachricht unter dem Suchfeld anzuzeigen, genau wie bei Browsern, die HTML5 unterstützen. Ein wenig Javascript und CSS würde den Trick machen.
Ich bevorzuge die Methode „Nichts gefunden, versuchen Sie es erneut“. Ich finde, dass manche Leute auf das Symbol klicken und auf ein Suchformular warten. Außerdem halte ich es für eine organische und reibungslose Möglichkeit, den Benutzer durch die Inhalte unserer Website zu führen. Fehler-/Warnmeldungen lassen Benutzer sich dumm fühlen, ich vermeide sie, soweit ich kann.
Ich bevorzuge, wenn eine leere Suche oder ein Sternchen (*) alle Beiträge/Inhalte zurückgibt.