secrets to awesomizing® your editor’s back-end drupal ... · d7ux project goals 1. make the most...

39
Secrets to Awesomizing® Your Editor’s Back-end Drupal Experience Mike Herchel http://herchel.com @mikeherchel drupal.org/user/118428

Upload: others

Post on 18-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Secrets to Awesomizing® Your Editor’s Back-end Drupal Experience

Mike Herchelhttp://[email protected]/user/118428

Page 2: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Drupal's [much deserved] reputation...

Page 3: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

History of Drupal's UX: Drupal 4.7

Page 4: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

...Drupal 5.3

Page 5: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

...Drupal 6.6

Page 6: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Contrib to the rescue!

Admin_Menu Module Admin Module Awesome Admin Themes

Vertical Tabs

Page 7: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

D7UX Project Goals

1. Make the most frequent tasks easy and

less frequent tasks achievable.

2. Design for the 80%

3. Privilege the Content Creator

4. Make the default settings smart

d7ux.org

Page 8: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

D7UX Delivered!

● Admin Toolbar

● Overlay

● Contextual Links

● Shortcuts

● Dashboard

● Much More!

Page 9: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Real usability depends on YOU!

-Ronnie James Dio

Page 10: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Reduce Short Term Memory Load

Page 11: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Use Rules or Login Redirect Modules to send your content editors where they need to be.

● http://drupal.org/project/rules

● http://drupal.org/project/login_redirect

Basics: Redirect Users After Actions

Page 12: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Easy Win: D7's core dashboard

PROTIP: Make a killer dashboard with Views Bulk Operations and Views Exposed Filters

Page 13: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Workbench == Dashboard on steroids● Show Your Edits● Workflow Moderation ● Content Revisioning (including unpublished drafts)● Manage Access via Menu or Taxonomy

Next Step: Workbench

PROTIP: You can also modify Workbench's views with VBO!

Page 14: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Simplify and Reduce

Page 15: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Basics: Reduce Permissions

● Easiest win: reduce permissions!

PROTIP: Reorder your user roles from least permissive to most permission (D7 Only)

Page 16: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Basics: Remove unused WYSIWYG buttons

Easiestier Win: Remove unused WYSIWYG Editor buttons

Page 17: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Simple: Better Formats Module

Better Formats Module● Set default text formats per role ● Set default text formats per field● http://drupal.org/project/better_formats

Page 18: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Simplify: Node Form Settings

Node Form Settings Module● Get rid of unused node

form settings○ Revision Log textarea○ Path○ Publishing Options○ Comments Options○ More!

● http://drupal.org/project/nodeformsettings

Page 19: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Fav Module: Field_Group

Field_Group module○ Collapsible Fieldsets!

○ Vertical Tabs!

○ Horizontal Tabs!

○ Accordions!

○ Multi-Page Forms!

○ Oh, My!

Page 20: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

[Field_Group demo]

PROTIP: You can move the Save button to the last page of your multipage form within the multipage wrapper widget

Page 21: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Useful: Drupal 7 (Core) Shortcut Bar

Drupal 7's core shortcuts rock!● Admin can edit user's shortcuts● Assign a shortcut set to a role using

"Shortcut per Role" module (http://drupal.org/project/shortcutperrole)

Page 22: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Consistent Patterns

Page 23: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Simple: Publish_Button

Publish Button Module● Adds Publish/Unpublish button to node/add● Be sure to set content type's default to 'Not

Published'● http://drupal.org/project/publish_button

Page 24: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Views UI: Edit Basic Settings

Views UI: Edit Basic Settings module

● Allows Content Editors to easily edit the header,footer, and empty textof a view!

● http://drupal.org/project/views_ui_basic

Page 25: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

[Views Edit Basic Settings demo]

Page 26: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Freakin' Awesome: VBO

Views Bulk Operations● Enables Admin to create

administrative blocks that enable... bulk operations!

● Can add to Dashboard● Don't have to use table-

view display in D7

Page 27: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Cool: Contextual Filters on Views Rows

Contextual Filters on Views Rows == Awesomeness!

● Not a module● Enables content editor

to easily edit entities thatare displayed within a view

Page 28: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

[Views contextual filters demo]

Page 29: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Handling Errors and Undos

Page 30: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Easier Errors: Field/ Clientside Validation

● Field Validation - Allows admin to create extremely specific validation rules within Fields (http://drupal.org/project/field_validation)

● Clientside Validation - enables validation without page reload and more (http://drupal.org/project/clientside_validation)

Page 31: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

[Field Validation / Clientside Validation demo]

Page 32: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Easy Win: Enable Revisions on your Content types

Default your content types to create new revisions (not enabled by default)!

PROTIP: You can hide the Revision Log using the Node Form Settings module

Page 33: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Easily See Edits: Diff Module

Diff Module● Easily view changes in content between

revisions

Page 34: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

The Holy Grail...

Page 35: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

What is Spark?

Page 36: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

The Holy (D7) Grail: Spark

Spark Distribution

● Being developed by Acquia● Intended to test authoring

experience improvements in Drupal 7 on real sites with real users and real content.

● Inline editing, true WYSIWYG, responsive layout builder, new admin theme, and more!

Page 37: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

[What you can do with Spark now...]

Page 38: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Modules Covered

● Login Redirect - drupal.org/project/login_redirect

● Rules - drupal.org/project/rules● Core Dashboard module● Workbench suite of modules● Better Formats drupal.

org/project/better_formats● Node Form Settings module - drupal.

org/project/nodeformsettings ● Field_Group drupal.org/project/field_group● Shortcut per Role - drupal.

org/project/shortcutperrole

● Publish Button Module - drupal.org/project/publish_button

● Views UI: Edit Basic Settings - drupal.org/project/views_ui_basic

● Views Bulk Operations - drupal.org/project/views_bulk_operations

● Field Validation - drupal.org/project/field_validation

● Clientside Validation - drupal.org/project/clientside_validation

● Diff Module - drupal.org/project/diff

Page 39: Secrets to Awesomizing® Your Editor’s Back-end Drupal ... · D7UX Project Goals 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80% 3

Questions??

● Questions?

● Thank you!