creating a client friendly user experience in drupal 7

33
Client Friendly User Experience in Drupal 7 Presenters Keith Jay Founder of Five Mile, Designer, Drupal Themer (pub chat: Volkswagen Camper) Gareth Goodwin: Lead Drupal Developer (pub chat: Bass guitars) Monday, 25 November 13

Upload: five-mile

Post on 05-Dec-2014

1.289 views

Category:

Technology


1 download

DESCRIPTION

Slides from the Five Mile Media presentation at the Drupal Show & Tell event held in London on 21 November 2013. Five Mile covered how you can improve the user interface in Drupal 7 to offer your clients a better user experience. Slides include topics such as: providing client dashboards, simplifying toolbar and menus, improving content management, better use of the WYSIWYG, utilising preview.

TRANSCRIPT

Page 1: Creating a client friendly user experience in Drupal 7

Client����������� ������������������  Friendly����������� ������������������  User����������� ������������������  Experiencein����������� ������������������  Drupal����������� ������������������  7

Presenters Keith����������� ������������������  JayFounder����������� ������������������  of����������� ������������������  Five����������� ������������������  Mile,����������� ������������������  Designer,����������� ������������������  Drupal����������� ������������������  Themer����������� ������������������  (pub����������� ������������������  chat:����������� ������������������  Volkswagen����������� ������������������  Camper)

Gareth����������� ������������������  Goodwin:Lead����������� ������������������  Drupal����������� ������������������  Developer����������� ������������������  (pub����������� ������������������  chat:����������� ������������������  Bass����������� ������������������  guitars)

Monday, 25 November 13

Page 2: Creating a client friendly user experience in Drupal 7

Introduction����������� ������������������  ����������� ������������������  What����������� ������������������  we����������� ������������������  want����������� ������������������  to����������� ������������������  cover

drupal.org����������� ������������������  says:

Drupal����������� ������������������  'allows����������� ������������������  you����������� ������������������  to����������� ������������������  easily����������� ������������������  organize,����������� ������������������  manage����������� ������������������  and����������� ������������������  publish����������� ������������������  your����������� ������������������  content'.����������� ������������������  

Experience����������� ������������������  has����������� ������������������  taught����������� ������������������  us:

Unfortunately,����������� ������������������  this����������� ������������������  statement����������� ������������������  can����������� ������������������  be����������� ������������������  far����������� ������������������  from����������� ������������������  true����������� ������������������  when����������� ������������������  the����������� ������������������  client����������� ������������������  user����������� ������������������  

experience����������� ������������������  is����������� ������������������  neglected.

We����������� ������������������  will����������� ������������������  cover����������� ������������������  some����������� ������������������  of����������� ������������������  things����������� ������������������  we����������� ������������������  are����������� ������������������  doing����������� ������������������  in����������� ������������������  the����������� ������������������  Drupal����������� ������������������  7����������� ������������������  interface.

Please����������� ������������������  do����������� ������������������  chip����������� ������������������  in����������� ������������������  with����������� ������������������  your����������� ������������������  own����������� ������������������  thoughts����������� ������������������  and����������� ������������������  ideas...

Monday, 25 November 13

Page 3: Creating a client friendly user experience in Drupal 7

How����������� ������������������  many����������� ������������������  of����������� ������������������  us����������� ������������������  have����������� ������������������  

inherited����������� ������������������  projects����������� ������������������  with����������� ������������������  an����������� ������������������  

interface����������� ������������������  like����������� ������������������  this?

Firstly,����������� ������������������  do����������� ������������������  we����������� ������������������  agree����������� ������������������  there����������� ������������������  is����������� ������������������  a����������� ������������������  problem?

Monday, 25 November 13

Page 4: Creating a client friendly user experience in Drupal 7

Welcome!

Do����������� ������������������  we����������� ������������������  take����������� ������������������  care����������� ������������������  of����������� ������������������  Drupal����������� ������������������  UI����������� ������������������  shortfalls?

Monday, 25 November 13

Page 5: Creating a client friendly user experience in Drupal 7

Because����������� ������������������  we����������� ������������������  work����������� ������������������  with����������� ������������������  nodes,����������� ������������������  we����������� ������������������  

are����������� ������������������  driven����������� ������������������  by����������� ������������������  the����������� ������������������  node����������� ������������������  edit����������� ������������������  process.

Nodes����������� ������������������  lead����������� ������������������  to����������� ������������������  a����������� ������������������  typical����������� ������������������  workflow

The����������� ������������������  challenge����������� ������������������  to����������� ������������������  

