CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>VisualEditor on mobile/Edit cards - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"ba2fce89-c7fa-4747-b2b2-a951d0bbe75a","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"VisualEditor_on_mobile/Edit_cards","wgTitle":"VisualEditor on mobile/Edit cards","wgCurRevisionId":6880394,"wgRevisionId":6880394,"wgArticleId":924994,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["WMF Projects 2019q2","WMF Projects 2019q3","WMF Projects 2019q4","WMF Projects 2020q1","WMF Projects 2020q2","WMF Projects 2020q3","WMF Projects 2020q4","WMF Projects 2021q1","WMF Projects 2021q2","WMF Projects 2021q3","WMF Projects 2021q4","WMF Projects 2022q1","WMF Projects 2022q2","WMF Projects 2022q3","WMF Projects 2022q4","WMF Projects 2023q1","WMF Projects 2023q2","WMF Projects 2023q3","WMF Projects 2023q4", "WMF Projects 2024q1","WMF Projects 2024q2","WMF Projects 2024q3","WMF Projects 2024q4","WMF Projects"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"VisualEditor_on_mobile/Edit_cards","wgRelevantArticleId":924994,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false, "visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","mediawiki.ui.button":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init": "ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.page.media","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.discussionTools.init.styles%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cmediawiki.ui.button%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.5"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/e/e8/Edit_Cards_comparison_v2_and_v3.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="951"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Edit_Cards_comparison_v2_and_v3.png/800px-Edit_Cards_comparison_v2_and_v3.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="634"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Edit_Cards_comparison_v2_and_v3.png/640px-Edit_Cards_comparison_v2_and_v3.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="507"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="VisualEditor on mobile/Edit cards - MediaWiki"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/VisualEditor_on_mobile/Edit_cards"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/VisualEditor_on_mobile/Edit_cards"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-VisualEditor_on_mobile_Edit_cards rootpage-VisualEditor_on_mobile skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=VisualEditor+on+mobile%2FEdit+cards" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=VisualEditor+on+mobile%2FEdit+cards" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=VisualEditor+on+mobile%2FEdit+cards" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=www.mediawiki.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=VisualEditor+on+mobile%2FEdit+cards" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=VisualEditor+on+mobile%2FEdit+cards" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Open_questions" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Open_questions"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Open questions</span> </div> </a> <ul id="toc-Open_questions-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Updates" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Updates"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Updates</span> </div> </a> <button aria-controls="toc-Updates-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Updates subsection</span> </button> <ul id="toc-Updates-sublist" class="vector-toc-list"> <li id="toc-26_November_2019_-_measuring_impact" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#26_November_2019_-_measuring_impact"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>26 November 2019 - measuring impact</span> </div> </a> <ul id="toc-26_November_2019_-_measuring_impact-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-2_September_2019_-_v3_deployment_timing" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#2_September_2019_-_v3_deployment_timing"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>2 September 2019 - v3 deployment timing</span> </div> </a> <ul id="toc-2_September_2019_-_v3_deployment_timing-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-20_August_2019_-_v3_prototype_ready" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#20_August_2019_-_v3_prototype_ready"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>20 August 2019 - v3 prototype ready</span> </div> </a> <ul id="toc-20_August_2019_-_v3_prototype_ready-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-2_August_2019_–_v2_live_on_all_wikis" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#2_August_2019_–_v2_live_on_all_wikis"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>2 August 2019 – v2 live on all wikis</span> </div> </a> <ul id="toc-2_August_2019_–_v2_live_on_all_wikis-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-31_July_2019_–_v2_deployment_to_all_wikis" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#31_July_2019_–_v2_deployment_to_all_wikis"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5</span> <span>31 July 2019 – v2 deployment to all wikis</span> </div> </a> <ul id="toc-31_July_2019_–_v2_deployment_to_all_wikis-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-26_July_2019_–_v2_testing_(usertesting.com)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#26_July_2019_–_v2_testing_(usertesting.com)"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.6</span> <span>26 July 2019 – v2 testing (usertesting.com)</span> </div> </a> <ul id="toc-26_July_2019_–_v2_testing_(usertesting.com)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-19_July_2019_–_v2_deployment_timing" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#19_July_2019_–_v2_deployment_timing"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.7</span> <span>19 July 2019 – v2 deployment timing</span> </div> </a> <ul id="toc-19_July_2019_–_v2_deployment_timing-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-15_July_2019_–_v2_prototype_ready" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#15_July_2019_–_v2_prototype_ready"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.8</span> <span>15 July 2019 – v2 prototype ready</span> </div> </a> <ul id="toc-15_July_2019_–_v2_prototype_ready-sublist" class="vector-toc-list"> <li id="toc-Edit_Cards_v2" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Edit_Cards_v2"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.8.1</span> <span>Edit Cards v2</span> </div> </a> <ul id="toc-Edit_Cards_v2-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-14_June_2019_–_v1_prototype_ready" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#14_June_2019_–_v1_prototype_ready"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.9</span> <span>14 June 2019 – v1 prototype ready</span> </div> </a> <ul id="toc-14_June_2019_–_v1_prototype_ready-sublist" class="vector-toc-list"> <li id="toc-Using_the_prototype" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Using_the_prototype"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.9.1</span> <span>Using the prototype</span> </div> </a> <ul id="toc-Using_the_prototype-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-31_May_2019_–_Tappable_wireframes" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#31_May_2019_–_Tappable_wireframes"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10</span> <span>31 May 2019 – Tappable wireframes</span> </div> </a> <ul id="toc-31_May_2019_–_Tappable_wireframes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-8_May_2019_–_Initial_wireframes" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#8_May_2019_–_Initial_wireframes"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.11</span> <span>8 May 2019 – Initial wireframes</span> </div> </a> <ul id="toc-8_May_2019_–_Initial_wireframes-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Background" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Background"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Background</span> </div> </a> <ul id="toc-Background-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-User_testing" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#User_testing"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>User testing</span> </div> </a> <button aria-controls="toc-User_testing-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle User testing subsection</span> </button> <ul id="toc-User_testing-sublist" class="vector-toc-list"> <li id="toc-v3_prototype" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#v3_prototype"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>v3 prototype</span> </div> </a> <ul id="toc-v3_prototype-sublist" class="vector-toc-list"> <li id="toc-How_were_we_testing?" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#How_were_we_testing?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.1</span> <span>How were we testing?</span> </div> </a> <ul id="toc-How_were_we_testing?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_did_we_find?" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_did_we_find?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.2</span> <span><b>What did we find?</b></span> </div> </a> <ul id="toc-What_did_we_find?-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-v2_prototype" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#v2_prototype"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>v2 prototype</span> </div> </a> <ul id="toc-v2_prototype-sublist" class="vector-toc-list"> <li id="toc-How_were_we_testing?_2" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#How_were_we_testing?_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.1</span> <span>How were we testing?</span> </div> </a> <ul id="toc-How_were_we_testing?_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_did_we_find?_2" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_did_we_find?_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.2</span> <span><b>What did we find?</b></span> </div> </a> <ul id="toc-What_did_we_find?_2-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-v1_prototype" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#v1_prototype"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span> <span>v1 prototype</span> </div> </a> <ul id="toc-v1_prototype-sublist" class="vector-toc-list"> <li id="toc-How_were_we_testing?_3" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#How_were_we_testing?_3"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3.1</span> <span>How were we testing?</span> </div> </a> <ul id="toc-How_were_we_testing?_3-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_did_we_find?_3" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_did_we_find?_3"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3.2</span> <span><b>What did we find?</b></span> </div> </a> <ul id="toc-What_did_we_find?_3-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Invision_prototype" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Invision_prototype"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.4</span> <span><b>Invision prototype</b></span> </div> </a> <ul id="toc-Invision_prototype-sublist" class="vector-toc-list"> <li id="toc-How_were_we_testing?_4" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#How_were_we_testing?_4"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.4.1</span> <span>How were we testing?</span> </div> </a> <ul id="toc-How_were_we_testing?_4-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_did_we_find?_4" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_did_we_find?_4"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.4.2</span> <span>What did we find?</span> </div> </a> <ul id="toc-What_did_we_find?_4-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Glossary" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Glossary"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Glossary</span> </div> </a> <ul id="toc-Glossary-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">VisualEditor on mobile/Edit cards</span></h1> <div class="mw-indicators"> <div id="mw-indicator-phabricator-project" class="mw-indicator"><div class="mw-parser-output"><div class="mw-parser-output"><style data-mw-deduplicate="TemplateStyles:r6605561">.mw-parser-output .tpl-badge{background-color:var(--background-color-progressive-subtle,#eaf3ff);color:var(--color-base,#202122);border-radius:10px;display:inline-block;font-size:90%;padding:5px 8px}</style><div class="tpl-badge"><a href="/wiki/Special:MyLanguage/Phabricator" title="Special:MyLanguage/Phabricator">Issue tracker</a>: <a href="https://phabricator.wikimedia.org/tag/visualeditor-edit_cards/" class="extiw" title="phab:tag/visualeditor-edit cards/"><b>#VisualEditor-Edit_Cards</b></a></div></div></div></div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/VisualEditor_on_mobile/Edit_cards" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:VisualEditor_on_mobile/Edit_cards" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/VisualEditor_on_mobile/Edit_cards"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/VisualEditor_on_mobile/Edit_cards"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/VisualEditor_on_mobile/Edit_cards" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/VisualEditor_on_mobile/Edit_cards" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&oldid=6880394" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=VisualEditor_on_mobile%2FEdit_cards&id=6880394&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FVisualEditor_on_mobile%2FEdit_cards"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FVisualEditor_on_mobile%2FEdit_cards"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=VisualEditor+on+mobile%2FEdit+cards"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=VisualEditor_on_mobile%2FEdit_cards&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/VisualEditor_on_mobile" title="VisualEditor on mobile">VisualEditor on mobile</a></bdi></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r6853958">.mw-parser-output .tpl-tracked{background-color:var(--background-color-interactive,#EAECF0);color:var(--color-base,#202122);border:1px solid #72777D;border-radius:2px;font-size:85%;margin-bottom:1em;padding:0.5em;text-align:center;width:12em}.mw-parser-output .tpl-tracked.float-left{float:left;clear:left;margin-right:1em}.mw-parser-output .tpl-tracked.float-right{float:right;clear:right;margin-left:1em}.mw-parser-output .tpl-tracked .status{color:black;font-weight:bold;text-transform:uppercase}.mw-parser-output .tpl-tracked .status.resolved{color:green}@media screen{html.skin-theme-clientpref-night .mw-parser-output .tpl-tracked .status:not(.resolved){color:white}}</style><div class="tpl-tracked plainlinks mw-trackedTemplate float-right">Tracked in <a href="https://phabricator.wikimedia.org/" class="extiw" title="phabricator:">Phabricator</a><br/><b><a href="https://phabricator.wikimedia.org/T221247" class="extiw" title="phabricator:T221247"><span class="trakfab-T221247">Task T221247</span></a></b><br/><span class="status"></span></div><style data-mw-deduplicate="TemplateStyles:r6651102">.mw-parser-output .infobox{box-sizing:border-box;border:2px solid var(--border-color-base,#a2a9b1);width:280px;border-collapse:collapse;border-spacing:0;background-color:white;color:#333;clear:right;float:right;margin:0 0 0.5em 0.5em}.mw-parser-output .infobox-rtl{clear:left;float:left;margin:0 0.5em 0.5em 0}.mw-parser-output .infobox th{text-align:left;padding:0.2em 0.5em;vertical-align:top}.mw-parser-output .infobox-rtl th{text-align:right}@media(max-width:719px){body.mediawiki .mw-parser-output .infobox{float:none;clear:both;width:100%;margin:0 0 .5em 0}}.mw-parser-output .infobox td{border:none;padding:0.2em 0.5em;vertical-align:top}.mw-parser-output .infobox-header{background-color:#a2a9b1;color:#FFF;text-align:left}.mw-parser-output .infobox-header a{color:#FFF}.mw-parser-output .infobox-header td,.mw-parser-output .infobox-header th{padding:0.5em 0.5em}.mw-parser-output .infobox-header img{padding:0 0.2em 0 0.5em}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox{background-color:inherit;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox{background-color:inherit;color:inherit}}</style><style data-mw-deduplicate="TemplateStyles:r6651116">.mw-parser-output .wmf-engineering-project-box{border:1px solid #eaecf0;padding:.2em;width:300px;background:#f8f9fa;color:#222}.mw-parser-output .wmf-engineering-project-box-catlink{font-size:smaller;margin:.2em;text-align:center}.mw-parser-output .wmf-engineering-project-box-title{font-size:1.2em;margin:.2em;background:#14866d;color:#fff;padding:.5em;text-align:center;font-weight:bold}.mw-parser-output .wmf-engineering-project-box-description{margin:.2em;padding:.2em;font-style:italic}.mw-parser-output .wmf-engineering-project-box-data{font-size:.9em;margin:.2em 0;width:100%}.mw-parser-output .wmf-engineering-project-box-data th{width:25%;font-weight:normal}.mw-parser-output .wmf-engineering-project-box-previous,.mw-parser-output .wmf-engineering-project-box-next{font-size:smaller;margin:.2em}.mw-parser-output .infobox-ltr .wmf-engineering-project-box-previous,.mw-parser-output .infobox-rtl .wmf-engineering-project-box-next{float:left}.mw-parser-output .infobox-ltr .wmf-engineering-project-box-next,.mw-parser-output .infobox-rtl .wmf-engineering-project-box-previous{float:right}@media screen{html.skin-theme-clientpref-night .mw-parser-output .wmf-engineering-project-box{background:transparent;color:inherit}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .wmf-engineering-project-box{background:transparent;color:inherit}}</style> <table class="infobox infobox-ltr wmf-engineering-project-box plainlinks"><tbody><tr><td> <div class="nomobile wmf-engineering-project-box-catlink"><a href="/wiki/Special:MyLanguage/Category:WMF_Projects" title="Special:MyLanguage/Category:WMF Projects">Wikimedia Foundation projects</a><span style="display:none"><a href="/wiki/Category:WMF_Projects" title="Category:WMF Projects"> </a></span></div> <div class="wmf-engineering-project-box-title">Edit cards</div> <div class="wmf-engineering-project-box-description">Give mobile contributors more space and guidance to complete their edits.</div> <table class="wmf-engineering-project-box-data"> <tbody><tr> <th scope="row">Group:</th> <td><a href="/wiki/Editing" class="mw-redirect" title="Editing">Editing</a></td> </tr> <tr> <th scope="row">Start:</th> <td>2019-04-01</td> </tr> <tr> <th scope="row">Team members:</th> <td><a href="/wiki/User:Bartosz_Dziewo%C5%84ski_(WMF)" title="User:Bartosz Dziewoński (WMF)">Bartosz Dziewoński</a>, <a href="/wiki/User:DChan_(WMF)" title="User:DChan (WMF)">David Chan</a>, <a href="/wiki/User:DLynch_(WMF)" title="User:DLynch (WMF)">David Lynch</a>, <a href="/wiki/User:Mvolz_(WMF)" title="User:Mvolz (WMF)">Marielle Volz</a>, <a href="/wiki/User:RYasmeen_(WMF)" title="User:RYasmeen (WMF)">Rummana Yasmeen</a>, <a href="/wiki/User:JKlein_(WMF)" title="User:JKlein (WMF)">Jess Klein</a>, <a href="/wiki/User:Whatamidoing_(WMF)" title="User:Whatamidoing (WMF)">Sherry Snyder</a></td> </tr> <tr> <th scope="row">Backlog:</th> <td><a href="https://phabricator.wikimedia.org/tag/visualeditor-edit_cards/" class="extiw" title="phab:tag/visualeditor-edit cards/">#VisualEditor-Edit_Cards</a></td> </tr> <tr> <th scope="row">Lead:</th> <td><a href="/wiki/User:ESanders_(WMF)" title="User:ESanders (WMF)">Ed Sanders</a></td> </tr> <tr> <th scope="row">Management:</th> <td><a href="/wiki/User:MFlorence_(WMF)" title="User:MFlorence (WMF)">Marcella Florence</a> (engineering), <a href="/wiki/User:JTanner_(WMF)" title="User:JTanner (WMF)">Jazmin Tanner</a> (program), <a href="/wiki/User:PPelberg_(WMF)" title="User:PPelberg (WMF)">Peter Pelberg</a> (product)</td> </tr> <tr class="mw-empty-elt"> </tr></tbody></table></td></tr></tbody></table><p>This page talks about the <a href="/wiki/Editing_team" title="Editing team">Editing Team's</a> work to improve the <a class="mw-selflink-fragment" href="#Glossary">context items</a> in the <a href="/wiki/Mobile_visual_editor" class="mw-redirect" title="Mobile visual editor">mobile visual editor</a>. We're calling these <b>edit cards</b>. Edit cards are the part of the editing interface that shows additional details about, and actions related to, editable elements within articles. These elements include links, citations, images, infoboxes, templates, etc. </p><p>We will focus on two elements in particular: </p> <ol><li><b>Adding and modifying links</b></li> <li><b>Adding and modifying citations</b></li></ol> <p>This initiative sits within our team's <a href="/wiki/VisualEditor_on_mobile" title="VisualEditor on mobile">larger effort</a> to simplify contributing on mobile, described in the Foundation's <a href="https://meta.wikimedia.org/wiki/Wikimedia_Foundation_Annual_Plan/2018-2019/Audiences#Outcome_3:_Mobile_Contribution" class="extiw" title="meta:Wikimedia Foundation Annual Plan/2018-2019/Audiences">2018-2019 annual plan</a>. </p><p>You might find value in <b><a class="external text" href="https://www.mediawiki.org/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=watch">watching this page</a></b> if you are interested in: </p> <ul><li>Seeing and sharing your input on new designs (see below)</li> <li>Testing prototypes (One is up now!)</li> <li>Getting real-time updates about new designs, user testing findings and measurement specifications</li></ul> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Open_questions" data-mw-thread-id="h-Open_questions"><span data-mw-comment-start="" id="h-Open_questions"></span>Open questions<span data-mw-comment-end="h-Open_questions"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=1" title="Edit section: Open questions"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><b>The latest version of Edit Cards is now live to all contributors using the mobile Visual Editor.</b> </p><p><b>We are curious to know: what has your experience been like using them to add and edit links?</b> </p><p><i>To try the latest version of Edit Cards, open the Visual Editor on your mobile device and share your feedback on the talk page:</i> </p><p><span class="plainlinks"><a class="external text" href="https://www.mediawiki.org/wiki/Talk:VisualEditor_on_mobile/Edit_cards"><span class="mw-ui-button mw-ui-progressive" role="button">📢 Share your feedback</span></a></span> </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Updates" data-mw-thread-id="h-Updates"><span data-mw-comment-start="" id="h-Updates"></span>Updates<span data-mw-comment-end="h-Updates"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=2" title="Edit section: Updates"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="26_November_2019_-_measuring_impact" data-mw-thread-id="h-26_November_2019_-_measuring_impact-Updates"><span data-mw-comment-start="" id="h-26_November_2019_-_measuring_impact-Updates"></span>26 November 2019 - measuring impact<span data-mw-comment-end="h-26_November_2019_-_measuring_impact-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=3" title="Edit section: 26 November 2019 - measuring impact"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>As of today, the latest iteration of Edit Cards have been available to all contributors using the mobile visual editor for approximately 11 weeks. </p><p>This means, we now have enough data to do an <a href="https://en.wikipedia.org/wiki/Change_impact_analysis" class="extiw" title="en:Change impact analysis">impact analysis</a> to determine what – if any – change the deployment of Edit Cards have had on the likelihood contributors will save the edits they start (read: edit completion rate). </p><p>We anticipate having results to share in early January 2020. </p> <div class="mw-heading mw-heading3"><h3 id="2_September_2019_-_v3_deployment_timing" data-mw-thread-id="h-2_September_2019_-_v3_deployment_timing-Updates"><span data-mw-comment-start="" id="h-2_September_2019_-_v3_deployment_timing-Updates"></span>2 September 2019 - v3 deployment timing<span data-mw-comment-end="h-2_September_2019_-_v3_deployment_timing-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=4" title="Edit section: 2 September 2019 - v3 deployment timing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:Edit_Cards_comparison_v2_and_v3.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Edit_Cards_comparison_v2_and_v3.png/276px-Edit_Cards_comparison_v2_and_v3.png" decoding="async" width="276" height="219" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Edit_Cards_comparison_v2_and_v3.png/414px-Edit_Cards_comparison_v2_and_v3.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Edit_Cards_comparison_v2_and_v3.png/552px-Edit_Cards_comparison_v2_and_v3.png 2x" data-file-width="956" data-file-height="758"/></a><figcaption><b>Comparison:</b> Edit Cards v2 --> Edit Cards v3</figcaption></figure> <p>Tomorrow, 3 September, all contributors using the mobile Visual Editor will be able to use Edit Cards v3. </p><p>The decision to release Edit Cards v3 to all wikis is a response to the positive feedback the team received during the latest rounds of user testing. For more information about the results of these tests, please see this section below: <a class="mw-selflink-fragment" href="#v3_prototype">User testing: v3 prototype</a>. </p><p>As quick reminder, Edit Cards v3 [primarily] includes the following changes: </p> <ul><li>Moving from there being two edit pencils on the Edit Card to one</li> <li>Combining fields for editing a link's display text and target into one screen</li> <li>Changing the name of the field for editing a link's display text from "Label" to "Text"</li></ul> <div class="mw-heading mw-heading3"><h3 id="20_August_2019_-_v3_prototype_ready" data-mw-thread-id="h-20_August_2019_-_v3_prototype_ready-Updates"><span data-mw-comment-start="" id="h-20_August_2019_-_v3_prototype_ready-Updates"></span>20 August 2019 - v3 prototype ready<span data-mw-comment-end="h-20_August_2019_-_v3_prototype_ready-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=5" title="Edit section: 20 August 2019 - v3 prototype ready"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There is a new version of Edit Cards ready for testing: <a rel="nofollow" class="external text" href="http://visualeditor-prototype.wmflabs.org/wiki/Pride_and_Prejudice_5">Edit Cards v3</a>. </p><p>This latest iteration includes the different approach to editing an existing link's label we mentioned in the <a class="mw-selflink-fragment" href="#26_July_2019_–_v2_testing_(usertesting.com)">26 July update</a> with a slight modification: rather than having to use different dialogs to edit a link's label and target, Edit Cards v3 combines these two workflows into one dialog. </p><p>While we think this design will be especially helpful for checking whether a link and its target are in sync, we wonder how contributors with smaller devices will find the experience. </p><p>We would value hearing your input. Tap the button below to try Edit Cards v3: </p><p><b><span class="plainlinks"><a class="external text" href="https://www.mediawiki.org/wiki/Topic:V5rg0cqmikpubmjj"><span class="mw-ui-button mw-ui-progressive" role="button">📲 Try Edit Cards v3</span></a></span></b> </p> <div class="mw-heading mw-heading3"><h3 id="2_August_2019_–_v2_live_on_all_wikis" data-mw-thread-id="h-2_August_2019_–_v2_live_on_all_wikis-Updates"><span id="2_August_2019_.E2.80.93_v2_live_on_all_wikis"></span><span data-mw-comment-start="" id="h-2_August_2019_–_v2_live_on_all_wikis-Updates"></span>2 August 2019 – v2 live on all wikis<span data-mw-comment-end="h-2_August_2019_–_v2_live_on_all_wikis-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=6" title="Edit section: 2 August 2019 – v2 live on all wikis"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Edit_Cards_v2_in_production.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Edit_Cards_v2_in_production.png/220px-Edit_Cards_v2_in_production.png" decoding="async" width="220" height="382" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Edit_Cards_v2_in_production.png/330px-Edit_Cards_v2_in_production.png 1.5x, //upload.wikimedia.org/wikipedia/commons/d/dd/Edit_Cards_v2_in_production.png 2x" data-file-width="436" data-file-height="758"/></a><figcaption><b>Edit Cards v2:</b> live on all wikis.</figcaption></figure> <p>Good news: the <a href="/wiki/MediaWiki_1.34/wmf.16" title="MediaWiki 1.34/wmf.16">deployment train</a> is no longer blocked. This means, as of today, 2 August 2019, <a href="https://commons.wikimedia.org/wiki/File:Edit_Cards_v2_in_production.png" class="extiw" title="c:File:Edit Cards v2 in production.png">Edit Cards v2</a> are live for all contributors using the mobile visual editor to try! </p> <div class="mw-heading mw-heading3"><h3 id="31_July_2019_–_v2_deployment_to_all_wikis" data-mw-thread-id="h-31_July_2019_–_v2_deployment_to_all_wikis-Updates"><span id="31_July_2019_.E2.80.93_v2_deployment_to_all_wikis"></span><span data-mw-comment-start="" id="h-31_July_2019_–_v2_deployment_to_all_wikis-Updates"></span>31 July 2019 – v2 deployment to all wikis<span data-mw-comment-end="h-31_July_2019_–_v2_deployment_to_all_wikis-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=7" title="Edit section: 31 July 2019 – v2 deployment to all wikis"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:Edit_Cards_Link_Label_Form.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Edit_Cards_Link_Label_Form.png/275px-Edit_Cards_Link_Label_Form.png" decoding="async" width="275" height="230" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Edit_Cards_Link_Label_Form.png/413px-Edit_Cards_Link_Label_Form.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Edit_Cards_Link_Label_Form.png/550px-Edit_Cards_Link_Label_Form.png 2x" data-file-width="1634" data-file-height="1366"/></a><figcaption>A proposed design for a new approach to editing the label of an existing link.</figcaption></figure> <p>The deployment of Edit Cards v2 has been delayed due to an unrelated technical issue. We will post an update to this page when this issue has been resolved. You can read more about this issue here: <a class="external free" href="https://lists.wikimedia.org/pipermail/wikitech-ambassadors/2019-July/002190.html">https://lists.wikimedia.org/pipermail/wikitech-ambassadors/2019-July/002190.html</a> </p><p><s>Yesterday, 30 July, Edit Cards v2 were deployed. This means, that by the end of the day (PST) on Thursday, 1 August, all contributors using the mobile visual editor will see and be able to use Edit Cards v2.</s> </p><p><i>Next up: prototyping a new way to edit the label of an existing link. This is a response to the findings that came out of the v2 usertesting.com testing we ran: <a class="mw-selflink-fragment" href="#12-19_July:_v2_prototype_(usertesting.com)">12-19 July: v2 prototype (usertesting.com)</a></i> </p> <div class="mw-heading mw-heading3"><h3 id="26_July_2019_–_v2_testing_(usertesting.com)" data-mw-thread-id="h-26_July_2019_–_v2_testing_(usertesting.com)-Updates"><span id="26_July_2019_.E2.80.93_v2_testing_.28usertesting.com.29"></span><span data-mw-comment-start="" id="h-26_July_2019_–_v2_testing_(usertesting.com)-Updates"></span>26 July 2019 – v2 testing (usertesting.com)<span data-mw-comment-end="h-26_July_2019_–_v2_testing_(usertesting.com)-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=8" title="Edit section: 26 July 2019 – v2 testing (usertesting.com)"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>While our on-wiki Edit Card v2 testing is <a href="/wiki/Topic:V394zwrigth8ii7c" title="Topic:V394zwrigth8ii7c">ongoing</a>, we finished going through the results of our latest round of usertesting.com testing. You can read a summary of our findings and the changes we are making in response below: <a class="mw-selflink-fragment" href="#12-19_July:_v2_prototype_(usertesting.com)">12-19 July: v2 prototype (usertesting.com)</a>. </p><p>❗️As a reminder, we are planning to deploy Edit Cards v2 to <i>all contributors</i> using the mobile visual editor next week. </p> <div class="mw-heading mw-heading3"><h3 id="19_July_2019_–_v2_deployment_timing" data-mw-thread-id="h-19_July_2019_–_v2_deployment_timing-Updates"><span id="19_July_2019_.E2.80.93_v2_deployment_timing"></span><span data-mw-comment-start="" id="h-19_July_2019_–_v2_deployment_timing-Updates"></span>19 July 2019 – v2 deployment timing<span data-mw-comment-end="h-19_July_2019_–_v2_deployment_timing-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=9" title="Edit section: 19 July 2019 – v2 deployment timing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The Edit Card v2 usability tests we have been running over the past two weeks have been positive. As a result, we anticipate Edit Cards v2 will be available to <i>all contributors</i> using the mobile visual editor the week of <b>July 29th</b>. </p><p>On the topic of testing, this week we finished running 5 tests on usertesting.com. These tests were designed to determine how usable Edit Cards v2 are and whether any aspect of them behaved in ways test participants did not expect. Next week, we will post the results. </p><p><s>❗️Please note: you have not missed your opportunity to test Edit Cards v2.0! There is a test ongoing. Please tap here to participate: <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Topic:V394zwrigth8ii7c&topic_showPostId=v394zwrigxfaqm5k#flow-post-v394zwrigxfaqm5k">📲 Edit Cards v2.0</a>.</s> </p><p><i>Edit 13-September: <a href="/wiki/File:Edit_Cards_v2_in_production.png" title="File:Edit Cards v2 in production.png">Edit Cards v2</a> was released to all wikis and is no longer available for testing.</i> </p> <div class="mw-heading mw-heading3"><h3 id="15_July_2019_–_v2_prototype_ready" data-mw-thread-id="h-15_July_2019_–_v2_prototype_ready-Updates"><span id="15_July_2019_.E2.80.93_v2_prototype_ready"></span><span data-mw-comment-start="" id="h-15_July_2019_–_v2_prototype_ready-Updates"></span>15 July 2019 – v2 prototype ready<span data-mw-comment-end="h-15_July_2019_–_v2_prototype_ready-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=10" title="Edit section: 15 July 2019 – v2 prototype ready"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:Edit_Cards_comparison-_v1_to_v2.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Edit_Cards_comparison-_v1_to_v2.png/356px-Edit_Cards_comparison-_v1_to_v2.png" decoding="async" width="356" height="272" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Edit_Cards_comparison-_v1_to_v2.png/534px-Edit_Cards_comparison-_v1_to_v2.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Edit_Cards_comparison-_v1_to_v2.png/712px-Edit_Cards_comparison-_v1_to_v2.png 2x" data-file-width="876" data-file-height="669"/></a><figcaption><b>Comparison:</b> Edit Cards v1 --> Edit Cards v2</figcaption></figure> <p>~3 weeks ago, we shared the first iteration of Edit Cards: <a class="mw-selflink-fragment" href="#/media/File:Mobile_context_items_v1.0_-_edit_cards_comparison.png">Edit Cards v1.0</a>. A couple of things have happened since then: </p> <ol><li><b>Edit Cards v2:</b> we have a <b>new</b> <b>iteration</b> of Edit Cards <b>ready f</b>or you to try: <a class="external text" href="https://www.mediawiki.org/w/index.php?title=Topic:V394zwrigth8ii7c&topic_showPostId=v394zwrigxfaqm5k#flow-post-v394zwrigxfaqm5k">📲 Edit Cards v2.0</a>. <br/></li> <li><b>Edit Cards v1 feedback:</b> we have been talking with contributors, on and off-wiki, about their experiences testing Edit Cards v1.0. This feedback is summarized in the "User Testing" section below: <a class="mw-selflink-fragment" href="#User_testing">Edit Cards v1.0 feedback</a>.</li></ol> <div class="mw-heading mw-heading4"><h4 id="Edit_Cards_v2" data-mw-thread-id="h-Edit_Cards_v2-15_July_2019_–_v2_prototype_ready"><span data-mw-comment-start="" id="h-Edit_Cards_v2-15_July_2019_–_v2_prototype_ready"></span>Edit Cards v2<span data-mw-comment-end="h-Edit_Cards_v2-15_July_2019_–_v2_prototype_ready"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=11" title="Edit section: Edit Cards v2"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In Edit Cards v2, you are likely to notice an updated look and feel and an additional edit button. This means there are now separate buttons for editing the link target and the link label. See a comparison of Edit Cards v1 and v2: <a href="/wiki/File:Edit_Cards_comparison-_v1_to_v2.png" title="File:Edit Cards comparison- v1 to v2.png">Compare: Edit Cards v1 and v2</a> </p><p><b>Testing Edit Cards v2</b> </p><p>We are curious to hear what your experience using the prototype to add and edit links is like. <s>To try the Edit Cards v2.0 prototype, please tap here on your mobile device:</s> </p><p><i>Edit 13-September: <a href="/wiki/File:Edit_Cards_v2_in_production.png" title="File:Edit Cards v2 in production.png">Edit Cards v2</a> was released to all wikis and is no longer available for testing.</i> </p> <div class="mw-heading mw-heading3"><h3 id="14_June_2019_–_v1_prototype_ready" data-mw-thread-id="h-14_June_2019_–_v1_prototype_ready-Updates"><span id="14_June_2019_.E2.80.93_v1_prototype_ready"></span><span data-mw-comment-start="" id="h-14_June_2019_–_v1_prototype_ready-Updates"></span>14 June 2019 – v1 prototype ready<span data-mw-comment-end="h-14_June_2019_–_v1_prototype_ready-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=12" title="Edit section: 14 June 2019 – v1 prototype ready"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:Mobile_context_items_v1.0_-_edit_cards_comparison.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Mobile_context_items_v1.0_-_edit_cards_comparison.png/535px-Mobile_context_items_v1.0_-_edit_cards_comparison.png" decoding="async" width="535" height="415" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/f/ff/Mobile_context_items_v1.0_-_edit_cards_comparison.png 1.5x" data-file-width="766" data-file-height="594"/></a><figcaption><b>Comparison:</b> <i>mobile Edit Cards v1.0 compare to mobile context items</i> </figcaption></figure> <p>We have a prototype of version 1.0 of the new Edit Cards ready. In this first iteration, you will notice the mobile context items that used to appear beneath the editing toolbar are now bigger and shown at the bottom of the screen, where the keyboard used to be displayed. This <a href="/wiki/File:Mobile_context_items_v1.0_-_edit_cards_comparison.png" title="File:Mobile context items v1.0 - edit cards comparison.png">screenshot</a> – "<b>Comparison:</b> <i>mobile Edit Cards v1.0 compare to mobile context items</i>" <i>–</i> shows these changes. </p> <div class="mw-heading mw-heading4"><h4 id="Using_the_prototype" data-mw-thread-id="h-Using_the_prototype-14_June_2019_–_v1_prototype_ready"><span data-mw-comment-start="" id="h-Using_the_prototype-14_June_2019_–_v1_prototype_ready"></span>Using the prototype<span data-mw-comment-end="h-Using_the_prototype-14_June_2019_–_v1_prototype_ready"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=13" title="Edit section: Using the prototype"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><s>📲<i>Prototype:</i> To try the Edit Cards v1.0 prototype, please tap here on your mobile device:</s> </p><p><s>Prototype: Edit Cards v1.0</s> </p><p><i>*Edit 13-September: <a href="/wiki/File:Mobile_context_items_v1.0_-_edit_cards_comparison.png" title="File:Mobile context items v1.0 - edit cards comparison.png">Edit Cards v1</a> was released and is no longer available for testing.</i> </p><p><b>Feedback</b> </p><p>We are curious to hear what your experience using the prototype to edit links is like. We have listed some specific tasks to try on the <a href="/wiki/Topic:V1mw6555sgyvt74l" title="Topic:V1mw6555sgyvt74l">talk page</a>. </p><p>As you test the prototype, please keep in mind some links might not work and there may be other quirks. With this said, if and when you encounter something that is not how you expect it, please let us know. </p><p><b>Next steps</b> </p><p>We will be releasing v1.0 of the Edit Cards on Bengali, Hebrew and Persian and wikis. Contributors to these wikis will begin to see the Edit Cards live in the mobile visual editor on late <b>Thursday,</b> <b>20 June 2019</b>. </p> <div class="mw-heading mw-heading3"><h3 id="31_May_2019_–_Tappable_wireframes" data-mw-thread-id="h-31_May_2019_–_Tappable_wireframes-Updates"><span id="31_May_2019_.E2.80.93_Tappable_wireframes"></span><span data-mw-comment-start="" id="h-31_May_2019_–_Tappable_wireframes-Updates"></span>31 May 2019 – Tappable wireframes<span data-mw-comment-end="h-31_May_2019_–_Tappable_wireframes-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=14" title="Edit section: 31 May 2019 – Tappable wireframes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A couple things... </p> <ul><li><i>Prototype</i>: we have a <a class="external text" href="https://m.mediawiki.org/wiki/Visualeditor_on_mobile/Wikimedia_Hackathon_2019">tappable wireframes</a> ready for each of the editing links workflow...we would valuing hearing what you think. More details: <a class="mw-selflink-fragment" href="#Open_questions">Open questions</a>.</li> <li><i>Prague Hackathon</i>: A couple members of our team went to the hackathon. There, we were able run 2 usability tests for the latest iteration of the Edit card prototype. Our findings from those tests are listed in the <a class="mw-selflink-fragment" href="#User_testing">User testing</a> section below.</li></ul> <div class="mw-heading mw-heading3"><h3 id="8_May_2019_–_Initial_wireframes" data-mw-thread-id="h-8_May_2019_–_Initial_wireframes-Updates"><span id="8_May_2019_.E2.80.93_Initial_wireframes"></span><span data-mw-comment-start="" id="h-8_May_2019_–_Initial_wireframes-Updates"></span>8 May 2019 – Initial wireframes<span data-mw-comment-end="h-8_May_2019_–_Initial_wireframes-Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=15" title="Edit section: 8 May 2019 – Initial wireframes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The first set of wireframes for the new adding and modifying links edit cards are ready and we are keen to hear what you think on the <a href="/wiki/Talk:Edit_cards" title="Talk:Edit cards">talk page</a>. You can see a mockup of the "links edit card" below and the planned updates to the rest of the adding and modifying links workflow in this <a rel="nofollow" class="external text" href="https://wikimedia.invisionapp.com/freehand/document/s1duRw6io">Invision Freehand</a>. To view the "Freehand" as a guest, follow these steps: </p> <ol><li><i>Tap this link</i>: <a rel="nofollow" class="external free" href="https://wikimedia.invisionapp.com/freehand/document/s1duRw6io">https://wikimedia.invisionapp.com/freehand/document/s1duRw6io</a></li> <li><i>Tap "Continue as Guest -->" in the top-right corner of the page</i></li> <li><i>Enter an email address</i></li> <li><i>Tap "Continue"</i><figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Mobile_edit_cards_mockup.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Mobile_edit_cards_mockup.png/220px-Mobile_edit_cards_mockup.png" decoding="async" width="220" height="475" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Mobile_edit_cards_mockup.png/330px-Mobile_edit_cards_mockup.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Mobile_edit_cards_mockup.png/440px-Mobile_edit_cards_mockup.png 2x" data-file-width="498" data-file-height="1076"/></a><figcaption><i>An early design for the edit cards. This particular mockup shows how the "links" edit card could end up looking.</i></figcaption></figure></li></ol> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Background" data-mw-thread-id="h-Background"><span data-mw-comment-start="" id="h-Background"></span>Background<span data-mw-comment-end="h-Background"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=16" title="Edit section: Background"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Link_context_item_(mobile_VE).gif" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/7/7f/Link_context_item_%28mobile_VE%29.gif" decoding="async" width="202" height="360" class="mw-file-element" data-file-width="202" data-file-height="360"/></a><figcaption><i>Confusion modifying a link using mobile VE</i></figcaption></figure><p>This year, we are committed to helping contributors be more successful contributing on mobile, using the mobile visual editor. Core to their success, as the <a href="/wiki/Wikimedia_Research/Design_Research" title="Wikimedia Research/Design Research">Design Research team's</a> <a href="/wiki/Mobile_contribution_research" title="Mobile contribution research">Mobile Contribution Research</a> has shown, is: </p><ol><li>Contributors being able to <b>easily find the editing tools</b> they need to complete their edits</li> <li>Editing tasks being <b>simple enough to complete</b> on-the-go</li></ol> <p>However, the <a href="/wiki/Mobile_contribution_research" title="Mobile contribution research">Mobile contribution research report</a> and our team's user testing suggest, how and where mobile context items are currently shown within the interface can make it difficult for to contributors to discover what properties of an element are editable and what steps they need to take to edit those properties. </p><p> In exploring this new "edit card" design pattern we are striving to make the editable elements embedded within articles (links, citations, images, infoboxes, templates, etc.) more visible and the steps associated with editing them more clear and straightforward. We think doing so will lead to contributors have an easier time completing the edits they open the mobile VisualEditor intending to make.</p><figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:MobileVE-link-context-item.jpg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/MobileVE-link-context-item.jpg/220px-MobileVE-link-context-item.jpg" decoding="async" width="220" height="476" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/MobileVE-link-context-item.jpg/330px-MobileVE-link-context-item.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d9/MobileVE-link-context-item.jpg/440px-MobileVE-link-context-item.jpg 2x" data-file-width="1125" data-file-height="2436"/></a><figcaption><i>Link context item in the mobile VisualEditor (highlighted in yellow)</i></figcaption></figure> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="User_testing" data-mw-thread-id="h-User_testing"><span data-mw-comment-start="" id="h-User_testing"></span>User testing<span data-mw-comment-end="h-User_testing"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=17" title="Edit section: User testing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="v3_prototype" data-mw-thread-id="h-v3_prototype-User_testing"><span data-mw-comment-start="" id="h-v3_prototype-User_testing"></span>v3 prototype<span data-mw-comment-end="h-v3_prototype-User_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=18" title="Edit section: v3 prototype"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>To understand what usability improvements might need to be made to Edit Cards v3, we ran two different user tests: </p> <ol><li>We first ran a remote test on <a rel="nofollow" class="external text" href="https://usertesting.com"><b>usertesting.com</b></a> with five participants.</li> <li>We then ran an in-person test at <b>Wikimania</b> with an additional nine participants.</li></ol> <div class="mw-heading mw-heading4"><h4 id="How_were_we_testing?" data-mw-thread-id="h-How_were_we_testing?-v3_prototype"><span id="How_were_we_testing.3F"></span><span data-mw-comment-start="" id="h-How_were_we_testing?-v3_prototype"></span>How were we testing?<span data-mw-comment-end="h-How_were_we_testing?-v3_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=19" title="Edit section: How were we testing?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In both tests, participants were given a set of tasks related to adding and editing links using the Edit Card v3 prototype while having their actions and mobile screens recorded. </p> <div class="mw-heading mw-heading4"><h4 id="What_did_we_find?" data-mw-thread-id="h-What_did_we_find?-v3_prototype"><span id="What_did_we_find.3F"></span><span data-mw-comment-start="" id="h-What_did_we_find?-v3_prototype"></span><b>What did we find?</b><span data-mw-comment-end="h-What_did_we_find?-v3_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=20" title="Edit section: What did we find?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Of the 5 workflows we were testing, test participants <b>had success</b> completing the following tasks: </p><p>✅Adding a new wikilink </p><p>✅Editing an existing link's target </p><p>✅Editing an existing link's display text </p><p>✅Removing a link </p><p>While they <b>had difficulty</b> completing the following tasks: </p><p>❌Adding an external link </p><p><b>Next steps</b> </p><p>Testers in our usertesting.com and internal (WMF staff) tests founds the <a class="external text" href="https://commons.wikimedia.org/w/index.php?search=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FFile%3AEdit_Cards_v2_in_production.png&title=Special%3ASearch&go=Go&ns0=1&ns6=1&ns12=1&ns14=1&ns100=1&ns106=1">two button treatment</a> of the link Edit Card (one button for editing an existing link's "label" and another button for editing its "target") to be confusing. </p><p>In response, we created and tested a prototype at Wikimania that <a href="https://commons.wikimedia.org/wiki/File:Edit-Cards-v3-Consolidated-Link.png" class="extiw" title="c:File:Edit-Cards-v3-Consolidated-Link.png">combined the two edit buttons into one</a>. All testers found having one edit pencil to be more intuitive. All testers also found that combining the workflows for editing a link's target and display text into one screen to make sense. Although, a few contributors mentioned that the word "Label" was not a clear way of communicating the purpose of the field for editing how a link is displayed within an article. As a result, the title of this field has been changed to read "Text." </p><p>Outside of this feedback, we saw that some contributors were momentarily confused by how the information and edit actions on the link Edit Card were displayed. The visual design of the edit card is something we intend to address in a future iteration. You can see a few early concepts in this Invision mockup: <a rel="nofollow" class="external text" href="https://wikimedia.invisionapp.com/freehand/document/s1duRw6io">Edit Card link layout</a>. </p> <div class="mw-heading mw-heading3"><h3 id="v2_prototype" data-mw-thread-id="h-v2_prototype-User_testing"><span data-mw-comment-start="" id="h-v2_prototype-User_testing"></span>v2 prototype<span data-mw-comment-end="h-v2_prototype-User_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=21" title="Edit section: v2 prototype"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>From 12-19 July, we ran a test on <a rel="nofollow" class="external text" href="https://usertesting.com">usertesting.com</a> to understand how usable and intuitive Edit Cards v2 are. </p> <div class="mw-heading mw-heading4"><h4 id="How_were_we_testing?_2" data-mw-thread-id="h-How_were_we_testing?_2-v2_prototype"><span id="How_were_we_testing.3F_2"></span><span data-mw-comment-start="" id="h-How_were_we_testing?_2-v2_prototype"></span>How were we testing?<span data-mw-comment-end="h-How_were_we_testing?_2-v2_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=22" title="Edit section: How were we testing?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Test participants were given 20 minutes to complete a set of tasks related to adding and editing links using the Edit Card v2 prototype. After completing these tasks, participants were given four written questions to answer about their experience. </p> <div class="mw-heading mw-heading4"><h4 id="What_did_we_find?_2" data-mw-thread-id="h-What_did_we_find?_2-v2_prototype"><span id="What_did_we_find.3F_2"></span><span data-mw-comment-start="" id="h-What_did_we_find?_2-v2_prototype"></span><b>What did we find?</b><span data-mw-comment-end="h-What_did_we_find?_2-v2_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=23" title="Edit section: What did we find?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Of the 5 workflows we were testing, test participants <b>had success</b> completing the following tasks: </p><p>✅Adding a new wikilink </p><p>✅Linking an existing wikilink to a different article </p><p>✅Removing a link </p><p>While they <b>had difficulty</b> completing the following tasks: </p><p>❌Editing an existing link's label </p><p>❌Adding an external link </p><p><b>Next steps</b> </p><p>To improve the workflows test participants found difficult, we are implementing the following changes: </p> <ul><li><i>Provide instructions for how to properly format external links: <a href="https://phabricator.wikimedia.org/T227899" class="extiw" title="phab:T227899">phab:T227899</a></i> <ul><li>Several test participants did not expect to have to include "https://" in the URL of the external link they were attempting to add. In response to this observation, we added a message to the "External Site" tab to make this requirement obvious (no instructions were given before).</li></ul></li> <li><i>Provide a clearer indication about what to do after tapping the link label edit pencil ✎: <a href="https://phabricator.wikimedia.org/T228220" class="extiw" title="phab:T228220">phab:T228220</a></i> <ul><li>Several test participants were surprised to see the keyboard appear after tapping the edit pencil to edit a link's label. To make the next step in the workflow – using the keyboard to change the link label – more apparent we added a new visual cue to the link label within the article.</li></ul></li></ul> <p>In addition to the changes above, we are considering a different, form-based approach to editing link labels. Although, this is a change that would not go into effect until after v2 is released. This mockup will give you a sense for what we have in mind: <a href="https://phabricator.wikimedia.org/T225725#5287650" class="extiw" title="phab:T225725">phab:T225725</a> </p> <div class="mw-heading mw-heading3"><h3 id="v1_prototype" data-mw-thread-id="h-v1_prototype-User_testing"><span data-mw-comment-start="" id="h-v1_prototype-User_testing"></span>v1 prototype<span data-mw-comment-end="h-v1_prototype-User_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=24" title="Edit section: v1 prototype"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Over the past couple of weeks, we have been inviting feedback from contributors, on and off-wiki, about the Edit Cards v1.0 functional prototype. </p> <div class="mw-heading mw-heading4"><h4 id="How_were_we_testing?_3" data-mw-thread-id="h-How_were_we_testing?_3-v1_prototype"><span id="How_were_we_testing.3F_3"></span><span data-mw-comment-start="" id="h-How_were_we_testing?_3-v1_prototype"></span>How were we testing?<span data-mw-comment-end="h-How_were_we_testing?_3-v1_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=25" title="Edit section: How were we testing?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>For this round of testing, we asked test participants to <i>independently</i> complete five adding and editing links workflows and share their experiences with each of them. You can read the full test here: <a href="/wiki/Topic:V1mw6555sgyvt74l" title="Topic:V1mw6555sgyvt74l">Feedback: Edit cards v1.0</a>. </p> <div class="mw-heading mw-heading4"><h4 id="What_did_we_find?_3" data-mw-thread-id="h-What_did_we_find?_3-v1_prototype"><span id="What_did_we_find.3F_3"></span><span data-mw-comment-start="" id="h-What_did_we_find?_3-v1_prototype"></span><b>What did we find?</b><span data-mw-comment-end="h-What_did_we_find?_3-v1_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=26" title="Edit section: What did we find?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>While test participants found individual parts of the adding and editing links workflows to be confusing, the majority of participants still managed to successfully complete <i>all</i> of the five tasks they were testing. </p><p>You can read more feedback about each workflow below. And if you are curious to see the context where some of this feedback was mentioned. These are two good threads to read: <a href="/wiki/Topic:V1mw6555sgyvt74l" title="Topic:V1mw6555sgyvt74l">Thread A</a> & <a href="/wiki/Topic:V1srdj5zo5i1bmd0" title="Topic:V1srdj5zo5i1bmd0">Thread B</a>. </p><p><b>Detailed results</b> </p> <ol><li><i>Miscellaneous</i> <ul><li>Two contributors found the fullscreen link search overlay to be disruptive.</li></ul></li> <li><i>Adding a new wikilink</i> <ul><li>One contributor thought it was unclear what to do after landing on the link search results page.</li> <li>One contributor was surprised to be presented with the Edit Card immediately after tapping a wikilink from within the link dialog search results and thought another action would be needed to finish adding a new link.</li></ul></li> <li><i>Editing the label of an existing link</i> <ul><li>Two contributors found it confusing that tapping twice on an existing link showed they keyboard *not* the Edit Card.</li> <li>One contributor was not sure how to get the Edit Card to show after tapping twice on existing link.</li></ul></li> <li><i>Changing the target of an existing link to another Wikipedia article</i></li> <li><i>Change the target of an existing link to an external link</i> <ul><li>One contributor thought new contributors could be confused by there being two tabs – internal and external – within the link dialog.</li> <li>One contributor found the "?" icon that appears next to search results for articles that do not exist yet (red links).</li></ul></li> <li><i>Removing an existing link</i></li></ol> <div class="mw-heading mw-heading3"><h3 id="Invision_prototype" data-mw-thread-id="h-Invision_prototype-User_testing"><span data-mw-comment-start="" id="h-Invision_prototype-User_testing"></span><b>Invision prototype</b><span data-mw-comment-end="h-Invision_prototype-User_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=27" title="Edit section: Invision prototype"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>During the Prague Hackathon, we conducted two usability tests of the <a href="/wiki/Visualeditor_on_mobile/Wikimedia_Hackathon_2019" title="Visualeditor on mobile/Wikimedia Hackathon 2019">adding and editing links tappable wireframes</a> with experienced desktop contributors. </p> <div class="mw-heading mw-heading4"><h4 id="How_were_we_testing?_4" data-mw-thread-id="h-How_were_we_testing?_4-Invision_prototype"><span id="How_were_we_testing.3F_4"></span><span data-mw-comment-start="" id="h-How_were_we_testing?_4-Invision_prototype"></span>How were we testing?<span data-mw-comment-end="h-How_were_we_testing?_4-Invision_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=28" title="Edit section: How were we testing?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In each of the two tests we ran, we asked contributors to tap through the five adding and editing links workflows (below), while doing their best to say aloud what they were thinking as they were using them. </p> <div class="mw-heading mw-heading4"><h4 id="What_did_we_find?_4" data-mw-thread-id="h-What_did_we_find?_4-Invision_prototype"><span id="What_did_we_find.3F_4"></span><span data-mw-comment-start="" id="h-What_did_we_find?_4-Invision_prototype"></span>What did we find?<span data-mw-comment-end="h-What_did_we_find?_4-Invision_prototype"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=29" title="Edit section: What did we find?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ol><li><i>Miscellaneous</i> <ul><li>One tester expressed a reluctance to tap links out of a concern they would be taken to a different page and lose their focus</li></ul></li> <li><i>Adding a new wikilink</i> <ul><li>Both testers had no problems adding new links.</li></ul></li> <li><i>Editing the label of an existing link</i> <ul><li>One of the testers expected to be able to edit the label text immediately upon tapping the link within the article.</li></ul></li> <li><i>Changing the target of an existing link to another Wikipedia article</i> <ul><li>Both testers were able to change an existing link's target without issues.</li></ul></li> <li><i>Change the target of an existing link to an external link</i> <ul><li>One tester expected to be able to tap the "Done" button on the soft keyboard to finish inserting an external link.</li></ul></li> <li><i>Removing an existing link</i> <ul><li>One contributor had difficulty finding the "unlink" button, but we think this is likely a result of contributors needing to scroll on the prototype to bring the "unlink" text into view. In the release version, all three edit actions will be visible without contributors needing to scroll the Edit card.</li></ul></li></ol> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Glossary" data-mw-thread-id="h-Glossary"><span data-mw-comment-start="" id="h-Glossary"></span>Glossary<span data-mw-comment-end="h-Glossary"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=VisualEditor_on_mobile/Edit_cards&action=edit&section=30" title="Edit section: Glossary"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><b>Context items:</b> the parts of the editing interface that shows details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc</li> <li><b>Edit cards:</b> what we are calling the new design of the "mobile context items". These "edit cards" will show details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.. These "edit cards" will show details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.</li> <li><b>Mobile context items:</b> the parts of the <i>mobile</i> editing interface that shows details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.</li></ul> <ul><li><b>Toolbar</b>: a bar containing buttons that activate particular editing tools</li></ul> <p><br/> <i>*For a full list of VisualEditor terminology see the <a href="/wiki/VisualEditor/Developer_glossary" title="VisualEditor/Developer glossary">VisualEditor/Developer glossary</a>.</i> </p>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1&useformat=desktop" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=VisualEditor_on_mobile/Edit_cards&oldid=6880394">https://www.mediawiki.org/w/index.php?title=VisualEditor_on_mobile/Edit_cards&oldid=6880394</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:WMF_Projects" title="Category:WMF Projects">WMF Projects</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:WMF_Projects_2019q2" title="Category:WMF Projects 2019q2">WMF Projects 2019q2</a></li><li><a href="/wiki/Category:WMF_Projects_2019q3" title="Category:WMF Projects 2019q3">WMF Projects 2019q3</a></li><li><a href="/wiki/Category:WMF_Projects_2019q4" title="Category:WMF Projects 2019q4">WMF Projects 2019q4</a></li><li><a href="/wiki/Category:WMF_Projects_2020q1" title="Category:WMF Projects 2020q1">WMF Projects 2020q1</a></li><li><a href="/wiki/Category:WMF_Projects_2020q2" title="Category:WMF Projects 2020q2">WMF Projects 2020q2</a></li><li><a href="/wiki/Category:WMF_Projects_2020q3" title="Category:WMF Projects 2020q3">WMF Projects 2020q3</a></li><li><a href="/wiki/Category:WMF_Projects_2020q4" title="Category:WMF Projects 2020q4">WMF Projects 2020q4</a></li><li><a href="/wiki/Category:WMF_Projects_2021q1" title="Category:WMF Projects 2021q1">WMF Projects 2021q1</a></li><li><a href="/wiki/Category:WMF_Projects_2021q2" title="Category:WMF Projects 2021q2">WMF Projects 2021q2</a></li><li><a href="/wiki/Category:WMF_Projects_2021q3" title="Category:WMF Projects 2021q3">WMF Projects 2021q3</a></li><li><a href="/wiki/Category:WMF_Projects_2021q4" title="Category:WMF Projects 2021q4">WMF Projects 2021q4</a></li><li><a href="/wiki/Category:WMF_Projects_2022q1" title="Category:WMF Projects 2022q1">WMF Projects 2022q1</a></li><li><a href="/wiki/Category:WMF_Projects_2022q2" title="Category:WMF Projects 2022q2">WMF Projects 2022q2</a></li><li><a href="/wiki/Category:WMF_Projects_2022q3" title="Category:WMF Projects 2022q3">WMF Projects 2022q3</a></li><li><a href="/wiki/Category:WMF_Projects_2022q4" title="Category:WMF Projects 2022q4">WMF Projects 2022q4</a></li><li><a href="/wiki/Category:WMF_Projects_2023q1" title="Category:WMF Projects 2023q1">WMF Projects 2023q1</a></li><li><a href="/wiki/Category:WMF_Projects_2023q2" title="Category:WMF Projects 2023q2">WMF Projects 2023q2</a></li><li><a href="/wiki/Category:WMF_Projects_2023q3" title="Category:WMF Projects 2023q3">WMF Projects 2023q3</a></li><li><a href="/wiki/Category:WMF_Projects_2023q4" title="Category:WMF Projects 2023q4">WMF Projects 2023q4</a></li><li><a href="/wiki/Category:WMF_Projects_2024q1" title="Category:WMF Projects 2024q1">WMF Projects 2024q1</a></li><li><a href="/wiki/Category:WMF_Projects_2024q2" title="Category:WMF Projects 2024q2">WMF Projects 2024q2</a></li><li><a href="/wiki/Category:WMF_Projects_2024q3" title="Category:WMF Projects 2024q3">WMF Projects 2024q3</a></li><li><a href="/wiki/Category:WMF_Projects_2024q4" title="Category:WMF Projects 2024q4">WMF Projects 2024q4</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 1 December 2024, at 05:56.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=VisualEditor_on_mobile/Edit_cards&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.log.warn("This page is using the deprecated ResourceLoader module \"mediawiki.ui.button\".\n[1.41] Please use Codex. See migration guidelines: https://www.mediawiki.org/wiki/Codex/Migrating_from_MediaWiki_UI");mw.config.set({"wgHostname":"mw-web.codfw.main-5c59558b9d-kbfc7","wgBackendResponseTime":140,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Open_questions","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Updates","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-26_November_2019_-_measuring_impact-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-2_September_2019_-_v3_deployment_timing-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-20_August_2019_-_v3_prototype_ready-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-2_August_2019_–_v2_live_on_all_wikis-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-31_July_2019_–_v2_deployment_to_all_wikis-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-26_July_2019_–_v2_testing_(usertesting.com)-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-19_July_2019_–_v2_deployment_timing-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-15_July_2019_–_v2_prototype_ready-Updates","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Edit_Cards_v2-15_July_2019_–_v2_prototype_ready","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-14_June_2019_–_v1_prototype_ready-Updates","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Using_the_prototype-14_June_2019_–_v1_prototype_ready","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-31_May_2019_–_Tappable_wireframes-Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-8_May_2019_–_Initial_wireframes-Updates","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Background","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-User_testing","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-v3_prototype-User_testing","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-How_were_we_testing?-v3_prototype","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_did_we_find?-v3_prototype","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-v2_prototype-User_testing","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-How_were_we_testing?_2-v2_prototype","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_did_we_find?_2-v2_prototype","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-v1_prototype-User_testing","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-How_were_we_testing?_3-v1_prototype","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_did_we_find?_3-v1_prototype","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Invision_prototype-User_testing","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-How_were_we_testing?_4-Invision_prototype","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_did_we_find?_4-Invision_prototype","replies":[]}]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Glossary","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.019"},"limitreport":{"cputime":"0.180","walltime":"0.238","ppvisitednodes":{"value":483,"limit":1000000},"postexpandincludesize":{"value":10817,"limit":2097152},"templateargumentsize":{"value":1621,"limit":2097152},"expansiondepth":{"value":14,"limit":100},"expensivefunctioncount":{"value":0,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":3864,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 124.243 1 -total"," 60.87% 75.632 1 Template:Wikimedia_engineering_project_information"," 28.87% 35.873 1 Template:Tracked"," 16.29% 20.244 2 Template:Dir"," 16.14% 20.056 3 Template:Pagelang"," 13.94% 17.321 1 Template:Ll"," 10.17% 12.640 1 Template:Ptag"," 9.96% 12.373 2 Template:Clickable_button_2"," 7.85% 9.752 2 Template:Translatable"," 3.70% 4.596 1 Template:Badge"]},"scribunto":{"limitreport-timeusage":{"value":"0.013","limit":"10.000"},"limitreport-memusage":{"value":1028682,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-5c59558b9d-prl4j","timestamp":"20241201055633","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>