PC-Kombo bekam ein neues Design

Die Seite zum PC-Bauen - das ist was pc-kombo nun sein soll. Vorher nannte ich sie immer einen Hardwareempfehler, was auch stimmt. Aber ich hatte erkannt, dass die Seite aus mehr besteht, aus drei Teilen: Eben dem Empfehler (der auch ein Konfigurator ist), aber auch aus einer Hardwaredatenbank und einem nützlichen Benchmark. Das sollte nun besser gezeigt werden.

Generell gibt es ein neues Design, das – glaube ich – etwas hübscher und professioneller aussieht (auch wenn es sicher noch nicht 100% fertig ist). Strukturell sind die Bereiche klarer unterteilt, jeder Bereich hat zudem seine eigene Startseite mit Erklärungen. Die Hauptstartseite führt auch nicht mehr direkt zum Konfigurator, sondern erklärt die Seite im Ganzen

So sieht die Seite jetzt aus:

So sah sie vorher aus:

Die Überlegungen

Das waren meine Überlegungen beim jeweiligen Abschnitt:

Der Konfigurator

Das alte Design wirkte für neue Benutzer etwas kompliziert. Eine Liste mit Button statt den Blöcken macht die Komponentenliste einfacher zu verstehen und auch klarer, wie man sie anpassen kann. Das neue Design sollte es auch vereinfachen, weitere Funktionen wie das freie Hinzufügen neuer Hardwarekomponenten (z.B. drei SSDs) umzusetzen.

Es sind nun weniger Blöcke, weniger Rahmen, wodurch die Seite mehr wie ein zusammengehöriges Ganze wirkt. Für Ordnung sorgt stattdessen die Gruppierung. Die Linien zwischen den einzelnen Komponenten aber sind wichtig, um beim Listenlesen das Auge zu führen.

Da ist auch viel im Hintergrund passiert. So kann man jetzt problemlos Komponenten hinzufügen, die keinen Preis haben. Oder Konfigurationen basteln, die inkompatibel sind – da wird jetzt nur noch gewarnt. Das ist praktisch, wenn Daten in der Hardwaredatenbank falsch sind oder wenn man eben aus Versehen einen inkompatiblen PC gebaut hat und das nun mithilfe der Seite korrigieren will.

Die Hardwaredatenbank

Was erst eine eigene Seite werden sollte ist nun doch in pc-kombo beibehalten worden. Es wäre einfach zu viel doppelte Arbeit gewesen - Preise und Benchmarkdaten sind bei der Datenbank ja ebenso wichtige Daten, und im Benchmark und Konfigurator braucht man die PC-Komponenten. Warum das also komplett auftrennen?

Die Übersichtslisten haben sich zwar verändert, folgen aber dem gleichen Prinzip: Eine Liste, in der jeder Listenpunkt eine PC-Komponente ist und zudem ein paar Daten angezeigt werden, wie die Anzahl der Prozessorkerne zum Beispiel. Obendrüber gibt es einen Filter. Wichtiger als das komplett umzuwerfen war es mir, die Performance zu verbessern: Vorher konnten lange Listen schonmal den Browser zum Schnaufen bringen. Jetzt laden die Seiten schnell.

Die Einzelseiten sind massiv überarbeitet. Ich wollte erreichen, dass sie viel besser aussehen, und dass sie so nützlich wie möglich sind.

Vorher waren fast alle Inhalte verschiedene und unterschiedlich große Blöcke, verteilt in einem Grid. Jetzt sind deutliche Blöcke nur noch die Spezifikationen, die nur ein Teil der Seite sind. Bilder, wenn vorhanden, sind oben. Bei Prozessoren und Grafikkarten gibt es dazu eine automatisiert erstellte Beschreibung samt Leistungseinschätzung, was ich für total praktisch halte. Dann die Preise und das Preisverlaufsdiagram, erst jetzt die technischen Spezifikationen, und schließlich Reviews. Reviews gab es vorher schon, aber nur als eine Liste von Links. Jetzt tragen die meisten Reviews ein Logo und alle zeigen ein Zitat, welches das Review zusammenfasst.

