Page MenuHomePhabricator

Improve visual design of 'Other languages' selection screen
Closed, ResolvedPublic2 Story Points

Description

NOTE: This ticket outlines the visual design updates to the Other languages screen as a subtask to adding a user's preferred language list detailed in T191515

Problem

When a user invokes to see "Other languages" from an article's toolbar, a picker with available languages appears within a full screen dialogue, with the option to search within available languages appearing as a inline text field under the toolbar.
Both the toolbar and the inline search is fixed, which is unexpected scrolling behavior.

Proposed design
  • Incorporate the search into the toolbar so that scrolling behavior is as expected (only the toolbar remains fixed on scroll) and to reduce the visual clutter.
  • Update the no results message to use the standard no search results graphic and text styling
ScreenCurrent 'Actual'Proposed design
Initial screen
Screen scrolled
Search invoked
Search invoked with search results
No search results
{F17012411}
Notes on design
  • Add subtitles to differentiate between list of the user's Wikipedia app languages available vs list of all available languages
  • The list of “Other languages” an article is available in should show each line item with 3 lines of data, with the following logic:
Articles results list in 'Other languages' display logicExample (if EN is the device language, for the 'Egg tart' article)
Line 1Native language nameFrançais
Line 2Name in device languageFrench
Line 3Article name in particular languageTarte aux œufs
  • Separate ticket filed for text cursor color T192390

Redline version of mock in Zeplin board tagged with Multilingual and Other languages

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 16 2017, 8:29 PM
RHo renamed this task from Language switcher UI/UX review to Improve visual design of 'Other languages' selection screen.May 17 2017, 7:50 PM
RHo updated the task description. (Show Details)

@NHarateh_WMF : Hi, if this task should not be in the Android App Backlog, could you associate a better suited project please? Thanks!

RHo claimed this task.Mar 7 2018, 12:52 PM
RHo moved this task from Design Doing to UX Debt Backlog on the Wikipedia-Android-App-Backlog board.
RHo updated the task description. (Show Details)Apr 16 2018, 5:38 PM
Charlotte set the point value for this task to 2.Apr 17 2018, 4:09 PM
RHo updated the task description. (Show Details)Apr 17 2018, 6:15 PM

You bewdy, LGTM testing on Nexus 5 (6.0.1) with Wikipedia v2.7.234-alpha-2018-06-04

Dbrant closed this task as Resolved.Jun 27 2018, 8:05 PM