Giving Users a Quick Disguised Exit From a Website

Chris Coyier //

A reader wrote in with a really interesting and important question. The answer might save people from harm or literally save lives.

I am redesigning a website for domestic abuse victims. The director of the program wants me to include a button that victims can click to hide the window if they are caught. I don't know what options are available for me regarding something like this. Any suggestions?

The first thing I thought of was the literal tech stuff: can you close a window with a button click? There is a window.close() method, so perhaps this would work?

<button onclick="window.close();">Close Window</button>

Nope. We're not going to be able to count on that. That will only close a window that was opened with JavaScript, which on a typical website isn't the case.

But would we actually want to do this anyway? Have you ever walked up to someone using a computer and they close their browser windows right as you approach? Even if it's a coincidence, it looks mighty suspicious doesn't it? I think we would specially want to avoid suspicion in this case.

A simpler and less suspicious action would be to redirect the page to something generic and benign, like weather.com. Another advantage here is that you can count on it working in any browser.

<button onclick="window.location = 'http://weather.com';">Go</button>

But we can do a bit better. What if the perpetrator walking in decides that the sudden change in websites by victim does look suspicious. Perhaps they will try and force the victim to hit the back button to see what they were looking at, or do it themselves. To avoid that, we should open the link in a new tab if possible, which is free from direct browser history.

If we start abstracting the JavaScript away from the button itself, we'll have:

<button id="get-away">Go</button>
$("#get-away").on("click", function() {
  window.open("http://weather.com", "_newtab");
});

The new tab won't have direct browser history, so pressing the back button won't go anywhere. That's good, but opening a new tab does look a bit different than just changing pages. If the perpetrator notices that, maybe they will click back to the last tab and see what was there. We can try and protect against that by changing the location of the original page as well:

$("#get-away").on("click", function() {
  window.open("http://weather.com", "_newtab");
  window.location.replace('http://google.com');
});

By replacing the URL on the original page, it won't add a new browser history item. So the back button will go back to the page before that. If the victim has browsed around a bit on the original site, the back button will return to those pages unfortunately. Perhaps the original site could use some kind of Ajax page loading that doesn't affect browser history to prevent this issue. As far as I know and have researched, there is no way to totally clear the browser history through JavaScript.

Another consideration is the location, style, and content of this "escape" button. You can already manually clear browser history, change websites, open new tabs, and close browser windows. The point here is doing it really fast in an emergency situation. So having a little button tucked away somewhere on a page doesn't do a lot of good there, especially since the victim won't have the ingrained muscle memory of getting to that button quickly. They will probably more likely go for controls they use more often like the windows close button.

Design wise, I think the best plan is to go big, obvious, and persistent.

That big green bar would be a fixed position full width bar. So it sticks to the bottom of the page no matter what. The text "Go" is simple, descriptive, and non-supicious (The word "go" is used all over the web). The green color matches with the word "Go" and isn't a danger indicator.

There is a question-mark link in there too, which could link to a page that explains what this enormous strange bar is for.

This is a good so far, but despite the enormous target, moving your mouse can be a bit clumsy and slow. Perhaps the victim is typing something when the perpetuator walks in. We could provide a keyboard shortcut to do the same thing clicking on the bar would do. The ESCAPE key seems appropriate.

Since we need to trigger similar actions in two different ways (key press or click) it's time to abstract the functionality into a function to keep from repeating ourselves.

function getAway() {
  // Get away right now
  window.open("http://weather.com", "_newtab");
  // Replace current site with another benign site
  window.location.replace('http://google.com');
}

$(function() {

  $("#get-away").on("click", function(e) {
    getAway();
  });

  $("#get-away a").on("click", function(e) {
    // allow the (?) link to work
    e.stopPropagation();
  });

  $(document).keyup(function(e) {
    if (e.keyCode == 27) { // escape key
      getAway();
    }
  });

});

The new key press "escape" works identically in Chrome and Opera. In Safari a new tab opens and replacing the old page but the new tab is blank (apparently you can't open a new window with a location from a keypress in Safari). Firefox will replace the current page immediately but block the popup by default unless you explicitly allow them on the site.

Notice I used the "keyup" event. It's tempting to use "keydown" to make it a bit more immediate, but unfortunately IE doesn't trigger a keyCode of 27 on a keydown of the Escape key.

View Demo

What do you think folks? Will that cover it as best as we possibly can? Do you have some better ideas for offering domestic abuse victims a quick disguised escape from a website?

Good Stuff from the Comments

  • Real life site using an escape method. Taken down.
  • That site hides the entire body when you initiate the escape (e.g. $("body").hide();). This way the hiding happens instantiously instead of waiting for next page to load.
  • Educating users about browsing privately is smart (e.g. Chrome's "Incognito" Mode)
  • Changing the text on the page (e.g. to random stuff pulled from Wikipedia) might be a less noticeable alteration. In case, say, the website being redirected too is too different from the original and may even give off more/less light from the screen.
  • Loading the page in an iframe would prevent additions to browser history, at the expense of usability.
  • If you can detect inactivity, redirect the page automatically after a reasonable amount of time. In case the victim accidently leaves the page open on the computer.
  • Because you can't erase browser history, maybe you should dump a bunch of benign stuff into browser history to bury older stuff.