SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
1
AUTHOR EXPERIENCE
IN CRAFT CMS
WAS KÖNNEN WIR ALS ENTWICKLER DAZU BEITRAGEN?
CRAFT CMS MEETUP 5.12.2019
ANDREAS BINGGELI
UX ARCHITECT & SOFTWARE DEVELOPER
2
(M)EIN BLICK ZURÜCK
PE R SÖ NLIC HE E NT WIC KLU NG SE R F A HR U NG M IT C M S SY ST E M E N
Homebrew “CMS”
Firmen-Website für eine
grosse Schweizer Bank
Mediasurface
Intranet für Private Banking
Abteilung einer grossen
Schweizer Bank
1995 1997
1996 1999No CMS
Firmen-Website für IT-
Dienstleistungsunternehmen
Inso Dynabase
Intranet für ein IT-
Dienstleistungsunternehmen
2000
2002
Vignette StoryServer
Intranet für eine grosse
Schweizer Bank
Day Communique
Firmen-Website für eine
grosse Schweizer Bank
3
(M)EIN BLICK ZURÜCK
PE R SÖ NLIC HE E NT WIC KLU NG SE R F A HR U NG M IT C M S SY ST E M E N
2009 2013
2010 2015
2016
2016
Obtree/Livelink
Internet/Intranet für
eine Krankenkasse
Day CQ/Adobe AEM
Extranet für eine
Krankenkasse
Contao
Verschiedene kleinere
Websites
Drupal
Verschiedene Websites
für KMUs
Craft CMS, Wordpress
Verschiedene kleine bis
mittelgrosse Websites
Magnolia
Firmen-Website für
eine Krankenkasse
4
ERKENNTNISSE
A U S 23 JA HR E N C M S - E R F A HR U NG A LS E NT WI C KLE R U ND U X - DE S I G NE R
Das CMS wird meist von
den IT-Abteilungen oder
Agenturen ausgewählt
Die Hersteller von Content Mangement
Systemen kümmerten sich lange
nur stiefmütterlich um Usability
Nutzerzentriertes Design
findet oft nur im Frontend
und nicht im Backend statt
Die Anforderungen an
ein CMS haben sich
laufend verändert
5
USABILITY & USER EXPERIENCE
USABILITY(ISO 9241-11)
USER EXPERIENCE(ISO 9241-210)
VOR
der Nutzung
WÄHREND
der Nutzung
NACH
der Nutzung
Erfüllung der ErwartungenErwartung an Nutzung Effektivität
Effizienz
Zufriedenstellung
6
AUTHOR EXPERIENCE (AX)
AUTHOR EXPERIENCE END USER EXPERIENCE
UX
USER EXPERIENCE
DEVELOPER
EXPERIENCE
Autoren
Content Manager
Übersetzer
…
Kunden
Partner
Mitarbeiter
…
Alle Benutzer die
Inhalte im CMS
bearbeiten
Alle Benutzer die
Inhalte über einen
Kanal beziehen
7
Author experience, as a
discipline, is the provision of
contextually appropriate
functionality within a content
management system.
❞
❝
8
HERAUSFORDERUNGEN
Eine gute Author
Experience ist
entscheidend für die
Akzeptanz des CMS
Ist das CMS zu
kompliziert wird es
nicht benutzt und
Inhalte veralten
Das CMS wird von
gelegentlichen und
regelmässigen
Benutzern eingesetzt
Das CMS wird mit
einem UI ausgeliefert
und kann nur teilweise
angepasst werden
Designer & Autoren
haben vielfältige
Anforderungen an
Inhalt und Gestaltung
9
AUTHOR EXPERIENCE IN
CRAFT CMS
• Schlichtes und intuitives UI
• Responsives Design
• Editor mit Previewmöglichkeit
• Erweiterungen durch Plugins
• Schnelles Onboarding
Habe ich als Entwickler überhaupt eine Möglichkeit
die Author Experience zu beinflussen?
10
CMmess
Seitenansicht = Mentales
Modell des Autors
Abbildung im
Editor
Sichtbarer Bereich
11
AX PROZESS
Content Strategy
Vision
Kanäle
Zielgruppen
Inhaltsanalyse
Tone of Voice
Content Modeling
Inhaltstypen
Attribute
Metadaten
Beziehungen
Überprüfen
Usability Tests
Walkthroughs
A/B Tests
Analytics
Presentation Modeling
Templates
Design System
Assets
APIs
Measure &
Improve
Metriken
Verbesserungen
Erweiterungen
Bauen
Prototypen
Section Types
Komponenten
Attribute
Plugins
Lernen
Hypothesen
Mentale Modelle
Verhalten
Bedürfnisse
Ideengenerierung
Content
Model
Implementation
12
AX PROZESS
Content Strategy
Vision
Kanäle
Zielgruppen
Inhaltsanalyse
Tone of Voice
Content Modeling
Inhaltstypen
Attribute
Metadaten
Beziehungen
Überprüfen
Usability Tests
Walkthroughs
A/B Tests
Analytics
Presentation Modeling
Templates
Design System
Assets
APIs
Measure &
Improve
Metriken
Verbesserungen
Erweiterungen
Bauen
Prototypen
Section Types
Komponenten
Attribute
Plugins
Lernen
Hypothesen
Mentale Modelle
Verhalten
Bedürfnisse
Ideengenerierung
Content
Model
Implementation
13
CONTENT MODELLIERUNG
Formale Strukturierung und
Kategorisierung von Inhalten in Form
von Inhaltstypen (Content Types),
Attributen und Beziehungen.
14
CONTENT MODELLIERUNG
Anforderungen
Welche Inhalte
werden benötigt?
Content Types
Wie werden die Inhalte
strukturiert?
Attribute & Metadaten
Aus welchen Attributen und
Metadaten setzen sich die
Inhaltstypen zusammen?
Beziehungen
Wie stehen die Inhalte in
Beziehung zueinander?
Umsetzung
Überführen des Content
Modells in Craft CMS
15
INHALTSTYPEN
IDE NT IF IZ IE R E N VO N WI E DE R VE R WE NDB A R E N E NT I T Ä T E N
16
INHALTSTYPEN
E R G Ä NZ E N M IT G E NE R ISC HE N INHA LT S T YPE N
17
ATTRIBUTE & METADATEN
A U S WE LC HE N E LE M E NT E N S E T Z E N S I C H DI E I NHA LT S T Y PE N Z U S A M M E N
18
BEZIEHUNGEN ZWISCHEN INHALTSTYPEN
WI E S T E HE N DI E I NHA LT S T Y PE N I N B E Z IE HU NG
Inhaltstypen können in
verschiedenen Kontexten
verwendet werden
19
Entwicklung in cross-funktionalem Team
(Informationsarchitekten, Content Provider, Designer, Autoren,
Entwickler)
Auf Ausgewogenheit, Wiederverwendbarkeit und
Erweiterbarkeit achten
Gesundes Mass zwischen Granularität und Flexibilität finden
Grafische Darstellung des Content Modells
CONTENT
MODELLIERUNG
B E ST PR A C T IC E S
Iterieren und verfeinern
1
2
3
4
5
20
CONTENT MODEL
IMPLEMENTATION
Umsetzung des Content Modells
innerhalb von Craft CMS.
21
BEVOR WIR MIT DER UMSETZUNG BEGINNEN
Welche Annahmen
haben wir, wie die
Autoren mit dem CMS
arbeiten werden.
Was sind die
Erwartungen der
Autoren wie die
Prozesse funktionieren
sollen.
Sammlung,
Strukturierung,
Visualisierung und
Priorisierung von
Ideen.
MENTALE MODELLE IDEENGENERIERUNGHYPOTHESEN
Beobachtungen Befragungen
Brainstorming,
Prototyping
22
SINGLES CHANNELS STRUCTURES CATEGORIES
Einmalige Seiten mit
einem einzigartigen
Design
Einträge die in einer
zeitlichen Reihenfolge
organisiert sind
Ähnliche Seiten die in
einer bestimmten
Reihenfolge oder
hierarchisch organsiert
sind
Für Metadaten,
Kategorisierung oder
Verknüpfung von
Seiten
CRAFT SECTION TYPES
23
SECTION TYPES
Ü B E R F Ü HR E N VO N INHA LT ST Y PE N IN SE C T IO N T YPE S
24
TEMPLATE & BLÖCKE
A U F T E I LE N S E I T E F I X E , S T A T I S C HE & DY NA M I S C HE B E R E I C HE
25
FELDER
S T R U KT U R I E R U NG DE R B E A R B E I T B A R E N F E LDE R
26
MATRIXFELDER
• Verschiedene Block-Typen in einem
einzigen wiederverwendbaren Feld
• Ideal um flexible Inhaltsstrukturen
abzubilden
Cool, aber…
• Keine Substrukturen
• Keine Schachtelung von Matrixfeldern
• Kaum Gestaltungsmöglichkeiten der Dialoge
27
BLOCK-TYPEN
S T R U KT U R I E R U NG DE S M A T R I X- F E LDS IN LO G IS C HE B LO C K- T YPE N
Strukturierung gemäss
dem mentalem Modell
des Autors
28
ATTRIBUTE
DE F I NI E R E N DE R A T T R I B U T E PR O B LO C K- T YP
29
ATTRIBUTE
DE F I NI E R E N DE R A T T R I B U T - T YPE N
29
ATTRIBUTE
DE F I NI E R E N DE R A T T R I B U T - T YPE N
30
DYNAMISCHE SUBSTRUKTUREN
SECTION ANFANG
TITEL
COLUMN
TEASER
COLUMN
TEASER
COLUMN
TEASER
COLUMN
SECTION ENDE
TEASER BLOCK
TEASER
TEASER
COLUMN
TEASER
TEASER
TEASER
TEASER BLOCK
M Ö G LIC HE A NSÄ T Z E
Volle
Flexibilität &
Wieder-
verwendung
Fehleranfällig
& unüber-
sichtlich
Aufteilung in
Container und
Einzel-
elemente
Erfordert
Steuerungs-
logik im
Template
Entspricht
dem mentalen
Modell des
Autors
Mit Craft
Boardmitteln
nicht ideal
umsetzbar
31
Super Table
Feldtyp für die Erstellung von
erweiterten Tabellen oder
beliebigen Strukturen in einem
Matrix-Block.
32
ATTRIBUTE
Gruppierung von
Attributen
Konsistentes
Labeling
Hilfetexte wo
sinnvoll
Defaultwerte
Sprechender
Block-Typ
Reihenfolge der
Attribute
33
MATRIXMATE
Gruppierung von Feldern eines
Matrix-Blocks in verschiedene
Registerkarten.
Kommerzielle Alternative: Spoon
34
WIEDERVERWENDUNG VON FELDERN
35
Strukturelle Metadaten
Administrative Metadaten
Beschreibende Metadaten
Präsentations-Metadaten
METADATEN
E R G Ä NZ E N VO N SE IT E NB E Z O G E NE N & G LO B A LE N M E T A DA T E N
36
UNTERSTÜTZUNG DES DESIGN SYSTEMS
Farbauswahl gemäss Design
System beschränken
Kategorien oder Aufklappmenus
für Optionen verwenden
37
COLOR SWATCHES
Konfiguration von spezifischen
Farbpaletten zur Auswahl im
Editor.
38
Anzahl Matrix-Blöcke sowie Felder möglichst gering halten
Blöcke nach logischen und nicht «technischen» Kriterien
strukturieren
Sinnvolle Defaultwerte setzen und Hilfetexte anbieten
Auf Konsistenz achten und technische Terminologie
vermeiden
CONTENT MODEL
IMPLEMENTATION
B E ST PR A C T IC E S
Dem Autor wenig Freiheiten lassen und Rich-Text Editor
(Redactor) Features restriktiv einsetzen
1
2
3
4
5
39
TESTEN & VERBESSERN
Testing one user is 100 percent better
than testing none. Testing always
works, and even the worst test with the
wrong user will show you important
things you can do to improve your site.
Steve Krug
40
Problemen erkennen durch Usability Tests oder Beobachtungen
Besser kleinere Tests, dafür öfters testen
Prototypen und Varianten testen
Hypothesen überprüfen
BEST PRACTICES
T E ST E N & VE R B E SSE R N
1
2
3
4
Verbesserungen umsetzen und iterieren5
41
KEY TAKE-AWAYS
Autoren sind auch User
Betrachte das CMS Backend mit dem
gleichen Anspruch an Benutzbarkeit
wie das Frontend
Keep It Simple
Strukturiere die Inhalte so einfach wie
möglich und so wie es die Autoren
erwarten
Learn – Build – Test– Iterate
Beziehe Autoren, Informationsarchitekten
und Designer in den Modellierungs- und
Umsetzungprozess mit ein, teste und
optimiere laufend
Denke an die Zukunft
Das frühzeitige Berücksichtigen von neuen
Anforderungen oder Kanälen verhindert
später grössere Umbauarbeiten
42
DANKE
a n d re a s . b in g g e li@ me d ia f o rme rs . ch

