Small bits of web UX

stereobooster - Sep 9 '18 - - Dev Community

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?

Follow me on twitter and github.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .