Die Optik des Suchpanels

  • Affected Version
    WoltLab Suite 3.0

    Einen schönen Mittag zusammen,

    ich wollte mich erkundigen, ob das Suchpanel im gegenwärtigen Zustand prinzipiell so bleibt oder ob es noch Spielraum für Anpassungen gäbe?

    Wenn ich das so direkt äußern kann, es gibt zwei Dinge, dir mir noch nicht 100%ig gefallen und wenn das weitere Nutzer/Tester ähnlich empfinden, könnte man dann eine Änderung in Betracht ziehen?

    Von diesen beiden Dingen spreche ich jetzt:


    Optik.PNG



    Optik 2.PNG



    Im ersten Screenshot sieht man linker Hand, dass das Dropdown-Subpanel nicht bündig zur eigentlichen Leiste steht. Ist das so gewollt und daher korrekt oder müsste es nicht - das war mein intuitiver Gedanke - wirklich bündig stehen?


    Im zweiten Screenshot ist es die rote Umrandung des Suchfeldes. Die Umrandung ist also nicht klar eingefasst, sondern scheint nach links und rechts hin "hineinzulaufen". Ich denke, das war so nicht beabsichtigt...?


    Der von mir gerade genutzte Browser ist Firefox, wenn dieser Hinweis relevant sein sollte.


    Es grüßt freundlich

    Gabbid

    • Official Post

    Hallo,

    als Notiz für den Entwickler, der sich das ansieht: Die rote Umrandung wird vom Firefox erzeugt, wenn man die Suche absendet, ohne etwas einzugeben (required-Attribut). Ist vermutlich ein Box-Shadow.

  • Das sollte genügen:

    CSS
    input:required {
        box-shadow:none;
    }

    Zum ersten:
    Wenn man es bündig zum gesamten Eingabefeld machen würde, müsste man es aber auch an dessen unteren Rand verschieben. Das sieht vermutlich dann ganz blöd aus.

  • Quote from Gabbid
    Im ersten Screenshot sieht man linker Hand, dass das Dropdown-Subpanel nicht bündig zur eigentlichen Leiste steht. Ist das so gewollt und daher korrekt oder müsste es nicht - das war mein intuitiver Gedanke - wirklich bündig stehen?

    Ich finde eher, dass der rechte Bereich des Suchfeldes nicht ganz stimmig ist. Der linke Bereich ist so gelungen, aber sicher Geschmackssache. ;)

    2016-08-19_144457.jpg

    Quote from Gabbid
    Der von mir gerade genutzte Browser ist Firefox, wenn dieser Hinweis relevant sein sollte.

    Das sicher, denn beim Chrome habe ich dieses Verhalten nicht.

    Grüsse aus Wien, Regards from Vienna

    Saccil

  • Hallo die Herren,

    ich wollte mich gerne kurz zu euren Gedanken bezüglich der Optik des Suchpanels einklinken. Das Gute ist, wir alle werden unterschiedliche Erwartungen, Vorstellungen und auch Hintergründe haben, also kann man das schön vergleichen. Fühlt euch also bitte frei eure Idealversion zu beschreiben oder meine Gedanken direkt niederzuringen. ;)


    Quote from Sunwater
    Ich finde eher, dass der rechte Bereich des Suchfeldes nicht ganz stimmig ist. Der linke Bereich ist so gelungen, aber sicher Geschmackssache.;)

    Das ist interessant, würdest du mir dazu bitte eine Frage beantworten bzw. ggf. deine Vorstellung näher beschreiben können? Folgendes, Sunwater, du interpretierst das Dropdown-Menu dann tatsächlich als Submenü, würdest dann gar so weit gehen es noch etwas stärker nach rechts zu versetzen, um durch die Abgrenzung zur Leiste darüber den Sub-Status anzuzeigen?


    Quote from Black Rider
    Das sollte genügen:
    Code
    input:required {
        box-shadow:none;
    }
    Zum ersten: Wenn man es bündig zum gesamten Eingabefeld machen würde, müsste man es aber auch an dessen unteren Rand verschieben. Das sieht vermutlich dann ganz blöd aus.


    Gleich eine Gegenfrage an dich: Kannst du dir kurz einmal das Beispiel von "Duden" ansehen: http://www.duden.de/ (Beim Klick auf das Suchfeld "Alle" links) und wenn wir das so auch bei WSC haben wollten - das ginge nicht so einfach bzw. was würdest du dann mit dem Rand machen, wie ihn ändern?



    Das wird vermutlich nicht geplant worden sein, aber ich frage, weil wir ja unverbindlich alles ansprechen können: Warum haben wir eigentlich nicht ein wenig Luft zwischen dem eigentlichen Such-Feld und dem Dropdown-Menu gelassen? Wenn ich das so salopp sagen darf, es "klebt" im Moment aneinander und ich denke, das könnte man gewiss noch etwas schöner darstellen, was meint ihr?

    Das wäre ein Beispiel mit leichtem Abstand http://demo.ourtuts.com/menu/index.html

    Hier suggeriert die alternative Farbe einen Abstand http://www.menucool.com/1317/Slider-Overlays-Drop-Down-Menu

    Ein größerer bzw. markanterer Abstand durch Sprechblasen-Optik http://www.olivergast.de/wp-content/demos/menu/index.html


    Wenn wir also dem Suchfeld mit Abstand begegnen würden ;), würde das besser oder schlechter aussehen, was meint ihr spontan?


    Diese Frage stelle ich privat: Das Such-Panel als solches ist statisch, wir haben also keinen slide-out-Effekt. Das ist kein Drama, aber wiederum die Frage, wäre das ein netter Effekt oder zu viel des Guten?



    Mit Grüßen zurück :)

  • Quote from Gabbid
    Gleich eine Gegenfrage an dich: Kannst du dir kurz einmal das Beispiel von "Duden" ansehen: http://www.duden.de/ (Beim Klick auf das Suchfeld "Alle" links) und wenn wir das so auch bei WSC haben wollten - das ginge nicht so einfach bzw. was würdest du dann mit dem Rand machen, wie ihn ändern?

    Hier fehlt mir der Kontrast vom Auswahlfeld zum eigentlichen Eingabefeld der Suche, da nicht existent. Da ist das hier meiner Meinung nach besser gelöst, bringt aber natürlich das entsprechende Problem mit.

  • Quote from Gabbid
    Das ist interessant, würdest du mir dazu bitte eine Frage beantworten bzw. ggf. deine Vorstellung näher beschreiben können? Folgendes, Sunwater, du interpretierst das Dropdown-Menu dann tatsächlich als Submenü, würdest dann gar so weit gehen es noch etwas stärker nach rechts zu versetzen, um durch die Abgrenzung zur Leiste darüber den Sub-Status anzuzeigen?

    duden.de ist ein gutes Beispiel: Dropdown links/rechts bündig mit den Unterpunkten, aber eingerückt in der Leiste, so wie hier. Und dann wäre noch designtechnisch die Kontrastierung zu lösen, wo es aber auch sicher gute Ideen gäbe. Wobei ich aber der Meinung bin, dass man sich mit solch einem Thema für eine Alpha schon sehr am Millimeterpapier bewegt. ;)

    Grüsse aus Wien, Regards from Vienna

    Saccil

  • Guten Abend ihr beiden,

    vermutlich höre ich mich alleine wegen des Suchpanels schon leicht hartnäckig an, also stoppt mich, wenn ich zu detailverliebt klinge. Da ich die Such-Funktion selber gerne und oft nutze, hätte ich sie hier spontan und komplett subjektiv etwas anders dargestellt. Wenn ihr das nun lest, euch vorstellt und in Bezug zu WSC setzt, wie klingt das für euch:

    - Verkürztes Suchpanel auch direkt im Header, d.h., es ist standardmäßig immer geschlossen, klappt erst beim Mousover/Klick auf:



    - Ich würde nicht farblich in grau-weiß-grau einteilen, sondern nur grau-weiß:

    Farbe.PNG


    Das hat den Grund, dass ich denke, man sieht das Lupe-Icon auch so gut und die Dreiteilung wirkt aufgrund der Größenunterschiede nicht optimal.


    - Wir behalten das Dropdown-Menü natürlich, aber ich würde es gerne ein wenig filigraner darstellen, tatsächlich vielleicht so:

    Angenommen das sähe gut aus, könnte man eventuell testen, wie ein passendes Check-Icon davor aussehen würde? Um die Auswahl visuell zu unterstreichen (?).



    nethavn : Du bist der Designer in der Runde hier, was meinst du dazu? Passend, nicht passend, zu verspielt und daher passt es eher weniger zum WSC-Look? :/

  • Ein Hallo zusammen :)

    Die Such-Funktion ist und bleibt mit mein "Lieblingsthema", weil ich sie, wie schon erwähnt, sehr oft nutze und daher schätze. In diesem Kontext ist es nun gut möglich, dass Entwickler-Logik auf Anwender-Logik trifft und beide sich etwas skeptisch beäugen ;), aber, liebes WoltLab-Team, haben wir in Sachen Such-Funktions-Darstellung noch etwas Spielraum?

    Frei heraus, ich sehe eure Bemühungen und ihr könnt bzw. sollt es nicht jedermann Recht machen, aber im Moment wirkt die Platzierung des Suchfeldes rechter Hand zum Logo so, als wäre das Feld dort nur "abgestellt" worden. Ihr geht beim Design in die Richtung funktionaler Minimalismus mit Fokus auf kleinen Highlights (z.B. Breadcrumbs, fixierte Navigation...) und ganz subjektiv gesprochen, ich finde die Richtung schön und passend. Jetzt, mit der Such-Leiste im Logo-Bereich, wirkt es fast wieder ein wenig voll und daher meine Frage, würdet ihr eventuell noch Alternativen in Erwägung ziehen?

    Da ich euch technisch gesehen nicht präzise erklären kann, welche Alternativen denkbar wären, würde ich unverbindlich und willkürlich drei Beispiele einfügen und kurz notieren, warum es dieses Beispiel geworden ist. Eventuell ist ein Ansatz interessant für euch und die Suite 3.0?


    1. https://support.apple.com/de-de/HT201991

    Erklärung: Hier ist die Ästhetik das Highlight. Das Suchfeld-Icon ist sichtbar in der Navigation, bleibt aber geschlossen und tritt beim Klick in Aktion. So eine Lösung kombiniert Ästhetik mit Funktionalität und daher dachte ich, es würde WSC nicht schlecht zu Gesicht stehen?


    2. https://medium.com/

    Erklärung: Sliding-Effekt plus Platzierung rechts. So eine Lösung wirkt dezent, die Sliding-Bewegung setzt den Akzent, aber wir betonen das Suchfeld nicht zusätzlich durch markante Effekte (Sprechblasen-Optik, dezent pulsierender Rahmen o.ä.).


    3. https://svbtle.com/

    Erklärung: Das Suchpanel wird zusammen mit dem Userpanel, Sprachwechsler usw. komplett verschließbar gemacht. Heißt, diese Inhalte können im Prinzip wie die Foren-Sidebar bei WBB 4.1 geöffnet und geschlossen werden, wenn man die Inhalte nicht benötigt/nicht sehen möchte. Diese Lösung ist verspielter und nicht so intuitiv, daher auf Platz 3 hier.



    Bei allen drei Beispielen sieht man aber sicher, worauf ich im Kern hinaus möchte.


    - Zuerst einmal würde ich die Suchleiste neben dem Logo dort komplett entfernen, lassen wir sie also ruhig generell auf Höhe der Navigation. So haben wir den Blick auf Logo, Slogan/Claim usw. frei, denn nicht wenige Websites platzieren dort zusätzliche Inhalte (Werbebox, Pop-up usw. Wir müssen das nicht gut finden, aber der Platz bietet sich einfach für vielerlei an).

    - Intuitiv steht bei mir das Suchfeld-Icon rechts, nicht links. Von der Leselogik her würde ich das Kontrollzentrum, die Benachrichtigungen und Konversationen als relevanter einstufen, das Suchfeld landet also an Position 4.

    - Der Strich als Begrenzung zwischen den Suchfeldern (Alles, Forum...), warum das nicht direkt weglassen? Beim Mouseover sehe ich als Nutzer die farbliche Markierung/Abhebung, die Striche sind also eher dekorative Strukturelemente (?). Machen wir das simpler.

    - Gewohnheitsmäßig (?) ist das Dropdown-Suchfeld dann rechts, was wäre, wenn wir einen Blick zu den Autobauern werfen? Ob BMW, Daimler oder Audi, sie nutzen eine nicht uninteressante Methode. Willkürlich das Audi-Beispiel, weil ich dort selber schon etwas gesucht hatte: http://www.audi.de/de/brand/de.html (Beim Klick auf das Such-Icon erscheint das Feld selber dann links, bündig zur Navigation).




    Das ist wieder einiges an Text und Überlegungen, ich weiß, aber wenn Zeit da ist und etwas davon gut und machbar ist, passend für WSC klänge, würdet ihr es dann in Betracht ziehen und eventuell zumindest einmal testen?


    Es grüßt nett

    Gabbid

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!