Just a very quick post (and to be honest a bit of a really simple one) but if I’ve made the mistake I’m sure others out there will and this blog is designed to give a little back to the industry so here goes.
Recently I added a little animated prompt to the Bristol Street website, it simply fades in on the page load and a couple of seconds later fades out.
Works a treat in terms of offering a little unobtrusive guidance to the user however what I found was that as the container fades out, the element was still present on the screen and as it overlaps some form fields which interact with click events, it caused a fundamental usability issue because the user couldn’t click through to the manufacturer dropdown or the search button to refine their search.
The rather obvious solution was that I can in fact animate the z-index property to overcome this. Within my fade out keyframe I simply set the z-index to a minus number and as the element transitioned it stacked below the form and the user was then able to select the options and refine their search as intended.