Filterfunktion - Ver(schlimm)besserung ?

[Peter Nack]

Hallo zusammen,

ich stehe gerade vor einer Struktur- respektive Design-Entscheidung, und wuerde hierzu gerne mal ein paar fremde Meinungen erfahren.

Und zwar geht es um die Filterung von anzuzeigenden Daten.
Genauer gesagt, bekommt der Benutzer auf meiner Seite eine Liste von "Lokalitaeten" fuer einen entsprechenden Raum angezeigt.
Nun besitzt so eine Lokalitaet diverse Eigenschaften, welche ueber einen Suchfilter gesteuert bzw. nach denen gefiltert werden kann.

Im ersten Schritt habe ich den ganzen Ablauf suchmaschinenfreundlich und komplett ohne Javascript implementiert. Sprich, der Benutzer kann sich durch Klick auf einen Link die Filteroptionen anzeigen lassen, danach schickt er das Formular ab, und nach Neuladen der Seite erscheinen dann die gefilterten Ergebnisse.

Nun moechte ich das ganze zeitgemaesz ein wenig mit Javascript aufpeppen. Schaue ich auf bereits vorhandene Portale, wie zB. hotels.com², so stelle ich fest, dass viele solcher Seiten direkt beim Veraendern eines einzigen Filterwertes das gesamte Formular erneut auswerten und die Suchergebnisse "in Echtzeit" gefiltert und neu dargestellt werden.
Aber gerade fuer Benutzer, welche nicht nur ein zwei Filteroptionen aendern moechten, stellt sich dieses Vorgehen meiner Meinung nach als ziemlich Benutzerunfreundlich heraus.
Allerdings, ausgehend von der ahnungslosen bzw. allgemeinen Anwendermasse, kann ich mir auch gut vorstellen, dass der "moderne Benutzer" dieses Verhalten bereits erwartet und sich wundern wird, warum die Filterung "nicht funktioniert".

Im Prinzip spricht ja nicht so viel gegen oben beschriebene Implementierung. Es kann gut sein, dass lediglich wir Entwickler bei so etwas aufstoszen, nicht aber der Endanwender.

Doch was mich daran zb stoert:

• Filterparameter sind nicht in der URL vorhanden (zum. nicht ohne weiteren Aufwand)
• Einstellungen mehrerer Filteroptionen ist recht umstaendlich (da jedesmal ein Reload der Suchergebnisse angestoszen wird)
• durch eben diese Reloads findet ein erheblicher Overhead statt

Positives:

• der Ablauf wirkt evtl. etwas "frischer"
• kein Reload der gesamten Seite
• evtl. uebersichtlicher, da - ausgehend von einer sehr umfangreichen Filterfunktion - nicht erst bis zum Ende gescrollt werden muss (dort, wo der Absenden-Button steht)

So, wir ihr seht, kann ich mich einfach nicht so recht entscheiden.
Was haltet ihr von diesem Thema? Ist die dynamische Ajax-Filterung eine Verbesserung oder eher eine Verschlimmbesserung? Gibt es evtl. sogar eine Kombination beider Wege?

Herzlichen Dank fuers Lesen und fuer evtl. Antworten im Voraus.

MfG
Peter Nack

² Irgendwie hatte das Forum wohl Probleme mit dem Link, daher hier in Plaintext:
http://emea.hotels.com/search.do?searchParams.arrivalDate=04-11-2009&searchParams.departureDate=06-11-2009&queryFormState=CLOSED&searchParams.distance=25.0&destination=Berlin%2C+Germany&showSimilarDestinations=true&children[0]=0&searchViewType=LIST&searchParams.rooms[0].numberOfAdults=2&page=1&destinationId=332483&originatorPage=ADVANCED_SEARCH&activeTab=DESTINATION&rooms=1

PS: Um es vorweg zu nehmen: Die Seite ist noch nicht online.

[Auge]

Hallo

Nun moechte ich das ganze zeitgemaesz ein wenig mit Javascript aufpeppen. Schaue ich auf bereits vorhandene Portale, wie zB. hotels.com², so stelle ich fest, dass viele solcher Seiten direkt beim Veraendern eines einzigen Filterwertes das gesamte Formular erneut auswerten und die Suchergebnisse "in Echtzeit" gefiltert und neu dargestellt werden.
Aber gerade fuer Benutzer, welche nicht nur ein zwei Filteroptionen aendern moechten, stellt sich dieses Vorgehen meiner Meinung nach als ziemlich Benutzerunfreundlich heraus.

