Das Dokument beschreibt die Benutzererfahrung im Backend von TYPO3, insbesondere bei Redakteuren mit unterschiedlichem technischem Wissen. Es enthält Vorschläge zur Verbesserung der Benutzeroberfläche, z.B. durch anpassbare Dashboards, spezielle Inhaltselemente und die Schaffung eigener Seitentypen. Zudem wird die Bedeutung der Systemstabilität und der Reduktion überflüssiger Elemente betont.

1. User Experience im Backend
Alexander Böhm
TYPO3 Meetup Karlsruhe, 23.09.2020

2. Ein klassisches Webprojekt
Frontend
Frontend
Frontend
Frontend
Fronten
d API
Backend ???

3. Redakteure im Backend
• Wenn man Pech hat:
erzählt davon nix dem Entwickler
• Hat Angst etwas kaputt zu machen !!
(Techn.) Erfahrener Redakteur Unerfahrener Redakteur
• Kennt sich technisch etwas aus.
• Es stört ihn, wenn etwas nicht
so funktioniert wie er will.
• Versucht drum herum zu basteln
(HTML, Elemente „falsch“ verwenden,..)
• Kennt sich technisch weniger aus => einfacher Anwender
• Lässt sich schnell verwirren und geht in fremden Systemen verloren
• Evtl. nur gelegentlich im BE unterwegs

4. UX im Backend –
Branding und Wiedererkennung
• BE Login gestalten
• Eventuell auch im Backend selber ein wenig
anpassen (z.B. Logo ersetzen,..)
• Evtl. an bestehenden Systemen
(Firmenintranet, Wiki,…) orientieren

5. UX im Backend –
Aufräumen (1)
Nicht benötigtes
entfernen!
Weniger Content Elemente
Weniger BE Module
Weniger Felder

6. UX im Backend –
Aufräumen (2)
Mit BE-Gruppen
arbeiten
• Keine Einstellungen innerhalb des Users
Weitere Details und Beispiele:
https://www.slideshare.net/punktde/experiences-with-backend-user-rights-in-typo3
• BE-Benutzertypen definieren
• Gruppen anlegen
• Konfiguration aufteilen, nicht alles in eine Gruppe
• User bekommt nur Meta-Gruppen

7. UX im Backend –
Aufräumen (3)
Workspaces nutzen
• Es kann ohne Gefahr (und ohne Testseiten) experimentiert werden
• Kein Live Editing durch Redakteure
• Prüfung der Texte vor Livegang

8. UX im Backend –
Übersicht verbessern (1)
Dashboard
einrichten
• Evtl. vorgefertigtes Dashboard
bereitstellen mit allen benötigten
Widgets
• Netter Einstieg ins Backend
• Benötigt spezielle Widgets für Bedürfnisse
der Redakteure
(z.B. Firmennews, Kantinenplan,…)

9. UX im Backend –
Übersicht verbessern (2)
Spezielle
Inhaltselemente
Bsp.: „Lege Element Text+Media in ein Grid vom Typ „Slider“, stelle noch Optionen
X, Q, V ein, wähle Rahmen/Layout “Slider“ und dann hat man ein Bild im Slider
NICHT die Redakteure basteln lassen!!
• Eigenes Slider-Element mit benötigten Feldern erstellen.
• Nur in der BE-Layout Spalte für Slider erlaubt, sonst nirgends.
• In der Slider-Spalte sind NUR Slider-Elemente erlaubt, keine Grids oder anderes.
Besser:

10. UX im Backend –
Übersicht verbessern (3)
Spezielle
Inhaltselemente
• Passendes Icon aussuchen
• Aussagekräftige Beschreibung
• Bei Grids: Icon sollte grob
das spätere Grid abbilden

11. UX im Backend –
Übersicht verbessern (4)
Eigene
Seitentypen
• Eigenes Icon registrieren
• Eigenen Seitentyp mit eigener Doktype-Nummer
in $GLOBALS['PAGES_TYPES']
• Neuen Seitentyp zu Drag&Drop Bereich hinzufügen (UserTs)
• Neuer Seitentyp zur Auswahl in Page hinzufügen
• Icon für Seitentyp setzen
• Standard Felder für neuen Seitentyp definieren (TCA) (Titel, Access,…)

12. UX im Backend –
Übersicht verbessern (5)
Eigene
Seitentypen
Weitere Schritte:
• Backend-Layout definieren
• Eigene DB Felder für Seitentyp definieren (TCA)
• Hook für automatische Auswahl des BE-Layouts

13. UX im Backend –
Übersicht verbessern (6)
Eigene
Seitentypen
Beispiel für Hook:
Weitere Details:
https://www.slideshare.net/punktde/playing-around-with-page-types-in-typo3

14. UX im Backend –
Übersicht verbessern (7)
Pagesettings
Toolbar
• Es werden nur definierte Felder editiert
• Alle anderen Felder + Tabs werden nicht angezeigt
• Vorschau der aktuellen Werte als Tooltip
• Aktueller Status: work in progress
• Ziel: Extension im TER

15. UX im Backend –
Übersicht verbessern (8)
Backend Layouts
• Spalten sinnvoll (und einheitlich)
benennen
• Bereiche einfärben
• Be-Fluid Templates überschreiben
• CSS fürs BE erstellen und registrieren

16. UX im Backend –
System stabil machen (1)
“Böse“ Features
deaktivieren

17. UX im Backend –
System stabil machen (2)
“Böse“ Features
deaktivieren

18. Raum für Fragen

19. Quellen
Slides:
https://www.slideshare.net/punktde/playing-around-with-page-types-in-typo3
https://www.slideshare.net/punktde/experiences-with-backend-user-rights-in-typo3
Links:
https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/PageTypes/Index.html#create-new-page-type
https://docs.typo3.org/c/typo3/cms-workspaces/master/en-us/Index.html