NobodySpecial's Blog (Testbed)
A mirror of https://git.envs.net/NobodySpecial/Blog
RSS Feed

Modern Web Design

I recently stumbled upon a website, SAFE House [archive] [screenshot], which provides a safe place to live for children in abusive families. While I like what they're doing, one particular design aspect caught my attention, and not in a good way. As I continued thinking about this design aspect, I started to think about other common web design issues, which inspired me to write this article.

ESCAPE

So, first off, what was the issue I noticed? Was it the fact that they quite obviously used a wix.com theme I've already seen a thousand times? Nope. Was it the fact that the header bar on their desktop site takes up way too much of the screen and isn't even positioned properly? Nope. It's their little red "escape" button, which is intended to allow visitors to conceal their use of the site, but instead only makes things slightly more dangerous for visitors who actually need it.

The point of the aforementioned escape button is to provide visitors a quick way to conceal their activities. This makes sense, considering abusive parents might not like the idea of their kids leaving. Their kid leaving means they can't hurt them, and the inability to hurt their kid takes away their sense of control. As such, the kid trying to leave might be interpreted as an offensive and selfish act. Yeah, it's fucked up, but some people actually think that way.

The problem isn't with the idea, it's the execution. The button works reasonably well on desktop, if you overlook the fact that the header bar takes up half the screen on a standard 1366x768 display. However, it takes about a second to load the Google homepage, during which time the original site is still clearly visible. The other issue is on mobile, the button scrolls with the rest of the page. This means a user would have to scroll all the way up, click the unnecessarily-small button, then wait said second for Google to load. For obvious reasons, neither case is exactly great for the intended purpose.

The solution is pretty simple - have a standalone element (independent from the title bar) which is pinned to a fixed position on the screen. When the element is clicked, it runs a JavaScript onclick event that hides the page content immediately, while loading the content of its target (in this case, Google). Also, make sure the button is absolutely massive, so as to be easily accessible by even the largest of sausage fingers. The source to do this is pretty simple; just embed the following snippet somewhere in your page:

<script type="text/javascript">
    var escape = function(){
        document.body.style.display = "none";
    };
</script>
<a href="https://www.google.com" style="color: #fff; background-color: #ff0000; position: fixed; right: 0; top: 0; font-size: 300%;" onclick="escape()">
    ESCAPE
</a>

Note: Some versions of Safari on iOS seem to hide the browser's header bar without adjusting the HTML viewport. This leads to the button becoming partially-hidden. While I would consider this a browser bug and not a bug in my code, this nonetheless needs to be accounted for. Possible fixes include:

  1. Moving the button down slightly. This will give the button a small bit of room to move without going off the screen and becoming hidden
  2. Moving the button to the bottom of the screen, instead of the top of the screen. This works on the same principal as the first fix

The reason for the massive size is pretty simple - the larger the target element, the less precise the user must be when moving their mouse to the target element. This means the user can exchange that presision for movement speed, thus allowing them to click the button faster. The button must also invoke JavaScript to hide the page content immediately. This is because the extra time to load the target is extra time where someone can see what's already on the screen. And having it as an independent element at a fixed position means it won't end up interfering with the rest of the site's usability.

But this article is about more than just designing the perfect "escape" button for a website (especially since alt-tab, alt-F4, or win-D can all work just as well). So, after careful consideration (and by that I mean this is off the top of my head), I bring you:

NobodySpecial's cardinal sins of web design

This is not an exhaustive list, but I think it covers the basics. I guess the key takeaway is this: good web design is a science, not an art. Any good website accomplishes a goal. Whether it be informing the visitor of how terrible modern websites are, or helping the visitor get away from abusive parents. There are right and wrong answers as to how to do things. If you're designing a website, you need to design a website. Don't simply make one. And remember there's a lot more to web design than your flashy JavaScript animations (that really shouldn't require JavaScript).