Page MenuHomePhabricator

Add default tooltips to customize toolbar screen
Closed, ResolvedPublic

Description

Background

Based on user testing (summary ticket reference to come from @scblr), users are not understanding how to drag and drop items to customize their toolbar. There are two theories on the team as to why that may be:

  • The onboarding needs to be improved
  • The drag and drop action is too difficult and should be changed completely

Adding more onboarding is a lower effort technical task than changing the interface. We will update onboarding and test if the improvement makes a difference.

The task

Add a default tooltip (referenced as toast message on Slack) like the one demoed here.

Copy for the label (left tooltip):
Press and drag an item to reposition it.

Copy for the Icon (right tooltip):
Hold the drag icon to move the item.

Design

N/A

APK: https://github.com/wikimedia/apps-android-wikipedia/pull/3173/checks

Event Timeline

scblr renamed this task from Add toast message to customize toolbar screen to Add default tooltips to customize toolbar screen.Feb 23 2022, 2:26 PM
scblr updated the task description. (Show Details)

Hi @scblr
Thank you for this task.

Is this what you intended: https://youtu.be/c5WujpV_b3E

I feel this also might be hard to discover, and the drag handle tooltip is kind of hard to trigger even. How about our regular tooltip?
Please lmk your thoughts.

You definitely got the right concerns @Sharvaniharan — that’s why we need to perform usability testing after updating this feature. I’d still keep the default styled tooltips for now and show it every time users want to tap items in this list. We’ve seen in usability tests that people are ignoring the blue tooltips that are shown just once.


Three comments on your demo:

01) Can we increase the icon’s contrast ratio? Ideally to color_group_11.

02) Please update the copy from:

Move the items on the list by dragging this icon

To:

Move list items by dragging the icon on the right for LTR languages — respectively Move list items by dragging the icon on the left for RTL languages

03) Can we also show this tooltip when users are trying to tap the label of a list item? Basically show the tooltip every time users are tapping an item.


Thanks!

@Sharvaniharan is there something we can do about this:

https://www.dropbox.com/s/jdatzsqied77w71/screen-20220308-193511.mp4?dl=0

Tooltips get displayed with a severe delay — can we 1) either show them immediately or 2) limit the amount of times their shown after tapping multiple times? (for both tooltips)

Hi @scblr

The problem with this is that when you click the first item, it does appear right away, but on the subsequent ones, we have to wait till the previous one disappears until we show the next. I have reduced this time from 5secs to 3 secs. We cannot reduce it too much because on the other hand when a user just clicks once, they should be able to read the message in that time. 3 secs looked good to me, please let me know your thoughts.

Also, this is a very basic and familiar experience for Android users, to wait for a toast to clear. This will happen right now in any other part of the app that uses toast as well.

Sounds good @Sharvaniharan 👍 FYI → I briefed our newly hired UX copywriter Jacqui Clydesdale to review the copy of the tooltips before we perform another usability test. It’s a challenge, as we’re trying to educate users about two separate interaction patterns that are achieving the same result (moving a list item) . She’ll have a look at it before EOD tomorrow. I’ll update the task then.

@Sharvaniharan @JTannerWMF

Alright, I talked to Jacqui (UX writer) and walked her through the interface and its challenges. Here’s the copy she suggests for the two tooltips:

Copy for the label (left tooltip):
Press and drag an item to reposition it.

Copy for the Icon (right tooltip):
Hold the drag icon to move the item.

More details here. Please update the tooltip copy @Sharvaniharan — thanks!

Hi @scblr
Thank you for the review and research on copy... This new copy definitely makes it more clear. Updated it. Please review :)

thanks @Sharvaniharan — this looks good to me! ✅