SlideShare a Scribd company logo
Simplifying
Your Admin
Experience
Make Drupal easy for the
people who use it most
Martin
Anderson-Clutz
@mandclu
DRUPAL HAS A REPUTATION OF BEING
Harder to Learn
We have the power to make it
easier. What follow are some
ideas on how site builders and
developers can help
Photo:
https://unsplash.com/@brucemars
Demo 1
A stock install of Drupal 9
Don’t Make Your Editors Think
● Every page should be self-evident, or at
least self-explanatory
● Make it obvious how to perform a task
● Standard UX principles apply
○ Use a visual hierarchy
○ Consistent use of link colours
Photo:
https://unsplash.com/@brucemars
Be Descriptive
● Provide help text (field descriptions) wherever possible
● Label icons, at least on hover
● Where validation constraints exist, state them in the help text
○ Including expected input patterns, e.g.
Sku: XXXX-######
○ Characters not permitted or required
Photo:
https://unsplash.com/@brucemars
Watch Your Language
● Avoid Drupalisms
○ Nodes, entities, media, etc
● Use familiar, relevant, and meaningful labels
○ Alerts, events, images, etc
Photo:
https://unsplash.com/@brucemars
Appropriate Complexity
● Have roles configured with a simplified editor experience, for
less technical users
● Balance power and configurability with simplified,
single-purpose tasks
● The right answer will be different from site to site, and change
over time
● Default to Basic HTML with a simpler set of WYSIWYG options
Photo:
https://unsplash.com/@brucemars
Reduce Friction
● Make every click count
○ Admin Toolbar and Coffee modules can help users
get where they need to go faster
● Think about where you take a user when a task is
completed
○ Login And Logout Redirect Per Role can allow you
to a user somewhere useful after login
Photo:
https://unsplash.com/@brucemars
WYSIWYG Buttons
● Err on the side of keeping simple
● Some buttons very rarely needed:
○ Superscript
○ Subscript
○ Justify text
● Others likely should always be excluded:
○ Underline
Photo:
https://unsplash.com/@brucemars
● Consider adding:
○ Maximize
Staying In Context
● Provide obvious prompts on listing pages to manage the content
○ for editors only
● For simple tasks, keep in context when possible
● For more complex tasks, return when finished
● Add Content By Bundle and Display Link Plus help to add links for
editors only
Photo:
https://unsplash.com/@brucemars
Photo:
https://unsplash.com/@brucemars
Photo:
https://unsplash.com/@brucemars
Photo:
https://unsplash.com/@brucemars
Photo:
https://unsplash.com/@brucemars
Immediate Feedback
● Provide tools to give immediate feedback on any
additional work that may be needed
● Accessibility: Editoria11y
● Responsive: Responsive Preview
● SEO: Real-time SEO (yoast_seo)
● Image previews: use a thumbnail image format cropped
to the same proportions as when viewed full size
Photo:
https://unsplash.com/@brucemars
Good Form
Principles for making your forms
intuitive
Field Usability
● Clearly mark required fields
● Provide sensible defaults when possible
● Avoid placeholder text
● If more than one “action” button, clearly indicate primary
○ Never a “Clear” or “Reset” button
Photo:
https://unsplash.com/@brucemars
Field Usability
Radios, Checkboxes
● Options obvious without
clicking
● Select with a single click
Photo:
https://unsplash.com/@brucemars
Select dropdown
● Better if many options (>5)
● Add Select2 or Chosen to
provide search
Remove Elements That Aren’t Needed
● “Promote to Front” and “Sticky” for content
types where these values won’t be used
● Simplify module allows base fields to be
hidden from forms
● Use Field Permissions to hide fields only
needed by high-level admins
Photo:
https://unsplash.com/@brucemars
Reference Field Usability
● Inline Entity Form to allow creating new, related content
○ Allows custom labels e.g. “Image” or “Contact”
Photo:
https://unsplash.com/@brucemars
Jakob’s Law
● Leverage conventions and
mental models editors bring
to your site
● Mimic the way similar
applications work whenever
possible
Photo:
https://unsplash.com/@brucemars
Users spend most of their time
on other sites. This means that
users prefer your site to work
the same way as all the other
sites they already know.
Specialized Fields
● Leverage fields meant to replicate common patterns of data
entry
○ Address module provides a set of fields for capturing
location information
■ Integration for geocoding, mapping
○ Smart Date for app-like date and time entry, including
recurring events
■ Integration for calendar displays
Photo:
https://unsplash.com/@brucemars
Organize Your Form
● Sequence forms logically with
most important fields first
○ Required fields high up too
● Visually group related fields
and labels
○ Field Group module
● Single column is better
Photo:
https://unsplash.com/@brucemars
Consistency
● Try to have edit forms follow the same structure as the
entity view
● Try to use the same widgets and naming across different
entities and bundles
Photo:
https://unsplash.com/@brucemars
Design for the Typical Use Case
● If an entity has numerous fields to handle edge cases, collapse
them into a fieldset or tab
● If various WYSIWYG plugins are needed for edge cases, put
them into a separate text format, not default
● Form Mode Control can help using different form configurations
based on use case
Photo:
https://unsplash.com/@brucemars
When Things Go Wrong
● Alerts should be descriptive enough to communicate the fix
required
● Don’t show errors in a modal or popup that has to be dismissed
● Show errors inline on the form element or at least highlight the
field with the error
○ Inline Form Errors module (core) puts error messages next to
each element and outputs a summary
Photo:
https://unsplash.com/@brucemars
Demo 2
An optimized Drupal 9 site
Dynamic Layouts
Giving editors control over the
output structure
Layout Builder
● Core’s visual, accessible solution for laying out:
○ The default layout of a content type
○ Each node of one or more content types
● Only enable when necessary, possibly only on a single
content type
Photo:
https://unsplash.com/@brucemars
Layout Builder
● Can expose a bewildering list of options
○ Layout Builder Restrictions allows for a smaller list
● Possible to make bad decisions
○ Layout Builder Lock can help prevent some
● Use Layout Builder Library to allow editors to choose from
predefined layouts
Photo:
https://unsplash.com/@brucemars
Paragraphs
● Less visual, but harder to break
● Possible to nest for complex layouts
● Can also be used for field collections
● Some use paragraphs with Layout Builder
● Paragraphs Edit gives authors a quick way to edit a single
component
Photo:
https://unsplash.com/@brucemars
Systems Thinking
Thinking about your sites as a set of
individual systems
Website Systems
● One or more content types, related views, sometimes with
specific modules for additional functionality
● Examples:
○ Blog or news
○ Alerts
○ Staff directory
○ Events Calendar
Photo:
https://unsplash.com/@brucemars
Keeping Context
● Allow management within a system
● Provide obvious prompts for managing
○ for editors only
● For simple tasks, stay in context when possible
● For more complex tasks, return when finished
● Add Content By Bundle and Display Link Plus help
to add links for editors only
Photo:
https://unsplash.com/@brucemars
Additional Thoughts
Clone and Edit
● For complex content types, sometimes easier to clone
and edit than build from scratch
○ Entity Clone module provides an operation for this
Photo:
https://unsplash.com/@brucemars
Managing Dates
● Where the “date” of content is important (e.g. news)
make an explicit and obvious field
○ “Created date” is hidden and often isn’t what
should be shown
● Publication Date module will automatically show the
date content is actually published, but also allows a
manual value
Photo:
https://unsplash.com/@brucemars
Photo:
https://unsplash.com/@brucemars
Content View As A Dashboard
● Customize the filters
● Consider making the moderated content view an
attachment or block
● Content Planner module provides analytics and
calendar views
Photo:
https://unsplash.com/@brucemars
Documentation
● Make scannable, with steps clearly indicated
● Include screen captures
● Provide in a user-friendly format
○ Not everyone can use Google Docs
● Videos can also help show a process
e.g. Loom screen recorder
● Try using Tour or Help Topics for embedded help
Photo:
https://unsplash.com/@brucemars
Incremental Improvements
● Test as much as possible
● Eat your own dog food
● Get feedback and iterate
Photo:
https://unsplash.com/@brucemars
Modules to Help
● Responsive Preview
● Editoria11y
● Field Group
● Form Tips?
● Smart Date
● Add Content By Bundle
● Inline Entity Form
● Inline Errors
● Entity Browser or Media Library
Photo:
https://unsplash.com/@brucemars
● Tour
● Help Topics (beta)
Resources
● Laws of UX
● Form Design Best Practices
● Content Creation by Average People
● Website Forms Usability: Top 10 Recommendations
● UX Considerations for Building an Amazing CMS | UX Booth
● How to set up a CMS that will make non-technical users happy
● User Experience: The Single Most Important Element of a Web CMS
Photo:
https://unsplash.com/@brucemars
Thank you.
@mandclu

