Building a functional, beautiful site for end users is what most Drupal development efforts focus on -- but some of the most important and often neglected users of the new site are the content creators and editors who will have to maintain it. Planning for the admin experience these users will have can mean the difference between unsatisfied, frustrated content maintainers and maintainers who are happy with their new site. For content maintainers, an uncustomized Drupal admin interface can be complicated, overwhelming, and downright scary. By making the system easier to use and more difficult to break, developers and site-builders can create better relationships with their content maintainers and ultimately their clients. There are a number of steps they can take to do this, ranging from installing and configuring modules that improve the interface, to customizing the permissions system to restrict access to areas of the site that can be unnecessarily confusing, to setting up more intuitive dashboards. Careful thought about what content maintainers need to do, and planning to help them to do it, helps them focus on their content and empowers them to take control of managing and maintaining their website with less developer assistance. In this presentation, we will cover some of the steps we take to streamline our websites for our clients. You’ll learn about: Helpful modules to improve content authoring Crafting roles and permissions for a streamlined admin experience Configuring the WYSIWYG Organizing content interfaces for ease of use Creating an intuitive administrative dashboard The importance of simple and concise training documentation

1. FIRM UP THAT BACKEND
Easy Exercises for a Usable Admin Interface
Lauren Byrwa - @labyrwa
Jason Wasser - @JasonWasser

2. WHAT DO YOU DO WITH DRUPAL?
• Font-end?
• Site Building?
• Module Development?
• Content Administrators?
• Have you ever entered content into Drupal?

3. WHY DOES IT MATTER?
• Developers don’t know what its like to not be
developers.
• Content administrators don’t always know Drupal.
• The backend gets left behind.
• Content administrators don’t have the confidence to
do their job without assistance.

4. WARM UPS
• Use the Admininstration Menu (instead of the default
Toolbar)
• Add help text
• Does your structure makes sense to people who don’t
know Drupal?

5. Adding help text on fields, and descriptions on content
types, taxonomies and contexts

6. Dropdowns allow users to easily and quickly get through the system

7. COMPANY WORKFLOW
• Intake with the client to discuss their internal needs
• Create a custom workflow for those client needs
• Determine number and needs of roles
• Craft permissions based on client needs and custom
workflow

8. PERMISSIONS
• Easier for content administrators
• Focus on what is important
• Prevents breaking the site
• Prevents content administrators from breaking the
site unintentionally
• Privacy concerns
• Prevents unauthorized users from seeing parts of
the site they shouldn’t

9. PERMISSIONS BY ROLE
Tools to work out your permissions
• Taxonomies - Vocabulary Permissions per Role
• Menus - Menu Admin per Admin
• Fields - Field Permissions
• Content Types - Content Access
!
Easy Exercise for Role Testing
• Masquerade

10. Too many options to distract Content administrators
PERMISSIONS BEFORE

11. Content administrators can focus on their tasks
PERMISSIONS AFTER

12. ADMIN VIEWS WITH VBO
• Administration Views module
• Customizable view
• Overrides the content, user, and taxonomy system
pages
• Views bulk operations (VBO)
• Adds functionality to these views
• Is useful when dealing with a lot of content

13. It is also easy to create your own custom views to be more tailored to the
clients needs.

14. NODE/ENTITY ORDERING
• Nodequeue
• Adds an easy drag and drop interface
• Weight
• Relatively lightweight module
• Works like the weights already built into menu items
!
!
!
!
!
!
!
for more information on node ordering - https://www.drupal.org/node/398508

15. NODEQUEUE
• Supports
translated Nodes
• Allows separate
permissions for
editing or
ordering

16. WEIGHT
• lightweight (only
two additional
database tables)
• Uses core node
edit page

17. Display Suite Forms + Field Group
• Clean up the node edit page
• Divide fields into manageable chunks
CONTENT INTERFACE
EXERCISE 1: ORGANIZE THE EDIT PAGE

18. Before

19. After

20. CONTENT INTERFACE
EXERCISE 2: TAME IMAGES
Manual Crop
• Users can crop on the site after uploading
• Maintains aspect ratios
• Ties into image styles

21. Manual Crop

22. • Insert images into the WYSIWYG
• Create specific style options
• Integrate with Image Styles or Manual Crop
• Add additional CSS styles if required
• Alt and Title text fields
• Encourage content administrators to keep their
website accessible
CONTENT INTERFACE
EXERCISE 2: TAME IMAGES

23. CONTENT INTERFACE
EXERCISE 2: TAME IMAGES

24. CONTENT INTERFACE
EXERCISE 3: REMOVE OPTIONS
• Field Permissions
• Hides fields not being used by the
client (such as fields used during
migration)
• Override Node Options
• Hides default options like “Promote to
front page”

25. CONTENT INTERFACE
EXERCISE 4: USER FRIENDLY SELECT LISTS
Chosen
• Turn select lists into autocomplete
tagging fields
• Particularly useful on select lists with
many options

26. Chosen

27. CONTENT INTERFACE
EXERCISE 5: SETTING REASONABLE LIMITS
Max Length
• Limits the ability to be too wordy
• Avoids text breaking the design

28. Max Length

29. CONTENT INTERFACE
EXERCISE 6: UPDATING AND REVERTING CONTENT
• Revisions
• Helps clients revert content to
former versions
• Diff
• illustrates what changes were
made to the content

30. CONTENT INTERFACE
EXERCISE 6: UPDATING AND REVERTING CONTENT

31. CONTENT INTERFACE
EXERCISE 7: FIELD DEPENDENCIES
• Conditional Fields
• Show and hides fields based on the
values of other fields
• Great if you only need content in some
instances
• Helps keep the website unbreakable
• Can be problematic if a dependent is
required

32. When content isn’t featured, no “Featured Image” upload appears.

33. When content is featured, “Featured Image” upload appears.

34. CONFIGURING THE WYISWYG
• Get rid of unused buttons
• Use the CKEditor module (because it is going into
Drupal 8 core)

35. The only options left here are bold, italicize, format, lists, links and
images

36. LINKIT
• Helps content
editors link to
internal content
• Allows users to
easily search for
content on the
system or link to a
URL

37. • Login Destination
• Redirects users on login
• Use Admin Views and VBO to make website content a
custom dashboard
• Total Control Admin Dashboard
• Creates a usable dashboard
• Gives content administrators once place to see
content, and edit menus and taxonomies
PUSHING IT TO THE NEXT LEVEL
CUSTOM DASHBOARD

38. Total Control Admin Dashboard

39. • Admin Themes add a final polish to the admin
backend
• Shiny
• Rubik Theme
• Adminimal (with Adminimal Admin Menu)
• Ember
COOL DOWN
ADMIN THEMES

40. SHINY
• Consistent with
Seven
• Larger font
• More refined

41. RUBIK THEME
• Help text
becomes a tooltip
• Handy icons
• Requires Tao Base
Theme

42. ADMINIMAL
• Flat UI
• Responsive
• Color-coded
buttons
• Collapsed
fieldsets are a
blue line

43. EMBER
• Flat UI
• Responsive
• Navbar module
• Meant to be used
with Spark
distribution

44. CONCLUSION
• There are a lot of easy to add modules on drupal.org
that can help content administrators streamline their
workflow.
• Consult a developer for recommendations about what
is the best fit for your website and workflow.

45. QUESTIONS?
Lauren Byrwa - @labyrwa
Jason Wasser - @JasonWasser