3 Short July Frontend tips

Hey folks!

I'd like to talk about improving the Show password button, why a keyboard with big numbers is better than with small, switching pictures via and .

But before embarking on reading I leave the link on my Substack newsletter about UX and a11y tips. You know what to make

Let's go!

Improve the Show password button using focus moving

Did you think how you use show the password feature? As an example try to use it on Twitter.

After click on the button you have to click to the input field by hand and only then continue typing...

And what if after click focus will move to the input field automatically and you continue typing without clicks? That was done on ASOS. Check it out!

Use a keyboard with big numbers instead of small

Friends, now, I was filling in my birthday date in the Booking app.

When I taped on the text field I saw the keyboard with letters and small numbers. Sure, I failed by entering 8 instead of 9 and thought "Blimey... Need to fix". How often did you think like I?

And that just can be solved by the inputmode HTML attribute! The numeric value helps to display the keyboard with numbers by which easy to hit. Cheers!

Switch pictures via and

Folks, I condemn apps that don't allow me to use a keyboard Especially, when I want to switch pictures via or . The typical example is the iHerb web app.

If we open a gallery on the product page and push the key to look at the next picture the app will ignore us. Yep, why to allow using a keyboard...

Okay, let's check Booking where you can look at apartments' pictures without clicks using just the or keys. Cheers!

P.S.

I love to help people learn more about user-friendly UI. If you have any questions, please, use my email for communication [email protected]. It's free

Discover more free things from me

P.S.S
Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis.