I'm working on a form that will be used to collect pieces of information on a person. The information has two main sections, "identifying" information like name, DoB, etc. and the second section is characteristics about the person, weight, height, etc.

Below is what I currently have but it seems unfriendly to me, I don't know how, I just am not a fan of it. Also, are the headers used the best way to pharse the sections? I kind of feel that I am sticking too much text into the area.


  • Just ask the user for their phone number, then call the NSA and get everything else.
    – SpYk3HH
    Commented Aug 23, 2013 at 20:43
  • 1
    @SpYk3HH you make me laugh
    – Justin
    Commented Aug 23, 2013 at 21:18
  • Do mean "Descent" instead of "Decent"?
    – obelia
    Commented Aug 23, 2013 at 22:38

6 Answers 6


I don't think your layout is bad at all. I would change the title from "Collection Form" to something more descriptive like "Personal Information". You also might want to communicate some reassurance that the info will be held securely and not abused.

The the section headings "Identifying Information" and "Characteristics" strike me as superfluous.

The horizontal rule lines under the headings could be removed and sectioning achieved simply with grouping/spacing (with or without the headings themselves). Other sectioning mechanisms include box backgrounds:


download bmml source – Wireframes created with Balsamiq Mockups

Just light backgrounds without borders to keep it from being too heavy.

This is all subjective - how much distinction do the sections need? I question whether they need any in your example. I'd be inclined to remove the headings and the horizontal rules, minimize it if you will, as it's all pretty much self identifying, and I question whether there is conceptually the need for 2 sections.


It depends how specific you need the information to be. Things can often seem "friendlier" in UI's if they are less specific or require less accuracy. This would allow you to use less text in favor of some graphic features. This may, however, have an impact on the outcome of your data and the amount of space required to get the form onto the screen.

Maybe this is a useful analogy:

Imagine that you go to an ice-cream parlor with your friend. You walk in the door and are handed a slip of paper with a series of options and checkboxes. You are asked to fill out the form and hand it to someone standing at a cash register, who then asks you for money. Following this exchange you are handed your ice-cream with the toppings you requested, are politely thanked, and then are asked to move along to make room for the next customer.

That would not be a very friendly way to serve ice-cream.

By comparison consider an ice-cream shop that prides itself on the customer experience. This example is an image of Cold Stone Creamery. Cold Stone Creamery Serving.

Those people actually look like they are having fun!

Now let's take a look at how they actually display the options... Ice Cream Display at Coldstone Creamery

Wow! Who wants Ice Cream!!

So, now let's take another look at your form...

Why not use silhouettes of a boy and girl for the gender selector (I am being simplistic here because the actual question may be more complex but I see no reason why you can't make a gender neutral way of using graphics).

Why not create a picture of an eye and let people use a color selector to actually modify the color of the eye to match their eyes... or their perception of their eyes. The same could be done for hair.

For decent you could let people pick where their ancestors are from on a map.

For height you might allow people to select from various famous figure who are different heights.

The problem, as you might already see, is that you sacrifice efficiency if you try to be too friendly - much like in our ice-cream parlor.

So - try to draw a balance. Consider what might make the experience, not just the appearance, a little more appealing and also think about how the balance of time spent vs. "friendliness" might affect the actual UX.

Hope this helps. Good luck!


A lot of visual noise is because of the lines and everything being same shade of black.

Here is the same screen with some lines lightened up, alignment updates, moved a couple of fields. More can be done by playig with font sizes and colors



enter image description here


I have spent 30 years writing transaction systems I realised a long time ago that these types of entry screens are rarely friendly just because they are extracting data from the user who gets little or no reward for their effort. The suggestions for lightening it up and moving some fields were good and ensure that the tabbing gets the User through the process quickly is the best you can do for them.

You wondered if you were inserting too much text and I would answer No. Each entry field needs to be identified and units of measure removes ambiguity so the user should be able to complete it with a minimum of effort. The text used to identify the entry should match the formality or informality of other forms that might be used so "Eye Color" is appropriate for more formal applications and "What color are your eyes?" for the informal.

Every entry form is important or it would have been written but judgements need to be made on how much agonising is needed. I suspect this form will be fill in once and then rarely if ever seen again so make it as efficient as you can with due consideration to how it looks and fits with the rest of the application. However put your major efforts into the screens that get used over and over by the users.


In GUI software there are two possibilities of grouping and separating blocks of input data. The first one is frame or bevel and it marks the entire block (please forgive the quality of examples, as I was able to do this only using VBA form editor of MS Word 2003, but they are representing the ideas):

enter image description here

In this case basic data like names are clearly more important that the Characteristics group of inputs.

The second way, when there are more auxiliary data to be inserted, we use tab (or page) control:

enter image description here

Here the separation effect is yet much better. When user changes tabs, the basic data still stay on top, so they are always visible and it is clear they are more important, because user can change the tab, so he knows the data is not that much value, because it is no need to be seen all the time.

In your case, as it seems you'd like to have it look like a paper form, consider putting the Characteristics chapter in box. This don't need to be a box, a single line on the left and margin could be enough,

like this text that is used to mark quotations. If you indent it, mark with the line on the left side, this would make a block, clearly separated from other text.

Also, the less important text can have smaller font size.


What you could also try is asking for information in a different way, more similar to what a human being would ask, for example "What's your eye color?" "What's your date of birth?". That would probably imply that you organise differently the fields, which could also give some space and improve legibility.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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