10 ux changes for every drupal site
DESCRIPTION
Drupal Camp North East 2014 talk on UX changes for Drupal sitesTRANSCRIPT
![Page 1: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/1.jpg)
10 UX Changes for Every Drupal Site
Vicky Teinaki@vickytnz
![Page 2: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/2.jpg)
Drupal 7 UX needs tweaking
Some things will get sorted out in D8.
![Page 3: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/3.jpg)
Caveats
![Page 4: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/4.jpg)
10Some big, some small, all Drupal-ed
![Page 5: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/5.jpg)
1. Login/registrationWTF is my username again?
![Page 6: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/6.jpg)
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 GuidelinesJennifer Cardellohttp://www.nngroup.com/articles/affordable_care_act_usability_issues/
![Page 7: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/7.jpg)
logintobogganthink about: email_registration , remember_me
![Page 8: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/8.jpg)
2. Form validationWhat did I do wrong?
![Page 9: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/9.jpg)
“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 WroblewskiInline Validation in Web Formshttp://alistapart.com/article/inline-validation-in-web-forms
![Page 10: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/10.jpg)
(Entity form/Webform)ife, clientside_validation, email, date etc
Consider: tipsy, stringoverrides
![Page 11: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/11.jpg)
3. Error messagesCOMPUTER SAYS NO
![Page 12: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/12.jpg)
“Make [user] error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.”
Error Message GuidelinesJakob Neilsenhttp://www.nngroup.com/articles/error-message-guidelines/
![Page 13: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/13.jpg)
Consider: styleguide (see from /admin/appearance/styleguide and make sure you have permissions set)
![Page 14: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/14.jpg)
disable_messages (with caution!)consider: stringoverrides, customerror (pay attention to your 404s!), logintoboggan
![Page 15: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/15.jpg)
4. Meta informationSharing is caring
![Page 16: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/16.jpg)
“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 MothThe 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
![Page 17: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/17.jpg)
Metatag (look at the defaults)
![Page 18: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/18.jpg)
5. CommentsWhy so many options?
![Page 19: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/19.jpg)
“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) onDrupal Usability: Comment Configuration http://www.lullabot.com/blog/article/drupal-usability-comment-configuration
![Page 20: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/20.jpg)
Amend settings to remove title + amend theme: or use Disqus/Livefyre
also: Mollum is good, or reverse CAPTCHA
![Page 21: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/21.jpg)
6. Menus and navigationBe logical and signpost
![Page 22: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/22.jpg)
List of navigation and IA usability guidelines1. 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 guidelinesDavid Travishttp://www.userfocus.co.uk/resources/navchecklist.html
![Page 23: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/23.jpg)
taxonomy_menu/menu_block/menu_trail_by_path/pathauto. And sitemap!
Consider superfish, up_to_top
![Page 24: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/24.jpg)
7. Blocks and block titlesNot all blocks are the same
![Page 25: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/25.jpg)
“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/
![Page 26: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/26.jpg)
<none> Block_titlelink/using views
![Page 27: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/27.jpg)
8. Email messagingDon’t be a robot
![Page 28: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/28.jpg)
“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 Neilsenhttp://www.nngroup.com/articles/transactional-and-confirmation-email/
![Page 29: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/29.jpg)
Review system emails, sender.Consider: Mailchimp for newsletter sends
![Page 30: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/30.jpg)
9. Sort defaultsMake them plain English!
![Page 31: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/31.jpg)
“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 findabilityTory Dunnhttp://www.webcredible.co.uk/user-friendly-resources/web-usability/ecommerce-findability.shtml
![Page 32: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/32.jpg)
better_exposed_filters (and views)
![Page 33: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/33.jpg)
10. User profileMake it useful
![Page 34: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/34.jpg)
“The following features should be accessible via a user account:
1. Personal Information / Contact Information2. Security Information3. Links to member-specific content areas4. Information users have uploaded [contributed] to
the site”
Usable User AccountsAndrew Maierhttp://www.uxbooth.com/articles/usable-user-accounts/
![Page 35: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/35.jpg)
Profile2, Views, Logintoboggan/Login Destination
![Page 36: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/36.jpg)
Extras
![Page 37: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/37.jpg)
11. Favicon: 12. In site navigation: back_to_top 13. Search: search_api + facet_api14. Making pages for print: print15. Connecting things with each other: references16. Media and images: Media (/ARRGH)
![Page 38: 10 UX Changes for Every Drupal Site](https://reader034.vdocuments.mx/reader034/viewer/2022042713/540d8da28d7f72747e8b4a58/html5/thumbnails/38.jpg)
?