Weitere ähnliche Inhalte

Ähnlich wie Author Experience in Craft CMS

Authoring Management
Authoring ManagementAuthoring Management
Authoring Managementvzimmermann
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWebmontag MRN
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitOliver Annen
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenAlineDeicke
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenRoland Mast
 
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...Matthias Bohlen
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
Dipl.-Ing. Ludwig Meyer (alysis)
Dipl.-Ing. Ludwig Meyer (alysis)Dipl.-Ing. Ludwig Meyer (alysis)
Dipl.-Ing. Ludwig Meyer (alysis)Praxistage
 
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
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda Wien
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessImmacon
 
Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...
Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...
Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...Michael Maretzke
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikClaus Brell
 
Architektur = Kommunikation
Architektur = KommunikationArchitektur = Kommunikation
Architektur = KommunikationMatthias Bohlen
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseHans-Joachim Belz
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 

Ähnlich wie Author Experience in Craft CMS (20)

Authoring Management
Authoring ManagementAuthoring Management
Authoring Management
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
Von der Idee zur Lösung in Rekordzeit - Anforderungsmanagement und Qualitätss...
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
 
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
TAG2015: ArchiteKultur – wie bekommen wir Architekturarbeit in den Alltag rei...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Dipl.-Ing. Ludwig Meyer (alysis)
Dipl.-Ing. Ludwig Meyer (alysis)Dipl.-Ing. Ludwig Meyer (alysis)
Dipl.-Ing. Ludwig Meyer (alysis)
 
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 ...
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
 
Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...
Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...
Continuous Delivery - Nett oder nötig? Erfahrungsbericht der FriendScout24 - ...
 
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der WirtschaftsinformatikVorgehensmodelle - Methoden der Wirtschaftsinformatik
Vorgehensmodelle - Methoden der Wirtschaftsinformatik
 
