Is this rotating cube interface user-friendly?

Question

I'm working on a prototype for an innovative form interface, where different parts of the form are shown on different sides of a cube. The cube rotates, and the user can fill it out as the cube spins. Here is a working example.

To me, it seems like a pretty robust solution to our problem (i.e., before, our forms took up too much space on the page and were extremely boring), and it feels pretty usable to me, but this approach may have some user-experience problems I don't know about.

Does this seem like a user-friendly model? If not, what can I do to improve it?

Answer 1

I filled in the form with some mainly dummy data (see below) as I know you said this was just a working example. My only real concern with this whole design is that the input fields do not accept input unless that face of the cube is actually visible. I think that would be annoying for most users to be typing into an input field they cannot see and then discover that when that face comes round again that that field has lost all the stuff you typed.

Luke Wroblewski has some great info on his site with respect to signup forms and it's worth taking a look in order to fine tune the layout. I noticed the street address details were all on one line, and I'd suggest splitting up at least into street and zipcode or postcode, with another optional field for more complex addresses. Check this article on UXMatters for dealing with international addresses in forms.

I'd consider whether you really need to get the social security number at first sign up. If it's definitely required, then I'd suggest giving some inline help as to why it's needed as some users can be a bit funny about that sort of detail. If possible consider obtaining information via gradual engagement.

I'd probably choose a less vivid green, as it's a bit offputting, and change the red text to a different colour. You can use the Colorblind Web Page Filter in order to see how it looks to colour blind users. Don't be afraid to use more colours - but not too many! Smashing Magazine have a 3 part article on colour theory.

I think the whole concept has a lot going for it and once the main UX issues have been ironed out it's going to look pretty slick. I think users will love the novelty of it. Sign up forms are so dull these days. This article on A List Apart about why sign up forms must die (again by Luke Wroblewski) is spot on. I think this example might just bang the final nail in the coffin of sign-ups, so good luck with it!

Answer 2

Serious answer: it's terrible

To improve it, you could make it not be a rotating cube.

The main problem is that I can't control it. A good user interface makes the user think "hey, I am awesome! Look what I can do!"

This makes me think, "holy crap, I suck. I can't even fill out a form." I have to keep a 3D mental model, fill stuff in upside down, and deal with text displaying at an angle. It's like trying to play guitar with handcuffs on.

If space on the page is a concern, use an accordion form. Then the user can see the whole form, easily gauge their progress, and display only what they need at the moment.

Silly answer: it's great!

I'm glad to see you freeing forms from their 2D shackles. Can you abstract this into a library that constructs N-sided 3D shapes, where N is the number of form sections I need? If the math is too hard, maybe we can re-arrange our forms to fit easy-to-render shapes - break them into 12 sections instead of 11, etc.

Also, let's have more blinking lights.

Answer 3

NO. In any way, even if you make it a triangle or any geometrical shape, the answer will be still NO.

I visited your working example (guessing is a beta or something). I tried to fill the form fields without luck. I tried to read what it is written, again with no luck. Then, I closed the tab.

I read again your question, re-visited the cube and exited after 1 sec, saying "you gotta be kidding me".

Well concluding my answer and in my eyes this is not a good UX. It is far from good. Web is getting easier and easier, why do you want hard things?!

My answer to your question is NO. For sure.

Answer 4

Okay, I feel kinda mean picking it apart but there are some things that really bug me about this.

