Embed Size (px)
Citation preview
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Site Builders: Let’s clean up our UIs
!
Rain Breaw Michaels @rainbreaw
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
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
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Common Pitfalls
?
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
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Information Overload!
• Permissions
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Information Overload!
• Permissions • Buried administration options
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Blocks!
• Difficult to get to / edit
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Blocks!
• Difficult to get to / edit • Confusing UI
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
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
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Messy Node Forms!
• Consider field order
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Messy Node Forms!
• Consider field order • Consider field labels
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
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
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.
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
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
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Views Inconsistencies!
• Advantages of display modes
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Views Inconsistencies!
• Advantages of display modes • Take advantage of Drupal publish options & sorts
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
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
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Your Ideas?
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Questions
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
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 [email protected]
Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
More with Cherry HillBackend 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