Der Benchmark

Hier hat sich am wenigsten getan.

Ich setze darauf, dass die neue Startseite mit den Erklärungen Besuchern schon hilft, zu verstehen was der Benchmark ist. Die Vergleichsfunktion poppt nun beim Drüberfahren mit kurzem Anweisungstext auf und die Komponenten gehen daraufhin in eine Seitenleiste. Neu ist, dass auf der Vergleichsseite nur die Benchmarks angezeigt werden, in denen alle der Vergleichsprozessoren oder -grafikkarten vorkommen. Entweder es gibt einen guten Vergleich in der Datenbank oder eben nicht, das schafft Klarheit. Und das gruppierte Balkendiagramm mit den Einzelbenchmarkdaten sieht nun (dank des Umstiegs auf apexcharts) besser aus, es wird auch in keiner Situation mehr unten abgeschnitten oder unscharf.

Technische Hintergründe

Eigentlich wollte ich die drei Teile der Seite jeweils in eine eigene Seite verfrachten, mit statischen Seiten wo möglich. Zwei Dinge hielten mich davon ab: Als ich die Hardwaredatenbank als statische Seite gebaut hatte wurde deutlich, dass die anderen Informationen wie Preise und Benchmarkbewertungen auch hier praktisch wäre. Und ich hatte viel Erfolg, pc-kombo zu optimieren. Es stellte sich raus, dass die Performanceprobleme oft nur bestanden, weil hier und dort ein Datenbankindex fehlte, oder Funktionen unnötigerweise aufgerufen worden, oder schnellere gems wie FastGettext noch nicht benutzt wurden. Aber auch, dass die Komponentenlisten gar nicht auf der Serverseite langsam waren, sondern das Javascript (eine alte Version von jplist) den Browser blockierte.

Ich bin also die Seite durchgegangen, mit dem Firefox-Netzwerkinspektor und Flamegraphs bewaffnet, und habe jede Seitenart durchoptimiert. Und zwar das erste Laden, bevor der Cache befüllt ist. Weil das ja auch Seitenbesucher trifft und sicher massiv stören würde. Erst danach kam die Entscheidung pro Redesign und Beibehaltung unter einem Dach, aber klarerer Strukturierung.

Dementsprechend ist pc-kombo immer noch eine Ruby/Sinatra-Anwendung, mit SQLite als Datenbank. Es gibt aber eine Reihe von Verbesserungen, der Artikel zum effizienteren Speichern von Zeitreihen zum Beispiel kommt natürlich aus dieser Überarbeitung der Seite. Und das Datenbankschema ist etwas anders, wodurch zum Beispiel bei der Hauptdatenbankabfrage ein Join weniger gebraucht wird.

Eine große Änderung gab es bei den Sessions. Die waren vorher sehr wichtig, zentral für die Funktion der Seite. Wer /build?price=800 besuchte bekam in seine Session ein neues Empfehlungsobjekt gespeichert, und alle weiteren Funktionen wie das automatisierte Wählen eines neuen Prozessors griff auf dieses Objekt zu. Das bedeutete, dass geteilte URLs unbrauchbar waren, wenn nicht vorher ein Permalink erstellt wurde. Und der Code sehr zustandsabhängig wurde. Der neue Ansatz ist, dass /build?price=800 direkt auf einen Permalink weiterleitet, und weitere Funktionen dann von diesen Permalink ausgehen - also zum Beispiel /permalinkid1234/customize/cpu. Struktur! Die hilft, Javascript zu vermeiden (dazu im nächsten Abschnitt mehr). Und ist ein Ergebnis aus dem Werkeln an dem statischen Seitengenerator, an der alternativen Hardwaredatenbank.

