KEMBAR78
Drupal UI Tweaks PNW Drupal Summit | KEY
Drupal UI Tweaks
   THE OTHER 20%


       Darko Hrgovic
    Agentic Digital Media
    http://www.agentic.ca
        darko_hrgovic
The Goal


         To discuss our place in
Drupal’s usability evolution and reputation
Agentic Digital Media

Agentic is the human web
agency. We authentically engage
real people online.


We have core expert processes
around web development and
using online media for good.
Agentic Digital Media

Agentic is the human web
agency. We authentically engage
real people online.               •   8 people - 20 sites per year

We have core expert processes
around web development and
using online media for good.
Agentic Digital Media

Agentic is the human web
agency. We authentically engage
real people online.               •   8 people - 20 sites per year
                                  •   Strategy/Design/Build
We have core expert processes
around web development and
using online media for good.
Agentic Digital Media

Agentic is the human web
agency. We authentically engage
real people online.               •   8 people - 20 sites per year
                                  •   Strategy/Design/Build
We have core expert processes
around web development and
                                  •   Social mission organizations
using online media for good.
Agentic Digital Media

Agentic is the human web
agency. We authentically engage
real people online.               •   8 people - 20 sites per year
                                  •   Strategy/Design/Build
We have core expert processes
around web development and
                                  •   Social mission organizations
using online media for good.      •   Digital media
Agentic Digital Media

Agentic is the human web
agency. We authentically engage
real people online.               •   8 people - 20 sites per year
                                  •   Strategy/Design/Build
We have core expert processes
around web development and
                                  •   Social mission organizations
using online media for good.      •   Digital media
                                  •   Digital ecology
Topics of discussion
Topics of discussion



•   Usability defined - you might be surprised
Topics of discussion



•   Usability defined - you might be surprised
•   A process towards more usable sites
Topics of discussion



•   Usability defined - you might be surprised
•   A process towards more usable sites
•   Usable UI tips and tweaks
“Usability is the ease of use
and learnability of a human-
made object.”
                http://en.wikipedia.org/wiki/Usability
Learnability
Learnability


•   “It doesn’t work like that blog cms I’m used to”
Learnability


•   “It doesn’t work like that blog cms I’m used to”
•   “Hard” often means “uncomfortable with the
    learning curve”
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?
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 . . .
Drupal UX
http://www.d7ux.org
Drupal UX
            http://www.d7ux.org


1. Make the most frequent tasks easy and less
   frequent tasks achievable
Drupal UX
            http://www.d7ux.org


1. Make the most frequent tasks easy and less
   frequent tasks achievable
2. Design for the 80%
Drupal UX
            http://www.d7ux.org


1. Make the most frequent tasks easy and less
   frequent tasks achievable
2. Design for the 80%
3. Privilege the Content Creator
Drupal UX
            http://www.d7ux.org


1. Make the most frequent tasks easy and less
   frequent tasks achievable
2. Design for the 80%
3. Privilege the Content Creator
4. Make the default settings smart
Obvious D6 and D7
UX Improvements
Obvious D6 and D7
        UX Improvements

•   D6 drag-n-drop
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
From Drupal UX
 to Product UX
From Drupal UX
            to Product UX
•   Framework versus product
From Drupal UX
            to Product UX
•   Framework versus product
•   If we know the use case, we can address the 20%
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
Challenges to
delivering better UX
Challenges to
        delivering better UX
•   Clients want more features, and expect that usability
    is included
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
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 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
The 3 Cs of Drupal UX
The 3 Cs of Drupal UX

•   Core
    •   A small few
The 3 Cs of Drupal UX

•   Core
    •   A small few

•   Contrib UX
    •   Some of us
The 3 Cs of Drupal UX

•   Core
    •   A small few

•   Contrib UX
    •   Some of us

•   Custom UX
    •   All of us
Contrib UX
Contrib UX