1. I'm not sure what font you're using, but the kerning looks really weird to me
2. 32px is a pretty standard width for data entry controls (I think you're using 50 or something)
3. Typically, drop-down lists for states are sorted by zip code, starting in the northeast
4. The submit button should be right-aligned IMO
5. You should probably replace the emoticon with an actual image of an emoticon (text-based ones are reserved for textual data exchanges (emails))

But man, other than that, it looks really, really good.

Answer 5

1. I don't know how you're constructing your cube, but it looks like the cube gets distorted during rotation.

2. an automatically rotating cube is just silly and annoying for any user - having the possibility to rotate the cube (with a swipe for example) might make it quite fun

3. Text should never be presented upside down. Ever.

4. You haven't made use of the third dimension in any significant way other than prettiness. You could have for example made rotation to the left or right being the action to present the next/previous page of the form. Rotation up to get help for the current page of the form, rotation down for legal notices, but these are hidden from view in normal use, which is what you would want.

Answer 6

I love it and think it could be really useful. but i'd like to see a version with all the corners on the inside.

Answer 7

It honestly sounds like you're at the stage where you need to ask more questions.

Do your statistics suggest that a large number of people start the old version of your form but fail to complete it? That might indicate boredom or insufficient incentive to get through a boring task. While novelty (such as a cube interface) may help, you might have more success by reducing the form's length. If this is a crucial form that people are forced to complete, then you should error on the side of boring but impossible to be confused by (i.e. not a cube).

Do people tend to have the highest probability of quitting at a small number of specific questions? (e.g. Hi. We'd like you to participate in an anonymous survey! Q1: What is your social security number?) That might indicate something else, like one of the pieces of information your form requests is something users are uncomfortable sharing. If this is the case, a spinning cube is definitely not the answer.

Ask questions like the above, and then ask yourself how the cube interface addresses them. If all it does is "be novel" then you may have a problem. One person's novel is another person's confusing.

Personally, I'm having a hard time coming up with how a cube interface really adds anything meaningful to the process of filling out a form other than adding eye-candy. Filling out a form is a linear process. How does associating different fields of the form with the sides of a 3D object help the user fill out the form? Could having adjacent fields on different cube faces actually get in the way?

Again, if all the cube interface does is "be less boring" then I think you should really look at alternatives. Spice up the language of the form. Instead of "address" put "Place where you want us to send spam printed on genuine dead trees!" (This might be off-putting if you are actually a spammer!). Try adding fun stuff. e.g. Right after name, add a field for "secret agent call-sign" (Possibly useful for password recovery). Play with the typography and interface. Make the form pleasant to look at. (I know the cube picture Roger posted above is just a quick and dirty mock-up, but if you think it looks remotely close to finished form you probably need to get help with this.)

Good luck!

Answer 8

The use of CSS to separate content and presentation is very well done. Users who prefer the enhanced graphical experience will be able to enjoy it, while users of text-based browsers and those who disable CSS stylesheets will see an unembellished linear version.The input validation appears to be quite effective at filtering out weak passwords and fake SSNs, though I could not completely test it because I did not want to divulge a real SSN. My only complaint is that the ordering is incorrect when viewed without CSS, though this can easily be fixed by rearranging the HTML div's.

Answer 9

I think it works wonderfully well from a user experience point of view, and I'd even go as far to suggest that in the not-too-distant future all web forms will use this model.

My only suggestion to improve is maybe speed up the animation - it might be a bit more difficult to select the form fields but I think the extra speed users would find exciting and more engaging.

Answer 10

Usability shouldn't be used in the same sentence as a link to this form sorry mate, its true.

You cant even see the form 75% of the time, how can you have a usable form you cannot even see.

Waste of your time, though impressive 3d css...

Ways to fix: Stop the cube spinning, pick colors that aren't blinding, marquee text for real? Show the form...always!

Answer 11

When I saw your example, I was sure it was just a tech demo and it wouldn't rotate while you were interacting with the form. But after reading through the responses and you comments, I guess I was wrong.

A rotating form would probably make you loose all your visitors.

Instead, I propose using the rotation to switch between different pages in the form. I'm thinking of something like the main menu in the PC game "The Chronicles of Riddick: Escape from Butcher Bay". This could make for a great effect, if you could make it quick and snappy.

Answer 12

Give full command to the users, like to when mouse move the cube should be move with the mouse, so this way user can quickly select sections(submit,form,other). currently i have to wait for the cube to turn to the right position.

Answer 13

Very innovative approach.

But I think the paradigm shift is not user friendly. What you are trying to do is change the way a user will do this in real life. This will not only challenge the user's perception but also increase his learning curve.

Imagine this in real life. I am holding a big cube and turning it around to write stuff on it. And then I am not sure how the other person will finally read it. Challenging Task Eh!

Think of something more realistic.

Answer 14

Your design is clearly a failure. With sufficient patience, it is actually possible to fill out (at least part of) the form. Since you're clearly trying to prevent that, you've failed.

Answer 15

"If not, what can I do to improve it?" - a few suggestions:

Make the colours something that do not hurt my eyes.

Stop the cube spinning all of the time.

Ensure that all of the data can be seen at once.

That is, make it like a proper input form.

Answer 16

I think that the concept would be really cool if instead of having the cube rotating without stopping, you use the cube rotation effect as a transition from one page to another. The cube should rotate to the first side and then stop, and give the user time to read the first side. When the user is finished with that, they can click the next button and have the cube rotate to the next side, and so on and so on.

That would add an interesting transition that I think would keep lots of users entertained :)

Answer 17

That works well if you're going to have no more than 6 pages.

Recognize that parts of the page won't be visible when they aren't facing forward. That could be a usability problem.

UIs have been made where there's a toolbar that rotates. Again, there was the limit of 4 faces and people couldn't make out what was on the side, confusing and frustrating users.

Proper orientation will be a challenge.

But sometimes people like being frustrated. Look at Angry Birds. People keep missing and the challenge gets harder and harder. But it's fun! It all depends on what you're trying to achieve.

Answer 18

Why don't you try it with some people? I think some user testing is in order.

You've spent all this time putting together a prototype, so why not let your users try it out. You haven't said what you're building this for exactly, so how can we know if it's good or not? Personally, I found your prototype kind of fun -- it could make a really fun game. If this is the case, user testing may give you positive results.

But, I doubt you're making a game. Chances are, your test subjects will just find it incredibly annoying. But who knows! That's the beauty of user testing -- there's almost always something to surprise you.