Drupal UI Tweaks PNW Drupal Summit

1,249 views

Published on

Darko Hrgovic UI Tweaks Presentation from PNW Drupal Summit 2011

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,249
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 8 years teaching IT for VSB adult ed - Lead developer at agentic - Strategy/Training\nDay-to-day work we do trying to make websites usable for our clients and their constituents\nSpecifically our project for CLEO - yourlegalrights - where we had a very involved working relationship with their editor\n
  • Even if you’re not contributing to core, or contributing modules, or writing custom code, you play a role in the evolution of Drupal usability. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • “learnability” aspect of usability is often overlooked\nespecially interesting to me as an ex-teacher now-trainer\n
  • parallax issues with blog\noptimal learning occurs with optimal challenge - which is different for everyone, and difficult to assess\nsome learners - most of the people in this room - love hard problems\nclients generally don’t\n
  • parallax issues with blog\noptimal learning occurs with optimal challenge - which is different for everyone, and difficult to assess\nsome learners - most of the people in this room - love hard problems\nclients generally don’t\n
  • parallax issues with blog\noptimal learning occurs with optimal challenge - which is different for everyone, and difficult to assess\nsome learners - most of the people in this room - love hard problems\nclients generally don’t\n
  • parallax issues with blog\noptimal learning occurs with optimal challenge - which is different for everyone, and difficult to assess\nsome learners - most of the people in this room - love hard problems\nclients generally don’t\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Never hear “Rails is hard”\n
  • Never hear “Rails is hard”\n
  • Never hear “Rails is hard”\n
  • \n
  • \n
  • \n
  • \n
  • Drupal UX improvements cover Core\nContrib developers should pay attention to the guiding principles (as much as to coding standards) - improvements governed by 80% use case, leaving the rest to custom tweaks\nCustom is the wild west of UX (improvements governed by use case, time and budget)\n
  • Drupal UX improvements cover Core\nContrib developers should pay attention to the guiding principles (as much as to coding standards) - improvements governed by 80% use case, leaving the rest to custom tweaks\nCustom is the wild west of UX (improvements governed by use case, time and budget)\n
  • Drupal UX improvements cover Core\nContrib developers should pay attention to the guiding principles (as much as to coding standards) - improvements governed by 80% use case, leaving the rest to custom tweaks\nCustom is the wild west of UX (improvements governed by use case, time and budget)\n
  • grouping common tasks is an important usability feature, as mentioned for core UX - e.g. admin_menu and in D7 UI improvements to customizable admin menu\nwe can do better by filtering by project-specific common tasks and providing an interface\n\n\n
  • grouping common tasks is an important usability feature, as mentioned for core UX - e.g. admin_menu and in D7 UI improvements to customizable admin menu\nwe can do better by filtering by project-specific common tasks and providing an interface\n\n\n
  • \n
  • usability isn’t just about utility as food isn’t just about nourishment\nsession: An Introduction to Contextual Administration (get time)\n
  • usability isn’t just about utility as food isn’t just about nourishment\nsession: An Introduction to Contextual Administration (get time)\n
  • usability isn’t just about utility as food isn’t just about nourishment\nsession: An Introduction to Contextual Administration (get time)\n
  • \n
  • reference the post that we could have written http://www.leveltendesign.com/blog/randall-knutson/how-i-learned-stop-worrying-and-love-block?fb_ref=.Tnze3W5gnak.like&fb_source=profile_oneline\n
  • reference the post that we could have written http://www.leveltendesign.com/blog/randall-knutson/how-i-learned-stop-worrying-and-love-block?fb_ref=.Tnze3W5gnak.like&fb_source=profile_oneline\n
  • reference the post that we could have written http://www.leveltendesign.com/blog/randall-knutson/how-i-learned-stop-worrying-and-love-block?fb_ref=.Tnze3W5gnak.like&fb_source=profile_oneline\n
  • since custom is designed to meet a certain use case, it theoretically should be useable\n
  • since custom is designed to meet a certain use case, it theoretically should be useable\n
  • since custom is designed to meet a certain use case, it theoretically should be useable\n
  • A new approach to training: train the trainer, but then watch them train the trainees to identify gaps.\nThis takes buy-in from the client, and not everyone is able to separate content from presentation\nContent usually comes last, which is problematic\nEarly use can solve some issues that usually arise later (like fixed height block designs which aren’t friendly for dynamic text - but that’s a different presentation altogether)\nYour Legal Rights webinar experience with readytalk\n
  • A new approach to training: train the trainer, but then watch them train the trainees to identify gaps.\nThis takes buy-in from the client, and not everyone is able to separate content from presentation\nContent usually comes last, which is problematic\nEarly use can solve some issues that usually arise later (like fixed height block designs which aren’t friendly for dynamic text - but that’s a different presentation altogether)\nYour Legal Rights webinar experience with readytalk\n
  • A new approach to training: train the trainer, but then watch them train the trainees to identify gaps.\nThis takes buy-in from the client, and not everyone is able to separate content from presentation\nContent usually comes last, which is problematic\nEarly use can solve some issues that usually arise later (like fixed height block designs which aren’t friendly for dynamic text - but that’s a different presentation altogether)\nYour Legal Rights webinar experience with readytalk\n
  • A new approach to training: train the trainer, but then watch them train the trainees to identify gaps.\nThis takes buy-in from the client, and not everyone is able to separate content from presentation\nContent usually comes last, which is problematic\nEarly use can solve some issues that usually arise later (like fixed height block designs which aren’t friendly for dynamic text - but that’s a different presentation altogether)\nYour Legal Rights webinar experience with readytalk\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Dale said “there's a standard information credo that the closer information is to the people who use it, the better maintained it is.”\nroosevelt as example of high staff turnover\nvision as example of high developer turnover - political organizations potential developer handover from campaign to campaign\nExample of late-breaking “core hacks” list on CODE that could have been indicated with an admin-only block on the update page. These can be used to list patches as well. \nblock available only to admins\nhttp://www.scarleteen.com/admin/content/backup_migrate\n
  • \n
  • ever-complicated layouts\nexample from remappingdebate - authored copious pop-up help on flight to NY - turned out to be overkill and they ended up with one node with all possible html widgets\n“Lorem ipsum” is there ironically - to show how useless it is in examples\n
  • ever-complicated layouts\nexample from remappingdebate - authored copious pop-up help on flight to NY - turned out to be overkill and they ended up with one node with all possible html widgets\n“Lorem ipsum” is there ironically - to show how useless it is in examples\n
  • ever-complicated layouts\nexample from remappingdebate - authored copious pop-up help on flight to NY - turned out to be overkill and they ended up with one node with all possible html widgets\n“Lorem ipsum” is there ironically - to show how useless it is in examples\n
  • ever-complicated layouts\nexample from remappingdebate - authored copious pop-up help on flight to NY - turned out to be overkill and they ended up with one node with all possible html widgets\n“Lorem ipsum” is there ironically - to show how useless it is in examples\n
  • \n
  • wysiwyg BOF later \n
  • wysiwyg BOF later \n
  • wysiwyg BOF later \n
  • wysiwyg BOF later \n
  • D7 comes with a new and improved content admin that we needed to build in D6, but can still tweak for use cases in D7\n
  • views bulk operations\n
  • plain textarea still used in Commons (D6), which leverages OG\n
  • \n
  • \n
  • \n
  • More help text might be required if a user is scared of losing their current work when clicking “Edit node,” for example.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • chx’s talk about entities\n
  • chx’s talk about entities\n
  • \n
  • Drupal UI Tweaks PNW Drupal Summit

    1. 1. Drupal UI Tweaks THE OTHER 20% Darko Hrgovic Agentic Digital Media http://www.agentic.ca darko_hrgovic
    2. 2. The Goal To discuss our place inDrupal’s usability evolution and reputation
    3. 3. Agentic Digital MediaAgentic is the human webagency. We authentically engagereal people online.We have core expert processesaround web development andusing online media for good.
    4. 4. Agentic Digital MediaAgentic is the human webagency. We authentically engagereal people online. • 8 people - 20 sites per yearWe have core expert processesaround web development andusing online media for good.
    5. 5. Agentic Digital MediaAgentic is the human webagency. We authentically engagereal people online. • 8 people - 20 sites per year • Strategy/Design/BuildWe have core expert processesaround web development andusing online media for good.
    6. 6. Agentic Digital MediaAgentic is the human webagency. We authentically engagereal people online. • 8 people - 20 sites per year • Strategy/Design/BuildWe have core expert processesaround web development and • Social mission organizationsusing online media for good.
    7. 7. Agentic Digital MediaAgentic is the human webagency. We authentically engagereal people online. • 8 people - 20 sites per year • Strategy/Design/BuildWe have core expert processesaround web development and • Social mission organizationsusing online media for good. • Digital media
    8. 8. Agentic Digital MediaAgentic is the human webagency. We authentically engagereal people online. • 8 people - 20 sites per year • Strategy/Design/BuildWe have core expert processesaround web development and • Social mission organizationsusing online media for good. • Digital media • Digital ecology
    9. 9. Topics of discussion
    10. 10. Topics of discussion• Usability defined - you might be surprised
    11. 11. Topics of discussion• Usability defined - you might be surprised• A process towards more usable sites
    12. 12. Topics of discussion• Usability defined - you might be surprised• A process towards more usable sites• Usable UI tips and tweaks
    13. 13. “Usability is the ease of useand learnability of a human-made object.” http://en.wikipedia.org/wiki/Usability
    14. 14. Learnability
    15. 15. Learnability• “It doesn’t work like that blog cms I’m used to”
    16. 16. Learnability• “It doesn’t work like that blog cms I’m used to”• “Hard” often means “uncomfortable with the learning curve”
    17. 17. Learnability• “It doesn’t work like that blog cms I’m used to”• “Hard” often means “uncomfortable with the learning curve”• Big question: how do we increase usability/ learnability?
    18. 18. Learnability• “It doesn’t work like that blog cms I’m used to”• “Hard” often means “uncomfortable with the learning curve”• Big question: how do we increase usability/ learnability?• Luckily, there is a plan . . .
    19. 19. Drupal UXhttp://www.d7ux.org
    20. 20. Drupal UX http://www.d7ux.org1. Make the most frequent tasks easy and less frequent tasks achievable
    21. 21. Drupal UX http://www.d7ux.org1. Make the most frequent tasks easy and less frequent tasks achievable2. Design for the 80%
    22. 22. Drupal UX http://www.d7ux.org1. Make the most frequent tasks easy and less frequent tasks achievable2. Design for the 80%3. Privilege the Content Creator
    23. 23. Drupal UX http://www.d7ux.org1. Make the most frequent tasks easy and less frequent tasks achievable2. Design for the 80%3. Privilege the Content Creator4. Make the default settings smart
    24. 24. Obvious D6 and D7UX Improvements
    25. 25. Obvious D6 and D7 UX Improvements• D6 drag-n-drop
    26. 26. Obvious D6 and D7 UX Improvements• D6 drag-n-drop• D7 big wins: • Better grouping of common tasks in admin theme, customizable toolbar, etc • Overlays • caveat about accessibility
    27. 27. From Drupal UX to Product UX
    28. 28. From Drupal UX to Product UX• Framework versus product
    29. 29. From Drupal UX to Product UX• Framework versus product• If we know the use case, we can address the 20%
    30. 30. From Drupal UX to Product UX• Framework versus product• If we know the use case, we can address the 20%• Goals • Streamline client workflow = happy client • We’ve heard it said: A client’s job is NOT to run their website, but to run their business! • Developers feel good about a highly usable product • Drupal gets a good usability rep from happy client
    31. 31. Challenges todelivering better UX
    32. 32. Challenges to delivering better UX• Clients want more features, and expect that usability is included
    33. 33. Challenges to delivering better UX• Clients want more features, and expect that usability is included• Since usability is project-specific, clients need to be socialized into the fact that their 20% use case takes time and budget to address
    34. 34. Challenges to delivering better UX• Clients want more features, and expect that usability is included• Since usability is project-specific, clients need to be socialized into the fact that their 20% use case takes time and budget to address• Requires earlier (and more) client involvement, which means more management
    35. 35. Challenges to delivering better UX• Clients want more features, and expect that usability is included• Since usability is project-specific, clients need to be socialized into the fact that their 20% use case takes time and budget to address• Requires earlier (and more) client involvement, which means more management• Challenges are similar to client buy-in required for agile, responsive design or hybrid billing
    36. 36. The 3 Cs of Drupal UX
    37. 37. The 3 Cs of Drupal UX• Core • A small few
    38. 38. The 3 Cs of Drupal UX• Core • A small few• Contrib UX • Some of us
    39. 39. The 3 Cs of Drupal UX• Core • A small few• Contrib UX • Some of us• Custom UX • All of us
    40. 40. Contrib UX
    41. 41. Contrib UX• The obvious: admin_menu • Groups common tasks • We can barely use a D6 site without it
    42. 42. Contrib UX• The obvious: admin_menu • Groups common tasks • We can barely use a D6 site without it• D7 toolbar • And various “improved toolbar” modules
    43. 43. Prioritizing UXString overrides usability thread: http://drupal.org/node/234334“Im not sure I like how "Enabled" looks in the table header row. It pushes the textfields to the right and makes it look like the columns are misaligned. I also likehaving the ability to select all the rows at the same time. Letting the user knowwhat the checkboxes are for is important though, and Im no usability expert ...” Rob Loach
    44. 44. Beyond admin_menu/ toolbar
    45. 45. Beyond admin_menu/ toolbar• Further to “Make the most frequent tasks easy,” make the most frequent tasks easy to find
    46. 46. Beyond admin_menu/ toolbar• Further to “Make the most frequent tasks easy,” make the most frequent tasks easy to find• Group most frequent editorial tasks into a single menu or block & make it somewhat pretty • “learnability” benefits from color queues in menus, etc
    47. 47. Beyond admin_menu/ toolbar• Further to “Make the most frequent tasks easy,” make the most frequent tasks easy to find• Group most frequent editorial tasks into a single menu or block & make it somewhat pretty • “learnability” benefits from color queues in menus, etc• Contextual links module in D7 core - like theme “block edit hovers” in D6 - http://drupal.org/documentation/ modules/contextual
    48. 48. An example of pretty groupings
    49. 49. Our clients understand blocks
    50. 50. Our clients understand blocks• We use blocks because most of our clients can easily learn to use them
    51. 51. Our clients understand blocks• We use blocks because most of our clients can easily learn to use them• We don’t use context or panels because, as with views, we find that our clients find them too difficult to learn
    52. 52. Our clients understand blocks• We use blocks because most of our clients can easily learn to use them• We don’t use context or panels because, as with views, we find that our clients find them too difficult to learn• But those are wicked awesome modules
    53. 53. Custom UX
    54. 54. Custom UX• The Wild West of usability
    55. 55. Custom UX• The Wild West of usability• Do our best not to degrade UX for the 80%
    56. 56. Custom UX• The Wild West of usability• Do our best not to degrade UX for the 80%• Leave a ton of documentation in our wake (both for users and for future developers) • “Did you patch core according to that google doc that’s not referenced anywhere?“ - really, this just happened to us
    57. 57. Where’s the Content?
    58. 58. Where’s the Content?• Train as early as possible on a “content alpha”
    59. 59. Where’s the Content?• Train as early as possible on a “content alpha”• Watch them use it and act as a guide • There is no greater moment of illumination in a Drupal project than watching someone use it. (me) • Record this session (readytalk) - really, it makes everyone pay attention
    60. 60. Where’s the Content?• Train as early as possible on a “content alpha”• Watch them use it and act as a guide • There is no greater moment of illumination in a Drupal project than watching someone use it. (me) • Record this session (readytalk) - really, it makes everyone pay attention• Tweak it to the use case as much as possible
    61. 61. Where’s the Content?• Train as early as possible on a “content alpha”• Watch them use it and act as a guide • There is no greater moment of illumination in a Drupal project than watching someone use it. (me) • Record this session (readytalk) - really, it makes everyone pay attention• Tweak it to the use case as much as possible• Rinse, repeat, as many iterations as possible
    62. 62. Don’t underestimate the basics of learnability
    63. 63. Don’t underestimate the basics of learnability• Help text
    64. 64. Don’t underestimate the basics of learnability• Help text• Examples
    65. 65. Help, please!
    66. 66. Help, please!• “Type something here” is not very helpful - be as specific as possible
    67. 67. Help, please!• “Type something here” is not very helpful - be as specific as possible• Include dimensions or ratios for images, stylistic examples for text, dates, etc • “Upload a screen capture to be used on the training landing page. The image will be resized to 100px wide (height will scale accordingly).”
    68. 68. Help, please!• “Type something here” is not very helpful - be as specific as possible• Include dimensions or ratios for images, stylistic examples for text, dates, etc • “Upload a screen capture to be used on the training landing page. The image will be resized to 100px wide (height will scale accordingly).”• Nobody will see help text at .6em • “Upload a screen capture to be used on the training landing page. The image will be resized to 100px wide (height will scale accordingly).”
    69. 69. Information Proximity
    70. 70. Information Proximity• Proximity of documentation becomes even more important for certain types of projects • Staff turnover • Student organizations • Repeat training/documentation is rarely as intense when new features added • Train the trainer gets watered down over time • Developer turnover • RTFM doesn’t work when there’s no M, or if nobody knows where in the F the M is • We use blocks to place important information where it is most likely to be noticed (like the available updates page)
    71. 71. Provide Examples
    72. 72. Provide Examples• Example node(s) for wysiwyg styles
    73. 73. Provide Examples• Example node(s) for wysiwyg styles• For complicated elements, provide copy/paste examples
    74. 74. Provide Examples• Example node(s) for wysiwyg styles• For complicated elements, provide copy/paste examples• Examples better if they reflect client’s style guide
    75. 75. Provide Examples• Example node(s) for wysiwyg styles• For complicated elements, provide copy/paste examples• Examples better if they reflect client’s style guide• Clone module in D6 & D7
    76. 76. UI tweak examples
    77. 77. UI tweak examples• Better content sorting in D6 - in D7 core!
    78. 78. UI tweak examples• Better content sorting in D6 - in D7 core!• OG user management autocomplete with hook_form_alter - free in D7!
    79. 79. UI tweak examples• Better content sorting in D6 - in D7 core!• OG user management autocomplete with hook_form_alter - free in D7!• Modal noderef in D6 - not in D7 yet
    80. 80. UI tweak examples• Better content sorting in D6 - in D7 core!• OG user management autocomplete with hook_form_alter - free in D7!• Modal noderef in D6 - not in D7 yet• Nebulous usability issues with wysiwyg editors, images, and file interfaces
    81. 81. Better Content Management D7
    82. 82. Better Content Management in D6/D7 with VBOhttp://drupal.org/project/views_bulk_operations and its list of “complementary modules”
    83. 83. D6 OG user management tweakBeforeAfter
    84. 84. D6 OG user management tweakhook_form_alterif ($form_id == og_add_users) { // Add our custom pre-submit function in front of the regular submit handler $form[og_names][#type] = textfield; $form[og_names][#autocomplete_path] = mymodule/user_autocomplete; }hook_menu$items[mymodule/user_autocomplete] = array( title => OG user autocomplete, page callback => mymodule_user_autocomplete_multiple, access callback => user_access, access arguments => array(access user profiles), type => MENU_CALLBACK, file => ‘mymodule.pages.inc,);
    85. 85. D6 OG user management tweakmymodule.pages.inc// Borrowed from tags autocompletefunction mymodule_user_autocomplete_multiple($string = ) { // The user enters a comma-separated list of users. We only autocomplete the last user. $array = drupal_explode_tags($string); // Fetch last user $last_string = trim(array_pop($array)); $matches = array(); if ($last_string != ) { $result = db_query_range("SELECT name FROM {users} WHERE LOWER(name)LIKE LOWER(%s%%)", $last_string, 0, 10); $prefix = count($array) ? implode(, , $array) ., : ; while ($user = db_fetch_object($result)) { $n = $user->name; $matches[$prefix . $n] = check_plain($user->name); } } drupal_json($matches);}
    86. 86. OG D7 - autocomplete and meta data
    87. 87. Entity references in D6: nodereferenceYou might notice a few extras here.
    88. 88. Modal noderef
    89. 89. Modal noderef
    90. 90. Modal noderef requirements
    91. 91. Modal noderef requirements• noderef cck
    92. 92. Modal noderef requirements• noderef cck• modal_noderef http://drupal.org/project/ modal_noderef • automodal • modalframe (core in D7) • edit links are custom, and will need to be integrated into D7 entity reference options
    93. 93. // borrowed from automodal module (function ($) { /** * Add modal behaviour to all links with the given class. */ Drupal.behaviors.YLRModal = function () { var selector = .ylr-modal; var settings = { autoResize: true, autoFit: true, width: 700, height: 500 } // Add a click handler to each modal link. $(selector).click(function () { $this = $(this); settings.url = $this.attr(href) || #;$path = drupal_get_path(module, mymodule); if (settings.url.indexOf(?) >= 0) {drupal_add_js($path . /js/mymodule_modal.js); settings.url += & } else { settings.url += ? } // Add the flag to the end to make sure that the modal is opened correctly. settings.url += automodal=true; Drupal.modalFrame.open(settings); return false; }); } $("a.modalframe-processed").each(function() { alert(this); $(this).attr(target, _self); }); })(jQuery);
    94. 94. Entity relationships in D7
    95. 95. Entity relationships in D7• References module - continues noderef tradition with no modal in D7
    96. 96. Entity relationships in D7• References module - continues noderef tradition with no modal in D7• Relation module - wow, but some hot sauce will be required to make it usable/learnable
    97. 97. Cheers!darko@agentic.ca

    ×