UX Expedition

The UX Expedition, or User Experience Expedition, hopes to improve Wikivoyage in the following ways:

Current mobile main page

Current desktop main page

Aims

To improve primarily the readers', but also authors', experience of Wikivoyage.

This includes:

• Improving the readability of pages
  • By people using visual access
  • By people using audio access
  • By bots - to improve Search engine optimization (SEO)
• Improving the visual layout, impact and aesthetics of pages
• Improving the workflow for editors
  • Wikivoyage:Listing editor improvements
• Responsive Web Design (RWD) - page syntax to reliably handle any type of browser on any platform (Desktop, Tablet, Mobile SmartPhone)
  • mw:Manual:Mobiles, tablets and responsive design
  • mw:Recommendations for mobile friendly articles on Wikimedia wikis

Page usage

Add to this page current status and issues. Issues should be on the appropriate talk page of the subject (if not clear please link).

Tasks

Improve first contact pages

Main page sections

Tracked in Phabricator ^(?)
Task T216863 Resolved

• Deprecate MFSpecialCaseMainPage
  • Status: Ticket filed, configuration changed.

Map banner

{{Mapbanner}}

• Status: Updated to make it clearer scope and position of Wikivoyage. Helps new reading be clear about Wikimedia association. Useful SEO key words.
• Issue: Desktop and Mobile versions. Is it possible to come up with a single RWD solution? Switched to CSS queries to selectively show both versions for now. WIP.

  I'd like everyone to take a look at Main Page/Sandbox on mobile. The map is scrollable. I plan on adding some visual indicator to this effect, but first I'd like feedback on the general concept. Ping User:Traveler100, User:SelfieCity, and anyone else interested in helping out. ARR8 (talk | contribs) 19:18, 23 February 2019 (UTC)

  would prefer to see the whole globe and not just part of the world --Traveler100 (talk) 19:59, 23 February 2019 (UTC)

• Issue: No visual feedback for the links, e.g. hover effects.
• Issue: Imagemap used, which does not scale well and prevents the previous point.
  • Ran into technical difficulties implementing a better solution.
  • Demonstration of hover effects
• Issue: More modern and visual appealing map, ideally a vector.
• Issue: Does not scale to full width and stays to the left of the page on wide resolutions, see screenshot.
  • Discussion at Talk:Main_Page#Main_page_banners

Feature Banner

• Status: Responsive design implemented
  • Discussion at Wikivoyage talk:UX Expedition#Feature Banner: Desktop and Mobile versions
    • @ARR8: where did the "Tap to learn more" come from on the full width version? Is it needed?--Traveler100 (talk) 16:06, 23 February 2019 (UTC)
  • Possible enhancements:
    • The CSS, as written, causes the banners to break with very narrow desktops. This is not a usual use case, because even those who use vertical monitors have wide enough resolution for there not to be problems, but this should technically be fixed, if possible, at some point.
    • When the descriptions of the banner image appears, it is not obvious to a mobile user that it contains links. This can be fixed with styling. Alternatively, a CSS rule can be written to append something like "Tap to learn more" at the end of the description.
    • The animation code currently slides the box in from the left. This can be easily modified to change the direction based on the alignment of the text in the box, so that a left-aligned box will slide in from the right. Not a high priority, since all of our banner boxes are right-aligned and have been for a while.
    • It was proposed that the title of the page linked to be displayed on the banner at all times, not just when the box is present. This is possible, but was decided against. It remains an option, however.
    • The mobile touch icon can be hidden upon touch on mobile. Having it remain may suggest additional behavior. Very simple to implement with or without a quick fade out.
• Issue: Does not scale to full width, see above

Bottomboxes

{{Bottomboxes}}

• Status: Responsive design implemented

Sister Sites

{{WikivoyageSister}}

• Status: Responsive design implemented

Wikivoyage:Community portal

• Status: Responsive design implemented. Created {{Communityportal}}.

Wikivoyage:Travellers' pub

• Issue: Desktop version supports Mobile using nomobile class

Wikivoyage:Tourist office

• Issue: does not display well on narrow mobile screens>