us����������� ������������������  all����������� ������������������  is����������� ������������������  to����������� ������������������  ensure����������� ������������������  

that����������� ������������������  good����������� ������������������  client����������� ������������������  

UX����������� ������������������  is����������� ������������������  built����������� ������������������  into����������� ������������������  

our����������� ������������������  proposals.

Monday, 25 November 13

Page 6: Creating a client friendly user experience in Drupal 7

Reduce����������� ������������������  support����������� ������������������  

Happier����������� ������������������  clients

Less����������� ������������������  errors Easier����������� ������������������  training

Better����������� ������������������  interface����������� ������������������  design Influences����������� ������������������  future����������� ������������������  Drupal

Better����������� ������������������  performance

Improve����������� ������������������  opinion

There����������� ������������������  are����������� ������������������  real����������� ������������������  benefits����������� ������������������  in����������� ������������������  delivering����������� ������������������  a����������� ������������������  great����������� ������������������  user����������� ������������������  experience����������� ������������������  for����������� ������������������  those����������� ������������������  using����������� ������������������  Drupal

Monday, 25 November 13

Page 7: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Think����������� ������������������  about����������� ������������������  your����������� ������������������  client’s����������� ������������������  journey,����������� ������������������  especially����������� ������������������  

for����������� ������������������  their����������� ������������������  first����������� ������������������  visit.

Here����������� ������������������  are����������� ������������������  some����������� ������������������  of����������� ������������������  the����������� ������������������  more����������� ������������������  general����������� ������������������  

customisations����������� ������������������  we����������� ������������������  like����������� ������������������  to����������� ������������������  make.

Monday, 25 November 13

Page 8: Creating a client friendly user experience in Drupal 7

Have����������� ������������������  a����������� ������������������  friendly����������� ������������������  greeting����������� ������������������  

designed����������� ������������������  to����������� ������������������  calm����������� ������������������  any����������� ������������������  

newbie����������� ������������������  nerves!

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Your����������� ������������������  client����������� ������������������  Will����������� ������������������  likely����������� ������������������  make����������� ������������������  a����������� ������������������  nervous����������� ������������������  start

Monday, 25 November 13

Page 9: Creating a client friendly user experience in Drupal 7

So����������� ������������������  provide����������� ������������������  the����������� ������������������  right����������� ������������������  sort����������� ������������������  

of����������� ������������������  greeting����������� ������������������  -����������� ������������������  a����������� ������������������  helpful����������� ������������������  

dashboard����������� ������������������  on����������� ������������������  login.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Your����������� ������������������  client����������� ������������������  A����������� ������������������  better����������� ������������������  start

We����������� ������������������  are����������� ������������������  starting����������� ������������������  to����������� ������������������  use����������� ������������������  

contextual����������� ������������������  video����������� ������������������  snippets����������� ������������������  

through����������� ������������������  our����������� ������������������  sites.����������� ������������������  

Especially����������� ������������������  for����������� ������������������  tricky����������� ������������������  bits.

Monday, 25 November 13

Page 10: Creating a client friendly user experience in Drupal 7

Does����������� ������������������  the����������� ������������������  interface����������� ������������������  follow����������� ������������������  typical����������� ������������������  patterns����������� ������������������  or����������� ������������������  terminology?

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Simplify����������� ������������������  account����������� ������������������  management

? Better

Monday, 25 November 13

Page 11: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Before After

Simplify����������� ������������������  account����������� ������������������  managementImprove����������� ������������������  account����������� ������������������  editing

Monday, 25 November 13

Page 12: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Remove����������� ������������������  redundant����������� ������������������  features����������� ������������������  We����������� ������������������  really����������� ������������������  believe����������� ������������������  in����������� ������������������  less

Tame����������� ������������������  those����������� ������������������  permissions

Start����������� ������������������  with����������� ������������������  a����������� ������������������  simple����������� ������������������  core����������� ������������������  set����������� ������������������  of����������� ������������������  permissions

Add����������� ������������������  as����������� ������������������  required

Monday, 25 November 13

Page 13: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

De-clutter����������� ������������������  the����������� ������������������  admin����������� ������������������  toolbar

Potential����������� ������������������  for����������� ������������������  being����������� ������������������  overwhelmed:

With����������� ������������������  permissions����������� ������������������  reduced,����������� ������������������  less����������� ������������������  chance����������� ������������������  of����������� ������������������  being����������� ������������������  overwhelmed:

Monday, 25 November 13

Page 14: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

About����������� ������������������  that����������� ������������������  menu...����������� ������������������  

