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/registrationWTF 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 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/

logintobogganthink about: email_registration , remember_me

2. Form validationWhat 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 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

(Entity form/Webform)ife, clientside_validation, email, date etc

Consider: tipsy, stringoverrides

3. Error messagesCOMPUTER SAYS NO

“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/

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 informationSharing is caring

“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

Metatag (look at the defaults)

5. CommentsWhy 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 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

Amend settings to remove title + amend theme: or use Disqus/Livefyre

also: Mollum is good, or reverse CAPTCHA

6. Menus and navigationBe logical and signpost

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

taxonomy_menu/menu_block/menu_trail_by_path/pathauto. And sitemap!

Consider superfish, up_to_top

7. Blocks and block titlesNot 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 sidebar”

http://www.webdesignerdepot.com/2014/04/the-key-to-modern-blog-design-promote-ux-by-retiring-your-

sidebar/

<none> Block_titlelink/using views

8. Email messagingDon’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 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/

Review system emails, sender.Consider: Mailchimp for newsletter sends

9. Sort defaultsMake them plain English!

“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

better_exposed_filters (and views)

10. User profileMake it useful

“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/

Profile2, Views, Logintoboggan/Login Destination

Extras

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)

?