Redesign tooltip for Organization Edit Form

[gigicobos]

Overview

As part of the Heuristic Evaluation Research the research team recommended the redesign of the tooltips for the Organization Edit Form. Issues listed below:

• Some tooltips are not accessible as the font and background colors are similar (Black and dark grey).
• The location of the tooltips is not consistent, either they are cut off, too far from the field it is referring to, or linger and cover-up subsequent tooltips.
• Tooltips do not work on the mobile version.

For further reference, review items # 2,4,5,6 from the Heuristic Evaluation to Features document, "Volunteers" tab.

Action Items

• [x] Review / update the size of this issue.
• [x] Create mockups for suggested new tooltips.
• [x] Present options to the team.
• [ ] Update the FOLA Design System file with the selected design.

Resources/Instructions

FOLA Design System Heuristic Evaluation to Features

Parent Issue:

#320

[souronion]

I redesigned the tooltip along with some other components of the data entry form. Here are the changes:

1. The title of every data field is now placed above the text box;

2. I used the help icon as an indicator of tooltips. If a data field has a tooltip, the icon will be displayed next to its title;

3. Every tooltip will point to its corresponding help icon, so it's clearer to users which data field it is referring to;

4. The "Confirmed" checkbox has been repositioned such that on a narrow screen, there will be more space for the textbox in each line;

5. I vaguely remember we had a discussion on changing the word "Confirmed" into something else. I used "Verified" in this mockup to show how it looks. We can talk about this further either in the comment section or at the team meeting.

Here's how it looks on desktop.

Here's how it looks on mobile.

[souronion]

Regarding the tooltip of "Verification Notes," I suggest that we display the instructions right next to the text box instead of putting it in a tooltip. Like this:

[souronion]

Hi team, I made some changes to the tooltip design:

1. Use a help icon to indicate a tooltip;
2. When a user clicks/taps the help icon, display the tooltip and replace the help icon with a close icon;
3. For longer text, the user can scroll up and down to view the full content;
4. When the user clicks/taps the close icon, dismiss the tooltip.

I felt that a close icon might be useful here since some people may prefer to leave the tooltip open when they click away/edit the data field. For example, they may need to refer to the tooltip when writing verification notes.

Here is a GIF to demonstrate the concept:

For data fields:

1. Desktop

2. Mobile

Example of tooltips with long text (e.g. Verification Notes)

For buttons:

[souronion]

Right now on a desktop, the tooltips are working pretty well except for the following two issues:

1. Low contrast ratio makes the tooltip of verification notes hard to read;
2. The description of verification notes gets cut off because it's too long.

What we want to achieve:

1. A quick fix for usability before we figure out how to rewrite the description/redesign the verification notes feature;
2. Make minimal changes to the rest of the tooltips given that they are working quite well.

One recommendation is to use a popover window(a top layer), instead of a tooltip, to display the instructions.

• A user can trigger this top layer by clicking a help button;
• Scrolling is enabled to allow for longer text;
• "Close" button to dismiss the top layer.

Note: A user should be able to edit the form when the popover is open such that they can refer to the instructions while typing.

---

On mobile, other than the issues on verification notes, the main problem is that hovering does not work on mobile devices.

One recommendation is to use help buttons to indicate tooltips only on the mobile version.

• We can reuse the popover window described above to display instructions on mobile devices;
• When a user taps the help button, the popover gets triggered;
• When they tap the close button, the popover gets dismissed.

[souronion]

Here's another small issue that is not directly related to tooltips.

When a textbox is empty, the title of the data field is displayed inside the box. This leads to two problems:

1. The form looks a little messy since the textboxes have different styles;
2. At first glance it is unclear to users which boxes are empty.

The recommended solution is to change the setting/style of the textboxes.

[sei1122]

As I remember, this design is done by @souronion. Probably it hasn't made a development issue.

[sei1122]

@itsmylam worked on and here is final design https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=9097%3A16102&t=duH9vL8z8OIiEdiS-4

[fancyham]

Figma: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=9097%3A16102&t=duH9vL8z8OIiEdiS-4 PDF: Finals.pdf

All tooltips appear on hover or click for desktop and mobile (some mobile platforms now have 'hover' events — i.e. the most recent iPad with Apple Pencil, or while using a mouse. Samsung may also have it with capacitative hover)

Desktop tooltip - single-line:

Desktop tooltip - large paragraph:

Mobile tooltip - single-line:

Mobile tooltip - large paragraph:

[fancyham]

@hanapotski @entrotech Not sure what the current process is but I tagged this issue 'Ready for dev lead' and put it on your board's triage pile AND assigned it to you. That's probably overkill so let me know what you prefer!

Also, please comment here with your review notes — if we need to make changes or if it looks good. Once you let me know it's moved into implementation, I'll close this issue out.

[staceyrebekahscott]

@hanapotski @entrotech I triaged this issue and added it to your Backlog column.

Still experimenting on this process for when issues are ready for Dev, so please let me know any feedback you have.

[fancyham]

During development and preview, the design team felt the tooltip needed more differentiation from the background, so we tried a dropshadow and one of the darker variations. After two rounds of voting, the dropshadow came out ahead by a good margin, so we’re going to go with that.

[fancyham]

Done! Thanks team!