A Reader of a Web Page Has Specific Expectation Levels

A simplistic project posted on codepen.io demonstrates what would be a very irksome feature on any website: the usage of JavaScript to slow the speed of the user's mouse cursor without warning. Moving the cursor across the project page itself reveals that there is an invisible cross-shaped area stretching across the page so that four equally large rectangular regions of the frame are the only areas within which the mouse cursor can move uninhibited. Moving the mouse across this invisible boundary slows the cursor down as if the area encompassed within the cross-like shape represents a much wider stretch of space that has been visually compressed while retaining the time it takes for a cursor to travel across it. The difference in the scrolling speed can only be made to appear negligible if the viewer very quickly moves the mouse a lengthy distance.

Even many fairly inexperienced students in web design can tell that this sort of jarring manipulation of the user's capacity for input flies in the face of acceptable user experience design. By default, any reader of a web page would never expect the cursor of their mouse to behave with arbitrarily delayed movements because there is psychological appeal to the cursor being free to move in the desired manner at all times. This knowledge may not always be apparent to workers managing the business aspects of a company the website represents, however, so a web designer should be ready and willing to stress the importance of smoothly flowing UX design to them and use this as an example.

The syntax resulting in the functional Codepen project can be directly viewed by selecting the "Editor View" option in the drop-down menu of the "Change View" button. Doing so reveals that this demonstration, unlike most Codepen projects, relies on exceedingly simple syntax spread between separate CSS and JavaScript files. The CSS document's contents dictate the stylistic appearance of the project page and define the appearance of the black cursor-shaped object that the JavaScript code uses as a "replacement" of the user's normal cursor within the boundaries of the page. For more information click here https://codepen.io/gunderson/full/GJJPpV.