Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

enter image description here

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?

share|improve this question
284  
You are trolling. You've gotta be trolling. Please tell me you're trolling. –  Daniel Newman Sep 13 '11 at 21:06
23  
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
85  
Here's the long answer: no. –  DexterW Sep 13 '11 at 21:27
91  
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
82  
Oh god it's GeoCities in 3D! –  Ben Brocka Sep 14 '11 at 18:21

20 Answers 20

up vote 200 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!

enter image description here

share|improve this answer
93  
Roger, you are one hardcore MF. –  Rahul Sep 14 '11 at 11:32
5  
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  
@Roger Good news! I fixed your only real concern. –  Peter Olson Sep 15 '11 at 19:01
6  
@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

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
27  
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
15  
The <blink> tag was invented for a reason! –  Ben Brocka Sep 14 '11 at 20:54
9  
don't forget the <marquee> tag <3 –  JoséNunoFerreira Sep 15 '11 at 11:38
1  
I think the cube should rotate much faster, to give the user more opportunities to enter data. This would allow to add more fields to the form! –  Juan Lanus Apr 8 at 20:25

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
11  
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
24  
@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
8  
@Peter Of The Corn No nobody will wait for the cube to rotate enough. They will all exit the site laughing ironically –  Xalloumokkelos Sep 13 '11 at 21:45
11  
@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
2  
@Peter "You can wait for the cube to rotate enough" Like most people, I don't have an attention span anymore... if it takes that long... –  WernerCD Sep 14 '11 at 15:05

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
2  
Are you serious ? –  Xalloumokkelos Sep 13 '11 at 21:36
35  
Hey, I said IMO...some people like them left-aligned, and that's fine. –  Daniel Sep 13 '11 at 21:39
1  
I am not talking about the button alignment –  Xalloumokkelos Sep 13 '11 at 21:40
5  
+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
8  
I think we're being double teamed by a pair of trolls. ;) –  DA01 Sep 13 '11 at 21:46
  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
1  
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
4  
+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
3  
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

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.

share|improve this answer
3  
I'm having a hard time visualizing that, could you explain what that that would look like? –  Peter Olson Sep 14 '11 at 14:18
4  
@colmcq: In case that site goes down, that's a tesseract. –  Mechanical snail Oct 7 '11 at 0:34

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.

share|improve this answer
2  
lol +1 for addressing some issues no one else had. –  RoundTower Sep 15 '11 at 3:46

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!

share|improve this answer
    
Secret agent call sign made me laugh but at the same time its a very good idea! Great answer! +1 –  Isak Savo Sep 16 '11 at 20:39

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.

share|improve this answer
5  
Possibly a 100% increase in speed? –  muntoo Sep 15 '11 at 5:05

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!

share|improve this answer

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.

share|improve this answer
2  
How would you recommend fixing this? Should I make it spin more quickly? –  Peter Olson Sep 15 '11 at 15:29
3  
@Peter: Faster would help a little, but I think to really do the job well, you should make the movement more random. –  Jerry Coffin Sep 15 '11 at 15:42
    
@JerryCoffin I think he could also disable tabbing between fields. That made it WAAAY to easy. I get focus in one field, and I'm done! –  Peter Bagnall Oct 24 '12 at 18:08

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.

share|improve this answer

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.

share|improve this answer
4  
I don't think it's physically possibly to make the cube round –  Roger Attrill Sep 14 '11 at 6:15
2  
@Roger Sure it is... you just have to give the trolls a hammer and they'll rough out the edges. Or put it in a river for a few (hundred) years. –  WernerCD Sep 14 '11 at 15:09
4  
I want an edgeless safety cube! –  aslum Sep 14 '11 at 17:57

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
I'm going to note that there are actually some <marquee> tags. –  Pokechu22 Sep 19 at 1:14

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.

share|improve this answer

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.

share|improve this answer

protected by Community Sep 14 '11 at 22:59

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.