Hallo,
Ich habe mir die letzten Tage mal ein paar alternative Backend-Themes angeschaut und getestet, da mir das Standard-Theme etwas langweilig wurde und in vielen Teilen auch etwas "umständlich" ist.
Ich hatte mir überlegt ein Ticket zu erstellen um mal meine Ideen für ein paar Verbesserungen im Backend Leo näher zu bringen, aber habe mich jetzt erstmal doch dazu entschieden hier ein bisschen Diskussionsstoff zu sammeln, um das etwas konstruktiver angehen zu können.
EDIT: Es geht hier nicht um Änderungen an den Grundsätzlichen Funktionalitäten, sondern eher um solche Dinge die man mit CSS hinbekommt und eventuell etwas JS.
Alle Vorschläge sollte auch in Hinsicht Barrierefreiheit überdacht werden. Auf IE6 Kompatibilität würd ich verzichten und wenn dann das bisherige Theme verfügbar lassen (allerdings nicht mehr als default-Theme).
Ich fange mal an... (das sind meine persönlichen Eindrücke/Meinungen und keine Absolution)
Grundsätzliches aussehen:
Das derzeitige Backend ist ja nicht mehr ganz CI-konform und sollte deswegen mal eine Auffrischung bekommen. Die aktuelle Version des backlight_theme ist hier mal meine Referenz, da es wirklich schick ist. (Das liegt natürlich im Auge des Betrachters.)
Sehr schön ist auch die variable Breite (sollte aber mit einer "max-width" versehen werden, da die BG-Images bei Breiten über 1500px enden und so bei hohen Auflösungen und maximiertem Fenster das Layout "kaputt geht"; das könnte man auch sicher irgendwie mit "repeat-x" lösen). Ein Problem entsteht hierbei jedoch mit den Listings, aber dazu weiter unten mehr.
Header/Footer:
Header und Footer sollten meines erachtens so schmal (von der Höhe her) wie möglich sein um möglichst viel vom Viewport für das eigentlich Wichtige übrig zu lassen.
Weiterhin wär "position:fixed" sehr schön, da man dann nicht erst ewig in der Seite rumscrollen muss, wenn man mal schnell in die FE-Vorschau möchte.
Hauptmenü:
Ein "fixed" Menü wäre hier ganz gut, bringt allerdings das Problem mit sich das bei kleinem vertikalem Viewport bzw. erweitertem Menü (mehr Menüpunkte) man nicht mehr an die unteren Menüpunkte rankommt. Das kann man wohl nur mit JS umschiffen. Sprich beim "nach unten"-scrollen scrollt das Menü solange mit bis es unten "anstößt". Scrollt man jetzt wieder nach oben sollte das Menü sofort wieder mit scrollen bis es oben "anstößt" (anstatt unten stehen zu bleiben bis der Scrolloffset erreicht ist an dem es unten angestoßen ist).
Diese Änderung hätte nicht so eine hohe Prio da bei einem fixen Footer der Top-Link immer im Viewport ist.
Listings:
WICHTIG: Buttons größer... Die List-Buttons sind einfach zu klein und das "zielen" dauert zu lange (und ja ich kann mit meiner Maus sehr gut umgehen).
Das Problem mit variabler Breite: Das größte Problem bei der Variablen Breite ist, das bei sehr großen horizontalen Auflösungen die Buttons der Listitems irgendwo rechts an der Kante kleben und zwischen diesen und dem Listitem-Label eine riesige freie Fläche ist, welches die Assoziation erschwert. Die einzige Lösung die mir hier einfällt, wär die Buttons Links Anzuzeigen (trotzdem rechtbündig zur "Mittellinie) und rechts daneben Linksbündig die Labels. Eine kleine Skizze dazu:
Code:
x = Button
------|----------
xxxx| Item 1
xxxxxx| Item 2
xxx| Item 3
^ "Mittellinie" (eher goldener Schnitt ;))
Für Trees:
------|----------
xxxx| - Parent
xxxxxx| + Child
xxx| - Child
xxxxx| Grandchild
xx| Item
Weiterhin sollten die Filter und globalen Operation fixed werden und einen optisch weicheren Übergang zum Header und ein etwas härterem zum eigentlichen Listing.
Die "Aktions"-Buttons (welche zum Beispiel nach klick auf "Mehrere bearbeiten" erscheinen) sollten ebenfalls fixed werden und optisch eher zum Footer hinzukommen (nicht im Markup).
Im Parent View sollte das Parent optisch besser von den Kindern getrennt werden.
Mal ein kleine Skizze:
Code:
========HEADER======== (schmal)
N | Filter / Suche (nach oben weichere optische Trennung)
A | Glob. Operationen (zu Filter/Suche sehr weiche optische Trennung)
V |------------------ (härtere optische Trennung)
I | Hier beginnt \
G | das eigentliche \
A | Listing > Scrollbereich (Hauptscrollleiste, kein div mit overflow: scroll)
T | /
I | /
O |------------------ (härtere optische Trennung)
N | Form-Buttons (nach unten weichere optische Trennung)
========FOOTER======== (schmal)
Datensatz Editing:
Vom Grundlayout her ähnlich wie die Listings. Es fallen natürlich die globalen Operationen und die Filter/Suche weg, dafür sollte an ihre stelle der Titel des Datensatz treten.
Tooltips würd ich so lassen wie sie sind und nicht wie beim backlight_theme im Footer anzeigen, da das für mich etwas verwirrend war und auch nicht mit sehr langen Beschreibungen kompatibel ist.
Ansonsten würde ich nicht viel an der Paletten-Darstellung ändern.
So das war jetzt etwas viel, aber was solls.
Und nochmal zum klarstellen: Das hier ist meine persönliche Meinung und keine absolut objektive Analyse (wenn sowas überhaupt möglich ist).
Bei der Benutzbarkeit glaube ich das die "fixed" Teile ziemlich viel ausmachen, da man nur noch "einmal" scrollen muss (zu dem was man editieren/anschauen möchte, danach kann man direkt speichern/woanders hin).
EDIT: Auch wenn die Änderung des default-Themes wahrscheinlich abgelehnt wird, wären zusätzliche Ideen hilfreich um vielleicht ein "Profi"-Theme zu erstellen, welches den Workflow verbessert.
Ideensammlung Backend Verbesserungen
Zitieren
Lesezeichen