Wenn der Benutzer ohne JavaScript nur ein zwei Filteroptionen ändert und die Seite neu lädt, ist das für ihn das Gleiche. Zudem kann es passieren, dass die gewählten Filteroptionen voneinander abhängen, die zweite Option nicht ohne die Wahl der ersten Option zugänglich ist. Der Benutzer muss das Formular also zweimal abschicken, um zum gleichen Ergebnis zu kommen wie mit JavaScript. Beim Einsatz von JavaScript erreicht er das aber ohne Abschicken des Formulars.

Doch was mich daran zb stoert:

• Filterparameter sind nicht in der URL vorhanden (zum. nicht ohne weiteren Aufwand)

Das machst du dann doch mit JavaScript. Wenn das Formular endgültig, nach Festlegung aller Filteroptionen abgesendet wird, werden auch alle Parameter mitgesendet und, so die Übermittlungsmethode GET ist, in der URL erscheinen.

• Einstellungen mehrerer Filteroptionen ist recht umstaendlich (da jedesmal ein Reload der Suchergebnisse angestoszen wird)

Das passiert ohne JavaScript nicht?

• durch eben diese Reloads findet ein erheblicher Overhead statt

Das passiert ohne JavaScript nicht?

So, wir ihr seht, kann ich mich einfach nicht so recht entscheiden.
Was haltet ihr von diesem Thema? Ist die dynamische Ajax-Filterung eine Verbesserung oder eher eine Verschlimmbesserung? Gibt es evtl. sogar eine Kombination beider Wege?

Es ist, gerade bei umfangreichen Auswahlmöglichkeiten mit starken Abhängigkeiten zwischen den wählbaren Werten eine Verbesserung.

Beispiel: Ich suche ein Ersatzteil für ein KFZ. Ich wähle den Hersteller des KFZ, dann den Typ des KFZ, dann die Baugruppe und schlussendlich das zu ersetzende Teil. Alle nachfolgenden Schritte sind von den vorhergehenden Schritten abhängig. Ich kann nach jeder Auswahl das Formular abschicken um die Auswahl einzuschränken oder, durch JavaScript realisiert, für den jeweils nächsten Schritt die passend eingeschränkte Auswahl ohne neuladen der Seite präsentiert bekommen. Beides führt zum Ziel, die JavaScript-Variante ist aber definitiv bequemer und zudem mit weniger Serverlast verbunden.

² Irgendwie hatte das Forum wohl Probleme mit dem Link, daher hier in Plaintext:
http://emea.hotels.com/search.do?searchParams.arrivalDate=04-11-2009&searchParams.departureDate=06-11-2009&queryFormState=CLOSED&searchParams.distance=25.0&destination=Berlin%2C+Germany&showSimilarDestinations=true&children[0]=0&searchViewType=LIST&searchParams.rooms[0].numberOfAdults=2&page=1&destinationId=332483&originatorPage=ADVANCED_SEARCH&activeTab=DESTINATION&rooms=1

Was sagen und geben mir die Parameter in dieser URL? Nichts. Sie sind schwer lesbar und passen bei dieser Menge zudem nicht in die Adresszeile meines Browsers. Ich werde mir im Verlauf der Auswahl wohl kaum die Mühe machen, meine vorigen Eingaben über die Adresszeile zu kontrollieren. Dies, zumal die URL für die Kommunikation zwischen Client (Browser) und Server gedacht ist. Für mich als Mensch ist der Inhalt der Seite, in diesem Fall das Formular, relevant.

Tschö, Auge

[Peter Nack]

Hallo Auge,

danke fuer deinen Beitrag.

[..]

Was mich ueberzeugt ist das von dir aufgefuehrte Beispiel mit der Abhaengigkeit - auch wenn diese bei mir nicht gegeben ist, ist dies das erste Argument, welches _meiner_ Meinung nach fuer die besagte JS-Loesung spricht.

Wenn der Benutzer ohne JavaScript nur ein zwei Filteroptionen ändert und die Seite neu lädt, ist das für ihn das Gleiche.

