Konkrete Vorschläge zum GH-Design

Konkrete Vorschläge zum GH-Design (32 Beiträge, 1069 Mal gelesen)

Du bist nicht angemeldet. [ Login/Registrieren ]

Nach erneuter Lektüre meines anderen Threads erscheint auch mir die von mir angebrachte Kritik relativ weit gefasst. Der Thread lässt auch einen deutlichen Wunsch der User nach Änderungen erkennen, konkrete Vorschläge sind allerdings rar. Wer nochmal nachlesen möchte, kann dies hier tun:
http://forum.geizhals.at/t738762.html

Parallel sei auch noch auf den aktuellen Design-Wettbewerb von GH verwiesen, wer Lust hat da mitzumachen, schau bitte hier rein:
http://forum.geizhals.at/t729272.html

Mir persönlich wäre zwar eine Anstellung mit Festgehalt lieber, es soll ja schließlich auch was gescheites dabei rauskommen, sonst ist alles für die Katz, aber so sind nunmal die gegebenen Möglichkeiten. Deswegen möchte ich in diesem Thread ich hier keine ausgearbeiteten CSS-Layouts bringen, sondern Vorschläge, an welchen Stellen Änderungen vernünftig sind und wie die später aussehen sollen.

Fenster-Größen

Fangen wir erstmal mit den Grundlagen an. Wie schaut die Seite für die Benutzer aus? Zuerst eine obligatorische Statistik, wie sich die Fenster-Größen momentan so verteilen, speziell für GH hab ich leider keine Zahlen, die Entwickler werden sich das vielleicht in ihren Logfiles anschauen können:
http://www.w3counter.com/globalstats.php?year=2010&month=1

Wir haben da in den Top10 ca. 90% aller Bildschirmgrößen, es sind enthalten 87% mindestens 1024x768, 55% mindestens 1280x800 und 18% mindestens 1280x1024. Die Zahlen sollen nur ungefähre Richtwerte sein, bei den größeren Auflösungen wird ja oft nicht Fullscreen gesurft. Der Anteil Smartphones und Tablets lässt sich aus der OS-Statistik mit etwa 2% schätzen. Als stark wachsende Sparte und unterwegs sehr nützlich sollten sie dennoch nicht außer Betracht bleiben.

GH-Look der Hauptseite mit verschiedenen Größen

Nachfolgend die gängigsten Größen, wer noch andere testen will, kann sich mit den Web-Developer-Tools im Firefox behelfen (Klick auf das Bild um vergrößerte Ansicht zu erhalten):

1280x1024 Hauptseite

1280x800 Hauptseite

1024x768 Hauptseite

800x480 Hauptseite oben

800x480 Hauptseite mitte

Das soweit die Grundvoraussetzungen, ein kleiner Teil der nötigen Analyse für fundierte Aussagen zu Änderungen am Design. Die jeweils zur besseren Disktutierbarkeit in eigenen Postings.

Ins Auge sticht gleich, dass die Hauptseite in keiner der Auflösungen wirklich gut aufgeteilt aussieht. Sie ist von großen Lücken zersetzt, in denen überhaupt keine Information steht, dafür gibt es Bereiche, in denen die Information äußerst dicht gepackt ist. Bei allen Auflösungen muss auch gescrollt werden, das kann also nicht der zwingende Grund sein, das so zu machen.

Werbung muss sein, das sehe ich ein. Konkreter Vorschlag hier jetzt im Content-Bereich: Die Top10 der Artikel variabel breit machen, die Anzeige an etwa gleicher Position mit etwas Abstand nach rechts (in etwa der gleich Abstand wie die Top10 nach links hat) direkt im Anschluss daran. Durch diese Maßnahme werden weniger Zeilen bei großen Bildschirmauflösungen umgebrochen.

Die 4 Sektionen sind ja schon variabel breit, das sieht man bei den kleineren Bildschirmauflösungene. Hier könnte man im Bereich unter Top10 und Advertisement dann entweder für große Bildschirmgrößen gleich alle 3 Sparten nebeneinander reihen, oder in einer float-Umgebung dann jeweils einzeln umbrechen wenn nötig. Das würde im Endeffekt dann bei kleinen Auflösungen darin enden, dass die 5 Bereiche in einer Spalte gereiht sind ohne größere weißflächige Abstände nach links oder rechts (oder im Falle der Werbung halt dann wenigstens zentriert in dieser Spalte).

