View source for Help:Page previews

{{Nutshell|Page preview provides the casual reader with a streamlined browsing experience. Whenever you hover over a link to another article, a short summary of the article and a relevant image is provided to you so you can make the decision about whether you want to read the full article.}}
[[File:Mona-lisa-gif-2.gif|alt=Short clip showing: the Wikipedia article on the Mona Lisa, a cursor moving to hover over the link to Leonardo da Vinci's article, and a Page Preview appearing for da Vinci's article|thumb|500x500px|Page Preview example]]
The '''Page Previews''' (formerly known as Hovercards) feature solves the core problem of users needing to open multiple tabs to gain an understanding of a word or concept within the context of the subject they are reading.

With Page Previews, whenever a reader hovers over a link to another article, a short summary of the subject and an image (if available) is displayed.

The user can then decide whether they wish to visit that subject more thoroughly before continuing with the current article.

See {{Mw|article=Page Previews}} and {{Mw|article=Extension:Popups}} for additional details.

== Introduction ==
Page Previews are designed to reduce the cost of exploration of a link, as well as to promote learning by allowing readers to gain context on the article they are reading or to define an unfamiliar term, object, event, or idea without navigating away from their original topic.

For casual readers, Page Previews will make it easier for users to get an overview of an article before deciding whether or not to browse to it.

Users interested in reading an entire article in its totality will not be distracted or discouraged by viewing unfamiliar concepts - they can simply preview the concept without navigating to a new page.

Consequently, the smoothness of the user experience for these users will be increased.

