Regine 23.01.
Vorher-Nachher – S. PDF
Das Agenturbeispiel (s. PDF) ist eigentlich nicht schlecht, aber mein Eindruck bleibt: AGO-fremd. Die Wellenform und die türkise Farbe machen es aus. Ich bin somit auch nach nochmals drüber Nachdenken zum üblichen Kacheldesign gekommen, mit einer asymmetrischen Variation, die ich nicht schlecht finde. Eine ganz feine grüne Linie um das Gesamtbild könnte gut sein, wenn das Asymmetrische okay ist. Bei der Standardversion keine Linie… würde ich sagen.
Thump up Icon – s. PDF
Das ist alles andere als einfach! Ich habe Dir jetzt nur ein paar Ideen reingestellt. Und eigentlich auch nur, um klar zu machen, dass der „alte” Daumen immerhin einigermaßen sichtbar war. Alles ziemlich frickelig. Ich habe etwas rumprobiert: selbst ein weißer Daumen auf einer runden Fläche ist weniger sichtbar, als der alte Daumen….
Und nun? Schau mal drauf. ggf fällt dir daraufhin was ein …
Regine 15.01.
Gutscheinaktion: Wie besprochen das vom Dezember, ein bissle schon geglättet. S.u.
ABER… Ich habe mir heute die mobile Version angeschaut, weil ich beim frischen Draufhauen auf die Dez-Version den Impuls hatte, dass das mobil mit den Kästen nicht so klasse ist. Zu sinnlos, wenn es nur ein nettes Layout ist. Find ich jedenfalls. Es sei denn die Kästen werden interaktiv. Sprich, man klick sie an und kann sein Krams einsenden. Deshalb ist auf Seite 4 eine andere Möglichkeit. Gib am besten erstmal deinen Eindruck dazu. Es wär ein jedem Fall besser als das Alte. Aber obs genug eyecandy für dich hat …?? Dieses Wort …. :D. Am besten st es, wenn du mir sagst, was dir gefällt und was nicht. Dann habe ich einen Anhaltspunkt. Wenn es nur „nicht eyecandy” genug ist, hilft mir das immer wenig.
Wäre es grundsätzlich nicht besser mobil orientiert zu layouten? Ich hatte das vor Weihnachen aufgrund von Stress außen vor gelassen, um dir erstmal was an die Hand zu geben. Aber je mehr ich frisch draufschaue, sehe ich mobil als wichtiger an.
Idee: Man könnte ja mindestens, wenn man mit „Kästen” operiert, mobil eine Verlinkung (Anker) Eingabefeld unten machen.
Icons:
Erstmal eine Auswahl, was man überhaupt an Kombis machen könnte:
Wenn du die Symbole gut findest, dann schaue ich bei Vectorstock, obs was besseres gibt. Das Auto ist und bleibt natürlich der DHL-Wagen und nach rechts fahrend.
Bilder, vorher nachher:
Also das erste Beispiel unten ist doch gefällig. Finde ich. Wellenform ist zwar etwas AGO-fremd, aber ansonsten sieht es grafisch gut aus. Vlt. einfach die Welle rausnehmen? Gibt es ja schon in der Art hier:
Die Übergänge von Foto zu Foto (vorher, nachher) sind auch fließend, so wie die Agentur es gemacht hat. Ansonsten eben ohne Zwischenraum, s. Bild 1 unten.
Ich weiß nicht, ob der Infokreis sein muss. Das finde ich eher als überflüssigen Agenturkrams. Aber eine Grundinfo zum Produkt (s. PDF) ist nicht schlecht.
Edit 21.01.: Lass mich noch etwas drüber brüten. Da die Agenturgrafik AGOfremd ist und was ich dir unten angehängt habe, etwas dröge … vlt gibts ne gute Zwischenlösung.
Mike, 12.01.
Hier sind ein paar Vorher-Nachher-Bilder von Kollegen:
Teilweise wurden aber auch einfach die ollen Sachen übernommen:
Mike 03.01.26
Hier sind ein paar Ideen von ChatGPT zu individuellen Icons:
Mike 02.01.26
Hallo Regine, Du hast noch Urlaub. Ich werde aber trotzdem schon mal ein wenig posten, sonst verliere ich den Überblick. Ich habe noch weitere Kästen entsorgt und Details gefixt. Hier habe ich den Schatten der Kacheln nach innen verlegt, so dass die Kacheln nun seitlich immer mit dem Rahmen darüber abschließen:
https://www.agoshop.de/gruenbelagentferner/ago-quart/
Hier ist die alte Version:
Hier sind auch die Kästen weg:
Auf der französischen Seite ist praktisch bei allen Details noch der alte Stand. Da kannst Du es im direkten Vergleich sehen:
https://www.agoshop.fr/anti-algues-lichen-mousse/ago-quart/
Das lasse ich mal so, bis wir endgültig entschieden haben.
Beio der dynamischen Versandzeit bin ich noch unsicher, ob die mobile Version wirklich besser ist:
Desktop:
Mobil:
Das dürfte von mir aus noch ein wenig mehr Eye Candy haben. Ich habe das technisch noch ziemlich aufgebohrt, so dass das Icon für drei Lieferzeiten angepasst werden kann: „Heute“, „morgen“ und „nächster Werktag“. Hier wäre Deine Kreativität gefragt, dass das noch ein wenig flotter ist. Die aktuelle Version ist mir etwas zu generisch.
Mike 19.12.
So, hier sind mal zwei Varianten für die dynamische Lieferzeit:
Und mobil, worauf es ja mehr ankommt:
Ist schon viel besser, aber es könnte noch etwas mehr für’s Auge haben.
An dieser Stelle fällt die Farbe der Schrift besonders ins Auge. Das war ja auch mal die Frage, ob man nicht zu einem neutralen Grau zurückgehen sollte. Das ist mir jetzt etwas zu unruhig. Anfangs hatte wir ja viel weniger Elemente. Jetzt könnte das aber immer etwas zurückhaltender sein, oder?
Regine 18.12.
Fugentape: Da ich kein Vorher-/Nachherbild im Kopf habe, kann ich nur vom Jetzt bewerten und das sieht gut aus. Solche Logos sind nicht leicht einzugliedern.
Aufzählungshaken: Ich glaube, ich hatte es schon geschrieben … da es mir derzeit als Marginalie erscheint würde ich nur die Farbe ändern. Das sind zwei Farbwerte, die ich passend fände: Mittelgrün heller #77a643, Mittelgrün #5d9844. Wie immer ein Ausprobieren. Tendenz aber das hellere Mittelgrün. Wobei diese grünen Haken dann natürlich farblich überall konsistent sein sollten. Ich meine damit nicht nur bei den Aufzählungen, sondern auch diese weißen Haken in grünem Kreis müssten dasselbe grün haben. In der Hoffnung, dass es sich nicht mit „lieferbar” (Kategorieseiten) beißt.
Preis unter Produktname – oben oder vor dem Warenkorb: War ich bislang nicht drauf eingegangen … Hat beides sein Gutes. Heute sah ich bei einer Cookieverseuchten Ansicht den Preis oben und fand es genau richtig. Das Argument von Dir ist auch nicht zu verachten. Leider keine abschließende Bewertung möglich. Gefühlt: Preis oben. Kopfgesteuert und der Reduktion wegen: unten.
Headlines in der Beschreibung (Produkte): Keine Ahnung ob du das auch auf der Liste hast, die müssen größer. Bzw. die ganze Beschreibung muss klarer gegliedert werden. Entweder die Linie zw zwei Themenblöcken oder, wie unten, nach dem Button muss normal keine Linie sein.
Mike, 18.12.25
Ich habe eine Kleinigkeit verbessert, die aber optisch viel ausmacht. Die Graphik mit dem Fugentape war irgendwie immer zu viel mit dem Made in Germany und passt auch nicht in die Liste. Jetzt habe ich es besser eingebunden:
Deine Screenshots sehen für mich so aus, als würden sie runterskaliert werden. Im PDF waren sie nicht besser. Hier sind sie nur einfach noch kleiner. Ist nicht irre schlimm, ich sehe ja, was Du meinst.
Regine
Die Idee mit den Kacheln ist gut. Bin aber gespannt wie du das hinbekommst bei den ganz kleinen Bildschirmen.
Hier mein Input von heute. Ich mache dann Schluss die Entzündung ist schon wieder richtig kräftig.
Lieferzeit
… wieso haben die Scs so schlechte Quali? Außerdem ziemlich groß. Extra in InDesign gemacht und Scs vom Desktop. Ich schicke Dir das PDF parallel per Mail, dann kannst du die Kommentare lesen. Ich bin zu platt für neu machen … sry.
Das sind meine Fav’s:
Weiterer Input
Abstand „Fragen“ zu Warenkorb + Linie + Lieferzeitbeispiele ansatzweise eingebaut.
Antwort von Mike:
Ja, die dynamische Lieferzeit ist noch immer ein Thema. Hier ist der Link zu den Beispielen.
Wegen der Variantenkacheln: Ich werde mal schauen, ob ich den Titel bei allen Kacheln so klein machen kann, dass die Dinger mobil nicht so groß sein müssen. Das liegt aktuell nur am Titel. Da würde man schon einges gewinnen:
17.12.25
Ich hatte ja gestern schon geschrieben, dass es richtig was gebracht hat, das Aufräumen und Ordnen. :-)… Jetzt noch Minianmerkungen von mir:
Ich würde etwas „Luft” zw. Fragezeichen und Preis bringen. Ggf Linie zw. Fragezeichen und Preis? Müsste man wie immer anschauen. Der Preis erschien mir spontan immer noch etwas klein. Aber deutlich besser als vorher. Ich vermute, dass Headline und Preis eins sind, technisch größenmäßig.?
2. Dann die Frage, ob man noch klarer machen sollte/kann, dass „Fragen zum Artikel” ein Link ist. Unterstreichen ist natürlich immer eine Möglichkeit. Für ganze Blinde/Unwissende….
3. Brauchst du noch Input zur Dynamisierung der Bestellung/Lieferung selber Tag? Du hattest mir irgendwo eine Link zu einer Übersicht der verschiedenen Grafiken gegen. Falls nicht auffindbar, melde ich mich, sofern du noch Input brauchst. Jetzt haben wir ja die Stelle wo es steht und können besser entscheiden.
4. Hast du über eine Lösung für die Setauswahl schon impetto? Ich grübel ab und an drauf rum und bin derzeit bei: Linie unter „Lieferung am gleichen Tag” (Die Linie sind so fein, dass sie finde ich nicht stören) + automatische Hochscrollen bei Klick auf anderes Set. Ich weiß, du warst nicht so begeistert. Aber mit einem Satz wie „Das Set passt nicht? Dann bitte hier das Passende auswählen.” Ja, und dann? Weiß wieder keiner, dass ganze oben das Set erscheint … :/
5. Abgesehen von Aufzählungen netter und ggf den Thump up bei Kundenstimmen erneuern, bleibt dann nach der untere Sermon zur Beschreibung. Da bin ich mit den Heads noch nicht d’accord. Kategorien sind ja auch noch dran? Oder ist das schon vom Tisch?
12.12.2025
Ich habe die meisten Details auf der Produktseite geändert. Das sieht schon sehr aufgeräumt aus. Bin mir aber nicht sicher, ob man die gesamten Preisangaben nicht nach unten ziehen sollte:
Dann könnte der Hinweis auf den Bestellwert wegfallen, weil das eh bei den grünen Versandinfos kommt. Ich bin etwas unsicher, weil deutschen Kunden der Preis natürlich extrem wichtig ist. Andererseits bollert einem das gleich ins Gesicht, noch bevor man wirklich Infos sehen kann. Man könnte ja die Bullet List noch etwas kürzen. Was meinst Du?
So könnte das aussehen:
Ich habe jetzt ungelogen fast 2 Stunden rumgemacht, um die Lieferzeit in eine Zeile mit dem Versand zu kriegen. Ich sach Dir: für die letzten 5 % braucht man 95 % der Arbeit!
Das mit dem Bestellwert ab 20€ hatten wir ja schon. Ich würde es wagen wegzunehmen. Aber entscheide das bitte du. Die Mobilversion ist oke mit Bestellwert, Desktop nicht. Da müsste der Bestellwert weg, damit es gut aussieht. Ich wäre für weg.
Sehe gerade, dass es auf Desktop und mobil draußen ist. Leider sehe ich auf mobil auch derzeit störende größere Lücke, soll das?
wieso sieht der direkt SC meines handys so sch… aus? Das ist ärgerlich. Denn es ist eh schon umständlich SCs von handy, auf Mail zu schicken und dann hier einzustellen. Die Desktopansicht, so sagtest du ist nachrangig. Macht also wenig Sinn SCs vom Desktop zu nehmen. GGF musst du Vorlieb mit der oberen Quali nehmen… :/
Kacheln unter dem Produktbild
oje, das tut mir leid, dass du ewig an etwas bastelst, was du dann eigentlich nicht gut findest. Aber genau das wäre mein Vorschlag gewesen. Der ist also vom Tisch.
Die Kacheln kleiner zu machen, halte ich für einen sehr guten Weg. Man müsste es in der Anwendung sehen.
Gedöns bei Literangabe?
JA! Als ich las dachte ich, warum dann nicht Reihenfolge ändern und ggf etwas absetzen/Space/what ever dazwischen.? Das Auge braucht Breaks. Vlt hilft das auch den Wahnsinn an Angaben besser aufzunehmen … wir werden sehen.
Das mit dem Bestellwert …. hm … das wäre fein wenn es weg wäre. Wenn Herr Schimmelmann nicht meckert, würde ich es machen. Es steht doch im Header.
Mir fällt beim heutigen kurzen Anschauen noch einiges auf. Aber du schreibst ja, dass genau in dem Bereich des Produktes (Foto oben bis einschl. Warenkorb) nicht viel gemacht werden soll, richtig?
Warenkorb-Button
Warenkorb OHNE Kasten wäre definitiv meine Wahl. Du wolltest doch weniger Kästen, oder?
Nach nochmal draufhauen, mobil, bin ich wieder am rudern. Man, nicht einfach … Tendenz wäre dennoch (5% mehr pro als mit Kasten), den Kasten auf Breite des ersten Setangebots darunter zu bringen, dann hat es wieder Struktur durch Bündigkeit.
Das Detail: Warum nicht „28,90€/l” neben „Inhalt: 1l”? So spart man Platz nach unten.
Die Idee finde ich gut, aber das sieht halt auch schnell unübersichtlich aus:
Wobei es mobil eigentlich gut ist:
Es spart aber realistisch auch nur eine Zeile. Die Angaben sind leider fast alle vorgeschrieben. Der Hinweis auf den Bestellwert nicht. Aber den finde ich sinnvoll.
Ich habe jetzt ungelogen fast 2 Stunden rumgemacht, um die Lieferzeit in eine Zeile mit dem Versand zu kriegen. Ich sach Dir: für die letzten 5 % braucht man 95 % der Arbeit!
Kacheln unter dem Produktbild
Ich will nicht erst zig Kacheln im Blick haben, das ist ein echter „Störer” auf mobil, bevor ich z.B. zum Produktnamen komme.
Wie wäre es so auf mobil?
Ich habe an diesem Problem jetzt wirklich EWIG gesessen. Das ist leider weitaus komplexer, als ich dachte. Das Plugin für die obige Lösung möchte ich eigentlich nicht einsetzen, weil es so ziemlich alles hat, was ich an Plugins hasse. Wäre eine Alternative, die Bilder einfach kleiner zu machen?
Viel erkennen kann man so oder so nicht. Die kleineren Thumbnails würden dann mobil aber kaum mehr Platz wegnehmen als das Karussell. Ansonsten würde ich das zunächst zurückstellen. Ich kann für solche Details nicht so viel Zeit verbraten. Hier stehen Aufwand und Ergebnis in keiner Relation mehr.
Gedöns bei Literangabe?
Das hatte zunächst technische Gründe. In der Bullet List sind die ersten Punkte für alle Varianten gleich, die letzten Punkte werden zusätzlich eingefügt. Teilweise ist das auch recht viel. Direkt bei der Literangabe würde diesen Block zu weit auseinanderreißen, glaube ich:
Wie wäre es, wenn ich die Reihenfolge tausche, so dass die spezifischen Angaben vor den allgemeinen Angaben kommen? Man könnte auch „Bestellwert“ weglassen. Dann würde alles unterdem Preis in 2 Zeilen passen.
Warenkorb-Button
Ich den Kasten um den Warenkorb-Button gemacht, damit es auf großen Monitoren etwas aufgeräumter aussieht. Mobil ist das aber Quatsch. Wie wäre es so?
Man würde auch Platz sparen, weil das dann nie zweizeilig würde. Im Vergleich nochmals vorher:
Mobil hat das überhaupt keinen Vorteil und braucht sehr viel Platz, oder?
So, hier kommt der erste Einsatz. Ich möchte den Hinweis auf die Lieferzeit dynamisieren nach dem Motto: „Kaufen Sie in den nächsten 60 Minuten, dann versenden wir noch heute…“ Bisher ist das eher technisch gelöst:
https://www.agoshop.de/gruenbelagentferner/ago-quart/
Ich habe hier ein paar Varianten grob erstellt, wie das aussehen könnte.
Schau doch mal, was passen könnte.
Produktseite allgemein
Folgende Details gefallen mir noch nicht so wirklich.
Dieser Teil über dem Warenkorb-Button ist ok, aber doch auch sehr technisch:
Das ist ein sehr schwieriger Kompromiss aus Optik und Funktion. Außerdem sollte der Warenkorb-Button nicht noch deutlich weiter nach unten rutschen. Die Kundenbewertungen werden nachweislich viel genutzt. Es kann aber auch anders aussehen.
Die Auswahl der Varianten lässt sich nur mäßig anpassen. Das ist nicht besonders schön, aber es funktioniert recht gut. Die sehr deutlich Anzeige der Auswahl ist nicht zufällig, sondern das Ergebnis der Umfragen. Viele User wussten nicht genau, was sie überhaupt ausgewählt hatten:
Bei den folgenden Angaben ist die Position so weit oben teilweise gesetztlich vorgeschrieben. Lieferzeit: Siehe oben. Mir ist das alles etwas zu kastenlastig. Ich habe das so gemacht, weil ich keine bessere Idee hatte, ein klares Layout ohne Boxen zu machen. So machen das halt Laien:
Das gilt analog auch für die Dokumente:
Der Produkttext ist insgesamt sehr bleiwüstig. Der Inhalt sollte aber halt schon irgendwie rein. Etwas mehr Weißraum wäre vielleicht ganz gut. Die Hierarchie in der Typo ist auch noch recht grob.
Antwort Regine
Ich habe mich jetzt erstmal eingefunden in die Aufgaben, s.o.
Fazit
Neben den Grundfragen unter 1 und 3 … willst du die Grundstruktur der Produktseite also NICHT angehen (es wäre kleine, aber ich vermute recht hilfreiche Korrekturen) oder doch? Das ist wie gesagt, schon wichtig bevor man über „Layout Lieferzeiten” und „Kästen oder nicht Kästen” spricht.
P.S: muss ich ggf dazuschreiben bevor du meinen Ton falsch verstehst: Ist nicht unfreundlich gemeint wenn ich schreibe „Wiiiiieso ist das so und das so?” Das sind Fragen, die ich mir im Prozess gestellt habe. Und wenn ich etwas untersuche, kann das durchaus mal so von mir kommen. Bin dann sehr zielgerichtet …
Fazitfrage
Soll, kann ich nicht erstmal die Produktseite überfliegen und meine Idee zu Struktur und dergleichen, so schnell wie geht zusammenfassen? Du sagst immer „quick and dirty”. Davon kannst du dir das rauspicken, was Sinn macht und auch umsetzbar ist. Wobei ich einige Bereiche weiter unten, vermutlich, nicht anrühre. Es geht mir vornehmlich um den Kaufbereich und die wichtigen Infos.