Architektur = Kommunikation
Architektur = KommunikationArchitektur = Kommunikation
Architektur = Kommunikation
 
developer-experience.pdf
developer-experience.pdfdeveloper-experience.pdf
developer-experience.pdf
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 

Author Experience in Craft CMS

  • 1. 1 AUTHOR EXPERIENCE IN CRAFT CMS WAS KÖNNEN WIR ALS ENTWICKLER DAZU BEITRAGEN? CRAFT CMS MEETUP 5.12.2019 ANDREAS BINGGELI UX ARCHITECT & SOFTWARE DEVELOPER
  • 2. 2 (M)EIN BLICK ZURÜCK PE R SÖ NLIC HE E NT WIC KLU NG SE R F A HR U NG M IT C M S SY ST E M E N Homebrew “CMS” Firmen-Website für eine grosse Schweizer Bank Mediasurface Intranet für Private Banking Abteilung einer grossen Schweizer Bank 1995 1997 1996 1999No CMS Firmen-Website für IT- Dienstleistungsunternehmen Inso Dynabase Intranet für ein IT- Dienstleistungsunternehmen 2000 2002 Vignette StoryServer Intranet für eine grosse Schweizer Bank Day Communique Firmen-Website für eine grosse Schweizer Bank
  • 3. 3 (M)EIN BLICK ZURÜCK PE R SÖ NLIC HE E NT WIC KLU NG SE R F A HR U NG M IT C M S SY ST E M E N 2009 2013 2010 2015 2016 2016 Obtree/Livelink Internet/Intranet für eine Krankenkasse Day CQ/Adobe AEM Extranet für eine Krankenkasse Contao Verschiedene kleinere Websites Drupal Verschiedene Websites für KMUs Craft CMS, Wordpress Verschiedene kleine bis mittelgrosse Websites Magnolia Firmen-Website für eine Krankenkasse
  • 4. 4 ERKENNTNISSE A U S 23 JA HR E N C M S - E R F A HR U NG A LS E NT WI C KLE R U ND U X - DE S I G NE R Das CMS wird meist von den IT-Abteilungen oder Agenturen ausgewählt Die Hersteller von Content Mangement Systemen kümmerten sich lange nur stiefmütterlich um Usability Nutzerzentriertes Design findet oft nur im Frontend und nicht im Backend statt Die Anforderungen an ein CMS haben sich laufend verändert
  • 5. 5 USABILITY & USER EXPERIENCE USABILITY(ISO 9241-11) USER EXPERIENCE(ISO 9241-210) VOR der Nutzung WÄHREND der Nutzung NACH der Nutzung Erfüllung der ErwartungenErwartung an Nutzung Effektivität Effizienz Zufriedenstellung
  • 6. 6 AUTHOR EXPERIENCE (AX) AUTHOR EXPERIENCE END USER EXPERIENCE UX USER EXPERIENCE DEVELOPER EXPERIENCE Autoren Content Manager Übersetzer … Kunden Partner Mitarbeiter … Alle Benutzer die Inhalte im CMS bearbeiten Alle Benutzer die Inhalte über einen Kanal beziehen
  • 7. 7 Author experience, as a discipline, is the provision of contextually appropriate functionality within a content management system. ❞ ❝
  • 8. 8 HERAUSFORDERUNGEN Eine gute Author Experience ist entscheidend für die Akzeptanz des CMS Ist das CMS zu kompliziert wird es nicht benutzt und Inhalte veralten Das CMS wird von gelegentlichen und regelmässigen Benutzern eingesetzt Das CMS wird mit einem UI ausgeliefert und kann nur teilweise angepasst werden Designer & Autoren haben vielfältige Anforderungen an Inhalt und Gestaltung
  • 9. 9 AUTHOR EXPERIENCE IN CRAFT CMS • Schlichtes und intuitives UI • Responsives Design • Editor mit Previewmöglichkeit • Erweiterungen durch Plugins • Schnelles Onboarding Habe ich als Entwickler überhaupt eine Möglichkeit die Author Experience zu beinflussen?
  • 10. 10 CMmess Seitenansicht = Mentales Modell des Autors Abbildung im Editor Sichtbarer Bereich
  • 11. 11 AX PROZESS Content Strategy Vision Kanäle Zielgruppen Inhaltsanalyse Tone of Voice Content Modeling Inhaltstypen Attribute Metadaten Beziehungen Überprüfen Usability Tests Walkthroughs A/B Tests Analytics Presentation Modeling Templates Design System Assets APIs Measure & Improve Metriken Verbesserungen Erweiterungen Bauen Prototypen Section Types Komponenten Attribute Plugins Lernen Hypothesen Mentale Modelle Verhalten Bedürfnisse Ideengenerierung Content Model Implementation
  • 12. 12 AX PROZESS Content Strategy Vision Kanäle Zielgruppen Inhaltsanalyse Tone of Voice Content Modeling Inhaltstypen Attribute Metadaten Beziehungen Überprüfen Usability Tests Walkthroughs A/B Tests Analytics Presentation Modeling Templates Design System Assets APIs Measure & Improve Metriken Verbesserungen Erweiterungen Bauen Prototypen Section Types Komponenten Attribute Plugins Lernen Hypothesen Mentale Modelle Verhalten Bedürfnisse Ideengenerierung Content Model Implementation
  • 13. 13 CONTENT MODELLIERUNG Formale Strukturierung und Kategorisierung von Inhalten in Form von Inhaltstypen (Content Types), Attributen und Beziehungen.
  • 14. 14 CONTENT MODELLIERUNG Anforderungen Welche Inhalte werden benötigt? Content Types Wie werden die Inhalte strukturiert? Attribute & Metadaten Aus welchen Attributen und Metadaten setzen sich die Inhaltstypen zusammen? Beziehungen Wie stehen die Inhalte in Beziehung zueinander? Umsetzung Überführen des Content Modells in Craft CMS
  • 15. 15 INHALTSTYPEN IDE NT IF IZ IE R E N VO N WI E DE R VE R WE NDB A R E N E NT I T Ä T E N
  • 16. 16 INHALTSTYPEN E R G Ä NZ E N M IT G E NE R ISC HE N INHA LT S T YPE N
  • 17. 17 ATTRIBUTE & METADATEN A U S WE LC HE N E LE M E NT E N S E T Z E N S I C H DI E I NHA LT S T Y PE N Z U S A M M E N
  • 18. 18 BEZIEHUNGEN ZWISCHEN INHALTSTYPEN WI E S T E HE N DI E I NHA LT S T Y PE N I N B E Z IE HU NG Inhaltstypen können in verschiedenen Kontexten verwendet werden
  • 19. 19 Entwicklung in cross-funktionalem Team (Informationsarchitekten, Content Provider, Designer, Autoren, Entwickler) Auf Ausgewogenheit, Wiederverwendbarkeit und Erweiterbarkeit achten Gesundes Mass zwischen Granularität und Flexibilität finden Grafische Darstellung des Content Modells CONTENT MODELLIERUNG B E ST PR A C T IC E S Iterieren und verfeinern 1 2 3 4 5
  • 20. 20 CONTENT MODEL IMPLEMENTATION Umsetzung des Content Modells innerhalb von Craft CMS.
  • 21. 21 BEVOR WIR MIT DER UMSETZUNG BEGINNEN Welche Annahmen haben wir, wie die Autoren mit dem CMS arbeiten werden. Was sind die Erwartungen der Autoren wie die Prozesse funktionieren sollen. Sammlung, Strukturierung, Visualisierung und Priorisierung von Ideen. MENTALE MODELLE IDEENGENERIERUNGHYPOTHESEN Beobachtungen Befragungen Brainstorming, Prototyping
  • 22. 22 SINGLES CHANNELS STRUCTURES CATEGORIES Einmalige Seiten mit einem einzigartigen Design Einträge die in einer zeitlichen Reihenfolge organisiert sind Ähnliche Seiten die in einer bestimmten Reihenfolge oder hierarchisch organsiert sind Für Metadaten, Kategorisierung oder Verknüpfung von Seiten CRAFT SECTION TYPES
  • 23. 23 SECTION TYPES Ü B E R F Ü HR E N VO N INHA LT ST Y PE N IN SE C T IO N T YPE S
  • 24. 24 TEMPLATE & BLÖCKE A U F T E I LE N S E I T E F I X E , S T A T I S C HE & DY NA M I S C HE B E R E I C HE
  • 25. 25 FELDER S T R U KT U R I E R U NG DE R B E A R B E I T B A R E N F E LDE R
  • 26. 26 MATRIXFELDER • Verschiedene Block-Typen in einem einzigen wiederverwendbaren Feld • Ideal um flexible Inhaltsstrukturen abzubilden Cool, aber… • Keine Substrukturen • Keine Schachtelung von Matrixfeldern • Kaum Gestaltungsmöglichkeiten der Dialoge
  • 27. 27 BLOCK-TYPEN S T R U KT U R I E R U NG DE S M A T R I X- F E LDS IN LO G IS C HE B LO C K- T YPE N Strukturierung gemäss dem mentalem Modell des Autors
  • 28. 28 ATTRIBUTE DE F I NI E R E N DE R A T T R I B U T E PR O B LO C K- T YP
  • 29. 29 ATTRIBUTE DE F I NI E R E N DE R A T T R I B U T - T YPE N 29 ATTRIBUTE DE F I NI E R E N DE R A T T R I B U T - T YPE N
  • 30. 30 DYNAMISCHE SUBSTRUKTUREN SECTION ANFANG TITEL COLUMN TEASER COLUMN TEASER COLUMN TEASER COLUMN SECTION ENDE TEASER BLOCK TEASER TEASER COLUMN TEASER TEASER TEASER TEASER BLOCK M Ö G LIC HE A NSÄ T Z E Volle Flexibilität & Wieder- verwendung Fehleranfällig & unüber- sichtlich Aufteilung in Container und Einzel- elemente Erfordert Steuerungs- logik im Template Entspricht dem mentalen Modell des Autors Mit Craft Boardmitteln nicht ideal umsetzbar
  • 31. 31 Super Table Feldtyp für die Erstellung von erweiterten Tabellen oder beliebigen Strukturen in einem Matrix-Block.
  • 33. 33 MATRIXMATE Gruppierung von Feldern eines Matrix-Blocks in verschiedene Registerkarten. Kommerzielle Alternative: Spoon
  • 35. 35 Strukturelle Metadaten Administrative Metadaten Beschreibende Metadaten Präsentations-Metadaten METADATEN E R G Ä NZ E N VO N SE IT E NB E Z O G E NE N & G LO B A LE N M E T A DA T E N
  • 36. 36 UNTERSTÜTZUNG DES DESIGN SYSTEMS Farbauswahl gemäss Design System beschränken Kategorien oder Aufklappmenus für Optionen verwenden
  • 37. 37 COLOR SWATCHES Konfiguration von spezifischen Farbpaletten zur Auswahl im Editor.
  • 38. 38 Anzahl Matrix-Blöcke sowie Felder möglichst gering halten Blöcke nach logischen und nicht «technischen» Kriterien strukturieren Sinnvolle Defaultwerte setzen und Hilfetexte anbieten Auf Konsistenz achten und technische Terminologie vermeiden CONTENT MODEL IMPLEMENTATION B E ST PR A C T IC E S Dem Autor wenig Freiheiten lassen und Rich-Text Editor (Redactor) Features restriktiv einsetzen 1 2 3 4 5
  • 39. 39 TESTEN & VERBESSERN Testing one user is 100 percent better than testing none. Testing always works, and even the worst test with the wrong user will show you important things you can do to improve your site. Steve Krug
  • 40. 40 Problemen erkennen durch Usability Tests oder Beobachtungen Besser kleinere Tests, dafür öfters testen Prototypen und Varianten testen Hypothesen überprüfen BEST PRACTICES T E ST E N & VE R B E SSE R N 1 2 3 4 Verbesserungen umsetzen und iterieren5
  • 41. 41 KEY TAKE-AWAYS Autoren sind auch User Betrachte das CMS Backend mit dem gleichen Anspruch an Benutzbarkeit wie das Frontend Keep It Simple Strukturiere die Inhalte so einfach wie möglich und so wie es die Autoren erwarten Learn – Build – Test– Iterate Beziehe Autoren, Informationsarchitekten und Designer in den Modellierungs- und Umsetzungprozess mit ein, teste und optimiere laufend Denke an die Zukunft Das frühzeitige Berücksichtigen von neuen Anforderungen oder Kanälen verhindert später grössere Umbauarbeiten
  • 42. 42 DANKE a n d re a s . b in g g e li@ me d ia f o rme rs . ch