An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
The 4 Short Frontend tips for April
The Esc key is a very useful pattern!
Folks I have pain! I'm a user who tries to use a keyboard most as it's possible. I don't like additional actions. In this post I'd like to tell about the pattern of using the Esc key when we design web interfaces.
Unfortunately, when I use web interfaces I meet that I can't use the Esc key for canceling my action. For example, I showed the Pinterest solution when users login.
After when users push the log in button they see a modal with the login form. But if we push the Esc key it doesn't close. So users push have to use a mouse for closing the form. That's sad!
I made research and came across a Booking solution. When users select an interface's language they can push the Esc key and the modal will close. So users don't have to do additional actions with a mouse. Just one push and the action is canceled!
Don't make users switch caps letters to lowercase
Folks, have you noticed that when you fill in an email you have to switch caps letters to lowercase?
The typical example is the login form on iHerb. If we push on the email input field we see a keyboard with caps letter. And we have to switch it to lowercase for starting filling in
But most emails start in lowercase letters. So showing a keyboard with lowercase letters is more user-friendly because that doesn't make users do additional actions.
And what's awesome is that might be done just adding autocapitalize="off" to an input element. And a browser will display a keyboard with lowercase letters And it's all! Just a simple trick!
A digital keyboard make code entering easier
Folks, there is a practice to show a keyboard for entering a telephone number always when users need to enter digital type data. For example, that is when users log in Telegram on the website.
When users enter code they might be confused because they don't expect these symbols such as #, *, etc. So they might make mistakes
I solve this problem using the inputmode attribute. The numeric value allows showing a keyboard with the digits without special symbols for entering a telephone number. I hope that helps users avoid mistakes
The button is the important path of the "Show/Hide password" pattern
Folks, I really love the "Show/Hide password" pattern Unfortunately, I see incorrect implementation sometimes where the button element is missed.
So users can't show or hide a password using a keyboard. They have to use a mouse or other pointing device You can check out it on Booking when you log in.
Also I found the better approach on Airbnb. On this website, users can use the keyboard to quickly focus from the field to the button using the tab key. Then they push the enter key for showing or hiding the password.
The one more thing is when the button is used screen readers can detect it for interacting. So the button is the important path of the "Show/Hide password" pattern that improves accessibility and user experience
P.S.
Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis, Spiridon Konofaos.
Get more free tips directly to your inbox
Original Link: https://dev.to/melnik909/the-4-short-frontend-tips-for-april-4e00
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To