This content originally appeared on DEV Community and was authored by DEV Community
Give the chance to fix the incorrect password
Folks, how often did you make mistakes when you log in on apps? ๐ค
I'm a man who does it every day. I noticed apps reset my password if validation is failed. The typical example is Amazon.
If we enter an incorrect password it will be reset after validation. Oh... I'm just mad because that isn't user-friendly ๐ค๐ค๐ค
And I scream, "Alleluia!" Thank you so much to Booking! ๐๐๐ Their app doesn't do that. If we make a mistake with the password it isn't reset. Thus we can fix the mistake instead of entering a password again ๐๐๐
Verbs are more understandable than nouns
Folks, I'd like to discuss one from more disturbing to me questions ๐ค
There is an approach of using nouns for elements that lead to action. For example, there is a link that looks like a bell ๐ on Etsy. If we hover it we'll see the tooltip with the "Updates" text.
I noticed users with little web experience have some problems with understanding that. They don't expect what happens after a click.
In this case nouns aren't informative because we are used they represent an object. We think about the meaning of this object. So when we see the "Updates" text we think "What that means here?" ๐ค๐ค๐ค
In contrast, verbs represent an action. I found the excellent "View notifications" tooltip on Booking. The "View" verb calls for viewing notifications. So users think, "Well, I'll view notifications". They don't think, "What that means?". That's clear ๐
Use focus moving to remove additional clicks
Folks, today I want to tell you about how we can improve filters which include a too-long list. We often face it on e-commerce websites. My explanation will be based on the filter by brands on Asos.
When I click by it I see the list of brands, the input field for searching, and the button for choosing all brands. If I use a mouse I will click one, two, three .... by all need brands. But what will happen if I can't use a mouse ๐ค๐ค๐ค
For example, I'll use a touchpad ๐ฉ ๐ฉ๐ฉ Did you be angry when you have to scroll a too-long list using it? I'm, yes! ๐ค So I really love I can use the search to filter brands โค๏ธโค๏ธโค๏ธ
I just type a brand name and choose it. But to use that, I have to make to click by the input field. And I don't know why๐คฆโโ๏ธ๐คฆโโ๏ธ๐คฆโโ๏ธ
I offer to move focus on the input field immediately after opening the brand list. Then I can type a brand name and choose it and don't do one additional click ๐๐๐ And, if I use a mouse that change doesn't affect this interaction because I'll choose brands like did that before ๐
Separate a country code from the main part of a phone number
Folks, a few days ago I was filling in my phone number on Preply. When I saved changes I've made the mistake.
Sure I wanted to fix it. So I started to edit that, push ctrl+A and delete keys. Oh... And I saw the country code was deleted.... So I had to fill in my phone number with +7 (code my country) ๐คฆโโ๏ธ๐คฆโโ๏ธ๐คฆโโ๏ธ
That was terrible ๐ค But I thought that may be a new advice. So I started to research and found the great example on Airbnb ๐
When we fill in a phone number a key code is a separate part. Thus if we made a mistake we can select all, delete and start to fill in it again without a code country. Minus one action. Awesome! ๐
The bigger clickable area, the better user-friendly interactive elements are
Folks, I'd like to talk about user experience with interactive elements. Sometimes that makes users suffer ๐ฉ๐ฉ๐ฉ For example, on Booking there are buttons that have sizes that are equal to their clickable area.
The problem is in this case users have to hover on directly the button. If users without a motor disability can do that that a click on such an element is a nearly impossible task for users who have them ๐ญ๐ญ๐ญ
Thank you so much, Asos! ๐ ๐๐Guys just expanded the clickable area with saving visual button sizes. So users haven't to hover by directly element ๐๐๐ They can click close to the button and pictures will be switched!
P.S.
โค Thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis.
๐ช Get more free tips directly to your inbox
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-15T16:50:05+00:00) The 5 Short Frontend tips for March. Retrieved from https://www.scien.cx/2022/03/15/the-5-short-frontend-tips-for-march/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.