DEV Community

stereobooster
stereobooster

Posted on

Small bits of web UX

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.

Top comments (11)

Collapse
 
hossam_mo7amad profile image
حسام محمد^3

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.

Collapse
 
stereobooster profile image
stereobooster

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

Collapse
 
frantisekmasa profile image
František Maša

User can still submit form again using refresh.

Collapse
 
stereobooster profile image
stereobooster

Exactly why would you use redirect with GET, it will not submit form again.

Thread Thread
 
frantisekmasa profile image
František Maša

I reacted to the original comment ;)

Collapse
 
ianandhum profile image
Anandhu Manoj

This post is going to be one of my reading list heroes! Very Useful information. Thank You.

Collapse
 
stereobooster profile image
stereobooster

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.

Collapse
 
moe64 profile image
Moe

this is super helpful! I really like this one, "GET request for searches"!

Collapse
 
stereobooster profile image
stereobooster

You mean like graceful degradation for HTML forms? I'm not sure I understood you.