User Experience at Hello Erik

The Ouija Toggle

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.

planchette

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…

toggles

Well, maybe that isn’t true. There are all sorts of styles and implementations. Some are pure CSS, some are javascript. Some you can only click, but some you can slide. Some you can click or slide, and it even works on a touchscreen. Some are animated, some aren’t. There’s really no standard way to do this. And some might say, no good way…

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.

Screen Shot 2013-01-06 at 6.59.26 PM

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 our implementation. Let’s be real clear – I did none of the actual programming, Shaun did. I just did the styling and helped with the idea. It’s all written to be a javascript component that can be integrated into a project easily, and then just called and tied to simple <select> inputs. Unlink many other similar toggles, we don’t use a checkbox. We wanted the option to have more than just a single boolean option. This uses a little more code when you want a on/off option. You have to use a 2 option dropdown. For now, we’re okay with that.

Here’s what it looks like… we didn’t reinvent the original look that Norstrom had in his post.

ouija1

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.
ouija2

Multiple Values

Adding more than 1 value is easy, you just add more options into the select input:

ouija3

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.

As far as its merits as a UI; I haven’t tested it out with anyone yet. Part of it was just the fun of dragging the little planchette window around. It’s easy to tell what is selected; the blue one with the box around it. Is it more clear than the traditional style toggle implementation? I don’t know. Maybe now that I have the javascript component to use in projects, I can get it some real world investigation. Or maybe I can just use it to consult the spirits. I am but a vessel. 

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.

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.
  • Ashley Dowsley

    Wow, Erik. I’m impressed by your obvious outside-the-boxness when it comes to creating things and am glad I came across your blog. I appreciate an end product that may not ever be necessary, but the design world is better for it nonetheless. p.s. Special props to Chris Norstrom, too.

  • Davide Rizzo

    This is really nice but I think it might have been better off using radio buttons rather than a select. That way the labels/inputs could have been the actual elements making up the toggle rather than hiding the select completely and re-creating it from scratch. Doing this would also mean you would inherit the ability of labels to toggle radio states and preserve the accessible keyboard functions of them too.