Firm up that Backend – Easy Exercises for a Usable Admin Interface – Warm ups

View Github Repository Open presentation in a new window

labbydev

See all presentation from labbydev

Firm up that Backend – Easy Exercises for a Usable Admin Interface – Warm ups

0 0

firm-up-backend

Some easy ways to help you improve the admin experience on D7 websites.

On Github labbydev / firm-up-backend

Firm up that Backend

Easy Exercises for a Usable Admin Interface

Lauren Byrwa | @labbydev

Senior Front End Developer @Palantir.net

Who are you? why are you talking? Why should people care?

What do you do with Drupal?

  • Front-end?
  • Site Building?
  • Module Development?
  • Content Administrators?
  • Have you ever entered content into Drupal?

Why does it matter?

  • Developers don't know what it's 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.

Warm ups

  • Use the Administration Menu (instead of the default Toolbar).
  • Add help text
  • Does your structure and naming make sense to people who don't know Drupal?
The best way to get started with anything is a good warm up. These are the things that I do on almost all of my projects.

Dropdowns allow users to easily and quickly get through the system

It can take about 4-5 clicks/page loads just to add content. You can easily get around with a dropdown. You can integrate with permissions, so that clients can't get to pages they don't need to use.

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

Company Workflow

  • Intake with the client to discuss their internal needs
  • Create a custom workflow for those clients needs
  • Determine number and needs of roles
  • Craft permissions based on client needs and custom workflow
I have to talk to the client and figure out how they work. Custom workflow and options on CFA

Permissions

  • Content administrators can focus on only the tasks that they need to complete.
  • Prevent content maintainers from unintentionally breaking the website.
  • Prevent unauthorized users from seeing parts of the site that they shouldn't.
Make the system less breakable and help them focus on what they need to get done.

Permissions by Role

Tools to work out your permissions

An easy exercise for role testing is to use Masquarade.

Menu admin per admin - you may only want to let them edit certain parts of the menu or not edit the menu at all. Content access - set general rules for all the different content types, and you can override for particular nodes. Masquarade - allows to test permissions, but disable on live websites. FTC testing - Masquerade.

Permissions Before

Too many options to distract Content administrators

Permissions After

Content administrators can focus on their tasks

Admin Views with VBO

Administration Views

  • 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
Replace default pages with custom views. Easily manipulate the options to the client needs.

Node/Entity Ordering

Nodequeue

Adds easy drag-and-drop interface

Weight

  • Relatively lightweight module
  • Works like the weights already built into menu items
more information on node ordering Clients want custom ordering. Editing the post date can be hard and counter intuitive

Nodequeue

  • Supports translated nodes
  • Allows seperate permissions for editing and ordering
Lists all the content. Drag and drop interface. Add content to the queue through the node page, or through the auto fill input here

Weight

  • lightweight (only two additional database tables)
  • Uses core node edit page
works the same as weight on other fields, like menus and taxonomies

Content Interface

Exercise 1: Organize the Edit Page

Display Suite + Field Group

  • Clean up the node edit page
  • Divid fields into manageable chunks
default content interface is rather unwieldy

Default node edit page

default content interface is rather unwieldy

Node edit page after being field grouped

tabs make it easy to think about
Conditional Fields

Show and hides fields based on the values of other fields

  • Keeps edit page from becoming cumbersome
  • Great if you only need certain content in some instances
  • Helps keep the whole website unbreakable

When content isn't featured, no "Featured Image" upload appears

When content is featured, "Featured Image" upload appears

Exercise 2: Taming Images

  • Insert images into the WYSIWYG.
  • Create specific style options
  • Add additional CSS styles if required
  • Use alt and title text to encourage administrators to keep their content accessible.
Manual Crop
  • Administrators can crop images in the Drupal after uploading
  • Maintains aspect ratio
  • Links into image styles
Images scale correctly. Constrain the proportions to match the images style

Manual crop

Exercise 3: Trim down the options

Override Node Options

Hides default options like "Promote to front page"

Exercise 4: User friendly select lists

Chosen
  • Turn select lists into auto complete tagging fields
  • Particularly useful on selects with over LOTS of options
uses chosen.js plugin

Chosen

Exercise 5: Character Counts

Maxlength
  • Limits the ability to be too wordy
  • Avoids text breaking the design
  • Helpful countdown for administrative users
highlights in yellow or red, and shows when you start going over works in javascript, and hooks into field API

Maxlength

Exercise 6: Updating and Reverting Content

Workbench Moderation

Helps clients revert content to former versions

Workbench Moderation

Diff

Illustrates what changes were made to the content.

Diff

Configuring the WYSIWYG

  • Get rid of unused buttons
  • Use the CKEditor module
You HAVE to limit the options of the WYISWYG in order to make it easier for the client. Not to mention that it becomes much less cumbersome and intimidating.

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

Linkit

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

Pushing it to the next level

Custom Dashboard

Login Destination

Redirects users on login

Workbench

The Workbench suite is modular, allowing site builders to build the workflow that best suits the content administrators on their site.

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

Cool Down

Admin Themes

Shiny

Shiny is very consistent with Seven, but with a larger font and more polished look and feel.

Adminimal

Adminimal uses flat UI, color coding, and responsive breakpoints. But, fieldsets are not the best.

Ember

Adminimal uses flat UI, navbar, and responsive breakpoints.

Conclusion

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

Questions?

Lauren Byrwa | @labbydev
Firm up that Backend Easy Exercises for a Usable Admin Interface Lauren Byrwa | @labbydev Senior Front End Developer @Palantir.net Who are you? why are you talking? Why should people care?