Upload
five-mile
View
1.289
Download
1
Embed Size (px)
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.
Citation preview
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
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
How����������� ������������������ many����������� ������������������ of����������� ������������������ us����������� ������������������ have����������� ������������������
inherited����������� ������������������ projects����������� ������������������ with����������� ������������������ an����������� ������������������
interface����������� ������������������ like����������� ������������������ this?
Firstly,����������� ������������������ do����������� ������������������ we����������� ������������������ agree����������� ������������������ there����������� ������������������ is����������� ������������������ a����������� ������������������ problem?
Monday, 25 November 13
Welcome!
Do����������� ������������������ we����������� ������������������ take����������� ������������������ care����������� ������������������ of����������� ������������������ Drupal����������� ������������������ UI����������� ������������������ shortfalls?
Monday, 25 November 13
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
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
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
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
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
Does����������� ������������������ the����������� ������������������ interface����������� ������������������ follow����������� ������������������ typical����������� ������������������ patterns����������� ������������������ or����������� ������������������ terminology?
Improving����������� ������������������ Drupal����������� ������������������ 7����������� ������������������ UX
Simplify����������� ������������������ account����������� ������������������ management
? Better
Monday, 25 November 13
Improving����������� ������������������ Drupal����������� ������������������ 7����������� ������������������ UX
Before After
Simplify����������� ������������������ account����������� ������������������ managementImprove����������� ������������������ account����������� ������������������ editing
Monday, 25 November 13
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
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
Improving����������� ������������������ Drupal����������� ������������������ 7����������� ������������������ UX
About����������� ������������������ that����������� ������������������ menu...����������� ������������������
We����������� ������������������ really����������� ������������������ like����������� ������������������ the����������� ������������������ admin����������� ������������������ menu����������� ������������������ module����������� ������������������ -����������� ������������������ our����������� ������������������ clients����������� ������������������ do����������� ������������������ too
Monday, 25 November 13
Improving����������� ������������������ Drupal����������� ������������������ 7����������� ������������������ UX
Improve����������� ������������������ the����������� ������������������ content����������� ������������������ management
Core����������� ������������������ content����������� ������������������ listing
admin_views����������� ������������������ content����������� ������������������ listing
Monday, 25 November 13
Improving����������� ������������������ Content����������� ������������������ Creation
Publishing����������� ������������������ and����������� ������������������ editing����������� ������������������ content
/node/*/edit
Monday, 25 November 13
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
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
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
Easy����������� ������������������ to����������� ������������������ style����������� ������������������ bullets����������� ������������������ to����������� ������������������
brand����������� ������������������ requirements.
Improving����������� ������������������ Drupal����������� ������������������ 7����������� ������������������ UX
Fix����������� ������������������ this����������� ������������������ experience����������� ������������������ Let’s����������� ������������������ grab����������� ������������������ a����������� ������������������ WYSIWYG...
Monday, 25 November 13
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
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
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
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
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
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
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
Not����������� ������������������ just����������� ������������������ the����������� ������������������ Drupal����������� ������������������ interface
Improving����������� ������������������ UX����������� ������������������ in����������� ������������������ the����������� ������������������ way����������� ������������������ you����������� ������������������
build����������� ������������������ sites
Monday, 25 November 13
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
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
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
Rules����������� ������������������ components����������� ������������������ are����������� ������������������ a����������� ������������������
great����������� ������������������ way����������� ������������������ to����������� ������������������ automate����������� ������������������
tasks.
Improving����������� ������������������ Drupal����������� ������������������ 7����������� ������������������ UX
Making����������� ������������������ tasks����������� ������������������ automated����������� ������������������ Behind����������� ������������������ the����������� ������������������ scenes
Monday, 25 November 13
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