Ich habe auch Funktionen rausgeworfen, die nicht funktioniert haben. Statt Reviews gab es vorher auf Produktseiten unten eine Kommentarfunktion, die einfach nicht genutzt wurde. Upvoten und Downvoten, das wurde ein bisschen genutzt, aber nicht genug um mit den Daten die Listen nach Nutzervorlieben zu sortieren. Also ist sowas nicht mehr drin. Wobei nicht alles, was nicht mehr da ist, wegbleiben soll. Zum Beispiel fehlt das Löschen von Komponenten aus der Buildliste einfach noch.

Designprinzipien

Das Design ist diesmal nicht komplett handgemacht. Meinem Eindruck nach profitiert das Ergebnis deutlich davon, auf jeden Fall war die Arbeit dadurch viel einfacher. Es basiert auf dem CSS-Framework Spectre. Ich hatte mir ein paar Alternativen angeschaut, Spectre blieb über, weil es relativ simpel und vernünftig aussah, die Dokumentation klar war und die Komponenten sowie Beispiele hübsch. Außerdem, das war mir wichtig (und gleich mehr dazu), braucht das Framework kein Javascript. Die Wahl kann man hinterfragen, wäre das derzeit aktiver entwickelte Bulma vielleicht besser gewesen? Naja, wechseln kann man immer, auch wenn es Arbeit wäre.

Strukturschaffen war eines der Hauptziele. Es gibt die Startseite /. Dazu kommen die Bereichsseiten /builder/, /components/ und /benchmark/. Die weiteren Unterseiten folgen dieser Struktur. Das war intern schon vorher so, wurde aber weniger gezeigt. Diese Struktur vorher klar zu definieren half auch beim Design. So war klar, dass es oben eine Hauptnavigation geben muss, für die drei Bereiche. Die Navigation innerhalb des Bereiches gehört da aber nicht wirklich rein, stattdessen habe sie jeweils eine Breadcrumbnavigation. Ich bilde mir ein, dass das hilft die Navigationsstruktur flachzuhalten und so weniger verwirrend zu machen.

Javascript wurde vermieden, indem mehr mit eigenständigen Seiten gearbeitet wird. Vorher war die Empfehlungsansicht fast schon eine SPA. Extrembeispiel: Wenn die Liste zur Komponentenauswahl geladen werden sollte, scrollte der Viewport nach rechts und dort wurde per Ajax die Auswahlliste hineingeladen. Jetzt gibt es dafür schlicht eine eigene Seite. Es gibt immer noch Javascript, natürlich: Apexcharts für die Benchmarkdiagramme, das neue jplist zum Filtern von Komponentenlisten, und 26 Zeilen handgeschriebenes Javascript für die Benchmarkvergleichsfunktion. Aber das wars. Auch ohne Javascript funktioniert der Großteil der Seite nun.

Weitere Pläne

Fehlende Funktionen nachzurüsten sollte jetzt wohl der Hauptfokus sein. Deaktivieren von Komponentenkategorien (wenn man z.B. keinen Arbeitsspeicher wählen will, weil der aus dem alten PC kommen wird), Filter für die Liste bei der manuellen Auswahl von Komponenten, die Sortierung verbessern. Und im Backend gibt es auch noch einiges zu tun, wie mehr Verwaltungsoberflächen, was dann mir die Arbeit erleichtert um z.B. Daten zu korrigieren, wodurch im Endeffekt die Seite für Besucher besser funktionieren wird.

Was wahrscheinlich ebenso wichtig ist: Ich will mehr Funktionen haben, um bei der Komponentenauswahl zu helfen. Zum Beispiel ist jetzt schon neu, dass mittels eines kleinen Icons jeweils die Bestandteile eines Builds empfohlen werden. Das sind die Bestandteile des PCs, den ich derzeit generell empfehlen würde, wenn das eigene Geld möglichst sinnvoll eingesetzt werden soll und es keine Spezialanforderungen gibt. Aber da kann noch mehr gemacht werden, denn generell gibt es in der Datenbank schon eine Liste von Komponenten, die berücksichtigt werden sollen – um zum Beispiel Grafikkartenmodelle auszuschließen, deren Kühler schlecht ist. Das könnte auch bei der manuellen Auswahl sichtbar gemacht werden.