SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Drupal content editing UX
Sergei Sorokin
COO Ukraine
Overview
• Problem outline and a bit of history
• Basic principles of improving backend UX
• Real-life examples, tips and modules
• Spark project and Drupal 8 UI
improvements
• Conclusion and Q&A
Drupal admin interface over the years
Drupal 4.7 Drupal 5
Drupal admin interface over the years
Default Drupal 6 in Garland
theme
Drupal 6 in Bartik theme with
admin_menu module
First D6 themes & modules aimed at
improving admin interface
• rubik
• rootcandy
• admin
• admin_menu
• vertical_tabs
• etc…
D7UX initiative
D7UX principles:
• Make the most frequent tasks easy and
less frequent tasks achievable.
• Design for the 80%
• Privilege the Content Creator
• Make the default settings smart
Site: www.d7ux.org
D7UX results
• Updated and
simplified structure
• “Seven” theme with
optional overlay
• Admin toolbar with
shortcuts
• Dashboard
• Contextual links
D7UX was a huge
improvement
To push it further, let’s identify the
issue first
Problem outline
• Drupal admin interface, concepts and
entities can be confusing even for
beginner developers
• Clients who are using the CMS usually
don't think in the same logical patterns as
developers
• Developers rarely pay attention to this
issue and it ends up being ignored
How to make client’s daily
interactions with your product
easier?
Basic principles
• Simplify by reducing all that is not
necessary
• Don't make user guess
• Ensure consistent logical and interface
patterns
• Minimize cost of user error
Real-life examples, tips
and modules
Navigation
• By default user is redirected to /user page
which is usually useless for editors
• Redirect user to the page where he/she can
perform their common actions
• https://drupal.org/project/login_redirect
• https://drupal.org/project/rules
• Logging in is not the only use case
• Remove unused menu items with permissons
• https://drupal.org/project/shortcutperrole
Dashboard & content list
Dashboard
• Default D7 dashboard
• https://drupal.org/project/workbench
Content list
• https://drupal.org/project/admin_views
• https://drupal.org/project/improved_admin
• https://drupal.org/project/views_bulk_operations
Total control https://drupal.org/project/total_control
Content: easy improvements
• Give meaningful names and descriptions to content
types, their fields and other entities
• Clone existing nodes with
https://drupal.org/project/node_clone
• Create another node of the same content type in a row
with https://drupal.org/project/addanother
• Schedule automatic publishing and unpublishing of
nodes https://drupal.org/project/scheduler
• Add https://drupal.org/project/linkit to provide easy
interface for internal and external linking to nodes, users,
managed files, etc…
Content: reduce with permissions
Leave only necessary
node options by:
• Limiting permissions
• https://drupal.org/project/
override_node_option
Content: WYSIWYG
• Don’t make user think about input format, set it by
role with: https://drupal.org/project/better_formats
• Integrate it with file system
• Remove unused buttons in editor
Content: media files
Allow user to manage and reuse uploaded files:
• https://drupal.org/project/media_browser_plus
• https://drupal.org/project/imce
• https://drupal.org/project/filedepot
• http://drupal.org/project/plupload for multiple file
uploads
These modules can be overwhelming for editors,
so try to disable unused features and customize
per needs.
Content: dealing with complex forms
https://drupal.org/project/field_group https://drupal.org/project/conditional_fields
Content: custom design
Views & panels
• Views built-in feature that is often overlooked: add
contextual links in all listings on the site to allow
quick access to node editing or deletion.
• Allow editors to edit headers and footers of Views
without giving access to everything else with
https://drupal.org/project/views_ui_basic
• Easily rearrange view items with
https://drupal.org/project/draggableviews
• If you use panels, you can override panel content
per node with https://drupal.org/project/panelizer
Minimizing cost of error
• Enable revisions by default and use
http://drupal.org/project/diff to let editors compare
them and easily roll back
• Make sure you have (at least) daily backups set up.
Not really an UI advice, but it’s always relevant
• Use https://drupal.org/project/field_validation to
create specific validation rules for fields
• Install https://drupal.org/project/clientside_validation
to send feedback to user immediately without having
to submit the form.
Spark
Distribution for D7
and part of core in D8
Spark
• In-place editing
• D&D layout tools
• Enhanced content
creation
• Dashboard
improvements
• Mobile (responsive)
administration
• CK Editor in core
• And much more
https://drupal.org/project/spark
Spark
In-place editing Responsive layout builder
Spark is another
great step forward
Conclusion
• Drupal admin interface often can be complex for
end users
• Constant improvement is evident (though it could
be faster)
• Usability of Drupal and your project in particular
depends on you: don’t overlook the issue, test
backend usability, improve it, share it by
contributing
• It’s a good investment that will enrich your projects
and make your clients a bit happier
Recommended reading
The Design of Everyday Things
by Donald A. Norman
Don't Make Me Think
by Steve Krug
Thank you!
Questions?

Weitere ähnliche Inhalte

Was ist angesagt?