Ich denke, dass der Durchschnitt etwa bei 4 bis 12 versch. Angaben liegen wird. Von daher mein Einwand. Oder ich warte eventuell ein paar Milisekunden, um dem Benutzer die Moeglichkeit einzuraeumen, weitere Optionen einzustellen bzw. dass schnell hintereinander gesetzte Filter zugleich uebernommen werde.

Das machst du dann doch mit JavaScript. Wenn das Formular endgültig, nach Festlegung aller Filteroptionen abgesendet wird, werden auch alle Parameter mitgesendet und, so die Übermittlungsmethode GET ist, in der URL erscheinen.

Da hakt es jetzt ein wenig bei mir.
Das Absenden des Formulares laeuft doch asynchron und im Hintergrund. Mit JavaScript (ich nutze JQuery) mache ich ein serialize() auf das Formular und sende die Daten an das Backend. Wo genau kommt bei diesem Vorgang die Adresszeile ins Spiel?

• Einstellungen mehrerer Filteroptionen ist recht umstaendlich (da jedesmal ein Reload der Suchergebnisse angestoszen wird)
  Das passiert ohne JavaScript nicht?

S.o. Bei mir bestehen derzeit keine Abhaengigkeiten.

Es ist, gerade bei umfangreichen Auswahlmöglichkeiten mit starken Abhängigkeiten zwischen den wählbaren Werten eine Verbesserung.

S.o. Aber bei Formularen ohne Abhaengigkeit sehe ich da leider immernoch meine Zweifel.

Was sagen und geben mir die Parameter in dieser URL? Nichts.

?? Ich wollte nur direkt auf eine Beispielseite verlinken.

Sie sind schwer lesbar und passen bei dieser Menge zudem nicht in die Adresszeile meines Browsers.

S.o. und: Browser wechseln ;-)

Danke & Mfg
Peter

[Auge]

Hallo

Wenn der Benutzer ohne JavaScript nur ein zwei Filteroptionen ändert und die Seite neu lädt, ist das für ihn das Gleiche.
Ich denke, dass der Durchschnitt etwa bei 4 bis 12 versch. Angaben liegen wird. Von daher mein Einwand. Oder ich warte eventuell ein paar Milisekunden, um dem Benutzer die Moeglichkeit einzuraeumen, weitere Optionen einzustellen bzw. dass schnell hintereinander gesetzte Filter zugleich uebernommen werde.

Nur, um auszuschließen, dass wir nicht aneinander vorbeireden: Wenn ich die Filtermöglichkeiten, die mir bisher in der Wildnis begegneten, als gedankliches Vorbild nehme, sieht das Szenario wie folgt aus.

Ein Formular bietet mir verschiedene Möglichkeiten, eine Vorauswahl zu treffen. Abhängig davon, welche Wahl ich treffe, erscheinen entweder neue Auswahlmöglichkeiten oder die bestehenden Auswahlmöglichkeiten werden auf die der/den Vorauswahl(en) betreffenden Auswahlpunkte eingeschränkt. Zum Schluss wird das mit den gewählten Punkten ausgefüllte Formular normal an den Server gesandt.

Das machst du dann doch mit JavaScript. Wenn das Formular endgültig, nach Festlegung aller Filteroptionen abgesendet wird, werden auch alle Parameter mitgesendet und, so die Übermittlungsmethode GET ist, in der URL erscheinen.
Da hakt es jetzt ein wenig bei mir.
Das Absenden des Formulares laeuft doch asynchron und im Hintergrund. Mit JavaScript (ich nutze JQuery) mache ich ein serialize() auf das Formular und sende die Daten an das Backend. Wo genau kommt bei diesem Vorgang die Adresszeile ins Spiel?

Ich ging vom oben skizzierten Szenario aus. Während des Auswahlprozesses wird mit JavaScript und/oder Ajax gearbeitet (so es geht) und das vollständig ausgefüllte Formular wird normal abgeschickt.

Es ist, gerade bei umfangreichen Auswahlmöglichkeiten mit starken Abhängigkeiten zwischen den wählbaren Werten eine Verbesserung.
S.o. Aber bei Formularen ohne Abhaengigkeit sehe ich da leider immernoch meine Zweifel.

Du schränktst per Vorwahl Auswahlmöglichkeiten ein ohne dabei Abhängigkeiten zu generieren? Hmmm, ich glaube, wir reden wirklich aneinander vorbei.