So, hier wie die angedachten Änderungen aussehen würden (Klick für Fullsize!)

Geänderte Dinge: Boxen im float,
1. Top-10 Artikel
nimmt außerdem verfügbare Restbreite bis zu einer Maximalgröße ein, Link "mehr Top-100" mit in die Überschrift verschoben

2. Advertisement
gleicher Abstand zum restlichen Inhalt wie übrige Boxen

3. Top-10 Kategorien
Bei dieser Bildschirmbreite noch 2 Spalten für Top-10 Kategorien und Kleinanzeigen, bei größere 3-spaltig denkbar (feste Maximalbreite), hier leicht schmäler als Kleinanzeigen (weniger Inhalt), wenn keine Werbung angezeigt wird auf der Hauptseite sollten hier die Top-10-Kategorien Platz nehmen.

4. Kleinanzeigen
Dezente rot- und grün-Färbung für Suche/Biete, harter Umbruch vor "(Neue Kleinanzeige eintragen)" - das kommt eh nur bei riesigen Bildschirmen in eine Zeile, und bleibt somit dann konstant und übersichtlich von der kleinsten bis zur größten Auflösung

5. Forums-Themen
Gleiche Breite wie vorgehende Boxen. Auch hier Umbruch und Umformulierung wegen Überschriftsbreite.

Außerdem: Vertikaler (Zeilen-)Abstand der von kompletten Unterpunkten um 2 Pixel vergrößert.

Schatten der Navigation auf Schatten wie bei den Händlern in der Artikelübersicht angeglichen.

horizontale Linien (hr) vereinheitlich auf gepunktete wie unter der Wunschliste bisher, zusätzliche eingefügt über bepixelung.org, Newsletter-Box umdesigned.

Puh, ihr seht, das kostet alles mächtig Zeit, war jetzt nur damit beschäftigt die letzten Stunden. Und dabei isses nur mal angedacht und noch nicht mal fertig. Aber soweit, so gut, was meint ihr dazu? Welche Variante findet ihr übersichtlicher, die alte oder meinen Vorschlag?

Gruß
Mohan

Achja und bei den Kleinanzeigen wurde noch eingerückt nach [B] und [S] bei einem Zeilenumbruch, das machts auch leichter lesbar.

Die Kleinanzeigen müssten für gutes float-Design so breit wie die Top-10 Aritkel sein, die Forumsbeiträge so breit wie die Top-10 Kategorien (weil dann ohne Werbung beide rechts stehen und nicht so viel Platz wie die andren beiden brauchen).

Allerdings muss noch durch die Mindestbreite geregelt sein, dass alle 5 Boxen untereinander gleich breit sind.

Nach weiterer Überlegung glaube ich, es wäre einfacher zu managen und auch konsistenter für zukünftige Erweiterungen sowie auch evtl. leichter überblickbar, weil ja mal mit oder mal ohne Werbung angezeigt wird, wenn alle Kästen die gleiche Breite haben und die Werbung in ihrem Kasten zentriert daherkommt (und nicht rechtsbündig).

Mit table-basiertem Layout alles kein Problem, mit CSS ist das leider ein Horror ...

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

"Sechs der zehn reichsten Österreicher erhalten Agrarsubventionen" (orf.at)

"Wir haben jetzt zwei Jahre ohne Wahlen, jetzt müssen wir handeln!"
(ÖVP-Staatssekretär Reinhold Lopatka)

"Geheimdienst des Volkes" (Club2-Moderatorin über Wikileaks)

"In a society where truth becomes treason, we are in big trouble" (Ron Paul über Wikileaks)

Ich hab mir jetzt nicht exakt angeschaut, wie sie's machen, aber bei deviantart.com sind die Thumbs genau so getrennt von dem Werbekasten rechts oben wie ich mir das auch vorstelle... und die einzelnen Thumb-Elemente (bei GH dann logischerweise die Top10-Listen) fließen auch bei Resizing vom Browser-Fenster schön um. Die haben allerdings fixed-width Kästen, das könnte man noch durch eine variable Breite zusätzlich mit Mindest- und Maximal-Breite aufhübschen.

