What are good effects to let the user know that webpage A similar to weppage B has become wepage B?

Design & UX
1

In a website I have webpage A and webpage B.

They are very very graphically similar; actually, their “fold” area of the screen view seems 99.99%. the same.

Moving between them back and forth is also extremely easy and potentially confusing because that the buttons to do so are also graphically very very similar and are also in the “fold” area of the screen.

In such a situation, what would be a good and fast less than a second “flash of color” kind of effect that I could use to indicate a new page load?

This is not a strict coding question but more of a question for your JavaScrip-CSS graphics art-directing part.

What will you choose to do to indicate the user about a page change?

2

That could be harmful to those with epileptic disabilities so you would first need to make sure that user animation preferences are detected before you animate the whole page (as you should be doing anyway for any animation). However to half answer your question there is a new feature in the pipeline that will cater for transitions between pages.

However, we used to have page transitions in IE5 back in 1997 and everyone hated them :slight_smile:

In my view if the user doesn’t know what page they are on then that’s a basic design flaw with your page identification. A user needs reliable feedback on actions they take and this is best done with correct labelling.

Misleading links and expectations. Usability mistake number 3.

On the departure side, the link has to be descriptive – say what you’re going to get. You want to make sure that once your expectations are set they are met too, though. Make sure that on the arrival side where the link goes accurately reflects what it describes.

Although color should never be relied upon as an important part of the website it can enhance the usability in cases such as simply having a different tint to the background or to a heading etc.

Doing a real crossfade between 2 separate pages is quite complicated (without the new API) and this article from CSS tricks shows a few examples (this was written before the new API).

1 Like
3

PaulOB, I agree that a color flash is not the best approach.

I would argue that a clear, accessible, centrally aligned (both horitontally and vertically) and good font-sized textual message, would be better.

Anyways, regarding a color flash between too very similar webpages, here is a nice, elementary, bland approach, that I have found (where A and B should come direct URLs).

window.addEventListener('load', () => {
	if (
		window.location.href.includes('A')
		||
		window.location.href.includes('B')
	) {
		document.body.insertAdjacentHTML('beforeend', `
		<div class="my_unique_modal_class"></div>
		`)

		newStyle = document.createElement("style");
		newStyle.type = "text/css";
		newStyle.innerHTML +=`
			.my_unique_modal_class {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9999;
				font-weight: bold;
				background: black;
			}
		`;

		document.head.appendChild(newStyle);

		window.setTimeout( () => {
			document.querySelector('.my_unique_modal_class').remove();
		}, 1000 );
	}
});
4

The load event doesn’t trigger until after page resources are loaded, so if there’s an image or script that’s taking a long time to load, your mask won’t show up until it’s done which might be well after the user has started interacting with the page. If you want to do it this way, you should use DOMContentLoaded for your event which triggers as soon as the HTML has be parsed.

You could use the newer <dialog> element to create your loading mask as well and skip the CSS stuff.

<dialog id="loadingOverlay">
  <p>
    Loading...
  </p>
</dialog>

window.addEventListener('DOMContentLoaded', function(e){
  const dialog = document.getElementById('loadingOverlay');
  dialog.showModal();
  setTimeout(function(){
    dialog.close();
  }, 1000);
});
1 Like
5

Interesting. The original usecase didn’t include images or any other media files but I shall take this into account.