More Related Content

What's hot

Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
rtCamp
 
Being Cleverly Lazy
Being Cleverly LazyBeing Cleverly Lazy
Being Cleverly Lazy
Christian Heilmann
 
Word press beyond websites toronto
Word press  beyond websites torontoWord press  beyond websites toronto
Word press beyond websites toronto
wcto2017
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
Women in Technology Poland
 
Web scraping 101 with goutte
Web scraping 101 with goutteWeb scraping 101 with goutte
Web scraping 101 with goutte
Joshua Copeland
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
Gilbert Guerrero
 
Nl be WordPress vertaling
Nl be WordPress vertalingNl be WordPress vertaling
Nl be WordPress vertaling
Dave Loodts
 
New Ranking Metrics by Google
New Ranking Metrics by GoogleNew Ranking Metrics by Google
New Ranking Metrics by Google
Phil Marx
 
Php training in chandigarh - CBitss Technologies
Php training in chandigarh  - CBitss Technologies Php training in chandigarh  - CBitss Technologies
Php training in chandigarh - CBitss Technologies
Cbitss Technologies
 

What's hot (9)

Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
Build Your Blazing Fast Site with Gatsby and WordPress @ WordSesh by Muhammad...
 
Being Cleverly Lazy
Being Cleverly LazyBeing Cleverly Lazy
Being Cleverly Lazy
 
