Back arrow too close to audio control?

When I’m doing lessons on my iPhone, as much as half the times that I tap to play the native speaker audio on the Reading page, I wind up regressing to the “Meanings” page instead.

My thumbs aren’t particularly huge or clumsy. I usually can avoid it by tapping way over towards the end of the speakers’ names, but having the border for the back arrow container cut so close to the little audio :speaker_low_volume:icon on mobile still gets me. (or is that がつ me?)

I would love to have a little more air between those two elements. Indent the audio container a smidge with a spacer or margin, or trim the vertical stretch of the navigation container?

Possibly a record for world’s tiniest feature request. orz

5 Likes

I’ve been having the same issue, so will second this tiny feature request!

1 Like

While I feel your pain, I want to add that giving more space to the arrows will take away from the content. There are couple of ways to fix this and one is making the navigation area wider consequently reducing the space for content. This part of the app is a pain to build in my experience.

Additionally, I think you can click on any part of the audio text and don’t necessarily have to click the icon as that will help avoid your issue.

Understood – I’m a designer as well so I know the woes of pixels-in, pixels-out. That being said, I’m not suggesting the arrows get more space – I’m actually suggesting less space, as there’s no serious UI reason for the live click area of the back arrow to extend so far down below the actual “go back” angle bracket.

If it’s a deliberate concession to lazy thumbs used to tapping anywhere on the left margin on Kindles and other devices to go back (valid!), moving the speaker icons one or two ems to the right is a pretty good fix with minimal footprint, too.

The character count on the audio sample lines is a rather fixed value, so unless they add a speaker named Mitsukihikari with a Yamagawaokachiyogamizu accent there isn’t likely to be any content crowding!

While tapping deep on the names is a solution, it’s not good design, and despite being very familiar with this “fix” I still wind up going back by mistake several times a day. It’s the kind of thing I love to hear about from my own users because the quality of life improvement usually far outweighs the effort to fix it. :slight_smile:

1 Like

Good suggestion but I don’t see how moving the icons one or two em is a good suggestion as that will inadvertently cause other items to move to maintain alignment. You wouldn’t want only the icons moving in such a case. Maybe you could draw a mockup to give an illustration of what you mean.

Having the buttons go far down is to allow for flexibility, if it were just a small button restricted to the header region now that will be a pain point for most people as they wouldn’t want to scroll up just to use the buttons consequently leading to bad design.

I’m not sure why adjusting that one element slightly away from the backnav live area would necessarily disrupt the entire rest of the layout? There are plenty of basic CSS ways to move type elements (as in demo image below) without moving the relative placement of the container itself. Even a bitsy shift like this would make for a measurable improvement in mis-taps for me. I don’t use a gigantic XL smartphone or a phone stylus, so adjacent live areas like this can be quite easy to fall afoul of!

If for some reason the stylesheet is so rigid that an interior left margin adjustment, spacer element, etc are not possible, then replacing the little speaker svg with longer/more padded svg, unicode character or CSS button could lead taps just a bit further right and away from the Danger Zone.

For better or worse, in a lot of UI situations a speaker :speaker_low_volume: or :play_button: is the ONLY element that will activate a playback, unless something else is obviously styled to look “live”.

If the only solution is just to tap well into speaker names, then making it more visually obvious that the names are live elements that will activate the playback is a good idea, and also easy to do with a bit of element styling!

I’m often doing WK during brief moments of downtime in an otherwise overlong and frantic day, and I’d rather devote my mental energy to remembering kanji, not “oh right, this is the one place where I should NOT try to click the playback icon.” :wink:

1 Like