We����������� ������������������  really����������� ������������������  like����������� ������������������  the����������� ������������������  admin����������� ������������������  menu����������� ������������������  module����������� ������������������  -����������� ������������������  our����������� ������������������  clients����������� ������������������  do����������� ������������������  too

Monday, 25 November 13

Page 15: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Improve����������� ������������������  the����������� ������������������  content����������� ������������������  management

Core����������� ������������������  content����������� ������������������  listing

admin_views����������� ������������������  content����������� ������������������  listing

Monday, 25 November 13

Page 16: Creating a client friendly user experience in Drupal 7

Improving����������� ������������������  Content����������� ������������������  Creation

Publishing����������� ������������������  and����������� ������������������  editing����������� ������������������  content

/node/*/edit

Monday, 25 November 13

Page 17: Creating a client friendly user experience in Drupal 7

Just����������� ������������������  enter����������� ������������������  the����������� ������������������  title,����������� ������������������  and����������� ������������������  the����������� ������������������  page����������� ������������������  

content����������� ������������������  into����������� ������������������  the����������� ������������������  body����������� ������������������  area...

...and����������� ������������������  choose����������� ������������������  a����������� ������������������  text����������� ������������������  format?

What����������� ������������������  is����������� ������������������  that?

How����������� ������������������  do����������� ������������������  I����������� ������������������  add����������� ������������������  bullet����������� ������������������  points?

Bold����������� ������������������  text?

Links?

...and����������� ������������������  what����������� ������������������  are����������� ������������������  all����������� ������������������  these����������� ������������������  options����������� ������������������  at����������� ������������������  

the����������� ������������������  bottom?

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Now,����������� ������������������  let’s����������� ������������������  create����������� ������������������  a����������� ������������������  page����������� ������������������  Simple,����������� ������������������  right?

Monday, 25 November 13

Page 18: Creating a client friendly user experience in Drupal 7

Simple����������� ������������������  functionality����������� ������������������  descriptions����������� ������������������  can����������� ������������������  transform����������� ������������������  

user����������� ������������������  experience.����������� ������������������  It’s����������� ������������������  tedious,����������� ������������������  it’s����������� ������������������  tricky����������� ������������������  to����������� ������������������  get����������� ������������������  

right����������� ������������������  sometimes����������� ������������������  but����������� ������������������  we����������� ������������������  believe����������� ������������������  it’s����������� ������������������  vital.

Descriptions����������� ������������������  apply����������� ������������������  to:

Fields

Content����������� ������������������  types

Menus

Vocabularies

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Fix����������� ������������������  this����������� ������������������  experience����������� ������������������  Describe����������� ������������������  all����������� ������������������  things!

Monday, 25 November 13

Page 19: Creating a client friendly user experience in Drupal 7

We����������� ������������������  use����������� ������������������  CKEditor,����������� ������������������  

customised����������� ������������������  to����������� ������������������  allow����������� ������������������  

clients����������� ������������������  to����������� ������������������  publish����������� ������������������  content����������� ������������������  

in����������� ������������������  as����������� ������������������  controlled����������� ������������������  way����������� ������������������  as����������� ������������������  

reasonable.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Fix����������� ������������������  this����������� ������������������  experience����������� ������������������  Let’s����������� ������������������  grab����������� ������������������  a����������� ������������������  WYSIWYG...

Monday, 25 November 13

Page 20: Creating a client friendly user experience in Drupal 7

Easy����������� ������������������  to����������� ������������������  style����������� ������������������  bullets����������� ������������������  to����������� ������������������  

brand����������� ������������������  requirements.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Fix����������� ������������������  this����������� ������������������  experience����������� ������������������  Let’s����������� ������������������  grab����������� ������������������  a����������� ������������������  WYSIWYG...

Monday, 25 November 13

Page 21: Creating a client friendly user experience in Drupal 7

Calls����������� ������������������  to����������� ������������������  action����������� ������������������  are����������� ������������������  really����������� ������������������  

important.����������� ������������������  On����������� ������������������  brand����������� ������������������  link-

based����������� ������������������  calls����������� ������������������  to����������� ������������������  action����������� ������������������  are����������� ������������������  

inserted����������� ������������������  with����������� ������������������  ease.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Fix����������� ������������������  this����������� ������������������  experience����������� ������������������  Let’s����������� ������������������  grab����������� ������������������  a����������� ������������������  WYSIWYG...

Monday, 25 November 13

Page 22: Creating a client friendly user experience in Drupal 7

Relatively����������� ������������������  simple����������� ������������������  to����������� ������������������  do����������� ������������������  

with����������� ������������������  a����������� ������������������  custom����������� ������������������  module,����������� ������������������  

customised����������� ������������������  JavaScript����������� ������������������  

configuration����������� ������������������  and����������� ������������������  

importantly����������� ������������������  CKEditor����������� ������������������  

specific����������� ������������������  styles.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Fix����������� ������������������  this����������� ������������������  experience����������� ������������������  Let’s����������� ������������������  grab����������� ������������������  a����������� ������������������  WYSIWYG...

Monday, 25 November 13

Page 23: Creating a client friendly user experience in Drupal 7

The����������� ������������������  linkit����������� ������������������  module����������� ������������������  makes����������� ������������������  it����������� ������������������  

easy����������� ������������������  for����������� ������������������  users����������� ������������������  to����������� ������������������  link����������� ������������������  to����������� ������������������  

other����������� ������������������  content����������� ������������������  within����������� ������������������  the����������� ������������������  

website,����������� ������������������  without����������� ������������������  needing����������� ������������������  

to����������� ������������������  worry����������� ������������������  about����������� ������������������  node/id����������� ������������������  

links����������� ������������������  or����������� ������������������  adding����������� ������������������  in����������� ������������������  the����������� ������������������  full����������� ������������������  

path.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Ease����������� ������������������  page����������� ������������������  linking����������� ������������������  Without����������� ������������������  needing����������� ������������������  to����������� ������������������  note����������� ������������������  node����������� ������������������  ID’s

Use linkit with pathologic to convert node/id links into the path alias when displayed.

Monday, 25 November 13

Page 24: Creating a client friendly user experience in Drupal 7

In����������� ������������������  our����������� ������������������  experience,����������� ������������������  clients����������� ������������������  

have����������� ������������������  only����������� ������������������  ever����������� ������������������  needed����������� ������������������  one����������� ������������������  

input����������� ������������������  format.

Two����������� ������������������  solutions:

Remove����������� ������������������  completely(hook_form_alter����������� ������������������  or����������� ������������������  simplify����������� ������������������  module)

Collapse����������� ������������������  into����������� ������������������  an����������� ������������������  

expandable����������� ������������������  fieldset����������� ������������������  and����������� ������������������  

sensible����������� ������������������  defaults(hide_formats����������� ������������������  module)

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Hide����������� ������������������  those����������� ������������������  confusing����������� ������������������  input����������� ������������������  formats

Monday, 25 November 13

Page 25: Creating a client friendly user experience in Drupal 7

The����������� ������������������  default����������� ������������������  multi-select����������� ������������������  is����������� ������������������  

hard����������� ������������������  to����������� ������������������  use:

Users����������� ������������������  need����������� ������������������  to����������� ������������������  know����������� ������������������  to����������� ������������������  

ctrl����������� ������������������  +����������� ������������������  click����������� ������������������  

or����������� ������������������  shift����������� ������������������  +����������� ������������������  click����������� ������������������  

to����������� ������������������  select����������� ������������������  multiple����������� ������������������  options.

You����������� ������������������  then����������� ������������������  can’t����������� ������������������  easily����������� ������������������  see����������� ������������������  

what����������� ������������������  has����������� ������������������  already����������� ������������������  been����������� ������������������  

selected.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Improve����������� ������������������  multi-select����������� ������������������  lists

Core����������� ������������������  select����������� ������������������  lists

Multi-select����������� ������������������  select����������� ������������������  lists

Monday, 25 November 13

Page 26: Creating a client friendly user experience in Drupal 7

Preview����������� ������������������  is����������� ������������������  a����������� ������������������  real����������� ������������������  issue.

Clients����������� ������������������  really����������� ������������������  like����������� ������������������  to����������� ������������������  see����������� ������������������  how����������� ������������������  it����������� ������������������  is����������� ������������������  going����������� ������������������  

to����������� ������������������  look����������� ������������������  for����������� ������������������  real.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Preview����������� ������������������  Tricky

Monday, 25 November 13

Page 27: Creating a client friendly user experience in Drupal 7

Drupal����������� ������������������  has����������� ������������������  a����������� ������������������  simple����������� ������������������  fix!

Set����������� ������������������  your����������� ������������������  content����������� ������������������  to����������� ������������������  be����������� ������������������  

unpublished����������� ������������������  by����������� ������������������  default...

...then����������� ������������������  theme����������� ������������������  all����������� ������������������  the����������� ������������������  places����������� ������������������  

where����������� ������������������  your����������� ������������������  content����������� ������������������  is����������� ������������������  

exposed����������� ������������������  so����������� ������������������  that����������� ������������������  genuine����������� ������������������  

preview����������� ������������������  is����������� ������������������  available����������� ������������������  coupled����������� ������������������  

with����������� ������������������  clear����������� ������������������  visual����������� ������������������  prompts����������� ������������������  on����������� ������������������  

the����������� ������������������  content����������� ������������������  status.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Preview����������� ������������������  Tricky,����������� ������������������  some����������� ������������������  options

Monday, 25 November 13

Page 28: Creating a client friendly user experience in Drupal 7

Not����������� ������������������  just����������� ������������������  the����������� ������������������  Drupal����������� ������������������  interface

Improving����������� ������������������  UX����������� ������������������  in����������� ������������������  the����������� ������������������  way����������� ������������������  you����������� ������������������  

build����������� ������������������  sites

Monday, 25 November 13

Page 29: Creating a client friendly user experience in Drupal 7

Instead����������� ������������������  of����������� ������������������  using����������� ������������������  the����������� ������������������  

workflow����������� ������������������  tab,����������� ������������������  or����������� ������������������  editing����������� ������������������  

the����������� ������������������  node����������� ������������������  &����������� ������������������  scrolling����������� ������������������  down����������� ������������������  

to����������� ������������������  workflow����������� ������������������  settings,����������� ������������������  we����������� ������������������  

added����������� ������������������  two����������� ������������������  lines����������� ������������������  of����������� ������������������  code����������� ������������������  to����������� ������������������  

make����������� ������������������  the����������� ������������������  users����������� ������������������  task����������� ������������������  easier.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Making����������� ������������������  tasks����������� ������������������  easier����������� ������������������  Content����������� ������������������  workflow

Monday, 25 November 13

Page 30: Creating a client friendly user experience in Drupal 7

When����������� ������������������  a����������� ������������������  new����������� ������������������  piece����������� ������������������  of����������� ������������������  

content����������� ������������������  is����������� ������������������  created����������� ������������������  &����������� ������������������  

added����������� ������������������  to����������� ������������������  a����������� ������������������  book,����������� ������������������  we����������� ������������������  

automatically����������� ������������������  create����������� ������������������  

placeholder����������� ������������������  nodes����������� ������������������  for����������� ������������������  the����������� ������������������  

rest����������� ������������������  of����������� ������������������  the����������� ������������������  content,����������� ������������������  added����������� ������������������  

to����������� ������������������  the����������� ������������������  right����������� ������������������  book����������� ������������������  in����������� ������������������  the����������� ������������������  

right����������� ������������������  order.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Making����������� ������������������  tasks����������� ������������������  quicker����������� ������������������  Content����������� ������������������  creation

Monday, 25 November 13

Page 31: Creating a client friendly user experience in Drupal 7

Using����������� ������������������  rules����������� ������������������  components,����������� ������������������  

we����������� ������������������  created����������� ������������������  custom����������� ������������������  bulk����������� ������������������  

operations����������� ������������������  to����������� ������������������  speed����������� ������������������  up����������� ������������������  

user����������� ������������������  management����������� ������������������  &����������� ������������������  

reduce����������� ������������������  room����������� ������������������  for����������� ������������������  errors.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Making����������� ������������������  tasks����������� ������������������  automated����������� ������������������  User����������� ������������������  management

Help avoid mistakes by asking for confirmation

Monday, 25 November 13

Page 32: Creating a client friendly user experience in Drupal 7

Rules����������� ������������������  components����������� ������������������  are����������� ������������������  a����������� ������������������  

great����������� ������������������  way����������� ������������������  to����������� ������������������  automate����������� ������������������  

tasks.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Making����������� ������������������  tasks����������� ������������������  automated����������� ������������������  Behind����������� ������������������  the����������� ������������������  scenes

Monday, 25 November 13

Page 33: Creating a client friendly user experience in Drupal 7

Slides����������� ������������������  will����������� ������������������  be����������� ������������������  available����������� ������������������  

online.

Series����������� ������������������  of����������� ������������������  blog����������� ������������������  posts����������� ������������������  to����������� ������������������  

come����������� ������������������  on����������� ������������������  our����������� ������������������  new����������� ������������������  site����������� ������������������  in����������� ������������������  

next����������� ������������������  few����������� ������������������  weeks.

Improving����������� ������������������  Drupal����������� ������������������  7����������� ������������������  UX

Questions?

Monday, 25 November 13