Ich hab mir jetzt nicht exakt angeschaut, wie sie's machen, aber bei
deviantart.com sind die Thumbs genau so getrennt von dem Werbekasten rechts
oben wie ich mir das auch vorstelle... und die einzelnen Thumb-Elemente (bei
GH dann logischerweise die Top10-Listen) fließen auch bei Resizing vom
Browser-Fenster schön um.

Das haben wir auf http://bepixelung.org/ auch so gelöst... Problematisch wird das aber, wenn man links und rechts fixe Bereiche hat (Navigation).

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Probleme sind doch da, um zu gelöst zu werden? Oder ist die Lösung des Problems, dass es halt schiach ausschauen wird? Challenge accepted?

Bei der kleinen Bildschirmauflösung ist allerdings für mich fraglich, warum der knappe Platz mit der doppelten Navigation belegt werden muss (Leiste über dem Suchfeld und Leiste links neben dem Content), zumal die Leiste darüber ja alles andere als schön umbricht (mit dem Reiter-Design auch schwer zu lösen).

Inwiefern kann man heutzutage erkennen, ob es sich um einen Smartphone-Nutzer handelt? Bin leider nicht ganz auf dem aktuellen Stand... ich fände es jedenfalls sehr sinnvoll, Mobile- und Home-Benutzung Design-mäßig unterschiedlich zu behandeln. In jedem Fall ist ja ein großes Ziel, den Klickaufwand niedrig zu halten, bei Smartphones ist dies allerdings bei sehr kleinen Schaltflächen äußerst frickelig zu bedienen. Auch bei großen Auflösungen finde ich persönlich diese "Seite. 1 2 3 4 [...]" Link-Größen nicht wirklich für eine gute Usability geeignet.

Die Größe, die bei Smartphones gebraucht würde, könnte man eigentlich nur durch Bildschirm-füllendes Popup herbekommen. Was da aber auch nicht von Schaden ist, die Klick/Tipp-Rate auf Touchscreens ist eh ein bisschen größer.

Die Seite kann nicht schmäler umgebrochen werden, weil der Footer "Copyright © 1997-2011 Preisvergleich Internet Services AG. Alle Rechte vorbehalten." nicht umgebrochen werden kann. Das ist zwar vielleicht (unabsichtlich oder absichtlich sei dahingestellt) so gewollt, aber gerade auf compare.eu bringt euch das ein bisschen in die Bredouille. Vielleicht erlaubt ihr da noch irgendwie einen Umbruch, dann könnte man auch mit dem Smartphone hochkant noch einigermaßen gut surfen...

Die Seite kann nicht schmäler umgebrochen werden, weil der Footer "Copyright
© 1997-2011 Preisvergleich Internet Services AG. Alle Rechte vorbehalten."
nicht umgebrochen werden kann.

Der Footer ist eigentlich skalierbar, aber wir haben für Smartphones einen viewport gesetzt (für eine Mindestbreite, mit der die Seiten an sich noch lesbar sind).

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

und du glaubst ernsthaft irgendwer wird deine ganzen Postings lesen? wohl kaum

Du hast ja auch gesagt "ist alles top" schätz ich. Aber von denen, die gesagt haben, könnte man besser machen, da würde mich ein Feedback durchaus interessieren. Und ich finde immer noch, es geht besser, sogar besser als das was ich da gesagt habe höchstwahrscheinlich.

Aber deine Lethargie in Ehren, danke für den Beitrag!

würde alles unter 1024x768 nicht mehr supporten.

i-was mit 800 mal bla bla bla dürfte nicht mehr up2date sein, oder irre ich ?

würde alles unter 1024x768 nicht mehr supporten.

Du hast wohl noch kein iPad gesehen ...

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Du hast wohl noch kein iPad gesehen ...

Nuja, die haben ja sogar 1024x768, aber Smartphones halt nicht.

Design ist nicht so wichtig.

!!!!!!!!! WICHTIG IST DASS DIE SEITE SCHNELL BLEIBT !!!!!!!!!!!

Das ist sogar essentiell in meinen Augen!

Schnell mal bei GH kuken, da soll man nicht unnötig warten müssen!!

