SlideShare ist ein Scribd-Unternehmen logo
1 von 19
User Experience im Backend
Alexander Böhm
TYPO3 Meetup Karlsruhe, 23.09.2020
Ein klassisches Webprojekt
Frontend
Frontend
Frontend
Frontend
Fronten
d API
Backend ???
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
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
UX im Backend –
Aufräumen (1)
Nicht benötigtes
entfernen!
Weniger Content Elemente
Weniger BE Module
Weniger Felder
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
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
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,…)
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:
UX im Backend –
Übersicht verbessern (3)
Spezielle
Inhaltselemente
• Passendes Icon aussuchen
• Aussagekräftige Beschreibung
• Bei Grids: Icon sollte grob
das spätere Grid abbilden
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,…)
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
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
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
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
UX im Backend –
System stabil machen (1)
“Böse“ Features
deaktivieren
UX im Backend –
System stabil machen (2)
“Böse“ Features
deaktivieren
Raum für Fragen
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

Weitere ähnliche Inhalte

Ähnlich wie Backend User Experience in TYPO3

201903 seo campixx ur ls komprimieren - slideshare
201903 seo campixx   ur ls komprimieren - slideshare201903 seo campixx   ur ls komprimieren - slideshare
201903 seo campixx ur ls komprimieren - slideshareVisionary Online Marketing
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web designHenning Schmidt
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursSteven Grzbielok
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)Marcus Haberkorn
 
Gutenberg Blöcke
Gutenberg BlöckeGutenberg Blöcke
Gutenberg BlöckeSören Wrede
 
Brand My SharePoint
Brand My SharePointBrand My SharePoint
Brand My SharePointfabianmoritz
 
Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020
Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020
Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020Corinna Lins
 
Schichtenarchitektur in Symfony Projekten
Schichtenarchitektur in Symfony ProjektenSchichtenarchitektur in Symfony Projekten
Schichtenarchitektur in Symfony ProjektenRafał Wesołowski
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignLuka Peters
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010SharepointUGDD
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden BlendMartin Hey
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenTorsten Landsiedel
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft AG
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 

Ähnlich wie Backend User Experience in TYPO3 (20)

201903 seo campixx ur ls komprimieren - slideshare
201903 seo campixx   ur ls komprimieren - slideshare201903 seo campixx   ur ls komprimieren - slideshare
201903 seo campixx ur ls komprimieren - slideshare
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
 
Gutenberg Blöcke
Gutenberg BlöckeGutenberg Blöcke
Gutenberg Blöcke
 
Brand My SharePoint
Brand My SharePointBrand My SharePoint
Brand My SharePoint
 
Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020
Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020
Microsoft Collaboration Meetup -UI Anpassungen in SharePoint - Januar 2020
 
Schichtenarchitektur in Symfony Projekten
Schichtenarchitektur in Symfony ProjektenSchichtenarchitektur in Symfony Projekten
Schichtenarchitektur in Symfony Projekten
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010Dnug dresden blend 5. 5. 2010
Dnug dresden blend 5. 5. 2010
 
DNUG Dresden Blend
DNUG Dresden BlendDNUG Dresden Blend
DNUG Dresden Blend
 
GUIs mit Expression Blend
GUIs mit Expression BlendGUIs mit Expression Blend
GUIs mit Expression Blend
 
Joomla
JoomlaJoomla
Joomla
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus Entwicklersicht
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 

Mehr von punkt.de GmbH

Arbeiten bei punkt.de
Arbeiten bei punkt.deArbeiten bei punkt.de
Arbeiten bei punkt.depunkt.de GmbH
 
Playing around with page types in TYPO3
Playing around with page types in TYPO3Playing around with page types in TYPO3
Playing around with page types in TYPO3punkt.de GmbH
 
Experiences with backend user rights in TYPO3
Experiences with backend user rights in TYPO3Experiences with backend user rights in TYPO3
Experiences with backend user rights in TYPO3punkt.de GmbH
 
One Neos CMS - many websites
One Neos CMS - many websitesOne Neos CMS - many websites
One Neos CMS - many websitespunkt.de GmbH
 
Continuous relaunch - DIGITAL FUTUREcongress 2018
Continuous relaunch - DIGITAL FUTUREcongress 2018Continuous relaunch - DIGITAL FUTUREcongress 2018
Continuous relaunch - DIGITAL FUTUREcongress 2018punkt.de GmbH
 
Webhosting on IPv6-only Virtual Machines
Webhosting on IPv6-only Virtual Machines Webhosting on IPv6-only Virtual Machines
Webhosting on IPv6-only Virtual Machines punkt.de GmbH
 
Erweiterte Berechtigungen im TYPO3 FE
Erweiterte Berechtigungen im TYPO3 FEErweiterte Berechtigungen im TYPO3 FE
Erweiterte Berechtigungen im TYPO3 FEpunkt.de GmbH
 
Search as main navigation
Search as main navigationSearch as main navigation
Search as main navigationpunkt.de GmbH
 
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?punkt.de GmbH
 
Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...
Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...
Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...punkt.de GmbH
 

Mehr von punkt.de GmbH (11)

Arbeiten bei punkt.de
Arbeiten bei punkt.deArbeiten bei punkt.de
Arbeiten bei punkt.de
 
Playing around with page types in TYPO3
Playing around with page types in TYPO3Playing around with page types in TYPO3
Playing around with page types in TYPO3
 
Experiences with backend user rights in TYPO3
Experiences with backend user rights in TYPO3Experiences with backend user rights in TYPO3
Experiences with backend user rights in TYPO3
 
One Neos CMS - many websites
One Neos CMS - many websitesOne Neos CMS - many websites
One Neos CMS - many websites
 
Continuous relaunch - DIGITAL FUTUREcongress 2018
Continuous relaunch - DIGITAL FUTUREcongress 2018Continuous relaunch - DIGITAL FUTUREcongress 2018
Continuous relaunch - DIGITAL FUTUREcongress 2018
 
FreeBSD hosting
FreeBSD hostingFreeBSD hosting
FreeBSD hosting
 
Webhosting on IPv6-only Virtual Machines
Webhosting on IPv6-only Virtual Machines Webhosting on IPv6-only Virtual Machines
Webhosting on IPv6-only Virtual Machines
 
Erweiterte Berechtigungen im TYPO3 FE
Erweiterte Berechtigungen im TYPO3 FEErweiterte Berechtigungen im TYPO3 FE
Erweiterte Berechtigungen im TYPO3 FE
 
Search as main navigation
Search as main navigationSearch as main navigation
Search as main navigation
 
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
Punkt.de – Layout-Testing: was geht, was bringt´s, wer braucht´s?
 
Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...
Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...
Teams langfristig führen und entwickeln: Der ScrumMaster als Visionär des Tea...
 

Backend User Experience in TYPO3

  • 1. User Experience im Backend Alexander Böhm TYPO3 Meetup Karlsruhe, 23.09.2020
  • 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