Firm Up that Backend: Easy Exercises for a Usable Admin Interface

932 views

Published on

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

Published in: Technology
  • Be the first to comment

Firm Up that Backend: Easy Exercises for a Usable Admin Interface

  1. 1. FIRM UP THAT BACKEND Easy Exercises for a Usable Admin Interface Lauren Byrwa - @labyrwa Jason Wasser - @JasonWasser
  2. 2. WHAT DO YOU DO WITH DRUPAL? • Font-end? • Site Building? • Module Development? • Content Administrators? • Have you ever entered content into Drupal?
  3. 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. 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. 5. Adding help text on fields, and descriptions on content types, taxonomies and contexts
  6. 6. Dropdowns allow users to easily and quickly get through the system
  7. 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. 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. 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. 10. Too many options to distract Content administrators PERMISSIONS BEFORE
  11. 11. Content administrators can focus on their tasks PERMISSIONS AFTER
  12. 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. 13. It is also easy to create your own custom views to be more tailored to the clients needs.
  14. 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. 15. NODEQUEUE • Supports translated Nodes • Allows separate permissions for editing or ordering
  16. 16. WEIGHT • lightweight (only two additional database tables) • Uses core node edit page
  17. 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. 18. Before
  19. 19. After
  20. 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. 21. Manual Crop
  22. 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. 23. CONTENT INTERFACE EXERCISE 2: TAME IMAGES
  24. 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. 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. 26. Chosen
  27. 27. CONTENT INTERFACE EXERCISE 5: SETTING REASONABLE LIMITS Max Length • Limits the ability to be too wordy • Avoids text breaking the design
  28. 28. Max Length
  29. 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. 30. CONTENT INTERFACE EXERCISE 6: UPDATING AND REVERTING CONTENT
  31. 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. 32. When content isn’t featured, no “Featured Image” upload appears.
  33. 33. When content is featured, “Featured Image” upload appears.
  34. 34. CONFIGURING THE WYISWYG • Get rid of unused buttons • Use the CKEditor module (because it is going into Drupal 8 core)
  35. 35. The only options left here are bold, italicize, format, lists, links and images
  36. 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. 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. 38. Total Control Admin Dashboard
  39. 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. 40. SHINY • Consistent with Seven • Larger font • More refined
  41. 41. RUBIK THEME • Help text becomes a tooltip • Handy icons • Requires Tao Base Theme
  42. 42. ADMINIMAL • Flat UI • Responsive • Color-coded buttons • Collapsed fieldsets are a blue line
  43. 43. EMBER • Flat UI • Responsive • Navbar module • Meant to be used with Spark distribution
  44. 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. 45. QUESTIONS? Lauren Byrwa - @labyrwa Jason Wasser - @JasonWasser

×