Drupal Site Audit - SFDUG
Drupal Site Audit - SFDUGDrupal Site Audit - SFDUG
Drupal Site Audit - SFDUG
Jon Peck
 

Was ist angesagt? (10)

The potential in Drupal 8.x and how to realize it
The potential in Drupal 8.x and how to realize itThe potential in Drupal 8.x and how to realize it
The potential in Drupal 8.x and how to realize it
 
How to audit Drupal Sites for performance, content and best practices
How to audit Drupal Sites for performance, content and best practicesHow to audit Drupal Sites for performance, content and best practices
How to audit Drupal Sites for performance, content and best practices
 
How to Successfully Implement Headless Drupal
How to Successfully Implement Headless DrupalHow to Successfully Implement Headless Drupal
How to Successfully Implement Headless Drupal
 
[20160314][CUHK][CSCI4140]Life of an Agile Team]
[20160314][CUHK][CSCI4140]Life of an Agile Team][20160314][CUHK][CSCI4140]Life of an Agile Team]
[20160314][CUHK][CSCI4140]Life of an Agile Team]
 
Drupal Site Audit - SFDUG
Drupal Site Audit - SFDUGDrupal Site Audit - SFDUG
Drupal Site Audit - SFDUG
 
Department Project Server Overview Part 2
Department Project Server Overview Part 2Department Project Server Overview Part 2
Department Project Server Overview Part 2
 
Getting Started with Project Online
Getting Started with Project OnlineGetting Started with Project Online
Getting Started with Project Online
 
Drupal 8 Adoption Myths Debunked
Drupal 8 Adoption Myths DebunkedDrupal 8 Adoption Myths Debunked
Drupal 8 Adoption Myths Debunked
 
Red Hat Summit 2015 : Drools, jBPM and UberFire Roadmaps
Red Hat Summit 2015 : Drools, jBPM and UberFire RoadmapsRed Hat Summit 2015 : Drools, jBPM and UberFire Roadmaps
Red Hat Summit 2015 : Drools, jBPM and UberFire Roadmaps
 
Codestock 2015 - Visual Studio 2015 for Web Developers slides
Codestock 2015 - Visual Studio 2015 for Web Developers slidesCodestock 2015 - Visual Studio 2015 for Web Developers slides
Codestock 2015 - Visual Studio 2015 for Web Developers slides
 

Ähnlich wie Drupal content editing ux

Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
Gregg Coppen
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Angela Byron
 

Ähnlich wie Drupal content editing ux (20)

Drupalcamp London 2015: Improving the CMS user experience
Drupalcamp London 2015: Improving the CMS user experienceDrupalcamp London 2015: Improving the CMS user experience
Drupalcamp London 2015: Improving the CMS user experience
 
Upgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and GotchasUpgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and Gotchas
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
 
Upgrading to Drupal 7
Upgrading to Drupal 7Upgrading to Drupal 7
Upgrading to Drupal 7
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
Getting Started with Drupal - Handouts
Getting Started with Drupal - HandoutsGetting Started with Drupal - Handouts
Getting Started with Drupal - Handouts
 
Top 20 mistakes you will make on your 1st Drupal project
Top 20 mistakes you will make on your 1st Drupal projectTop 20 mistakes you will make on your 1st Drupal project
Top 20 mistakes you will make on your 1st Drupal project
 
Using Grunt with Drupal
Using Grunt with DrupalUsing Grunt with Drupal
Using Grunt with Drupal
 
LITA Preconference: Getting Started with Drupal (handout)
LITA Preconference: Getting Started with Drupal (handout)LITA Preconference: Getting Started with Drupal (handout)
LITA Preconference: Getting Started with Drupal (handout)
 
Top Drupal modules for beginners
Top Drupal modules for beginnersTop Drupal modules for beginners
Top Drupal modules for beginners
 
Drupal 8 deeper dive
Drupal 8 deeper diveDrupal 8 deeper dive
Drupal 8 deeper dive
 
Drupal in 5mins + Previewing Drupal 8.x
Drupal in 5mins + Previewing Drupal 8.xDrupal in 5mins + Previewing Drupal 8.x
Drupal in 5mins + Previewing Drupal 8.x
 
Becoming A Drupal Master Builder
Becoming A Drupal Master BuilderBecoming A Drupal Master Builder
Becoming A Drupal Master Builder
 
Drupal 8 improvements for developer productivity php symfony and more
Drupal 8 improvements for developer productivity  php symfony and moreDrupal 8 improvements for developer productivity  php symfony and more
Drupal 8 improvements for developer productivity php symfony and more
 
Taking your site from Drupal 6 to Drupal 7
Taking your site from Drupal 6 to Drupal 7Taking your site from Drupal 6 to Drupal 7
Taking your site from Drupal 6 to Drupal 7
 
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and BeyondSpark: Authoring Experience++ in Drupal 7, 8, and Beyond
Spark: Authoring Experience++ in Drupal 7, 8, and Beyond
 
Using Features
Using FeaturesUsing Features
Using Features
 
