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.

Drupal 7 Interface Pattern

5,065 views

Published on

Presentation @ Drupalcon Chicago on interface patterns of Drupal 7

  • Be the first to comment

Drupal 7 Interface Pattern

  1. 1. Drupal 7 User Interface Patterns Bojhan Somers & Roy Scholten
  2. 3. Reusable solutions to recurring design problems <ul><li>About design patterns </li></ul>
  3. 4. What is a design pattern? About design patterns <ul><li>Common design problem </li></ul><ul><li>Solution </li></ul><ul><li>Solution Rationale </li></ul><ul><li>Visual examples </li></ul>
  4. 5. Why? <ul><li>Consistency </li></ul><ul><li>Sanity check </li></ul><ul><li>Self-service </li></ul>
  5. 6. The basics <ul><li>Form element </li></ul>
  6. 7. Common problems Form elements Choosing the right one for the job
  7. 8. Radio buttons Form elements
  8. 9. Radio buttons Form elements Don ’ t use them for Yes/No options
  9. 10. Radio buttons Form elements Don ’ t use them for Yes/No options. Use a checkbox instead
  10. 11. Checkbox Form elements
  11. 12. Checkbox Form elements
  12. 13. Select list Form elements
  13. 14. Select list Form elements Beware overloading it Make it clear that a selection is needed
  14. 15. List box Form elements Avoid whenever possible
  15. 16. Fieldsetitus <ul><li>Grouping elements </li></ul>
  16. 17. Common problems Grouping elements <ul><li>Overloading the grouping pattern by adding too many elements to a single grouping </li></ul><ul><li>Unnecessary groupings: fieldsets with 1 checkbox </li></ul>
  17. 18. Fieldsets Grouping elements
  18. 19. Fieldsets Grouping elements <ul><li>Avoid Fieldsetitus </li></ul><ul><li>Keep them within one scroll </li></ul><ul><li>Avoid nested fieldsets , it disorientates the user </li></ul><ul><li>Position collapsed fieldsets below expanded </li></ul>
  19. 20. Vertical tabs Grouping elements
  20. 21. Vertical tabs Grouping elements <ul><li>Avoid using it for the main interaction (skip able) </li></ul><ul><li>Avoid long panes </li></ul><ul><li>Avoid long descriptions </li></ul><ul><li>No less then 3, no more than 9 </li></ul>
  21. 22. Machine name Grouping elements
  22. 23. Machine name Grouping elements <ul><li>Use for all machine names </li></ul><ul><li>Avoid using it for other occasions </li></ul>
  23. 24. Summary <ul><li>Pattern index </li></ul><ul><li>Fieldsets </li></ul><ul><li>Vertical tabs </li></ul><ul><li>Machine name </li></ul>Grouping elements Use fieldsets for chuncking functionality, vertical tabs to hide a lot of functionality. Avoid overloading patterns, or adding unnecessary groupings.
  24. 25. Operations <ul><li>Listings </li></ul>
  25. 26. Common problems Listings <ul><li>Lack of overview </li></ul><ul><li>Too many operations </li></ul><ul><li>Too many columns, with duplicate or unnecessary information </li></ul><ul><li>No empty table state </li></ul>
  26. 27. Table Listings
  27. 28. Table Listings <ul><li>Standardize order of columns </li></ul><ul><li>Order operations, edit first and delete last. </li></ul><ul><li>Avoid adding columns with similar data </li></ul>
  28. 29. Table empty Listings
  29. 30. Table empty Listings <ul><li>There are no [things] available/ yet. Add [thing] </li></ul><ul><li>Action should be the same as the local action </li></ul>
  30. 31. Drag & Drop Listings
  31. 32. Summary <ul><li>Pattern index </li></ul><ul><li>Table (empty) </li></ul><ul><li>Drag and drop </li></ul><ul><li>Filters </li></ul><ul><li>Admin listing (Structure/Config) </li></ul><ul><li>Weighted listing (Appearance) </li></ul><ul><li>Sectioned listing (Blocks, permissions) </li></ul>Listings Listing are mostly about adhering to standards (positioning columns, operations), avoiding unnecessary columns and empty table messages.
  32. 33. Navigation <ul><li>Information architecture </li></ul>
  33. 34. Common problems Information architecture <ul><li>New information architecture concept, so a lot of misplaced items </li></ul><ul><li>Not applying new patterns (contextual links, action links) </li></ul>
  34. 35. Information Architecture Information architecture
  35. 36. Information Architecture <ul><li>Sections </li></ul><ul><li>Content </li></ul><ul><li>Structure </li></ul><ul><li>People </li></ul><ul><li>Configuration </li></ul><ul><li>Reports </li></ul><ul><li>Principles </li></ul><ul><li>Content and people for listings related to the object </li></ul><ul><li>Structure is for frequently accessed site building functionality (max 7) </li></ul><ul><li>Configuration is for infrequently accessed site building or configuration functionality </li></ul><ul><li>Don’t decide purely on your interpretation of section label </li></ul>Information architecture
  36. 37. Configuration sections <ul><li>Sections </li></ul><ul><li>People </li></ul><ul><li>System </li></ul><ul><li>Content authoring </li></ul><ul><li>User interface </li></ul><ul><li>Media </li></ul><ul><li>Search and metadata </li></ul><ul><li>Development </li></ul><ul><li>Regional and languages </li></ul><ul><li>Web services </li></ul>Information architecture
  37. 38. Configuration sections <ul><li>Principles </li></ul><ul><li>People </li></ul><ul><li>System </li></ul><ul><li>Content authoring </li></ul><ul><li>User interface </li></ul><ul><li>Media </li></ul><ul><li>Search and metadata </li></ul><ul><li>Development </li></ul><ul><li>Regional and languages </li></ul><ul><li>Web services </li></ul><ul><li>How to choose </li></ul><ul><li>The functionality (modules) already placed in this category. </li></ul><ul><li>The label assigned to the category. </li></ul>Information architecture
  38. 39. Local actions Information architecture
  39. 40. Local actions Information architecture <ul><li>Keep the task label short, start with a verb “Add”. </li></ul><ul><li>Preferably only one task, avoid more then two </li></ul>
  40. 41. Tabs Information architecture
  41. 42. Tabs Information architecture <ul><li>If the main tab is a listing, call it “List” </li></ul><ul><li>Group similar tabs </li></ul><ul><li>Avoid creating more than 4 tabs, consider broader groupings </li></ul><ul><li>Avoid secondary navigation </li></ul>
  42. 43. Contextual links Information architecture
  43. 44. Contextual links Information architecture <ul><li>Primarily used in the front end </li></ul><ul><li>Short labels (2/3 words) </li></ul><ul><li>Avoid more than 6 tasks </li></ul>
  44. 45. Summary <ul><li>Pattern index </li></ul><ul><li>Information architecture </li></ul><ul><li>Configuration sections </li></ul><ul><li>Local actions </li></ul><ul><li>Tabs </li></ul><ul><li>Contextual links </li></ul>Information architecture With all the new patterns, it mostly comes down to choosing the right labeling.
  45. 46. The fastest way to improve your interface is to improve the copy writing <ul><li>User interface text </li></ul>
  46. 47. Common problems User interface text Too much of it Jargon & difficult words Not instilling confidence in the user Documentation instead of guidance Explaining a broken user interface
  47. 50. Omit needless words User interface text
  48. 51. Omit needless words User interface text
  49. 52. Omit needless words User interface text
  50. 53. Omit needless words User interface text
  51. 54. Jargon: developer docs in the UI User interface text
  52. 55. <ul><li>Node, taxonomy, truncate, enabled, disabled, modifications, execute, retain, retrieve… </li></ul>Jargon and other difficult words User interface text
  53. 56. No confidence in the user User interface text
  54. 57. No confidence in the user User interface text Note that… Please… Don’t… If enabled… Shouldn’t… You may now… Allow…
  55. 58. Explaining a broken UI User interface text
  56. 59. Explaining a broken UI User interface text
  57. 60. Summary <ul><li>Pattern index </li></ul><ul><li>Page help </li></ul><ul><li>Form element label </li></ul><ul><li>Form element description </li></ul><ul><li>Messages: error, warning, confirm </li></ul><ul><li>Button labels </li></ul><ul><li>Fieldset legend </li></ul>User interface text Focus on the task at hand. Use the simplest word possible. Omit needless words: cut 50%, then cut 50% again. Be nice.
  58. 61. Index <ul><li>Grouping elements </li></ul><ul><li>Fieldsets </li></ul><ul><li>Vertical tabs </li></ul><ul><li>Machine name </li></ul><ul><li>Listings </li></ul><ul><li>Table (empty) </li></ul><ul><li>Drag and drop </li></ul><ul><li>Filters </li></ul><ul><li>Admin listing (Structure/Config) </li></ul><ul><li>Weighted listing (Appearance) </li></ul><ul><li>Sectioned listing (Blocks, permissions) </li></ul><ul><li>Information architecture </li></ul><ul><li>Information architecture </li></ul><ul><li>Configuration sections </li></ul><ul><li>Local actions </li></ul><ul><li>Tabs </li></ul><ul><li>Contextual links </li></ul><ul><li>User interface text </li></ul><ul><li>Page help </li></ul><ul><li>Form element label </li></ul><ul><li>Form element description </li></ul><ul><li>Messages: error, warning, confirm </li></ul><ul><li>Button labels </li></ul><ul><li>Fieldset legend </li></ul>Index
  59. 62. Pattern library <ul><li>How do we make it happen? </li></ul>
  60. 66. What did you think? http://chicago2011.drupal.org/sessions (“Take the Survey” link) @bojhan ,@royscholten Thanks!

×