Page MenuHomePhabricator

UI for notifying users about data collection
Open, Needs TriagePublic

Description

We need data collected from MediaWiki account creation page which can help distinguish bots from humans. The data to be collected includes mouse and keypress information (excluding any activity involving password-related fields). The data collection begins when the user lands on the page and ends when submit button is clicked (ignoring any activity in password-related fields). The data will be destroyed once the model is ready. Since the data collection is happening in the background, we need to inform the users that we are collecting this information. We need a UI design which communicates this effectively.

Details

Related Gerrit Patches:
mediawiki/extensions/WikimediaEvents : masterModify AICaptcha data collection code
mediawiki/extensions/WikimediaEvents : wmf/1.31.0-wmf.17Modify AICaptcha data collection notice
mediawiki/extensions/WikimediaEvents : masterModify AICaptcha data collection notice

Event Timeline

Groovier created this task.Jan 2 2018, 8:50 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 2 2018, 8:50 PM
Groovier updated the task description. (Show Details)Jan 2 2018, 9:20 PM

Let's start with a simple HTMLForm help text so we have something we can turn on at some test wiki and show to people. We can then provide a screenshot and ask for a better design. Here is an initial shot at the text:

We are collecting mouse movement and typing speed data for better identifying abusive accounts. Find out more. No password data is collected and no data will be retained for longer than 90 days.

Not sure if we want to broadcast that much what we are doing though. (So spammers visit the registration page regularly? Seems likely.) Maybe @APalmer_WMF has advice on what level of disclosure to aim for.

Tgr added a comment.Jan 16 2018, 9:28 PM

Not sure if we want to broadcast that much what we are doing though. (So spammers visit the registration page regularly? Seems likely.) Maybe @APalmer_WMF has advice on what level of disclosure to aim for.

Discussed that in email, ended up with a popup button saying "How we collect data to help us detect bots" and on click showing this notice:

We’re always working to improve our systems. In order to get better at detecting bots, between January and March 2018, we may collect information about keyboard and mouse usage on the account creation form. This data will only be used to help us better detect automated registrations, in order to prevent spam and make registration more seamless for humans. (find out more)

So something like this:

Tgr added a comment.Jan 16 2018, 9:56 PM

The code used for the mockup was something like

mw.loader.using( 'oojs-ui-core', function() {
    var popupButton = new OO.ui.PopupButtonWidget( {
        $overlay: true,
        label: 'How we collect data to help us detect bots',
        icon: 'info',
        framed: false,
        popup: {
            $content: $( '<p>We’re always working to improve our systems. In order to get better at detecting bots, between January and March 2018, we may collect information about keyboard and mouse usage on the account creation form. This data will only be used to help us better detect automated registrations, in order to prevent spam and make registration more seamless for humans. <a href="https://meta.wikimedia.org/wiki/Research:Spambot_detection_via_registration_page_behavior">(find out more)</a></p>' ),
            // position: 'after',
            padded: true
        }
    } );
    // there must be a nicer way to do this
    popupButton.$element.css( { float: 'right', marginTop: 30 } );
    $( '#wpCreateaccount' ).closest( '.mw-ui-vform-field' ).append( popupButton.$element );
} );
Tgr reopened this task as Open.EditedFeb 2 2018, 1:26 AM

Proposed new version:

DesktopTabletMobile

The button uses the same visuals as other links, is reworded a bit to fit in the form in a single line, and is moved to be part of the captcha block. (If there is no captcha block, there is no need to display it.)
On desktop, it shows the the same popup as in T183991#3904344 (although maybe open it to the side?). On tablet/mobile, there is no popup, just a link to the meta page.

Tgr added a subscriber: Nirzar.Feb 2 2018, 3:52 AM

@Nirzar I'm hoping to deploy this to the wikis early next week (desktop only for now). Any concerns/objections about the design?

Change 408263 had a related patch set uploaded (by Groovier1; owner: Groovier1):
[mediawiki/extensions/WikimediaEvents@master] Adding UI for notifying users about data collection This change adds a module in WikimediaEvents extension to notify users about the data collection which happens in the background. The data collected involves only statistical data and no data which can u

https://gerrit.wikimedia.org/r/408263

hey @Tgr thank you for informing design about this change.

This is a communication design problem. Few thoughts on how we could approach this

We need separation between

  • Inform user about an activity + mention the reason about activity
  • give a way to know more about it
  • use iconography to emphasise that this is a security feature

based on that, one single link to do all three things is confusing.

Change 408263 merged by jenkins-bot:
[mediawiki/extensions/WikimediaEvents@master] Modify AICaptcha data collection notice

https://gerrit.wikimedia.org/r/408263

Change 408362 had a related patch set uploaded (by Gergő Tisza; owner: Groovier1):
[mediawiki/extensions/WikimediaEvents@wmf/1.31.0-wmf.17] Modify AICaptcha data collection notice

https://gerrit.wikimedia.org/r/408362

Change 408362 merged by jenkins-bot:
[mediawiki/extensions/WikimediaEvents@wmf/1.31.0-wmf.17] Modify AICaptcha data collection notice

https://gerrit.wikimedia.org/r/408362

Tgr added a comment.Feb 6 2018, 1:21 AM

@Nirzar thanks! How would that look on desktop (where the "learn more" link is inside a popup with more detailed text)? Without the link, it seems non-obvious that (on desktop) this is a clickable button.

Change 408843 had a related patch set uploaded (by Groovier1; owner: Groovier1):
[mediawiki/extensions/WikimediaEvents@master] Modify AICaptcha data collection code

https://gerrit.wikimedia.org/r/408843

I would recommending hiding the justification for captcha. it is a commonly used feature to prevent bots. the user expectation there is pretty much set and known. we can link out to "learn more"

as far as the data collection goes, same notice can show up next to the call to action and show a popover with relevant info.

Tgr added a comment.Feb 9 2018, 12:15 AM

@Nirzar I don't see anything like that shield in the OOUI icon docs. Where is it from?

@Tgr my bad, I used something that's an upcoming addition to OOUI iconset. design team is working on upgrading the iconset.

let's use

oo-ui-icon-info

for now.

TheDJ added a subscriber: TheDJ.Feb 13 2018, 10:47 AM

@Nirzar. "about you to detect bots"

Do we assume that non-techies know what bots are ? Maybe something like "automated accounts", or "automated system" or "nefarious usage" or "bad actors". Something more descriptive at least...

good point. let's use automated accounts

or robot uprising