Word press beyond websites toronto
Word press  beyond websites torontoWord press  beyond websites toronto
Word press beyond websites toronto
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Web scraping 101 with goutte
Web scraping 101 with goutteWeb scraping 101 with goutte
Web scraping 101 with goutte
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
 
Nl be WordPress vertaling
Nl be WordPress vertalingNl be WordPress vertaling
Nl be WordPress vertaling
 
New Ranking Metrics by Google
New Ranking Metrics by GoogleNew Ranking Metrics by Google
New Ranking Metrics by Google
 
Php training in chandigarh - CBitss Technologies
Php training in chandigarh  - CBitss Technologies Php training in chandigarh  - CBitss Technologies
Php training in chandigarh - CBitss Technologies
 

Similar to Simplifying your admin experience - Stanford WebCamp

Simplifying Your Admin Experience - FLDC 2023.pptx
Simplifying Your Admin Experience - FLDC 2023.pptxSimplifying Your Admin Experience - FLDC 2023.pptx
Simplifying Your Admin Experience - FLDC 2023.pptx
Martin Anderson-Clutz
 
Simplifying the Drupal Admin Experience
Simplifying the Drupal Admin ExperienceSimplifying the Drupal Admin Experience
Simplifying the Drupal Admin Experience
Martin Anderson-Clutz
 
Improving drupals cex and ax
Improving drupals cex and axImproving drupals cex and ax
Improving drupals cex and ax
Richard Saddington
 
Hong Kong Drupal User Group - Introduction of Drush
Hong Kong Drupal User Group - Introduction of DrushHong Kong Drupal User Group - Introduction of Drush
Hong Kong Drupal User Group - Introduction of Drush
Francis Yan
 
Nuxeo Platform LTS 2016 - Roadmap
Nuxeo Platform LTS 2016 - RoadmapNuxeo Platform LTS 2016 - Roadmap
Nuxeo Platform LTS 2016 - Roadmap
Nuxeo
 
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Brian Hay
 
Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8
cameronandwilding
 
