Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
10 UX Changes for Every
Drupal Site
Vicky Teinaki
@vickytnz
Drupal 7 UX needs
tweaking
Some things will get sorted out in D8.
Caveats
10Some big, some small, all Drupal-ed
1. Login/registration
WTF is my username again?
If possible, use email as registration [and login]
“In 2008, Forrester estimated call-center calls to
cost $5.50 per call ...
logintoboggan
think about: email_registration , remember_me
2. Form validation
What did I do wrong?
“Our participants [in a test of 22 average users
on six variations of a typical web registration
form] were faster, more s...
(Entity form/Webform)
ife, clientside_validation, email, date etc
Consider: tipsy, stringoverrides
3. Error messages
COMPUTER SAYS NO
“Make [user] error messages clearly visible, reduce
the work required to fix the problem, and educate
users along the way....
Consider: styleguide
(see from /admin/appearance/styleguide and make sure you have permissions set)
disable_messages (with caution!)
consider: stringoverrides, customerror (pay attention to your 404s!), logintoboggan
4. Meta information
Sharing is caring
“The incentives for adding social structured data are
clear:
● It can improve your CTR [click through rate].
● You can tai...
Metatag (look at the defaults)
5. Comments
Why so many options?
“I'll add my pet peeve, though: COMMENTS SHOULD
NEVER HAVE SUBJECTS. Never. Not just no Subject
field, but NO SUBJECT AT A...
Amend settings to remove title + amend
theme: or use Disqus/Livefyre
also: Mollum is good, or reverse CAPTCHA
6. Menus and navigation
Be logical and signpost
List of navigation and IA usability guidelines
1. There is a convenient and obvious way to move
between related pages and ...
taxonomy_menu/menu_block/menu_trail_by_path/pa
thauto. And sitemap!
Consider superfish, up_to_top
7. Blocks and block titles
Not all blocks are the same
“So when are you going to ditch your sidebar?”
Commenter on “The key to modern blog design: promote UX by retiring your si...
<none> Block_titlelink/using views
8. Email messaging
Don’t be a robot
“The From field should show a recognizable
brand name (if available).… People simply
don't open messages that don't have
r...
Review system emails, sender.
Consider: Mailchimp for newsletter sends
9. Sort defaults
Make them plain English!
“Sorting and filtering are essential for helping
users to find the products they're looking for….
The options you provide ...
better_exposed_filters (and views)
10. User profile
Make it useful
“The following features should be accessible via a
user account:
1. Personal Information / Contact Information
2. Security...
Profile2, Views, Logintoboggan/Login
Destination
Extras
11. Favicon:
12. In site navigation: back_to_top
13. Search: search_api + facet_api
14. Making pages for print: print
15. ...
?
Upcoming SlideShare
Loading in …5
×

10 UX Changes for Every Drupal Site

2,331 views

Published on

Drupal Camp North East 2014 talk on UX changes for Drupal sites

Published in: Technology
  • Be the first to comment

