Page MenuHomePhabricator

UI for notifying users about data collection
Closed, ResolvedPublic

Assigned To
Authored By
Groovier
Jan 2 2018, 8:50 PM
Referenced Files
F13318854: desktop-signup.png
Feb 8 2018, 8:08 PM
F13318855: desktop-signup-popover.png
Feb 8 2018, 8:08 PM
F13044544: data-collection.png
Feb 5 2018, 6:00 PM
F12949360: mobile-aicaptcha-warning-2.png
Feb 2 2018, 1:26 AM
F12949356: mobile-aicaptcha-warning-1.png
Feb 2 2018, 1:26 AM
F12949351: aicaptcha-popup-final.png
Feb 2 2018, 1:26 AM
F12602267: aicaptcha-popup-3.png
Jan 16 2018, 9:28 PM
F12602269: aicaptcha-popup-4.png
Jan 16 2018, 9:28 PM

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.

Event Timeline

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.

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:

aicaptcha-popup-3.png (411×764 px, 41 KB)
aicaptcha-popup-4.png (417×784 px, 57 KB)

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
aicaptcha-popup-final.png (1×628 px, 155 KB)
mobile-aicaptcha-warning-1.png (1×1 px, 92 KB)
mobile-aicaptcha-warning-2.png (961×403 px, 71 KB)

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.

@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.

data-collection.png (1×750 px, 197 KB)

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

@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

desktop-signup.png (1×2 px, 666 KB)

desktop-signup-popover.png (1×2 px, 759 KB)

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.

@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.

@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

Removing task assignee due to inactivity, as this open task has been assigned to the same person for more than two years (see the emails sent to the task assignee on Oct27 and Nov23). Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome.
(See https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator.)

Change 408843 abandoned by Gergő Tisza:
[mediawiki/extensions/WikimediaEvents@master] Modify AICaptcha data collection code

Reason:
I don't recall why we did not use this code, but the project ended since then and the data collection code has been removed.

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

Tgr assigned this task to Groovier.

The project ended in 2018 and we have not been collecting data since then so nothing to do here.

The project ended in 2018

@Tgr: Thanks; do you know what that might mean for tasks on the https://phabricator.wikimedia.org/tag/aicaptcha/ workboard under "Doing" or "Done"?