TextEditor - Designing open source apps
TextEditor - Designing open source appsTextEditor - Designing open source apps
TextEditor - Designing open source apps
Richard L Caceres
 
I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023
I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023
I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023
Martin Anderson-Clutz
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
Emma Jane Hogbin Westby
 
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
 
How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?
IWMW
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
nuppla
 
Introduction into Drupal site building
Introduction into Drupal site buildingIntroduction into Drupal site building
Introduction into Drupal site building
Iztok Smolic
 
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
Wong Hoi Sing Edison
 
Mobilesoft presentation
Mobilesoft presentationMobilesoft presentation
Mobilesoft presentation
Jari Voutilainen
 
Drupal for Publishers: How to Build a Better Newsroom CMS
Drupal for Publishers: How to Build a Better Newsroom CMSDrupal for Publishers: How to Build a Better Newsroom CMS
Drupal for Publishers: How to Build a Better Newsroom CMS
Acquia
 
How to Write a Winning Session Submission
How to Write a Winning Session SubmissionHow to Write a Winning Session Submission
How to Write a Winning Session Submission
Docker, Inc
 
Coalmarch Duke presentation Scholars@duke
Coalmarch Duke presentation Scholars@dukeCoalmarch Duke presentation Scholars@duke
Coalmarch Duke presentation Scholars@duke
Coalmarch
 
Do your best to make your webpage accessible
Do your best to make your webpage accessibleDo your best to make your webpage accessible
Do your best to make your webpage accessible
Bostjan Kovac
 

Similar to Simplifying your admin experience - Stanford WebCamp (20)

Simplifying Your Admin Experience - FLDC 2023.pptx
Simplifying Your Admin Experience - FLDC 2023.pptxSimplifying Your Admin Experience - FLDC 2023.pptx
Simplifying Your Admin Experience - FLDC 2023.pptx
 
Simplifying the Drupal Admin Experience
Simplifying the Drupal Admin ExperienceSimplifying the Drupal Admin Experience
Simplifying the Drupal Admin Experience
 
Improving drupals cex and ax
Improving drupals cex and axImproving drupals cex and ax
Improving drupals cex and ax
 
Hong Kong Drupal User Group - Introduction of Drush
Hong Kong Drupal User Group - Introduction of DrushHong Kong Drupal User Group - Introduction of Drush
Hong Kong Drupal User Group - Introduction of Drush
 
Nuxeo Platform LTS 2016 - Roadmap
Nuxeo Platform LTS 2016 - RoadmapNuxeo Platform LTS 2016 - Roadmap
Nuxeo Platform LTS 2016 - Roadmap
 
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
 
Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8Tassos Koutlas - Tour API in Drupal 8
Tassos Koutlas - Tour API in Drupal 8
 
TextEditor - Designing open source apps
TextEditor - Designing open source appsTextEditor - Designing open source apps
TextEditor - Designing open source apps
 
I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023
I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023
I have a Great Idea for a Drupal Module! Now What? - DrupalDevDays 2023
 
Responsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS ExpoResponsive Web Design for Drupal, CMS Expo
Responsive Web Design for Drupal, CMS Expo
 
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
 
How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
 
Introduction into Drupal site building
Introduction into Drupal site buildingIntroduction into Drupal site building
Introduction into Drupal site building
 
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
 
Mobilesoft presentation
Mobilesoft presentationMobilesoft presentation
Mobilesoft presentation
 
Drupal for Publishers: How to Build a Better Newsroom CMS
Drupal for Publishers: How to Build a Better Newsroom CMSDrupal for Publishers: How to Build a Better Newsroom CMS
Drupal for Publishers: How to Build a Better Newsroom CMS
 
How to Write a Winning Session Submission
How to Write a Winning Session SubmissionHow to Write a Winning Session Submission
How to Write a Winning Session Submission
 
Coalmarch Duke presentation Scholars@duke
Coalmarch Duke presentation Scholars@dukeCoalmarch Duke presentation Scholars@duke
Coalmarch Duke presentation Scholars@duke
 
