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

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 6

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 7

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 8

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 9

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 10

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

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

You said:

"If not, what can I do to improve it?"

Here are 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 15

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

As someone who has lived in this boring form world for far too long, I never thought I would live to see the day when someone would come along and completely break down barriers, cause a paradigm shift and rewrite the book on accessible and innovative forms... until now.

Some of my favourite things from a usability perspective you've added I think the likes of Google and Facebook should borrow to help drive up their conversion rates.

The inability to focus one side of the cube - This is brilliant. I love how I try and fill out the fields, but I have to wait for the cube face to roll back around again so I can quickly fill out another field. It took me about 6 minutes to fill out your form which I think is much better than other forms I've used that have taken me 30 seconds (jokes on them). I think keeping people on the signup page longer will definitely help lower your bounce rate.

The small unreadable labels - Why has nobody else thought of this? Everyone is concerned with making their forms nice and big, helpful contextual labels and other things to make the process of filling out a form easier (or so they say). I had to zoom in a couple of times to read the labels, but the speed of the cube means my eyes can't properly focus: good job.

The speed of the cube - When I first saw the title, I immediately thought, I bet they made the cube spin really slow and I'll be able to see the form labels and inputs clearly, how wrong I was. The speed of the cube is fast, but it's not too fast. It's just fast enough to make it hard for your eyes to focus and things to blur, but not too fast. I think the speed of the cube makes your site appear faster.

But, alas, there are some issues with your form:

That font isn't very appealing - I suggest trying out a nicer font, Comic Sans MS Bold would probably be my first choice. It's readable and it would make the spinning cube even more fun.

The green isn't bright enough - Sorry to say it, but that green just isn't bright enough. You could take it up quite a few shades lighter to appear more modern.

The submit button isn't centered - I think the submit button side of the cube should be centered. At the moment the submit button is aligned to the left and the text within the button isn't centered either. This is bad for accessibility and making those two small tweaks will make it definitely better. Consider making the button work with the design a little more by making it black or white. Grey tends to look very dated.

Lack of warmth or character - I think the lack of animated GIF's is really impacting the form, but not only that, I looked in the source and did not see one single instance of the <marquee> tag. Aesthetically it is a little TOO static for my liking, some movement in there could make it more fun (in combination with font change, of course).

Lack of validation - As far as I could tell, your form lacks validation and or validation messages. A form without validation is a usability nightmare, if possible, you should consider using the <marquee> tag for the validation messages to make them appear more friendly and less passive-aggressive like other forms I have encountered over the years.

The social security number label is too long - The label is wider than the others, you could try right aligning the labels or perhaps putting a line break on this text to make the lines a little shorter and more readable.

In Google Chrome (latest) on Mac OS the select dropdown is broken - The label text is appearing above the label.

Again in Google Chrome (latest) on Mac OS the heading on the legal info page is broken - The I is actually being cut-off, so I can only really see, "mportant legal information!!!"

Too many exclamation marks - Why are you shouting on the legal terms page? One, maximum, two exclamation marks. You know the rules? Don't spoil a great design with too many exclamation marks.

Overall great design, but an even better troll. This is probably one of the best troll questions I have ever read, even rivaling some of the questions I've come across on Yahoo! Answers, so good on you.

Answer 18

Ok, I admit I was skeptical but tried the working version and had so much fun with it!!

This is an absolute great idea for a game sign up form or something for kids, I feel signing up with this is a challenge and the signing up itself is the prize you get so would be perfect for a limited access community. Less input fields, less rotation, nicer looks and maybe user being able to drag it might make it really cool.

But well answering your question, in your case for this project it doesn't seem to work.

Answer 19

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 20

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.

Answer 21

Greatest thing since sliced bread

Here is a good library to add momentum: https://chrisbateman.github.io/impetus/

If you want to go further than just cubes: https://stackoverflow.com/questions/33629754/text-within-a-non-rectangular-shape-pentagon-or-hexagon

My old website.

Then I had to look for a job and decided to be more "normal"

Answer 22

I was thinking it would be better if you rearranged the text vertically, like this:

• k
• i
• l
• l
• m
• e
• :)

Answer 23

To be honest if this is on a standard computer screen I think this approach is a fail. You have already received lots of feedback that I am not going to repeat as all of the critics are quite valid and in-depth.

BUT

If you are thinking of this being a part of a VR /AR environment and the cube can be manipulated by hand then I think this is a novel approach to form entry for that kind of space. You could even insert the cube into a slot as a way to submit it.