The Page Previews [[#settings|settings panel]] enables logged-out users to enable and disable the feature based on their preferences. Logged-in users may enable or disable Page Previews from the Appearance section of [[Special:Preferences]].

==Design== 
[[File:Hovercards - Alps Mont Blanc.jpg|none|thumb|623x623px|Example of a Page Preview|link=Special:FilePath/Hovercards_-_Alps_Mont_Blanc.jpg]]
Each preview contains the following:
*A portion of the first paragraph from the article (ideally a curated [[Lead section]])
*An image (if available) from the article. Images appear horizontal or vertical depending on the location of the link within the article.
* A settings cog which allows users to turn Page Previews on and off

===Text summary===
The text included in the preview is from first paragraph from the article, ideally a [[Lead section]].

*If an article summary contains a link to a different page, the link will be rendered in plain text
*If an article has a [[noinclude]] section at the top, the summary will skip this section and display content from the first paragraph

===Images===
The [[PageImages]] image for an article will be displayed according to the new architecture of PageImages:

*The image may only be displayed if an image is within the [[lead section]] of an article OR within the first paragraph
* If there is no image within the lead section or first paragraph, no images will be displayed for the Page Previews (the Page Previews will only display the text summary of the article)
*Page Previews may display free and non-free images (the configuration on which images to display will be based on community consensus for each project)

Candidate images are scored by an algorithm that takes into account features such as order of appearance (earlier is better), size, and aspect ratio. The image with the highest score will be displayed, unless all scores are negative, in which case no image is shown.<ref>The scoring algorithm is implemented in [https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/PageImages/+/master/includes/LinksUpdateHookHandler.php LinksUpdateHookHandler.php]. [https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(policy)&oldid=866390029#Determination_of_the_image This page] has a human-readable overview of the scoring algorithm as it existed in 2018.</ref>

==Settings==
===Enable/Disable===
====Logged-Out Users====
Logged-out users may turn Page Previews off via the cog-icon displayed at the bottom of each preview. If a user wishes to re-enable Page Previews, they can be enabled via the link available at the bottom of any wiki page.

They can also disable JavaScript in their browser to turn it off permanently.

<gallery mode="packed" heights="200px">
File:Hovercard english.png | Select setting cog to disable Page Previews
File:Readers Page Preview options.png| Select disable to disable the feature
File:Reenablemodal.png | Instructions on how to re-enable will be presented
</gallery>

<gallery mode="packed" heights="100px">
Reenable preview.png| The link to re-enable Page Previews is available at the bottom of each page
</gallery>

====Logged-In Users ====
Logged-in users can control their settings from two places. They may enable or disable Page Previews from the Appearance section of [[Special:Preferences]]. Logged-in users may also turn Page Previews off via the cog-icon displayed at the bottom of each preview. If a logged-in user clicks on the settings cog, the system will redirect them to the user preferences page.<gallery mode="packed" heights="350px">
File:Preferences for logged in users.png| Users may enable the feature by using the settings cog at the bottom of each preview, or by selecting the option directly from the user preferences page
</gallery>

==Disabled pages==
For security reasons, Page Previews won't be loaded on certain special pages. We refer to these pages as "disabled pages". 

*[[Special:CreateAccount]]
*[[Special:UserLogin]]
*[[Special:ChangeCredentials]]
*[[Special:Notifications]]
*[[Special:UserRights]]
*[[Special:Upload]]
*[[Special:ExpandTemplates]]
*[[Special:MostLinkedFiles]]
*[[Special:CiteThisPage]]

==FAQ==

=== How can I check which image is associated with a page? ===
Page images will be listed on the <code>?action=info</code> page which can can be accessed by clicking on "[[Saintapedia upgrade (Mediawiki 1.22)#Page information|Page information]]" in the left navigation.

=== How does it select images? ===
All images in the page are collected and a score for each image is calculated. The image with the highest score is selected as the page image. If the wiki is configured such that images contain metadata that specifies images are not freely licensed, the image with the best score that is also freely licensed is also stored. If no suitable image is found or all the images score badly (i.e. has a negative score), the page will not have any images.

* Images smaller than 119 pixels are weighted highly negatively. Images with widths between 400px-600px are favoured, with a preference for the lower bound.
* Wikis gallery images which are smaller than 100 are disregarded.
* Only the first 4 images that appear in the document are considered.

===How do we measure Page Previews performance? ===
The theory of impact for Page Previews is that they lower the cost of exploring a link. This should mean that users are less inhibited and more focused when exploring links. We should see that the overall links clicked +  (non-accidental) hovers exceed the number of links clicked without Page Previews. This is what success looks like. There are also some indications of failure that we will look for:

*hovers can be accidental - we need to measure normal dwell time in a controlled condition to ensure that the likely rate of accidental hovers is not too high. To give an example, if a user must dwell on a link for 250 msecs before a hover shows, then we would want to make sure that there are not a large number of users who tend to dwell on a link for more than 250 msecs without clicking it.
*Page Previews could lead to fewer page views, because the user gets the information that they need from the preview- this is not a problem, but we want to make sure that the decrease (if any) does not result in significantly less editing or fundraising.
*the % of hovers that result in a user continuing to the page is high - this would suggest that most people wanted to go to the page anyway. If this is the case, then the hover is likely just adding an unnecessary step. We expect some significant % of click throughs for hovers. It is ~60% on Android for a similar feature, but we expect it to be lower on desktop.
*the percentage of users who disable Page Previews is low (given that users are aware on how to disable the feature) - this suggests that users enjoy the feature.

===Is this enabled by default for logged-in users?===
Yes. See Preferences>Appearance>Reading preferences to change the setting.

===How many options do I have in Page Previews preferences?===
Page Previews will either be turned on or off by a user. The option to turn them off lives in each hover event. So at each hover event, a user can decide that they are no longer interested. 

*For logged-in users, Page Previews may be re-enabled from [[Special:Preferences|user settings]] under the section titled "Appearance".
*For logged-out users, Page Previews may be re-enabled by selecting the "Enable Previews" link at the bottom of the page.

===What about accessibility?===
Page Previews only activate when the focus/hover state occurs over a link. They are usable for people who use keyboard navigation. For screen readers, Page Previews have proper {{W|WAI-ARIA}} semantics declaring them as tooltips. In short, [[Screen reader|screen reader software]] ignore Page Previews.

===If I have Page Previews feedback, where should I go? ===
Please reach out to the {{Email|address=dl-wikiadmin@hq.doe.gov|name=Wiki Admin team}}.

===The Page Previews continues to show an old version of a page. What can I do?===
The Page Preview shows the [[cached]] version of a page. If the page has been edited and you want Page Previews to show the new version right away, you can [[purge]] the page.
=== Why Page Previews?===
This is a feature intended to improve the experience for any reader who normally would have clicked on a blue link in Wikipedia because they needed an overview (definition) of that entity. It's inspired by one of the most popular gadgets, [https://en.wikipedia.org/wiki/Wikipedia_talk:Tools/Navigation_popups Navigation popups].

== Onboarding Experience==
The onboarding experience for the feature will depend on the consensus of each community on having Page Previews on by default or providing users with an onboarding experience during which they can reject the feature.

== Reference Previews==
{{Notice|This is not yet available on Saintapedia}}
The '''Reference Previews''' feature is a related project. It shows a preview of a footnote whenever a reader hovers over its footnote marker. A description of this feature can be found on [https://meta.wikimedia.org/wiki/WMDE_Technical_Wishes/ReferencePreviews its project page].

== Related==
*{{Mw|article=Extension:Popups}}
*{{Mw|article=Help:Reference Previews}}
*{{Mw|article=Page Previews/Functionality|label=Functionality}} has a complete description of Page Previews functionality.

==External links== 
*[https://blog.wikimedia.org/2014/03/26/Hovercards-now-available-as-a-beta-feature-on-all-wikimedia-wikis/ WMF blog post - Hovercards now available as a Beta Feature on all Wikimedia wikis] (March 2014)
*The original specifications can be seen at {{Mw|File:NavigationPopups V1.pdf|File:NavigationPopups V1.pdf}} and [https://trello.com/c/NYQ0nMeE/101-Hovercards-phase-3 Hovercards-phase-3 trello notes].
*https://meta.wikimedia.org/wiki/WMDE_Technical_Wishes/ReferencePreviews
*[https://diff.wikimedia.org/2018/05/09/page-previews-documentation/ Here's everything we published from the design, development, and data process for the page previews feature]
*[https://medium.com/freely-sharing-the-sum-of-all-knowledge/how-we-designed-page-previews-for-wikipedia-and-what-could-be-done-with-them-in-the-future-7a5fa6b07b96 How we designed page previews for Wikipedia — and what could be done with them in the future]
*[https://medium.com/freely-sharing-the-sum-of-all-knowledge/why-it-took-a-long-time-to-build-that-tiny-link-preview-on-wikipedia-d5bd734df8fe Why it took a long time to build that tiny link preview on Wikipedia]
*[https://diff.wikimedia.org/2018/04/17/wikipedia-page-previews/ Navigating through Wikipedia articles on desktop just got a lot easier]
*{{Mw|article=Page Previews/API Specification}}
*[https://phabricator.wikimedia.org/phame/post/view/61/beacons/ Beacons]
*[https://phabricator.wikimedia.org/phame/post/view/93/extension_popups_page_previews_front-end_tooling/ Extension:Popups (Page Previews) front-end tooling]
*[https://phabricator.wikimedia.org/phame/post/view/90/mustache.js_replaced_with_javascript_template_literals_in_extension_popups/ mustache.js replaced with JavaScript template literals in Extension:Popups]
*[https://www.mediawiki.org/wiki/Page_Previews/2017-18_A/B_Tests Page Previews/2017-18 A/B Tests]
*{{Mw|article=Wikimedia Research/Design Research/Reading Team UX Research/Hovercards Usability|label=Hovercards Usability study}} - Do people like the feature?  Do they know how to turn it on/off? Do they find it annoying?  How do they feel about the presence and size of images?

==References==
{{Reflist}}{{Purge button}}
[[Category:Help]]