Do your best to make your webpage accessible
Do your best to make your webpage accessibleDo your best to make your webpage accessible
Do your best to make your webpage accessible
 

More from Martin Anderson-Clutz

Image Optimization in Drupal
Image Optimization in DrupalImage Optimization in Drupal
Image Optimization in Drupal
Martin Anderson-Clutz
 
Configuration Kits - DrupalCamp NYC 2021
Configuration Kits - DrupalCamp NYC 2021Configuration Kits - DrupalCamp NYC 2021
Configuration Kits - DrupalCamp NYC 2021
Martin Anderson-Clutz
 
Robust Events System In Minutes | DrupalCon North America 2021
Robust Events System In Minutes | DrupalCon North America 2021Robust Events System In Minutes | DrupalCon North America 2021
Robust Events System In Minutes | DrupalCon North America 2021
Martin Anderson-Clutz
 
Manually curated solr search results | DrupalCon NA 2021
Manually curated solr search results | DrupalCon NA 2021Manually curated solr search results | DrupalCon NA 2021
Manually curated solr search results | DrupalCon NA 2021
Martin Anderson-Clutz
 
Recurring Dates in Drupal - BADCAMP 2020
Recurring Dates in Drupal - BADCAMP 2020Recurring Dates in Drupal - BADCAMP 2020
Recurring Dates in Drupal - BADCAMP 2020
Martin Anderson-Clutz
 
Smart Date - Drupalcamp Colorado 2020
Smart Date - Drupalcamp Colorado 2020Smart Date - Drupalcamp Colorado 2020
Smart Date - Drupalcamp Colorado 2020
Martin Anderson-Clutz
 

More from Martin Anderson-Clutz (6)

Image Optimization in Drupal
Image Optimization in DrupalImage Optimization in Drupal
Image Optimization in Drupal
 
Configuration Kits - DrupalCamp NYC 2021
Configuration Kits - DrupalCamp NYC 2021Configuration Kits - DrupalCamp NYC 2021
Configuration Kits - DrupalCamp NYC 2021
 
Robust Events System In Minutes | DrupalCon North America 2021
Robust Events System In Minutes | DrupalCon North America 2021Robust Events System In Minutes | DrupalCon North America 2021
Robust Events System In Minutes | DrupalCon North America 2021
 
Manually curated solr search results | DrupalCon NA 2021
Manually curated solr search results | DrupalCon NA 2021Manually curated solr search results | DrupalCon NA 2021
Manually curated solr search results | DrupalCon NA 2021
 
Recurring Dates in Drupal - BADCAMP 2020
Recurring Dates in Drupal - BADCAMP 2020Recurring Dates in Drupal - BADCAMP 2020
Recurring Dates in Drupal - BADCAMP 2020
 
Smart Date - Drupalcamp Colorado 2020
Smart Date - Drupalcamp Colorado 2020Smart Date - Drupalcamp Colorado 2020
Smart Date - Drupalcamp Colorado 2020
 

Recently uploaded

一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
kmzsy4kn
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
qa8dk1wm
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
twqryq79
 
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
sf3cfttw
 
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
lyurzi7r
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
SirmaDuztepeliler
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 

Recently uploaded (20)

一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
 
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
一比一原版澳洲查理斯特大学毕业证(CSU学位证)如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
 
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
一比一原版美国明尼苏达大学双城分校毕业证(UMTC学位证)如何办理
 
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...Rethinking Kållered │  From Big Box to a Reuse Hub: A Transformation Journey ...
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 

