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.
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
Site Builders: Let's clean up our UIs!
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. 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. 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
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. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Information Overload
! • Permissions
7. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Information Overload
! • Permissions
• Buried administration options
8. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Blocks
! • Difficult to get to / edit
9. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Blocks
! • Difficult to get to / edit
• Confusing UI
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. 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. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Messy Node Forms
! • Consider field order
13. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Messy Node Forms
! • Consider field order
• Consider field labels
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. 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. 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. 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. 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. Site Builders: Let’s Clean up our UIs! DrupalCamp LA 2014
Views Inconsistencies
! • Advantages of display modes
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. 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. 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
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. 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. 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