Mobilgeräte werden häufiger zum Aufrufen von Webseiten und auch zum Kaufen genutzt als größere Bildschirme wie Laptop. Daraus ist das Design-Prinzip „mobile-first“ entstanden. Daher ist das Problem relevant.
Im Burger-Menü muss man scrollen, um zu allen Tabs/Links eines Servers zu gelangen. Dabei ist auf dem bildschirmfüllenden Menü mehr als genug Platz, um alle Tabs/Links darzustellen zum Beispiel durch ein Zwei-Spalten Layout. Die Seiten in einem Burger-Menü zu verstecken, halte ich allgemein für suboptimal. So ein Menü sollte für unwichtige Einstellungen genutzt werden, die man selten braucht.
Man sollte mit so wenig Handlungen (Klicks, Scrollen, wegen Ladebildschirm warten) wie möglich die meistverwendeten Aktionen ausführen können. Bei Instagram ist man mit dem Öffnen der App direkt in Feed, kann mit einem Klick die Stories der Freunde sehen oder mit zwei Klicks zu Reels kommen (Entdecken-tab und ein interessantes auswählen). Beim Servercotrolpanel muss man sich hingegen erst einloggen, den Server auswählen, das Burger-Menü öffnen, ggf. runterscrollen, den Tab auswählen und dort angekommen wieder herunterscrollen, bevor man die eigentliche Aktion durchführen kann.
Ein bekannter deutscher Konkurrent von Netcup mit roten Logo, der hier zensiert wird, macht es gut vor: Da sind die Einstellungen als vertikale Scrollleiste gut zu überblicken und mit weniger Klicks und soit scheller zu erreichen.
Die Suchleiste finde ich prinzipiell gut, aber kann zu wenig und der Placeholder ist zu ungenau. Man kann nur nach Produkten suchen, nicht nach Einstellungen oder Einstellungsgruppen. Beispieltreffer für „IP-Adresse“ wäre: „Netzwerk: IPv6-Adresse zuweisen“ oder „Netzwerk: Reverse-DNS für IPv4-Adresse ändern“. Andernfalls sollte der Platzhalter „Produkt suchen...“ oder „Server suchen...“ sein.
Server-Suche-mit-overwflow.png
Auch das Logo nimmt zu viel Platz ein, sodass man wenig Inhalt auf jeder Seite sieht, bevor man scrollen muss. Das gleiche gilt für den Server, der darunter steht. Das CPU-Icon ist cool, sollte aber in einer Zeile mit dem Servernamen, -nummer und Produktnamen sein. Auf dem Bild sieht man auch, dass es einen unschönen Zeilenumbruch im Produktnamen gibt. Servernummer und Produktname sollten untereinander stehen. Dann wäre auch für das CPU-Icon Platz.
Die Verschwendung von Platz ist auch bei den Einstellungen ein Problem. Nehmen wir als Beispiel den Tab „Steuerung“: Auf dem Bild ist gerade Mal ein Button zu sehen. Die vier Befehle Neustarten, Herunterfahren, Zurücksetzen und Herunterfahren erzwingen sollten mit den Erklärungen und hübschen Icons auf einen Bildschirm passen.
Ein anderes Beispiel findet sich im Tab „Allgemein“. Dort komme ich nach einem Klick auf einen Server hin und die einzige Information, die ich nur in dem Tab sehe, im Gegensatz zu anderen Tabs, ist der Hostname. (Der Produktnummer oder hier als Name bezeichnet, wird doppelt angezeigt.) Durch die Border um die Karten und innerhalb der Karten braucht es mehr Padding, damit das Layout nicht überladen/eingeengt aussieht. Dadurch verliert man wertvollen Platz in der Breite, welcher genutzt werden könnte, um den „Speichern“ Button in die selbe Zeile zu packen.
Im alten Design ist der Speichern-Button, das jedem bekannte Floppy-Disk-Icon, in einer Zeile. Dort kann man auf einen Blick: Name, Hostname, Spitzname, Status, Läuft seit, Traffic (aktueller Monat) und Snapshot Exports sehen.
Auch die anderen Karten verschwenden unnötig Platz wie weiter unten im Tab „Allgemein“ bei „Hardware“ oder „Status“ zu sehen ist. Dort könnten die Informationen mit halb so viel Platz dargestellt werden, wenn man sie wie in einer Tabelle mit zwei Spaten nebeneinander anzeigt. Links die Komponente, rechts die Zahl und Einheit, genau wie es im alten Design bereits der Fall war.
Card-hardware-in-tab-allgemein.png
Dadurch, dass man so viel scrollen muss und die Tabs im Burger-Menü versteckt sind, fühlt es sich unübersichtlich an. Es erfordert mehr mental load, weil man sich alles merken muss, was man gerade nicht sieht, um den Überblick zu behalten.
Danke für das dunkle Design. Das muss man bei jedem Login neu einstellen, anstatt das man einfach das vom Browser bevorzugte Design automatisch nutzt. Das kann man ohne Javascript mit „ Media (prefers-color-scheme: dark)“ herausfinden oder falls das helle und dunkle Design zwei verschiedene Stylesheets sind, kann man auch nur eines der beiden laden: <link href="dark.css" rel="stylesheet" media="prefers-color-scheme: dark" />