•   The obvious: admin_menu
    •   Groups common tasks

    •   We can barely use a D6 site without it
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
Prioritizing UX
String overrides usability thread: http://drupal.org/node/234334
“I'm not sure I like how "Enabled" looks in the table header row. It pushes the text
fields to the right and makes it look like the columns are misaligned. I also like
having the ability to select all the rows at the same time. Letting the user know
what the checkboxes are for is important though, and I'm no usability expert ...”
                                                                             Rob Loach
Beyond admin_menu/ toolbar
Beyond admin_menu/ toolbar

•   Further to “Make the most frequent tasks easy,”
    make the most frequent tasks easy to find
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
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
An example of pretty groupings
Our clients understand blocks
Our clients understand blocks


•   We use blocks because most of our clients can
    easily learn to use them
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
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
Custom UX
Custom UX


•   The Wild West of usability
Custom UX


•   The Wild West of usability
•   Do our best not to degrade UX for the 80%
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
Where’s the Content?
Where’s the Content?

•   Train as early as possible on a “content alpha”
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
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
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
Don’t underestimate the basics
        of learnability
Don’t underestimate the basics
        of learnability



•   Help text
Don’t underestimate the basics
        of learnability



•   Help text
•   Examples
Help, please!
Help, please!

•   “Type something here” is not very helpful - be as
    specific as possible
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).”
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).”
Information Proximity
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)
Provide Examples
Provide Examples


•   Example node(s) for wysiwyg styles
Provide Examples


•   Example node(s) for wysiwyg styles
•   For complicated elements, provide copy/paste
    examples
Provide Examples


•   Example node(s) for wysiwyg styles
•   For complicated elements, provide copy/paste
    examples
•   Examples better if they reflect client’s style guide
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
UI tweak examples
UI tweak examples


•   Better content sorting in D6 - in D7 core!
UI tweak examples


•   Better content sorting in D6 - in D7 core!
•   OG user management autocomplete with
    hook_form_alter - free in D7!
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
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
Better Content Management D7
Better Content Management in
                D6/D7 with VBO




http://drupal.org/project/views_bulk_operations and its list of “complementary modules”
D6 OG user management tweak
Before




After
D6 OG user management tweak
hook_form_alter
if ($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',
);
D6 OG user management tweak
mymodule.pages.inc
// Borrowed from tags autocomplete
function 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);
}
OG D7 - autocomplete and
       meta data
Entity references in D6:
         nodereference




You might notice a few extras here.
Modal noderef
Modal noderef
Modal noderef requirements
Modal noderef requirements

•   noderef cck
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
// 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);
Entity relationships in D7
Entity relationships in D7


•   References module - continues noderef tradition
    with no modal in D7
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
Cheers!

darko@agentic.ca