10 UX Changes for Every Drupal Site

  1. 1. 10 UX Changes for Every Drupal Site Vicky Teinaki @vickytnz
  2. 2. Drupal 7 UX needs tweaking Some things will get sorted out in D8.
  3. 3. Caveats
  4. 4. 10Some big, some small, all Drupal-ed
  5. 5. 1. Login/registration WTF is my username again?
  6. 6. If possible, use email as registration [and login] “In 2008, Forrester estimated call-center calls to cost $5.50 per call versus 10 cents for a user who self-services online. HealthCare.gov’s Account Setup: 10 Broken Usability Guidelines Jennifer Cardello http://www.nngroup.com/articles/affordable_care_act_usability_issues/
  7. 7. logintoboggan think about: email_registration , remember_me
  8. 8. 2. Form validation What did I do wrong?
  9. 9. “Our participants [in a test of 22 average users on six variations of a typical web registration form] were faster, more successful, less error- prone, and more satisfied when they used the forms with inline validation.” Luke Wroblewski Inline Validation in Web Forms http://alistapart.com/article/inline-validation-in-web-forms
  10. 10. (Entity form/Webform) ife, clientside_validation, email, date etc Consider: tipsy, stringoverrides
  11. 11. 3. Error messages COMPUTER SAYS NO
  12. 12. “Make [user] error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.” Error Message Guidelines Jakob Neilsen http://www.nngroup.com/articles/error-message-guidelines/
  13. 13. Consider: styleguide (see from /admin/appearance/styleguide and make sure you have permissions set)
  14. 14. disable_messages (with caution!) consider: stringoverrides, customerror (pay attention to your 404s!), logintoboggan
  15. 15. 4. Meta information Sharing is caring
  16. 16. “The incentives for adding social structured data are clear: ● It can improve your CTR [click through rate]. ● You can tailor content for each social network. ● It gains you extra real estate and exposure. ● If you don’t use it the resulting data can look a bit messy, as a computer will have to work out which bits of information you want to show.” David Moth The three types of social structured data and why you need them https://econsultancy.com/blog/62540-the-three-types-of-social-structured-data-and-why-you-need-them
  17. 17. Metatag (look at the defaults)
  18. 18. 5. Comments Why so many options?
  19. 19. “I'll add my pet peeve, though: COMMENTS SHOULD NEVER HAVE SUBJECTS. Never. Not just no Subject field, but NO SUBJECT AT ALL. A comment is about the post, so the subject is the post.” ‘Barry’ as comment (2007) on Drupal Usability: Comment Configuration http://www.lullabot.com/blog/article/drupal-usability-comment-configuration
  20. 20. Amend settings to remove title + amend theme: or use Disqus/Livefyre also: Mollum is good, or reverse CAPTCHA
  21. 21. 6. Menus and navigation Be logical and signpost
  22. 22. List of navigation and IA usability guidelines 1. There is a convenient and obvious way to move between related pages and sections and it is easy to return to the home page.… 29 navigation and IA usability guidelines David Travis http://www.userfocus.co.uk/resources/navchecklist.html
  23. 23. taxonomy_menu/menu_block/menu_trail_by_path/pa thauto. And sitemap! Consider superfish, up_to_top
  24. 24. 7. Blocks and block titles Not all blocks are the same
  25. 25. “So when are you going to ditch your sidebar?” Commenter on “The key to modern blog design: promote UX by retiring your sidebar” http://www.webdesignerdepot.com/2014/04/the-key-to-modern-blog-design-promote-ux-by-retiring-your- sidebar/
  26. 26. <none> Block_titlelink/using views
  27. 27. 8. Email messaging Don’t be a robot
  28. 28. “The From field should show a recognizable brand name (if available).… People simply don't open messages that don't have recognisable sender information . In both rounds of research, this was the number one reason users gave for not opening email.” Transactional and Confirmation Email Messages Jakob Neilsen http://www.nngroup.com/articles/transactional-and-confirmation-email/
  29. 29. Review system emails, sender. Consider: Mailchimp for newsletter sends
  30. 30. 9. Sort defaults Make them plain English!
  31. 31. “Sorting and filtering are essential for helping users to find the products they're looking for…. The options you provide for both should speak users' language and be specific to the actual product listing (and not generically applied across the site).” Filter & sort: Improving ecommerce product findability Tory Dunn http://www.webcredible.co.uk/user-friendly-resources/web-usability/ecommerce-findability.shtml
  32. 32. better_exposed_filters (and views)
  33. 33. 10. User profile Make it useful
  34. 34. “The following features should be accessible via a user account: 1. Personal Information / Contact Information 2. Security Information 3. Links to member-specific content areas 4. Information users have uploaded [contributed] to the site” Usable User Accounts Andrew Maier http://www.uxbooth.com/articles/usable-user-accounts/
  35. 35. Profile2, Views, Logintoboggan/Login Destination
  36. 36. Extras
  37. 37. 11. Favicon: 12. In site navigation: back_to_top 13. Search: search_api + facet_api 14. Making pages for print: print 15. Connecting things with each other: references 16. Media and images: Media (/ARRGH)
  38. 38. ?

×