Das stelle ich doch nicht in Frage?! Klar soll die Seite schnell bleiben. Aber man durchaus die anzubietende Informationen so aufbereiten, dass man noch besser und schneller dahin kommt, was man auch nachschauen will. Auch einfach weil man es besser erfassen kann, optisch. Und das ist eine reine Design-Frage. Da führen auch ganz viele Ausrufe-Zeichen nicht dran vorbei.

Davon abgesehen:

Schlichtes Design ist auch ein Design.
Es gibt kein Nicht-Design.
Schnelligkeit der Seite ist eine Design-Frage.

Nuja, die haben ja sogar 1024x768, aber Smartphones halt nicht.

Vorsicht, die haben im Normalfall (= aufrecht gehalten) 768x1024! Wesentlicher Unterschied...

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Hehe, ok

Wobei mich da mal ne Statistik interessieren würde, wie das iPad beim Surfen tatsächlich öfter gehalten wird, hochkant (wie eBook Reader) oder quer (wie Monitor) - zumal ja die meisten Webseiten bei Hochkant-Nutzung oft über den Rand rausragen... und scrollen muss man sowieso... aber ich hab kein iPad (btw. sind iPad-Besitzer überhaupt Geizhälse?)

Ich habe ja eins, meistens ist hochkant-Nutzung angenehmer (u.A. wohl weil beim Halten mit einer Hand von der Seite die Hebelwirkung geringer ist und weil das Format einfach von Büchern bekannt ist). Am Tisch liegend wäre wohl quer gängiger, aber nachdem es keine flache Rückseite hat und man sich darüber beugen müßte, ist das wohl nicht so angenehm.

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Sieht man das dann eigentlich in den Logfiles, wenn der Browser ne Seite mit 768x1024 aufruft?

Nein, das loggen wir nicht mit, da man dafür extra JS benötigen würde. Wir verwenden aber auf http://skinflint.co.uk/ Google Analytics, dort sieht man das (falls es überhaupt extra erfaßt wird).

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Ich versteh auch bei den Unterseiten die Platzeinteilung nicht ganz. Werbung würde hier links vom Featured Merchant eingeblendet, der Platz rechts bleibt einfach nur leer, dafür werden in anderen Felder z.T. vier- bis sechsfache Zeilenumbrüche hingenommen, obwohl wirklich noch mehr als genug Platz vorhanden wäre?

Parallel sei auch noch auf den aktuellen Design-Wettbewerb von GH verwiesen

Hmmm... wenn ich das richtig verstanden habe ist das nur eine Vorbereitung für einen Wettbewerb. Momentaner Status: unbekannt!

Wenn ich das richtig verstanden habe, darf das Ergebnis dieses Wettbewerbs auch nur ein CSS-Lack für die Seite sein. Manchmal sind aber halt auch weitergehende Änderungen nötig, um Sachen gut umzusetzen.

Wie ist die riesengroße Leerfläche denn erklärbar? Aktueller Screenshot der Hauptseite:

Was sollen wir denn da rein tun?

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Nen fetten Link zu einer echten Mobile-Version. Und das restliche nichtsdann aufteilen und jeder Zeile wieder ein bisschen Abstand spendieren, damit man die einzelnen Elemente a) optisch leichter auseinanderhalten kann und b) auch mit Touchscreen ohne Vollzoom vielleicht sogar treffen kann.

Falls noch was überbleibt, einfach das Frame nicht so hoch machen? :D

Die Mobile-Versionen werden wohl rechts oben bei "Aktuell" angezeigt werden, im Moment ist aber eine "Sitebar" im Gespräch statt der (fast) quadratischen Werbung auf der Startseite (brr...).

wikileaks.geizhals.org

Was man beim Lesen von Postings und Leserbriefen in großen Medien bedenken sollte

Servus,
mir würde ein "Garantiefenster" gefallen.
Bei jedem Artikel würde man sofort die Länge der Garantiezeit erkennen.
Bei Festplatten steht es im Text,leicht zu finden, da wenig Text, bei Handys ist es eine Qual, wenn man den Text durch hat, ist man genau so schlau.
Danke und Ciao
Rapex

Dieses Forum ist eine frei zugängliche Diskussionsplattform.
Der Betreiber übernimmt keine Verantwortung für den Inhalt der Beiträge und behält sich das Recht vor, Beiträge mit rechtswidrigem oder anstößigem Inhalt zu löschen.
Datenschutzerklärung