Page MenuHomePhabricator

Position of toolbar icons on mobile web version of Wikipedia preview
Closed, ResolvedPublic

Assigned To
Authored By
SGautam_WMF
Jun 28 2023, 2:49 PM
Referenced Files
F38223508: 2023-10-13_15-06-56.mp4.gif
Oct 13 2023, 10:11 PM
F38223506: 2023-10-13_15-05-39.mp4.gif
Oct 13 2023, 10:11 PM
F38223501: 2023-10-13_15-04-14.mp4.gif
Oct 13 2023, 10:11 PM
F38223426: image.png
Oct 13 2023, 10:11 PM
F38223420: 2023-10-13_14-58-07.mp4.gif
Oct 13 2023, 10:11 PM
F38223396: 2023-10-13_14-54-11.png
Oct 13 2023, 10:11 PM
F38223452: image.png
Oct 13 2023, 10:11 PM
F38190112: 2023-10-10_08-31-48.png
Oct 10 2023, 3:37 PM

Description

Problem

The "change" (pencil icon) and "delete" (trash bin icon) toolbars sit on top of the preview card on the right side, which is fine on desktop but hides preview content on mobile web.

Design
01 - overflow menu collapsed.png (780×360 px, 69 KB)
02 - overflow menu expanded.png (780×360 px, 70 KB)
  • Add an overflow menu to the preview card.
  • Upon tapping the overflow icon, a dropdown menu will appear beneath it, showcasing two options: "Change" (with a pencil icon) and "Delete" (with a trash bin icon).
  • Tapping on the change option should navigate the user to a search screen, where they can query to find alternative previews.
  • Tapping on the delete option will remove the Wikipedia preview from the selected word or phrase in the content.
  • Tapping outside the menu should dismiss it.
  • Keep the touch targets to 44x44.

Design file.


Acceptance Criteria
  • The overflow menu (kebab menu) should be placed adjacent to the close icon.
  • The dimensions for the touch target of the overflow menu should be at least 44x44 pixels.
  • Tapping on the overflow menu should display the options menu below it.
  • The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon).
  • Tapping "Change" should navigate the user to a search screen where they can find other previews to replace the current one.
  • Tapping "Delete" should remove the preview from the word.
  • Tapping outside the menu should dismiss it.

QA Results - WordPress: DEV

Event Timeline

SGautam_WMF renamed this task from Improve mobile web experience for adding Wikipedia Previews in wordpress posts to Position of toolbar icons on mobile web version of Wikipedia preview .Aug 8 2023, 6:22 AM
SGautam_WMF updated the task description. (Show Details)

I personally like how it currently looks on mobile with the toolbar partly on top of the preview.

@hueitan Please see the findings below, thanks! It looks like the new design from the description is not in DEV yet?

Status: ❌ Fail
Environment: WordPress Dev Version 1.11.0
OS: macOS Sonoma 14.0
Browser: Chrome 117
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/wp-admin/post.php?post=6&action=edit

✅AC1: The overflow menu (kebab menu) should be placed adjacent to the close icon.

2023-10-09_14-56-06.png (938×564 px, 114 KB)

❌AC2: The dimensions for the touch target of the overflow menu should be at least 44x44 pixels.- Is this what you are talking about?

2023-10-09_14-19-17.png (941×570 px, 118 KB)

❌AC3: Tapping on the overflow menu should display the options menu below it.-Seem to have the old design for mobile in DEV.

2023-10-10_08-31-48.png (938×565 px, 100 KB)

❌AC4: The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon). -It's represented with "Remove", not "Delete" for the trash bin icon

2023-10-09_14-56-06.png (938×564 px, 111 KB)

✅AC5: Tapping "Change" should navigate the user to a search screen where they can find other previews to replace the current one.

2023-10-09_15-00-05.mp4.gif (1×738 px, 298 KB)

✅AC6: Tapping "Delete" should remove the preview from the word.

2023-10-09_15-01-58.mp4.gif (962×602 px, 422 KB)

✅AC7: Tapping outside the menu should dismiss it.

2023-10-09_15-05-10.mp4.gif (1×718 px, 253 KB)

@hueitan The only thing that failed was that it represents with "Remove", not "Delete" for the trash bin icon. If that is fine, can you update the task description to say "Remove" besides "Delete"?

Status: ❌ Fail
Environment: WordPress Dev Version 1.11.0; Lastest patch: 10/3
OS: macOS Sonoma 14.0
Browser: Chrome 117
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/wp-admin/post.php?post=6&action=edit

✅AC1: The overflow menu (kebab menu) should be placed adjacent to the close icon.

image.png (967×895 px, 125 KB)

✅AC2: The dimensions for the touch target of the overflow menu should be at least 44x44 pixels.- Is this what you are talking about?

2023-10-13_14-54-11.png (964×777 px, 128 KB)

✅AC3: Tapping on the overflow menu should display the options menu below it.-Seem to have the old design for mobile in DEV.

2023-10-13_14-58-07.mp4.gif (960×808 px, 473 KB)

❌AC4: The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon). -It's represented with "Remove", not "Delete" for the trash bin icon

image.png (963×858 px, 128 KB)

✅AC5: Tapping "Change" should navigate the user to a search screen where they can find other previews to replace the current one.

2023-10-13_15-04-14.mp4.gif (964×818 px, 366 KB)

✅AC6: Tapping "Delete" should remove the preview from the word.

2023-10-13_15-05-39.mp4.gif (972×838 px, 507 KB)

✅AC7: Tapping outside the menu should dismiss it.

2023-10-13_15-06-56.mp4.gif (962×816 px, 303 KB)

❌AC4: The options menu should contain two options: "Change" (represented with a pencil icon) and "Delete" (represented with a trash bin icon). -It's represented with "Remove", not "Delete" for the trash bin icon

yes, this is confirmed. we remain "Remove", same as desktop.