Tschö, Auge

[Peter Nack]

Hallo Auge,

Ein Formular bietet mir verschiedene Möglichkeiten, eine Vorauswahl zu treffen. Abhängig davon, welche Wahl ich treffe, erscheinen entweder neue Auswahlmöglichkeiten oder die bestehenden Auswahlmöglichkeiten werden auf die der/den Vorauswahl(en) betreffenden Auswahlpunkte eingeschränkt. Zum Schluss wird das mit den gewählten Punkten ausgefüllte Formular normal an den Server gesandt.

Nicht ganz, aber schon nah dran.

• Benutzer geht auf Seite
• dort werden Trefferergebnisse angezeigt (ungefiltert, mit Seitenzaehler)
• Auf dieser Seite wird auch der Filter angezeigt (das Formular)
• Benutzer aendert dort einen Wert
    [Nun gibt es zwei Moeglichkeiten, um die es mir hier geht]
    a)
      - Formular wird via AJAX an den Server gesendet
      - Ergebnisliste wird aktualisiert
    b)
      - Formular wartet auf weitere Filtereinstellungen
      - Formular wird erst nach Betaetigung des Submit-Buttons abgeschickt

Da es sein kann, dass der Filter saemtliche Ergebnisse der aktuellen Liste ausfiltert, muessen die Daten neu vom Server geladen werden. Vielleicht ist der Begriff "Filter" etwas irrefuehrend, da es sich eigentlich um eine neue (gefilterte) Suche handelt.

Ich ging vom oben skizzierten Szenario aus. Während des Auswahlprozesses wird mit JavaScript und/oder Ajax gearbeitet (so es geht) und das vollständig ausgefüllte Formular wird normal abgeschickt.

S.o. Das ist ja genau mein Anliegen. Auf den gaengigen Webseiten, die solche Funktionen bieten, laeuft das Absenden des Formulares im Hintergrund. Die Seite wird nicht neu geladen oder abgesendet, lediglich die Ergebnisliste wird aktualisiert (bei jeder Aenderung an dem Filter-/Suchformular).

Du schränktst per Vorwahl Auswahlmöglichkeiten ein ohne dabei Abhängigkeiten zu generieren? Hmmm, ich glaube, wir reden wirklich aneinander vorbei.

Nun verstehe ich dich nicht mehr ;-)
Die Filterfunktionen haengen nicht voneinander ab. Also es gibt keine "Hersteller -> Typ -> Model"-Auswahl.

Danke & MfG
Peter

[Gunnar Bittersmann]

@@Peter Nack:

nuqneH

Doch was mich daran zb stoert:

• Filterparameter sind nicht in der URL vorhanden (zum. nicht ohne weiteren Aufwand)

Den Aufwand kann man ja durchaus betreiben; er ist ja nicht wirklich groß. Eher minimal.

• Einstellungen mehrerer Filteroptionen ist recht umstaendlich (da jedesmal ein Reload der Suchergebnisse angestoszen wird)

Nicht, wenn alle Daten schon beim Client sind. (Was ja zu vermuten ist, wenn du diese filtern willst, also nur einen ausgewählten Teil davon anzeigen.)

• durch eben diese Reloads findet ein erheblicher Overhead statt

Kein Reload, kein Overhead. Sondern Reaktion des Systems auf Nutzeraktion in Nullkommanichts.

Qapla'

[Peter Nack]

Hallo Gunnar,

danke fuer deine Antwort.

Deinem Beitrag entnehme ich eine positive Grundstimmung zu dem Besagtem.

• Filterparameter sind nicht in der URL vorhanden
  Den Aufwand kann man ja durchaus betreiben; er ist ja nicht wirklich groß. Eher minimal.

Wie meinen? Mittels location.href und der Raute?

• Reload der Suchergebnisse angestoszen wird)
  Nicht, wenn alle Daten schon beim Client sind. (Was ja zu vermuten ist, wenn du diese filtern willst, also nur einen ausgewählten Teil davon anzeigen.)

Nein, das hast du falsch verstanden. Da es sich um hunderte von Daten handeln kann, werden die natuerlich nicht alle auf einmal ausgelesen / dargestellt, sondern mit einem Seitenzaehler versehen. Somit sind jeweils nur die Daten fuer eine einzige Seite beim Client.

