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.

Site Builders: Let's clean up our UIs!

370 views

Published on

This DrupalCampLA 2014 session covers ideas that qualify as "low-hanging-fruit" (easy and quick to implement) for how to improve Drupal site usability right from the get-go, while building your views, content types, blocks, contexts, panels, etc. in the first place.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Site Builders: Let's clean up our UIs!

  1. 1. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Site Builders: Let’s clean up our UIs ! Rain Breaw Michaels @rainbreaw rbreaw@chillco.com
  2. 2. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Get rid of 1/2 of the words on the page. Then get rid of 1/2 of what is left. ! - Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
  3. 3. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Agenda • Common UI pitfalls on Drupal sites • Easy ways to mitigate the pitfalls • Best time to make UI improvements in site build • Other ideas from YOU • Questions
  4. 4. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Common Pitfalls ?
  5. 5. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Common Pitfalls • Information overload • Blocks • Messy node forms • Page formatting • Anything involving photos • Linking to other content • Views inconsistencies
  6. 6. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Information Overload ! • Permissions
  7. 7. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Information Overload ! • Permissions • Buried administration options
  8. 8. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Blocks ! • Difficult to get to / edit
  9. 9. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Blocks ! • Difficult to get to / edit • Confusing UI
  10. 10. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Blocks ! • Difficult to get to / edit • Confusing UI • Require a deeper understanding of how Drupal works
  11. 11. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Blocks ! • Difficult to get to / edit • Confusing UI • Require a deeper understanding of how Drupal works • Can be used to place helpful links
  12. 12. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order
  13. 13. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order • Consider field labels
  14. 14. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order • Consider field labels • Choose widgets based on user needs
  15. 15. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order • Consider field labels • Choose widgets based on user needs • Watch for unhelpful help text
  16. 16. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order • Consider field labels • Choose widgets based on user needs • Watch for unhelpful help text Remember: Get rid of 1/2 of the words on the page. Then get rid of 1/2 of what is left.
  17. 17. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order • Consider field labels • Choose widgets based on user needs • Watch for unhelpful help text • Page formatting • WYSIWYGs and HTML formats • Pre-set styles • Internal links
  18. 18. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Messy Node Forms ! • Consider field order • Consider field labels • Choose widgets based on user needs • Watch for unhelpful help text • Page formatting • WYSIWYGs and HTML formats • Pre-set styles • Internal links • Photos
  19. 19. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Views Inconsistencies ! • Advantages of display modes
  20. 20. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Views Inconsistencies ! • Advantages of display modes • Take advantage of Drupal publish options & sorts
  21. 21. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Views Inconsistencies ! • Advantages of display modes • Take advantage of Drupal publish options & sorts • Appropriately place edit links
  22. 22. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 When To Do All of This ! • When building the content type, block, panel, context, view, etc. for the first time • Before the client begins to review • As you are making improvements The best time to solve a problem is before the problem exists. Lessons from training Kung Fu
  23. 23. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Your Ideas?
  24. 24. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Questions
  25. 25. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Some Helpful Modules ! • Add Another • Module Filter • Filter Permissions • Masquerade (to test UI as another type of user) • Conditional Fields • Focal Point
  26. 26. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 Get in Touch Rain Breaw Michaels Senior Project Manager & UX Designer The Cherry Hill Company ! @rainbreaw rbreaw@chillco.com
  27. 27. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014 More with Cherry Hill Backend Performance & Scalability w/ Ashok Modi (btmash) Saturday @ 10am, Pacific Ballroom C ! Achieving Continuous Integration/Deployment/ Workflow - Using Jenkins w/ Ashok Modi (btmash) Sunday @ 9am, Pacific Ballroom C Views Demystified w/ Rain Breaw Sunday @ 10am, Moss Cove A ! Drupal as a Front-end: Libraries and Islandora w/ Tommy Keswick Sunday @ 1:30pm, Moss Cove B ! Move into Drupal with Migrate w/ Ashok Modi (btmash) Sunday @ 2:30pm, Pacific Ballroom C

×