Page MenuHomePhabricator

Consistent tap throughs: As an editor, it's confusing to not know where a notification tap through is going to lead to
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
Feb 23 2022, 9:44 PM
Referenced Files
F35056832: IMG_4289.PNG
Apr 18 2022, 5:11 PM
F35056830: IMG_4290.PNG
Apr 18 2022, 5:11 PM
F35039639: image.png
Apr 5 2022, 1:30 PM
F35038191: image.png
Apr 4 2022, 5:13 PM
F35005724: IMG_0640.PNG
Mar 14 2022, 8:28 PM
F35005721: IMG_0638.PNG
Mar 14 2022, 8:28 PM
F35005716: IMG_0647.PNG
Mar 14 2022, 8:28 PM
F35005726: IMG_0639.PNG
Mar 14 2022, 8:28 PM
Tokens
"100" token, awarded by JMinor.

Description

Why are we doing this?

Different notification types currently lead to different places, how might we make it easier for editors to tell what is going to happen when they click on a notification?

Contributor story

As an editor, it's confusing to not know where a notification tap through is going to lead to, I want to have a way to anticipate what page will open when I tap on a notification

Quotes from Diary study

  • Notifications where [articles I edited] are mentioned in some other article …should give you [the] option to go to both pages, written previously and new one.
  • Regarding page links notification, I found [it] not helpful to read [the] new article instead of the [article I edited] that is mentioned
  • It lead to my talk page, but not to the message I received directly. I had to scroll down to see it.
  • For a talk page notification, it took me to the top of the page (which is long) rather than the bottom or the relevant section.
  • A talk page notification went to a different section with the same title.
  • Working fine so far! Still, the transitions between mobile version, desktop version and app are a bit messy and undesired
  • General comment about notifications is that I really did not find useful notifications about page links, because when I clicked on that notification, the link is to the new article. Maybe, this is the case only with editors with thousands of articles (I have more than 10,000 articles written), so I really did not remember every article that I wrote in the past, and I would like to see my previous article in the past. I don`t know how this can be solved, but it would be nice to have links to both articles, not just to the new one.

Proposed design solutions

Figma file: https://www.figma.com/file/cedgOU5CyOR0UVqtjDOvzE/iOS-Notifications?node-id=2086%3A21095

Default - Article talk messageSepia - User talk message (long)Dark - Edit revertedDefault - Alert
image.png (812×375 px, 37 KB)
image.png (812×375 px, 58 KB)
image.png (812×375 px, 30 KB)
image.png (812×375 px, 32 KB)
NOTE: Note for QA, text may be truncated after just a few lines due to API constraints.

Design details

  • Secondary actions are sticky to the bottom of the content area (16pt below main message area)
  • Secondary actions should not contain a duplicate of the primary action
  • Message body should NOT scroll, message area to grow/shrink in height to accommodate message length
  • For assets, please see Figma

Event Timeline

cmadeo renamed this task from As an editor, it's confusing to not know where a notification tap through is going to lead to, I want to have a way to anticipate what page will open when I tap on a notification to As an editor, it's confusing to not know where a notification tap through is going to lead to.Feb 23 2022, 9:44 PM
cmadeo renamed this task from As an editor, it's confusing to not know where a notification tap through is going to lead to to Consistent tap throughs: As an editor, it's confusing to not know where a notification tap through is going to lead to.
cmadeo created this task.
LGoto triaged this task as Medium priority.Feb 28 2022, 7:49 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.

@cmadeo Heads up, I just noticed the text seems to be truncated at the API itself, so we won't be able to get to your full text state easily. Here's the object returned for the notification that was triggered by this edit. Notice the body value:

{
          "wiki": "enwiki",
          "id": 241957574,
          "type": "edit-user-talk",
          "category": "edit-user-talk",
          "section": "alert",
          "timestamp": {
            "utciso8601": "2022-03-09T17:02:51Z",
            "utcunix": 1646845371,
            "unix": "1646845371",
            "utcmw": "20220309170251",
            "mw": "20220309170251",
            "date": "Today"
          },
          "title": {
            "full": "User talk:Tsevener",
            "namespace": "User_talk",
            "namespace-key": 3,
            "text": "Tsevener"
          },
          "agent": {
            "id": 35904678,
            "name": "TSevener (WMF)"
          },
          "revid": 1076152880,
          "targetpages": [],
          "*": {
            "header": "‪TSevener (WMF)‬ left a message on <strong>your talk page</strong> in \"<strong>‪Testing new topic with long reply.‬</strong>\".",
            "compactHeader": "‪TSevener (WMF)‬ left you a message in \"<strong>‪Testing new topic with long reply.‬</strong>\".",
            "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit ut aliq...",
            "icon": "edit-user-talk",
            "links": {
              "primary": {
                "url": "https://en.wikipedia.org/wiki/User_talk:Tsevener?markasread=241957574&markasreadwiki=enwiki#c-TSevener_(WMF)-2022-03-09T17:02:00.000Z-Testing_new_topic_with_long_reply.",
                "label": "View message"
              },
              "secondary": [
                {
                  "url": "https://en.wikipedia.org/wiki/User:TSevener_(WMF)",
                  "label": "‪TSevener (WMF)‬",
                  "tooltip": "",
                  "description": "",
                  "icon": "userAvatar",
                  "prioritized": true
                },
                {
                  "url": "https://en.wikipedia.org/w/index.php?title=User_talk:Tsevener&oldid=prev&diff=1076152880",
                  "label": "View changes",
                  "description": "",
                  "icon": "changes",
                  "prioritized": true
                }
              ],
              "legacyPrimary": {
                "url": "//en.wikipedia.org/wiki/User_talk:Tsevener?markasread=241957574&markasreadwiki=enwiki#Testing_new_topic_with_long_reply.",
                "label": "View message"
              }
            },
            "iconUrl": "/w/extensions/Echo/modules/icons/edit-user-talk-progressive.svg"
          }
        }

@Tsevener Ah, this is a bummer, but I think that the value of a detail page is still really strong.

hi @cmadeo @OTichonova - I'm in the process of populating the data of this screen, and I have a few comments / questions:

  1. According to the Figma, some header subtitles say "On English Wikipedia" and some say "From English Wikipedia". Can we stick to one phrasing. Also better yet, can we remove the preposition entirely and just say "English Wikipedia"? I'm reminded of this ticket that caused lots of translation problems with the way the Explore feed does it. We may want to consider removing the preposition from any notifications cells as well.
  1. I will make a Google doc of screenshots that I have so far of the various types, but there are some that stick out to me as odd with the header title (Edit milestone, Welcome, successful/failed mentions, user rights change) - can you add a mock on what these should look like? My initial implementation has "From [currently logged-in user]" as the header title which feels odd - but the notifications API indicates this is the user that triggered the notification.

(This is just scratch UI to check the data)

IMG_0647.PNG (667×375 px, 121 KB)
IMG_0643.PNG (667×375 px, 116 KB)
IMG_0640.PNG (667×375 px, 182 KB)
IMG_0639.PNG (667×375 px, 117 KB)
IMG_0638.PNG (667×375 px, 112 KB)
  1. When should "Go to Discussion page" from the mocks be used? This sounds like the future type of talk page notifications that we weren't going to support in V1 yet, but correct me if I'm wrong. I can't find the Phab ticket where we discussed that decision.

@cmadeo @OTichonova

Here's a spreadsheet of where I'm at with detail screen data. Let me know if anything seems off as far as data goes. If this is too much to sift through it might be better to have a mock for each notification type for QA to confirm when this gets to that stage.

https://docs.google.com/spreadsheets/d/1ie3haerLDOraj79r-6Rz4AQwMfkGngjSVr2vmCpZwOs/edit?usp=sharing

According to the Figma, some header subtitles say "On English Wikipedia" and some say "From English Wikipedia". Can we stick to one phrasing. Also better yet, can we remove the preposition entirely and just say "English Wikipedia"? I'm reminded of this ticket that caused lots of translation problems with the way the Explore feed does it. We may want to consider removing the preposition from any notifications cells as well.

Totally fine to remove the preposition from here and the notification cells. I updated the Figma for the detail view to start

I will make a Google doc of screenshots that I have so far of the various types, but there are some that stick out to me as odd with the header title (Edit milestone, Welcome, successful/failed mentions, user rights change) - can you add a mock on what these should look like? My initial implementation has "From [currently logged-in user]" as the header title which feels odd - but the notifications API indicates this is the user that triggered the notification.

I'll make some mocks for these.

When should "Go to Discussion page" from the mocks be used? This sounds like the future type of talk page notifications that we weren't going to support in V1 yet, but correct me if I'm wrong. I can't find the Phab ticket where we discussed that decision.

On all of our sister projects (except for WikiNews) talk pages are called 'Discussions' pages, so if possible it would be great to call 'talk pages' discussion pages for non Wikipedia projects. (Wikinews uses the term 'collaboration')

On all of our sister projects (except for WikiNews) talk pages are called 'Discussions' pages, so if possible it would be great to call 'talk pages' discussion pages for non Wikipedia projects. (Wikinews uses the term 'collaboration')

@cmadeo Good to know, thanks! Does this also include user talk pages? For example:

  • "Message on your collaboration page" - title label on a list cell of a WikiNews user talk message notification (if we can't extract a topic title)
  • "Go to your discussion page" - link on the detail screen of a Wikidata user talk page message notification

@Tsevener strangely, this does not apply to user talk pages on any of these projects, they are all referred to as Talk pages eg:

  • "message on your talk page" (for all projects)
  • "message on [article/file/etc] discussion page"

Hi all, I'm really sorry to come in with a last minute update from Design, but could we bump the 'from' line and the 'subject' line both up to 17pt from 15pt? I'm realizing I wasn't following the correct typography guidelines that Olga and I are developing. These type sizes are updated in Figma.

Macro cathug: I am so sorry for being indecisive

could we bump the 'from' line and the 'subject' line both up to 17pt from 15pt?

Sure thing – I'll make that update.

Two small requested changes based on usability testing:

  1. Would it be possible to update the string for all cases of 'Go to user page' (note, not 'Go to your talk page') to display the editor's username (eg. Go to [Editor's username] user page)
  2. Would it be possible to truncate the lines in the menu? Currently I'm seeing them overflow and push out the destination. Example of proposed design below:

image.png (812×375 px, 47 KB)

Please let me know if you'd prefer to have a separate ticket for both or either of these requests.

  1. Would it be possible to update the string for all cases of 'Go to user page' (note, not 'Go to your talk page') to display the editor's username (eg. Go to [Editor's username] user page)

@cmadeo Sure thing – it looks like the logic to do so was already implemented.

  1. Would it be possible to truncate the lines in the menu? Currently I'm seeing them overflow and push out the destination. Example of proposed design below:

This one is a little bit trickier. Currently, that cell is a just a default, non-custom, Apple UITableViewCell with the value1 configuration. It appears like the behavior of this system configuration (which supports displaying the main text label and the detail text label) automatically removes the detail text label if the main text label overflows. I don't immediately see a quick API supported way to change this behavior. There are definitely a few paths towards solutions, but want to surface that it'd be a Medium amount of work to get to a sustainable solution.

Related: what do you think about dropping the "Go to" text prefix from all these actions? Meaning, "Your talk page" and "Amy's talk page" instead of "Go to your talk page" and "Go to Amy's talk page". This would a) remove that repeated/potentially unneeded text and b) have the added benefit of probably reducing the number of occurrences of #2 without having to create anything custom?

Thanks @Dmantena!

Great idea to drop the 'Go to' prefix! I'd be happy to see that implemented, thank you for the suggestion!

Totally hear you via the truncation issues, one question I have is if it would be possible to avoid a situation where we are showing just a few characters from the link destination (eg. a string like 'bagelpigeons userpage on w')

Also I'm so sorry about the screenshot from my previous comment not exporting correctly, not that it really matters but it should have looked like this:

image.png (812×375 px, 56 KB)

PR for truncation up at: https://github.com/wikimedia/wikipedia-ios/pull/4185

Totally hear you via the truncation issues, one question I have is if it would be possible to avoid a situation where we are showing just a few characters from the link destination (eg. a string like 'bagelpigeons userpage on w')

Currently, we're relying on Apple's default truncation handling. Specifically, the "tail truncation" option they provide. We could potentially do some custom text truncation, but I'm hesitant to go down this route because I'm not fully aware of challenges we may encounter with languages other than English and we'd also then potentially be displaying incongruent results (like if two rows are displaying truncated text like your screenshot above, the start and end of their tail truncation would be different depending on where the truncation begins).

@cmadeo these tweaks should be in the next TestFlight nightly build (1913).

Wowie! These are looking great! Thank you for the updates!!!

Two more string change requests:

IMG_4290.PNG (2×1 px, 222 KB)
Is there any way for us to know if a message is on your talk page but not in your primary app language? Currently this says 'Talk page' but it's my talk page on ES Wiki. Not a big deal if this isn't possible, just something I hadn't caught until now.
IMG_4289.PNG (2×1 px, 249 KB)
1) Similar to the update to include the sender's username in the string for their userpage, could we do the same for their talk page? 2) It looks like Toni's talk page is showing up twice on this list. If it's the primary link is there anyway we can hide it from the secondary links menu?

Phew, okay sorry! The first note from above is not relevant and is a random artifact of me spamming my own talk page too much on ES wiki

@cmadeo All good! Thanks for talking it through with us today.

Looking great! Thanks for all of the excellent updates @Dmantena + @Tsevener !

JMinor claimed this task.
JMinor awarded a token.

Love this whole task and its comments. Above and beyond and it shows on the screen.