FreeTubeApp / FreeTubeApp/FreeTube

[Feature Request]: Make label visible for most icon buttons

Open
#4,259 0 comments 0 reactions 1 assignee Claimed by @kommunarr View on GitHub
E: ease of use improvement
Dominant language
Vue
Stars
21.9k
Forks
1.5k
Avg merge
1d 14h
Merged PRs (30d)
62

Description

### Guidelines

- [X] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the feature request I want to file, without success.
- [X] I have searched the [documentation](https://docs.freetubeapp.io/) for information that matches the description of the feature request I want to file, without success.
- [X] This issue contains only one feature request.

### Problem Description

Most `ft-icon-button`s in FreeTube have no visible label and rely on the `title` attribute (& the scant meaning in the icons themselves) to convey meaning. Here are the issues with this:
1. They're not for everybody: buttons without visible labels preclude most mobile users and impair many disabled users from being able to actually see what the labels are 1. To quote Jacob Michelini from his article "Unlabeled Icons: Sacrificing Usability for Aesthetics":
> For low-vision users, many icons contain tiny details that make them indistinguishable. For screen-reader users, they are totally unreadable unless tagged properly. For users with fine motor impairment, the tiny unlabeled icon you chose to just barely fit the UI is a nightmare to tap accurately. It’s also a nightmare for all users when they try to operate your app with one thumb while carrying groceries on the bus.
2. It's a bad user experience 1 2 3 : it's not immediately intuitive what all of these buttons do just by looking at their icon, and hovering over them each time you want to check is not fun or fast. We have gotten dozens of GitHub issues raised about "missing" functionality on sharing videos, downloading videos, et cetera — and I don't blame the people who make them.

To quote the Nielsen Norman Group:
> And always include a visible text label. As Bruce Tognazzini once said, “a word is worth a thousand pictures.”

Sources:
1. https://uxplanet.org/unlabeled-icons-sacrificing-usability-to-look-pretty-415408a0e115
2. https://axesslab.com/icons-ruining-interfaces/
3. https://www.nngroup.com/articles/icon-usability/

### Proposed Solution

Add labels to almost all buttons in FreeTube that are missing them. Make this the default behavior for `ft-icon-button`s. Exceptions should be rare and only in cases of universal intelligibility. Examples of buttons that could meet this definition: `Save video`, `More Options`. Here's a heuristic by Nielsen Norman on this:
> Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.

### Alternatives Considered

None other suffice.

### Issue Labels

ease of use improvement

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.