Drupal UI Tweaks PNW Drupal Summit

  • 1.
    Drupal UI Tweaks THE OTHER 20% Darko Hrgovic Agentic Digital Media http://www.agentic.ca darko_hrgovic
  • 2.
    The Goal To discuss our place in Drupal’s usability evolution and reputation
  • 3.
    Agentic Digital Media Agenticis the human web agency. We authentically engage real people online. We have core expert processes around web development and using online media for good.
  • 4.
    Agentic Digital Media Agenticis the human web agency. We authentically engage real people online. • 8 people - 20 sites per year We have core expert processes around web development and using online media for good.
  • 5.
    Agentic Digital Media Agenticis the human web agency. We authentically engage real people online. • 8 people - 20 sites per year • Strategy/Design/Build We have core expert processes around web development and using online media for good.
  • 6.
    Agentic Digital Media Agenticis the human web agency. We authentically engage real people online. • 8 people - 20 sites per year • Strategy/Design/Build We have core expert processes around web development and • Social mission organizations using online media for good.
  • 7.
    Agentic Digital Media Agenticis the human web agency. We authentically engage real people online. • 8 people - 20 sites per year • Strategy/Design/Build We have core expert processes around web development and • Social mission organizations using online media for good. • Digital media
  • 8.
    Agentic Digital Media Agenticis the human web agency. We authentically engage real people online. • 8 people - 20 sites per year • Strategy/Design/Build We have core expert processes around web development and • Social mission organizations using online media for good. • Digital media • Digital ecology
  • 10.
  • 11.
    Topics of discussion • Usability defined - you might be surprised
  • 12.
    Topics of discussion • Usability defined - you might be surprised • A process towards more usable sites
  • 13.
    Topics of discussion • Usability defined - you might be surprised • A process towards more usable sites • Usable UI tips and tweaks
  • 14.
    “Usability is theease of use and learnability of a human- made object.” http://en.wikipedia.org/wiki/Usability
  • 15.
  • 16.
    Learnability • “It doesn’t work like that blog cms I’m used to”
  • 17.
    Learnability • “It doesn’t work like that blog cms I’m used to” • “Hard” often means “uncomfortable with the learning curve”
  • 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?
  • 19.
    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 . . .
  • 20.
  • 21.
    Drupal UX http://www.d7ux.org 1. Make the most frequent tasks easy and less frequent tasks achievable
  • 22.
    Drupal UX http://www.d7ux.org 1. Make the most frequent tasks easy and less frequent tasks achievable 2. Design for the 80%
  • 23.
    Drupal UX http://www.d7ux.org 1. Make the most frequent tasks easy and less frequent tasks achievable 2. Design for the 80% 3. Privilege the Content Creator
  • 24.
    Drupal UX http://www.d7ux.org 1. Make the most frequent tasks easy and less frequent tasks achievable 2. Design for the 80% 3. Privilege the Content Creator 4. Make the default settings smart
  • 25.
    Obvious D6 andD7 UX Improvements
  • 26.
    Obvious D6 andD7 UX Improvements • D6 drag-n-drop
  • 27.
    Obvious D6 andD7 UX Improvements • D6 drag-n-drop • D7 big wins: • Better grouping of common tasks in admin theme, customizable toolbar, etc • Overlays • caveat about accessibility
  • 28.
    From Drupal UX to Product UX
  • 29.
    From Drupal UX to Product UX • Framework versus product
  • 30.
    From Drupal UX to Product UX • Framework versus product • If we know the use case, we can address the 20%
  • 31.
    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
  • 32.
  • 33.
    Challenges to delivering better UX • Clients want more features, and expect that usability is included
  • 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
  • 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
  • 36.
    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
  • 37.
    The 3 Csof Drupal UX
  • 38.
    The 3 Csof Drupal UX • Core • A small few
  • 39.
    The 3 Csof Drupal UX • Core • A small few • Contrib UX • Some of us
  • 40.
    The 3 Csof Drupal UX • Core • A small few • Contrib UX • Some of us • Custom UX • All of us
  • 41.
  • 42.
    Contrib UX • The obvious: admin_menu • Groups common tasks • We can barely use a D6 site without it
  • 43.
    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
  • 44.
    Prioritizing UX String overridesusability thread: http://drupal.org/node/234334 “I'm not sure I like how "Enabled" looks in the table header row. It pushes the text fields to the right and makes it look like the columns are misaligned. I also like having the ability to select all the rows at the same time. Letting the user know what the checkboxes are for is important though, and I'm no usability expert ...” Rob Loach
  • 45.
  • 46.
    Beyond admin_menu/ toolbar • Further to “Make the most frequent tasks easy,” make the most frequent tasks easy to find
  • 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
  • 48.
    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
  • 49.
    An example ofpretty groupings
  • 50.
  • 51.
    Our clients understandblocks • We use blocks because most of our clients can easily learn to use them
  • 52.
    Our clients understandblocks • 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
  • 53.
    Our clients understandblocks • 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
  • 54.
  • 55.
    Custom UX • The Wild West of usability
  • 56.
    Custom UX • The Wild West of usability • Do our best not to degrade UX for the 80%
  • 57.
    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
  • 58.
  • 59.
    Where’s the Content? • Train as early as possible on a “content alpha”
  • 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
  • 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
  • 62.
    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
  • 63.
    Don’t underestimate thebasics of learnability
  • 64.
    Don’t underestimate thebasics of learnability • Help text
  • 65.
    Don’t underestimate thebasics of learnability • Help text • Examples
  • 66.
  • 67.
    Help, please! • “Type something here” is not very helpful - be as specific as possible
  • 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).”
  • 69.
    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).”
  • 70.
  • 71.
    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)
  • 73.
  • 74.
    Provide Examples • Example node(s) for wysiwyg styles
  • 75.
    Provide Examples • Example node(s) for wysiwyg styles • For complicated elements, provide copy/paste examples
  • 76.
    Provide Examples • Example node(s) for wysiwyg styles • For complicated elements, provide copy/paste examples • Examples better if they reflect client’s style guide
  • 77.
    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
  • 79.
  • 80.
    UI tweak examples • Better content sorting in D6 - in D7 core!
  • 81.
    UI tweak examples • Better content sorting in D6 - in D7 core! • OG user management autocomplete with hook_form_alter - free in D7!
  • 82.
    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
  • 83.
    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
  • 84.
  • 85.
    Better Content Managementin D6/D7 with VBO http://drupal.org/project/views_bulk_operations and its list of “complementary modules”
  • 86.
    D6 OG usermanagement tweak Before After
  • 87.
    D6 OG usermanagement tweak hook_form_alter if ($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', );
  • 88.
    D6 OG usermanagement tweak mymodule.pages.inc // Borrowed from tags autocomplete function 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); }
  • 89.
    OG D7 -autocomplete and meta data
  • 90.
    Entity references inD6: nodereference You might notice a few extras here.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
    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
  • 96.
    // borrowed fromautomodal 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);
  • 97.
  • 98.
    Entity relationships inD7 • References module - continues noderef tradition with no modal in D7
  • 99.
    Entity relationships inD7 • 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
  • 100.

Editor's Notes

  • #2 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
  • #3 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
  • #4 \n
  • #5 \n
  • #6 \n
  • #7 \n
  • #8 \n
  • #9 \n
  • #10 \n
  • #11 \n
  • #12 \n
  • #13 “learnability” aspect of usability is often overlooked\nespecially interesting to me as an ex-teacher now-trainer\n
  • #14 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
  • #15 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
  • #16 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
  • #17 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
  • #18 \n
  • #19 \n
  • #20 \n
  • #21 \n
  • #22 \n
  • #23 \n
  • #24 Never hear “Rails is hard”\n
  • #25 Never hear “Rails is hard”\n
  • #26 Never hear “Rails is hard”\n
  • #27 \n
  • #28 \n
  • #29 \n
  • #30 \n
  • #31 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
  • #32 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
  • #33 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
  • #34 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
  • #35 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
  • #36 \n
  • #37 usability isn’t just about utility as food isn’t just about nourishment\nsession: An Introduction to Contextual Administration (get time)\n
  • #38 usability isn’t just about utility as food isn’t just about nourishment\nsession: An Introduction to Contextual Administration (get time)\n
  • #39 usability isn’t just about utility as food isn’t just about nourishment\nsession: An Introduction to Contextual Administration (get time)\n
  • #40 \n
  • #41 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
  • #42 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
  • #43 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
  • #44 since custom is designed to meet a certain use case, it theoretically should be useable\n
  • #45 since custom is designed to meet a certain use case, it theoretically should be useable\n
  • #46 since custom is designed to meet a certain use case, it theoretically should be useable\n
  • #47 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
  • #48 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
  • #49 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
  • #50 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
  • #51 \n
  • #52 \n
  • #53 \n
  • #54 \n
  • #55 \n
  • #56 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
  • #57 \n
  • #58 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
  • #59 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
  • #60 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
  • #61 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
  • #62 \n
  • #63 wysiwyg BOF later \n
  • #64 wysiwyg BOF later \n
  • #65 wysiwyg BOF later \n
  • #66 wysiwyg BOF later \n
  • #67 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
  • #68 views bulk operations\n
  • #69 plain textarea still used in Commons (D6), which leverages OG\n
  • #70 \n
  • #71 \n
  • #72 \n
  • #73 More help text might be required if a user is scared of losing their current work when clicking “Edit node,” for example.\n
  • #74 \n
  • #75 \n
  • #76 \n
  • #77 \n
  • #78 \n
  • #79 chx’s talk about entities\n
  • #80 chx’s talk about entities\n
  • #81 \n