• Hey local admin! You can refer to our Chinese Wikivoyage!--Yuriy kosygin (talk) 18:33, 6 March 2019 (UTC)

• Status: Fixed

Itineraries

• Status: Improved visual impression of entry page
• Improvement : coordinates and map position for articles on continent pages.

Improve Listings reading and editing

QOL improvements at Wikivoyage talk:Listing editor#New changes

Improve Page previews

Tracked in Phabricator ^(?)
Task T213652

Tracked in Phabricator ^(?)
Task T95026

Discussion at Wikivoyage:Travellers' pub/2019#Page_preview_pop-ups

• Issue: The preview image on mouse-over of a link to an article is often of the first listing in the article (which is often airport or rail station), not first interesting image visible in the article (or even any image in the article).
  • Possible solution (workaround). See Bitola, which is using {{Pagebanner/sandbox2}} that uses User:Traveler100/sandbox-city to place a marker at the very top right of the page. This uses wikidata image to influence the preview image. --Traveler100 (talk) 10:17, 20 February 2019 (UTC)

Improve mobile reading and editing

Show current location on maps

Tracked in Phabricator ^(?)
Task T208713

meta:Community Wishlist Survey 2019/Maps/Maps should have option to show users current location

Add useful links (Pub, RecentChanges, etc.)

Tracked in Phabricator ^(?)
Task T65459

Wikivoyage talk:UX Expedition#Annoyances of editing on an Android

Ensure page issues display properly

Tracked in Phabricator ^(?)
Task T214653

• Issue: {{Style}}

See Template talk:Style#mobile

article status text

• Issue: Should be line border around text

Improve accessibility

• Status:Combine all bullets into lists

CSS tweaks

• (minor) Improve page load times by moving all applicable MediaWiki:Common.css rules to templatestyles, prevent loading on every page when not necessary
• Ensure CSS rules are at the top of the page whenever they are used, to prevent w:Flash of unstyled content
  • Main page font size
    • I've gotten this problem before but I didn't know there was a name for it. I always assumed it was due to poor internet connection, which it is to some extent. --Comment by Selfie City (talk | contributions) 15:43, 2 March 2019 (UTC)
• Some requests to modify the appearance of {{Pagebanner}}. When attempted, it turned out the banner is outside the parser output, and so cannot be styled by templatestyles, only by common or skin CSS files. This is because it is an extension, and comes with its own default stylesheet.
  • Template_talk:Pagebanner#Darkened_section_for_text_in_top_left_corner
  • special:diff/3736226, User:ButteBag/common.css

Vector 2022 tweaks

1. Resolved issue: Excessive whitespace.
   • Top of the page has a lot of wasted whitespace.
   • Footer is very space-inefficient.
2. Issue: Language selector isn't desired by some users.
   • Moving this to a sidebar could allow us to remove the page title altogether.
3. Issue: Sticky header doesn't work in the Special-namespace.
4. Resolved issue: Left and right sidebars aren't aligned with the page title.
   • Page title has an inconsistent height across namespaces.
5. Resolved issue: Sidebars aren't easy to navigate on sight, sidebar headings should be easier to distinguish.
6. Resolved issue: Minimal/constant page banner size, even when resized on mobile? Should it be consistent across skins?
   • When it doesn't fit, how should it be rendered? Cut off the right side?
   • The pagebanner extension already resizes itself to 3.5:1(?), centering on the image centre or defined origin when the browser window isn't wide enough. Fixing could be as easy as redefining that within the extension whenever Vector 2022 is used.
7. Optional: Adding Wikivoyage branding to skin elements.
   • TOC arrows as compass arrows.
   • Stick a greyed-out Wikivoyage logo to the sticky header. Clicking it returns to the page's top.

User solutions

• User:Wauteurz/common.css - Fixes to issues 1b, 4, 5, 6. Hackish solutions for 1a, 7a. Changes are listed on its talk page.
  • A vote about copying changes made within this is ongoing now!

Members

• ARR8 (talk | contribs)
• Selfie City (talk | contributions) joined on 21:22, 17 February 2019 (UTC)
• Traveler100
• SHB2000
• Wauteurz (talk)

See also

• Wikivoyage:Access Expedition
• Wikivoyage:Search Expedition