Contacting the spirit world is not something to be taken lightly. You never know who is waiting on the other side. It is always best to have a licensed Medium there, or at least someone with an official Hasbro trademarked Ouija board. The last think you want to do is have your faulty seance equipment crap out on you just as grand-pappy was about to tell you where to find the buried gold. That is why when you Ouija, you want to be damn sure that you can understand the UI with which the spirits use to communicate with you! But before we get to the point of this post…
The UI of a Ouija Board
Did you know that the little thing you move around on a Ouija board, the thing that shows you the letters the spirits are trying to call out to you, is called a planchette?
a small board supported on casters, typically heart-shaped and fitted with a vertical pencil, used for automatic writing and in seances.
The planchette has a little window that you see the letter through. No ambiguity there – whatever you see through the window is what the long dead spirits are trying to show you. A great oUIja right? I didn’t know what it was called until I set off with my friend Shaun (the programmer) to design this new kind of toggle we eventually called a Ouija Toggle, based on the idea of a viewable little window.
What the world needs is another new web toggle
If you want a fancy toggle for your website or web app, there just aren’t enough options…
But that didn’t stop us from making one this weekend! Back in November, there was a Hacker News posting by Chris Norstrom about iOS style toggles. About halfway down, he talks about these slider toggles that instead of having the label move with the switch, the switch has a window in it and moves on top of the labels.
At the time, he didn’t actually have a working code model, but we wanted to try it. We built it in a jsfiddle real quick, and that was that. I wanted to use it in a few projects, but we only had the most rudimentary prototype and no real time to flesh it out. Now, probably 2 months later, we have a project that needs it, so we decided to build it out for real.
Our answer: The Ouija.js Component
Here’s what it looks like… we didn’t reinvent the original look that Norstrom had in his post.
That’s all there is to it. You can click on the window itself to move to the next option, click on the label to move to the option, or drag the window with your mouse. If you’re on a mobile device, you can drag or tap just like normal. Go try it right now.
How it Works
The implementation of it is very simple. Instead of trying to get all crazy with it, all it does is act as an illusion on top of an existing <select> input. So anything that the select has in it, or any events it is tied to, all work the same way in the Ouija form factor. Since it is just in sync with the select input, you can have the select tied to events reliably.
<select class="ouija words" style="display: none;">
Adding more than 1 value is easy, you just add more options into the select input:
<select class="ouija borderThickness" style="display: none;">
You can drag, click, or click on the active element to move through the options. The UI is all CSS so customizing it however you want is easy.
What problem does it solves?
The first problem it solved was something for us to do on a Saturday.
Check it out, in both senses of the word
If you want to see the example again, it’s right here @ http://shaunxcode.github.com/ouija/. If you want to view or branch the source on GitHub, please do so here @ https://github.com/shaunxcode/ouija/.
Please give us some feedback on what you think. It’s written in coffeescript if you want to branch it. This is just a toy right now, but there are places I want to use it where it could make sense. But in the end, it’s just another UX via UI exercise to see what happens. A rapid experiment.
Credit to Chris Norstrom for giving us this idea.