Drupal -Introduction to Drupal
Drupal -Introduction to DrupalDrupal -Introduction to Drupal
Drupal -Introduction to Drupal
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Drupal intro
Drupal introDrupal intro
Drupal intro
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Kürzlich hochgeladen (20)

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 

Drupal content editing ux

  • 1. Drupal content editing UX Sergei Sorokin COO Ukraine
  • 2. Overview • Problem outline and a bit of history • Basic principles of improving backend UX • Real-life examples, tips and modules • Spark project and Drupal 8 UI improvements • Conclusion and Q&A
  • 3. Drupal admin interface over the years Drupal 4.7 Drupal 5
  • 4. Drupal admin interface over the years Default Drupal 6 in Garland theme Drupal 6 in Bartik theme with admin_menu module
  • 5. First D6 themes & modules aimed at improving admin interface • rubik • rootcandy • admin • admin_menu • vertical_tabs • etc…
  • 6. D7UX initiative D7UX principles: • Make the most frequent tasks easy and less frequent tasks achievable. • Design for the 80% • Privilege the Content Creator • Make the default settings smart Site: www.d7ux.org
  • 7. D7UX results • Updated and simplified structure • “Seven” theme with optional overlay • Admin toolbar with shortcuts • Dashboard • Contextual links
  • 8. D7UX was a huge improvement To push it further, let’s identify the issue first
  • 9. Problem outline • Drupal admin interface, concepts and entities can be confusing even for beginner developers • Clients who are using the CMS usually don't think in the same logical patterns as developers • Developers rarely pay attention to this issue and it ends up being ignored
  • 10. How to make client’s daily interactions with your product easier?
  • 11. Basic principles • Simplify by reducing all that is not necessary • Don't make user guess • Ensure consistent logical and interface patterns • Minimize cost of user error
  • 13. Navigation • By default user is redirected to /user page which is usually useless for editors • Redirect user to the page where he/she can perform their common actions • https://drupal.org/project/login_redirect • https://drupal.org/project/rules • Logging in is not the only use case • Remove unused menu items with permissons • https://drupal.org/project/shortcutperrole
  • 14. Dashboard & content list Dashboard • Default D7 dashboard • https://drupal.org/project/workbench Content list • https://drupal.org/project/admin_views • https://drupal.org/project/improved_admin • https://drupal.org/project/views_bulk_operations
  • 16. Content: easy improvements • Give meaningful names and descriptions to content types, their fields and other entities • Clone existing nodes with https://drupal.org/project/node_clone • Create another node of the same content type in a row with https://drupal.org/project/addanother • Schedule automatic publishing and unpublishing of nodes https://drupal.org/project/scheduler • Add https://drupal.org/project/linkit to provide easy interface for internal and external linking to nodes, users, managed files, etc…
  • 17. Content: reduce with permissions Leave only necessary node options by: • Limiting permissions • https://drupal.org/project/ override_node_option
  • 18. Content: WYSIWYG • Don’t make user think about input format, set it by role with: https://drupal.org/project/better_formats • Integrate it with file system • Remove unused buttons in editor
  • 19. Content: media files Allow user to manage and reuse uploaded files: • https://drupal.org/project/media_browser_plus • https://drupal.org/project/imce • https://drupal.org/project/filedepot • http://drupal.org/project/plupload for multiple file uploads These modules can be overwhelming for editors, so try to disable unused features and customize per needs.
  • 20. Content: dealing with complex forms https://drupal.org/project/field_group https://drupal.org/project/conditional_fields
  • 22. Views & panels • Views built-in feature that is often overlooked: add contextual links in all listings on the site to allow quick access to node editing or deletion. • Allow editors to edit headers and footers of Views without giving access to everything else with https://drupal.org/project/views_ui_basic • Easily rearrange view items with https://drupal.org/project/draggableviews • If you use panels, you can override panel content per node with https://drupal.org/project/panelizer
  • 23. Minimizing cost of error • Enable revisions by default and use http://drupal.org/project/diff to let editors compare them and easily roll back • Make sure you have (at least) daily backups set up. Not really an UI advice, but it’s always relevant • Use https://drupal.org/project/field_validation to create specific validation rules for fields • Install https://drupal.org/project/clientside_validation to send feedback to user immediately without having to submit the form.
  • 24. Spark Distribution for D7 and part of core in D8
  • 25. Spark • In-place editing • D&D layout tools • Enhanced content creation • Dashboard improvements • Mobile (responsive) administration • CK Editor in core • And much more https://drupal.org/project/spark
  • 27. Spark is another great step forward
  • 28. Conclusion • Drupal admin interface often can be complex for end users • Constant improvement is evident (though it could be faster) • Usability of Drupal and your project in particular depends on you: don’t overlook the issue, test backend usability, improve it, share it by contributing • It’s a good investment that will enrich your projects and make your clients a bit happier
  • 29. Recommended reading The Design of Everyday Things by Donald A. Norman Don't Make Me Think by Steve Krug