Is this rotating cube interface user-friendly?

up vote 132 down vote favorite
56

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?

forms interaction-design
share|improve this question
edited Sep 15 '11 at 12:48

asked Sep 13 '11 at 21:05
spacer
Peter Olson
1,2522518
182  
You are trolling. You've gotta be trolling. Please tell me you're trolling. – Daniel Newman Sep 13 '11 at 21:06
13  
I think this works pretty well. However, you might consider switching to Arial to improve readability. Right-aligning labels is good too--but a matter of preference. – Daniel Sep 13 '11 at 21:25
63  
Here's the long answer: no. – DexterW Sep 13 '11 at 21:27
70  
Look at the bright side: if we've reached the point where people start trolling our community with funny questions, then I think we've achieved something. Don't you? Pat yourselves on the back, we're getting there! – Rahul Sep 14 '11 at 11:34
53  
Oh god it's GeoCities in 3D! – Ben Brocka Sep 14 '11 at 18:21
show 43 more comments

18 Answers

active oldest votes
up vote 145 down vote accepted

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!

spacer

share|improve this answer
answered Sep 13 '11 at 22:06
spacer
Roger Attrill
33.3k657121
15  
Why did somebody downvote this? This is an excellent answer. – Peter Olson Sep 13 '11 at 22:24
59  
Roger, you are one hardcore MF. – Rahul Sep 14 '11 at 11:32
4  
Just, if you're going to stick with this.. Make sure there is a very easy way to NOT use the cube. – user606723 Sep 14 '11 at 17:21
4  
@Rahul I'd flag you, but I upvoted you already! – muntoo Sep 15 '11 at 4:46
4  
@Peter That's great news! I feel much more comfortable using the cubiform (as I shall call it) now that I know my typing won't be lost and that I can also tab to the next item and start typing - assuming I remembered what the order of the inputs were. Perhaps audio cues would help with that! "Name" - "Address" - etc – Roger Attrill Sep 15 '11 at 19:20
show 7 more comments
up vote 102 down vote

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.

share|improve this answer
answered Sep 14 '11 at 13:55
spacer
Nathan Long
1,439136
15  
If you can play guitar with handcuffs on, then I think you deserve to be able to say "hey, I am awesome! Look what I can do!" – Rahul Sep 14 '11 at 18:22
7  
The <blink> tag was invented for a reason! – Ben Brocka Sep 14 '11 at 20:54
5  
don't forget the <marquee> tag <3 – JoséNunoFerreira Sep 15 '11 at 11:38
trololololololololololo.com – AndrewPK Feb 18 at 14:54
up vote 36 down vote

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.

share|improve this answer
edited Sep 21 '11 at 9:39

answered Sep 13 '11 at 21:19
spacer
Nikolai
70329
7  
I offset the downvoter. I will enhance your answer with "Are you frakking kidding me?!" HOW IN THE UNIVERSE IS IT FUN TO FILL OUT A FORM UPSIDE DOWN!? – Jay Stevens Sep 13 '11 at 21:41
15  
@Jay You don't have to if you don't want to. You can wait for the cube to rotate enough so that it's back to being right-side-up. – Peter Olson Sep 13 '11 at 21:43
5  
@Peter Of The Corn No nobody will wait for the cube to rotate enough. They will all exit the site laughing ironically – Nikolai Sep 13 '11 at 21:45
6  
LOLOLOLOLOLOLOLOLOLLLLLLLLLLL – droope Sep 14 '11 at 13:02
8  
@Nikolai Pretty sure there'll be no irony in the laughter at all. Unlike the irony in your not noticing irony, which is laughter filled with irony. – Adam Hepton Sep 14 '11 at 13:43
show 4 more comments
up vote 26 down vote
  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.

share|improve this answer
edited Sep 14 '11 at 15:14
spacer
N.N.
1035
answered Sep 14 '11 at 13:40
spacer
demallien
26122
yeah... if the "top" of the cube stayed put and it simply rotated around AND if it stopped rotating when the mouse was over it (or some other sort of "stop/go" button was implemented)... it MIGHT be useable atleast. as of right now... no. – WernerCD Sep 14 '11 at 15:07
1  
+1 for mentioning that the cube is distorted – Brendan Long Sep 14 '11 at 18:19
3  
+1 for suggesting a way in which a cube could plausibly be a useful, intuitive, usable interface. – RoundTower Sep 15 '11 at 3:43
What about text at a 287.65 degree angle? – muntoo Sep 15 '11 at 5:02
2  
The cube looks like it's getting distorted because it's an isometric projection instead of perspective. We're used to seeing 3D things rotate in perspective. – fluffy Sep 15 '11 at 20:53
up vote 25 down vote

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.

share|improve this answer
answered Sep 13 '11 at 21:35
spacer
Daniel
37424
1  
Are you serious ? – Nikolai Sep 13 '11 at 21:36
22  
Hey, I said IMO...some people like them left-aligned, and that's fine. – Daniel Sep 13 '11 at 21:39
4  
+1 for state drop-down order. I hadn't ever noticed that convention before. I'll implement that in the next build. – Peter Olson Sep 13 '11 at 21:41
4  
I think we're b
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.