Page MenuHomePhabricator

Add a blue background to "Contents" label and title of article in table of contents
Closed, InvalidPublic

Description

As a user I want to be able to easily see the title of the article. I don't want it to blend in to the rest of the table of contents.

Based on feedback when we changed "Introduction" to article title.

Design


  • The blue dot that marks the current section will no longer mark the first section, because it also has a blue background. But the other section will still be marked with blue dot when they are current.

    Event Timeline

    KHammerstein raised the priority of this task from to Needs Triage.
    KHammerstein updated the task description. (Show Details)
    Restricted Application added a subscriber: StudiesWorld. · View Herald TranscriptNov 19 2015, 12:35 AM
    Mhurd claimed this task.Dec 22 2015, 9:45 PM
    Mhurd set Security to None.
    Mhurd removed Mhurd as the assignee of this task.Dec 23 2015, 11:14 PM

    @KHammerstein can we consider another color for the header? The blue in the mockup is basically the default iOS "selection color" - so it looks like this is the current selection - which may be confusing. Perhaps different text weights / fonts might also convey that this is the title.

    Another more subtle issue: Since we are making the title look like part of the header and different than the rest of the items in the ToC, it may convey to users that the title is no longer tappable.

    @Fjalapeno Thanks for bringing that up, a good point to consider.
    I chose that blue because it was similar to the old TOC (though below the blue background it had a black background) and also similar to the android menu layout:


    The selection color we use is gray so I don't think it will be confused. If its an easy change I think we should go ahead with the blue now and pay close attention to user testing the TOC.

    The selection color we use is gray so I don't think it will be confused.

    @KHammerstein we use the blue color in the dot to show the current section. So we are using blue to show selection in addition to the gray color.

    If its an easy change I think we should go ahead with the blue now and pay close attention to user testing the TOC.

    We can always user test anything… but we have limited bandwidth. Not sure it is worth donor dollars to design and carry out tests find out if iOS users can understand the default iOS blue selection color can be used to mean something else other than selection.

    It seems a lot more cost/time effective to just avoid colors that have strong conflicting associations on the platform.

    JMinor triaged this task as Low priority.Jan 27 2016, 7:23 PM
    JMinor added subscribers: Nirzar, JMinor.

    This is @Nirzar's call ultimately.

    JMinor changed the task status from Open to Stalled.Jan 27 2016, 7:24 PM
    JMinor added a project: iOS-app-v5-production.

    @Fjalapeno I think its a valid point that we use blue for selection. Here's a little tweak to what @KHammerstein had on pholio

    In this

    1. First time you see TOC the first section is selected with blue background and a white dot (inverted colors)
    2. You select another section and the header desaturates to gray
    3. We want this because header needs a special treatment to anchor the list
    4. Contents and name of article are closer without separator between


    Looks good to me. I think that handles the selection and special treatment pretty well and looks good.

    @Nirzar @Fjalapeno how we solve T117474 also factors into this, i.e. how this "header" interacts w/ the status bar.

    @BGerstle-WMF in the mock above. i am using a white bar to block the status bar.

    the other option is to keep the blue/gray header sticky and the contents will scroll below it keeping status bar out of the loop.

    @BGerstle-WMF in the mock above. i am using a white bar to block the status bar.
    the other option is to keep the blue/gray header sticky and the contents will scroll below it keeping status bar out of the loop.

    @Nirzar I added a similar comment on T117474 along with a couple variations.

    the other option is to keep the blue/gray header sticky and the contents will scroll below it keeping status bar out of the loop.

    yeah, seems like a waste of space to me—especially in landscape. it should at least collapse if we do this

    yeah, seems like a waste of space to me—especially in landscape. it should at least collapse if we do this

    true but it gives one more function of "Scroll to the top" which is missing in the app. not entirely waste of space :)

    My preference:

    The header takes up a fixed amount of space, and the rest of the ToC scroll under it. We could squeeze and hide the "CONTENTS" or Title part as you scroll down, so it doesn't take up to much space, and its a much need "jump to article top" action.

    In landscape, only the "squeezed" version (suggest just article title) would be shown.

    In either case, the header has a different treatment (as described here) which extends under the status bar, but doesn't have text so it doesn't obscure it.

    Nirzar added a comment.Feb 4 2016, 1:09 AM

    @BGerstle-WMF @JMinor

    how about this -->
    When you scroll up, the header will shrink down and the font size will dynamically animates (safari) and be a small bar on top but it will be sticky.

    Ignore the left close button and treatment. something i was trying...

    Nirzar changed the task status from Stalled to Open.Feb 9 2016, 8:27 AM
    JMinor closed this task as Invalid.May 9 2016, 9:28 PM