Jump to content

From Wikivoyage

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

Current mobile main page
Current desktop main page

Aims

[edit]

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

This includes:

Page usage

[edit]

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

[edit]

Improve first contact pages

[edit]

Main page sections

[edit]
Map banner
[edit]
  • Yes 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)[reply]
    would prefer to see the whole globe and not just part of the world --Traveler100 (talk) 19:59, 23 February 2019 (UTC)[reply]
  • Issue: No visual feedback for the links, e.g. hover effects.
  • Issue: Imagemap used, which does not scale well and prevents the previous point.
  • 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.
Feature Banner
[edit]
  • Yes Status: Responsive design implemented
    • Discussion at Wikivoyage talk:UX Expedition#Feature Banner: Desktop and Mobile versions
    • 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
[edit]
  • Yes Status: Responsive design implemented
Sister Sites
[edit]
  • Yes Status: Responsive design implemented
  • Issue: Desktop version supports Mobile using nomobile class
  • Issue: does not display well on narrow mobile screens>
  • Yes Status: Fixed
  • Yes Status: Improved visual impression of entry page
  • Improvement : coordinates and map position for articles on continent pages.

Improve Listings reading and editing

[edit]


Improve Page previews

[edit]
  • 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).

Improve mobile reading and editing

[edit]

Show current location on maps

[edit]
[edit]

Ensure page issues display properly

[edit]

article status text

[edit]
  • Issue: Should be line border around text

Improve accessibility

[edit]
  • Yes Status:Combine all bullets into lists


CSS tweaks

[edit]

Vector 2022 tweaks

[edit]
  1. Yes 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. Yes Resolved issue: Left and right sidebars aren't aligned with the page title.
    • Page title has an inconsistent height across namespaces.
  5. Yes Resolved issue: Sidebars aren't easy to navigate on sight, sidebar headings should be easier to distinguish.
  6. Yes 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

[edit]

Members

[edit]

See also

[edit]