Simplifying your admin experience - Stanford WebCamp

  • 1. Simplifying Your Admin Experience Make Drupal easy for the people who use it most
  • 3. DRUPAL HAS A REPUTATION OF BEING Harder to Learn We have the power to make it easier. What follow are some ideas on how site builders and developers can help Photo: https://unsplash.com/@brucemars
  • 4. Demo 1 A stock install of Drupal 9
  • 5. Don’t Make Your Editors Think ● Every page should be self-evident, or at least self-explanatory ● Make it obvious how to perform a task ● Standard UX principles apply ○ Use a visual hierarchy ○ Consistent use of link colours Photo: https://unsplash.com/@brucemars
  • 6. Be Descriptive ● Provide help text (field descriptions) wherever possible ● Label icons, at least on hover ● Where validation constraints exist, state them in the help text ○ Including expected input patterns, e.g. Sku: XXXX-###### ○ Characters not permitted or required Photo: https://unsplash.com/@brucemars
  • 7. Watch Your Language ● Avoid Drupalisms ○ Nodes, entities, media, etc ● Use familiar, relevant, and meaningful labels ○ Alerts, events, images, etc Photo: https://unsplash.com/@brucemars
  • 8. Appropriate Complexity ● Have roles configured with a simplified editor experience, for less technical users ● Balance power and configurability with simplified, single-purpose tasks ● The right answer will be different from site to site, and change over time ● Default to Basic HTML with a simpler set of WYSIWYG options Photo: https://unsplash.com/@brucemars
  • 9. Reduce Friction ● Make every click count ○ Admin Toolbar and Coffee modules can help users get where they need to go faster ● Think about where you take a user when a task is completed ○ Login And Logout Redirect Per Role can allow you to a user somewhere useful after login Photo: https://unsplash.com/@brucemars
  • 10. WYSIWYG Buttons ● Err on the side of keeping simple ● Some buttons very rarely needed: ○ Superscript ○ Subscript ○ Justify text ● Others likely should always be excluded: ○ Underline Photo: https://unsplash.com/@brucemars ● Consider adding: ○ Maximize
  • 11. Staying In Context ● Provide obvious prompts on listing pages to manage the content ○ for editors only ● For simple tasks, keep in context when possible ● For more complex tasks, return when finished ● Add Content By Bundle and Display Link Plus help to add links for editors only Photo: https://unsplash.com/@brucemars
  • 16. Immediate Feedback ● Provide tools to give immediate feedback on any additional work that may be needed ● Accessibility: Editoria11y ● Responsive: Responsive Preview ● SEO: Real-time SEO (yoast_seo) ● Image previews: use a thumbnail image format cropped to the same proportions as when viewed full size Photo: https://unsplash.com/@brucemars
  • 17. Good Form Principles for making your forms intuitive
  • 18. Field Usability ● Clearly mark required fields ● Provide sensible defaults when possible ● Avoid placeholder text ● If more than one “action” button, clearly indicate primary ○ Never a “Clear” or “Reset” button Photo: https://unsplash.com/@brucemars
  • 19. Field Usability Radios, Checkboxes ● Options obvious without clicking ● Select with a single click Photo: https://unsplash.com/@brucemars Select dropdown ● Better if many options (>5) ● Add Select2 or Chosen to provide search
  • 20. Remove Elements That Aren’t Needed ● “Promote to Front” and “Sticky” for content types where these values won’t be used ● Simplify module allows base fields to be hidden from forms ● Use Field Permissions to hide fields only needed by high-level admins Photo: https://unsplash.com/@brucemars
  • 21. Reference Field Usability ● Inline Entity Form to allow creating new, related content ○ Allows custom labels e.g. “Image” or “Contact” Photo: https://unsplash.com/@brucemars
  • 22. Jakob’s Law ● Leverage conventions and mental models editors bring to your site ● Mimic the way similar applications work whenever possible Photo: https://unsplash.com/@brucemars Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
  • 23. Specialized Fields ● Leverage fields meant to replicate common patterns of data entry ○ Address module provides a set of fields for capturing location information ■ Integration for geocoding, mapping ○ Smart Date for app-like date and time entry, including recurring events ■ Integration for calendar displays Photo: https://unsplash.com/@brucemars
  • 24. Organize Your Form ● Sequence forms logically with most important fields first ○ Required fields high up too ● Visually group related fields and labels ○ Field Group module ● Single column is better Photo: https://unsplash.com/@brucemars
  • 25. Consistency ● Try to have edit forms follow the same structure as the entity view ● Try to use the same widgets and naming across different entities and bundles Photo: https://unsplash.com/@brucemars
  • 26. Design for the Typical Use Case ● If an entity has numerous fields to handle edge cases, collapse them into a fieldset or tab ● If various WYSIWYG plugins are needed for edge cases, put them into a separate text format, not default ● Form Mode Control can help using different form configurations based on use case Photo: https://unsplash.com/@brucemars
  • 27. When Things Go Wrong ● Alerts should be descriptive enough to communicate the fix required ● Don’t show errors in a modal or popup that has to be dismissed ● Show errors inline on the form element or at least highlight the field with the error ○ Inline Form Errors module (core) puts error messages next to each element and outputs a summary Photo: https://unsplash.com/@brucemars
  • 28. Demo 2 An optimized Drupal 9 site
  • 29. Dynamic Layouts Giving editors control over the output structure
  • 30. Layout Builder ● Core’s visual, accessible solution for laying out: ○ The default layout of a content type ○ Each node of one or more content types ● Only enable when necessary, possibly only on a single content type Photo: https://unsplash.com/@brucemars
  • 31. Layout Builder ● Can expose a bewildering list of options ○ Layout Builder Restrictions allows for a smaller list ● Possible to make bad decisions ○ Layout Builder Lock can help prevent some ● Use Layout Builder Library to allow editors to choose from predefined layouts Photo: https://unsplash.com/@brucemars
  • 32. Paragraphs ● Less visual, but harder to break ● Possible to nest for complex layouts ● Can also be used for field collections ● Some use paragraphs with Layout Builder ● Paragraphs Edit gives authors a quick way to edit a single component Photo: https://unsplash.com/@brucemars
  • 33. Systems Thinking Thinking about your sites as a set of individual systems
  • 34. Website Systems ● One or more content types, related views, sometimes with specific modules for additional functionality ● Examples: ○ Blog or news ○ Alerts ○ Staff directory ○ Events Calendar Photo: https://unsplash.com/@brucemars
  • 35. Keeping Context ● Allow management within a system ● Provide obvious prompts for managing ○ for editors only ● For simple tasks, stay in context when possible ● For more complex tasks, return when finished ● Add Content By Bundle and Display Link Plus help to add links for editors only Photo: https://unsplash.com/@brucemars
  • 37. Clone and Edit ● For complex content types, sometimes easier to clone and edit than build from scratch ○ Entity Clone module provides an operation for this Photo: https://unsplash.com/@brucemars
  • 38. Managing Dates ● Where the “date” of content is important (e.g. news) make an explicit and obvious field ○ “Created date” is hidden and often isn’t what should be shown ● Publication Date module will automatically show the date content is actually published, but also allows a manual value Photo: https://unsplash.com/@brucemars
  • 40. Content View As A Dashboard ● Customize the filters ● Consider making the moderated content view an attachment or block ● Content Planner module provides analytics and calendar views Photo: https://unsplash.com/@brucemars
  • 41. Documentation ● Make scannable, with steps clearly indicated ● Include screen captures ● Provide in a user-friendly format ○ Not everyone can use Google Docs ● Videos can also help show a process e.g. Loom screen recorder ● Try using Tour or Help Topics for embedded help Photo: https://unsplash.com/@brucemars
  • 42. Incremental Improvements ● Test as much as possible ● Eat your own dog food ● Get feedback and iterate Photo: https://unsplash.com/@brucemars
  • 43. Modules to Help ● Responsive Preview ● Editoria11y ● Field Group ● Form Tips? ● Smart Date ● Add Content By Bundle ● Inline Entity Form ● Inline Errors ● Entity Browser or Media Library Photo: https://unsplash.com/@brucemars ● Tour ● Help Topics (beta)
  • 44. Resources ● Laws of UX ● Form Design Best Practices ● Content Creation by Average People ● Website Forms Usability: Top 10 Recommendations ● UX Considerations for Building an Amazing CMS | UX Booth ● How to set up a CMS that will make non-technical users happy ● User Experience: The Single Most Important Element of a Web CMS Photo: https://unsplash.com/@brucemars