I'm not sure how to call those. This good tone for web experience. This is not a11y. This is rather what people expect from the good website.
Use GET redirect after successful POST submit
To make sure user will not submit the form twice, do a GET redirect after successful submit, this way if the user will refresh after submit second submit won't happen
GET request for searches
If your website has search functionality use GET request for it. This way the user can bookmark search or send a link to a friend.
Block submit button while doing AJAX request
If you use AJAX for submitting form instead of classical POST don't forget to set disabled attribute for submit button to prevent double submit.
Use spinner while doing AJAX request
The user should be aware something is happening in the background and not broken.
Use a tag for navigation
Don't use div or span as clickable targets for navigation. a tags support focusing, shows visited links in different color, crawlable by search engines, they show proper pointy cursor on hover, they support Ctrl-click (Cmd).
Respect Ctrl-click (Cmd) on a tag
If you use JS to catch clicks on links to do internal navigation, make sure you pass through click event with Ctrl (Cmd) button pressed, it will open link in new tab.
Don't use a or div or span tags for buttons
Use button instead. Buttons are focusable (in some platforms), but don't have visited state or Ctrl-click (Cmd).
Use underline style for a tag
This is a soft requirement, but you have to admit sometimes it is hard to tell if given text is a link or not. Bonus point for having a different color for visited links.
Make 404 page clear
It is a favorite thing of fake websites to response with search results page instead of 404. 404 page should be clear, minimal information should be there, the user needs to clearly understand this is not the page they looking for.
Don't ask the user to submit a report about missing page, you have web server logs.
Use deep-linking for SPA
URL is one of the core values of the Web. You can bookmark it, you can send it, you can open a similar state of the application in a new tab.
Don't use anchors for deep-linking
We need to admit there were dark times in the web development when the anchor was the only choice for deep-linking (http://example.com/#/navigation), but now we have history API. The server can't get information about the anchor part of URL when the user reloads the page.
What your favorite small things for web UX?
Top comments (11)
I loved the tips keep it awesome 👍👍🔥🔥 I just had a thought on
"Use GET redirect after successful POST submit"
I really like that, but Don't you think it would be better if I reset the form and give him a success alert. Because you know he may want to make more than one submission.
There is no limitation on what next page would be, you can redirect to the same page with the form, and success notification can be passed through session
User can still submit form again using refresh.
Exactly why would you use redirect with GET, it will not submit form again.
I reacted to the original comment ;)
Additional tip: Always use POST as a fallback!
You mean like graceful degradation for HTML forms? I'm not sure I understood you.
I mean: don't enforce AJAX. Additional, not "instead".
This post is going to be one of my reading list heroes! Very Useful information. Thank You.
After this post I thought - there should be somewhere place where these things are collected, I totally saw it before. And later I found it at nngroup.com/topic/web-usability/. There is plenty to read.
this is super helpful! I really like this one, "GET request for searches"!