• durch eben diese Reloads findet ein erheblicher Overhead statt
  Kein Reload, kein Overhead.

S.o.

Sondern Reaktion des Systems auf Nutzeraktion in Nullkommanichts.

Ich entnehme, dass das, was ich in meinem Posting als "frisch" bezeichnet habe, also auch auf dich zutrifft.

Danke & MfG
Peter Nack

[ChrisB]

Hi,

[...] so stelle ich fest, dass viele solcher Seiten direkt beim Veraendern eines einzigen Filterwertes das gesamte Formular erneut auswerten und die Suchergebnisse "in Echtzeit" gefiltert und neu dargestellt werden.
Aber gerade fuer Benutzer, welche nicht nur ein zwei Filteroptionen aendern moechten, stellt sich dieses Vorgehen meiner Meinung nach als ziemlich Benutzerunfreundlich heraus.
Allerdings, ausgehend von der ahnungslosen bzw. allgemeinen Anwendermasse, kann ich mir auch gut vorstellen, dass der "moderne Benutzer" dieses Verhalten bereits erwartet und sich wundern wird, warum die Filterung "nicht funktioniert".

Na dann mache das Verhalten doch konfigurierbar.

Wenn du denkst, dass Otto Normalnutzer es so erwartet und enttäuscht oder verwirrt wäre, wenn dem nicht so ist - dann habe dieses per Default aktiviert.

Für den Nutzer, der mehr Filter nutzen möchte als der Normalo, bietest du dann das optional auswählbare Verhalten an, dass Änderungen an einzelnen Filtern erst mal nichts bewirken - und die Werte erst dann zum Server übermittelt und dort dann die Daten neu zusammengestellt werden, wenn der Nutzer dies über einen Button "Filter anwenden!" o.ä. explizit anfordert.

MfG ChrisB

[Peter Nack]

Hallo Chris,

ja, daran habe ich auch schon gedacht.
Das schwierige wird es sein diese Funktion leicht verstaendlich in das Formular zu integrieren. Ich gehe davon aus, dass, in Bezug auf Otto-Normal-Verbraucher, eine Funktion wie "Nicht sofort filtern" o.ae. recht verwirrend sein wird. Aber das liesze sich dann ja ueber die Default-Funktion vereinfachen. Was der Anwender nicht kennt, klickt er halt nicht.

Mal schauen.. besten Dank.

MfG
Peter

[ChrisB]

Hi,

Das schwierige wird es sein diese Funktion leicht verstaendlich in das Formular zu integrieren. Ich gehe davon aus, dass, in Bezug auf Otto-Normal-Verbraucher, eine Funktion wie "Nicht sofort filtern" o.ae. recht verwirrend sein wird.

Otto Normalnutzer verwirrst du eigentlich immer ab dem Zeitpunkt, wo du überhaupt irgendwelche Optionen anbietest.

Der intelligente(re) Nutzer überlegt, was könnte ich mit diesen Optionen anfangen, welchen Nutzen könnten sie mir bringen - und vielleicht probiert er auch mal aus, und weiss das Ergebnis auch zu interpretieren.

Aber das liesze sich dann ja ueber die Default-Funktion vereinfachen. Was der Anwender nicht kennt, klickt er halt nicht.

Eben - für mich eines der grundlegendsten UI-Gesetze überhaupt :-)

Klar ärgere ich mich auch manchmal, wenn die für mich interessanten Optionen in Webseiten/Applikationen/Programmen zu sehr versteckt sind (ab und zu bspw. muss man sie erst mal als "Experten-Einstellungen" aktivieren).

Aber wenn man sie direkter zugänglich macht, dann verführt man eben auch allzu oft den DAU dazu, damit herumzuspielen - und sich anschliessend zu wundern, warum das Verhalten jetzt anders als "gewohnt" ist, oder warum vielleicht gar nichts mehr "funzt".

Hier muss man seine potentielle Nutzergruppe auch ein wenig evaluieren, und sich davon abhängig überlegen, was man wo und wie einfach zugänglich macht.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Hier muss man seine potentielle Nutzergruppe auch ein wenig evaluieren, und sich davon abhängig überlegen, was man wo und wie einfach zugänglich macht.

Nicht nur hier, sondern immer. ↗http://www.alistapart.com/articles/the-myth-of-usability-testing/

Qapla'