For Recognize, we wanted the error page to distract the user from errors. Although errors are extremely rare, they are nevertheless jarring experiences.
Create a distraction on your 500 error page.
To make our 500 error page more interesting we added a photograph shuffle puzzle. To take that puzzle to the next level, we chose an adorable photograph of a kitten.
We’ve received positive feedback regarding our puzzle.
Now you too can add a kitten puzzle to your 500 page
Step 1. fork my puzzle on github
Step 2. Rename index.html to 500.html
Paste the entire package (minus the README) into your public directory where you keep your 500.html page. Re name the index.html as 500.html.
Step 3. Edit 500.html and CSS
Put your important meta data into the head of your new 500.html and update the introduction html and content. There is a bunch of CSS that you will probably want to cut out. Out of box it is somewhat space themed.
Step 4. Put in your own photograph
Make sure to change the image. Has to be 500x500px. This is the image you’ll want to update: https://github.com/grandecomplex/JS-Picture-Puzzle/blob/master/_ui/img/image.jpg.
And now you have a puzzle as your 500 page! Users are successfully distracted!