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>Reading/Web/Desktop Improvements/Features/Collapsible sidebar - 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":"4ec285c8-bb27-4fd1-bf8a-a93032ac0075","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar","wgTitle":"Reading/Web/Desktop Improvements/Features/Collapsible sidebar","wgCurRevisionId":6088470,"wgRevisionId":6088470,"wgArticleId":1132324,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Desktop Improvements"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar","wgRelevantArticleId":1132324,"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":10000,"wgInternalRedirectTargetUrl":"/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar","wgTranslatePageTranslation":"source","wgCentralAuthMobileDomain":false,"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.translate.tag.languages":"ready","mediawiki.page.gallery.styles":"ready","ext.cite.styles":"ready","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","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect", "ext.cite.ux-enhancements","mediawiki.page.media","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","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.cite.styles%7Cext.discussionTools.init.styles%7Cext.translate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.page.gallery.styles%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.4"> <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/thumb/7/77/Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif/1200px-Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="676"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif/800px-Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="450"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif/640px-Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="360"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Reading/Web/Desktop Improvements/Features/Collapsible sidebar - 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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar"> <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-Reading_Web_Desktop_Improvements_Features_Collapsible_sidebar rootpage-Reading 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=Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar" 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/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&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=Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar" 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=Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar" 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/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&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=Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar" 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=Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar" 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-Feature_description_and_requirements" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Feature_description_and_requirements"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Feature description and requirements</span> </div> </a> <ul id="toc-Feature_description_and_requirements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Design_requirements_and_guidelines" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Design_requirements_and_guidelines"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Design requirements and guidelines</span> </div> </a> <ul id="toc-Design_requirements_and_guidelines-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-User_testing" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#User_testing"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</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-With_editors" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#With_editors"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>With editors</span> </div> </a> <ul id="toc-With_editors-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-With_readers" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#With_readers"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span> <span>With readers</span> </div> </a> <ul id="toc-With_readers-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Quantitative_testing" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Quantitative_testing"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Quantitative testing</span> </div> </a> <button aria-controls="toc-Quantitative_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 Quantitative testing subsection</span> </button> <ul id="toc-Quantitative_testing-sublist" class="vector-toc-list"> <li id="toc-Study_questions" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Study_questions"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>Study questions</span> </div> </a> <ul id="toc-Study_questions-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Results" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Results"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>Results</span> </div> </a> <ul id="toc-Results-sublist" class="vector-toc-list"> <li id="toc-What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.1</span> <span>What is the frequency that users collapse and uncollapse the sidebar?</span> </div> </a> <ul id="toc-What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_are_the_different_interaction_types_with_the_sidebar?" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_are_the_different_interaction_types_with_the_sidebar?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.2</span> <span>What are the different interaction types with the sidebar?</span> </div> </a> <ul id="toc-What_are_the_different_interaction_types_with_the_sidebar?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_after_the_change?" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_after_the_change?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.3</span> <span>What is the overall difference in interaction with sidebar links before and after the change?</span> </div> </a> <ul id="toc-What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_after_the_change?-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Full_report" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Full_report"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span> <span>Full report</span> </div> </a> <ul id="toc-Full_report-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Discussion_and_next_steps" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Discussion_and_next_steps"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.4</span> <span>Discussion and next steps</span> </div> </a> <ul id="toc-Discussion_and_next_steps-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Release_plan" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Release_plan"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Release plan</span> </div> </a> <ul id="toc-Release_plan-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>See also</span> </div> </a> <ul id="toc-See_also-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">Reading/Web/Desktop Improvements/Features/Collapsible sidebar</span></h1> <div class="mw-indicators"> </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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar" 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:Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar" rel="discussion" class="mw-redirect" 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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar" 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/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar" 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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&oldid=6088470" 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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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=Reading%2FWeb%2FDesktop_Improvements%2FFeatures%2FCollapsible_sidebar&id=6088470&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%2FReading%2FWeb%2FDesktop_Improvements%2FFeatures%2FCollapsible_sidebar"><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%2FReading%2FWeb%2FDesktop_Improvements%2FFeatures%2FCollapsible_sidebar"><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=Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar"><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=Reading%2FWeb%2FDesktop_Improvements%2FFeatures%2FCollapsible_sidebar&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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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/Special:MyLanguage/Reading" title="Special:MyLanguage/Reading">Reading</a></bdi> | <bdi dir="ltr"><a href="/wiki/Special:MyLanguage/Reading/Web" title="Special:MyLanguage/Reading/Web">Web</a></bdi> | <bdi dir="ltr"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements" title="Special:MyLanguage/Reading/Web/Desktop Improvements">Desktop Improvements</a></bdi> | <bdi dir="ltr"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Features" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Features">Features</a></bdi></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Reading%2FWeb%2FDesktop+Improvements%2FFeatures%2FCollapsible+sidebar&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/de" class="mw-pt-progress mw-pt-progress--low" title="Reading/Web/Desktop Improvements/Features/Collapsible sidebar/de (5% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/nl" class="mw-pt-progress mw-pt-progress--complete" title="Reading/Web/Desktop Improvements/Features/Collapsible sidebar/nl (100% translated)" lang="nl" dir="ltr">Nederlands</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/diq" class="mw-pt-progress mw-pt-progress--low" title="Reading/Web/Desktop Improvements/Features/Collapsible sidebar/diq (1% translated)" lang="diq" dir="ltr">Zazaki</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/es" class="mw-pt-progress mw-pt-progress--low" title="Reading/Web/Desktop Improvements/Features/Collapsible sidebar/es (0% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/fr" class="mw-pt-progress mw-pt-progress--med" title="Lecture/Web/Améliorations du bureau/Fonctionnalités/Barre latérale repliable (32% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/it" class="mw-pt-progress mw-pt-progress--low" title="Lettura/Web/Migliorie all'IU desktop/Funzionalità/Barra laterale ripiegabile (2% translated)" lang="it" dir="ltr">italiano</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/pl" class="mw-pt-progress mw-pt-progress--med" title="Reading/Web/Desktop Improvements/Features/Collapsible sidebar/pl (20% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/pt-br" class="mw-pt-progress mw-pt-progress--med" title="Leitura/Web/Melhorias da Área de Trabalho/Recursos/Barra lateral ocultável (35% translated)" lang="pt-BR" dir="ltr">português do Brasil</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/cs" class="mw-pt-progress mw-pt-progress--low" title="Čtení/Web/Vylepšení plochy/Funkce/Sbalitelný postranní panel (2% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/uk" class="mw-pt-progress mw-pt-progress--low" title="Читання/Веб/Стаціонарні покращення/Функції/Приховувана бічна панель (13% translated)" lang="uk" dir="ltr">українська</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/he" class="mw-pt-progress mw-pt-progress--low" title="Reading/Web/Desktop Improvements/Features/Collapsible sidebar (10% translated)" lang="he" dir="rtl">עברית</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/zh" class="mw-pt-progress mw-pt-progress--med" title="阅读/网页/桌面版改进/功能/可收起的侧边栏 (22% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/ja" class="mw-pt-progress mw-pt-progress--med" title="Reading/Web/Desktop Improvements/機能/折りたたみ可能なサイドバー (43% translated)" lang="ja" dir="ltr">日本語</a></li> <li><a href="/wiki/Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar/ko" class="mw-pt-progress mw-pt-progress--med" title="읽기/웹/데스크톱 개선/기능/접히는 사이드바 (46% translated)" lang="ko" dir="ltr">한국어</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r6772996">.mw-parser-output .dip{margin:1em 0;box-sizing:border-box;clear:both;background:#fff}.mw-parser-output .dip-tabs{display:flex;flex-direction:column;flex-wrap:wrap;text-align:center}.mw-parser-output .dip-tab{flex:1 1 0;width:100%;margin:0;box-sizing:border-box;background-color:inherit;padding:.8em;font-weight:bold;border-top:0.2em solid #f8f9fa}.mw-parser-output .dip-tab.selected{background-color:#f8f9fa;border-left:0.5em solid #36c}.mw-parser-output .dip-tab img{min-width:22px}.mw-parser-output .dip-content{font-size:1.1em;border-bottom:2px solid #36c;padding:1em}.mw-parser-output .dip-break{clear:both}@media(min-width:550px){.mw-parser-output .dip-tabs{flex-direction:row;padding:0;margin-top:0!important}.mw-parser-output .dip-tabs>.dip-tab{display:inline-block;vertical-align:bottom;white-space:nowrap;width:auto;margin:0 .2em 0 0;border-top:.5em solid #36c;font-size:1.3em}.mw-parser-output .dip-tab.selected{border-left:0}}@media(min-width:1000px){.mw-parser-output .dip-tabs>.dip-tab{flex:0 1 0}}@media screen{html.skin-theme-clientpref-night .mw-parser-output .dip{background-color:transparent}html.skin-theme-clientpref-night .mw-parser-output .dip-tabs>.dip-tab.selected{background-color:transparent;border-top-color:#AFB6E9}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .dip-tabs>.dip-tab.selected{background-color:transparent;border-top-color:#AFB6E9}html.skin-theme-clientpref-os .mw-parser-output .dip{background-color:transparent}}</style> <div class="dip plainlinks"> <div class="dip-tabs" role="navigation"> <div class="dip-tab background-color:transparent;"><span typeof="mw:File"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements" title="Special:MyLanguage/Reading/Web/Desktop Improvements"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5f/OOjs_UI_icon_info-progressive.svg/22px-OOjs_UI_icon_info-progressive.svg.png" decoding="async" width="22" height="22" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5f/OOjs_UI_icon_info-progressive.svg/33px-OOjs_UI_icon_info-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5f/OOjs_UI_icon_info-progressive.svg/44px-OOjs_UI_icon_info-progressive.svg.png 2x" data-file-width="20" data-file-height="20"/></a></span> <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements" title="Special:MyLanguage/Reading/Web/Desktop Improvements">Overview</a><span style="display:none"><a href="/wiki/Reading/Web/Desktop_Improvements" title="Reading/Web/Desktop Improvements"> </a></span></div> <div class="dip-tab selected"><span typeof="mw:File"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Features" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Features"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/4/45/OOjs_UI_icon_beta-progressive.svg/22px-OOjs_UI_icon_beta-progressive.svg.png" decoding="async" width="22" height="22" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/45/OOjs_UI_icon_beta-progressive.svg/33px-OOjs_UI_icon_beta-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/45/OOjs_UI_icon_beta-progressive.svg/44px-OOjs_UI_icon_beta-progressive.svg.png 2x" data-file-width="24" data-file-height="24"/></a></span> <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Features" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Features">Features</a><span style="display:none"><a href="/wiki/Reading/Web/Desktop_Improvements/Features" title="Reading/Web/Desktop Improvements/Features"> </a></span></div> <div class="dip-tab"><span typeof="mw:File"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Repository" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Repository"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fb/OOjs_UI_icon_references-ltr-progressive.svg/22px-OOjs_UI_icon_references-ltr-progressive.svg.png" decoding="async" width="22" height="22" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fb/OOjs_UI_icon_references-ltr-progressive.svg/33px-OOjs_UI_icon_references-ltr-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fb/OOjs_UI_icon_references-ltr-progressive.svg/44px-OOjs_UI_icon_references-ltr-progressive.svg.png 2x" data-file-width="20" data-file-height="20"/></a></span> <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Repository" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Repository">Repository</a><span style="display:none"><a href="/wiki/Reading/Web/Desktop_Improvements/Repository" title="Reading/Web/Desktop Improvements/Repository"> </a></span></div> <div class="dip-tab"><span typeof="mw:File"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Frequently_asked_questions" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Frequently asked questions"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/12/OOjs_UI_icon_helpNotice-ltr-progressive.svg/22px-OOjs_UI_icon_helpNotice-ltr-progressive.svg.png" decoding="async" width="22" height="22" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/12/OOjs_UI_icon_helpNotice-ltr-progressive.svg/33px-OOjs_UI_icon_helpNotice-ltr-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/12/OOjs_UI_icon_helpNotice-ltr-progressive.svg/44px-OOjs_UI_icon_helpNotice-ltr-progressive.svg.png 2x" data-file-width="20" data-file-height="20"/></a></span> <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Frequently_asked_questions" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Frequently asked questions">FAQ</a><span style="display:none"><a href="/wiki/Reading/Web/Desktop_Improvements/Frequently_asked_questions" title="Reading/Web/Desktop Improvements/Frequently asked questions"> </a></span></div> </div> <div class="dip-break"></div> <div class="dip-content" style=";"><div style="font-weight: bold; width:100%; font-size:1.2em;"> <div style="float:left; width:33%; text-align:left;"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Features/Header" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Features/Header">« Previous</a> </div> <div style="float:left; width:33%;"></div> <div style="float:right; width:33%; text-align:right;"><a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Features/Limiting_content_width" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Features/Limiting content width">Next »</a> </div></div><div style="clear: both;"></div></div> </div> <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/T247032" class="extiw" title="phabricator:T247032"><span class="trakfab-T247032">Task T247032</span></a></b><br/><span class="status"></span></div> <p>We would like to give readers and editors the flexibility to collapse and uncollapse the left menu (the <a href="/wiki/Sidebar" title="Sidebar">sidebar</a>). They will gain a more focused view of the content. At the same time, the functionality will be available when needed. </p><p>By this functionality, we would like to pursue two of the main goals of our project. First, we would like to make it easier for people to focus on the content itself, whether during reading or editing. The other of these goals is to highlight important functionality such as the edit and history buttons, language switching, and search. </p> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Feature_description_and_requirements" data-mw-thread-id="h-Feature_description_and_requirements"><span data-mw-comment-start="" id="h-Feature_description_and_requirements"></span>Feature description and requirements<span data-mw-comment-end="h-Feature_description_and_requirements"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=1" title="Edit section: Feature description and requirements"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The collapsible sidebar feature will introduce a button in the top left corner of the screen. Selecting this button will collapse the sidebar and hide the items within it. To open - press the button again. </p><p>If logged-in, your sidebar collapsing preference will be saved. This means that if you chose to have the sidebar collapsed, and then end your session, your sidebar will still be collapsed when you start a new session, and vice-versa. </p><p>For logged-out users, the preference will only be saved within a given browser window. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Design_requirements_and_guidelines" data-mw-thread-id="h-Design_requirements_and_guidelines"><span data-mw-comment-start="" id="h-Design_requirements_and_guidelines"></span>Design requirements and guidelines<span data-mw-comment-end="h-Design_requirements_and_guidelines"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=2" title="Edit section: Design requirements and guidelines"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We have prepared a <a rel="nofollow" class="external text" href="https://di-collapsible-sidebar-5.firebaseapp.com/Hathor">prototype of this functionality</a>. </p> <ul class="gallery mw-gallery-traditional"> <li class="gallerybox" style="width: 535px"> <div class="thumb" style="width: 530px; height: 330px;"><span typeof="mw:File"><a href="/wiki/File:Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif" class="mw-file-description" title="The sidebar of Wikidata in French: uncollapsed and collapsed"><img alt="The sidebar of Wikidata in French: uncollapsed and collapsed" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/77/Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif/500px-Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif" decoding="async" width="500" height="281" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/77/Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif/750px-Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/77/Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif/1000px-Collapsible_sidebar_-_wikidata_fr_-_GIF_2.gif 2x" data-file-width="1350" data-file-height="760"/></a></span></div> <div class="gallerytext">The sidebar of Wikidata in French: uncollapsed and collapsed</div> </li> <li class="gallerybox" style="width: 535px"> <div class="thumb" style="width: 530px; height: 330px;"><span typeof="mw:File"><a href="/wiki/File:Collapsible_sidebar_-_wikipedia_fa_-_closed.png" class="mw-file-description" title="Visualisation of the collapsed sidebar on Farsi Wikipedia"><img alt="Visualisation of the collapsed sidebar on Farsi Wikipedia" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/97/Collapsible_sidebar_-_wikipedia_fa_-_closed.png/500px-Collapsible_sidebar_-_wikipedia_fa_-_closed.png" decoding="async" width="500" height="285" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/97/Collapsible_sidebar_-_wikipedia_fa_-_closed.png/750px-Collapsible_sidebar_-_wikipedia_fa_-_closed.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/97/Collapsible_sidebar_-_wikipedia_fa_-_closed.png/1000px-Collapsible_sidebar_-_wikipedia_fa_-_closed.png 2x" data-file-width="1350" data-file-height="770"/></a></span></div> <div class="gallerytext">Visualisation of the collapsed sidebar on Farsi Wikipedia</div> </li> <li class="gallerybox" style="width: 535px"> <div class="thumb" style="width: 530px; height: 330px;"><span typeof="mw:File"><a href="/wiki/File:Collapsible_sidebar_-_wikipedia_eu_-_open.png" class="mw-file-description" title="Visualisation of the collapsed sidebar on Basque Wikipedia"><img alt="Visualisation of the collapsed sidebar on Basque Wikipedia" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Collapsible_sidebar_-_wikipedia_eu_-_open.png/500px-Collapsible_sidebar_-_wikipedia_eu_-_open.png" decoding="async" width="500" height="285" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Collapsible_sidebar_-_wikipedia_eu_-_open.png/750px-Collapsible_sidebar_-_wikipedia_eu_-_open.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Collapsible_sidebar_-_wikipedia_eu_-_open.png/1000px-Collapsible_sidebar_-_wikipedia_eu_-_open.png 2x" data-file-width="1350" data-file-height="770"/></a></span></div> <div class="gallerytext">Visualisation of the collapsed sidebar on Basque Wikipedia</div> </li> </ul> <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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=3" 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="With_editors" data-mw-thread-id="h-With_editors-User_testing"><span data-mw-comment-start="" id="h-With_editors-User_testing"></span>With editors<span data-mw-comment-end="h-With_editors-User_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=4" title="Edit section: With editors"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We performed a feedback round with a prototype of the collapsible sidebar with editors across multiple wikis. Editors were invited to explore the prototype and provide their feedback using a central notice banner. The majority of users who provided feedback liked the collapsed sidebar for personal use, and especially for the purposes of reading. Please read through our <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/First_Prototype_Feedback_Report" title="Special:MyLanguage/Reading/Web/Desktop Improvements/First Prototype Feedback Report">report</a> for more details on feedback, concerns raised, and iterations. </p> <div class="mw-heading mw-heading3"><h3 id="With_readers" data-mw-thread-id="h-With_readers-User_testing"><span data-mw-comment-start="" id="h-With_readers-User_testing"></span>With readers<span data-mw-comment-end="h-With_readers-User_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=5" title="Edit section: With readers"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A prototype of the sidebar was also tested with readers through a <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Repository/Hureo_User_Research_Report" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Repository/Hureo User Research Report">user study</a> done in collaboration with an independent user testing firm, Hureo, based in India. During the course of the study, we studied readers unfamiliar with Wikimedia projects, as well as casual readers who use Wikimedia projects regularly. The tests were performed in English, Hindi, Telugu, Tamil and Marathi. </p><p>Readers reported a strong preference towards the collapsed version of the menu, stating that it created a better reading experience than the current version. </p><p>We will be publishing the full results of this study soon. <span class="anchor" id="quantitative-testing"></span> </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Quantitative_testing" data-mw-thread-id="h-Quantitative_testing"><span data-mw-comment-start="" id="h-Quantitative_testing"></span>Quantitative testing<span data-mw-comment-end="h-Quantitative_testing"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=6" title="Edit section: Quantitative testing"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Since making the change, we were able to observe the patterns of behavior of anonymous and logged-in users while using the sidebar. This report represents our findings so far. We hope to use this data in future iterations of the collapsible sidebar functionality. </p> <div class="mw-heading mw-heading3"><h3 id="Study_questions" data-mw-thread-id="h-Study_questions-Quantitative_testing"><span data-mw-comment-start="" id="h-Study_questions-Quantitative_testing"></span>Study questions<span data-mw-comment-end="h-Study_questions-Quantitative_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=7" title="Edit section: Study questions"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>When measuring the usage of the sidebar, we wanted to consider the following set of questions: </p> <ul><li>What is the frequency that users collapse and uncollapse the sidebar</li> <li>What is the difference in interaction with sidebar links between people with the sidebar collapsed (the majority of the time) versus uncollapsed (the majority of the time). In other words, once the sidebar is collapsed, do users open it when they need to, or do they just ignore it altogether?</li> <li>What is the overall difference in interaction with sidebar links before and after the change</li> <li>In particular, what is the overall difference in interaction with the donate link?</li></ul> <div class="mw-heading mw-heading3"><h3 id="Results" data-mw-thread-id="h-Results-Quantitative_testing"><span data-mw-comment-start="" id="h-Results-Quantitative_testing"></span>Results<span data-mw-comment-end="h-Results-Quantitative_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=8" title="Edit section: Results"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading4"><h4 id="What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?" data-mw-thread-id="h-What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?-Results"><span id="What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar.3F"></span><span data-mw-comment-start="" id="h-What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?-Results"></span>What is the frequency that users collapse and uncollapse the sidebar?<span data-mw-comment-end="h-What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?-Results"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=9" title="Edit section: What is the frequency that users collapse and uncollapse the sidebar?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Between July 22 and August 31, 2020, there were 28,745 unique sessions that included a click to collapse and/or uncollapse the sidebar. This represents only about 0.13% of all recorded sessions using the Vector 2022 skin and 13.67% of all Vector 2022 sessions with a click recorded.</li> <li>Since the sidebar was set as uncollapsed by default, there are more total clicks to collapse the sidebar. However, there are roughly the same average number of clicks per session to either collapse or uncollapse. Average Clicks Per Session to Collapse: 1.37; Average Clicks Per Session to Uncollapse: 1.38.</li> <li>French Wiktionary had the lowest average sidebar clicks per session (1.87) while Persian Wikipedia had the highest (2.94).</li> <li>Logged-out users have more than twice the number of collapse events compared to uncollapse events, likely because the state of the sidebar for logged out users is not preserved.</li> <li>Most sessions overall included just one-click to either collapse or uncollapse the sidebar. Logged out users have a higher frequency of one sidebar clicks per session while logged in users have a higher frequency of two clicks per session.</li></ul> <figure class="mw-halign-center" typeof="mw:File/Thumb"><a href="/wiki/File:Sidebar_clicks_by_logged-in_status_and_sidebar_state.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Sidebar_clicks_by_logged-in_status_and_sidebar_state.png/700px-Sidebar_clicks_by_logged-in_status_and_sidebar_state.png" decoding="async" width="700" height="327" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Sidebar_clicks_by_logged-in_status_and_sidebar_state.png/1050px-Sidebar_clicks_by_logged-in_status_and_sidebar_state.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Sidebar_clicks_by_logged-in_status_and_sidebar_state.png/1400px-Sidebar_clicks_by_logged-in_status_and_sidebar_state.png 2x" data-file-width="1800" data-file-height="840"/></a><figcaption></figcaption></figure> <figure class="mw-halign-center" typeof="mw:File/Thumb"><a href="/wiki/File:Clicks_by_sidebar_state_overall.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Clicks_by_sidebar_state_overall.png/700px-Clicks_by_sidebar_state_overall.png" decoding="async" width="700" height="327" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Clicks_by_sidebar_state_overall.png/1050px-Clicks_by_sidebar_state_overall.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Clicks_by_sidebar_state_overall.png/1400px-Clicks_by_sidebar_state_overall.png 2x" data-file-width="1800" data-file-height="840"/></a><figcaption>Clicks by sidebar state overall</figcaption></figure> <div class="mw-heading mw-heading4"><h4 id="What_are_the_different_interaction_types_with_the_sidebar?" data-mw-thread-id="h-What_are_the_different_interaction_types_with_the_sidebar?-Results"><span id="What_are_the_different_interaction_types_with_the_sidebar.3F"></span><span data-mw-comment-start="" id="h-What_are_the_different_interaction_types_with_the_sidebar?-Results"></span>What are the different interaction types with the sidebar?<span data-mw-comment-end="h-What_are_the_different_interaction_types_with_the_sidebar?-Results"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=10" title="Edit section: What are the different interaction types with the sidebar?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>For the majority of sessions (81.88%), the sidebar was collapsed and/or uncollapsed just once. For sessions where the sidebar was collapsed only once, 34.5% sessions kept the sidebar collapsed the majority of their session time and 65.4% of sessions had the sidebar uncollapsed the majority of their session time (did not collapse it until towards the end of their session).</li></ul> <table class="wikitable"> <caption>Sidebar interactions summary </caption> <tbody><tr> <th>Session Behavior </th> <th>Num_sessions </th> <th>Percent of sessions with click to collapse and/or uncollapse </th></tr> <tr> <td>Collapse but don't uncollapse </td> <td>13475 </td> <td>46.91% </td></tr> <tr> <td>Uncollapse but don't collapse </td> <td>1043 </td> <td>3.63% </td></tr> <tr> <td>Collapse once and then uncollapse once<sup id="cite_ref-clicks1_1-0" class="reference"><a href="#cite_note-clicks1-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> </td> <td>242 </td> <td>0.84% </td></tr> <tr> <td>Uncollapse once and then collapse once<sup id="cite_ref-clicks1_1-1" class="reference"><a href="#cite_note-clicks1-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> </td> <td>26 </td> <td>0.09% </td></tr> <tr> <td>Both Collapse and Uncollapse under 1 second </td> <td>8733 </td> <td>30.40% </td></tr> <tr> <td>Collapse and/or Uncollapse Multiple times within a session </td> <td>5204 </td> <td>18.12% </td></tr> </tbody></table> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-clicks1-1"><span class="mw-cite-backlink">↑ <sup><a href="#cite_ref-clicks1_1-0">1.0</a></sup> <sup><a href="#cite_ref-clicks1_1-1">1.1</a></sup></span> <span class="reference-text">Clicks were more than than 1 second apart</span> </li> </ol></div> <div class="mw-heading mw-heading4"><h4 id="What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_after_the_change?" data-mw-thread-id="h-What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_afte-Results"><span id="What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_after_the_change.3F"></span><span data-mw-comment-start="" id="h-What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_afte-Results"></span>What is the overall difference in interaction with sidebar links before and after the change?<span data-mw-comment-end="h-What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_afte-Results"></span></h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=11" title="Edit section: What is the overall difference in interaction with sidebar links before and after the change?"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Note re approach: </p><p>Since this was deployed as opt-out to all users on the test wikis, there is not a random, equal split of users between the two Vector skins. A direct comparison cannot be made as there may be some bias. The old skin version was only available to those who explicitly opted out. There were more users who saw the new version. However, we compared the average interactions per session for each skin type. This was to control for the different number of users and confirm if there were any significant differences. </p><p>Note: Data in these comparisons may still be affected by self-selection bias between the two groups. We also reviewed data from a two-week period before and after each test wiki's deployment date to confirm if there were any significant changes. </p> <ul><li>The Legacy Vector has a slightly higher number of total sidebar link clicks per session (4.68) compared to Vector 2022 (3.63). This is also true on a per wiki basis except for on French Wiktionary and Portuguese Wikiversity, which have a slightly higher average number of total sidebar link clicks on the new skin compared to Legacy</li> <li>Clicks to the donate link do not appear to be affected by the new skin version. There is a slightly higher number of average clicks per session on the Vector 2022 (1.11) compared to Vector 2010 (1.06).</li> <li>There was a decrease (-9.15%) in the overall total number of sidebar link interactions comparing the two weeks prior and two week following the deployment of the collapsible sidebar across all test wikis. However, this percentage is likely inflated due to seasonality effects (previous year's data was not available using webrequest to complete a year over year analysis).</li></ul> <div class="mw-heading mw-heading3"><h3 id="Full_report" data-mw-thread-id="h-Full_report-Quantitative_testing"><span data-mw-comment-start="" id="h-Full_report-Quantitative_testing"></span>Full report<span data-mw-comment-end="h-Full_report-Quantitative_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=12" title="Edit section: Full report"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The full report is available in this <a rel="nofollow" class="external text" href="https://nbviewer.jupyter.org/github/wikimedia-research/Collapsible-Sidebar-Analysis/blob/master/Collapsible-sidebar-usage-analysis.ipynb">Jupyter Notebook</a>. </p> <div class="mw-heading mw-heading3"><h3 id="Discussion_and_next_steps" data-mw-thread-id="h-Discussion_and_next_steps-Quantitative_testing"><span data-mw-comment-start="" id="h-Discussion_and_next_steps-Quantitative_testing"></span>Discussion and next steps<span data-mw-comment-end="h-Discussion_and_next_steps-Quantitative_testing"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=13" title="Edit section: Discussion and next steps"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><b>Based on the results above, we have learned that logged-in and logged-out users have very different behavior while using the sidebar.</b> Logged-in users tended to, overall, collapse the sidebar and leave it collapsed. As we understand it, not many of the items in the sidebar were useful to them. However, the rate of uncollapsing also indicated that users are aware that, were they to need to navigate to an item in the sidebar, that option was available to them. </p><p>Logged-out users, on the other hand, tended to collapse and uncollapse as needed. This indicates that they had a greater need of the items in the sidebar and that their behavior was more task-based, rather than indicating an overall pattern. </p><p>Based on the above findings, we took the following actions: </p> <ul><li>Making the sidebar collapsed by default for logged-out users</li> <li>Keeping the sidebar uncollapsed by default for logged-in users</li></ul> <p>We decided to continue to monitor the above patterns, in particular the decreases in clicks to links in the sidebar. We will work on it again based on future findings. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Release_plan" data-mw-thread-id="h-Release_plan"><span data-mw-comment-start="" id="h-Release_plan"></span>Release plan<span data-mw-comment-end="h-Release_plan"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=14" title="Edit section: Release plan"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We began deploying the first iteration in May 2020 to Office Wiki and Test Wiki, and plan to continue to our <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements#List_of_early_adopter_wikis_(test_wikis)" title="Special:MyLanguage/Reading/Web/Desktop Improvements">early adopter wikis</a> in following months. See our <a href="/wiki/Special:MyLanguage/Reading/Web/Desktop_Improvements/Features" title="Special:MyLanguage/Reading/Web/Desktop Improvements/Features">main Features page</a> for more details. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="See_also" data-mw-thread-id="h-See_also"><span data-mw-comment-start="" id="h-See_also"></span>See also<span data-mw-comment-end="h-See_also"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&action=edit&section=15" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="https://en.wikipedia.org/wiki/User:BrandonXLF/FloatSide" class="extiw" title="en:User:BrandonXLF/FloatSide">Floating sidebar user script</a></li> <li><a href="https://en.wikipedia.org/wiki/User:Blue-Haired_Lawyer/Wide_Skin" class="extiw" title="en:User:Blue-Haired Lawyer/Wide Skin">Collapsible sidebar user script</a></li> <li><a href="https://en.wikipedia.org/wiki/User:PleaseStand/Hide_Vector_sidebar" class="extiw" title="en:User:PleaseStand/Hide Vector sidebar">Collapsible sidebar user script</a></li> <li><a href="https://vec.wikipedia.org/wiki/MediaWiki:Gadget-ScondiBaraSanca.js" class="extiw" title="vec:MediaWiki:Gadget-ScondiBaraSanca.js">Collapsible sidebar gadget</a></li> <li><a href="https://pl.wikipedia.org/wiki/Wikipedia:Narz%C4%99dzia/Schowaj_menu_boczne" class="extiw" title="pl:Wikipedia:Narzędzia/Schowaj menu boczne">Collapsible sidebar gadget</a></li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" 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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&oldid=6088470">https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&oldid=6088470</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:Desktop_Improvements" title="Category:Desktop Improvements">Desktop Improvements</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 31 August 2023, at 17:02.</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=Reading/Web/Desktop_Improvements/Features/Collapsible_sidebar&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.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-mlwhb","wgBackendResponseTime":107,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Feature_description_and_requirements","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Design_requirements_and_guidelines","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-User_testing","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-With_editors-User_testing","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-With_readers-User_testing","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Quantitative_testing","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Study_questions-Quantitative_testing","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Results-Quantitative_testing","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_is_the_frequency_that_users_collapse_and_uncollapse_the_sidebar?-Results","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_are_the_different_interaction_types_with_the_sidebar?-Results","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-What_is_the_overall_difference_in_interaction_with_sidebar_links_before_and_afte-Results","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Full_report-Quantitative_testing","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Discussion_and_next_steps-Quantitative_testing","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Release_plan","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.014"},"limitreport":{"cputime":"0.282","walltime":"0.404","ppvisitednodes":{"value":647,"limit":1000000},"postexpandincludesize":{"value":7736,"limit":2097152},"templateargumentsize":{"value":2403,"limit":2097152},"expansiondepth":{"value":13,"limit":100},"expensivefunctioncount":{"value":0,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":10463,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 141.576 1 -total"," 72.51% 102.662 1 Template:Reading/Web/Desktop_Improvements/Header"," 27.66% 39.161 4 Template:Ll"," 24.83% 35.157 1 Template:Reading/Web/Desktop_Improvements/Features/Navigation"," 22.41% 31.723 8 Template:Translatable"," 17.43% 24.679 5 Template:Pagelang"," 13.35% 18.904 1 Template:Tracked"," 9.55% 13.520 1 Template:Reading/Web/Desktop_Improvements/Features/Navigation/layout"," 7.68% 10.877 3 Template:Dir"," 7.13% 10.096 1 Template:Anchor"]},"scribunto":{"limitreport-timeusage":{"value":"0.014","limit":"10.000"},"limitreport-memusage":{"value":1026477,"limit":52428800}},"cachereport":{"origin":"mw-api-int.codfw.main-648bd44df8-mwpfr","timestamp":"20241115074605","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>